/* Hairlines go through the ink token, because a literal cannot invert.
   rgba(18,61,52,.08) is a near-black green at eight per cent: a hairline on a
   light surface, and nothing at all on a dark one. Forty-two of them, on
   borders and dividers across half the application, which is why parts of the
   dark theme have no edges. Somebody noticed component by component and
   patched fifteen of them with :root:not([data-theme="light"]) overrides
   painting rgba(220,241,233,...) back on -- the same fix, fifteen times, for
   a rule that should never have been a literal. */
/* Control Room hybrid:
   V2 dense command Overview (mosaic + live field + panels together)
   V1 left sidebar, Black Label palette, card spacing, typography
   No neon / gaming accent. */




/* Marketing — decision-first growth command */









/* ——— Shell: Version 1 sidebar ——— */
.app{
  display:grid!important;
  grid-template-columns:var(--sidebar) minmax(0,1fr)!important;
  min-height:100vh;
}
.app.sidebar-collapsed{--sidebar:78px}

.sidebar{
  position:sticky!important;top:0;z-index:45;
  height:100vh!important;
  display:flex!important;flex-direction:column!important;
  border-bottom:0!important;
}
.sidebar-collapse{display:grid!important;place-items:center}

.brand{
  display:flex!important;align-items:center;
  border:0!important;border-bottom:1px solid var(--line)!important;
  min-width:0;
}


.brand-sub{font-weight:600;margin-top:3px;
}

.nav{min-height:0!important;
  overflow-y:auto;overflow-x:hidden;
}
.nav-group{
  border-left:0!important;font-weight:700;color:var(--muted);
}
.nav-btn{
  align-items:center;justify-content:flex-start;gap:10px;
  color:var(--muted);
  line-height:1.2;text-align:left;background:transparent!important;
}
.nav-btn .nav-ico{display:grid;place-items:center;
  font-size:14px;flex:none;
}
.nav-btn .nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;
}
.nav-btn:hover{background:var(--surface-hover)!important;color:var(--text);transform:none}


.nav-divider{height:1px;background:var(--line)}






/* Premium navigation rail: one restrained icon language, compact rhythm and
   a decisive selected state instead of a long stack of loose text rows. */





.sidebar-collapse{top:72px!important;width:26px!important;height:26px!important;box-shadow:0 5px 16px rgba(0,0,0,.08)!important}
.nav{scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-group{padding:11px 10px 4px!important;font-size:8px!important;letter-spacing:.18em!important;opacity:.72!important}
.nav-btn{min-height:40px!important;border:1px solid transparent!important;border-radius:11px!important;font-size:13px!important;font-weight:630!important}
.nav-btn .nav-ico{width:29px!important;height:29px!important;border-radius:8px;color:var(--secondary-text);background:rgba(var(--ink),.035)!important;transition:background .18s,color .18s,transform .18s}
.nav-btn .nav-ico svg{width:17px;height:17px;}
.nav-btn .nav-label{font-size:13px!important;}
.nav-btn:hover{background:rgba(var(--ink),.045)!important;border-color:rgba(var(--ink),.055)!important}
.nav-btn:hover .nav-ico{color:var(--text);transform:translateY(-1px)}
.nav-btn.active{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important;box-shadow:0 8px 18px rgba(31,73,64,.16)!important}
.nav-btn.active .nav-ico{color:var(--accent-ink)!important;background:rgba(255,255,255,.12)!important}
.nav-btn.active .nav-label{color:var(--accent-ink)!important}
.nav-divider{margin:8px 5px 5px!important}
.nav-btn-quiet{opacity:.82!important}



.sidebar-collapsed .nav-btn .nav-ico{width:34px!important;height:34px!important}

.main{
  --main-gutter:var(--s4)!important;
  max-width:1720px!important;width:100%;
  margin:0 auto!important;
  padding:var(--s4) var(--main-gutter) var(--s5)!important;
}
.topbar{
  border:0!important;border-bottom:1px solid rgba(var(--ink),.045)!important;
  display:flex;justify-content:space-between;align-items:center;
}
.company-lockup{display:flex!important;align-items:center;}
.company-lockup img{border-radius:50%}
.company-lockup .eyebrow{display:block!important;color:var(--secondary-text)}

.btn{
  border:1px solid var(--line);font-size:13px;
}
.btn:hover{border-color:rgba(var(--ink),.14);transform:none}
.btn.primary{
  background:var(--accent)!important;
}



.page-head,
.collections-head,
.inventory-command-head,
.finance-command-head{
  margin:0 0 var(--s2)!important;padding:0 0 var(--s2)!important;
  border-bottom:1px solid rgba(var(--ink),.06)!important;
}



/* Surfaces — V1 card language */
.card,
.stat,
.mini,
.rev-score,
.brief{
  border:1px solid var(--line)!important;
  background:var(--surface-1)!important;
  border-radius:var(--radius-lg)!important;
}

/* Tabs — quiet underline, brass active */
.revenue-tabs,.pipeline-tabs,.territory-tabs,.finance-tabs,
.warranty-tabs,.property-tabs-pro,.fleet-tabs-pro,
.mktTabs,#mktTabs,#econTabs,#financeTabs{border:0!important;
  border-bottom:1px solid var(--line)!important;gap:0!important;
}


