/* ==========================================================================
   New Modules: Inventory, Orders, WhatsApp & Prime Cost Styles
   ========================================================================== */

/* Badge Count in Sidebar */
.badge-count {
    background: var(--danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-right: auto;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* Inventory Table Styles */
.inventory-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.inventory-table th {
    background: var(--bg-input);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.inventory-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.inventory-table tr:hover td {
    background: var(--bg-input);
}

/* PAR Badges */
.par-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.par-badge.par-ok {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.par-badge.par-danger {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
    border: 1px solid rgba(220, 38, 38, 0.3);
    animation: pulseDanger 2s infinite;
}

@keyframes pulseDanger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.tr-par-danger {
    background: rgba(239, 68, 68, 0.08) !important;
}

.inv-adjust-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.inv-adjust-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* WhatsApp Button */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}

/* Order Item Row in Order Selector */
.order-dish-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.order-dish-item:hover {
    background: var(--bg-input);
}

/* --- Top Navigation Bar --- */
.top-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 24px;
    border-radius: var(--radius-lg);
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.top-nav-main {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.top-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.top-nav-item:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Active tab is an underline, not a filled pill.
   The pill needed an outward glow to read as raised, and that glow was being
   sliced by the scroll container it lives in. An underline is drawn INSIDE the
   element's own box, so it cannot be clipped wherever the tab sits. */
.top-nav-item.active {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
}

.top-nav-item.active svg {
    stroke: var(--primary-color);
}

/* --- Inventory Visual Upgrade --- */
.inventory-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.chip-btn.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.chip-btn.chip-danger.active {
    background: var(--danger);
    border-color: var(--danger);
}

.chip-btn.chip-ok.active {
    background: var(--success);
    border-color: var(--success);
}

.view-toggle-btns {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.view-toggle-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Inventory Cards Grid View */
.inventory-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.inv-card {
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: var(--shadow-md);
}

.inv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.inv-card.inv-card-danger {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-solid) 100%);
}

.inv-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.inv-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.inv-card-supplier {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 4px;
}

.inv-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv-card-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-card-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-input);
    overflow: hidden;
}

.inv-card-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--success);
    transition: width 0.3s ease;
}

.inv-card-progress-fill.fill-danger {
    background: var(--danger);
}

/* Prime Cost Meta Input Badge */
.prime-cost-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #3b82f6;
    font-weight: 700;
    font-size: 14px;
}


/* --- Login gate & cloud sync status (Phase 2) --- */
.login-gate {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-solid);
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.login-brand {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
}
.login-brand span { color: var(--primary-color); }

.login-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.login-card input {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
}

