/* ══════════════════════════════════════════════════════════════════════════
   iOS skin — loaded last, on top of the themes. One look for the whole
   portal: the system face for every piece of type (no display fonts left
   anywhere), glass panels instead of bordered cards, flat fields with a
   hairline underneath, quiet uppercase group headers, pill buttons, and
   sheets that rise from the bottom on a phone. CSS only — every page keeps
   its markup — so the whole look is tuned from this one file.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --ios-r: 18px; --ios-r-sm: 12px;
  --ios-glass: rgba(255,255,255,.045); --ios-glass-2: rgba(255,255,255,.075); --ios-hair: rgba(255,255,255,.10); --ios-hair-2: rgba(255,255,255,.16);
  --ios-muted: #9a9aa6; --ios-ink: #f2f2f5;
  --ios-gold: #d9ad5c; --ios-gold-2: #f0c976;
}
html:not([data-theme="dark"]) {
  --ios-glass: rgba(0,0,0,.035); --ios-glass-2: rgba(0,0,0,.06); --ios-hair: rgba(0,0,0,.10); --ios-hair-2: rgba(0,0,0,.16);
  --ios-muted: #6e6e78; --ios-ink: #111114;
}

/* ── Type: the system face, everywhere. The themes reached for Rajdhani and
   Orbitron in dozens of places; this ends that in one rule. Icons are SVG
   and unaffected. */
