/* ==========================================================================
   Taha Auto admin: the "navy" look (body.theme-navy), the approved phone design
   (Figma, Sep 2026). Navy surfaces, one blue accent, filled status pills.
   The default look; glass and classic stay in More → Look, and the accent
   picker works here too (js/accent.js writes a custom accent inline on <body>).
   Built on the classic base (no theme-glass): none of the glass rules apply.
   Sizes follow the handoff's floors, not the Figma's literal values (its frame
   is drawn at 0.76 scale, so its 9px pill would be 7px on a phone).
   ========================================================================== */
body.theme-navy {
  --bg: #08111B;
  --panel: #0E1A26;
  --panel-2: #172838;
  --card: #111E2A;
  --line: #203346;
  --line-2: #2A3C4F;
  --line-3: #61788F;          /* control boundaries: 3.5:1 on cards */
  --frame: #3A506A;
  --text: #F4F7FB;
  --text-2: #A3B5C6;
  --text-3: #7E93A6;          /* 5.3:1 on cards */
  /* the accent: the Figma's blue, a touch deeper so white reads on it (4.8:1). Text and icons use lighter blues. */
  --accent: #1D6DE5; --accent-rgb: 29, 109, 229; --accent-2: #1A60CA; --accent-hi: #3A82EE;
  --accent-soft: rgba(var(--accent-rgb), .16); --accent-ink: #FFFFFF; --accent-text: #66A9FF; --accent-pale: #8FC0FF; --accent-ui: #4D9BFF;
  --accent-badge: rgba(255, 255, 255, .2);
  --accent-glow-1: 25, 93, 195; --accent-glow-2: 20, 74, 156;
  /* data colours (see admin.css). Awais can't be the look's blue here (Tony is blue), and every other hue is a status:
     magenta. "Sent" is the Figma's done-grey */
  --tech-awais: #D65DB1; --tech-awais-rgb: 214, 93, 177; --tech-awais-ink: #08111B; --tech-awais-text: #F08ACB; --tech-awais-pale: #F5B0DC;
  --st-sent: #9EACB9; --st-sent-rgb: 158, 172, 185; --st-sent-text: #B4C1CD;
  --danger: #E5484D; --danger-text: #FF7A70;
  /* status colours (the Figma's pills): text / border / fill */
  --ok: #276645; --ok-text: #64DBA0; --ok-soft: rgba(100, 219, 160, .12);
  --info: #265F9E; --info-text: #78B7FF;
  --warn: #705725; --warn-text: #F5BD51;
  --teal: #23676A; --teal-text: #6FD3CB;
  --font: "Inter", system-ui, -apple-system, "SF Pro Text", sans-serif;
  --r: 16px; --r-sm: 12px;
  font-family: var(--font);
  background: transparent;   /* the page colour sits on html, so the light below shows */
}
html:has(> body.theme-navy) { background: #08111B; scrollbar-color: #2A3C4F #08111B; }
/* the Figma's light: a faint blue from the top, the page darkening toward the bottom */
body.theme-navy::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90vw 38vh at 50% -8%, rgba(var(--accent-glow-2), .16), transparent 70%),
    linear-gradient(180deg, #0A141F 0%, #08111B 60%, #070F18 100%);
}
body.theme-navy ::selection { background: var(--accent); color: var(--accent-ink); }
body.theme-navy h1, body.theme-navy h2, body.theme-navy h3 { font-family: var(--font); letter-spacing: -.025em; }

