/* ============================================================================
   ORBIT — POLISH LAYER (premium dark-SaaS refinement)

   LOADED LAST on purpose: every rule here either ADDS a property no earlier
   stylesheet sets (shadows, focus rings, backdrop blur) or wins an intended
   equal-specificity tie against auth.css / phase3.css / the page's inline
   <style>. It never renames a class, never changes layout geometry
   (padding/grid/size), and can be removed wholesale to restore the old look —
   that reversibility is the safety contract for polishing a live business app.

   Design intent: keep the existing dark + amber identity, add depth and
   tactility. Glass (translucency + backdrop blur) is used ONLY on transient
   overlay surfaces — drawers, modals, dropdowns, command palette, toasts —
   where content floats above the page and depth reads as meaning. Dense data
   surfaces (tables, forms, cards with numbers) stay fully opaque and
   high-contrast: readability of financial figures outranks fashion.
   ============================================================================ */

/* ── 0. FOUNDATION ─────────────────────────────────────────────────────── */

/* Ambient depth: two barely-there fixed glows (warm top, cool bottom) layered
   under the flat #0a0b0e. Declared on body's own background (not a pseudo-
   element) so no stacking-context tricks are needed. */
body{
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(245,147,10,.055), transparent 62%),
    radial-gradient(900px 520px at 88% 112%, rgba(96,165,250,.04), transparent 60%),
    #0a0b0e;
  background-attachment: fixed;
  font-variant-numeric: tabular-nums; /* columns of figures align vertically */
  text-rendering: optimizeLegibility;
}

/* Keyboard-focus ring (buttons, links, tabs). Inputs keep their own
   border+glow treatment below — their :focus{outline:none} rules still win
   there by specificity, which is exactly what we want. */
:focus-visible{outline:2px solid rgba(245,147,10,.55);outline-offset:2px;}

/* Thin, quiet scrollbars everywhere (page + inner scroll areas). */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);border:2px solid transparent;background-clip:content-box;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ── 1. TOP CHROME ─────────────────────────────────────────────────────── */

#nav{box-shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 30px -18px rgba(0,0,0,.6);}

/* Page heading: soft white→steel gradient — the classic premium-dashboard
   headline treatment, still fully readable. @supports-guarded so a browser
   without background-clip:text keeps plain white text, never invisible text. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .dash-h1{
    background:linear-gradient(180deg,#ffffff 30%,#b9c6da);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ── 2. DEPTH SYSTEM — opaque data cards ───────────────────────────────
   One consistent treatment for every card-like surface: a 1px inner top
   highlight (the "machined edge" that makes dark UI read as physical),
   a soft contact shadow, and a faint top-down sheen. Backgrounds stay the
   original opaque tokens — only decoration is added. */
.dcard,.ov-card,.lop-card,.inv-card,.inv-stat,.ocard,.lr-card,.pb-card,
.p360-summary-card,.cb-summary,.reco-panel,.team-invite,.team-found,.org-card,
.lr-edit-panel,.inv-edit-panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -18px rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
}

