/* ==========================================================================
   Taha Auto admin — "glass" look (body.theme-glass). Dark bento layout, lime
   accent, liquid-glass surfaces. Everything here is scoped to the new look;
   remove the class (the "Classic look" button) and admin.css is untouched.
   ========================================================================== */
body.theme-glass {
  --bg: #07080A;
  --panel: rgba(22, 24, 27, .62);
  --panel-2: rgba(255, 255, 255, .045);
  --card: rgba(24, 26, 29, .58);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #F2F4EC;
  --text-2: #AEB2A8;
  --text-3: #767A72;
  /* the accent (default volt; js/accent.js writes a custom one inline on <body>, see admin.css) */
  --accent: #E3FF31; --accent-rgb: 227, 255, 49; --accent-2: #D3EE22; --accent-hi: #EEFF5C;
  --accent-soft: rgba(var(--accent-rgb), .12); --accent-ink: #0B0C05; --accent-text: var(--accent); --accent-pale: var(--accent-text); --accent-ui: var(--accent);
  --accent-glow-1: 190, 230, 40; --accent-glow-2: 150, 190, 30; --accent-badge: rgba(0, 0, 0, .16);
  /* data colours keep the look's default accent (see admin.css) */
  --tech-awais: #E3FF31; --tech-awais-rgb: 227, 255, 49; --tech-awais-ink: #0B0C05; --tech-awais-text: #E3FF31; --tech-awais-pale: #E3FF31;
  --st-sent: #E3FF31; --st-sent-rgb: 227, 255, 49; --st-sent-text: #E3FF31;
  --lime: var(--accent);
  --lime-2: var(--accent-2);
  --lime-soft: var(--accent-soft);
  --lime-ink: var(--accent-ink);
  --line-3: rgba(255, 255, 255, .30);
  /* the admin's accent tokens now mean lime */
  --red: var(--lime); --red-2: var(--lime-2); --red-soft: var(--lime-soft); --red-text: var(--accent-text);
  --danger: #FF6B5E; --danger-text: var(--danger);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 24px; --r-sm: 14px;
  --glass: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .10), transparent 45%), linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .015));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 1px 0 0 rgba(255, 255, 255, .06);
  --glass-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8);
  --blur: blur(22px) saturate(170%);
  background: transparent;   /* the page colour sits on html, so the glows below show through */
  font-family: var(--font);
}
html:has(> body.theme-glass) { background: #07080A; }
/* the light the glass refracts: two soft lime/olive glows at the top, a cool one lower down */
body.theme-glass::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 26vh at 12% -4%, rgba(var(--accent-glow-1), .22), transparent 70%),
    radial-gradient(30vw 22vh at 92% -2%, rgba(var(--accent-glow-2), .18), transparent 70%),
    radial-gradient(40vw 40vh at 70% 110%, rgba(40, 90, 110, .16), transparent 70%),
    var(--bg);
}
body.theme-glass ::selection { background: var(--lime); color: var(--lime-ink); }
body.theme-glass :focus-visible { outline-color: var(--accent-ui); }
body.theme-glass h1, body.theme-glass h2, body.theme-glass h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }

/* ---------- glass surfaces (shared recipe) ---------- */
body.theme-glass :is(.top__row, .tabs, .stats-row, .calwrap, .side, .col, .tablewrap, .row, .panel, .modal__box, .drawer, .ai, .auth__box, .bcard--act, .bcard--stat, .prop, .toast, .find__list, .inv__head, .cal__head) {
  background: var(--glass), var(--panel);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}

