/* apple-dark.css — the dark Apple theme (Luis, 2026-09-29).
   Same layout, same furniture; only the colours change, to the palette Luis
   sent: #080808 ground, #FFFDFB text, #EC7C22 orange accent, #A4510E deep
   orange. Applied as body.apple-mode.apple-dark on top of apple.css — the
   bar and rail are already Ink, so they stay as they are. The receipt paper
   stays white on purpose: it prints. */

body.apple-mode.apple-dark {
  /* apple.css's own palette */
  --ap-ink:       #fffdfb;
  --ap-mid:       rgba(255, 253, 251, 0.74);
  --ap-soft:      rgba(255, 253, 251, 0.50);
  --ap-canvas:    #080808;
  --ap-ground:    #080808;
  --ap-white:     #141414;
  --ap-line:      rgba(255, 255, 255, 0.09);
  --ap-line-soft: rgba(255, 255, 255, 0.06);
  --ap-tile:      #1c1c1e;
  --ap-acc:       #ec7c22;
  --ap-acc-deep:  #a4510e;
  --ap-acc-light: #f3a76a;
  --ap-acc-rgb:   236, 124, 34;
  --ap-blue:      #ec7c22;
  --ap-blue-hi:   #f28d3c;
  --ap-lift:      #ec7c22;
  --ap-figure-grad: linear-gradient(175deg, #fffdfb 0%, #e8e3de 42%, #9d968f 100%);
  --ap-raise-filter: drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.10)) drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.75));
  --ap-raise-soft:   drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.10)) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
  --ap-engrave: 1px 1px 1px rgba(255, 255, 255, 0.08), -1px -1px 1px rgba(0, 0, 0, 0.75);
  --ap-engrave-filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.75)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.08));
  /* index.css's */
  --text-primary:   #fffdfb;
  --text-secondary: rgba(255, 253, 251, 0.60);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --accent:         #ec7c22;
  --brand-blue:     #ec7c22;
  background: #080808 !important;
  color: #fffdfb;
  color-scheme: dark;
}
body.apple-mode.apple-dark::before { background: none !important; }
body.apple-mode.apple-dark .main-content { background: transparent !important; color: #fffdfb; }

/* ── Cards: every card and panel, a shade above the ground, hairline edge ── */
body.apple-mode.apple-dark :is(.card, .card-compact, .card-wide, .table-wrap, .hero-card, .glass-card-cus, .checkout-panel,
                                .po-card, .sh-card, .cr-tablewrap, .dr-card, .totals-merged, .parts-table-card, .product-card, .acc-card) {
  background: radial-gradient(ellipse 95% 100% at 50% 50%, #161616 0%, #151515 65%, #111111 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  color: #fffdfb;
}
body.apple-mode.apple-dark .card-divider { background: rgba(255, 255, 255, 0.08) !important; }

/* ── Words ───────────────────────────────────────────────────────────────── */
body.apple-mode.apple-dark :is(h1, h2, h3, .card-title, .table-title, .po-title, .sh-title, .cr-title, .dr-title, .rep-name, .cust-name, b, strong) { color: #fffdfb; }
body.apple-mode.apple-dark :is(.card-label, .card-desc, .table-subtitle, .rep-region, .po-subtitle, .sh-subtitle, .cr-subtitle, .th-sub, thead th, .cr-table thead th, .po-table thead th) { color: rgba(255, 253, 251, 0.55) !important; }
body.apple-mode.apple-dark .table-wrap .rep-name { color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.table-wrap th, .cr-table th, .po-table th, .cr-table td, .po-table td, .table-wrap tbody td) { border-color: rgba(255, 255, 255, 0.07) !important; }
body.apple-mode.apple-dark tbody tr:hover td,
body.apple-mode.apple-dark .po-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04) !important; }
body.apple-mode.apple-dark #salesTableBody tr:has(.row-receipt-btn):hover td { background: rgba(255, 255, 255, 0.05) !important; }
/* Figures: plum and green lift a step so they read on black. */
body.apple-mode.apple-dark :is(.val-amount, .cr-money, .po-money .ok, .dsc-sum) { color: #6fcfa9 !important; }
body.apple-mode.apple-dark :is(.val-profit, .money-green) { color: #6fcfa9 !important; }
body.apple-mode.apple-dark :is(.val-cost-on, .po-money .due, .val-disc, .rep-refunded) { color: #ff8f8f !important; }
body.apple-mode.apple-dark .table-wrap .val-cost-on { color: #ff8f8f !important; }
body.apple-mode.apple-dark .rep-tradein { color: #6fcfa9; }
body.apple-mode.apple-dark a { color: #f3a76a; }

/* ── Faces: inputs, chips, plain buttons ────────────────────────────────── */
body.apple-mode.apple-dark :is(.form-input, .form-control, input[type="text"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], select, textarea,
                                .price-edit, .pos-in, .rf-amt input, .rf-note, .dsc-note, .dsc-amt input, .edm-in, .upg-in, .miscModal input, .split-input-wrap input, .num) {
  background: #161616 !important; color: #fffdfb !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important;
}
body.apple-mode.apple-dark :is(input, textarea)::placeholder { color: rgba(255, 253, 251, 0.38) !important; }
body.apple-mode.apple-dark :is(.form-input, .pos-in, .rf-amt input, .dsc-amt input, .price-edit):focus { border-color: #ec7c22 !important; box-shadow: 0 0 0 4px rgba(236, 124, 34, 0.22) !important; background: #101010 !important; }
body.apple-mode.apple-dark .price-edit.price-locked { background: #101010 !important; color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.sf-btn, .pag-btn, .misc-btn-plain, .rf-cancel, .pos-cancel, .dsc-cancel, .upg-cancel, .cv-btn-cancel, .po-chip, .sh-chip, .rf-chips button, .pos-chips button, .dsc-chips button, .po-chips .po-chip,
                                .rf-line, .rf-stock button, .cr-upg-btn, .po-tabs, .tc-chip, .quick-btn, .acc-btn, .recent-sales-badge-btn, .tool-others-btn, .cal-day, .cs-radio, .csc-radio, .payment-icon-btn, .cart-source-chip, .tk-summary, .co-step) {
  background: #161616 !important; color: #fffdfb !important; border-color: rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode.apple-dark :is(.sf-btn, .pag-btn, .misc-btn-plain, .po-chip, .sh-chip, .rf-chips button, .pos-chips button, .dsc-chips button, .quick-btn, .acc-btn, .recent-sales-badge-btn):hover { background: #1f1f1f !important; }
body.apple-mode.apple-dark .rf-thumb { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.08); }
/* The lit chip: orange ring, orange words. */
body.apple-mode.apple-dark :is(.po-chip.on, .sh-chip.on, .rf-chips button.on, .pos-chips button.on, .dsc-chips button.on, .po-tabs a.on, .sf-opt.is-sel, .pag-btn.active) {
  background: rgba(236, 124, 34, 0.14) !important; border-color: #ec7c22 !important; color: #f3a76a !important; box-shadow: 0 0 0 3px rgba(236, 124, 34, 0.16) !important;
}
body.apple-mode.apple-dark .po-tabs a { color: rgba(255, 253, 251, 0.75); }
body.apple-mode.apple-dark .po-tabs a b { background: rgba(255, 255, 255, 0.10); }
body.apple-mode.apple-dark .po-tabs a.on b { background: rgba(236, 124, 34, 0.25); }
/* Primary buttons go orange: the palette's one bright colour. */
body.apple-mode.apple-dark :is(.misc-btn-go, .dsc-apply, .pos-go, .upg-go, .po-btn.go, .po-ic.go, .btn-primary, .add-to-cart-btn, .complete-sale-btn, .submit-sale-btn, .redeem-btn, .cv-btn-ok, .pag-btn.active) {
  background: linear-gradient(180deg, #f08a36 0%, #ec7c22 55%, #c8631a 100%) !important; color: #fffdfb !important; border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(236, 124, 34, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
body.apple-mode.apple-dark .pag-btn.active { color: #fffdfb !important; }
/* Dropdown panels and menus. */
body.apple-mode.apple-dark :is(.sf-panel, .tm-panel, .notif-dropdown, .search-dropdown, .ai-panel, .sh-dates input) { background: #161616 !important; color: #fffdfb !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; }
body.apple-mode.apple-dark :is(.sf-opt, .tm-opt, .search-item, .notif-item) { color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.sf-opt:hover, .tm-opt:hover, .search-item:hover, .notif-item:hover) { background: rgba(255, 255, 255, 0.06) !important; color: #f3a76a !important; }
body.apple-mode.apple-dark .tm-opt .tm-ico { color: rgba(255, 253, 251, 0.6); }
body.apple-mode.apple-dark .tm-opt:hover .tm-ico { color: #f3a76a; }

/* ── Sheets and dialogs (the receipt paper stays white) ─────────────────── */
body.apple-mode.apple-dark :is(.misc-card, .rf-card, .pos-card, .dsc-card, .upg-card, .edm-card, .ded-modal-sheet .card, .cv-card, .modal-card, .ai-panel) {
  background: #161616 !important; color: #fffdfb !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
}
body.apple-mode.apple-dark :is(.misc-title, .rf-head b, .pos-head b, .dsc-head b, .rf-name b, .rf-total) { color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.rf-sub, .rf-on, .pos-sub, .pos-on, .dsc-on, .rf-lbl, .pos-lbl, .dsc-lbl, .ti-field > span, .ti-mode-lbl, .rf-name small, .rf-prior, .pos-total small, .rf-total small) { color: rgba(255, 253, 251, 0.55) !important; }
body.apple-mode.apple-dark .rf-total { color: #ff8f8f !important; }
body.apple-mode.apple-dark .pos-total { color: #6fcfa9 !important; }
body.apple-mode.apple-dark .ded-modal-x { background: #1c1c1e; color: #fffdfb; border-color: rgba(255, 255, 255, 0.12); }

/* ── Dashboard bits ─────────────────────────────────────────────────────── */
body.apple-mode.apple-dark .table-badge { background: rgba(255, 255, 255, 0.08) !important; color: #fffdfb !important; }
body.apple-mode.apple-dark .tc-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; background: #1c1c1e !important; color: rgba(255, 253, 251, 0.8) !important; }
body.apple-mode.apple-dark .tc-chip.has-ded { background: rgba(236, 124, 34, 0.14) !important; color: #f3a76a !important; }
body.apple-mode.apple-dark .tc-chip.tc-chip-refunds.has-rf { background: rgba(255, 143, 143, 0.14) !important; color: #ff8f8f !important; }
body.apple-mode.apple-dark .vbar-track { background: rgba(255, 255, 255, 0.08) !important; }
body.apple-mode.apple-dark .skeleton { background: rgba(255, 255, 255, 0.06) !important; }
body.apple-mode.apple-dark .order-count-chip { background: rgba(255, 255, 255, 0.10) !important; color: #fffdfb !important; }
body.apple-mode.apple-dark .row-receipt-btn { background: rgba(236, 124, 34, 0.14) !important; color: #f3a76a !important; }
body.apple-mode.apple-dark .table-footer-row td { color: rgba(255, 253, 251, 0.55) !important; border-color: rgba(255, 255, 255, 0.07) !important; }
body.apple-mode.apple-dark .reg-key span { color: rgba(255, 253, 251, 0.55); }

/* ── The two black sale pills and the search stay as they are (Ink); the
      bare glyph actions on the pre-orders page lighten. ── */
body.apple-mode.apple-dark .po-ic { color: rgba(255, 253, 251, 0.55); filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.8)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.10)); }
body.apple-mode.apple-dark .po-ic:hover { color: #f3a76a; }
body.apple-mode.apple-dark .po-ord { color: #f3a76a; background: rgba(236, 124, 34, 0.10); border-color: rgba(236, 124, 34, 0.45); }
body.apple-mode.apple-dark .po-search.inv-glow, body.apple-mode.apple-dark .search-wrapper.inv-glow, body.apple-mode.apple-dark #partsSearchWrap.inv-glow {
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%) !important; border-color: rgba(236, 124, 34, 0.55) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.apple-mode.apple-dark :is(.po-search.inv-glow, .search-wrapper.inv-glow, #partsSearchWrap.inv-glow)::before { box-shadow: 0 0 16px 1px rgba(236, 124, 34, 0.35); }
body.apple-mode.apple-dark :is(.po-search.inv-glow, .search-wrapper.inv-glow, #partsSearchWrap.inv-glow)::after { background: conic-gradient(from var(--sb-ang), transparent 0deg, #ec7c22 16deg, transparent 54deg); }
body.apple-mode.apple-dark :is(.po-search.inv-glow input, .search-wrapper.inv-glow input, #partsSearchWrap.inv-glow #productSearch) { color: #fffdfb !important; text-shadow: none !important; background: transparent !important; }
body.apple-mode.apple-dark :is(.po-search.inv-glow input, #partsSearchWrap.inv-glow #productSearch, .search-wrapper.inv-glow input)::placeholder { color: rgba(255, 253, 251, 0.45) !important; }
body.apple-mode.apple-dark .inv-bc .inv-corners, body.apple-mode.apple-dark .inv-bc .inv-bars { stroke: #f3a76a; }

/* The house bubble reads on dark. */
body.apple-mode.apple-dark .pos-pop { background: #fffdfb; color: #080808; }
/* Scrollbars follow. */
body.apple-mode.apple-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* ── Quick Sale checkout (Luis, 2026-09-29) ─────────────────────────────── */
/* The category bar: a dark pill, no white ring. */
body.apple-mode.apple-dark .quick-access-grid { background: #161616 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 0, 0, 0.5) !important; }
body.apple-mode.apple-dark .acc-btn, body.apple-mode.apple-dark .acc-item .acc-label { color: #fffdfb !important; }
/* The customer boxes and notes. */
body.apple-mode.apple-dark .form-group .form-input { background: #161616 !important; color: #fffdfb !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important; }
body.apple-mode.apple-dark .form-group .form-input:focus { border-color: #ec7c22 !important; box-shadow: 0 0 0 3px rgba(236, 124, 34, 0.22) !important; background: #101010 !important; }
body.apple-mode.apple-dark .form-group .form-input::placeholder { color: rgba(255, 253, 251, 0.38) !important; }
body.apple-mode.apple-dark .checkout-search-row #customerSearchInput { background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%) !important; color: #fffdfb !important; border-color: rgba(236, 124, 34, 0.55) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important; }
body.apple-mode.apple-dark .checkout-search-row #customerSearchInput::placeholder { color: rgba(255, 253, 251, 0.45); }
body.apple-mode.apple-dark .checkout-search-row .cs-glow::before { box-shadow: 0 0 16px 1px rgba(236, 124, 34, 0.35); }
body.apple-mode.apple-dark .checkout-search-row .cs-glow::after { background: conic-gradient(from var(--sb-ang), transparent 0deg, #ec7c22 16deg, transparent 54deg); }
body.apple-mode.apple-dark .cs-scan .cs-corners, body.apple-mode.apple-dark .cs-scan .cs-bars { stroke: #f3a76a; }
/* Payment keys and the totals box. */
body.apple-mode.apple-dark .payment-icon-btn { background: #161616 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #fffdfb !important; box-shadow: none !important; }
body.apple-mode.apple-dark .payment-icon-btn span { color: #fffdfb !important; }
body.apple-mode.apple-dark .payment-icon-btn.active { background: rgba(236, 124, 34, 0.14) !important; border-color: #ec7c22 !important; box-shadow: 0 0 0 3px rgba(236, 124, 34, 0.18) !important; }
body.apple-mode.apple-dark .cart-summary { background: #111111 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #fffdfb; }
body.apple-mode.apple-dark .cart-summary .summary-row, body.apple-mode.apple-dark .cart-summary .summary-row span { color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.cart-item, .cart-item-name, .cart-item-imei, .cit-label, .cit-val, .summary-label) { color: #fffdfb !important; }
body.apple-mode.apple-dark .cart-item { background: #161616 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
body.apple-mode.apple-dark .cart-item-imei { color: rgba(255, 253, 251, 0.55) !important; }
/* The phone cards: what the retired dark mode did for them, in this theme. */
body.apple-mode.apple-dark .gsm-card { background: radial-gradient(circle at 30% 20%, #1d1d1f 0%, #141414 60%, #101010 100%) !important; border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important; }
body.apple-mode.apple-dark .gsm-card:hover { border-color: rgba(236, 124, 34, 0.45) !important; }
body.apple-mode.apple-dark :is(.gsm-head, .gsm-mid, .gsm-foot) { background: transparent !important; }
body.apple-mode.apple-dark .gsm-tiles { background: rgba(255, 255, 255, 0.03) !important; }
body.apple-mode.apple-dark .gsm-tile, body.apple-mode.apple-dark .gsm-tab { border-left-color: rgba(255, 255, 255, 0.08) !important; }
body.apple-mode.apple-dark .gsm-hero b { background: linear-gradient(175deg, #fffdfb 0%, #e9e4de 45%, #a39c95 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.08)) drop-shadow(1px 1px 1.5px rgba(0, 0, 0, 0.8)) !important; }
body.apple-mode.apple-dark :is(.gsm-hero span, .gsm-tile span, .gsm-facts em, .gsm-imei-head) { color: rgba(255, 253, 251, 0.55) !important; }
body.apple-mode.apple-dark :is(.gsm-title, .gsm-tile b, .gsm-facts li) { color: #fffdfb !important; }
body.apple-mode.apple-dark :is(.gsm-hero svg, .gsm-tile svg, .gsm-facts svg) { color: rgba(255, 253, 251, 0.7) !important; }
body.apple-mode.apple-dark .gsm-imgwrap { background: #0e0e0e !important; }
/* Repairs checkout: the brand bar and tool pills follow the category bar. */
body.apple-mode.apple-dark :is(.mp-seg, .rp-tools, .brand-seg, .tool-seg) { background: #161616 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important; }
/* The customer boxes carry a white gradient with !important in checkout/index.css;
   the id selectors here outrank it. The notes box by its id for the same reason. */
body.apple-mode.apple-dark .form-group #customerName, body.apple-mode.apple-dark .form-group #customerPhone,
body.apple-mode.apple-dark .form-group #saleNotes, body.apple-mode.apple-dark .form-group textarea.form-input {
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%) !important; color: #fffdfb !important;
  border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important; text-shadow: none !important;
}
body.apple-mode.apple-dark .form-group #customerName:focus, body.apple-mode.apple-dark .form-group #customerPhone:focus,
body.apple-mode.apple-dark .form-group #saleNotes:focus { border-color: #ec7c22 !important; box-shadow: 0 0 0 3px rgba(236, 124, 34, 0.22) !important; }
body.apple-mode.apple-dark .form-group #customerName::placeholder, body.apple-mode.apple-dark .form-group #customerPhone::placeholder,
body.apple-mode.apple-dark .form-group #saleNotes::placeholder { color: rgba(255, 253, 251, 0.40) !important; }
/* The figures on the phone cards: the shorthand above reset the text clip, so
   the gradient painted as a box. Clip it to the glyphs again, with weight. */
body.apple-mode.apple-dark .gsm-hero b { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
/* The same page containers, dark (2026-09-29). */
body.apple-mode.apple-dark :is(.po-card, .cr-tablewrap, .dr-card, .sr-card, .sr-stat-card, .nrg-card, .cust-stat-card, .cust-table-wrap,
  .cv-history-card, .cv-points-card, .cv-spend-card, .cvh-tablewrap, .glass-stats-card, .inv-table-card, .parts-table-card, .summary-card,
  .fits-card, .apm-box, .qt-card, .wl-card, .wl-table-wrap, .nt-card, .imei-card, .imei-balance-card, .ret-card, .sd-tablewrap, .order-card,
  .po-panel, .mini-table-panel, .parts-side-panel, .cl-panel, .ulk-panel, .amt-card, .totals-merged, .lay-card, .layaway-card) {
  background: radial-gradient(ellipse 95% 100% at 50% 50%, #161616 0%, #151515 65%, #111111 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  color: #fffdfb;
}
body.apple-mode.apple-dark .card .table-wrap { border: 0 !important; box-shadow: none !important; background: none !important; }