h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Ongshidar base styles (functional, not a design pass) ---- */

:root {
    --brand: #B8502A;
    --ink: #2b2b2b;
    --muted: #6b6b6b;
    --border: #ddd;
    --paper: #fdfaf6;
    --due: #b32121;

    /* --- Admin redesign tokens (Products/Sales reference pass) --- */
    --surface-muted: #f5f2ee;
    --border-subtle: #ececec;
    --warning-bg: #fdf1e4;
    --warning-border: #f0d9c0;
    --warning-text: #9a5a1a;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 999px;
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.5rem;
    --control-height: 2.25rem;
}

body {
    font-family: "Noto Sans Bengali", "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    margin: 0;
    /* Safety net — no single element should ever cause the whole page to scroll sideways;
       a layout bug should clip, not push the viewport wider (confirmed live: the mobile
       header row was doing exactly that before its own width was fixed below). */
    overflow-x: hidden;
}

h1, h2 { color: var(--ink); }
/* Page-title h1s (e.g. "নতুন ক্রয়", "নতুন পণ্য") were rendering at the browser's unstyled
   default (~2em, ~0.67em top/bottom margin) — oversized for this app's density and leaving a
   large gap after BackLink above it. */
h1 { font-size: 1.5rem; margin: 0 0 1rem; }

a { color: var(--brand); }

label {
    display: block;
    margin: 0.75rem 0;
    font-size: 0.9rem;
    color: var(--muted);
}

label input:not([type=checkbox]):not([type=radio]):not([type=file]),
label select, label textarea,
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.25;
}

/* Remove iOS/Safari native select styling so CSS can fully control appearance —
   without this, iOS renders a custom native picker that ignores padding/height/background.
   The dropdown arrow still renders natively but now respects our layout and colors. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    /* Custom dropdown arrow — a chevron on the right that stays visible on all devices.
       Fits within the padding so it doesn't overlap text. */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.2rem;
    padding-right: 2.4rem;
}

input[type=file] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.95rem;
}

.checkbox-label, .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
}
.checkbox-label input, .radio-label input { width: auto; margin: 0; }

/* A due/partial-only filter is common enough to want visible at a glance, not hidden behind
   the ফিল্টার toggle like the date range — sits inline with ফিল্টার/এক্সপোর্ট instead. */
.toolbar-checkbox { font-size: var(--text-sm); color: var(--ink); white-space: nowrap; }

.required-mark {
    color: var(--due);
    margin-left: 0.15rem;
}

.field-help {
    margin: 0.1rem 0 0.75rem;
    font-size: 0.75rem;
    color: #8a8a8a;
    font-style: italic;
    line-height: 1.35;
    max-width: 420px;
}

.field-help-hint {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.field-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.3rem;
    background: none;
    color: var(--muted);
    border: none;
    border-radius: 50%;
    padding: 0;
    margin-top: 0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}
.field-help-icon:hover, .field-help-icon:focus-visible { color: var(--brand); }

.field-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.field-help-dialog {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    max-width: 420px;
    width: 100%;
    background: var(--paper);
    color: var(--ink);
}
.field-help-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.field-help-dialog-body { font-size: 0.9rem; line-height: 1.45; }
.field-help-dialog-body p { margin: 0 0 0.5rem; }
.field-help-dialog-body ul { margin: 0; padding-left: 1.1rem; }
.field-help-dialog-body li { margin: 0.2rem 0; }

.print-only { display: none; }

.more-info {
    margin: 1rem 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.1rem 1rem;
}
.more-info summary {
    cursor: pointer;
    padding: 0.75rem 0;
    font-weight: bold;
    color: var(--brand);
}
.more-info[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }

.field-hint { color: var(--muted); font-size: 0.85rem; font-weight: normal; }

.order-actions { justify-content: flex-start; flex-wrap: wrap; }

.add-zone-row { display: flex; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; }
.add-zone-row input[type="text"] { flex: 2; min-width: 140px; }
.add-zone-row input[type="number"] { flex: 1; min-width: 90px; }

/* A small, closed-by-default "what does this page do" note — visually distinct from .more-info
   (plain box for optional extra fields) via the tinted background + brand-colored left edge, so
   it reads as guidance rather than a form section, while staying out of the way until opened. */
.page-info {
    margin: 0.75rem 0 1.25rem;
    background: #fff6ee;
    border: 1px solid #f0d9c0;
    border-left: 3px solid var(--brand);
    border-radius: 6px;
    font-size: 0.85rem;
    max-width: 620px;
}
.page-info summary {
    cursor: pointer;
    padding: 0.55rem 0.9rem;
    font-weight: 600;
    color: var(--brand);
    list-style: none;
}
.page-info summary::-webkit-details-marker { display: none; }
.page-info summary::before { content: "▸ "; }
.page-info[open] summary::before { content: "▾ "; }
.page-info[open] summary { border-bottom: 1px solid #f0d9c0; }
.page-info-icon { margin-right: 0.15rem; }
.page-info-body {
    padding: 0.7rem 0.9rem 0.85rem;
    color: var(--ink);
    line-height: 1.6;
}
.page-info-body ul { margin: 0.2rem 0 0; padding-left: 1.2rem; }
.page-info-body li { margin: 0.3rem 0; }

.button.danger { background: var(--due); color: white; border-color: var(--due); }
.button.danger:hover { opacity: 0.9; }

.success-banner {
    background: #eaf7ef;
    border: 1px solid #a9dfc0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.success-banner p { margin: 0; color: #1d7a3f; }
.success-banner button { margin: 0; background: transparent; color: #1d7a3f; border: none; font-size: 1.1rem; padding: 0 0.25rem; }
.fb-share-prompt-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.fb-share-prompt-actions .button { background: var(--brand); color: white; border: 1px solid var(--brand); font-size: 1rem; padding: 0.4rem 1rem; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin: 1rem 0;
}
.empty-state p { color: var(--muted); max-width: 420px; margin: 0 auto 1rem; }

.first-visit-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
}
.first-visit-hint p { margin: 0; flex: 1 1 240px; color: var(--ink); font-size: 0.92rem; }
.first-visit-hint-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.first-visit-hint-actions .button { margin-top: 0; }

button, .button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--brand);
    color: white;
    border: 1px solid var(--brand);
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.5rem;
    white-space: nowrap;
}
.button.secondary { background: white; color: var(--brand); border: 1px solid var(--brand); }
.button.small { padding: 0.3rem 0.7rem; font-size: 0.8rem; margin-top: 0; }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; align-items: center; }

.error { color: var(--due); font-weight: bold; }

/* Applied alongside .error on form-submission failure messages that can otherwise render far
   below the fold on a long form (e.g. many product lines) — a shopkeeper had no way to notice
   why "সংরক্ষণ করুন" did nothing without scrolling all the way back to the top. Fixed
   positioning means it's visible immediately, wherever they were scrolled to, with no JS
   scroll-into-view needed. Not applied to .error text that's part of a page's normal content
   flow (e.g. an inline empty-state message) — only to transient validation/failure feedback. */
.error-toast {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: #fbeaea;
    border: 1px solid #f3c6c6;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    max-width: min(92vw, 32rem);
    margin: 0;
}
.success { color: #26b050; font-weight: bold; }
.muted { color: var(--muted); }
.contact-line { margin: 0.25rem 0; }

.line-item-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    border: 1px solid var(--border);
}
/* The bare-<button> "✕" remove-line control was inheriting the base button, .button rule's
   full brand-orange fill/padding — far too heavy for a small per-row remove action. */
