/* ==========================================================================
   Procurement Overhaul: Price Comparison Engine & Supplier Index
   ========================================================================== */

.proc-subnav {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}
.proc-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.proc-sub-btn:hover {
    background: var(--bg-input);
    border-color: var(--primary-color);
    color: var(--text-primary);
}
.proc-sub-btn.active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.proc-sub-icon { font-size: 16px; }

.proc-panel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}
.proc-panel-card:hover { box-shadow: var(--shadow-md); }

.proc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 22px;
}
.proc-header-title h3, .proc-header-title h4 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.3px;
}
.proc-header-title h3 { font-size: 20px; }
.proc-header-title h4 { font-size: 16px; }
.proc-header-title p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 680px;
}

.proc-counter-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.proc-chip-counter {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
}
.proc-chip-counter.max {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}
.proc-link-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.proc-link-btn.text-danger { color: var(--danger); }

.proc-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
    margin-bottom: 24px;
}
.proc-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    text-align: right;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.proc-chip:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.proc-chip.selected {
    background: rgba(37, 99, 235, 0.14) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}
.proc-chip.selected .proc-chip-name {
    color: var(--primary-color) !important;
    font-weight: 800;
}
.proc-chip-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.proc-chip.selected .proc-chip-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.proc-chip-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.proc-chip-price {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-card);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.proc-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

.proc-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Two actions now: the free chain read and the paid supplier scrape. They
       wrap rather than shrink, because a cramped "בתשלום" tag is the last
       thing that should lose its space. */
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* The paid one is deliberately quieter than the free one: same row, clearly
   secondary, and it says what it costs on its face rather than only in the
   confirm dialog. */
.proc-second-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
}
.proc-cost-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, .15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .45);
}
[data-theme="dark"] .proc-cost-tag,
body.dark-theme .proc-cost-tag { color: #fbbf24; }

/* --- Inventory filters: one switch, one rail -------------------------------
   Stock state and category are two independent questions that were both drawn
   as rows of blue pills, each with its own "הכל (224)". Two identical active
   buttons meaning different things, in two different icon languages.

   State is now a segmented switch: exactly one segment is on, so it needs no
   all-pill of its own and the duplication cannot come back. Category keeps the
   pills, since it is a set you pick one from and the counts earn their space.
   ------------------------------------------------------------------------ */
.inv-status-seg {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-solid);
}
.inv-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-secondary);
}
/* Hairline between segments, owned by the group so there is no double edge. */
.inv-seg-btn + .inv-seg-btn { border-inline-start: 1px solid var(--border-color); }
.inv-seg-btn:hover:not(.active) { background: var(--bg-input); color: var(--text-primary); }
.inv-seg-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* The count is the reason to look, so it stays legible when the segment is
   not selected rather than fading with the label. */
.inv-seg-n {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--text-primary);
}

/* Each state carries its own colour when chosen. "בחוסר" is the one that
   means act, and it should not look like the other two. */