/* Unified hover physics for the cards that already lift on hover. */
.ov-card,.lop-card,.inv-card,.ocard,.lr-card{
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ov-card:hover,.lop-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.35),
    0 18px 44px -18px rgba(0,0,0,.65);
}
.inv-card:hover,.ocard:hover,.lr-card:hover{
  border-color:rgba(245,147,10,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 4px rgba(0,0,0,.3),
    0 14px 36px -18px rgba(0,0,0,.6);
}

/* Stat tiles: give the icon chip a soft matching glow so the number row
   reads as "instrument cluster", and let the tile lift as one piece. */
.ov-icon{box-shadow:0 0 0 1px rgba(245,147,10,.12), 0 4px 14px -6px rgba(245,147,10,.35);}
.ov-num,.lop-num,.inv-stat-num{letter-spacing:-.4px;}

/* ── 3. BUTTONS ────────────────────────────────────────────────────────── */

/* Primary: amber gets a vertical gradient, warm glow shadow and a pressed
   state — the tactile trio that makes an action feel consequential. */
.btn-a{
  background:linear-gradient(180deg,var(--amber-h) 0%,var(--amber) 55%,var(--amber-d));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(0,0,0,.4),
    0 6px 18px -6px rgba(245,147,10,.45);
  transition:filter .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-a:hover{
  background:linear-gradient(180deg,var(--amber-h) 0%,var(--amber) 55%,var(--amber-d));
  filter:brightness(1.07);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 2px 4px rgba(0,0,0,.4),
    0 10px 26px -8px rgba(245,147,10,.55);
}
.btn-a:active{transform:translateY(0) scale(.985);filter:brightness(.97);}

/* Secondary family: quiet at rest, a visible wash + press on interaction. */
.btn-ghost,.btn-doc,.btn-timeline,.sugg-action-btn,.team-btn,.p360-action-btn,
.cb-add-btn,.set-upload-btn,.usearch-trigger,.audit-dr-clear,.ap-type-btn{
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .12s var(--ease);
}
.btn-ghost:hover,.btn-doc:hover{background:rgba(255,255,255,.045);}
.btn-ghost:active,.btn-doc:active,.btn-timeline:active,.sugg-action-btn:active,
.team-btn:active,.p360-action-btn:active,.cb-add-btn:active{transform:scale(.97);}

/* ── 4. TABS & CHIPS ───────────────────────────────────────────────────── */

.dash-tab{border-radius:9px 9px 0 0;}
.dash-tab:hover{background:rgba(255,255,255,.035);}
.dash-tab.on{
  background:linear-gradient(180deg, transparent 45%, rgba(245,147,10,.09));
  text-shadow:0 0 18px rgba(245,147,10,.35);
}
.set-tab{border-radius:9px 9px 0 0;}
.set-tab:hover{background:rgba(255,255,255,.035);}
.set-tab.on{background:linear-gradient(180deg, transparent 45%, rgba(245,147,10,.09));}

.chip{transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);}
.chip:hover{background:rgba(255,255,255,.04);}
.chip:active{transform:scale(.96);}

/* ── 5. INPUTS — one focus language everywhere ─────────────────────────
   Every field already flips its border amber on focus; this adds the soft
   outer glow and a smooth transition. Element-level selector is deliberately
   low-specificity: it only contributes box-shadow/transition, which nothing
   else declares, so it composes with every existing per-component rule. */
input,select,textarea{
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(245,147,10,.13);
}
input::placeholder,textarea::placeholder{color:var(--muted2);}

/* ── 6. GLASS — transient overlay surfaces ONLY ───────────────────────── */

/* Slide-in drawers (timeline + 360° workspace) */
.tl-drawer{
  background:rgba(16,18,24,.88);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:-24px 0 70px rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.05);
}