.line-item-table .remove-line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--muted);
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}
.line-item-table .remove-line-btn:hover { color: var(--due); border-color: var(--due); background: #fdecec; }
.add-line-btn { margin-top: 0.5rem; min-height: 2.5rem; font-weight: 600; }
.line-item-table th, .line-item-table td {
    text-align: left;
    padding: 0.5rem;
    border: 1px solid var(--border);
}

/* .data-table: softened list-page table — no vertical cell borders, subtle horizontal row
   separators only, subtle header background, generalized row hover, numeric columns
   right-aligned via a manual .num class on the relevant <td>/<th>. Kept deliberately
   separate from .line-item-table (purchase/sale entry-form line items), which keeps its
   full-grid look unchanged. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-4);
    border: none;
}
.data-table th, .data-table td {
    text-align: left;
    padding: var(--space-3);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
}
.data-table thead th {
    background: var(--surface-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.data-table th.sortable-th { cursor: pointer; user-select: none; }
.data-table th.sortable-th:hover { color: var(--brand); }
.data-table .sort-indicator { font-size: var(--text-xs); margin-left: var(--space-1); }
.data-table .filter-row-inline th { padding: 0.25rem var(--space-2); }
.data-table .filter-row-inline input {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 0.3rem var(--space-2);
    font-size: var(--text-sm);
    font-weight: normal;
}
.data-table tbody tr:hover { background: #f2ece5; }
.record-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.record-link:hover { color: var(--brand); text-decoration: underline; }
.data-table tr.clickable-row { cursor: pointer; }
.data-table tr.inactive-row { opacity: 0.5; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.due-amount { color: var(--due); font-weight: bold; }

/* When a .num cell also carries a trailing .status-badge (e.g. স্টক), text-align:right on the
   td would right-align the number+badge as one unit — shifting the digits left on rows that
   have a badge versus rows that don't, so the numbers stop lining up under the header. Stacking
   them in a column keeps the number on its own right-aligned line always, badge on the next. */
.num-with-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }

.due-summary { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink); }
.due-summary strong { color: var(--due); }

/* Paid/due breakdown shown next to a বাকি/আংশিক status badge — a shop owner shouldn't have to
   infer one figure from the other when only one is displayed. */
.payment-breakdown { font-size: var(--text-xs); white-space: nowrap; }
.data-table .payment-breakdown { margin-top: 0.2rem; }

/* Non-interactive status indicator — distinct from .pill (always a clickable toggle) and
   from .button. Quiet by default; -warning/-danger carry slightly more visual weight for
   things the user genuinely needs to notice (কম স্টক, বাকি), without using the same bold red
   as .due-amount (reserved for currency figures) so a warning badge doesn't read as an error. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.status-badge-neutral { background: var(--surface-muted); color: var(--muted); }
.status-badge-positive { background: #eaf7ef; color: #1d7a3f; }
.status-badge-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.status-badge-danger { background: #fbeaea; color: var(--due); }

/* Compact row actions: pencil/eye/share as .row-icon-btn on wide screens (tooltip via
   title=), collapsing into a .row-menu "⋮" popover below 860px so crowded action cells don't
   overflow on tablet. Same open/catcher/Escape/outside-click mechanism as MoreMenu.razor's
   .nav-dropdown, reused here with distinct class names. */
.row-actions { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }
.row-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    /* Match the outlined secondary action beside it so the card action group reads as one. */
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.row-icon-btn:hover { color: var(--brand); border-color: var(--brand); background: #f2ece5; }
.row-menu { position: relative; display: inline-block; }
.row-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.row-menu-trigger:hover { color: var(--brand); border-color: var(--brand); background: #fdf3ec; }
.row-menu-catcher { position: fixed; inset: 0; z-index: 900; background: transparent; }
.row-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    z-index: 901;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}
.row-menu-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: none;
    color: var(--ink);
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    white-space: normal;
}
.row-menu-item:hover { background: #f2ece5; color: var(--brand); }
.row-menu-item-danger { color: var(--due); }
.row-menu-item-danger:hover { background: #fbeaea; color: var(--due); }
@media (max-width: 860px) {
    .row-icon-collapsible { display: none; }
}

/* Order actions row — unified Primary + Menu pattern on desktop and mobile */
.order-actions-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

.button.compact {
    height: 36px;
    padding: 0 11px;
    font-size: 15px;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-menu-trigger.compact {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 16px;
}

/* Compact page-title context help — "পণ্য ⓘ" pattern (ContextHelp.razor wrapping
   FieldHelp.razor) replacing PageInfoNote's permanent banner on list pages that have
   adopted the new toolbar system. */
.context-help .field-help-icon { font-size: 1.1rem; width: 1.4rem; height: 1.4rem; vertical-align: 0.05em; }

/* Standalone "ⓘ সাহায্য" placement for pages whose heading isn't a plain <h1> (e.g. Reports,
   whose title lives inside ReportHeader, a shared print/PDF-header component ContextHelp
   shouldn't be embedded in). */
.report-page-help { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 1rem; }
.report-range-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: end;
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.report-range-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.report-range-label { color: var(--muted); font-size: var(--text-sm); }
.report-range-copy strong { font-size: 1.05rem; }
.report-period-presets { grid-column: 1 / -1; }
.report-custom-dates { display: flex; flex-wrap: wrap; gap: var(--space-3); grid-column: 1 / -1; }
.report-custom-dates label { display: flex; flex: 1 1 180px; flex-direction: column; gap: 0.35rem; margin: 0; font-size: var(--text-sm); }
.report-custom-summary { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.report-custom-summary strong { color: var(--ink); font-weight: 600; }
.report-range-export { justify-self: end; }

/* List-page toolbar: search + ফিল্টার toggle + এক্সপোর্ট, all one row, wraps on narrow
   widths instead of scrolling/overflowing. */
.list-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.toolbar-search { min-width: 220px; flex: 1 1 220px; height: var(--control-height); }
.filter-toggle.active { background: var(--surface-muted); border-color: var(--muted); color: var(--ink); }
/* Row layout with wrapping on tablet/laptop/desktop — a date-range filter with 2-4 fields
   should read as one glance-able line (or two at most), not one field per full-width row. Only
   mobile (see the 640px block below) goes back to a single stacked column, where a row would
   be too cramped. */
.filter-panel {
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-2) 0 var(--space-4);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
}
.filter-panel > label { flex: 1 1 180px; min-width: 160px; margin: 0; }
.filter-panel > label.checkbox-label { flex: 0 0 auto; }
.filter-panel-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; align-items: center; }
.active-filter-bar { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); }

/* Export menu ("↓ এক্সপোর্ট ▾") — same dropdown mechanism as .nav-dropdown/.row-menu. */
.export-menu { position: relative; display: inline-block; }
.export-menu-catcher { position: fixed; inset: 0; z-index: 900; background: transparent; }
.export-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    z-index: 901;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}
.export-menu-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    background: none;
    color: var(--ink);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
}
.export-menu-item:hover { background: #f2ece5; color: var(--brand); }

/* Mobile card list (≤640px) — replaces the horizontally-scrolling table for a page. Both
   blocks always render server-side; the 640px media query toggles which is visible (same
   CSS-only approach already used for the admin bottom-nav/desktop-nav split). Every real
   usage carries BOTH "record-card-list" and "mobile-only-list" on the same element — the
   hiding rule below is keyed to that combined selector (specificity 0,2,0) specifically so it
   always beats the plain ".record-card-list { display:flex }" rule regardless of which is
   declared later in this file. A single-class ".mobile-only-list { display:none }" rule here
   previously lost that tie on desktop (identical 0,1,0 specificity, last-declared-wins), so
   both the desktop table AND the "mobile" card list rendered visibly at once above 640px on
   every page using this pattern (confirmed live: Orders/Sales/Purchases all affected). */
.record-card-list.mobile-only-list { display: none; }
/* Generic mobile record-card layout — used by Sales and Purchases (and any future list page
   that adopts a mobile card view instead of a scrolling table) so both stay visually
   identical rather than each page inventing its own. */
.record-card-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.record-card { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) 0; }
.record-card.inactive-row { opacity: 0.5; }
.record-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
/* min-width: 0 is required for a flex child's text-overflow ellipsis to actually kick in —
   without it the title refuses to shrink below its content width and pushes the amount (the
   other thing that needs to stay visible at a glance) off the edge of the card instead. */