.inv-seg-btn.active { color: #fff; }
.inv-seg-btn.active .inv-seg-n { color: inherit; opacity: .85; }
.inv-seg-btn.is-danger.active { background: var(--danger-color, #ef4444); }
.inv-seg-btn.is-ok.active     { background: var(--success, #10b981); }
.inv-seg-btn.active:not(.is-danger):not(.is-ok) { background: var(--primary-color); }

/* Category rail: one line that scrolls sideways rather than a block that
   rewraps every time a count changes. */
.inv-cat-rail {
    display: flex;
    gap: 7px;
    margin: 10px 0 2px;
    padding-bottom: 4px;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    scrollbar-width: none;
}
.inv-cat-rail::-webkit-scrollbar { display: none; }

.inv-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.inv-cat-btn:hover { border-color: var(--primary-color); color: var(--text-primary); }
.inv-cat-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}
/* Outlined rather than filled, so the active category never competes with the
   filled state switch above it for "this is the thing that is on". */
.inv-cat-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
}
.inv-cat-n {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--text-muted);
}
.inv-cat-btn.active .inv-cat-n { color: inherit; }

@media (max-width: 768px) {
    .inv-seg-btn { padding: 8px 11px; font-size: 12px; min-height: 40px; min-width: 0; }
    .inv-cat-btn { min-height: 34px; min-width: 0; }
}

/* --- Comparison table: one row per chain ----------------------------------
   Two ingredients across three chains is six prices. They used to be two rows
   with the other four folded into a grey "sample of other prices" column, so
   the comparison read as one answer plus a footnote. Each chain gets a row;
   the ingredient and the price paid span them.
   ------------------------------------------------------------------------ */

/* The only line between ingredients, so the rows of one item read as a group
   rather than as six unrelated results. */
.proc-price-table tbody tr td { border-bottom: none; }
.proc-price-table tbody tr.proc-item-start td {
    border-top: 1px solid var(--border-color);
}
.proc-price-table tbody tr:first-child td { border-top: none; }

/* The row that counts toward the total. Marked by a tinted edge rather than a
   filled background, which at six rows an item turns into stripes. */
.proc-row-counted td:first-of-type { position: relative; }
.proc-row-counted { background: color-mix(in srgb, var(--success, #10b981) 5%, transparent); }

.proc-low-tag {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    background: color-mix(in srgb, var(--success, #10b981) 14%, transparent);
    color: #047857;
}
[data-theme="dark"] .proc-low-tag,
body.dark-theme .proc-low-tag { color: #34d399; }

.proc-tag-ok {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    background: color-mix(in srgb, var(--success, #10b981) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success, #10b981) 40%, transparent);
    color: #047857;
}
[data-theme="dark"] .proc-tag-ok,
body.dark-theme .proc-tag-ok { color: #34d399; }

/* A real published price for a product nobody has confirmed is the right one.
   Neither good news nor bad, so neither green nor red. */
.proc-tag-pending {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
}
.proc-main-btn {
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.proc-main-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45); }

/* History & Report Cards */
.proc-history-list { display: flex; flex-direction: column; gap: 14px; }
.proc-history-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}
.proc-history-card:hover, .proc-history-card.open {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}
.proc-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: var(--bg-input);
    cursor: pointer;
    user-select: none;
}
.proc-history-card.open .proc-history-head { border-bottom: 1px solid var(--border-color); background: var(--bg-card); }
.proc-hh-left { display: flex; flex-direction: column; gap: 4px; }
.proc-hh-date { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.proc-hh-info { display: flex; items: center; gap: 8px; flex-wrap: wrap; }
.proc-hh-title { font-weight: 700; color: var(--text-primary); font-size: 14.5px; }
.proc-hh-items { color: var(--text-secondary); font-size: 13.5px; max-width: 450px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-hh-right { display: flex; align-items: center; gap: 14px; }
.proc-pill-saving {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.proc-pill-saving.good { background: var(--success-bg, rgba(16,185,129,0.12)); border: 1px solid var(--success); color: var(--success); }
.proc-pill-saving.neutral { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }
.proc-hh-arrow { font-size: 16px; color: var(--text-muted); font-weight: 700; width: 20px; text-align: center; }

.proc-report-detail { padding: 24px; background: var(--bg-card); animation: proc-fade-in 0.25s ease; }
@keyframes proc-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.proc-recommend-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 12px;
    margin-bottom: 22px;
    line-height: 1.6;
    font-size: 14.5px;
    color: var(--text-primary);
}
.proc-rec-icon { font-size: 28px; line-height: 1; }
.proc-rec-text b { color: var(--primary-color); }

.proc-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-input); }
.proc-table { width: 100%; border-collapse: collapse; text-align: right; font-size: 13.5px; }
.proc-table th { background: var(--bg-solid, rgba(0,0,0,0.04)); padding: 12px 16px; font-weight: 700; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.proc-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.proc-table tr:last-child td { border-bottom: none; }
.proc-table tr:hover { background: rgba(37, 99, 235, 0.02); }
.proc-tag-down { display: inline-block; padding: 4px 10px; background: rgba(16, 185, 129, 0.12); border: 1px solid var(--success); color: var(--success); font-weight: 700; border-radius: 6px; font-size: 13px; }
.proc-tag-up { display: inline-block; padding: 4px 10px; background: rgba(239, 68, 68, 0.12); border: 1px solid var(--danger); color: var(--danger); font-weight: 700; border-radius: 6px; font-size: 13px; }

.proc-detail-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: 24px; }

/* Supplier Search UI */
.proc-search-box-wrap { display: flex; flex-direction: column; gap: 20px; background: var(--bg-input); padding: 22px; border-radius: 14px; border: 1px solid var(--border-color); }
.proc-mode-toggle { display: flex; gap: 10px; }
.proc-mode-btn {
    flex: 1;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}
.proc-mode-btn:hover { border-color: var(--primary-color); color: var(--text-primary); }
.proc-mode-btn.active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.proc-field-group { display: flex; flex-direction: column; gap: 8px; }
.proc-label { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.proc-input-flex { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
/* Vertical padding is 0 rather than 12px because these controls also carry an
   inline height: 42px. Together those left a 15px content box for a 15px font,
   which clipped the descenders on Hebrew final letters: גוש דן rendered as
   גוש דו, changing the word rather than just cropping it. Centring comes from
   the fixed height instead, and line-height gives the glyphs room. */
.proc-select-control { flex: 1; min-width: 260px; min-height: 42px; padding: 0 16px; line-height: 1.6; font-size: 15px; font-weight: 700; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px; color: var(--text-primary); }
.proc-select-control:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.proc-submit-btn { padding: 12px 28px; font-size: 15px; font-weight: 700; border-radius: 10px; flex-shrink: 0; }

.proc-audit-box {
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-right: 4px solid var(--text-muted);
    font-size: 13.5px;
    color: var(--text-secondary);
}
.proc-audit-box.has-data { border-right-color: var(--primary-color); background: rgba(37, 99, 235, 0.04); color: var(--text-primary); }
.proc-audit-head { font-weight: 700; margin-bottom: 4px; font-size: 14.5px; color: var(--primary-color); }
.proc-audit-body { line-height: 1.5; }

.proc-suppliers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.proc-supplier-tile {
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.2s ease;
}
.proc-supplier-tile:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--shadow-sm); background: var(--bg-card); }
.proc-st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px dashed var(--border-color); padding-bottom: 12px; }
.proc-st-name { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1.3; }
.proc-st-meta-row { display: flex; justify-content: space-between; gap: 12px; background: var(--bg-card); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); font-size: 13px; }
.proc-st-meta-col { display: flex; flex-direction: column; gap: 2px; }
.proc-meta-lbl { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.proc-meta-val { font-weight: 700; color: var(--text-primary); }
.proc-st-delivery { font-size: 13px; padding-top: 4px; color: var(--text-primary); line-height: 1.4; }
.proc-st-tip { font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 10px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--text-primary); }

.proc-contact-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.proc-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}
.proc-contact-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--bg-input);
}
.proc-contact-btn.wa {
    border-color: #25d366;
    color: #128c7e;
    background: rgba(37, 211, 102, 0.08);
}
.proc-contact-btn.wa:hover {
    background: #25d366;
    color: #ffffff;
}
.proc-contact-btn.web {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.08);
}
.proc-contact-btn.web:hover {
    background: var(--primary-color);
    color: #ffffff;
}

.proc-st-tip { font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 10px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--text-primary); }





/* ==========================================================================
   Receipt thumbnails

   The row already opens the review on click, so the thumbnail stops that
   propagating and opens the document viewer instead.
   ========================================================================== */

.receipt-row { display: flex; align-items: flex-start; gap: 12px; }
.receipt-row > div { min-width: 0; flex: 1; }

.receipt-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.receipt-thumb:hover { border-color: var(--primary-color); }
.receipt-thumb img {
    width: 100%;
    height: 100%;
    /* Receipts are tall and narrow; cover crops to the top-centre, which is
       where the supplier name and date sit. */
    object-fit: cover;
    object-position: top center;
    display: block;
}
.receipt-thumb-ph { color: var(--text-muted); display: flex; }
.receipt-thumb-ph .ui-icon { width: 22px; height: 22px; }

.receipt-no-doc {
    font-size: 10.5px;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* The empty slot. Dashed and faint so it reads as "nothing here" rather than
   as a control, and deliberately not clickable: there is nothing to open. */
.receipt-thumb.is-empty {
    border-style: dashed;
    background: transparent;
    cursor: default;
    color: var(--text-muted);
    opacity: 0.55;
}
.receipt-thumb.is-empty .ui-icon { width: 20px; height: 20px; }

/* ======================================================================
   Receipt viewer
   ====================================================================== */
.receipt-lb {
    position: fixed;
    inset: 0;
    z-index: 10010;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 11, 16, 0.72);
    backdrop-filter: blur(6px);
}

.receipt-lb-panel {
    width: min(900px, 100%);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.receipt-lb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}
.receipt-lb-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.receipt-lb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: none;
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}
.receipt-lb-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quiet. Closing is not the point of this screen, so it should not be the
   loudest thing on it, which a filled primary square was. */