/* ---------- top bar: a floating glass capsule ---------- */
body.theme-glass .top { position: sticky; top: 0; background: transparent; border: 0; backdrop-filter: none; padding: 12px 16px 6px; }
body.theme-glass .top__row { border-radius: 26px; padding: 10px 12px 10px 18px; gap: 10px; }
body.theme-glass .banner { background: transparent; border: 0; padding: 0 20px 6px; color: var(--text-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
body.theme-glass .logo { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: 21px; }
body.theme-glass .logo svg { color: var(--accent-ui); filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .45)); }
body.theme-glass .logo small, body.theme-glass .pill { font-family: var(--mono); font-weight: 600; letter-spacing: .16em; color: var(--accent-text); border-color: rgba(var(--accent-rgb), .35); }
body.theme-glass .tabs { border-radius: 999px; padding: 4px; gap: 2px; box-shadow: var(--glass-edge); }
body.theme-glass .tab { min-height: 44px; border-radius: 999px; padding: 8px 15px; font-weight: 600; color: var(--text-2); }
@media (hover: hover) { body.theme-glass .tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); } }
body.theme-glass .tab.is-active { background: var(--lime); color: var(--lime-ink); box-shadow: 0 6px 20px -8px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .6); }
body.theme-glass .tab.is-active .tab__n { background: var(--accent-badge); color: var(--lime-ink); }
body.theme-glass .tab__n { font-family: var(--mono); font-weight: 600; background: rgba(255, 255, 255, .1); }
body.theme-glass .search .og-input { border-radius: 999px; }
body.theme-glass .chip { border-radius: 999px; min-height: 44px; background: rgba(255, 255, 255, .04); }
body.theme-glass .chip.is-active { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
@media (max-width: 1100px) { body.theme-glass .top { position: static; } body.theme-glass .top__row { border-radius: 22px; } }

/* ---------- buttons & inputs ---------- */
body.theme-glass .btn { border-radius: 999px; font-weight: 600; }
body.theme-glass .btn--primary { background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 24px -12px rgba(var(--accent-rgb), .75); }
@media (hover: hover) { body.theme-glass .btn--primary:hover { background: var(--accent-hi); } }
body.theme-glass .btn--ghost { background: rgba(255, 255, 255, .05); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (hover: hover) { body.theme-glass .btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); } }
body.theme-glass .og-input { background-color: rgba(0, 0, 0, .28); border-color: var(--line-3); border-radius: 12px; font-family: var(--font); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
body.theme-glass .og-input:focus { border-color: var(--accent-ui); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); }
body.theme-glass select.og-input option { background: #15171a; }
body.theme-glass .field label { color: var(--text-2); }
body.theme-glass .danger { border-radius: 999px; }
@media (hover: hover) { body.theme-glass .danger:hover { border-color: var(--danger); color: var(--danger); } }
body.theme-glass .iconbtn { border-radius: 999px; background: rgba(255, 255, 255, .06); }
body.theme-glass .linkbtn { color: var(--accent-text); }
body.theme-glass input[type=checkbox] { accent-color: var(--lime); }

/* mono labels: the small uppercase captions everywhere */
body.theme-glass :is(.stat-tile span, .col__head h2, .panel h3, .section-title, .custtable th, .grid__day small, .plist__head, .prop__head, .brandpill, .st, .bcard__label, .invlist__head, .ctl > span, .texts__label, .agenda__section h3, .aitem__tag, .aitem__time small, .daystrip small, .qv__state) {
  font-family: var(--mono); font-weight: 600; letter-spacing: .14em;
}
body.theme-glass :is(.lhead, .ncell > span, .ed__mbar-bal small) { font-family: var(--mono); font-weight: 600; letter-spacing: .08em; }

/* ---------- stats (glass strip) ---------- */
body.theme-glass .stats-row { margin: 8px 16px 0; border-radius: 22px; gap: 0; overflow: hidden; background: var(--glass), var(--panel); }
body.theme-glass .stat-tile { background: transparent; border-right: 1px solid var(--line); }
body.theme-glass .stat-tile b { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; }
body.theme-glass .stat-tile.is-hot b { color: var(--accent-text); }

/* ---------- home: bento ---------- */
.bento { display: grid; gap: 16px; padding: 16px; }
@media (min-width: 1000px) { .bento { grid-template-columns: 1.55fr 1fr; align-items: start; } }
.bento__main, .bento__side { display: grid; gap: 16px; }
@media (max-width: 720px) { .bento { padding-bottom: 96px; } }   /* the last card scrolls clear of the tab bar and the TA button, like .list/.inv */
.bento__pair { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bento__pair { grid-template-columns: .85fr 1.15fr; } }
.bento__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bcard { position: relative; display: flex; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: #121416; color: #fff; text-align: left; font: inherit; cursor: pointer; isolation: isolate; transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s; }
@media (hover: hover) { .bcard:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); } }
.bcard--photo { min-height: 300px; align-items: flex-end; padding: 26px 28px; }
.bcard__img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; filter: saturate(.85) brightness(.72); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.bcard--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 8, 10, 0) 25%, rgba(7, 8, 10, .55) 62%, rgba(7, 8, 10, .88)); }
@media (hover: hover) { .bcard--photo:hover .bcard__img { transform: scale(1.035); } }
.bcard--hero { min-height: 400px; }
.bcard--tall { min-height: 520px; }
.bcard--wide { min-height: 280px; }
@media (max-width: 999px) { .bcard--tall { min-height: 380px; } .bcard--hero { min-height: 320px; } }
.bcard__txt { display: grid; gap: 8px; max-width: 560px; }
.bcard h2 { font-family: var(--display, "Inter Tight", sans-serif); font-weight: 800; font-size: clamp(34px, 4.2vw, 50px); letter-spacing: -.045em; line-height: .98; margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.bcard p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.45; max-width: 44ch; }
.bcard__eyebrow { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bcard__label { font-family: var(--mono, monospace); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text, var(--lime)); }
.bcard__label--sub { font-size: 12.5px; }
.bcard__label--dim { color: var(--text-3, #8A8A8A); }
.bcard__arrow { width: 22px; height: 22px; margin-top: 6px; color: #fff; }
/* the lime square buttons */
.bcard__btn { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: var(--lime, var(--accent)); color: var(--lime-ink, var(--accent-ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px -10px rgba(var(--accent-rgb), .8); flex: none; }
.bcard__btn svg { width: 18px; height: 18px; }
.bcard--hero > .bcard__btn { position: absolute; top: 22px; right: 22px; }
.bcard--act { min-height: 124px; padding: 20px 20px 18px 22px; justify-content: space-between; align-items: flex-start; flex-direction: column; background: var(--glass, rgba(255, 255, 255, .05)), var(--panel, #161616); }
.bcard--act b { font-family: var(--display, sans-serif); font-weight: 700; font-size: 21px; letter-spacing: -.035em; }
.bcard--act .bcard__btn { align-self: flex-end; width: 48px; height: 48px; }
.bcard--stat { cursor: default; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px 26px; min-height: 260px; background: var(--glass, rgba(255, 255, 255, .05)), var(--panel, #161616); }
.bcard--stat:hover { transform: none; }
.bcard__big { font-family: var(--display, sans-serif); font-weight: 800; font-size: clamp(38px, 4.4vw, 54px); letter-spacing: -.045em; line-height: 1; }
.bcard--stat dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 8px 0 0; }
.bcard--stat dl div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line, rgba(255, 255, 255, .08)); padding-top: 8px; }
.bcard--stat dt { font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3, #8A8A8A); }
.bcard--stat dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* classic look: the same cards, flatter */
body:not(.theme-glass) .bcard--act, body:not(.theme-glass) .bcard--stat { background: var(--card); }
body:not(.theme-glass) .bcard__btn { background: var(--red); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px -10px rgba(var(--accent-rgb), .7); }
@media (min-width: 721px) { body:not(.theme-glass) .bento { padding-right: 56px; } }   /* clear of the assistant's edge tab, like the editor */
body:not(.theme-glass) .bcard__label { color: var(--red-text); }

/* ---------- calendar ---------- */
body.theme-glass .cal__head { border-radius: 22px; padding: 12px 14px; }
body.theme-glass .cal__nav button { border-radius: 999px; background: rgba(255, 255, 255, .04); }
body.theme-glass .calwrap { border-radius: 24px; }
body.theme-glass .grid__corner, body.theme-glass .grid__day { background: transparent; }
body.theme-glass .grid__day b { font-family: var(--display); }
body.theme-glass .grid__day.is-today b { color: var(--accent-text); }
body.theme-glass .grid__day.is-today::after { font-family: var(--mono); background: var(--lime); color: var(--lime-ink); }
body.theme-glass .grid__cell.is-today { background: rgba(var(--accent-rgb), .035); }
body.theme-glass .grid__time { font-family: var(--mono); font-weight: 500; }
body.theme-glass .appt { border-radius: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
body.theme-glass .appt--tony { background: rgba(92, 170, 255, .22); border-color: rgba(92, 170, 255, .45); }
body.theme-glass .appt--awais { background: var(--tech-awais); color: var(--tech-awais-ink); border-color: var(--tech-awais); }
body.theme-glass .appt--req { background: rgba(var(--accent-rgb), .06); color: var(--text); border: 1.5px dashed rgba(var(--accent-rgb), .6); }
body.theme-glass .appt--in_shop { outline-color: var(--accent-ui); }
body.theme-glass .legend .l-tony { background: rgba(92, 170, 255, .6); } body.theme-glass .legend .l-awais { background: var(--tech-awais); } body.theme-glass .legend .l-either { background: rgba(255, 255, 255, .25); }
body.theme-glass .legend { font-family: var(--mono); font-size: 11.5px; }
body.theme-glass .side { border-radius: 22px; }
body.theme-glass .side h3 .tab__n { background: var(--lime); color: var(--lime-ink); }
body.theme-glass .side__item, body.theme-glass .card, body.theme-glass .custhist button, body.theme-glass .ai__jobpick button, body.theme-glass .choose__opt, body.theme-glass .vehpick button, body.theme-glass .quick a, body.theme-glass .quick button {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
@media (hover: hover) { body.theme-glass .side__item:hover, body.theme-glass .card:hover, body.theme-glass .custhist button:hover, body.theme-glass .ai__jobpick button:hover, body.theme-glass .choose__opt:hover { border-color: rgba(var(--accent-rgb), .45); background: rgba(255, 255, 255, .07); } }
body.theme-glass .side__item em { font-family: var(--mono); color: var(--accent-text); }

/* ---------- leads board ---------- */
@media (min-width: 721px) { body.theme-glass .board { padding: 16px; gap: 14px; } }
body.theme-glass .col { border-radius: 22px; }
body.theme-glass .col__head { border-bottom-color: var(--line); }
body.theme-glass .col__body.is-over { background: rgba(var(--accent-rgb), .06); }
body.theme-glass .card__name { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 16px; }
body.theme-glass .card--oasis { border-left: 3px solid var(--accent-ui); }
body.theme-glass .badge { border-radius: 999px; background: rgba(255, 255, 255, .04); }
body.theme-glass .badge--tony { border-color: rgba(92, 170, 255, .45); color: #A9D3FF; }
body.theme-glass .badge--awais { border-color: rgba(var(--tech-awais-rgb), .5); color: var(--tech-awais-text); }

/* ---------- lists, tables, customers ---------- */
@media (min-width: 721px) { body.theme-glass .list, body.theme-glass .inv { padding-left: 16px; padding-right: 16px; } }
body.theme-glass .tablewrap, body.theme-glass .row { border-radius: 22px; }
@media (hover: hover) { body.theme-glass .custtable tr:hover td { background: rgba(var(--accent-rgb), .04); } }
body.theme-glass .inv__head { border-radius: 22px; padding: 12px 14px; }
body.theme-glass .inv__head h2, body.theme-glass .cal__head h2 { font-size: 24px; }
body.theme-glass .st { border-radius: 999px; background: rgba(255, 255, 255, .04); }
body.theme-glass .st--sent { border-color: rgba(var(--st-sent-rgb), .55); color: var(--st-sent-text); }
body.theme-glass .st--open { border-color: rgba(92, 170, 255, .45); color: #A9D3FF; }
body.theme-glass .brandpill--oasis { color: var(--accent-text); }
body.theme-glass .rstars { color: var(--accent-ui); }

/* ---------- drawer, modal, toast ---------- */
body.theme-glass .scrim, body.theme-glass .modal { background: rgba(3, 4, 5, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.theme-glass .drawer { top: 10px; right: 10px; bottom: 10px; border-radius: 28px; overflow: hidden; background: var(--glass), rgba(16, 18, 20, .78); }
body.theme-glass .drawer:not(.is-open) { transform: translateX(calc(100% + 20px)); }
body.theme-glass .drawer__head, body.theme-glass .drawer__foot { border-color: var(--line); }
body.theme-glass .drawer__head h2 { font-size: 26px; }
body.theme-glass .quick svg { color: var(--accent-ui); }
body.theme-glass .requested { background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .45); border-radius: 16px; }
body.theme-glass .requested button { background: var(--lime); color: var(--lime-ink); border-radius: 999px; }
body.theme-glass .activity li { border-left-color: rgba(var(--accent-rgb), .35); }
body.theme-glass .modal__box { border-radius: 28px; background: var(--glass), rgba(16, 18, 20, .82); }
body.theme-glass .modal__box h2 { font-size: 28px; }
body.theme-glass .toast { border-radius: 999px; padding: 11px 18px; }

/* ---------- invoice editor ---------- */
body.theme-glass .panel { border-radius: 22px; }
body.theme-glass .ed__top h2 { font-size: 30px; }
body.theme-glass .line { background: rgba(0, 0, 0, .22); border-radius: 14px; }
body.theme-glass .line__amt, body.theme-glass .tot b { font-family: var(--display); letter-spacing: -.02em; }
body.theme-glass .tot div.bal { background: var(--lime); color: var(--lime-ink); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 30px -14px rgba(var(--accent-rgb), .8); }
body.theme-glass .tot div.bal b { color: var(--lime-ink); font-size: 24px; }
body.theme-glass .tot div.bal.is-paid { background: #2FD08A; }
body.theme-glass .tot div.bal.is-paid, body.theme-glass .tot div.bal.is-paid b { color: #0B0C05; }   /* green, whatever the accent's ink: 9.8:1 */
body.theme-glass .pastnotes details, body.theme-glass .srow--list { background: rgba(0, 0, 0, .2); border-radius: 14px; }

/* ---------- assistant: a glass sheet with a lime tab ---------- */
body.theme-glass .ai { top: 10px; right: 10px; bottom: 10px; border-radius: 28px; overflow: hidden; background: var(--glass), rgba(14, 16, 18, .8); }
body.theme-glass .ai:not(.is-open) { transform: translateX(calc(100% + 20px)); }
body.theme-glass .ai-fab { background: var(--lime); color: var(--lime-ink); font-family: var(--mono); letter-spacing: .14em; border-radius: 16px 0 0 16px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), -10px 0 30px -12px rgba(var(--accent-rgb), .6); }
@media (hover: hover) { body.theme-glass .ai-fab:hover { background: var(--accent-hi); } }
body.theme-glass.ai-open .ai-fab { right: calc(min(460px, 100vw) + 10px); }
body.theme-glass .ai__head b { font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
body.theme-glass .ai__msg { border-radius: 18px; }
body.theme-glass .ai__msg--user { background: var(--lime); color: var(--lime-ink); border: 0; font-weight: 500; }
body.theme-glass .ai__msg--bot { background: rgba(255, 255, 255, .06); border-color: var(--line); }
body.theme-glass .ai__msg--sys.is-err { color: var(--danger); }
body.theme-glass .prop { border-radius: 18px; }
body.theme-glass .prop--danger { border-color: var(--danger); }
body.theme-glass .prop__head { color: var(--accent-text); }
body.theme-glass .ai__mic { background: rgba(255, 255, 255, .06); }
body.theme-glass .ai__mic.is-on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); animation: glasspulse 1.2s ease-out infinite; }
@keyframes glasspulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
body.theme-glass .ai__spend button { color: var(--accent-text); }
body.theme-glass .ai__form { border-top-color: var(--line); }

/* ---------- sign in ---------- */
body.theme-glass .auth__box { border-radius: 28px; }
body.theme-glass .auth__box h1 { font-size: 34px; }

/* browsers without backdrop-filter get solid, still-dark panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.theme-glass { --panel: #15171A; --card: #181A1D; }
}
@media (prefers-reduced-motion: reduce) { .bcard, .bcard__img { transition: none; } }

/* ---------- fit and finish ---------- */
.themebtn svg { width: 16px; height: 16px; }
body.theme-glass .themebtn { color: var(--accent-ui); }
body.theme-glass .panel h3 .hint, body.theme-glass .section-title .hint { font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; color: var(--text-3); }
body.theme-glass .tab { padding: 8px 13px; }
@media (min-width: 1101px) { body.theme-glass .search .og-input { width: 200px; } }
/* keep the assistant's edge tab off the content */
@media (min-width: 721px) { body.theme-glass .view, body.theme-glass .stats-row { margin-right: 44px; } }
@media (max-width: 999px) {
  .bento__main, .bento__side { display: contents; }
  .bcard--hero { order: 1; } .bcard--tall { order: 2; } .bento__acts { order: 3; } .bento__pair { order: 4; } .bcard--wide { order: 5; } .bcard--stat { order: 6; }
}

/* ==========================================================================
   THEIRS' components in the glass look: phone layer (title bar, tab bar, TA button, More sheet,
   agenda, lead list, customer cards), the rebuilt invoice editor (list rows, controls strip,
   actions menu, lines, job bar, Finalize), quick voice. Boxes, heights and safe areas stay
   exactly as admin.css sets them; only surfaces, colour and type change here.
   ========================================================================== */
/* --red means lime in this look: errors and destructive actions keep a real red */
body.theme-glass .saved.is-err, body.theme-glass .menu__list button.is-danger, body.theme-glass .pay__row .x:hover, body.theme-glass .field .err, body.theme-glass .auth__msg { color: var(--danger); }
body.theme-glass .saved.is-err::before { background: var(--danger); }
body.theme-glass .toast.is-err { border-color: var(--danger); color: #FF9A90; }
body.theme-glass .field.is-invalid .og-input { border-color: var(--danger); }
/* things that sat on a translucent token and float over content get an opaque glass of their own */
body.theme-glass .menu__list { background: var(--glass), rgba(18, 20, 23, .94); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--line-2); border-radius: 18px; box-shadow: var(--glass-edge), var(--glass-shadow); }
body.theme-glass .qv__card { background: var(--glass), rgba(14, 16, 18, .88); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--line-2); border-radius: 24px; box-shadow: var(--glass-edge), 0 -12px 40px rgba(0, 0, 0, .55); }
body.theme-glass .qv__body .ai__msg--bot { background: none; border: 0; padding: 0; }
/* a blurred panel is its own stacking context: lift the one whose customer search list is open */
body.theme-glass .panel:focus-within { position: relative; z-index: 5; }
/* invoice list rows (the editor rebuild replaced .invtable) */
body.theme-glass .invrow { background: rgba(255, 255, 255, .045); border-color: var(--line); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
body.theme-glass .invrow__bal b, body.theme-glass .invrow__num b { font-family: var(--display); letter-spacing: -.02em; }
/* editor */
body.theme-glass .ed__ctl { background: var(--glass), var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--line-2); border-radius: 22px; box-shadow: var(--glass-edge); }
body.theme-glass .lgroup__head b { font-family: var(--display); letter-spacing: -.02em; }
body.theme-glass .line--part { border-left-color: rgba(92, 170, 255, .75); }
body.theme-glass .iconbtn--sm { background: transparent; border-color: transparent; }
body.theme-glass .vehpick button { border-radius: 999px; }
body.theme-glass .donebar { border-radius: 16px; }
body.theme-glass .st--final { border-color: #2FD08A; color: #6FE3AE; }
body.theme-glass .btn--ok { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
body.theme-glass .texts a { background: rgba(255, 255, 255, .045); border-color: var(--line); }
body.theme-glass .badge--req { border-color: rgba(var(--accent-rgb), .6); color: var(--accent-text); }
@media (min-width: 1100px) { body.theme-glass .ed__rail { top: calc(var(--top-h, 84px) + 12px); max-height: calc(100vh - var(--top-h, 84px) - 26px); } }
@media (max-width: 1099px) {
  body.theme-glass .ed__mbar { background: rgba(10, 11, 13, .72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  body.theme-glass .ed__mbar-bal b { font-family: var(--display); letter-spacing: -.02em; }
}
/* the tax chip (a state, not the page's action: soft lime), the VIN camera, the lead-or-customer chooser */
body.theme-glass .taxtoggle .chip.is-active { background: var(--lime-soft); border-color: rgba(var(--accent-rgb), .55); color: var(--accent-text); box-shadow: none; }
@media (min-width: 721px) { body.theme-glass .taxtoggle .chip { min-height: 36px; } }
body.theme-glass .vincam { border-radius: 12px; border-color: var(--line-3); background: rgba(255, 255, 255, .06); color: var(--accent-ui); }
body.theme-glass .choose__opt b { font-family: var(--display); letter-spacing: -.02em; }
/* hover looks only where there is a hover (iPad and phones must not keep a tapped card lit) */
@media (hover: hover) {
  body.theme-glass .invrow:hover { border-color: rgba(var(--accent-rgb), .45); background: rgba(255, 255, 255, .07); }
  body.theme-glass .vincam:hover, body.theme-glass .quick button:hover { border-color: rgba(var(--accent-rgb), .45); }
  body.theme-glass .grid__cell.is-today.is-past:hover { background: rgba(var(--accent-rgb), .035); }
}

/* ---------- phone layer (≤ 720px, the app and phone browsers) ---------- */
@media (max-width: 720px) {
  /* title bar */
  body.theme-glass .ptop { background: rgba(7, 8, 10, .72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom-color: var(--line); }
  body.theme-glass .banner { padding: 8px 16px 4px; }
  /* the old header row only carries search / the tech filter here: no capsule */
  body.theme-glass .top__row { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 16px 6px; }
  body.theme-glass .search .og-input { width: 100%; }
  body.theme-glass #tech-filter { border-radius: 999px; }
  body.theme-glass #tech-filter .chip { border-radius: 999px; }
  body.theme-glass #tech-filter .chip.is-active { background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
  body.theme-glass .iconbtn:active { background: rgba(255, 255, 255, .12); }
  body.theme-glass .iconbtn[aria-pressed="true"] { border-color: var(--accent-ui); background: var(--lime-soft); color: var(--accent-ui); }
  body.theme-glass .iconbtn--primary { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 24px -12px rgba(var(--accent-rgb), .75); }
  body.theme-glass .iconbtn--primary:active { background: var(--lime-2); }
  /* bottom tab bar: full width, same height and safe-area padding as admin.css */
  body.theme-glass .tabbar { background: rgba(10, 11, 13, .72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  body.theme-glass .tabbar__n { color: var(--lime-ink); font-family: var(--mono); }
  /* the TA button: lime with ink letters; listening flips to ink with lime letters and lime rings */
  body.theme-glass .tabbar__ta .ta { background: var(--lime); color: var(--lime-ink); font-family: var(--display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px rgba(var(--accent-rgb), .35), 0 0 0 4px var(--bg); }
  body.theme-glass.ai-open .tabbar__ta .ta { box-shadow: 0 0 0 4px var(--bg); }
  body.theme-glass .tabbar__ta.is-open .ta { background: var(--lime-2); }
  body.theme-glass .tabbar__ta.is-listening .ta { background: var(--lime-ink); color: var(--lime); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .45), 0 0 0 4px var(--bg), inset 0 0 0 2px var(--lime); }
  body.theme-glass .tabbar__ta.is-listening .ta::before, body.theme-glass .tabbar__ta.is-listening .ta::after { border-color: rgba(var(--accent-rgb), .6); }
  body.theme-glass .tabbar__ta.is-working .ta { background: var(--lime-2); color: var(--lime-ink); }
  /* More sheet */
  body.theme-glass .msheet__box { background: var(--glass), rgba(16, 18, 20, .86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: var(--glass-edge), 0 -18px 50px -20px rgba(0, 0, 0, .8); }
  body.theme-glass .msheet__item.is-active { background: var(--lime-soft); color: var(--accent-text); }
  body.theme-glass .msheet__item--close { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
  /* Today: agenda */
  body.theme-glass .agenda__nav button { border-radius: 999px; background: rgba(255, 255, 255, .04); }
  body.theme-glass .agenda__nav button:active { background: rgba(255, 255, 255, .1); }
  body.theme-glass .daystrip button { background: rgba(255, 255, 255, .045); border-color: var(--line); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  body.theme-glass .daystrip b { font-family: var(--display); }
  body.theme-glass .daystrip button.is-selected { background: var(--lime-soft); border-color: var(--accent-ui); }
  body.theme-glass .daystrip button:active { background: rgba(255, 255, 255, .1); }
  body.theme-glass .aitem { background: rgba(255, 255, 255, .045); border-top-color: var(--line); border-right-color: var(--line); border-bottom-color: var(--line); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  body.theme-glass .aitem:active { background: rgba(255, 255, 255, .1); }
  body.theme-glass .aitem--tony { border-left-color: rgba(92, 170, 255, .75); }
  body.theme-glass .aitem--req { border-left-color: rgba(var(--accent-rgb), .6); }
  body.theme-glass .aitem__time, body.theme-glass .aitem__name { font-family: var(--display); letter-spacing: -.01em; }
  body.theme-glass .agenda .empty, body.theme-glass .llist .empty { border-radius: 18px; background: rgba(255, 255, 255, .03); }
  /* Leads: status strip + list */
  body.theme-glass .lstatus button { background: rgba(255, 255, 255, .04); }
  body.theme-glass .lstatus button.is-active { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
  body.theme-glass .lstatus button:active { background: rgba(255, 255, 255, .1); }
  body.theme-glass .lstatus button.is-active:active { background: var(--lime-2); }
  /* Customers: cards */
  body.theme-glass .ccard { background: rgba(255, 255, 255, .045); border-color: var(--line); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
  body.theme-glass .ccard__top b { font-family: var(--display); letter-spacing: -.02em; }
  /* Jobs: the screen title already says Jobs, so the list head is just the chips */
  body.theme-glass .inv__head { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; }
  /* press feedback by colour (admin.css rule), restated where the glass background would win */
  body.theme-glass .quick a:active, body.theme-glass .quick button:active, body.theme-glass .texts a:active { background: rgba(255, 255, 255, .1); }
  body.theme-glass .bcard:active { filter: brightness(1.1); }
  /* one light blur per bar is fine in the iPhone WebView; a blur per card, or behind a sheet that scrolls, is not:
     repeated surfaces keep the gradient, the full-screen sheets and their scrims go opaque instead */
  body.theme-glass { --blur: blur(12px) saturate(150%); }
  body.theme-glass :is(.row, .panel, .side, .col, .tablewrap, .calwrap, .ed__ctl, .prop, .bcard--act, .bcard--stat, .btn--ghost, .appt, .drawer, .ai, .modal__box, .qv__card, .scrim, .modal, .msheet__scrim) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.theme-glass .scrim, body.theme-glass .modal, body.theme-glass .msheet__scrim { background: rgba(3, 4, 5, .68); }
  body.theme-glass .qv__card { background: var(--glass), rgba(14, 16, 18, .97); }
  /* full-screen overlays: square edges; the assistant still ends above the tab bar */
  body.theme-glass .drawer { top: 0; right: 0; bottom: 0; border-radius: 0; border: 0; background: var(--glass), #111316; }
  body.theme-glass .ai { top: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--glass), #0E1012; }
  body.theme-glass .modal__box { border-radius: 26px 26px 0 0; background: var(--glass), #111316; }
  body.theme-glass .drawer__head h2, body.theme-glass .modal__box h2 { font-size: 22px; }
  body.theme-glass .toast { border-radius: 18px; }
}
/* the phone job page: inside a folding section the section is the card, so the glass panels inside go flat */
@media (max-width: 720px) {
  body.theme-glass .ed--ph :is(.sec__body > .panel, .sec__stack > .panel, .sec--details .ed__ctl) { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.theme-glass .ed--ph .ed__top h2 { font-size: 15px; }
}
/* no backdrop-filter: the bars that were translucent go solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.theme-glass :is(.tabbar, .ptop, .ed__mbar, .msheet__box, .qv__card, .menu__list) { background: #0C0D10; }
}

/* ---------- the Look sheet (admin.css lays it out) ---------- */
body.theme-glass .lk__scrim { background: rgba(3, 4, 5, .6); }
body.theme-glass .lk__box { background: var(--glass), rgba(16, 18, 20, .92); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 28px; box-shadow: var(--glass-edge), var(--glass-shadow); }
body.theme-glass .lk__head h2 { font-size: 26px; }
body.theme-glass .lk__label { font-family: var(--mono); font-weight: 600; letter-spacing: .14em; }
body.theme-glass .lk__label span { font-family: var(--font); }
body.theme-glass .lk__seg { border-radius: 999px; }
body.theme-glass .lk__seg button { border-radius: 999px; }
body.theme-glass .lk__seg button[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
body.theme-glass .lk__preview { background: rgba(255, 255, 255, .045); border-radius: 16px; }
body.theme-glass .lk__chip { border-radius: 999px; }
@media (max-width: 720px) {
  body.theme-glass .lk__box { border-radius: 26px 26px 0 0; background: var(--glass), #111316; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.theme-glass .lk__scrim { background: rgba(3, 4, 5, .68); }
}