body, body *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(g) { font-family: var(--font) !important; letter-spacing: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ios-ink); }
h1 { font-size: 1.7rem !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.1; }
h2 { font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
h3 { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
/* Group headers and eyebrows: quiet, small, spaced. */
.card-header h3, .inv-section-header h3, .i2-eyebrow, .sw-field-label, .ios-eyebrow,
[style*="letter-spacing:.2em"], [style*="letter-spacing:.15em"], [style*="letter-spacing: .2em"] {
  font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em !important; color: var(--ios-muted) !important;
}
label, .form-group label { font-size: .8rem !important; font-weight: 600 !important; color: var(--ios-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── Panels: glass. A translucent fill, a hairline edge, a soft inner top
   highlight — depth without shadows. */
.card, .inv-section, .modal, .xd-card, .d-card, .door {
  background: var(--ios-glass) !important; border: 1px solid var(--ios-hair) !important; border-radius: var(--ios-r) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.card-header { border-bottom: none !important; padding-bottom: .1rem !important; }

/* ── Record lists read as ONE grouped card, not a stack of separate bubbles.
   The mobile invoice / estimate / dealer / client / booking / portal lists put
   their rows in .m-list or .inv-mobile-list; the whole list is a single glass
   panel and the rows are flat, divided by a hairline — the iOS grouped-list
   look. (Before this, .im-row was in the card rule above, so every single row
   became its own rounded, bordered, blurred bubble.) */
.m-list, .inv-mobile-list {
  background: var(--ios-glass) !important; border: 1px solid var(--ios-hair) !important;
  border-radius: var(--ios-r) !important; overflow: hidden;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.m-list > .im-row, .inv-mobile-list > .im-row {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  border-top: 1px solid var(--ios-hair) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 1rem 1.1rem !important; margin: 0 !important;
}
.m-list > .im-row:first-child, .inv-mobile-list > .im-row:first-child { border-top: none !important; }
.m-list > .im-row:active, .inv-mobile-list > .im-row:active { background: var(--ios-glass-2) !important; }
/* Accordion lists (portals / boost schedule) inside a grouped card: no double
   line where the last row meets the card's own bottom edge. */
.m-list > .m-acc:last-child { border-bottom: none !important; }

/* ── Fields: flat. No boxes, no fills — the text sits on a hairline. */
input:not([name=q]):not([type=search]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea, .form-control {
  background: transparent !important; border: none !important; border-bottom: 1px solid var(--ios-hair-2) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: .7rem 0 !important; font-size: 1rem !important; color: var(--ios-ink) !important; outline: none !important;
  -webkit-appearance: none; appearance: none; transition: border-color .18s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus { border-bottom-color: var(--ios-gold) !important; }
input::placeholder, textarea::placeholder { color: var(--ios-muted) !important; opacity: .7; }
select { padding-right: 1.6rem !important; background-image: linear-gradient(45deg, transparent 50%, var(--ios-muted) 50%), linear-gradient(135deg, var(--ios-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
/* iPhone: 16px stops Safari zooming into a field on focus. */
@media (max-width: 640px) { input, select, textarea, .form-control { font-size: 16px !important; } }

/* ── Buttons: pills. One filled gold primary; everything else glass. */
.btn { border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important;
  padding: .6rem 1.1rem !important; min-height: 40px; border: 1px solid var(--ios-hair-2) !important; background: var(--ios-glass-2) !important; color: var(--ios-ink) !important;
  transition: transform .15s ease, background .15s ease; }
.btn:active { transform: scale(.97); }
.btn-gold, .btn-primary { background: linear-gradient(180deg, var(--ios-gold-2), var(--ios-gold)) !important; border-color: transparent !important; color: #1b1405 !important; }
.btn-danger { background: rgba(255,69,58,.14) !important; border-color: rgba(255,69,58,.3) !important; color: #ff6b62 !important; }
.btn-sm { min-height: 34px; padding: .4rem .85rem !important; font-size: .86rem !important; }
.btn-outline { background: var(--ios-glass-2) !important; }

/* ── Pills, badges, tabs. */
.badge, .ev-pill, .nav-badge, .tc { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
/* Tab bars become a segmented control: a glass track, the active tab a filled pill. */
.inv-tabbar, .tabs, .doc-tabs { display: inline-flex !important; gap: .15rem !important; padding: .2rem !important; border: 1px solid var(--ios-hair) !important; border-bottom: 1px solid var(--ios-hair) !important; border-radius: 999px !important; background: var(--ios-glass) !important; margin-bottom: 1rem !important; max-width: 100%; overflow-x: auto; }
.inv-tab2, .tabs a, .doc-tabs a { border: none !important; border-radius: 999px !important; padding: .45rem .95rem !important; font-weight: 600 !important; margin: 0 !important; color: var(--ios-muted) !important; }
.inv-tab2.on, .tabs a.active, .tabs a.on, .doc-tabs a.on { background: var(--ios-glass-2) !important; color: var(--ios-ink) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* ── Tables read as grouped lists. */
.table-wrap { border-radius: var(--ios-r); overflow: hidden; }
thead th { font-size: .7rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .08em !important; color: var(--ios-muted) !important; background: transparent !important; border-bottom: 1px solid var(--ios-hair) !important; }
tbody td { font-size: .95rem !important; font-weight: 500 !important; border-top: 1px solid var(--ios-hair) !important; }
tbody tr:first-child td { border-top: none !important; }

/* ── Sheets and modals. */
.modal { border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,.5) !important; }
@media (max-width: 640px) { .modal { border-radius: 24px 24px 0 0 !important; padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; } }

/* ── Sidebar: glass, rounded items. */
.sidebar { background: var(--ios-glass) !important; border-right: 1px solid var(--ios-hair) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sidebar a { border-radius: var(--ios-r-sm) !important; font-weight: 600 !important; }
.sidebar a.active { background: var(--ios-glass-2) !important; }
.sidebar-section { font-size: .68rem !important; letter-spacing: .1em !important; color: var(--ios-muted) !important; text-transform: uppercase; }

/* ── Invoice editor: sections are always open — groups with a small header,
   no chevrons, no summaries, nothing to expand. Right-hand totals as a card. */
.inv-section-header { background: transparent !important; cursor: default !important; padding: 1rem 1.15rem .1rem !important; border-bottom: none !important; }
.inv-section-header .toggle-icon { display: none !important; }
.inv-section-summary { display: none !important; }
.inv-section-body, .inv-section-body.collapsed { display: block !important; padding: .5rem 1.15rem 1.15rem !important; }
/* Saved-vehicle chips and dashed "new" tiles become glass tiles. */
.i2-veh-chip, .veh-chip, .sw-cat-btn, .sw-pill, .sw-other-btn { border-radius: var(--ios-r-sm) !important; border: 1px solid var(--ios-hair-2) !important; background: var(--ios-glass) !important; }
.sw-pill.active, .veh-chip.active { background: rgba(217,173,92,.16) !important; border-color: var(--ios-gold) !important; }

/* ── Phones: bigger targets, breathing room, nothing hugging the edge. */
@media (max-width: 640px) {
  .card, .inv-section { border-radius: 16px !important; }
  .btn { min-height: 44px; }
  .im-row { padding: .9rem 1rem !important; }
}

/* ── Pass 3: what the sweep found ─────────────────────────────────────────
   The dark theme wins on specificity for inputs and selects, so these carry
   the html[data-theme] prefix too. Search fields and selects are pills — a
   flat hairline is right for a form field, wrong for a control. */
.topbar h1, .page-header-row h1 { text-transform: none !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -.015em !important; }
html[data-theme="dark"] input:not([name=q]):not([type=search]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=search]), html input:not([name=q]):not([type=search]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=search]),
html[data-theme="dark"] textarea, html textarea { background: transparent !important; border: none !important; border-bottom: 1px solid var(--ios-hair-2) !important; border-radius: 0 !important; box-shadow: none !important; }
/* Search: a pill with room for its icon. */
html[data-theme="dark"] input[name=q], html input[type=search], html input[name=q], html .inv-filter-search input, html .search-wrap input {
  border: 1px solid var(--ios-hair-2) !important; border-radius: 999px !important; background: var(--ios-glass) !important;
  padding: .55rem 1rem .55rem 2.3rem !important; height: 40px !important; }
.inv-filter-search .ifs-ico { left: .9rem !important; }
input[name=q]:not(.inv-filter-search input) { background-image: none; }
/* Selects: a pill with a chevron, same height as the search beside it. */
html[data-theme="dark"] select, html select, html select.form-control {
  border: 1px solid var(--ios-hair-2) !important; border-radius: 999px !important; background-color: var(--ios-glass-2) !important; color: var(--ios-ink) !important;
  padding: .45rem 2rem .45rem .95rem !important; height: 40px !important; font-size: .9rem !important; font-weight: 600 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ios-muted) 50%), linear-gradient(135deg, var(--ios-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
html select:focus { border-color: var(--ios-gold) !important; }
/* Tables: the checkbox column and header rows breathe; long cells wrap. */
thead th { padding: .7rem .9rem !important; }
tbody td { padding: .8rem .9rem !important; }
tbody td a { color: var(--ios-ink); }
.table-wrap { border: 1px solid var(--ios-hair); }

/* ── Pass 4: the phone sweep ──────────────────────────────────────────────
   Buttons were shouting (the theme uppercases them); the sticky total bar
   and the filter row on lists needed their spacing. */
.btn, button, .btn-gold, .btn-outline, .btn-sm, .edh-save, .ios-primary { text-transform: none !important; letter-spacing: 0 !important; }
html[data-theme="dark"] textarea, html[data-theme="dark"] textarea.form-control { background: transparent !important; border: none !important; border-bottom: 1px solid var(--ios-hair-2) !important; border-radius: 0 !important; }
/* A search field beside its sort: one row, the search takes what's left. */
/* Only the row that actually holds a search box — an unscoped sibling rule
   here turned the Door page's Shop Shield card into two columns. */
.page-header-row + div:has(> input[name=q]), .inv-filterbar { display: flex !important; align-items: center !important; gap: .5rem !important; flex-wrap: wrap; }
.page-header-row + div:has(> input[name=q]) > *:first-child { flex: 1 1 200px; }
.page-header-row + div:has(> input[name=q]) form { margin: 0 !important; }
@media (max-width: 640px) {
  .page-header-row + div:has(> input[name=q]), .inv-filterbar { flex-wrap: nowrap; }
  .page-header-row + div:has(> input[name=q]) > form select { min-width: 0; }
}

/* ── Pass 5: the phone sweep, continued ───────────────────────────────────
   Tab bars with many tabs scroll sideways as one pill row instead of
   wrapping into a blob; the invoice editor's item cards get their width
   back on a phone. */
@media (max-width: 640px) {
  .inv-tabbar { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; display: flex !important; max-width: 100%; }
  .inv-tabbar::-webkit-scrollbar { display: none; }
  .inv-tabbar .inv-tab2 { flex: none; }
  .inv-section-body, .inv-section-body.collapsed { padding: .4rem .65rem .9rem !important; }
  .inv-section-header { padding: .8rem .8rem .1rem !important; }
  .item-card, .i2-item, .item-row { padding: .7rem .6rem !important; }
}

/* Submit buttons are primary actions — gold, including the login page's
   Sign In, which the glass default had turned grey. */
form button[type=submit]:not(.btn-outline):not(.btn-danger):not(.edh-item):not(.dep-amt-btn):not(.sw-pill), .login-card button, .btn-login {
  background: linear-gradient(180deg, var(--ios-gold-2), var(--ios-gold)) !important; border-color: transparent !important; color: #1b1405 !important; }

/* Invoice items on a phone: the price column was a fixed 100px and the drag
   handle another 11px inside a 300px card, so the name had 140px and wrapped
   every two words. The handle goes, the price takes only what it needs. */
@media (max-width: 640px) {
  .item-card { padding: .7rem .75rem !important; gap: .5rem !important; }
  .item-card-handle { display: none !important; }
  .item-card-main { flex: 1 1 auto !important; min-width: 0 !important; }
  .item-card-right { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; }
}
/* …and with enough weight to beat the editor's own item-card rules. */
@media (max-width: 640px) {
  /* Name and description take the full width; the price row sits under
     them, right-aligned — on a 375px phone there is no room for two columns. */
  .inv-section .item-card { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; padding: .75rem .85rem !important; gap: .4rem !important; }
  .inv-section .item-card-main { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; width: 100% !important; }
  .inv-section .item-card-right { flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; padding-top: .1rem; }
  .inv-section .item-card-handle { display: none !important; }
}

/* Notifications on a phone: a sheet under the top bar, full width, scrolling —
   not a dropdown pinned to the corner. */
@media (max-width: 640px) {
  .notif-dropdown { position: fixed !important; left: .5rem !important; right: .5rem !important; top: 60px !important; width: auto !important; max-width: none !important;
    max-height: calc(100vh - 80px) !important; overflow-y: auto !important; border-radius: 18px !important; }
}

/* Invoice editor ⋯ menu on a phone: the button sits on the left there, so
   the menu opens to the right of it instead of off the left edge. */
@media (max-width: 640px) { .edh-pop { left: 0 !important; right: auto !important; } }