/* ==========================================================================
   Dashboard detail table: 11 columns made to fit without side-scrolling
   ========================================================================== */
.dashboard-detail-table .dashboard-table {
    width: 100%;
    table-layout: fixed;      /* stop the widest cell dictating table width */
    font-size: 12px;
}
.dashboard-detail-table .dashboard-table th,
.dashboard-detail-table .dashboard-table td {
    padding: 9px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.dashboard-detail-table .dashboard-table th {
    font-size: 11px;
    line-height: 1.35;
    vertical-align: bottom;
}
/* Dish name gets the room; numeric columns are narrow and tabular. */
.dashboard-detail-table .dashboard-table th:first-child,
.dashboard-detail-table .dashboard-table td:first-child { width: 20%; }
.dashboard-detail-table .dashboard-table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
}
.dashboard-detail-table .dashboard-table input.qty-input {
    width: 100%;
    min-width: 0;
    max-width: 62px;
    font-size: 12px;
    padding: 4px 2px;
}
.dashboard-detail-table .calc-tooltip { display: none; }  /* tooltips need width the table doesn't have */
.dashboard-detail-table .prime-cost-badge,
.dashboard-detail-table .fc-badge {
    padding: 2px 5px !important;
    font-size: 11px !important;
}

/* Below 1250px drop the two percentage columns: they are derivable from the
   ₪ figures beside them, so the table stays readable instead of scrolling. */
@media (max-width: 1250px) {
    .dashboard-detail-table .dashboard-table th:nth-child(4),
    .dashboard-detail-table .dashboard-table td:nth-child(4),
    .dashboard-detail-table .dashboard-table th:nth-child(7),
    .dashboard-detail-table .dashboard-table td:nth-child(7) { display: none; }
}
/* Below 900px also drop labour and Prime ₪, keeping name, price, food cost,
   total cost, qty and profit. */
@media (max-width: 900px) {
    .dashboard-detail-table .dashboard-table th:nth-child(5),
    .dashboard-detail-table .dashboard-table td:nth-child(5),
    .dashboard-detail-table .dashboard-table th:nth-child(6),
    .dashboard-detail-table .dashboard-table td:nth-child(6) { display: none; }
    .dashboard-detail-table .dashboard-table th:first-child,
    .dashboard-detail-table .dashboard-table td:first-child { width: 28%; }
}

