/* dark-mode.css — Dark mode overrides (follows device preference).
   Split from style.css (load order matters: see the stylesheet <link> order in index.html). */
/* ============================
   Dark Mode — follows device preference
   ============================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1d23;
        --surface: #23272e;
        --panel: #23272e;
        --ink: #e0e0e0;
        --textColour: #e0e0e0;
        --muted: #7a8a9e;
        --line: #3a3f4b;
        --accent: #6ea8ff;
        --accent-strong: #6ea8ff;
        --ok-bg: #1a3d2a;
        --ok-fg: #78e8a8;
        --bad-bg: #3d1f1f;
        --bad-fg: var(--red-200);
        --chip: #2a3040;
        --chip-line: #3a4560;
        --button-primary-admin: #c44fb8;
        --button-primary-customer: #049aaa;
        --no-image-bg: rgba(0,0,0,0.4);
    }

    /* Body / structural */
    html, body {
        color-scheme: dark;
    }

    /* Cards, items, orders — hardcoded #fff overrides */
    .item,
    .order,
    .subscription-tier-card,
    #businesses-list .biz-card,
    .business-card-list .biz-card,
    .slot-btn,
    .gantt-bar.status-arrived,
    .gantt-bar.status-arrived.gantt-bar-group {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--line);
    }

    /* Panels, modals, sheets */
    .modalinner,
    .directory-create-business-modal .modal-inner,
    .qr-modal .modal-inner,
    .item-desc-modal .idm-card,
    .sheet.ues-open,
    .user-edit-sheet,
    .table-edit-sheet,
    .sheet {
        background: var(--surface);
        color: var(--ink);
    }
    .modalinner {
        box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px;
    }

    /* Inputs */
    input, select, textarea,
    input[type="time"], input[type="date"] {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--line);
    }
    select.inherited-station-disabled {
        background: var(--grey-850);
        color: #999;
    }
    ::placeholder {
        color: var(--muted);
        opacity: 1;
    }

    /* Buttons — secondary/link keep readability */
    button.secondary {
        color: var(--brand-lilac);
        border-color: var(--brand-lilac);
    }
    button.link-button {
        color: var(--brand-lilac);
    }

    /* Navigation pills and filter bar */
    .pill-btn,
    .filter-btn {
        color: var(--ink);
    }
    .mode-btn {
        background: rgba(255,255,255,0.06);
        color: var(--ink);
    }

    /* Tables */
    .sc-responsive-table table {
        background: var(--surface);
    }
    .sc-responsive-table thead {
        background: var(--grey-850);
    }
    .sc-responsive-table tbody tr:nth-child(even) {
        background: rgba(255,255,255,0.03);
    }
    tr.inactive {
        background: var(--grey-850);
    }

    /* Feature toggles */
    .feature-toggle {
        background: #2e2e1f;
    }
    .feature-toggle.enabled {
        background: #2e1f3a;
    }
    .feature-toggle .state-badge {
        color: var(--ink);
    }
    .feature-toggle .hint {
        color: var(--muted);
    }
    .subscription-tier-card.is-included {
        background: #2e1f3a;
    }

    /* Status badges */
    .status-badge.delivery {
        background: #1f3860;
        color: #9ac4ff;
    }
    .status-badge.pickup {
        background: #0e3020;
        color: #6fd9a0;
    }
    .status-badge.eta {
        background: var(--grey-850);
        color: var(--ink);
    }
    .status-badge.refunded {
        background: #3d1f22;
        color: var(--red-200);
    }
    .status-badge.sent {
        background: var(--grey-850);
        color: var(--grey-400);
    }
    .status-badge.delivered {
        background: #0e3020;
        color: #6fd9a0;
    }
    .status-badge.unpaid {
        background: #3d3520;
        color: #e8d870;
    }
    .status-badge.paid {
        background: #0e3020;
        color: #6fd9a0;
    }
    .pill-badge {
        background: #1f3040;
        color: #8ac0e8;
    }
    .item-veg-badge {
        background: #1a3a22;
        color: #80d898;
    }
    .item-vegan-badge {
        background: #153320;
        color: #6dcc8a;
    }
    .item-spice-badge { color: #e07050; }
    .item-spice-mild   { background: #3a2218; color: #d07828; }
    .item-spice-medium { background: #3d1e18; color: #d05030; }
    .item-spice-hot    { background: #3f1812; color: #c83020; }
    .spice-dot { background: #4a3a36; }
    .spice-dot--on:nth-child(1){ background: #d4761a; }
    .spice-dot--on:nth-child(2){ background: #c03a18; }
    .spice-dot--on:nth-child(3){ background: #a01818; }
    .refunded-inline {
        background: #3d1f22;
        color: var(--red-200);
    }
    .order-override-pill {
        background: linear-gradient(135deg, #3a3520, #3a3010);
        color: #e8d870;
    }

    /* Gantt / bookings */
    .gantt-bar.status-rejected {
        background: var(--bad-bg);
    }
    .gantt-bar.gantt-bar-group {
        background: #1f2d50;
    }

    /* Product images placeholder */
    .productimage {
        background: #2a3a40;
    }

    /* Network indicators */
    #network-indicator {
        background: rgba(255,255,255,0.04);
    }
    #network-indicator.network-online {
        background: rgba(46,204,113,0.08);
    }
    #network-indicator.network-offline {
        background: rgba(231,76,60,0.06);
    }
    .network-offline-banner {
        background: #3d1f1f;
        color: var(--red-200);
    }

    /* Activated business card (later file than till-layout.css, so ties resolve here) */
    #businesses-list .biz-card.activated-business-card,
    .business-card-list .biz-card.activated-business-card {
        background: var(--surface);
        box-shadow: 0 2px 8px rgba(154, 46, 142, 0.15);
        color: var(--ink);
    }
    /* Match the light rule's specificity (0,3,0) so this wins by file order. */
    #businesses-list .biz-card .business-activated-pill,
    .business-card-list .biz-card .business-activated-pill {
        background: var(--button-primary-admin);
        border-color: transparent;
    }

    /* Misc text overrides for hardcoded colors */
    .receipt-footer { color: var(--grey-450); }
    .receipt-company { color: var(--ink); }
    .opening-screen .hint { color: rgba(255,255,255,0.5); }
    .directory-empty-copy { color: #9aa0a8; }
    .directory-create-business-modal p { color: #9aa0a8; }
    .item-desc-modal .idm-text { color: var(--ink); }
    #deliveries-range-summary { color: var(--ink); }
    .refund-item-btn .refund-item-qty { color: var(--grey-450); }

    /* Scrollbar — subtle dark */
    ::-webkit-scrollbar {
        background: var(--bg);
    }
    ::-webkit-scrollbar-thumb {
        background: #3a3f4b;
        border-radius: 4px;
    }

    /* Logo invert for dark bg */
    header #logo img {
        filter: invert(1) brightness(1.8);
    }

    /* Directory search container */
    #businesses-results.panel {
        background: var(--surface);
        border-color: var(--line);
        box-shadow: none;
    }

    /* Slots Gantt chart */
    .slots-gantt {
        background: var(--surface);
        border-color: var(--line);
    }


    .gantt-axis,
    .gantt-row-label,
    .gantt-row-lane {
        background: rgba(255,255,255,0.04);
        border-color: var(--line);
        box-shadow: none;
    }
    .gantt-axis-tick::after {
        background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    }
    .gantt-bar {
        box-shadow: none;
    }
    .gantt-bar.status-arrived {
        background: #1d2330;
        color: #efe3ff;
        border-color: var(--brand-lavender);
    }
    .gantt-bar.status-arrived .gantt-bar-party {
        background: var(--brand-lavender);
        color: #101318;
        border-color: var(--brand-lavender);
    }
    .gantt-now-line::before {
        background: #f5f5f5;
        color: #111827;
    }

    /* Admin action icon buttons — same specificity as the light rules in
       sheets.css; this file loads later, so it wins without !important. */
    .admin-action-btn, .refund-station, .tableorder-receipt-btn {
        background: var(--surface);
        border-color: var(--line);
    }
    .admin-action-btn img, .refund-station img, .tableorder-receipt-btn img {
        filter: invert(1);
    }
    .stripe-action-btn {
        background: var(--surface);
        border-color: var(--line);
    }

    /* Gantt booking popup */
    .gantt-action-popup {
        background: var(--surface);
        border-color: var(--line);
        box-shadow: 0 6px 18px rgba(0,0,0,0.4);
        color: var(--ink);
    }
    .gantt-action-popup .gantt-popup-details {
        color: var(--muted);
    }

    /* Opening / splash screen */
    .opening-screen {
        background-color: #1a1d23;
    }
    .opening-screen .overlay {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    }
    .opening-btn.secondary {
        background: rgba(30,33,40,0.92);
        color: var(--brand-lilac);
    }

    /* Logged-in banner — lighten the user icon for dark bg */
    .login-banner.logged-in {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 21C19 17.134 15.866 14 12 14C8.13401 14 5 17.134 5 21M12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7C16 9.20914 14.2091 11 12 11Z' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Info button — lighten the icon for dark bg */
    .biz-hours-info-btn,
    .item .desc-btn {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 11V16M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM12.0498 8V8.1L11.9502 8.1002V8H12.0498Z' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    /* Favourite hearts — remove white background rect for dark mode */
    .fav-btn img[src*="fav-off"] {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7.15428C10 2.45984 3 2.95984 3 8.95987C3 14.9599 12 19.9601 12 19.9601C12 19.9601 21 14.9599 21 8.95987C21 2.95984 14 2.45984 12 7.15428Z' fill='%23404550'/%3E%3C/svg%3E");
    }
    .fav-btn img[src*="fav-on"] {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7.15428C10 2.45984 3 2.95984 3 8.95987C3 14.9599 12 19.9601 12 19.9601C12 19.9601 21 14.9599 21 8.95987C21 2.95984 14 2.45984 12 7.15428Z' fill='%2302B1C4'/%3E%3C/svg%3E");
    }

    /* Cart +/- and bin icons — lighten for dark backgrounds */
    .cart li .adjustnumber button:first-of-type {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12H18' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .cart li .adjustnumber button.inc {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12H12M12 12H18M12 12V18M12 12V6' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .cart li button:nth-of-type(1) {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V17M10 10V17M6 6V17.8C6 18.9201 6 19.4798 6.21799 19.9076C6.40973 20.2839 6.71547 20.5905 7.0918 20.7822C7.5192 21 8.07899 21 9.19691 21H14.8031C15.921 21 16.48 21 16.9074 20.7822C17.2837 20.5905 17.5905 20.2839 17.7822 19.9076C18 19.4802 18 18.921 18 17.8031V6M6 6H8M6 6H4M8 6H16M8 6C8 5.06812 8 4.60241 8.15224 4.23486C8.35523 3.74481 8.74432 3.35523 9.23438 3.15224C9.60192 3 10.0681 3 11 3H13C13.9319 3 14.3978 3 14.7654 3.15224C15.2554 3.35523 15.6447 3.74481 15.8477 4.23486C15.9999 4.6024 16 5.06812 16 6M16 6H18M18 6H20' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    label.checkbox input[type="checkbox"]:checked~.dummycheckbox {
        filter: invert(1);
    }
}