.record-card-title { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card-amount { font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.record-card-subtitle { font-size: var(--text-sm); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-card-bottom { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.record-card-bottom .status-badge { margin-left: auto; }
.record-card-action { margin-left: auto; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

/* Shared record-detail hierarchy: identity and state first, one compact action group next,
   then the page's financial summary and content sections. */
.detail-identity { margin-bottom: var(--space-4); }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.detail-title-copy { min-width: 0; }
.detail-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.detail-title-line h1 { margin: 0; }
.detail-subtitle { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.detail-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.detail-primary-actions .button { margin-top: 0; }
.detail-section { border-top: 1px solid var(--border-subtle); padding: var(--space-4) 0; }
.detail-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.detail-section-heading h2 { margin: 0; }
.detail-key-values { margin: var(--space-2) 0 0; }
.detail-key-values > div { display: grid; grid-template-columns: minmax(8rem, 0.35fr) 1fr; gap: var(--space-3); padding: var(--space-1) 0; }
.detail-key-values dt { color: var(--muted); }
.detail-key-values dd { margin: 0; min-width: 0; }
.mobile-product-list { display: none; }
.mobile-product-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.mobile-product-row-top { display: flex; justify-content: space-between; gap: var(--space-3); }
.mobile-product-row-meta { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Distinct from .button/.button.secondary on purpose — this always navigates to a separate
   report page rather than acting on the current one, so it shouldn't compete visually with
   the primary "+ নতুন..." action or look like another in-page control (ফিল্টার/এক্সপোর্ট). */
.page-report-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}
.page-report-link:hover { color: var(--brand); }

.filter-pills { display: flex; gap: 0.4rem; }
.pill {
    background: white;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 0;
}
.pill.active { background: var(--brand); color: white; border-color: var(--brand); }

.stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}
.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    min-width: 160px;
    text-decoration: none;
    color: var(--ink);
    display: block;
    transition: box-shadow 0.15s, border-color 0.15s;
}
a.stat-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(184, 80, 42, 0.12); }
.stat-card.stat-card-alert { background: var(--warning-bg); border-color: var(--warning-border); }
a.stat-card.stat-card-alert:hover { border-color: var(--brand); }
.stat-card .status-badge { margin-top: 0.5rem; }

.settings-section {
    margin: 2rem 0 1rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.settings-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    min-width: 160px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}

a.settings-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(184, 80, 42, 0.12); }

.settings-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.settings-card > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-label {
    font-weight: 600;
    color: var(--ink);
    display: block;
}

.settings-sub {
    font-size: 0.85rem;
    color: var(--muted);
    display: block;
}

.social-connections { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.social-connection-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    min-width: 200px;
}
.social-connection-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.facebook-page-choices { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }

.facebook-post-action { margin: 1rem 0; }
.facebook-preview-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.facebook-preview-modal {
    background: var(--paper);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.facebook-preview-modal h2 { margin-top: 0; }
.facebook-preview-image { width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px; margin-bottom: 0.75rem; }
.facebook-preview-modal textarea { width: 100%; }
.facebook-publish-success { text-align: center; }
.facebook-publish-success .success { font-size: 1.2rem; }

.small { font-size: 0.85rem; }

.icon-button {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 1;
    font-size: 1.05rem;
    padding: 0;
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.icon-button:hover { background: var(--paper); }

.fb-promote-modal { max-width: 420px; }
.fb-promote-header { display: flex; align-items: center; justify-content: space-between; }
.fb-promote-header h2 { margin: 0; }
.fb-promote-header .icon-button { border: none; font-size: 1.2rem; }
.fb-promote-field { display: block; margin-top: 0.75rem; }
.fb-promote-copy-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.fb-promote-link-inline {
    display: inline;
    background: none;
    color: var(--brand);
    border: none;
    border-bottom: 1px dashed var(--brand);
    border-radius: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
}
.fb-promote-link-inline:hover { border-bottom-style: solid; }
.fb-promote-share-btn { display: block; text-align: center; margin-top: 0.75rem; }

.pay-due-modal { max-width: 380px; }
.pay-due-summary { display: flex; flex-direction: column; gap: 0.35rem; background: var(--surface-muted); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.pay-due-summary div { display: flex; justify-content: space-between; align-items: baseline; }
.pay-due-summary strong { font-size: 1.1rem; }
.pay-due-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.due-sale-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
.due-sale-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.due-sale-card-header a { font-weight: 600; }
.due-sale-card-items { font-size: 0.9rem; margin-bottom: 0.6rem; }
.due-sale-card-totals { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.7rem; }
.due-sale-card-totals div { display: flex; flex-direction: column; gap: 0.15rem; }
.due-sale-card-totals strong { font-size: 1.05rem; }
.due-sale-card.settled { opacity: 0.85; }
.due-sale-card-footer { display: flex; align-items: center; gap: 0.6rem; }

.quick-view-trigger { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; text-align: left; }
.quick-view-modal { max-width: 420px; }
.quick-view-table tfoot td { border-top: 2px solid var(--border); padding-top: 0.5rem; }
.quick-view-return-link { background: none; border: none; padding: 0; margin-top: 0.2rem; font-size: 0.8rem; color: var(--due); text-decoration: underline; cursor: pointer; }
.quick-view-confirm { margin-top: 0.4rem; background: var(--surface-muted); border-radius: 6px; padding: 0.6rem 0.75rem; }
.quick-view-confirm p { margin: 0 0 0.3rem; }

.order-products-table tfoot td { border-top: 2px solid var(--border); padding-top: 0.6rem; }

/* One clear card per product for "কতটি ফেরত দিয়েছেন?" — replaces a cramped multi-column table
   with tiny inputs (explicit feedback: confusing, not touch-friendly on mobile). */
.return-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
}
.return-item-info { min-width: 0; }
.return-item-info .product-name { font-weight: 600; }
.return-item-kept { margin-top: 0.15rem; }
.return-item-qty {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}
.return-item-qty label { font-size: var(--text-xs); color: var(--muted); }
.return-item-qty input {
    width: 5rem;
    height: var(--control-height);
    font-size: var(--text-lg);
    text-align: center;
    padding: 0.25rem;
}
.dismissible-alert { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; border-radius: 6px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.dismissible-alert p { margin: 0; }
.dismissible-alert button { background: transparent; border: none; font-size: 1.1rem; padding: 0 0.25rem; margin: 0; cursor: pointer; line-height: 1; flex-shrink: 0; }
.dismissible-alert-success { background: #eaf7ef; border: 1px solid #a9dfc0; }
.dismissible-alert-success p, .dismissible-alert-success button { color: #1d7a3f; }
.dismissible-alert-error { background: #fbeaea; border: 1px solid #f3c8c8; }
.dismissible-alert-error p, .dismissible-alert-error button { color: var(--due); }
.dismissible-alert-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); }
.dismissible-alert-warning p, .dismissible-alert-warning button { color: var(--warning-text); }
.dismissible-alert-info { background: var(--surface-muted); border: 1px solid var(--border); }
.dismissible-alert-info p, .dismissible-alert-info button { color: var(--ink); }

.stat-label { display: block; font-size: 0.85rem; color: var(--muted); }
.stat-value { display: block; font-size: 1.5rem; font-weight: bold; color: var(--ink); }
.stat-sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }

.quick-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.inline-form input { width: auto; }

.filter-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-row label { margin-bottom: 0; }

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.back-link:hover { color: var(--brand); }

.total-line { font-size: 1.25rem; }

.auth-page, .onboarding {
    max-width: 480px;
    margin: 2rem auto;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.landing {
    max-width: 640px;
    margin: 1.5rem auto 2rem;
    text-align: center;
}
.cta-row { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.landing-browse-link { margin-top: 1rem; }

/* ---- Public storefront (PROJECT_PLAN.md §21 Phase 5) ---- */

.site-header {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.site-logo-icon { width: 68px; height: 68px; flex-shrink: 0; object-fit: contain; }
.site-logo-text { font-weight: 700; font-size: 1.15rem; color: var(--brand); }

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.site-header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--ink);
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
}
.site-header-icon.has-value { color: var(--brand); }
.site-header-icon::-webkit-details-marker { display: none; }
.site-header-icon:hover { background: #f2ece5; }
.site-header-icon-glyph { font-size: 1.15rem; line-height: 1; }
.site-header-icon-label { font-size: 0.85rem; }
.site-header-icon .badge {
    background: var(--brand);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
}

.site-header-dropdown { position: relative; }
.site-header-dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    /* Sized to its widest item (not a fixed min-width) so a long label like "মোবাইল,
       কম্পিউটার ও ইলেকট্রনিক্স" never wraps to a second line — capped at 92vw as a safety
       net on very narrow phones only, never a normal constraint. */
    width: max-content;
    max-width: 92vw;
}
.site-header-dropdown-panel a {
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.9rem;
    white-space: nowrap;
}
.site-header-dropdown-panel a:hover { background: #f2ece5; }
.site-header-dropdown-panel a.active { background: var(--brand); color: white; font-weight: 600; }
.site-header-dropdown-panel a.active:hover { background: var(--brand); }

.storefront-page { max-width: 1120px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }

.storefront-header { margin-bottom: 1.5rem; }

/* WhatsApp's own green, reserved exclusively for WhatsApp CTAs so it stays instantly
   recognizable (PROJECT_PLAN.md §18 design reference). */
.whatsapp-btn { background: #25D366; border-color: #25D366; color: white; }
.whatsapp-btn:hover { opacity: 0.92; }
.whatsapp-icon { vertical-align: -3px; }

.landing { max-width: 1120px; margin: 0 auto; padding: 2.15rem 1rem .5rem; }
.landing-hero { max-width: 720px; margin: 0 auto; text-align: center; }
.landing-kicker, .section-kicker { color: var(--brand); font-size: .84rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 .45rem; }
.landing-hero h1 { margin: 0; font-size: clamp(1.8rem, 2vw, 2rem); line-height: 1.2; }
.landing-hero > p:last-child { margin: .7rem auto 0; max-width: 570px; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.storefront-search { display: flex; gap: 0.5rem; margin: 1.35rem auto 0; padding: 0; max-width: 620px; }
.landing-search input { min-height: 3.5rem; font-size: 1.05rem; }
.landing-search button { min-height: 3.5rem; padding-inline: 1.35rem; }
.storefront-search input { margin: 0; }
.storefront-search button { margin: 0; }

.storefront-section { margin-top: 2.2rem; }
.storefront-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.storefront-section-heading h2 { margin: 0; }

.storefront-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Settings is deliberately arranged by task instead of one long field list. The two cards use
   desktop space well, while the same sequence collapses to one calm, readable column on phone. */
.settings-form { max-width: 960px; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.settings-form-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.settings-form-card h2 { font-size: var(--text-lg); margin: 0; }
.settings-form-card > .muted { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); }
.settings-form-card label { margin: var(--space-3) 0; }
.settings-form-card label input:not([type=checkbox]):not([type=radio]),
.settings-form-card label select, .settings-form-card label textarea,
.settings-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.settings-compact-grid label { margin: 0; }
.settings-details { max-width: none; margin: var(--space-4) 0; background: white; }
.settings-save-bar { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.settings-save-bar button { min-width: 13rem; }
.settings-promotion { max-width: 520px; margin-top: var(--space-5); background: white; }
.settings-promotion > .muted { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.settings-security { max-width: 520px; margin-top: var(--space-5); background: white; }
.settings-security > .muted { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.settings-security label { margin: var(--space-3) 0; }
.settings-security label input:not([type=checkbox]):not([type=radio]) { max-width: none; }
.settings-security button { margin-top: var(--space-2); }

@media (max-width: 700px) {
    .settings-form-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .settings-form-card { padding: var(--space-4); }
    .settings-compact-grid { grid-template-columns: 1fr; gap: 0; }
    .settings-details { margin: var(--space-3) 0; }
    .settings-save-bar { display: block; }
    .settings-save-bar button, .settings-security button { width: 100%; }
}
.storefront-card-wrapper { position: relative; }
.storefront-card-wrapper:not(.favorite-card-wrapper) { display: flex; }
.storefront-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.storefront-card:hover { border-color: #e2c8b8; box-shadow: 0 4px 14px rgba(44, 32, 20, 0.09); }
/* Fixed-size media box regardless of whether the card has a real photo or the 📦 placeholder,
   and regardless of that photo's own aspect ratio — without this, a portrait photo (tall)
   sized itself differently than a landscape photo or the placeholder icon, so the title/price
   below started at a different height card-to-card in the same row. object-fit:contain
   letterboxes any source image inside the same fixed square instead. */
.storefront-card-media {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f6f2ed;
}
.storefront-card-media img { width: 94%; height: 94%; margin: 3%; object-fit: contain; display: block; }
.storefront-card-noimage {
    width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; background: #f2ece5; color: var(--muted);
}
.storefront-card-noimage.large { aspect-ratio: 4/3; font-size: 4rem; border-radius: 8px; }
.storefront-card-body { padding: .8rem .9rem .85rem; display: flex; flex-direction: column; flex: 1; min-height: 5.75rem; }
/* Keep names safely clamped, but don't reserve an empty second line. This makes the important
   name → price relationship compact like a marketplace card; equal media/grid sizing still
   keeps all cards aligned. */
.storefront-card-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.storefront-card-price { color: var(--brand); font-weight: 700; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.storefront-card-price.contact-price { font-size: .92rem; line-height: 1.3; }
.storefront-card-shop {
    font-size: 0.8rem;
    margin-top: auto;
    padding-top: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.favorite-heart {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
}
.favorite-heart:hover { color: var(--due); }
.favorite-heart.active { color: var(--due); }

.storefront-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.storefront-detail-title-row h1 { margin: 0; }
.storefront-detail-title-row .favorite-heart { position: static; flex-shrink: 0; background: #f2ece5; }

.storefront-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
/* Carousel container with left/right nav buttons instead of a scrollbar. */
.storefront-shop-carousel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    width: 100%;
    min-height: 160px;
}
/* A single scrollable row ("slider" without an auto-rotating carousel — plain horizontal
   scroll + snap, no JS needed to scroll, but buttons trigger the scroll). */
.storefront-shop-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.6rem 0.25rem 0.75rem;
    scroll-snap-type: x proximity;
    /* Hide native scrollbar — carousel buttons replace it. */
    scrollbar-width: none;
    /* Let the row flex to fill available space, pushing buttons to edges. */
    flex: 1;
    min-width: 0;
}
.storefront-shop-row::-webkit-scrollbar { display: none; }

/* Left/right carousel navigation buttons. */
.carousel-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--brand);
    border-radius: 50%;
    background: white;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(184, 80, 42, 0.15);
    z-index: 2;
}
.carousel-btn:hover {
    background: var(--brand);
    color: white;
    box-shadow: 0 2px 8px rgba(184, 80, 42, 0.3);
}
.carousel-btn:active { transform: scale(0.92); }
.storefront-shop-card {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 220px;
    scroll-snap-align: start;
    min-height: 132px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem 1rem 1rem;
    text-decoration: none;
    color: inherit;
    background: white;
}
.storefront-shop-card:hover { border-color: var(--brand); }
.storefront-shop-name {
    font-weight: 700;
    font-size: 1.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.storefront-shop-type { margin-top: 0.15rem; }
/* Solid pill badge overlapping the card's top border — deliberately opaque (not the previous
   plain muted/left-aligned text) so it reads as a clear location tag rather than blending in. */
.storefront-shop-location-badge {
    position: absolute;
    top: -0.65rem;
    left: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.storefront-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}
.storefront-detail-main-image {
    width: 100%;
    border-radius: 8px;
    object-fit: contain;
    max-height: 500px;
    background: linear-gradient(135deg, #f9f7f4 0%, #f2ece5 100%);
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.storefront-detail-main-image:hover { opacity: 0.9; }
.storefront-thumb-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
    scroll-behavior: smooth;
}
.storefront-thumb-row img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.storefront-thumb-row img:hover { border-color: var(--muted); }

/* Gallery modal styles */
.gallery-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gallery-modal {
    position: relative;
    background: black;
    width: 90vw;
    height: 85vh;
    max-width: 1000px;
    max-height: 700px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.gallery-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.gallery-close:hover { background: rgba(0, 0, 0, 0.8); }

.gallery-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: imageIn 0.3s ease;
}

@keyframes imageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gallery-counter {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 1002;
    transition: background 0.15s;
}

.gallery-nav:hover { background: rgba(0, 0, 0, 0.75); }

.gallery-prev { left: 1rem; }
.gallery-next { right: 1rem; }

.gallery-thumbs-container {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.gallery-thumb {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
    overflow: hidden;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb.active {
    border-color: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.gallery-thumb:hover { border-color: rgba(255, 255, 255, 0.5); }

/* Mobile: hide arrows and optimize layout */
@media (max-width: 640px) {
    .gallery-modal { max-height: 100vh; }
    .gallery-image-container { min-height: 200px; }
    .gallery-nav { width: 40px; height: 40px; font-size: 1.5rem; }
    .gallery-counter { font-size: 0.85rem; }
    .gallery-close { width: 40px; height: 40px; font-size: 1.3rem; }
}
.storefront-detail-price { font-size: 1.4rem; color: var(--brand); font-weight: 700; margin: 0.5rem 0; }
.storefront-detail-description { line-height: 1.6; white-space: pre-wrap; }
.storefront-detail-full-description {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.storefront-detail-full-description h2 { margin: 0 0 0.75rem; }
.storefront-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0; }
.storefront-share { margin-top: 1rem; }
.storefront-share summary { cursor: pointer; font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 0.35rem; padding: 0; }
.storefront-share summary::before { content: "▶"; display: inline-block; transition: transform 0.2s; font-size: 0.85rem; }
.storefront-share[open] summary::before { transform: rotate(90deg); }
.storefront-share-body { padding: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.storefront-share-body .button { margin: 0; }
.storefront-share-body .button:disabled { opacity: 0.65; cursor: default; }

.contact-for-price { font-size: 1.1rem !important; }

/* Public "অর্ডার করুন" modal — same backdrop/panel/Escape mechanism as MobileMoreSheet's nav
   sheet, but its own class names since that one is mobile-only-styled (bottom-anchored sheet
   inside a max-width:640px media query) and this needs to look right at every width: a
   centered, modest-width panel on desktop, comfortably full-width on small screens. */
.order-now-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.order-now-panel {
    background: var(--paper);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 1.25rem;
}
.order-now-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.order-now-product-line { font-weight: 600; margin-bottom: 0.75rem; }
.order-now-total-line { margin: 1rem 0; padding-top: 0.75rem; border-top: 1px solid var(--border); line-height: 1.6; }
.order-now-success { text-align: center; }
.order-now-success-check { color: #2f7d3a; font-size: 1.2rem; font-weight: 700; }

.storefront-availability { font-weight: 600; margin: 0.25rem 0 0.75rem; }
.storefront-availability.in-stock { color: #2f7d3a; }
.storefront-availability.out-of-stock { color: var(--due); }
.storefront-availability-tag { font-size: 0.78rem; font-weight: 600; margin-top: 0.15rem; }
.storefront-availability-tag.in-stock { color: #2f7d3a; }
.storefront-availability-tag.out-of-stock { color: var(--due); }

.storefront-shop-description { margin: 0.5rem 0 0; line-height: 1.5; }
.storefront-shop-count { font-size: 0.8rem; color: var(--muted); margin-top: auto; padding-top: 0.4rem; }

.storefront-pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

.storefront-about, .storefront-seller-card { margin-top: 1.25rem; }
.storefront-about summary, .storefront-seller-card summary { cursor: pointer; font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 0.35rem; padding: 0; }
.storefront-about summary::before, .storefront-seller-card summary::before { content: "▶"; display: inline-block; transition: transform 0.2s; font-size: 0.85rem; }
.storefront-about[open] summary::before, .storefront-seller-card[open] summary::before { transform: rotate(90deg); }
.storefront-about-body, .storefront-seller-body { padding: 0.75rem 0 0; }
.storefront-about-body p { margin: 0.35rem 0; }
.storefront-seller-name { font-weight: 700; margin-bottom: 0.25rem; }
.storefront-seller-body .button { margin-top: 0.5rem; margin-right: 0.5rem; }

/* Hidden on desktop — a compact always-visible contact bar only makes sense once buttons
   would otherwise scroll out of view on a small screen. */
.storefront-sticky-actions { display: none; }

.landing-search { max-width: 480px; margin-left: auto; margin-right: auto; }
.landing-cta-section {
    max-width: 640px; margin: 3rem auto 1rem; text-align: center;
    padding: 1.5rem; border-top: 1px solid var(--border);
}
.landing-cta-section .muted { margin: 0.35rem 0 1rem; }

/* Short public legal/help pages: deliberately quiet, readable and independent of the
   admin layout so visitors can understand the rules without signing in. */
.legal-page { max-width: 780px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.legal-page > h1 { margin: 0; }
.legal-page > p { line-height: 1.7; }
.legal-page section { margin-top: 2rem; }
.legal-page h2 { font-size: 1.25rem; margin: 0 0 0.55rem; }
.legal-page section p, .legal-page li { line-height: 1.7; }
.legal-page ul { padding-left: 1.25rem; }
.legal-updated, .legal-intro { color: var(--muted); margin-top: 0.45rem; }
.faq-page details { border: 1px solid var(--border); border-radius: 6px; background: white; margin-top: 0.65rem; padding: 0.85rem 1rem; }
.faq-page summary { color: var(--ink); cursor: pointer; font-weight: 700; }
.faq-page details p { margin: 0.75rem 0 0; line-height: 1.65; }

/* The favorites page's card + WhatsApp/কল করুন actions are two separate elements
   (.storefront-card and .favorite-card-actions, siblings inside this wrapper) — favorites.js
   builds it that way because a <button>/<a> action row can't legally nest inside the card's
   own <a> tag. Without this rule the border/radius lives only on .storefront-card, so the
   actions row renders as a visually disconnected block below it (confirmed live). Moving the
   border/radius/shadow here and stripping them from the inner .storefront-card makes the whole
   wrapper read as one card, with the actions row as its footer. */
.favorite-card-wrapper {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.15s;
}
.favorite-card-wrapper:hover { box-shadow: 0 2px 10px rgba(184, 80, 42, 0.15); }
.favorite-card-wrapper .storefront-card { border: none; border-radius: 0; }
.favorite-card-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.75rem; border-top: 1px solid var(--border);
}
/* flex: 1 1 auto (not flex: 1, which forces an equal 0%-basis split regardless of content) —
   confirmed live: that was squeezing "কল করুন" narrow enough to wrap onto two lines. Buttons
   now size to their own text and only wrap to a second row if the card is too narrow for both
   on one line, never mid-word. */
.favorite-card-actions .button { flex: 1 1 auto; text-align: center; white-space: nowrap; }

.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    background: #f2ece5;
}
.site-footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1.5rem;
}
.site-footer-brand .site-logo { margin-bottom: 0.5rem; }
.site-footer-brand p { max-width: 320px; }
.site-footer-column h3 { font-size: 0.9rem; margin: 0 0 0.6rem; color: var(--muted); }
.site-footer-column { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer-column a { color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.site-footer-column a:hover { color: var(--brand); text-decoration: underline; }
.site-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1rem;
    text-align: center;
}
.site-footer-bottom p { margin: 0; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 640px) {
    /* Reduced padding/gap and a smaller logo — the desktop sizing (1rem header padding + a
       32px logo icon + six 44px-min icons) added up to ~446px, wider than a 375-414px phone
       viewport, and was pushing the row off both edges (confirmed live). */
    .site-header { flex-wrap: nowrap; padding: 0.6rem 0.5rem 0; gap: 0.4rem; }
    .site-logo { gap: 0.35rem; }
    /* Keep the brand mark clearly more prominent than an individual navigation icon while
       preserving enough room for all five compact mobile actions. */
    .site-logo-icon { width: 64px; height: 44px; }
    .site-logo-text { font-size: 1rem; }
    .site-header-actions { gap: 0; flex-shrink: 0; }
    .site-header-icon-label { display: none; }
    .site-header-icon { padding: 0.4rem; min-width: 38px; min-height: 38px; justify-content: center; }
    .site-header-icon-glyph { font-size: 1rem; }
    .site-header-dropdown-panel {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 2rem);
    }
    /* A little smaller than desktop so the longest category label ("মোবাইল, কম্পিউটার ও
       ইলেকট্রনিক্স") still fits on one line within a phone's narrower width. */
    .site-header-dropdown-panel a { font-size: 0.82rem; padding: 0.5rem 0.5rem; }
    /* Labels collapse on mobile to save space, so a filled dot is the only way to tell a
       filter is active without opening the dropdown — still satisfies "selected value is
       shown" without crowding the header. */
    .site-header-icon.has-value::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand);
    }

    .favorite-heart { min-width: 44px; min-height: 44px; }

    .landing { padding: 1.5rem 1rem .25rem; }
    .landing-hero { text-align: left; }
    .landing-hero h1 { font-size: 1.85rem; line-height: 1.22; }
    .landing-hero > p:last-child { margin-left: 0; }
    .storefront-search { margin-top: 1.1rem; }
    .landing-search input, .landing-search button { min-height: 3rem; }
    .landing-search input { font-size: 1rem; }
    .landing-search button { padding-inline: .95rem; }
    .storefront-page { padding-top: 1.5rem; }
    .storefront-section { margin-top: 2.1rem; }
    .storefront-section-heading h2 { font-size: 1.55rem; }

    /* Mobile product grid: two columns fit on a typical ~375px phone screen.
       minmax(0, 1fr), not bare 1fr — a bare 1fr track still respects its content's intrinsic
       min-width, and white-space:nowrap text (shop name, WhatsApp/কল করুন buttons) was forcing
       one column wider than the other (confirmed live: 172px vs 240px instead of an even
       split). minmax(0, ...) removes that floor so both columns are always exactly equal. */
    .storefront-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

    .storefront-card-body { min-height: 7.35rem; padding: 0.65rem 0.7rem 0.75rem; }
    .storefront-card-price.contact-price { font-size: .86rem; }

    .storefront-shop-card { flex-basis: 180px; }

    .site-footer-inner { grid-template-columns: 1fr; }

    .storefront-page { padding-bottom: 100px; }
    .storefront-detail { grid-template-columns: 1fr; gap: 1rem; }
    .storefront-detail-info { margin-bottom: 2rem; }

    /* Primary contact actions stay reachable without scrolling back up on mobile.
       box-sizing: border-box is required here — there's no global box-sizing reset in this
       file, so width:100% + padding would otherwise add the padding on top of 100% (content-box
       default) and push the bar past both edges of the viewport. */
    .storefront-sticky-actions {
        display: flex; gap: 0.5rem; position: sticky; bottom: 0; z-index: 5;
        padding: 0.75rem 1rem; background: var(--paper); border-top: 1px solid var(--border);
        width: 100%; box-sizing: border-box;
    }
    .storefront-sticky-actions .button { flex: 1; text-align: center; min-height: 44px; }

    /* Sharing is a set of peer actions, so on a phone each one gets the same target size
       regardless of its label length. A two-column grid also avoids the last, long label
       shrinking every other action into an uneven row. */
    .storefront-share-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.65rem;
    }
    .storefront-share-body .button {
        width: 100%;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 0.5rem;
        text-align: center;
    }

    /* The sticky bar below replaces these on mobile — avoids showing the same WhatsApp/Call
       actions twice on a small screen. */
    .storefront-header .storefront-cta-row, .storefront-detail-info .storefront-cta-row { display: none; }
}

.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--border);
}
.admin-header .brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-logo { width: 56px; height: 56px; object-fit: contain; }

.admin-nav-primary { display: flex; align-items: center; gap: 0.25rem; flex: 1; flex-wrap: wrap; }
.admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
}
.admin-nav-link:hover { color: var(--brand); background: #f2ece5; }
.admin-nav-link.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }

.admin-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.admin-action-link {
    text-decoration: none;
    color: var(--ink);
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}
.admin-action-link:hover, .admin-action-link.active { color: var(--brand); }

.admin-shopview-btn {
    text-decoration: none;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.admin-shopview-btn:hover { background: var(--brand); color: white; }

/* "আরও" and account dropdowns (NavDropdown.razor) */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger, .admin-account-trigger {
    background: none;
    border: none;
    color: var(--ink);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    margin-top: 0;
}
.nav-dropdown-trigger:hover, .admin-account-trigger:hover { color: var(--brand); background: #f2ece5; }
.nav-dropdown-catcher { position: fixed; inset: 0; z-index: 900; background: transparent; }
.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 190px;
    z-index: 901;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}
.nav-dropdown-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    margin: 0;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
}
.nav-dropdown-item:hover { background: #f2ece5; color: var(--brand); }
.nav-dropdown-item.active { color: var(--brand); font-weight: 600; }
.nav-dropdown-item.logout-form { padding: 0; }
.nav-dropdown-item.logout-form button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    background: none;
    color: var(--ink);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
}
.nav-dropdown-item.logout-form button:hover { background: #f2ece5; color: var(--brand); }

.admin-main { padding: 1.5rem; max-width: 960px; flex: 1; display: flex; flex-direction: column; }

/* Mobile bottom nav + sheet — hidden above the mobile breakpoint (see @media below). */
.admin-bottom-nav { display: none; }

.report-header {
    border-bottom: 3px solid var(--brand);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}
.report-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.report-shop-name {
    color: var(--brand);
    margin: 0;
    font-size: 1.6rem;
}
.report-title {
    color: var(--ink);
    margin: 0.15rem 0 0;
    font-size: 1.1rem;
    font-weight: normal;
}
.report-generated-at {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
.report-period {
    color: var(--muted);
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}
.report-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

.receipt {
    max-width: 480px;
    background: white;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.voice-panel { max-width: 480px; }
.voice-intent-label { margin: 1rem 0 0.5rem; }
.voice-answer { font-size: 1.2rem; margin: 1rem 0; color: var(--brand); }
.voice-notice {
    background: #fdf3e0;
    border: 1px solid #e8c88a;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.voice-notice ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

.voice-help { max-width: 480px; margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); }
.voice-help summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.voice-examples { margin: 0.5rem 0 0; padding-left: 1.25rem; line-height: 1.6; }

/* A single visually-distinct card around mic + text-fallback + fill-summary + examples, so it
   reads as its own "voice tool" rather than blending into the surrounding form fields — a soft
   brand-tinted background and a full border. Only ever shown expanded (either the always-open
   /admin/voice page, or after the collapsed .voice-section-toggle summary below is clicked),
   so it no longer needs its own baked-in label — the toggle/page context already says "voice". */
.voice-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.15rem 1.1rem;
    background: linear-gradient(165deg, #fdf2e7 0%, #fdfaf6 65%);
    border: 1.5px solid #eddac4;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(184, 80, 42, 0.06);
}
.voice-section .voice-help { max-width: none; margin-top: 0.6rem; }
.voice-section .voice-fill-summary { margin-bottom: 0; }

/* Collapsed-by-default toggle — a small, unobtrusive pill rather than the full card, so voice
   (optional) never visually outranks the actual form (the main task) below it. Confirmed live
   complaint: the always-open card was "highlighting everywhere instead of the form itself". */
.voice-section-toggle { margin: 0.75rem 0 1.25rem; }
.voice-section-toggle .voice-section { margin: 0.6rem 0 0; }
/* The browser's native "hide details content while closed" is itself just a UA-stylesheet
   rule, and UA styles always lose to author styles regardless of specificity — .voice-section's
   own `display: flex` was silently overriding it, so the card stayed visible even with
   details.open === false (confirmed live). This explicit override restores the collapse. */
.voice-section-toggle:not([open]) .voice-section { display: none; }
.voice-section-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
    padding: 0.45rem 0.85rem;
    background: #fdf5ee;
    border: 1px solid #eddac4;
    border-radius: 999px;
}
.voice-section-summary::-webkit-details-marker { display: none; }
.voice-section-summary::before {
    content: "▸";
    display: inline-block;
    font-size: 0.65em;
    transition: transform 0.15s ease;
}
.voice-section-summary:hover { background: #fdecdc; }
.voice-section-toggle[open] .voice-section-summary::before { transform: rotate(90deg); }

.voice-capture {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.voice-capture-row, .voice-text-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.voice-text-input {
    flex: 1 1 260px;
    min-width: 0;
    max-width: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    resize: vertical;
}
.voice-fill-btn { flex-shrink: 0; }
.voice-mic-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: var(--brand);
    border: 1.5px solid var(--brand);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.voice-mic-btn:hover:not(:disabled) { background: var(--brand); color: white; }
.voice-mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.voice-mic-btn.recording {
    background: var(--due);
    border-color: var(--due);
    color: white;
    animation: voice-pulse 1.4s ease-in-out infinite;
}
.voice-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: white;
    color: var(--muted);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.voice-cancel-btn:hover { background: #fdecec; color: var(--due); border-color: var(--due); }
.voice-mic-icon { font-size: 1.05rem; line-height: 1; }
.voice-live-caption { color: var(--muted); font-size: 0.9rem; }
.voice-live-caption.muted { font-style: italic; }
.voice-mic-error { margin: .7rem 0 0; font-size: 0.85rem; color: var(--muted); }
.voice-mic-error .error { margin: 0; }
.voice-mic-error p:not(.error) { margin: .45rem 0 0; }
.voice-fallback-mobile { display: none; }
.voice-mic-error details { margin-top: .45rem; }
.voice-mic-error summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.voice-mic-error ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.voice-mic-error li + li { margin-top: .25rem; }
@media (max-width: 700px) {
    .voice-fallback-desktop { display: none; }
    .voice-fallback-mobile { display: block; }
}

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 33, 33, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(179, 33, 33, 0); }
}

.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.danger-zone p { margin: 0.5rem 0; }

.voice-fill-summary { margin: 0 0 1rem; }
.voice-fill-ok {
    background: #eaf7ef;
    border: 1px solid #a9dfc0;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}
.voice-fill-ok ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* Applied to a voice-filled input/select right after a fill; fades out on its own after a
   couple of seconds so the highlight is a momentary cue, not a permanent visual state. */
.voice-filled { animation: voice-fill-fade 2.5s ease-out forwards; }
@keyframes voice-fill-fade {
    0% { background-color: #d9f2e2; }
    100% { background-color: transparent; }
}

@media (max-width: 640px) {
    .admin-header { padding: 0.6rem 1rem; }
    .brand-logo { width: 40px; height: 40px; }
    .admin-nav-primary, .admin-header-actions { display: none; }
    .admin-main { padding: 1rem; padding-bottom: calc(1rem + 64px); }

    .admin-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border);
        z-index: 800;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .admin-bottom-nav-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 56px;
        text-decoration: none;
        color: var(--muted);
        font-size: 0.7rem;
        background: none;
        border: none;
        padding: 0.4rem 0;
        margin-top: 0;
        cursor: pointer;
    }
    .admin-bottom-nav-link span:first-child { font-size: 1.2rem; }
    .admin-bottom-nav-link.active { color: var(--brand); font-weight: 600; }

    .quick-links { flex-direction: column; gap: 0.5rem; }
    .quick-links a, .quick-links .button {
        text-align: center;
        margin-top: 0;
    }

    button, .button { padding: 0.5rem 1rem; font-size: 0.9rem; }

    /* Mobile lists use a consistent card anatomy: identity and amount first, supporting
       facts second, state third, then one full-width primary action plus More. This prevents
       a long primary label, status, and the ⋮ target fighting for the same narrow row. */
    .record-card-list { gap: 0.75rem; margin-top: 0.75rem; }
    .record-card {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 1.1rem;
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        background: var(--paper);
        box-shadow: 0 2px 8px rgba(25, 35, 45, 0.035);
    }
    .record-card-top, .record-card-subtitle, .record-card-bottom { margin: 0; }
    .record-card-top { align-items: flex-start; gap: 0.75rem; }
    .record-card-title { white-space: normal; line-height: 1.25; }
    .record-card-amount { padding-top: 0.05rem; }
    .record-card-subtitle { white-space: normal; line-height: 1.35; }
    .record-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.6rem;
        color: var(--muted);
        font-size: var(--text-sm);
        line-height: 1.3;
    }
    .record-card-meta > span + span::before {
        content: "•";
        margin-right: 0.6rem;
        color: var(--border);
    }
    .record-card-date {
        display: inline-flex;
        align-items: center;
        font-variant-numeric: tabular-nums;
    }
    .record-card-bottom { min-height: 22px; display: flex; align-items: center; }
    /* In a compact card, state should be a quiet label, not a separate rounded control.
       The dot preserves immediate color recognition without breaking the reading rhythm. */
    .record-card .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: var(--text-sm);
        font-weight: 600;
    }
    .record-card .status-badge::before {
        content: "";
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 auto;
    }
    .record-card-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: stretch;
        gap: 0.6rem;
        margin-top: 0.35rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-subtle);
    }
    .record-card-primary {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        text-align: center;
        justify-content: center;
    }
    .record-card-actions .row-menu {
        display: flex;
        margin-left: 0;
        width: 44px;
        height: 100%;
    }
    /* The primary label may wrap. Let the More target grow with that same action bar instead
       of leaving a short square next to a taller button. */
    .record-card-actions .row-menu-trigger {
        flex: 1 1 auto;
        width: 44px;
        height: 100% !important;
        min-height: 44px;
    }

    .row-menu-item + .row-menu-item,
    .row-menu-item + button,
    button + .row-menu-item { margin-top: 0.5rem; }

    .mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: flex;
        align-items: flex-end;
    }
    .mobile-sheet {
        background: var(--paper);
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 14px 14px 0 0;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    }
    .mobile-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
    .mobile-sheet-group-label {
        font-size: 0.75rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin: 0.75rem 0 0.25rem;
        padding: 0 0.4rem;
    }
    .mobile-sheet-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--ink);
        font-size: 1rem;
        padding: 0.7rem 0.5rem;
        border-radius: 8px;
        min-height: 44px;
        box-sizing: border-box;
    }
    .mobile-sheet-item:hover, .mobile-sheet-item:active { background: #f2ece5; }
    .mobile-sheet-logout-form { margin: 0.75rem 0 0; border-top: 1px solid var(--border); padding-top: 0.5rem; }
    .mobile-sheet-logout-form button {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        background: none;
        border: none;
        color: var(--due);
        font-size: 1rem;
        padding: 0.7rem 0.5rem;
        border-radius: 8px;
        min-height: 44px;
        margin: 0;
        cursor: pointer;
    }
    .mobile-sheet-logout-form button:hover { background: #fbeaea; }

    .data-table, .line-item-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .desktop-only-table { display: none; }
    /* Matches the combined-class specificity (0,2,0) of the base ".record-card-list.mobile-
       only-list { display:none }" rule above — a plain ".mobile-only-list" selector here
       (0,1,0) would lose that specificity tie and never show the card list at all on mobile,
       regardless of this media query being active (confirmed live: this exact mismatch was
       introduced while fixing the desktop-duplication bug, and briefly hid the mobile list
       entirely). */
    .record-card-list.mobile-only-list { display: flex; }

    .row-menu-trigger, .row-menu-trigger.compact { width: 44px; min-width: 44px; height: 44px; }
    .row-menu-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        min-width: 0;
        border-radius: 14px 14px 0 0;
        padding: var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0));
        z-index: 1001;
    }
    .row-menu-catcher { background: rgba(0, 0, 0, 0.45); z-index: 1000; }
    .row-menu-item { min-height: 48px; display: flex; align-items: center; padding: var(--space-3); font-size: 1rem; }

    .detail-title-row { align-items: flex-start; }
    .detail-title-line { align-items: flex-start; flex-direction: column; }
    .detail-primary-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .detail-primary-actions > :first-child { width: 100%; }
    .detail-primary-actions .button { min-width: 0; white-space: normal; text-align: center; }
    .detail-key-values > div { grid-template-columns: 6rem minmax(0, 1fr); }
    .detail-table-desktop { display: none; }
    .mobile-product-list { display: block; }

    .page-header, .filter-row, .list-toolbar, .inline-form, .quick-add-row, .cta-row {
        gap: 0.6rem;
    }

    .cta-row { flex-direction: column; }
    .cta-row a, .cta-row .button { width: 100%; }

    .filter-panel { flex-direction: column; align-items: stretch; }
    .filter-panel > label, .filter-panel > label.checkbox-label { flex: 1 1 auto; min-width: 0; }

    .report-range-bar { grid-template-columns: 1fr; padding: var(--space-3); }
    .report-period-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .report-period-presets .pill:last-child { grid-column: 1 / -1; }
    .report-custom-dates { flex-direction: column; }
    .report-custom-dates label { flex: 0 0 auto; width: 100%; }
    .report-range-export { justify-self: start; }

    .stat-cards { gap: 0.6rem; }
    .stat-card {
        flex: 1 1 calc(50% - 0.6rem);
        min-width: 0;
        padding: 0.85rem 1rem;
    }

    button, .button, .voice-mic-btn, .pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .auth-page, .onboarding {
        margin: 1rem auto;
        padding: 1.25rem;
        max-width: 100%;
    }
    .landing { margin: 2rem auto; }
}

@media print {
    .admin-header, .admin-bottom-nav, .no-print { display: none !important; }
    .print-only { display: block; }
    .admin-main { padding: 0; max-width: none; }
    .data-table .filter-row-inline, .data-table .sort-indicator { display: none; }
    .data-table th.sortable-th { cursor: default; }
    .report-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        background: white;
    }
    .receipt .report-footer { position: static; }
}

.onboarding-step { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.25rem; }

.onboarding-actions { display: flex; gap: 0.75rem; align-items: center; }
.onboarding-actions button { margin-top: 0; }

/* Toast notifications — floating feedback messages that appear at top-center and
   auto-dismiss after 3 seconds with fade-out. Non-blocking, visible to user immediately. */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 90vw;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-slide-in 0.4s ease-out forwards, toast-fade-out 0.5s ease-in 2.5s forwards;
    pointer-events: auto;
}

.toast-message { flex: 1; }

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 0.25rem;
}

.toast-close:hover { opacity: 1; }

.toast-success {
    background: #eaf7ef;
    color: #0a5f3d;
    border-left: 4px solid #0a5f3d;
}

.toast-error {
    background: #fdecec;
    color: #8b1515;
    border-left: 4px solid #8b1515;
}

.toast-info {
    background: #e8f4f8;
    color: #0a4a6f;
    border-left: 4px solid #0a4a6f;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

}

.related-product-helper { color: var(--muted); font-size: .82rem; }
.inline-add-related { background: transparent; border: 0; color: var(--accent, #bd5128); padding: .35rem 0; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.section-heading-action { display: block; }
.section-heading-action h2 { margin-bottom: .15rem; }
.section-heading-action .related-product-helper { display: inline; }
.section-heading-action .inline-add-related { display: inline; margin-left: .3rem; }

/* Create/edit forms follow one quiet, vertical reading flow: each task is grouped without
   turning the page into a dense multi-column dashboard. Tables remain untouched inside the
   product section, while customer, delivery and payment fields become easy to scan. */
.entry-form-section {
    background: #fffdfb;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: clamp(1rem, 2vw, 1.5rem);
    margin: 1rem 0;
}
.entry-form-section > h2,
.entry-form-section .section-heading-action h2 { margin-top: 0; }
.entry-form-section-action { margin: .2rem 0 .85rem; }
.entry-form-section-action .related-product-helper { display: block; }
.entry-form-section-action .inline-add-related { display: inline-flex; margin-top: .2rem; }
.entry-form-section > label { display: block; max-width: 42rem; margin: .9rem 0 0; }
.entry-form-section > label input,
.entry-form-section > label select,
.entry-form-section > label textarea { width: 100%; }
.entry-form-section .related-party-create { margin-top: .5rem; }
.entry-form-section .total-line {
    margin: 1.25rem 0 .85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 1.1rem;
}
.entry-form-section-final { background: #fffaf6; }
@media (max-width: 700px) {
    .entry-form-section { margin: .85rem 0; padding: 1rem; border-radius: .75rem; }
    .entry-form-section > label { max-width: none; }
}
.related-create-modal { max-width: 42rem; max-height: min(90vh, 52rem); overflow: auto; }
.related-create-modal label { display: block; margin: .75rem 0; }
.related-stock { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #e7d7ca; border-radius: .65rem; }
@media (max-width: 700px) { .related-create-modal { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; } }

@keyframes toast-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.mode-choices { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0; }
.mode-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mode-card:hover { border-color: var(--brand); }
.mode-card.selected { border-color: var(--brand); background: var(--warning-bg); }
.mode-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mode-card-radio {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}
.mode-card.selected .mode-card-radio { border-color: var(--brand); }
.mode-card.selected .mode-card-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--brand);
}
.mode-card-text strong { display: block; font-size: 1.05rem; margin-bottom: 0.2rem; }
.mode-card-text p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.onboarding-note { color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }
.onboarding-done-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
/* Report tabs */
.report-tabs { display: flex; gap: 1rem; margin-top: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-button { flex: 0 0 auto; padding: 0.75rem 1rem; background: transparent; border: none; cursor: pointer; font-weight: normal; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s ease; border-radius: 4px 4px 0 0; }
.tab-button.active { font-weight: bold; color: white; background: var(--brand); border-bottom-color: var(--brand); }
.tab-button:hover:not(.active) { color: var(--ink); background: rgba(184, 80, 42, 0.1); }

/* Product profit table/card responsive layout */
@media (min-width: 768px) {
    #product-profit-table { display: table !important; width: 100%; }
    .data-card { display: none !important; }
}

@media (max-width: 767px) {
    #product-profit-table { display: none !important; }
    .data-card { display: block !important; }
}

/* Image Gallery Upload */
.image-grid-info {
    margin-bottom: 0.75rem;
}

.image-counter {
    font-size: 0.85rem;
    color: var(--muted);
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.image-thumbnail {
    position: relative;
    width: 75px;
    height: 75px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f9f7f4;
    flex-shrink: 0;
}

.image-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    line-height: 1;
    padding: 0;
    border-radius: 0 4px 0 3px;
}

.image-delete-btn:hover {
    background: rgba(179, 33, 33, 0.9);
}

.image-add-button {
    width: 75px;
    height: 75px;
    border: 2px dashed var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f9f7f4;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.image-add-button input {
    display: none;
}

.image-add-button:hover {
    border-color: var(--brand);
    background: rgba(184, 80, 42, 0.08);
}

.add-icon {
    font-size: 1.6rem;
    color: var(--brand);
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}