/* Centered modals (manual order, missing-doc, delete confirm) */
.m-dialog{
  background:rgba(17,20,26,.9);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.m-backdrop{background:rgba(4,5,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.tl-backdrop{background:rgba(4,5,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* Command palette (universal search) */
.usearch-panel{
  background:rgba(17,20,26,.9);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}
.usearch-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* Dropdowns / small poppers */
.notif-dropdown,.lop-qa-menu,.co-suggest{
  background:rgba(20,23,30,.92);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Toasts */
.toast{
  background:rgba(22,25,32,.92);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Mobile bottom nav */
@media(max-width:700px){
  .own-bottomnav{
    background:rgba(13,15,20,.88);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
  }
}

/* ── 7. PILLS, BADGES, TIMELINE ────────────────────────────────────────── */

.st-badge,.pay-pill,.jh-pill,.audit-action-pill,.p360-status-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Timeline dots: soften the halo, brighten the spine head slightly. */
.tl-dot{box-shadow:0 0 0 4px rgba(245,147,10,.1), 0 0 12px rgba(245,147,10,.25);}
.tl-summary{border-left-color:rgba(245,147,10,.28);}

/* ── 8. LISTS & TABLES ─────────────────────────────────────────────────── */

.lop-row,.sugg-item,.usearch-item,.notif-item,.p360-doc-item,.co-suggest-item{
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.audit-table tr.audit-row td{transition:background .15s var(--ease);}
.audit-table th{background:rgba(255,255,255,.028);}

/* ── 9. EMPTY STATES & SKELETONS ───────────────────────────────────────── */

.empty svg,.lop-empty svg,.sugg-empty svg,.p360-empty svg,.usearch-empty svg{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
/* Shimmer: gradient-position sweep at 1.3s with a sine-like ease — the
   band that "feels fastest" for skeletons (shorter reads as nervous,
   longer reads as frozen). */
.skel{animation-duration:1.3s;animation-timing-function:ease-in-out;}

/* ── 10. DRAWER/MODAL TYPOGRAPHY ACCENT ────────────────────────────────── */

.tl-drawer-head h3,.m-head h3{letter-spacing:-.4px;}
.tl-drawer-eyebrow,.m-eyebrow{text-shadow:0 0 16px rgba(245,147,10,.4);}

/* ── 11. INTERACTION-STATE COMPLETENESS ────────────────────────────────
   Every clickable thing must SAY it's clickable, every disabled thing must
   say it isn't, and every wait must show life. */

/* Many action targets in this app are divs/spans wired via inline onclick
   (card rows, doc items, pills). One attribute selector guarantees the
   pointer affordance everywhere, including elements added later. */
[onclick]{cursor:pointer;}

/* Disabled = visibly inert: dimmed, no pointer, no hover lift. */
button:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:.5;cursor:not-allowed;
}
button:disabled{transform:none !important;filter:none !important;}

/* Dense-table breathing room: row text at 1.5 line-height scans measurably
   better than the browser default at these font sizes. */
.audit-table td{line-height:1.5;}

/* ── 12. WAITING STATES THAT SHOW LIFE ─────────────────────────────────
   Drawer/list loading placeholders were plain static text ("Loading…").
   A small live spinner above the text keeps the wait feeling active —
   self-contained keyframes so this file works on any page it's added to. */
@keyframes polish-spin{to{transform:rotate(360deg);}}
.tl-loading{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.tl-loading::before{
  content:'';width:26px;height:26px;flex:none;
  border:2.5px solid rgba(255,255,255,.09);border-top-color:var(--amber);
  border-radius:50%;animation:polish-spin .9s linear infinite;
}
.reco-loading{display:flex;flex-direction:column;align-items:center;gap:10px;}
.reco-loading::before{
  content:'';width:18px;height:18px;flex:none;
  border:2px solid rgba(255,255,255,.09);border-top-color:var(--amber);
  border-radius:50%;animation:polish-spin .9s linear infinite;
}

/* Guard screen: give the boot label a gentle breathing pulse so the very
   first seconds of the app never look frozen. */
@keyframes polish-breathe{0%,100%{opacity:.55;}50%{opacity:1;}}
.guard-label{animation:polish-breathe 1.6s ease-in-out infinite;}

/* ── 13. LEGIBILITY TUNE ───────────────────────────────────────────────
   The dimmest text token was borderline against the dark cards for the
   tiny uppercase field labels it's used on; a measured lift keeps the
   "quiet" hierarchy role while clearing comfortable readability.
   (Token override — inherits everywhere the token is used.) */
:root{--muted2:#66718a;}

/* NOTE — deliberately NOT added, and why:
   • Staggered card-entrance animations: every Firestore snapshot re-renders
     these lists via innerHTML, which would replay the entrance on every
     background data update — permanent flicker, the opposite of calm.
     The one-shot .dash-panel fade on tab switch is the right amount.
   • Animating more than the 1-2 key elements per view (per the "excessive
     motion erodes trust" rule): motion here is confined to hover/press,
     one panel fade, and waiting indicators. */

/* ══ 14. CROSS-PAGE ROLLOUT ═══════════════════════════════════════════════
   This stylesheet is linked on every app page. Selectors that don't exist
   on a given page simply never match — the sections above cover the shared
   phase3.css/auth.css components; this section covers each page's own
   component vocabulary with the same depth/glass/press language. */

/* — Accounting workspace (accounting.html: .card/.btn/.btn-amber) — */
.card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -18px rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
}
.btn{transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), filter .18s var(--ease);}
.btn:active{transform:scale(.97);}
.btn-amber{
  background:linear-gradient(180deg,var(--amber-h,#ffaa2e) 0%,var(--amber) 55%,var(--amber-d,#d97a06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px -6px rgba(245,147,10,.45);
}
.btn-amber:hover{filter:brightness(1.07);}
.acc-search{transition:border-color .18s var(--ease), box-shadow .18s var(--ease);}
.acc-search:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,147,10,.13);}

/* — Customer dashboard (dashboard.html: order/invoice cards + accounting panel) — */
.order-card,.cinv-card,.cacc-card2,.cacc-hero{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -18px rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.order-card:hover,.cinv-card:hover{
  border-color:rgba(245,147,10,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 14px 36px -18px rgba(0,0,0,.6);
}
.cacc-panel{
  background:rgba(15,17,23,.9);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:-24px 0 70px rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.05);
}
.cacc-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* — Reports (reports.html) — */
.rp-scard,.rp-section{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -18px rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
}
.rp-table td{line-height:1.5;}
.rp-table th{background:rgba(255,255,255,.028);}

/* — Public tracking page (track.html) —
   Scoped under #ptContent: index.html's full-width marketing section is
   ALSO named .hero, and must never receive card treatment. */
#ptContent .hero,#ptContent .map-card,#ptContent .psection{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 2px rgba(0,0,0,.35),
    0 10px 28px -18px rgba(0,0,0,.55);
  background-image:linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
}
.pt-welcome-card{
  background:rgba(17,20,26,.92);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
}

/* — Auth modal + account menu (auth.css classes, used on every page) — */
.au-modal{
  background:rgba(17,20,26,.92);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.au-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.au-submit{
  background:linear-gradient(180deg,var(--amber-h,#ffaa2e) 0%,var(--amber,#f5930a) 55%,var(--amber-d,#d97a06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px -6px rgba(245,147,10,.45);
  transition:filter .18s, transform .12s;
}
.au-submit:hover{filter:brightness(1.07);}
.au-submit:active{transform:scale(.985);}
.acct-menu{
  background:rgba(20,23,30,.92);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Sign-in modal: amber signature line across the top — the brand's first
   handshake with a new customer (QR-scan signups land here). */
.au-modal{position:relative;}
.au-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--amber,#f5930a) 30%,var(--amber-h,#ffaa2e) 50%,var(--amber,#f5930a) 70%,transparent);
  border-radius:16px 16px 0 0;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .au-h2{
    background:linear-gradient(180deg,#ffffff 30%,#b9c6da);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
}

/* ─── NARROW NAV SAFETY ───────────────────────────────────────────────────
   The app pages (dashboard, owner-dashboard) put three blocks in one
   non-wrapping row: brand logo (flex-shrink:0, ~136px), a "back"/"customer
   view" link, and the action cluster (search · notifications · account chip).
   At full size that needs ~577px, so it overflows every phone AND small
   tablets. Worse, it failed silently: .nav-right could shrink but its children
   could not, so the box collapsed to 28px and the ACCOUNT CHIP spilled off the
   right edge while document overflow still read 0, because an ancestor clipped
   it. Anything measuring only scrollWidth would call that page clean.

   The chip has to survive — its menu is the owner's one-tap route to
   owner-dashboard.html. So room is taken from the secondary items in order:
   back-link label → chip label → back link entirely. Shared sheet, so both
   dashboards (and the marketing header) get the same floor; the .acct-btn
   sizing half lives in auth.css. */
@media(max-width:620px){
  /* Pin the cluster to its content: shrinking it never shrank its children. */
  .nav-right{flex:none;gap:6px;}
  /* Icon-only back link. dashboard.html already did this at 480px and
     owner-dashboard.html never did — this equalises them. */
  .nav-back span{display:none;}
  .nav-back{padding:8px;}
  .nav-wrap{padding:0 12px;gap:8px;}
}
@media(max-width:420px){
  /* Long ids/amounts in status pills should ellipsis, not stretch a row. */
  .pay-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:380px){
  /* Last to go: even icon-only the back link costs ~38px the chip needs, and
     its destination is already a row inside the account menu. */
  .nav-back{display:none;}
}