.metric,.big,.kpi-value,.rev-score strong,#revMTD{font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
}


/* ——— Overview: Version 2 dense command mosaic ——— */


/* The Overview figures.

   This was one full-width row per tile, stacked in a flex column. Eight of
   them ran the whole height of the signal column, so the numbers filled the
   screen before the first thing an owner could act on -- and every tile's
   note wrapped onto a second and third line under it.

   They are a grid now. The note is held to one line (the whole sentence is
   still on the tile's tooltip, so nothing is lost) and the tone that used to
   live in the note's colour has moved to a rail down the left edge, which is
   the trade that buys back the vertical space rather than deleting meaning.

   This is the only place the Overview tiles are sized. index.html carries the
   generic .kpi, which the Pipeline health tiles still use at full size. */
/* One line. The full sentence is the tile's title attribute. */

/* Today's appointments sits in the same flush column as everything else in
   the signal panel: full bleed, hairline above, no card of its own. */



/* To do — action list under Overview greeting */

/* A single-user V1 needs a command bar, not a row of equally loud buttons. */


.topbar #refresh{background:transparent!important;color:var(--secondary-text)!important;}
.topbar #refresh:hover{background:var(--surface-hover)!important;color:var(--text)!important}

.topbar .theme-toggle .theme-label{display:none}

.operator-user{position:relative;}
.operator-account-button{display:flex;align-items:center;white-space:nowrap}
.operator-account-avatar{border-radius:50%;display:grid;place-items:center;}
.op-avatar.has-photo{background:none;overflow:hidden}
.operator-account-menu{position:absolute;z-index:90;right:0;top:calc(100% + 8px);width:230px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);}
.operator-account-menu .operator-user-copy{padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.operator-account-menu .operator-user-copy strong,.operator-account-menu .operator-user-copy span{overflow:hidden;text-overflow:ellipsis}
.operator-account-menu .operator-user-copy span{margin-top:3px;color:var(--muted);font-size:11px;}
.operator-account-menu #operatorLogout{width:100%;justify-content:flex-start;}

/* Field band: dispatch | lead response | missed+perf | tech */
/* One action family for the entire callback workflow. Open Calls is larger,
   but every call action uses the same solid theme colour and interaction. */

/* Command pages — denser rails, V1 readable cards */
#page-revenue .rev-scoreboard:not([hidden]){
  display:flex!important;flex-wrap:wrap;gap:var(--s1)!important;
  margin:0 0 var(--s2)!important;padding:0!important;
}
#page-revenue .rev-score{
  flex:1 1 140px;min-width:130px;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-md)!important;
  background:var(--surface-1)!important;
  padding:var(--s2)!important;
}
#page-revenue .rev-score strong,#page-pipeline .kpi-value{
  color:var(--text)!important;font-size:22px!important;
}





#page-revenue #revenueBrief{
  margin-bottom:var(--s2)!important;
}

.collections-home > .page-head{display:none!important}