.receipt-lb-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.receipt-lb-close:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-primary);
}

/* A neutral stage rather than a darker hole. Most receipts here are
   black-and-white scans, and a dark mount makes them read as damaged. */
.receipt-lb-stage {
    flex: 1;
    min-height: 220px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--bg-body, #f1f3f6);
}
.receipt-lb-stage img {
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.receipt-lb-empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}

.receipt-lb-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 13px 18px;
    border-top: 1px solid var(--border-color);
}
.receipt-lb-foot .supplier-btn { text-decoration: none; }

/* Dark mode here is `body.dark-theme`, which is what carries the variables.
   The `[data-theme="dark"]` selectors elsewhere in this file never match. */
body.dark-theme .receipt-lb-stage { background: #0b0d11; }
body.dark-theme .receipt-lb-close { border-color: rgba(255, 255, 255, 0.14); }
body.dark-theme .receipt-lb-icon { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }

@media (max-width: 640px) {
    .receipt-lb { padding: 12px; }
    .receipt-lb-stage { padding: 12px; }
    .receipt-lb-foot .supplier-btn { flex: 1 1 auto; justify-content: center; }
}

/* ======================================================================
   Leaderboards, compressed view
   Toggled by .boards-compact on .leaderboards-container. Everything here is
   reversible by removing that one class: no data is dropped, the per-row
   figure strip is moved behind a click and the palette is reduced.
   ====================================================================== */

.boards-density-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary, #4b5563);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.boards-density-btn:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary);
}

/* --- the battery uses the charts' palette, exactly ---
   These four hexes are the doughnut's, set in app.js where fcDoughnut's
   backgroundColor is assigned. A grey ramp read as "some cost" rather than as
   labour or overhead, and it disagreed with the charts directly below, where
   the same four quantities are already coloured. One quantity, one colour,
   everywhere on the page. */