/* ---------- status pills: filled, with the word (never colour alone) ---------- */
body.theme-navy .st { border-radius: 999px; font-weight: 750; letter-spacing: .06em; }
body.theme-navy .st--open { color: #78B7FF; border-color: #265F9E; background: #102F50; }
body.theme-navy .st--parts { color: #F5BD51; border-color: #705725; background: #392E18; }
body.theme-navy .st--ready { color: #64DBA0; border-color: #276645; background: #123927; }
body.theme-navy .st--sent { color: #B4C1CD; border-color: #44515D; background: #232C34; }
body.theme-navy .st--partial { color: #6FD3CB; border-color: #23676A; background: #0F3336; }
body.theme-navy .st--paid { color: #8CC7A5; border-color: #3B5E4B; background: #16271F; }
body.theme-navy .st--draft { color: #C3B9F5; border: 1px dashed #6F66A8; background: #1C1938; }
body.theme-navy .st--void { color: #7E93A6; border: 1px dashed #3A4C5E; background: transparent; }
body.theme-navy .st--final { color: #64DBA0; border-color: #276645; background: #123927; }
body.theme-navy .st--quote { color: #6FD3CB; border-color: #23676A; background: #0F3336; }

/* ---------- surfaces the classic base draws with hard-coded near-blacks ---------- */
body.theme-navy .invrow, body.theme-navy .card, body.theme-navy .ccard, body.theme-navy .aitem, body.theme-navy .row { background: var(--card); border-color: var(--line); }
body.theme-navy .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body.theme-navy .btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
body.theme-navy .btn--ghost { border-color: var(--line-2); }
body.theme-navy .og-input { background-color: #0C1721; border-color: var(--line-2); }   /* the colour only: a select keeps site.css's arrow */
body.theme-navy .og-input:focus { border-color: var(--accent-ui); }

/* ---------- phone (≤ 720px) ---------- */
@media (max-width: 720px) {
  /* header: title left, search and + right (the Figma's icon buttons) */
  body.theme-navy .ptop { background: rgba(9, 18, 29, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(141, 173, 203, .13); }
  body.theme-navy .ptop__title { font-weight: 750; letter-spacing: -.035em; }
  body.theme-navy .iconbtn { border-radius: 13px; border: 1px solid var(--line-2); background: #101C28; color: var(--text); }
  body.theme-navy .iconbtn:active { background: #172838; }
  body.theme-navy .iconbtn--primary { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 80%, white); color: var(--accent-ink); box-shadow: 0 8px 22px rgba(var(--accent-rgb), .28); }
  body.theme-navy .iconbtn--primary:active { background: var(--accent-2); }
  body.theme-navy .iconbtn[aria-pressed="true"] { border-color: var(--accent-ui); background: var(--accent-soft); color: var(--text); }

  /* bottom bar */
  body.theme-navy .tabbar { background: rgba(8, 17, 27, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top-color: #263849; }
  body.theme-navy .tabbar__btn { color: #7E93A6; font-weight: 650; }
  body.theme-navy .tabbar__btn.is-active { color: var(--accent-text); font-weight: 750; }   /* text needs 4.5:1 whatever the accent; the icon keeps --accent-ui */
  body.theme-navy .tabbar__n { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--bg); }
  /* the TA circle: the Figma's raised blue button with a ring in the page colour. The gradient only uses shades the ink is
     guaranteed 4.5:1 on; the Figma's highlight is an inset edge, not a lighter fill behind the letters */
  body.theme-navy .tabbar__ta .ta { background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 7px 20px rgba(var(--accent-rgb), .45), 0 0 0 4px var(--bg); }
  body.theme-navy .tabbar__ta.is-open .ta { background: var(--accent-2); }
  body.theme-navy .tabbar__ta.is-listening .ta { background: var(--accent-ink); color: var(--accent); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .5), 0 0 0 4px var(--bg); }
  body.theme-navy .tabbar__ta.is-working .ta { background: var(--accent-2); }
  body.theme-navy.ai-open .tabbar__ta .ta { box-shadow: 0 0 0 4px var(--bg); }

  /* job board */
  body.theme-navy .jb .inv__head { border-bottom-color: #20303E; }
  body.theme-navy .jb .jtabs .chip { color: #7E93A6; }
  body.theme-navy .jb .jtabs .chip.is-active { color: #FFFFFF; }
  body.theme-navy .jstat { border: 1px solid transparent; }
  body.theme-navy .jstat--parts { --jt: #F1B636; --jt-bg: #292215; }
  body.theme-navy .jstat--open { --jt: #52A7FF; --jt-bg: #102C49; }
  body.theme-navy .jstat--ready { --jt: #5BD995; --jt-bg: #102F23; }
  body.theme-navy .jstat--sent { --jt: #9EACB9; --jt-bg: #17212B; }
  body.theme-navy .jstat.is-zero { --jt-bg: #111D29; color: #7E93A6; border-color: #1B2C3C; }
  body.theme-navy .jsec__n { background: #263543; color: #B8C6D3; }
  body.theme-navy .jcard { background: linear-gradient(135deg, #132230, #0F1B27); border-color: #203346; box-shadow: 0 9px 24px rgba(0, 0, 0, .13); }
  body.theme-navy .jcard:active { border-color: #31516D; }
  body.theme-navy .jcard--open { --jt: #78B7FF; --jt-bg: #102C49; }
  body.theme-navy .jcard--parts { --jt: #F5BD51; --jt-bg: #292215; }
  body.theme-navy .jcard--ready { --jt: #64DBA0; --jt-bg: #102F23; }
  body.theme-navy .jcard--sent { --jt: #9EACB9; --jt-bg: #17212B; }
  body.theme-navy .jcard--partial { --jt: #6FD3CB; --jt-bg: #0F2E31; }
  body.theme-navy .jcard--paid { --jt: #8CC7A5; --jt-bg: #14241D; }
  body.theme-navy .jcard--draft { --jt: #C3B9F5; --jt-bg: #1C1938; }
  body.theme-navy .jcard__num { color: #7E96AC; }
  body.theme-navy .jcard__who { color: #9BB0C3; }
  body.theme-navy .jcard__foot { color: #D2DCE6; opacity: 1; }
  body.theme-navy .jskel { background: #111E2A; border-color: #203346; }
  body.theme-navy .jskel > span:first-child, body.theme-navy .jskel i { background-image: linear-gradient(100deg, #152536 30%, #1D3144 50%, #152536 70%); }
  body.theme-navy .jempty { border-color: #284055; background: rgba(16, 29, 41, .45); }
  body.theme-navy .jempty > svg { color: #6095CA; background: #132A40; }
  body.theme-navy .jempty--err { border-color: rgba(229, 72, 77, .4); }
  body.theme-navy .jempty--err > svg { color: var(--danger-text); background: rgba(229, 72, 77, .12); }

  /* job page */
  body.theme-navy .ed--ph .ed__top { background: rgba(10, 20, 31, .93); border-bottom-color: #203140; }
  body.theme-navy .ed--ph .ed__top .back, body.theme-navy .ed--ph .ed__top [data-menu] { background: #101C28; border-color: #2A3C4F; }
  body.theme-navy .ed--ph .panel, body.theme-navy .sec { background: #111E2A; border-color: #213446; }
  body.theme-navy .ed--ph .line { background: #0E1A25; border-color: #223445; }
  body.theme-navy .ed__who { color: #7F94A8; }
  body.theme-navy .ed__voice { background: color-mix(in srgb, var(--accent) 24%, #0C1824); border-color: rgba(var(--accent-rgb), .7); color: var(--accent-text); }   /* the Figma's blue at the default accent */
  body.theme-navy .sec__call, body.theme-navy .sec__av { background: color-mix(in srgb, var(--accent) 26%, #111E2A); color: var(--accent-text); }
  body.theme-navy .ed__mbar { background: rgba(8, 17, 27, .96); border-top-color: #283B4C; }

  /* sheets and lists the other tabs share, until their own pass */
  body.theme-navy .msheet__box { background: #0F1B27; border-top-color: #2B4054; border-radius: 24px 24px 0 0; }
  body.theme-navy .msheet__scrim { background: rgba(0, 5, 10, .72); }
  body.theme-navy .msheet__item.is-active { background: var(--accent-soft); }
  body.theme-navy .msheet__item--close { background: #101C28; border-color: var(--line-2); }
  body.theme-navy .daystrip button { background: #0F1B27; border-color: #223445; }
  body.theme-navy .daystrip button.is-selected { background: color-mix(in srgb, var(--accent) 30%, #0F1B27); border-color: var(--accent-ui); color: var(--accent-text); }   /* follows a picked accent */
  body.theme-navy .daystrip button.is-selected b { color: #FFFFFF; }
  body.theme-navy .daystrip button.is-today small { color: var(--accent-text); }
  body.theme-navy .lstatus button.is-active, body.theme-navy #tech-filter .chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  body.theme-navy #tech-filter { background: #0E1A25; border-color: #223445; }
  body.theme-navy .modal__box, body.theme-navy .drawer { background: #0F1B27; }
  body.theme-navy .modal__box { border-color: #2B4054; border-radius: 24px 24px 0 0; }   /* a sheet, like More */
  body.theme-navy .sheet__grab, body.theme-navy .msheet__grab { background: #43576A; }
  body.theme-navy .cdupe__row { border-color: #705725; background: #241E12; }
  body.theme-navy .cdupe__icon { color: #F5BD51; background: #392E18; }
  body.theme-navy .scrim, body.theme-navy .modal { background: rgba(0, 5, 10, .72); }
}

/* ---------- Schedule, Customers, More, Shop AI (phone) ---------- */
@media (max-width: 720px) {
  body.theme-navy .agenda .aitem__main { background: #111E2A; border-color: #213446; }
  body.theme-navy .agenda .aitem--req .aitem__main { border-color: #2C4054; }
  body.theme-navy .aitem__cta { background: #102F4E; border-color: #2C72BB; color: #73B5FF; }
  body.theme-navy .st--bk-new, body.theme-navy .st--bk-contacted { color: #F5BD51; border-color: #705725; background: #392E18; }
  body.theme-navy .st--bk-scheduled { color: #B4C1CD; border-color: #44515D; background: #232C34; }
  body.theme-navy .st--bk-in_shop { color: #78B7FF; border-color: #265F9E; background: #102F50; }
  body.theme-navy .st--bk-done { color: #64DBA0; border-color: #276645; background: #123927; }
  body.theme-navy .crow { border-bottom-color: #1D2C39; }
  body.theme-navy .crow__av, body.theme-navy .chero__av, body.theme-navy .msheet__av { background: #153A60; color: #75B4FF; }
  body.theme-navy .search .og-input { background: #0E1A25; border-color: #2A3B4B; }
  /* Shop AI: the Figma's violet mark; bubbles in the look's blue */
  body.theme-navy .ai { background: linear-gradient(180deg, #0A141F, #08111B); }
  body.theme-navy .ai__mark { background: linear-gradient(145deg, #2C2462, #152E56); color: #A69CFF; }
  body.theme-navy .ai__msg--bot { background: #13212D; border-color: #203648; }
  body.theme-navy .ai__ex button { background: #0D1822; border-color: #2A3C4C; color: #B7C6D3; }
  body.theme-navy .ai__form { border-top-color: #203140; }
  body.theme-navy .ai__form .og-input { background: #101C27; border-color: #2B4052; }
  body.theme-navy .qv__card { background: linear-gradient(180deg, #142536, #0C1824); border-color: #2B4054; }
}
/* ---------- Inventory: the catalog, the item's photo, Quick count ---------- */
body.theme-navy .icat__list { background: linear-gradient(135deg, #132230, #0F1B27); border-color: #203346; }
body.theme-navy .irow + .irow { border-top-color: #1D2C39; }
body.theme-navy .ipic, body.theme-navy .icat__glyph, body.theme-navy .qc__h svg { background: #172838; color: #7E93A6; }
body.theme-navy .icat__n { background: #263543; color: #B8C6D3; }
body.theme-navy .iphoto__pic { background: #101C28; border-color: #2A3C4F; color: #6E859A; }
body.theme-navy .iact:not(.iact--scan) { background: #111E2A; border-color: #2A3C4F; }
body.theme-navy .iact:not(.iact--scan) .iact__ic { background: color-mix(in srgb, var(--accent) 22%, #111E2A); }
body.theme-navy .iact--scan { box-shadow: 0 8px 22px rgba(var(--accent-rgb), .24); }
body.theme-navy .st--low { color: #F5BD51; border-color: #705725; background: #392E18; }
body.theme-navy .st--out { color: #FF7A70; border-color: #6B2A2D; background: #2E1417; }
body.theme-navy .st--confirmed { color: #64DBA0; border-color: #276645; background: #123927; }
body.theme-navy .st--asked { color: #F5BD51; border-color: #705725; background: #392E18; }
body.theme-navy .dconfirm { background: #111E2A; border-color: #213446; }
body.theme-navy .qrow { border-top-color: #1D2C39; }
@media (max-width: 720px) {
  body.theme-navy #quick-modal .modal__box { --qc-bg: #0F1B27; }   /* the sheet's colour, under the sticky section names */
  body.theme-navy .invt__filter .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}