/* Jobber chain — Black Label */



.auth-gate{background:var(--bg)!important}
.auth-card{
  border:1px solid var(--line)!important;border-radius:var(--radius-lg)!important;
  background:var(--surface-1)!important;
}
.auth-submit{background:var(--accent)!important;color:var(--accent-ink)!important}

.mobile-brandbar{
  background:var(--bg)!important;border-bottom:1px solid var(--line)!important;
}


.call-drawer,.finance-drawer,.collections-drawer,.property-drawer-pro,
.territory-detail-drawer,.warranty-drawer,.revenue-quality-drawer,
.pipeline-quality-drawer,.modal-card{
  background:var(--surface-1)!important;
  border-left:1px solid var(--line)!important;
}





.saved-view.active,.mobile-dock button.active{
  background:var(--accent-wash)!important;
  border-color:var(--accent-line)!important;
  color:var(--accent)!important;
}
.mobile-dock{
  background:var(--bg)!important;
  border-top:1px solid var(--line)!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.25)!important;
}
.mobile-dock button{
  border-radius:var(--radius-md)!important;font-size:10px!important;
  letter-spacing:.02em;
}



/* Schedule theme restoration. The dispatch redesign has its own visual system,
   so every surface needs an explicit dark and Trump treatment instead of
   inheriting the light calendar fills. */




















































































@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)!important}
  .sidebar{display:none!important}
  .main{--main-gutter:var(--s2)!important;padding:var(--s2) var(--main-gutter) 96px!important}
  /* Order owned by Jobber-like field shell in index.html (home vs schedule modes) */
}


/* Property client record — Jobber-like density, Black Label */
.pc-chrome{position:sticky;top:0;z-index:6;background:var(--bg)}
.property-drawer-pro{
  top:50%!important;left:50%!important;right:auto!important;
  width:min(1120px,calc(100vw - 64px))!important;
  height:min(860px,calc(100vh - 64px))!important;
  background:var(--bg)!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:0 30px 100px rgba(13,22,19,.30)!important;
  opacity:0;pointer-events:none;overflow:auto!important;
  transform:translate(-50%,-46%) scale(.98)!important;
  transition:transform .22s var(--ease),opacity .18s ease!important;
}
.property-drawer-pro.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)!important}

@media(max-width:700px){
 .property-drawer-pro{top:0!important;left:0!important;width:100vw!important;height:100vh!important;border:0!important;border-radius:0!important;transform:translateY(102%)!important}
 .property-drawer-pro.open{transform:none!important}
}

.pc-section{background:var(--surface-1);border-color:var(--line)}
.pc-status{border-radius:4px!important}

/* ========================================================================== */
/* COMPLETE PAGE SYSTEM — the Overview hierarchy carried through every room   */
/* ========================================================================== */