.login-btn {
    justify-content: center;
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.login-error {
    font-size: 13px;
    font-weight: 600;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 8px 10px;
}

.login-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.cloud-status {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.login-remember input {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.login-hint a {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.login-hint a:hover { text-decoration: underline; }

.login-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.login-google-btn:hover { background: var(--bg-input); }
.login-google-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* --- Supplier directory modal --- */
.supplier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.supplier-row:hover { border-color: var(--primary-color); }

.supplier-row.is-editing {
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-solid);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.supplier-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.supplier-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.supplier-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Missing state carries an explicit label, not just a colour. */
.supplier-phone.is-missing { color: var(--warning); font-weight: 600; }

.supplier-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.supplier-icon-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.supplier-icon-btn:focus-visible,
.supplier-btn:focus-visible,
.supplier-add-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.supplier-edit-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.supplier-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 150px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.supplier-field input {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    width: 100%;
}
.supplier-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.supplier-edit-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.supplier-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.supplier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, background 0.2s ease;
}
.supplier-btn:hover { filter: brightness(0.94); }
.supplier-btn-save { background: var(--success); color: #fff; }
.supplier-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
/* Destructive action sits apart from the confirm/cancel pair. */
.supplier-btn-delete {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
    margin-inline-start: auto;
}
.supplier-btn-delete:hover { background: var(--danger); color: #fff; }

.supplier-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.supplier-add-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.06);
    border-style: solid;
}

.supplier-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .supplier-row, .supplier-icon-btn, .supplier-btn, .supplier-add-btn { transition: none; }
}

.supplier-modal-card {
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 16px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.supplier-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.supplier-modal-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.supplier-modal-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.supplier-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    /* Same flex-shrink trap as the overhead pane: without min-height:0 this
       list pushes the card past its max-height instead of scrolling. */
    flex: 1 1 auto;
    min-height: 0;
    padding: 2px;
}

/* Dark mode: the icon button sat gray-on-gray against the row surface. */
.dark-theme .supplier-icon-btn {
    color: var(--text-primary);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}
.dark-theme .supplier-icon-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.dark-theme .supplier-row { background: rgba(255, 255, 255, 0.04); }
.dark-theme .supplier-row.is-editing { background: rgba(255, 255, 255, 0.07); }

/* --- Events page: header + range filter --- */
.events-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.events-head-title {
    margin: 0;
    font-size: 19px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.range-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
.range-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.range-custom { display: flex; gap: 10px; flex-wrap: wrap; }
.range-custom label,
.history-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.range-custom input,
.history-field input,
.history-field select {
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
}

/* --- Kitchen notes --- */
.kitchen-notes {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px dashed var(--warning);
    background: var(--warning-bg);
}
.kitchen-notes h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-primary);
}
.kitchen-notes pre {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Supplier purchase orders --- */
.purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.purchase-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}
.purchase-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.purchase-supplier { font-weight: 800; font-size: 16px; color: var(--text-primary); }
.purchase-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.purchase-items { flex: 1; margin-bottom: 12px; }
.purchase-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}
.purchase-item-name { color: var(--text-secondary); }
.purchase-item-qty {
    font-weight: 800;
    color: var(--danger);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.purchase-send {
    width: 100%;
    justify-content: center;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.purchase-send.is-disabled { opacity: 0.55; cursor: not-allowed; }

.purchase-warn {
    background: var(--danger-bg);
    border: 1px dashed var(--danger);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--danger);
    font-weight: 600;
    margin-bottom: 16px;
}
.purchase-ok { color: var(--success); font-weight: 700; padding: 12px 0; font-size: 14px; }
.purchase-empty { color: var(--text-muted); font-size: 14px; padding: 12px 0; }

.range-dish-summary {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.range-dish-summary h4 { margin: 0 0 10px; font-size: 14px; color: var(--text-primary); }
.range-dish-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dish-chip {
    display: inline-flex;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}
.dish-chip b { color: var(--primary-color); font-variant-numeric: tabular-nums; }

/* --- History toolbar --- */
.history-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.history-toolbar input[type="search"] {
    flex: 1 1 220px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
}
.history-dishes {
    max-width: 320px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.history-money { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Top bar actions --- */
.top-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}
.cloud-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.cloud-status-icon { line-height: 1; }

/* --- Sync state and theme, as one control ---------------------------------
   Two separate circles in the corner, one of them a cloud with no word next to
   it and the other a monitor glyph standing for "follow the system". Neither
   said what it was. Joining them into a single segmented pill buys back the
   width that made hiding the sync label look necessary, and the theme button
   keeps showing the mode actually in force (sun, moon, or screen) rather than
   a label nobody could read off an icon.
   ------------------------------------------------------------------------ */
.status-segment {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}
/* The children drop their own borders and corners: the segment owns both, so
   the divider between them is a single hairline rather than two adjacent
   edges with a seam. */
.status-segment .cloud-status,
.status-segment .header-btn {
    border: none;
    border-radius: 0;
    background: transparent;
}
.status-segment .header-btn {
    border-inline-start: 1px solid var(--border-color);
    width: 36px;
    height: auto;
    flex: 0 0 auto;
}
.status-segment .header-btn:hover { background: var(--bg-input); }
/* Inset so the ring follows the segment's outer shape instead of a square
   corner poking through the rounded end. */
.status-segment .header-btn:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.status-segment .cloud-status { padding: 7px 12px; }

@media (max-width: 1100px) {
    /* The label stays. It used to be dropped here to reclaim nav width, which
       is how a manager ended up looking at a bare cloud with no way to tell
       synced from local. The segment recovers that width instead. */
    .status-segment .cloud-status { padding: 7px 10px; }
}

/* --- Dashboard: upcoming events strip + range row --- */
.upcoming-strip {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.upcoming-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.upcoming-strip-head h4 { margin: 0; font-size: 16px; color: var(--text-primary); }
.upcoming-strip-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.upcoming-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.upcoming-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #a855f7);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.upcoming-card:hover { 
    border-color: rgba(99, 102, 241, 0.3); 
    transform: translateY(-4px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.upcoming-card:hover::before {
    opacity: 1;
}
.upcoming-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.upcoming-name { 
    font-weight: 800; 
    font-size: 15px; 
    line-height: 1.3;
    color: var(--text-primary); 
    overflow-wrap: anywhere; 
}
.upcoming-days {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.upcoming-days.is-today { 
    color: var(--danger); 
    background: rgba(239, 68, 68, 0.1);
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.upcoming-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
}
.upcoming-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.upcoming-meta svg {
    opacity: 0.7;
}

.dash-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dash-range-row select {
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
}
.dash-range-summary { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* --- Add-inventory modal form --- */
.add-inv-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: flex-start;
}
.add-inv-form .supplier-field { flex: 1 1 45%; }
.add-inv-form select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    width: 100%;
}

/* New-row highlight after adding an item */
.inv-card-highlight {
    outline: 3px solid var(--success);
    outline-offset: 2px;
    transition: outline-color 1s ease;
}

/* Method-specific send buttons keep WhatsApp green for WhatsApp only */
.purchase-send.email-send { background: #2563eb; }
.purchase-send.website-send { background: #7c3aed; }

/* Directory edit: method select matches inputs */
.supplier-field select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
}

/* --- KPI cards: fluid sizing so long ₪ figures never break out --- */
.stat-card {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 16px 18px;
    min-width: 0;
}
.stat-card h3 {
    /* Scales with the card instead of a fixed size that overflowed. */
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.15;
    margin: 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.stat-card .stat-label {
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.dashboard-stats { gap: 12px; }

@media (max-width: 900px) {
    .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stat-card { min-height: 104px; padding: 14px; }
    .stat-card h3 { font-size: clamp(18px, 5vw, 24px); }
    
    #proc-ai-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .dashboard-stats { grid-template-columns: 1fr !important; }
    #proc-ai-stats { grid-template-columns: 1fr !important; }
}

/* --- Supplier directory: profile chips --- */
.supplier-contact { font-weight: 500; font-size: 13px; color: var(--text-muted); }
.supplier-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.supplier-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-solid);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.supplier-notes {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.supplier-edit-fields .supplier-field { flex: 1 1 200px; }

/* --- Purchase card: editable order message --- */
.purchase-constraints {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.purchase-msg-wrap { margin-bottom: 12px; }
.purchase-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.purchase-copy-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.purchase-copy-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.purchase-msg {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    white-space: pre-wrap;
}
.purchase-msg:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.purchase-send-row { display: flex; flex-direction: column; gap: 8px; }
.pickup-note {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--warning-bg);
    border: 1px dashed var(--warning);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- Monday sync report --- */
.sync-report-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.sync-report-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

/* Default ordering channel stands out from the other available channels. */
.supplier-chip .chip-default,
.supplier-chip.is-default {
    color: var(--primary-color);
    font-weight: 800;
}
.supplier-chip .chip-missing { color: var(--warning); font-weight: 700; }

/* --- Forecast chart --- */
.forecast-card { margin-bottom: 20px; padding: 20px; }
.forecast-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.forecast-head h4 { margin: 0; font-size: 17px; color: var(--text-primary); }
.forecast-note { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.forecast-wrapper { height: 380px; }
/* Taller than before, because the legend moved out of the canvas and the plot
   no longer has to share this box with eight wrapped labels. */
@media (max-width: 700px) { .forecast-wrapper { height: 340px; } }

/* --- Chart legend, as a scrolling chip rail --------------------------------
   One row that swipes sideways rather than a block that rewraps. Each chip is
   a button: tapping it hides that series.
   ------------------------------------------------------------------------ */
.chip-legend {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 4px;
    overflow-x: auto;
    /* Both halves are needed and neither is optional.
       A grid or flex item defaults to `min-width: auto`, which is min-content,
       so `1fr` is really `minmax(auto, 1fr)` and the track still grows to fit.
       Without these the rail measured 973px and dragged the whole chart card
       out to 1013px inside a 361px grid, instead of scrolling inside it. */
    min-width: 0;
    max-width: 100%;
    /* No visible scrollbar. The rail is short enough that a bar under it reads
       as a stray line, and the chips overflowing the edge are the affordance. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.chip-legend::-webkit-scrollbar { display: none; }

.chip-legend-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}
.chip-legend-item:hover { border-color: var(--primary-color); color: var(--text-primary); }
.chip-legend-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.chip-legend-dot {
    width: 9px; height: 9px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--chip-color, currentColor);
}

/* A hidden series. The strikethrough carries it as well as the fade does, so
   the state does not depend on telling two greys apart. */
.chip-legend-item.is-off { opacity: .5; text-decoration: line-through; }
.chip-legend-item.is-off .chip-legend-dot { background: var(--text-muted); }

/* The mobile sweep gives every button a 44px minimum box. That is the right
   default and the wrong one here: eight of them at 44px turn a legend into a
   row of buttons taller than some of the bars. 32px keeps them comfortably
   tappable while still reading as labels. */
@media (max-width: 768px) {
    .chip-legend-item {
        min-height: 32px;
        min-width: 0;
    }
}

/* --- Overhead gear + modal --- */
.overhead-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-start: 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-secondary);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s ease, color 0.2s ease;
}
.overhead-gear:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.overhead-card {
    max-width: 620px;
    max-height: 88vh;
}
/* Header, mode switch and actions stay put; only the pane scrolls. */
.overhead-card > .supplier-modal-head,
.overhead-card > .overhead-mode,
.overhead-card > .supplier-edit-actions { flex: 0 0 auto; }

.overhead-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.overhead-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    flex: 1 1 200px;
}
.overhead-radio:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-color);
}
.overhead-radio input { margin: 0; cursor: pointer; }

.overhead-pane {
    display: block;
    /* The card is a flex column with max-height:88vh. Without min-height:0 a
       flex child refuses to shrink below its content, so the modal grew past
       the viewport and the action buttons became unreachable. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-inline-end: 4px;
}
.overhead-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.overhead-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.overhead-toolbar input[type="search"] {
    flex: 1 1 200px;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
}
.overhead-selectall,
.overhead-group-all,
.overhead-field-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.overhead-catalog {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 14px;
}
.overhead-group { border-bottom: 1px solid var(--border-color); }
.overhead-group:last-child { border-bottom: none; }
.overhead-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    list-style: none;
}
.overhead-group summary::-webkit-details-marker { display: none; }
.overhead-group-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
    padding: 4px 8px 12px;
}

.overhead-custom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
.overhead-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.overhead-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.overhead-row-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.overhead-row-amount {
    width: 120px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-solid);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.overhead-row-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.overhead-row-remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.overhead-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.overhead-summary {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}
.overhead-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.overhead-summary-row strong { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.overhead-summary-row.is-result {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 15px;
}
.overhead-summary-row.is-result strong { color: var(--primary-color); font-size: 20px; }