/* --- Menu audit against the order form --- */
.audit-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
}
.audit-name { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.audit-price { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.audit-note { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--warning); font-weight: 600; }
.audit-ings { margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--text-secondary); }
.audit-row .supplier-btn { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   Round 19: gate screen, inventory card fields, dish pills, duplicate finder
   ========================================================================== */

.gate-note {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
    margin: -4px 0 14px;
    line-height: 1.5;
}

/* Inline "create one" affordance under a closed dropdown. */
.field-link-btn {
    align-self: flex-start;
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
}
.field-link-btn:hover { text-decoration: underline; }

/* --- Inventory card: labelled fields instead of unlabelled inline inputs --- */

.inv-field-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.inv-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.inv-field-narrow { flex: 0 0 120px; }
.inv-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.85;
}
.inv-field select,
.inv-field input {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.inv-money { position: relative; display: block; }
.inv-money input { text-align: center; padding-left: 22px; }
.inv-money em {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    pointer-events: none;
}

.inv-supplier-select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

/* --- "Used in these dishes" box --- */

.inv-dishes-box {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.inv-dishes-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.inv-dishes-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.inv-dish-pill {
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-dish-pill:hover { background: rgba(59, 130, 246, 0.22); }

.inv-dishes-empty {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
.inv-dishes-empty .inv-dishes-title { color: #b45309; margin-bottom: 4px; }
.inv-dishes-hint {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- Duplicate finder --- */

.dup-card {
    max-width: 780px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
/* min-height:0 or the scroll area grows past the viewport instead of scrolling. */
.dup-card .supplier-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.dup-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 12.5px;
}

.dup-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.dup-pill.dup-high { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.dup-pill.dup-medium { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.dup-pill.dup-low { background: rgba(100, 116, 139, 0.16); color: var(--text-secondary); }

/* Deliberately not a pill. The pills count things to act on; this is a note
 * that the search was wider than the list, and it must not read as a fourth
 * bucket of work. */
.dup-weak { font-size: 11.5px; color: var(--text-muted); }

/* Mapping assistant. Borrows the duplicate finder's card and pill classes on
 * purpose: it is the same kind of screen - the machine proposes, a person
 * decides - and looking different would imply it works differently. */
.map-entry {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.map-entry-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.map-name { font-size: 14px; }

/* The number that decides the order, so it should be readable at a glance. */
.map-lines {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.map-dishes {
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.map-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.map-reason { font-size: 11.5px; color: var(--text-secondary); }

.dup-group {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--bg-surface);
}
.dup-group.dup-high { border-right: 3px solid #dc2626; }
.dup-group.dup-medium { border-right: 3px solid #f59e0b; }
.dup-group.dup-low { border-right: 3px solid var(--border-color); }

.dup-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.dup-keep-label { font-size: 11.5px; color: var(--text-muted); font-weight: 700; }
.dup-keep-name { font-size: 15px; color: var(--text-primary); }
.dup-keep-why { font-size: 11.5px; color: var(--text-secondary); }

.dup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-input);
    margin-bottom: 6px;
}
.dup-row-name span { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.dup-row-name small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.dup-reasons { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.dup-reason {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.dup-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.dup-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-secondary);
}
.dup-empty strong { display: block; font-size: 15px; color: var(--text-primary); margin-bottom: 6px; }
.dup-empty span { display: block; font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }

@media (max-width: 640px) {
    .inv-field-row { flex-direction: column; }
    .inv-field-narrow { flex: 1 1 auto; }
    .dup-reasons { justify-content: flex-start; }
}

/* Low-confidence groups must not offer merge as the obvious green default:
   those are the pairs most likely to be two genuinely different products. */
.dup-btn-caution {
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #b45309 !important;
}

/* ==========================================================================
   Two-tier top navigation
   Row 1 carries identity, search and workspace status. Row 2 carries only
   navigation. Previously all three competed for one line, which is what made
   the bar feel crowded and forced the tabs to scroll on ordinary widths.
   ========================================================================== */

.top-nav-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: visible;
}

.top-nav-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}

/* The divider now comes from the row below, not from the brand itself. */
.top-nav-brand {
    padding-inline-end: 0;
    border-inline-end: none;
    flex: 0 0 auto;
}

.top-nav-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 0;
    border-inline-start: none;
    gap: 10px;
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px keeps this above the 44px-ish comfortable target once the row's
       own padding is counted, without making the header taller. */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.nav-icon-btn:hover { background: var(--bg-input); color: var(--text-primary); }

/* --- Tabs row: underline rail --- */

.top-nav-main {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 2px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.top-nav-main::-webkit-scrollbar { display: none; }

.top-nav-item {
    position: relative;
    padding: 12px 12px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
}
.top-nav-item:hover {
    background: transparent;
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
.top-nav-item.active {
    border-bottom-color: var(--primary-color);
    font-weight: 700;
}

/* --- Global search --- */

.nav-search {
    position: relative;
    /* Capped: a search field that eats the whole row reads as the page's main
       purpose, which it is not. */
    flex: 1 1 420px;
    max-width: 460px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.nav-search-icon {
    position: absolute;
    right: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.nav-search input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 16px !important;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
}
.nav-search input::placeholder { color: var(--text-muted); font-weight: 500; }
.nav-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-solid);
}

.nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 9000;
    padding: 6px;
}
.nav-search-group {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding: 8px 10px 4px;
}
.nav-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}
.nav-search-item:hover,
.nav-search-item.is-active { background: var(--bg-input); }
.nav-search-item small {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.nav-search-empty {
    padding: 14px 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 900px) {
    .top-nav-brand { display: none; }
    .top-nav-container { gap: 0; padding: 0; }
    .top-nav-top { padding: 8px 10px; gap: 8px; }
    .top-nav-main { padding: 0 8px; }
    .top-nav-item { padding: 11px 10px; font-size: 13px; }
}

/* ==========================================================================
   Duplicate finder: side-by-side comparison
   The earlier card put the surviving item in a header and the candidates in
   list rows, so their fields never lined up and the two were not comparable.
   ========================================================================== */

.dup-group-title { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

.dup-compare {
    margin: 10px 0;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.dup-compare table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.dup-compare th,
.dup-compare td {
    padding: 8px 10px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}
.dup-compare tbody tr:last-child th,
.dup-compare tbody tr:last-child td { border-bottom: none; }

.dup-compare thead th { background: var(--bg-input); }
.dup-col-tag {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}
.dup-col-keep .dup-col-tag { color: var(--success, #10b981); }
.dup-col-drop .dup-col-tag { color: var(--text-muted); }
.dup-col-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dup-col-keep { box-shadow: inset 0 -2px 0 var(--success, #10b981); }

.dup-row-label {
    width: 74px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-input);
    white-space: nowrap;
}
.dup-compare td { color: var(--text-primary); font-weight: 600; }
/* Blank fields are the whole reason a merge helps, so name them rather than
   showing an empty cell that reads as "unknown". */
.dup-cell-missing { color: var(--text-muted); font-weight: 500; }

/* Editing inside איתור כפילויות.
 *
 * The screen identified the problem and then handed it back: merge everything
 * or dismiss everything, with the surviving row chosen by a scoring function
 * and no way to fix the data it was scoring. Every cell is now an input, each
 * row can be checked out of the merge, any row can be made the one kept, and
 * any row can be deleted from here. */
.dup-edit {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.dup-edit:focus {
    outline: none;
    border-color: var(--primary-color);
}
.dup-edit-name {
    font-size: 13px;
    font-weight: 700;
    text-align: start;
}
.dup-stock {
    display: flex;
    gap: 4px;
    align-items: center;
}
.dup-edit-qty { flex: 1 1 55%; }
.dup-edit-unit { flex: 1 1 45%; }

.dup-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.dup-pick input { cursor: pointer; }

.dup-col-tools {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 6px;
    flex-wrap: wrap;
}
.dup-mini-btn {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
}
.dup-mini-btn:hover { color: var(--text-primary); }
.dup-mini-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); }

.dup-actions .supplier-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dup-outcome {
    margin: 0 0 8px;
    padding: 8px 10px;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ==========================================================================
   Formula tooltips: stop overlapping the label, stop leaving the viewport
   ========================================================================== */

/* The icon is absolutely positioned over the card's top-left, and the label
   was running underneath it on every single stat card. Reserve the gutter. */
.stat-card:has(.calc-tooltip) .stat-label { padding-inline-end: 24px; }

/* Arrow follows the bubble when JS shifts it away from a screen edge, so it
   still points at the icon it belongs to. */
.calc-bubble::after { left: var(--arrow-x, 8px); }

/* ==========================================================================
   Brand logo
   Two PNGs, black ink for light mode and white for dark, swapped by the theme
   class rather than by JS so the correct one is right on first paint.
   ========================================================================== */

.brand-logo {
    display: block;
    width: auto;
    /* Height drives the size; the source art is 269x76 with the padding
       already trimmed, so it scales cleanly. */
    height: 26px;
    object-fit: contain;
}

.brand-logo-dark { display: none; }
.dark-theme .brand-logo-light { display: none; }
.dark-theme .brand-logo-dark { display: block; }

/* The wordmark carried the product name as text; the logo is an image, so the
   name has to survive somewhere a screen reader can reach it. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reset the old wordmark typography: these rules styled text that is gone. */
.top-nav-brand .logo h1 {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}
.top-nav-brand .brand-logo { height: 24px; }

.login-brand { line-height: 0; }
.login-brand .brand-logo {
    height: 34px;
    margin: 0 auto 6px;
}

.mobile-logo { line-height: 0; }
.mobile-logo .brand-logo { height: 22px; }

/* ==========================================================================
   Stat cards: align the labels across the row
   The cards centred their own content, so a label that wrapped to two lines
   pushed itself and its value to a different height than its neighbours.
   Measured: label offsets ranged 17-28px and values 38-56px inside identical
   120px cards.
   ========================================================================== */

.stat-card { justify-content: flex-start; }

/* Two lines' worth of space whether or not this particular label needs it, so
   every label starts AND every value starts at the same height across the row. */
.stat-card .stat-label {
    min-height: calc(2 * 1.35 * 12px);
    display: flex;
    align-items: flex-start;
}

/* ==========================================================================
   Receipt intake
   ========================================================================== */

.receipt-card {
    max-width: 860px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
/* min-height:0 or the body grows past the viewport instead of scrolling. */
.receipt-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.receipt-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 38px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 14px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.receipt-drop:hover,
.receipt-drop.is-over {
    border-color: var(--primary-color);
    background: var(--bg-solid);
}
.receipt-drop strong { font-size: 15px; color: var(--text-primary); }
.receipt-drop span { font-size: 12.5px; color: var(--text-muted); }

/* Camera entry point. Its own control rather than a second drop zone: on a
   phone this is the common path, and on a desktop it is simply absent because
   capture= has nothing to open. */
.receipt-camera-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    min-height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.receipt-camera-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-solid);
}

.receipt-scan-modes {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-input);
}
.receipt-scan-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.receipt-scan-modes .view-toggle-btns { width: 100%; }
.receipt-scan-modes .view-toggle-btn { flex: 1 1 0; min-height: 40px; font-size: 13px; }
.receipt-scan-modes .receipt-hint { margin-top: 8px; margin-bottom: 0; }

/* Batch progress. One row per document, so a stalled or failed file is
   attributable by name instead of the whole batch reading as "something went
   wrong". */
.receipt-queue-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.rq-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-solid);
    font-size: 12.5px;
}
.rq-name {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rq-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-status { font-size: 11.5px; font-weight: 600; white-space: nowrap; }

.rq-pending .rq-status { color: var(--text-muted); }
.rq-processing { border-color: var(--primary-color); }
.rq-processing .rq-status { color: var(--primary-color); }
.rq-ready .rq-status { color: var(--success); }
.rq-applied { opacity: 0.62; }
.rq-applied .rq-status { color: var(--success); }
.rq-skipped { opacity: 0.55; }
.rq-error { border-color: var(--danger); }
.rq-error .rq-status { color: var(--danger); }

/* Position within the batch, above the document being reviewed. */
.receipt-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-input);
    font-size: 12.5px;
}
.receipt-nav-pos { font-weight: 700; color: var(--text-primary); }
.receipt-nav-file { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-nav-left { margin-inline-start: auto; color: var(--primary-color); font-weight: 600; }

.receipt-done-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0;
    text-align: center;
}
.receipt-done-stats div {
    padding: 16px 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-solid);
}
.receipt-done-stats b { display: block; font-size: 26px; font-weight: 700; color: var(--text-primary); }
.receipt-done-stats span { font-size: 12px; color: var(--text-muted); }
.receipt-done-failed { display: flex; flex-direction: column; gap: 6px; }

/* Link to the archived document, on a receipt row. */
.receipt-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
}
.receipt-doc-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* AI usage, as a small scoped dashboard rather than a sentence */
.ai-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.ai-box {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-solid);
}
.ai-box-label {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.ai-box-value {
    display: block;
    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 700;
    color: var(--text-primary);
    /* formatCurrency and formatIlsWithUsd carry their own U+200F marks, so no
       direction override here. See the round 30 note in JOURNAL.md. */
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.ai-box-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
}
.ai-box-accent { border-color: var(--primary-color); }
.ai-box-accent .ai-box-value { color: var(--primary-color); }
.ai-box-empty { grid-column: 1 / -1; }

@media (max-width: 900px) { .ai-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ai-row { grid-template-columns: 1fr; } }

/* Bookkeeping report */
.books-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.books-month { min-width: 190px; }
.books-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.books-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.books-card {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-solid);
}
.books-card span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.books-card b {
    display: block;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 700;
    /* No direction override here on purpose. formatCurrency() already emits
       U+200F marks around the number and the ₪, so the string orders itself;
       forcing direction:ltr fights those marks and renders "1,180.00₪" while
       every other currency figure in the app reads "₪ 1,180.00".
       Round 26's ltr fix was for a hand-built run ("≈ ₪0.06") that carried no
       marks of its own. Different case, and it does not transfer. */
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.books-card small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.books-pos b { color: var(--success); }
.books-neg b { color: var(--danger); }

.books-h {
    margin: 20px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
.books-table-wrap { overflow-x: auto; }
.books-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}
.books-table th,
.books-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
}
.books-table th {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.books-table tbody tr:hover { background: var(--bg-input); }
.books-dim { color: var(--text-muted); }
.books-missing { color: var(--warning); font-size: 11.5px; }

@media (max-width: 720px) {
    .books-cards { grid-template-columns: 1fr; }
}

.receipt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 20px;
    text-align: center;
}
.receipt-loading strong { font-size: 15px; }
.receipt-loading span { font-size: 12.5px; color: var(--text-muted); }
.receipt-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    animation: receipt-spin 0.8s linear infinite;
}
@keyframes receipt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .receipt-spinner { animation-duration: 2.4s; }
}

.receipt-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.receipt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.receipt-field > span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}
.receipt-field input,
.receipt-field select {
    height: 34px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.receipt-field input[readonly] { color: var(--text-muted); background: var(--bg-input); }

.receipt-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0; line-height: 1.6; }
.receipt-warn {
    font-size: 12px;
    line-height: 1.6;
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.receipt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.receipt-table th,
.receipt-table td {
    padding: 8px 8px;
    text-align: start;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.receipt-table thead th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-input);
    position: sticky;
    top: 0;
    z-index: 1;
}
.receipt-table select {
    width: 100%;
    max-width: 190px;
    height: 30px;
    font-family: inherit;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-solid);
    color: var(--text-primary);
}
/* Excluded rows stay visible: hiding them would hide what was NOT applied. */
.receipt-table tr.rl-off { opacity: 0.45; }
.rl-name { font-weight: 700; color: var(--text-primary); }
.rl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-num small { display: block; font-size: 10.5px; font-weight: 700; }
.rl-up { color: var(--danger, #dc2626); }
.rl-down { color: var(--success, #10b981); }

.rl-tag {
    display: inline-block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}
.rl-high { background: rgba(16, 185, 129, 0.15); color: #047857; }
.rl-medium { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.rl-none { background: rgba(100, 116, 139, 0.16); color: var(--text-secondary); }

.rl-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    white-space: nowrap;
}
.rl-actions label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.rl-actions input:disabled + * ,
.rl-actions label:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }

/* --- Receipt history list --- */

.receipts-list { display: flex; flex-direction: column; gap: 10px; }
.receipt-row {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-solid);
}
.receipt-row-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.receipt-row-head b { font-size: 14px; }
.receipt-row-meta { font-size: 11.5px; color: var(--text-muted); }
.receipt-row-total {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.receipt-row-items { display: flex; flex-wrap: wrap; gap: 5px; }
.receipt-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.receipt-chip-more { color: var(--text-muted); font-style: italic; }

@media (max-width: 700px) {
    .receipt-table select { max-width: 120px; }
    .rl-actions { flex-direction: column; gap: 2px; }
}

/* --- Retail price benchmark --- */

.retail-card {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
.retail-card .supplier-modal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.retail-intro { padding: 4px 0 14px; }
.retail-intro p { margin: 0 0 6px; font-size: 13.5px; }
.retail-results { margin-top: 16px; }
.retail-name { font-size: 12px; }
.retail-name small { display: block; color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }

.retail-badge {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.retail-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.retail-badge-head { font-size: 13px; font-weight: 800; }
.retail-badge-sub { font-size: 11.5px; opacity: 0.9; line-height: 1.5; }
.retail-badge-over {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}
.dark-theme .retail-badge-over {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}
.retail-badge-ok {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.32);
    color: #047857;
}
.dark-theme .retail-badge-ok {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

/* Shining Gold Trophy Badge Component */
.gold-trophy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, #fef08a 0%, #facc15 45%, #eab308 100%);
    color: #713f12;
    border: 1px solid #eab308;
    padding: 2px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.35);
    letter-spacing: -0.1px;
}
.dark-theme .gold-trophy-badge {
    background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);
    color: #fef08a;
    border-color: #eab308;
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.25);
}
.gold-trophy-badge .trophy-icon {
    font-size: 13px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Barcode Pills & Cross-Chain Supermarket Prices */
.inv-barcode-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.inv-barcode-pill:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12);
}
.inv-barcode-pill.is-matched {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--text-primary);
}
.inv-barcode-chain-tag {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
    padding: 1px 6px;
    border-radius: 10px;
}
.inv-barcode-add-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.inv-barcode-add-pill:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.06);
    border-style: solid;
}