/* One content rhythm: title, controls, primary work, then analysis. */
.page:not(#page-overview){max-width:1480px;margin:0 auto!important;padding:0 4px 40px!important}
.page:not(#page-overview)>.page-head{align-items:flex-end;
  gap:24px;margin:0 0 18px!important;padding:2px 0 16px!important;
}
.page:not(#page-overview)>.page-head h2{margin:4px 0 0!important}
.page:not(#page-overview)>.page-head>p,.page:not(#page-overview)>.page-head>div>p{max-width:620px;margin:7px 0 0}
.page:not(#page-overview) .section-head{align-items:flex-start;gap:16px;margin-bottom:14px}
.page:not(#page-overview) .section-head h2,
.page:not(#page-overview) .section-head h3{margin:0!important}
.page:not(#page-overview) .section-head .small{margin-top:5px;line-height:1.45}

/* All destination tabs behave as one system and remain reachable while long
   tables scroll. */
.revenue-tabs,.pipeline-tabs,.territory-tabs,.finance-tabs,
.warranty-tabs,.property-tabs-pro,.fleet-tabs-pro,.settings-tabs,
#mktTabs,#econTabs{
  position:sticky;top:0;z-index:12;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
  margin:0 0 18px!important;
}
.revenue-tabs::-webkit-scrollbar,.pipeline-tabs::-webkit-scrollbar,.territory-tabs::-webkit-scrollbar,.finance-tabs::-webkit-scrollbar,.warranty-tabs::-webkit-scrollbar,
.property-tabs-pro::-webkit-scrollbar,.fleet-tabs-pro::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar,#mktTabs::-webkit-scrollbar,#econTabs::-webkit-scrollbar{display:none}
.revenue-tabs button,.pipeline-tabs button,.territory-tabs button,
.finance-tabs button,.warranty-tabs button,.property-tabs-pro button,.fleet-tabs-pro button,.settings-tabs button,#mktTabs button,#econTabs button{white-space:nowrap;
}

/* Filter bars look and act alike everywhere. */

.collections-toolbar{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:end;gap:10px!important;margin-bottom:16px!important;
}

/* Tables are work surfaces, not card decoration. */
.page .table-wrap,.page .table-scroll{overflow:auto;}

.page thead{z-index:2;}
.page th{white-space:nowrap}
.page td{}
.page tbody tr{transition:background .14s ease}
.page tbody tr:hover{background:rgba(var(--ink),.028)}

.page .badge,.page .pill,.page [class*="status"]{}

/* Testing: results and actions first; analytics follow. */
#page-testing.active{display:flex;flex-direction:column}
#page-testing>.page-head{order:0}
#page-testing>article:nth-of-type(4){order:1;margin-top:0!important;border-color:var(--accent-line)!important}
#page-testing>article:nth-of-type(1){order:2;margin-top:16px!important}
#page-testing>article:nth-of-type(2){order:3}
#page-testing>article:nth-of-type(3){order:4}
#page-testing #testingRows td:first-child,#page-testing #testingRows td:nth-child(6){font-variant-numeric:tabular-nums;font-weight:500}
#page-testing #testingRows button{min-height:36px}
#page-testing .testing-trend{min-height:160px}

/* Properties: remove the retired directory still rendered below the current
   property command and give the current directory the page. */
#page-properties>.mini-grid{display:none!important}








#page-fleet>.split{display:none!important}
#page-fleet .fleet-command-head-pro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}

#page-fleet .fleet-command-grid-pro{margin-bottom:14px}
#page-fleet .fleet-map-pro{border-radius:var(--radius-md);overflow:hidden}

/* Revenue / Pipeline: keep the decision and action queue above analysis. */
#page-revenue .rev-scoreboard:not([hidden]){display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))}
#page-pipeline .pipeline-tabs,#page-revenue .revenue-tabs{margin-top:2px!important}

/* Collections / Finance: money and action first, ledgers second. */
.collections-home .collections-command,#page-finance{--money-column:minmax(0,1fr)}
.collections-home .collection-layout{grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:14px}


#page-finance .finance-panel>.collection-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* Remaining rooms share a calm command layout rather than isolated legacy
   styling. */
#page-territory .territory-panel,#page-marketing .territory-panel,#page-economics .territory-panel,
#page-settings .settings-panel{display:none}
#page-territory .territory-panel.active,#page-marketing .territory-panel.active,
#page-economics .territory-panel.active,#page-settings .settings-panel.active{display:block}


#page-inventory .inventory-command-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px!important;
}
#page-settings .settings-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
#page-settings .settings-tabs{top:14px;}




@media(max-width:900px){
  .page:not(#page-overview){padding:0 0 28px!important}
  .page:not(#page-overview)>.page-head{display:block!important;margin-bottom:12px!important}
  
  .revenue-tabs,.pipeline-tabs,.territory-tabs,.finance-tabs,.warranty-tabs,
  .property-tabs-pro,.fleet-tabs-pro,.settings-tabs,#mktTabs,#econTabs{margin-left:-14px!important;margin-right:-14px!important;}
#page-fleet .fleet-command-grid-pro,#page-finance .finance-panel>.collection-layout,
  .collections-home .collection-layout{grid-template-columns:minmax(0,1fr)}
  #page-revenue .rev-scoreboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* minmax(0,1fr), not 1fr: a bare track's minimum is auto, so one wide
     table inside Settings pushes the column past the viewport and the
     whole page scrolls sideways. */
  #page-settings .settings-shell{grid-template-columns:minmax(0,1fr)}
  #page-settings .settings-tabs{position:static;}
}

@media(max-width:560px){

  
  /* The reconciliation pill is one nowrap line -- "Reconciled · estimates
     only, no actual costs imported" -- sitting at the right of a flex row.
     The phone rule that stacks that row is written on the class alone, and
     the desktop rule beside it is written on #page-fleet, so the id won and
     the pill kept its place: 273px starting at x=157 on a 390px screen, with
     its last four words off the edge. Stacked and allowed to wrap, it reads. */
  #page-finance .finance-settings-grid{grid-template-columns:minmax(0,1fr)}
  #page-fleet .fleet-command-head-pro{display:block}
  #page-fleet .fleet-recon-pro{display:inline-block;margin-top:8px;white-space:normal}
}

/* Work lists are focused tasks, not permanent navigation. On desktop they
   open as a contained modal so the Overview remains legible behind them; on
   a phone they become a reachable bottom sheet. */
body.work-list-open{overflow:hidden}
body.overview-modal-open{overflow:hidden}
.overview-modal-backdrop{position:fixed;z-index:118;inset:0;opacity:0;pointer-events:none;transition:opacity .18s ease}
.overview-modal-backdrop.open{opacity:1;pointer-events:auto}

.work-list-backdrop{
  position:fixed;z-index:94;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.work-list-backdrop.open{opacity:1;pointer-events:auto}
.work-list-drawer{
  z-index:95!important;top:50%!important;left:50%!important;right:auto!important;
  width:min(780px,calc(100vw - 48px))!important;height:min(720px,calc(100vh - 64px))!important;
  display:flex;flex-direction:column;padding:0 0 24px!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  background:var(--surface-1)!important;box-shadow:0 28px 90px rgba(13,22,19,.26)!important;
  overflow:hidden!important;opacity:0;pointer-events:none;
  transform:translate(-50%,-46%) scale(.975)!important;
  transition:transform .22s var(--ease),opacity .18s ease!important;
}
.work-list-drawer.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)!important}
.work-list-drawer>.eyebrow{margin:26px 72px 3px 28px!important;color:var(--accent)}
.work-list-drawer>h2{margin:0 72px 2px 28px!important;font-size:28px;letter-spacing:-.03em}
.work-list-drawer>.work-list-description{margin:0 72px 15px 28px;color:var(--muted);font-size:13px;line-height:1.45}
.work-list-drawer>.drawer-close{
  position:absolute;top:20px;right:22px;float:none;margin:0!important;z-index:2;
}
.work-list-drawer .work-list-chips{
  flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
  padding:12px 28px 16px!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:visible;
}
.work-list-drawer .work-list-chip{min-width:0;min-height:44px;padding:6px 9px;background:var(--surface-2);white-space:normal;line-height:1.18;font-size:11px;display:flex;align-items:center;justify-content:center;gap:7px}
.work-list-drawer .work-list-chip b{display:inline-grid;place-items:center;flex:0 0 auto;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(var(--ink),.075);color:var(--secondary-text);font-size:10px;line-height:1}
.work-list-drawer .work-list-chip.active b{background:rgba(255,255,255,.18);color:inherit}
.work-list-drawer .work-list-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.work-list-drawer .work-list{flex:1;min-height:0;overflow:auto;padding:0 28px}
.work-list-drawer .work-list-item{border:1px solid var(--line);border-radius:12px;margin-top:12px;overflow:hidden;background:var(--surface-1)}
.work-list-drawer .work-list-row{padding-left:16px;padding-right:16px}
.work-list-drawer .work-list-actions{padding-left:16px;padding-right:16px}
.work-list-drawer .work-list-note{margin:0 16px 12px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--accent-wash);font-size:13px;line-height:1.45;white-space:normal}
.work-list-drawer .work-list-note span{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.work-list-drawer .work-list-note p{margin:4px 0 0;white-space:pre-wrap}
.work-list-drawer .work-list-note small{display:block;margin-top:7px;color:var(--muted);font-size:11px}
.work-list-drawer .work-list-note.is-call-summary{background:var(--surface-2);border-left:3px solid var(--accent)}
.work-list-drawer .work-list-note.is-postponed{background:var(--warning-wash,var(--surface-2));border-left:3px solid var(--amber)}
.follow-up-later-form{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.follow-up-later-form .full{grid-column:1/-1}
@media(max-width:620px){.follow-up-later-form{grid-template-columns:minmax(0,1fr)}.follow-up-later-form .full{grid-column:auto}}
.close-out-panel{margin-top:20px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.close-out-panel summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:750}
.close-out-panel .btn.danger{margin-top:10px;background:var(--red);border-color:var(--red);color:#fff}
.closed-flow-card{margin-top:20px;padding:14px;border:1px solid color-mix(in srgb,var(--red) 35%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--red) 7%,var(--surface-1))}
.closed-flow-card p{margin:6px 0 12px;color:var(--muted);font-size:12px;line-height:1.5}
.work-list-empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;color:var(--muted)}
.work-list-empty>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:14px;border-radius:50%;background:var(--positive-wash);color:var(--positive);font-size:21px;font-weight:900}
.work-list-empty strong{color:var(--text);font-size:17px}
.work-list-empty p{max-width:360px;margin:7px 0 0;font-size:13px;line-height:1.5}

body.progression-drawer-open{overflow:hidden}
.progression-drawer-backdrop{position:fixed;z-index:96;inset:0;opacity:0;pointer-events:none;transition:opacity .18s ease}
.progression-drawer-backdrop.open{opacity:1;pointer-events:auto}

@media(max-width:700px){
  .work-list-backdrop{background:rgba(13,22,19,.42)}
  .work-list-drawer{
    top:auto!important;bottom:0!important;left:0!important;width:100%!important;
    height:min(82vh,760px)!important;border-radius:20px 20px 0 0!important;
    padding-bottom:calc(var(--mobile-dock-h,64px) + env(safe-area-inset-bottom,0px) + 18px)!important;
    transform:translateY(104%)!important;
  }
  .work-list-drawer.open{transform:none!important}
  .work-list-drawer>.eyebrow{margin-top:22px!important}
  .work-list-drawer .work-list-chips{display:flex;overflow-x:auto;padding-left:18px!important;padding-right:18px!important}
  .work-list-drawer .work-list-chip{flex:0 0 auto;min-height:38px;white-space:nowrap}
  .work-list-drawer .work-list{padding:0 18px}
}

/* Light-first executive workspace. The ivory canvas keeps the screen warm;
   separate white work surfaces restore hierarchy and breathing room. Forest
   owns navigation and action, while cognac is reserved for money/attention. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="light"] body{background:var(--bg)}
:root[data-theme="light"] .sidebar{
  background:var(--sidebar-bg)!important;
  box-shadow:none!important;
  border-right-color:rgba(var(--ink),.08)!important;
}
:root[data-theme="light"] .brand img{
  background:var(--surface-1)!important;
  box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(var(--ink),.07)!important;
}
:root[data-theme="light"] .nav-btn.active .nav-ico,
:root[data-theme="light"] .nav-btn.active .nav-label{color:var(--accent-ink)!important}
/* The light workspace gets a dark tailored rail: contrast creates the room,
   brass marks selection, and the main canvas remains quiet and bright. */
:root[data-theme="light"] .sidebar{
  background:linear-gradient(165deg,#17342D 0%,#102A25 52%,#0B211D 100%)!important;
  border-right-color:rgba(9,24,21,.34)!important;
  box-shadow:10px 0 34px rgba(16,42,37,.09)!important;
}
:root[data-theme="light"] .brand{border-bottom-color:rgba(255,255,255,.10)!important}
:root[data-theme="light"] .brand-word{color:#F7F4EA!important}
:root[data-theme="light"] .brand-sub{color:#9EB1AA!important}
:root[data-theme="light"] .brand img{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.22)!important}
:root[data-theme="light"] .nav-group{color:#C9AC78!important;opacity:.86!important}
:root[data-theme="light"] .nav-btn{color:#A9BBB4!important}
:root[data-theme="light"] .nav-btn .nav-label{color:#A9BBB4!important}
:root[data-theme="light"] .nav-btn .nav-ico{color:#A9BBB4!important;background:rgba(255,255,255,.055)!important}
:root[data-theme="light"] .nav-btn:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.07)!important}
:root[data-theme="light"] .nav-btn:hover .nav-label{color:#FFFFFF!important}
:root[data-theme="light"] .nav-btn:hover .nav-ico{color:#D7BE8B!important;background:rgba(255,255,255,.08)!important}
:root[data-theme="light"] .nav-btn.active{
  position:relative;color:#FFFFFF!important;
  background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.075))!important;
  border-color:rgba(207,177,120,.26)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.13)!important;
}
:root[data-theme="light"] .nav-btn.active::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;background:#D0B377;box-shadow:0 0 12px rgba(208,179,119,.35)}
:root[data-theme="light"] .nav-btn.active .nav-label{color:#FFFFFF!important}
:root[data-theme="light"] .nav-btn.active .nav-ico{color:#E0C58E!important;background:rgba(208,179,119,.12)!important}
:root[data-theme="light"] .nav-divider{background:rgba(255,255,255,.09)!important}
:root[data-theme="light"] .nav-btn-quiet{opacity:.86!important}




:root[data-theme="light"] .sidebar-collapse{color:#17342D!important;border-color:rgba(16,42,37,.18)!important;background:#F7F4EA!important}
:root[data-theme="light"] .topbar{border-bottom-color:rgba(var(--ink),.07)!important}

:root[data-theme="light"] .topbar .btn:hover{background:var(--surface-1)!important;border-color:var(--accent-line)}
:root[data-theme="light"] .topbar .btn.primary{
  background:var(--accent)!important;border-color:var(--accent)!important;
  box-shadow:0 6px 16px rgba(49,94,85,.14)!important;
}




:root[data-theme="light"] .operator-account-avatar{background:var(--accent-wash);color:var(--accent)}
/* Off-canvas drawers sit just beyond the viewport. Their large dark shadows
   must switch on with the drawer, otherwise a false black rail appears at the
   right edge of an otherwise light screen. */
:root[data-theme="light"] .econ-drawer:not(.open),
:root[data-theme="light"] .drawer:not(.open),
:root[data-theme="light"] .fleet-drawer-pro:not(.open),
:root[data-theme="light"] .ray-chat-drawer:not(.open),
:root[data-theme="light"] .call-drawer:not(.open),
:root[data-theme="light"] .property-drawer-pro:not(.open){box-shadow:none!important}

/* Trump mode is deliberately maximalist. The information architecture and
   underlying data do not change; only the visual costume does. */
/* Premium application header ------------------------------------------------ */
.topbar{
  position:sticky!important;
  border:1px solid color-mix(in srgb,var(--line) 84%,transparent)!important;
}
.company-lockup{gap:11px!important;}
.company-lockup img{
  width:42px!important;height:42px!important;object-fit:contain;
  background:#fff;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  box-shadow:0 4px 12px rgba(25,45,39,.09);
}
.topbar-identity{display:grid;align-content:center;min-width:0}
.topbar-brandline{align-items:center;gap:7px;line-height:1;white-space:nowrap}
.topbar-brandline strong{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.17em}
.topbar-brandline i{display:block;width:1px;height:10px;background:var(--line)}
.topbar-brandline span{color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.12em}
.topbar #pageTitle{line-height:1!important;}
.topbar .actions{display:flex;position:relative}
.topbar .actions .btn{gap:7px;
}
.topbar .actions .btn:hover{color:var(--text);border-color:var(--accent-line)!important;background:var(--surface-hover)!important;transform:translateY(-1px)}
.topbar .actions .btn:focus-visible{outline:3px solid var(--accent-wash);outline-offset:2px}
.topbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar-icon-button{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center}
.topbar .theme-toggle{font-size:16px!important}
.topbar .ray-chat-btn{}
.topbar .ray-chat-btn:hover{color:#fff!important;background:var(--accent-strong)!important}
.topbar-spark{font-size:13px;line-height:1}
.topbar .global-search-btn{min-width:144px!important;justify-content:flex-start}
.topbar .global-search-btn .shortcut{margin-left:auto;padding:2px 5px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:var(--surface-2);font-size:9px;line-height:1.2}
.topbar #refresh{padding:0 11px!important}

.operator-account-avatar{width:26px;height:26px;}
.notif{position:relative}
.notif-btn{position:relative}
.notif-badge{top:-5px!important;right:-5px!important;min-width:18px!important;height:18px!important;padding:0 4px!important;border:2px solid var(--bg);border-radius:999px!important;background:var(--critical)!important;color:var(--surface-1)!important;font-size:10px!important;line-height:14px!important}
/* The bell's panel is a popover: surface-3 with the pop shadow, not a grey
   tile with a green wash in its header. */
.notif-panel{
  top:calc(100% + 8px)!important;width:min(410px,calc(100vw - 24px))!important;
  overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-3);box-shadow:var(--shadow-pop);
}
.notif-head{padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}

.notif-head .eyebrow{color:var(--accent);font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.notif-head b{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
.notif-list{overflow:auto}
.notif-item{padding:12px 16px}
.notif-item:hover{background:var(--surface-hover)}
.notif-foot{padding:10px 16px}
.notif-push-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* Schedule — dispatch-grade weekly workspace. The visual hierarchy follows
   the work: week first, exceptions second, map third. */








































































































#page-settings .import-run-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

#page-settings #importRunDetail{margin-top:10px;color:var(--secondary-text);line-height:1.6}
#page-settings #importRunDetail .warn{color:var(--warning)}
#page-callbacks .warranty-candidate-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#page-callbacks .warranty-candidate-controls label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}










































/* The month grid below is 826px wide at its floor of seven 118px columns,
   and this clipped it. On a phone that is three and a bit columns of a
   week: Thursday, Friday and Saturday are not narrow, they are absent,
   with nothing on screen to say a calendar continues past the edge.
   Scrolls sideways within its own card instead. */


























@media(max-width:900px){
  body.mobile-schedule-mode #mobileScheduleReminders{display:block;margin:0 0 12px;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:var(--surface-1)}
  
  
  
  
  
  
  
  
  
}

/* The schedule is the workspace, not a card inside the workspace. Desktop uses
   every available pixel; reminders live over their assignee's lane. */


/* The current day is identified with a brass rule, not a different header
   fill. Every weekday therefore keeps the same reading contrast. */



























.appointment-route-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--line)}
.appointment-route-strip>div{display:grid;gap:4px;padding:13px 15px;background:var(--surface-1)}
.appointment-route-strip span{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.appointment-route-strip strong{font-size:16px;color:var(--text)}
.appointment-route-strip.is-unavailable{display:block;padding:12px 15px;background:var(--surface-1)}

/* Day view uses a different employee grid from Week view. Its actionable
   all-day work and reminders still belong above the person they affect. */






















/* Pipeline command redesign — final cascade overrides. */
/* 2026 redesign: the brief is a card like any other, in both themes. */








#page-pipeline #customerJourneyCard .kanban-card[draggable="true"]{cursor:grab}
#page-pipeline #customerJourneyCard .kanban-card.is-dragging{opacity:.42;cursor:grabbing;transform:scale(.98)}
#page-pipeline #customerJourneyCard .kanban-column.is-drop-target{
  border-color:var(--accent-line)!important;
  background:var(--accent-wash)!important
}







/* Schedule: why a visit carries no price (page-schedule.js schedUnbilledBadge). */
.schedule-unbilled-badge{display:inline-block;justify-self:start;margin-top:2px;padding:0 5px;border-radius:4px;background:var(--surface-2);color:var(--secondary-text);font-size:10px;font-style:normal;font-weight:600;line-height:15px;white-space:nowrap}
.unbilled-failure{color:var(--critical)}
.unbilled-cleaning{color:var(--secondary-text)}
.unbilled-service_check{color:var(--warning)}
.unbilled-not_priced{color:var(--muted)}