.boards-compact .seg-food     { background: #f59e0b; }
.boards-compact .seg-labor    { background: #6366f1; }
.boards-compact .seg-overhead { background: #64748b; }
.boards-compact .seg-profit   { background: #10b981; }
.boards-compact .dot-food     { background: #f59e0b; }
.boards-compact .dot-labor    { background: #6366f1; }
.boards-compact .dot-overhead { background: #64748b; }
.boards-compact .dot-profit   { background: #10b981; }
/* No dark-mode variants on purpose: the charts do not change these either, so
   changing them here would break the match this exists to create. */

/* Topic badges repeated a fourth and fifth hue for information the panel
   title already carries. */
.boards-compact .leaderboard-badge {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-secondary, #4b5563);
    border-color: var(--border-color);
}

/* --- the figure strip moves behind a click --- */
.boards-compact .dish-item-wrap {
    cursor: pointer;
    padding-block: 8px;
    transition: background 0.15s ease;
}
.boards-compact .dish-item-wrap:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.03));
}
.boards-compact .bar-legend-row {
    display: none;
}
/* The row is a flex column, and the legend row was the widest child setting the
   bar area's width. Hiding it collapsed the bar to its intrinsic size, about
   80px, which also crushed the segment labels into each other. */
.boards-compact .dish-item-bar-area {
    width: 100%;
    align-self: stretch;
}
.boards-compact .dish-item-wrap.is-open .bar-legend-row {
    display: flex;
}
/* The rank marker was the only thing announcing a row was interactive.
   A chevron says it before the pointer arrives. */
.boards-compact .option-b-rank::after {
    content: "›";
    display: inline-block;
    margin-inline-start: 5px;
    color: var(--text-muted, #9ca3af);
    font-weight: 400;
    transition: transform 0.18s ease;
}
.boards-compact .dish-item-wrap.is-open .option-b-rank::after {
    transform: rotate(90deg);
}

.boards-compact .dish-item-meta { font-size: 11px; }
.boards-compact .dish-item-name { font-size: 13px; }

/* --- "click for detail" hint on the battery ---
   The rows are clickable and nothing said so. It sits below the bar because
   the per-segment tooltips already own the space above it, and it is absolutely
   positioned so appearing costs no layout shift. */
.boards-compact .dish-item-bar-area { position: relative; }
.boards-compact .dish-item-bar-area::after {
    content: "לחצו לפירוט העלויות בשקלים";
    position: absolute;
    top: calc(100% + 5px);
    inset-inline-start: 0;
    z-index: 5;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary, #4b5563);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.boards-compact .dish-item-wrap.is-open .dish-item-bar-area::after {
    content: "לחצו לסגירת הפירוט";
}
/* Focus as well as hover, so this is not a mouse-only affordance. */
.boards-compact .dish-item-wrap:hover .dish-item-bar-area::after,
.boards-compact .dish-item-wrap:focus-visible .dish-item-bar-area::after {
    opacity: 1;
    transform: translateY(0);
}
.boards-compact .dish-item-wrap:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .boards-compact .dish-item-bar-area::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .boards-compact .option-b-rank::after,
    .boards-compact .dish-item-wrap { transition: none; }
}

/* Empty state for procurement panes that used to be filled with invented data. */
.proc-empty-note {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg-hover, rgba(0, 0, 0, 0.02));
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
}
.proc-empty-note b { color: var(--text-primary); }
.proc-empty-note p { margin: 6px 0 0; }

/* Icon slots on the רכש screens, previously sized as text because they held
   emoji. Vector icons need a box, not a font-size. */
.proc-empty-icon,
.proc-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 12px;
}
.proc-note-icon { margin-bottom: 0; color: var(--primary-color); }
.proc-sub-icon,
.proc-rec-icon,
.proc-meta-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.proc-meta-lbl .ui-icon { flex: none; opacity: 0.75; }

/* ==========================================================================
   Supplier discovery (רכש) and the two dialogs that feed it.

   The screen this replaces used four accent colours, nine buttons and a 12px
   type scale in a full-width panel. The rule here is one accent - the app's
   primary - with everything else in greys, and controls big enough to hit.
   Colour is reserved for stock state, where it carries the only meaning on
   the screen that a shape could not.
   ========================================================================== */

.proc-discover { padding: 26px 28px 22px; }

.proc-disc-head h3 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 6px; font-size: 21px; font-weight: 800; color: var(--text-primary);
}
.proc-disc-head p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 720px; }

/* --- Mode switch: two large targets, not a row of pills --- */
.proc-disc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.proc-disc-mode {
    display: flex; align-items: center; gap: 12px; text-align: right;
    padding: 14px 18px; border-radius: 12px; cursor: pointer;
    background: var(--bg-card); border: 1.5px solid var(--border-color);
    color: var(--text-secondary); transition: border-color .15s, background .15s, color .15s;
}
.proc-disc-mode:hover { border-color: var(--primary-color); color: var(--text-primary); }
.proc-disc-mode.active {
    border-color: var(--primary-color); color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}
.proc-dm-icon { display: flex; flex: 0 0 auto; }
.proc-dm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proc-dm-text b { font-size: 15.5px; font-weight: 800; }
.proc-dm-text small { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.proc-disc-mode.active .proc-dm-text small { color: inherit; opacity: .75; }

/* --- Category tiles: the whole tile is the button, one click runs a search --- */
.proc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.proc-cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 108px; padding: 18px 12px; cursor: pointer;
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px;
    color: var(--text-secondary); transition: transform .12s, border-color .15s, color .15s;
}
.proc-cat-tile:hover {
    transform: translateY(-2px); border-color: var(--primary-color);
    color: var(--primary-color); box-shadow: var(--shadow-sm);
}
.proc-cat-icon { display: flex; color: var(--text-muted); transition: color .15s; }
.proc-cat-tile:hover .proc-cat-icon { color: var(--primary-color); }
.proc-cat-label { font-size: 14.5px; font-weight: 700; text-align: center; line-height: 1.35; color: var(--text-primary); }
.proc-cat-tile:hover .proc-cat-label { color: var(--primary-color); }

/* --- Ingredient mode --- */
.proc-ing-wrap { display: flex; flex-direction: column; gap: 12px; }
.proc-big-input {
    width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 20px;
    font-size: 16px; font-weight: 600; line-height: 1.6;
    background: var(--bg-card); border: 1.5px solid var(--border-color);
    border-radius: 12px; color: var(--text-primary);
}
.proc-big-input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.proc-ing-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.proc-ing-legend span { display: flex; align-items: center; gap: 6px; }
.proc-ing-legend-note { margin-right: auto; font-style: normal; }
.proc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.proc-dot.out { background: var(--danger-color, #ef4444); }
.proc-dot.low { background: #f59e0b; }
.proc-dot.ok  { background: #10b981; }

.proc-ing-list {
    display: flex; flex-direction: column;
    max-height: 420px; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card);
}
/* Fixed tracks, not `auto`. With auto columns a row carrying a price sized its
   own columns differently from a row without one, so the whole table stepped
   left and right as the eye moved down it. The stock and price columns are now
   the same width on every row whether they hold anything or not. */
.proc-ing-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 128px 150px 132px;
    align-items: center; gap: 14px; width: 100%;
    padding: 13px 18px; cursor: pointer; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--border-color);
    transition: background .12s;
}
.proc-ing-row:last-child { border-bottom: none; }
.proc-ing-row:hover { background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.proc-ing-name { font-size: 15px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-ing-meta { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-ing-price { justify-self: start; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

/* Stock state is the one place colour is doing work, so it is the only place
 * on this screen that has any. */
.proc-ing-stock {
    justify-self: start;
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    white-space: nowrap; line-height: 1.7;
}
.proc-ing-stock.out       { background: color-mix(in srgb, var(--danger-color, #ef4444) 14%, transparent); color: var(--danger-color, #dc2626); }
.proc-ing-stock.low       { background: rgba(245, 158, 11, .16); color: #b45309; }
.proc-ing-stock.ok        { background: rgba(16, 185, 129, .14); color: #047857; }
.proc-ing-stock.untracked { background: var(--bg-input); color: var(--text-muted); }

.proc-ing-empty { padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; color: var(--text-muted); }
.proc-ing-freebtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    background: var(--primary-color); color: #fff; border: none; border-radius: 10px;
}

/* --- Footer: location, radius, and the one secondary action --- */
.proc-disc-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-color);
}
.proc-geo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-muted); }
.proc-geo-icon { display: flex; color: var(--text-muted); }
.proc-geo-input {
    min-width: 190px; min-height: 38px; padding: 0 14px; line-height: 1.6;
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 9px;
}
.proc-geo-sep { font-size: 13.5px; }
.proc-geo-radius {
    min-height: 38px; padding: 0 12px; line-height: 1.6;
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 9px;
}

/* --- Results --- */
.proc-res-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 14px; }
.proc-res-head h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.proc-res-head span { font-size: 13px; color: var(--text-muted); }

.proc-st-title { min-width: 0; }
.proc-st-cat { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.proc-st-rating { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.proc-st-rating small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.proc-st-closed { margin: 6px 0; font-size: 12.5px; font-weight: 700; color: #b45309; }
.proc-st-line { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.proc-st-line svg { flex: 0 0 auto; margin-top: 3px; color: var(--text-muted); }
.proc-contact-btn.primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); font-weight: 700; transition: all 0.2s ease; }
.proc-contact-btn.primary:hover { opacity: 0.9; }
.proc-contact-btn.primary:active { opacity: 1; }
.proc-contact-btn.primary.success { background: #10b981; border-color: #10b981; color: white; pointer-events: none; }

/* Stock facts shown above the results when the search started from an
   ingredient: the supplier list means something different when the shelf is
   empty than when it is full. */
.proc-stock-box { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); margin-bottom: 6px; }
.proc-stock-box.out { border-color: color-mix(in srgb, var(--danger-color, #ef4444) 45%, var(--border-color)); }
.proc-stock-box.low { border-color: rgba(245, 158, 11, .5); }
.proc-stock-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 14px; }
.proc-stock-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; line-height: 1.7; }
.proc-stock-badge.out       { background: color-mix(in srgb, var(--danger-color, #ef4444) 14%, transparent); color: var(--danger-color, #dc2626); }
.proc-stock-badge.low       { background: rgba(245, 158, 11, .16); color: #b45309; }
.proc-stock-badge.ok        { background: rgba(16, 185, 129, .14); color: #047857; }
.proc-stock-badge.untracked { background: var(--bg-input); color: var(--text-muted); }
.proc-stock-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.proc-stock-facts div { display: flex; flex-direction: column; gap: 3px; }
.proc-stock-facts span { font-size: 12px; color: var(--text-muted); }
.proc-stock-facts b { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }

@media (max-width: 720px) {
    .proc-discover { padding: 20px 16px; }
    .proc-disc-modes { grid-template-columns: 1fr; }
    /* The supplier and price columns are context, not the decision; the name
       and the stock state are, so those are what survive the narrow layout. */
    .proc-ing-row { grid-template-columns: minmax(0, 1fr) auto; }
    .proc-ing-meta, .proc-ing-price { display: none; }
}

/* --- Shared dialog shell (supplier add/edit, location picker) --- */
.sm-modal {
    display: none; position: fixed; inset: 0; z-index: 10003;
    align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
    background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px);
}
/* This carries its own surface rather than leaning on a neighbouring class.
   The previous version relied on `.supplier-modal-card` for the background,
   border and height cap; dropping that class left the dialog transparent with
   its fields spilling past the edge, which is exactly the kind of breakage a
   shared shell is supposed to prevent. */
.sm-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    padding: 24px 26px;
    border-radius: 16px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.sm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sm-head-text { min-width: 0; }
.sm-title { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; font-size: 18.5px; font-weight: 800; color: var(--text-primary); }
.sm-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.sm-close {
    display: flex; flex: 0 0 auto; padding: 6px; cursor: pointer;
    background: none; border: none; border-radius: 8px; color: var(--text-muted);
}
.sm-close:hover { background: var(--bg-input); color: var(--text-primary); }

/* The head and foot stay put and only the fields scroll, so the save button is
   reachable on a short window instead of sitting below the fold. */
.sm-head, .sm-foot { flex: 0 0 auto; }
.sm-body { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.sm-field { display: flex; flex-direction: column; gap: 7px; }
.sm-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.sm-req { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-input); padding: 1px 7px; border-radius: 20px; }
.sm-input {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 15px; line-height: 1.6;
    font-size: 14.5px; font-weight: 600; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px;
}
.sm-input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.sm-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.sm-choice {
    padding: 11px 14px; cursor: pointer; font-size: 13.5px; font-weight: 700; text-align: center;
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px;
    color: var(--text-secondary); transition: border-color .15s, color .15s;
}
.sm-choice:hover { border-color: var(--primary-color); color: var(--primary-color); }
.sm-choice.active {
    border-color: var(--primary-color); color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.sm-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-color); }

/* --- Location and area selection --- */
.proc-disc-foot { flex-direction: column; align-items: stretch; gap: 14px; }
.proc-geo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proc-geo-lbl {
    display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
    min-width: 118px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.proc-geo-lbl svg { color: var(--text-muted); }
.proc-disc-extra { display: flex; justify-content: flex-end; }

.proc-ac-wrap { position: relative; flex: 1 1 260px; min-width: 220px; }
.proc-ac-wrap .proc-geo-input { width: 100%; box-sizing: border-box; }
.proc-ac-list {
    /* `--bg-card` is translucent, so the page text showed straight through the
       suggestions and both became unreadable. This needs an opaque surface and
       a stacking order above everything it overlaps. */
    position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 9000;
    display: flex; flex-direction: column; max-height: 280px; overflow-y: auto;
    background: var(--bg-solid); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.proc-ac-list[hidden] { display: none; }
.proc-ac-item {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 10px 14px; cursor: pointer; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--border-color);
}
.proc-ac-item:last-child { border-bottom: none; }
.proc-ac-item:hover { background: color-mix(in srgb, var(--primary-color) 6%, transparent); }
.proc-ac-main { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.proc-ac-sub { font-size: 12px; color: var(--text-muted); }

.proc-area-pills { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.proc-area-pill {
    padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.7;
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 20px;
    color: var(--text-secondary); transition: border-color .15s, color .15s, background .15s;
}
.proc-area-pill:hover { border-color: var(--primary-color); color: var(--primary-color); }
.proc-area-pill.active {
    border-color: var(--primary-color); color: #fff; background: var(--primary-color);
}
/* Each area is a separate billable call, so the count is stated rather than
   left for the user to discover on an invoice. */
.proc-area-note { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }

/* `.ui-icon` sizes every icon to 1.1em of its own text, which is right for
   icons sitting beside a label and wrong for these, where the icon is the
   graphic and the label sits under it. Explicit sizes only where that holds. */
.proc-cat-icon .ui-icon { width: 26px; height: 26px; }
.proc-dm-icon .ui-icon { width: 22px; height: 22px; }

/* Scope (location and areas) sits above the search, because it frames every
   result underneath it. At the bottom it read as an afterthought. */
.proc-disc-scope {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 18px; margin-bottom: 20px;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px;
    /* The address suggestions drop out of this box, so it cannot clip them. */
    overflow: visible; position: relative; z-index: 5;
}
.proc-disc-extra { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }

/* Stock state was a legend, which told the user what the colours meant and
   then made them scroll to find each one. The same row now filters. */
.proc-ing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.proc-stock-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.proc-stock-filter {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.7;
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 20px;
    color: var(--text-secondary); transition: border-color .15s, color .15s, background .15s;
}
.proc-stock-filter b { font-size: 12px; font-weight: 800; opacity: .65; }
.proc-stock-filter:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.proc-stock-filter .proc-dot { width: 9px; height: 9px; }

.proc-stock-filter.active { color: var(--text-primary); border-color: var(--text-secondary); background: var(--bg-input); }
.proc-stock-filter.out.active  { border-color: var(--danger-color, #ef4444); color: var(--danger-color, #dc2626); background: color-mix(in srgb, var(--danger-color, #ef4444) 10%, transparent); }
.proc-stock-filter.low.active  { border-color: #f59e0b; color: #b45309; background: rgba(245, 158, 11, .12); }
.proc-stock-filter.ok.active   { border-color: #10b981; color: #047857; background: rgba(16, 185, 129, .11); }

.proc-ing-count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 720px) {
    .proc-ing-row { grid-template-columns: minmax(0, 1fr) 112px; }
}

/* The address field was full-width for a value that is usually three words.
   Roughly 45% of the old width, with the map button beside it. */
.proc-ac-wrap { flex: 0 1 45%; min-width: 200px; }
.proc-map-btn {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; cursor: pointer;
    background: var(--bg-card); border: 1.5px solid var(--border-color);
    border-radius: 9px; color: var(--text-muted);
    transition: border-color .15s, color .15s;
}
.proc-map-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

.sm-card-wide { max-width: 720px; }
.map-canvas {
    width: 100%; height: 420px; border-radius: 12px;
    border: 1px solid var(--border-color); background: var(--bg-input);
}
.map-picked {
    padding: 11px 15px; font-size: 13.5px; font-weight: 600; line-height: 1.5;
    color: var(--text-secondary); background: var(--bg-input);
    border: 1px solid var(--border-color); border-radius: 10px;
}

/* Radius and areas are alternatives, so whichever is not in charge dims rather
   than disappearing: the user can still see what the other option would be. */
.proc-area-pill.muted { opacity: .45; }
.proc-area-pill.ghost { border-style: dashed; }

.proc-radius-manual { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.proc-radius-manual input {
    width: 74px; min-height: 34px; padding: 0 10px; line-height: 1.7;
    font-size: 13px; font-weight: 700; text-align: center; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 20px;
}
.proc-radius-manual input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

/* The search sits above the map rather than floating on it: an overlay would
   cover the very tiles the user is trying to read. */
.map-search { flex: 0 0 auto; }
.map-search .proc-ac-list { top: calc(100% + 6px); }

/* A business with no website has nowhere to read prices from, so its rating
   takes the space a price would have taken. The caption is what stops a large
   number being read as a price. */
.proc-st-ratingbig {
    display: flex; align-items: center; gap: 14px;
    margin: 12px 0 10px; padding: 12px 14px;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px;
}
.proc-st-rb-score { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.proc-st-rb-score svg { color: #f59e0b; }
.proc-st-rb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proc-st-rb-text b { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.proc-st-rb-text small { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

.proc-contact-btn.decline { margin-right: auto; color: var(--text-muted); }
.proc-contact-btn.decline:hover { border-color: var(--danger-color, #ef4444); color: var(--danger-color, #dc2626); }

/* Leaving is visible: a card that vanishes instantly reads as a glitch. */
.proc-supplier-tile.removing { opacity: 0; transform: scale(.97); transition: opacity .2s, transform .2s; }

.blocked-list { display: flex; flex-direction: column; gap: 8px; }
.blocked-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: var(--bg-input);
    border: 1px solid var(--border-color); border-radius: 10px;
}
.blocked-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blocked-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.blocked-date { font-size: 11.5px; color: var(--text-muted); }
.blocked-empty { padding: 26px 18px; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

.proc-disc-extra { gap: 16px; }

/* Reports written before prices came from a real source. Labelled, not
   deleted: silently rewriting somebody's archive is its own dishonesty. */
.proc-legacy-warn {
    padding: 16px 18px; margin-bottom: 18px; border-radius: 12px;
    background: color-mix(in srgb, var(--danger-color, #ef4444) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color, #ef4444) 35%, transparent);
}
.proc-legacy-warn b { display: block; margin-bottom: 6px; font-size: 14.5px; color: var(--danger-color, #dc2626); }
.proc-legacy-warn p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.proc-legacy-btn {
    padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 700;
    background: var(--bg-card); border: 1.5px solid var(--danger-color, #ef4444);
    border-radius: 9px; color: var(--danger-color, #dc2626);
}

/* --- Price comparison: pick by category, keep the selection in view --- */

/* The selection sits above the categories and stays there, so the item you
   just picked is never the thing that scrolled off. */
.price-sel-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 46px; padding: 9px 12px;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px;
}
.price-sel-empty { font-size: 13px; color: var(--text-muted); }
.price-sel-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 13px; cursor: pointer;
    font-size: 13px; font-weight: 700; line-height: 1.7;
    background: var(--primary-color); color: #fff; border: none; border-radius: 20px;
}
.price-sel-chip:hover { filter: brightness(1.08); }
.price-sel-x { font-size: 15px; line-height: 1; opacity: .8; }

.price-cat-list { display: flex; flex-direction: column; gap: 8px; }
.price-cat { border: 1px solid var(--border-color); border-radius: 11px; overflow: hidden; background: var(--bg-card); }
.price-cat-head {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 13px 16px; cursor: pointer; text-align: right;
    background: none; border: none; color: var(--text-primary);
}
.price-cat-head:hover { background: color-mix(in srgb, var(--primary-color) 4%, transparent); }
.price-cat.open .price-cat-head { border-bottom: 1px solid var(--border-color); }
.price-cat-arrow { width: 18px; font-size: 17px; font-weight: 700; color: var(--text-muted); line-height: 1; }
.price-cat-name { flex: 1; font-size: 15px; font-weight: 700; }
.price-cat-count {
    font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; line-height: 1.7;
    background: var(--bg-input); color: var(--text-muted);
}
.price-cat-sel {
    font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 20px; line-height: 1.7;
    background: color-mix(in srgb, var(--primary-color) 13%, transparent); color: var(--primary-color);
}
.price-cat-items {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px; padding: 12px 14px;
}

@media (max-width: 720px) {
    .price-cat-items { grid-template-columns: 1fr; }
}

/* Every card lays its actions out on the same grid, so a card with no website
   lines up with one that has both. Wrapping was what made no two cards match. */
.proc-contact-btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 12px;
}
.proc-contact-btns .proc-contact-btn { margin: 0; justify-content: center; }
.proc-contact-btn.primary { grid-column: 1 / -1; }
.proc-contact-btn.decline { margin-right: 0; }

/* A slot with nothing behind it stays in place and says so, which holds the
   grid steady and is more use than an absence the reader has to notice. */
.proc-contact-btn.is-empty {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    opacity: .45; cursor: default; pointer-events: none;
}

/* Choosing a branch no longer fires a billed search on its own. */
.proc-cat-tile.selected {
    border-color: var(--primary-color); color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.proc-cat-tile.selected .proc-cat-icon,
.proc-cat-tile.selected .proc-cat-label { color: var(--primary-color); }

.proc-cat-run {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding: 13px 16px;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 11px;
}
.proc-cat-run-label { font-size: 14px; color: var(--text-secondary); }
.proc-cat-run-label.muted { color: var(--text-muted); }
.proc-cat-run-label b { color: var(--text-primary); }

/* --- Chip multi-select (supplier filters) --- */
.chip-select { position: relative; min-width: 220px; }
.chip-select-box {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    min-height: 40px; padding: 5px 12px; cursor: text;
    background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 10px;
}
.chip-select-box:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.chip-select-chips { display: contents; }
.chip-select-empty { font-size: 13px; color: var(--text-muted); }
.chip-select-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 7px 3px 10px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; line-height: 1.7;
    background: var(--primary-color); color: #fff; border: none; border-radius: 20px;
}
.chip-select-x { font-size: 14px; line-height: 1; opacity: .8; }
.chip-select-input {
    flex: 1; min-width: 80px; padding: 4px 0; line-height: 1.7;
    font-size: 13.5px; color: var(--text-primary);
    background: none; border: none; outline: none;
}

.chip-select-menu {
    position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 9000;
    display: flex; flex-direction: column; max-height: 280px; overflow-y: auto;
    /* Opaque: --bg-card is translucent and the list behind it showed through. */
    background: var(--bg-solid); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.chip-select-menu[hidden] { display: none; }
.chip-select-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; cursor: pointer; text-align: right;
    font-size: 13.5px; color: var(--text-primary);
    background: none; border: none; border-bottom: 1px solid var(--border-color);
}
.chip-select-opt:last-child { border-bottom: none; }
.chip-select-opt:hover { background: color-mix(in srgb, var(--primary-color) 6%, transparent); }
.chip-select-opt.on { font-weight: 700; color: var(--primary-color); }
.chip-select-tick { width: 14px; font-size: 13px; }
.chip-select-none { padding: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* --- Today's conditions -----------------------------------------------
   Notices, not warnings. Colour separates kinds of fact, it does not rank
   urgency, and nothing here goes red: a hot day is information, not an alarm.
   --------------------------------------------------------------------- */
.day-notices { margin-bottom: 18px; }
.day-notice-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-notice {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 20px; line-height: 1.7;
    font-size: 13px; border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary);
}
.day-notice-text { font-weight: 700; color: var(--text-primary); }
.day-notice-detail { font-size: 12px; color: var(--text-muted); }
.day-notice svg { flex: 0 0 auto; }

.day-notice.info { border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color)); }
.day-notice.info svg { color: var(--primary-color); }
.day-notice.warm { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .07); }
.day-notice.warm svg { color: #d97706; }
.day-notice.cool { border-color: rgba(56, 132, 255, .4); background: rgba(56, 132, 255, .06); }
.day-notice.cool svg { color: #2563eb; }
.day-notice.note { border-style: dashed; }
.day-notice.note svg { color: var(--text-muted); }

.day-notice-x {
    padding: 0 2px; cursor: pointer; font-size: 15px; line-height: 1;
    background: none; border: none; color: var(--text-muted);
}
.day-notice-x:hover { color: var(--danger-color, #dc2626); }

.day-notice-add {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; cursor: pointer; line-height: 1.7;
    font-size: 12.5px; font-weight: 700; color: var(--text-muted);
    background: none; border: 1px dashed var(--border-color); border-radius: 20px;
}
.day-notice-add:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* The drive-time result replaces its own button. Amber only when the gap is
   real; a route two minutes off its usual is just a route. */
.proc-contact-btn.drive-result { font-weight: 700; color: var(--text-primary); cursor: default; }
.proc-contact-btn.drive-result small { font-weight: 500; color: var(--text-muted); }
.proc-contact-btn.drive-result.slower {
    border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .09); color: #b45309;
}
.proc-contact-btn.drive-result.slower small { color: #b45309; opacity: .8; }

/* --- Theme switch: three modes on one track --------------------------------
   The thumb slides rather than the buttons repainting, so the change reads as
   one control moving instead of three lighting up independently.
   --------------------------------------------------------------------- */
.header-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0; cursor: pointer;
    background: var(--bg-input); border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 999px;
    transition: color .15s, background .15s, box-shadow .15s;
}
.header-btn:hover { color: var(--text-secondary); background: var(--bg-solid); }
.header-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}