/* Multi-Chain Barcode Modal & Intake Components */
.bpm-meta-box {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bpm-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
}
.bpm-label {
    color: var(--text-secondary);
    font-weight: 600;
}
.bpm-val {
    color: var(--text-primary);
}
.bpm-barcode-code {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: 12px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.bpm-summary-alert {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid transparent;
}
.bpm-alert-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.28);
    color: #b45309;
}
.dark-theme .bpm-alert-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.bpm-alert-ok {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.28);
    color: #047857;
}
.dark-theme .bpm-alert-ok {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.bpm-chains-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}
.bpm-chain-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.bpm-chain-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.bpm-chain-card.is-cheapest {
    background: rgba(16, 185, 129, 0.04);
    border: 1.5px solid rgba(16, 185, 129, 0.4);
}
.dark-theme .bpm-chain-card.is-cheapest {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.45);
}
.bpm-chain-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bpm-chain-name {
    font-weight: 800;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.bpm-cheapest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    background: #047857;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(4, 120, 87, 0.25);
}
.bpm-product-name {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.bpm-chain-pricing {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.bpm-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.bpm-diff {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}
.bpm-diff.diff-negative {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}
.dark-theme .bpm-diff.diff-negative {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}
.bpm-diff.diff-positive {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}
.dark-theme .bpm-diff.diff-positive {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.bpm-empty-state {
    text-align: center;
    padding: 28px 16px;
}

/* Quick Intake Chips & Table Button */
.intake-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    background: var(--bg-solid);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.intake-chip:hover {
    background: #047857;
    color: #ffffff;
    border-color: #047857;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.25);
}
.intake-chip:active {
    transform: scale(0.96);
}
.inv-intake-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.inv-intake-btn:hover {
    background: #047857;
    color: #ffffff;
    border-color: #047857;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(4, 120, 87, 0.22);
}
.dark-theme .inv-intake-btn {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}
.dark-theme .inv-intake-btn:hover {
    background: #059669;
    color: #ffffff;
}

/* Stat labels sit in a ~190px card that also reserves 24px for the formula
   icon, leaving ~131px of text width. At letter-spacing 1.5px a 16-character
   label spends ~24px on tracking alone, which is what pushed "ממוצע Prime Cost"
   onto a second line while the shorter "ממוצע Food Cost" fit by 5px. Tighter
   tracking buys the room back. It also reads better: the labels are mostly
   Hebrew, which has no uppercase and loses legibility when letter-spaced. */
.stat-card .stat-label { letter-spacing: 0.3px; }