/* Frontline CRM V3 polish - navigation, theme controls, recruiting, contrast */

/* ---------- high-level contrast normalization ---------- */
html body #app{
  color:var(--text-primary);
}
html body #app :where(.content,.fleet-drawer-v5,.recruiting-page,.task-drawer,.service-card,.panel,.wb-panel,.maintenance-task-panel,.maintenance-history-panel,.access-page,.meta-dashboard){
  color:var(--text-primary);
}
html body #app :where(p,small,.muted,.drawer-identity p,.recruiting-head p,.fleet-head p,.service-card header p){
  color:var(--text-secondary);
}
html body #app :where(label,th,.eyebrow,.appearance-caption,.fleet-register-head span,.section-title span){
  color:var(--text-tertiary);
}

/* ---------- sidebar V3 ---------- */
.shell>aside{
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
}
.sidehead{
  padding:0 12px;
  gap:9px;
  background:var(--bg-sidebar);
  border-bottom:1px solid var(--border-subtle);
}
.sidehead .brandtxt b{font-size:13px;font-weight:700;letter-spacing:.02em}
.sidehead .brandtxt span{font-size:10px;color:var(--text-tertiary)}
.navscroll,aside>nav{
  padding:10px 8px 12px;
}
.nav-item,.nav-group-head{
  position:relative;
  min-height:38px;
  height:38px;
  margin:2px 0;
  padding:0 10px;
  gap:10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text-secondary);
  transition:background-color 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease),transform 150ms var(--ease);
}
.nav-item>span,.nav-group-head>span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:var(--text-secondary);
  background:var(--bg-raised);
  transition:background-color 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease);
}
.nav-item b,.nav-group-head b{
  font-size:12.5px;
  font-weight:650;
  color:inherit;
}
.nav-item:hover,.nav-group-head:hover{
  background:var(--bg-raised);
  color:var(--text-primary);
  border-color:var(--border-subtle);
  transform:translateX(1px);
}
.nav-item:hover>span,.nav-group-head:hover>span{
  background:var(--accent-soft);
  color:var(--accent-text);
}
.nav-item.active{
  background:var(--accent-soft);
  color:var(--text-primary);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-item.active>span{
  background:var(--accent);
  color:var(--text-on-accent);
}
.nav-group.has-active>.nav-group-head{
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-sidebar));
  color:var(--text-primary);
  border-color:color-mix(in srgb,var(--accent) 16%,var(--border));
}
.nav-group.has-active>.nav-group-head>span{
  background:var(--accent-soft);
  color:var(--accent-text);
}
.nav-chevron{
  margin-left:auto;
  color:var(--text-tertiary);
  font-size:13px;
  transition:transform 150ms var(--ease);
}
.nav-group.open .nav-chevron{transform:rotate(0deg)}
.nav-sub{
  margin:2px 0 5px 39px;
  padding:3px 0 3px 9px;
  border-left:1px solid var(--border);
}
.nav-subitem,.nav-third-item{
  position:relative;
  min-height:31px;
  height:31px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:var(--text-secondary);
  font-size:11.75px;
  transition:background-color 140ms var(--ease),color 140ms var(--ease),border-color 140ms var(--ease),transform 140ms var(--ease);
}
.nav-subitem:hover,.nav-third-item:hover{
  background:var(--bg-raised);
  color:var(--text-primary);
  transform:translateX(1px);
}
.nav-subitem.active,.nav-third-item.active{
  background:var(--accent-soft);
  color:var(--accent-text);
  border-color:color-mix(in srgb,var(--accent) 16%,transparent);
  font-weight:650;
}
.nav-third{
  margin:2px 0 2px 8px;
  padding-left:8px;
  border-left:1px solid var(--border-subtle);
}
.sidebottom{
  padding:8px;
  background:var(--bg-sidebar);
  border-top:1px solid var(--border);
}
.sidebottom .user{
  min-height:42px;
  padding:6px;
  border-radius:8px;
  background:var(--bg-raised);
}
.sidebottom .user>i{
  background:var(--accent-soft);
  color:var(--accent-text);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
}
#logout{
  margin-top:5px;
  border-radius:7px;
}
#logout:hover{background:var(--danger-soft);color:var(--danger-text)}

/* ---------- top utility buttons ---------- */
.topbar section{
  gap:7px;
}
#attentionBtn.top-utility,#appearanceBtn.top-utility{
  min-width:82px;
  height:36px;
  min-height:36px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-surface);
  color:var(--text-primary);
  font-size:11.5px;
  font-weight:650;
  box-shadow:none;
  transition:transform 150ms var(--ease),background-color 150ms var(--ease),border-color 150ms var(--ease),box-shadow 150ms var(--ease);
}
#attentionBtn.top-utility .ui-icon,#appearanceBtn.top-utility .ui-icon{
  width:17px;
  height:17px;
  color:var(--accent);
  transition:transform 180ms var(--ease);
}
#attentionBtn.top-utility:hover,#appearanceBtn.top-utility:hover{
  transform:translateY(-1px);
  background:var(--bg-raised);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}
#attentionBtn.top-utility:hover .ui-icon{transform:rotate(-7deg) scale(1.06)}
#appearanceBtn.top-utility:hover .ui-icon{transform:rotate(18deg) scale(1.06)}
#attentionBtn.top-utility:active,#appearanceBtn.top-utility:active{
  transform:translateY(0) scale(.98);
}
.top-pop{
  animation:topPopIn 150ms var(--ease);
}
@keyframes topPopIn{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.notif-menu{
  min-width:340px;
  padding:8px;
}
.notif-menu>b{
  display:block;
  padding:7px 8px 9px;
  color:var(--text-primary);
  font-size:12.5px;
}
.notif-menu>button{
  width:100%;
  min-height:52px;
  padding:8px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-primary);
  text-align:left;
}
.notif-menu>button:hover{background:var(--bg-raised)}
.notif-menu>button span{font-weight:650}
.notif-menu>button small{color:var(--text-secondary)}

/* ---------- overview/drawer readability ---------- */
.fleet-drawer-v5,
.fleet-drawer-v5>header,
.fleet-drawer-tabs,
.fleet-drawer-body,
.drawer-overview-hero,
.service-card,
.smart-summary-v3{
  color:var(--text-primary);
}
.drawer-overview-hero,
.smart-summary-v3,
.service-card{
  background:var(--bg-surface);
  border-color:var(--border);
}
.smart-summary-v3 :where(h3,b,strong),
.drawer-overview-hero :where(h3,b,strong),
.service-card :where(h3,h4,b,strong){
  color:var(--text-primary);
}
.smart-summary-v3 :where(p,small,span),
.drawer-overview-hero :where(p,small,span),
.service-card header :where(p,span){
  color:var(--text-secondary);
}
.smart-summary-v3 .risk-score,
.smart-summary-v3 [class*="risk"]{
  color:var(--text-primary);
}

/* ---------- maintenance / sub-unit forms: no dark-theme residue ---------- */
.subunit-service-card,
.inspection-service-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
}
.subunit-create,
.subunit-active,
.subunit-empty,
.fleet-inspection-form{
  background:var(--bg-raised);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:8px;
}
.subunit-create{
  padding:13px;
}
.subunit-create :where(h4,b,strong),
.subunit-active :where(h4,b,strong),
.fleet-inspection-form :where(b,strong){
  color:var(--text-primary);
}
.subunit-create :where(p,span,label),
.subunit-active :where(p,span,label),
.fleet-inspection-form :where(span,label),
#fleetInspectionMsg{
  color:var(--text-secondary);
}
.subunit-create input,
.subunit-create select,
.subunit-create textarea,
.fleet-inspection-form input,
.fleet-inspection-form select,
.fleet-inspection-form textarea{
  background:var(--bg-inset);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
}
.subunit-create input::placeholder,
.subunit-create textarea::placeholder,
.fleet-inspection-form input::placeholder,
.fleet-inspection-form textarea::placeholder{
  color:var(--text-tertiary);
}
.attachment-drop{
  background:var(--bg-surface);
  border:1px dashed var(--border-strong);
  color:var(--text-primary);
}
.attachment-drop:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.inspection-history-row{
  background:var(--bg-surface);
  border-color:var(--border-subtle);
  color:var(--text-primary);
}

/* ---------- recruiting board ---------- */
.az-recruiting{
  color:var(--text-primary);
}
.az-viewbar,.az-filterline{
  background:var(--bg-surface);
  border-color:var(--border);
}
.az-search,
.az-filterline select{
  background:var(--bg-inset);
  color:var(--text-primary);
  border-color:var(--border);
}
.az-search input{color:var(--text-primary)}
.az-search input::placeholder{color:var(--text-tertiary)}
.board-summary{color:var(--text-secondary)}
.az-modernboard{
  align-items:flex-start;
}
.az-boardcol{
  overflow:hidden;
  background:color-mix(in srgb,var(--stage) 4%,var(--bg-raised));
  border:1px solid color-mix(in srgb,var(--stage) 24%,var(--border));
  border-top:3px solid var(--stage);
  border-radius:9px;
  box-shadow:none;
  transition:border-color 150ms var(--ease),transform 150ms var(--ease),box-shadow 150ms var(--ease);
}
.az-boardcol:hover{
  border-color:color-mix(in srgb,var(--stage) 38%,var(--border));
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.az-boardcol>header{
  min-height:50px;
  padding:8px 9px;
  background:color-mix(in srgb,var(--stage) 10%,var(--bg-surface));
  border-bottom:1px solid color-mix(in srgb,var(--stage) 18%,var(--border));
}
.az-stage-copy .stage-color-dot{
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:50%;
  background:var(--stage);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--stage) 13%,transparent);
}
.az-stage-copy b{color:var(--text-primary);font-weight:700}
.az-stage-copy small{color:var(--text-secondary)}
.stagehead-actions>span{
  background:color-mix(in srgb,var(--stage) 12%,var(--bg-surface));
  color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--stage) 18%,var(--border));
}
.stagehead-actions>button{
  background:var(--bg-surface);
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.stagehead-actions>button:hover{color:var(--text-primary);border-color:var(--border-strong)}
.kanban-cards{
  padding:6px;
  background:transparent;
}
.az-card{
  margin:6px;
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-left:3px solid color-mix(in srgb,var(--stage) 55%,var(--border));
  box-shadow:none;
}
.az-card:hover{
  background:var(--bg-surface);
  border-color:color-mix(in srgb,var(--stage) 38%,var(--border));
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.az-card-head b,.az-card .az-task-copy b{color:var(--text-primary)}
.az-card p,.az-card small,.az-card-meta{color:var(--text-secondary)}
.personchip{color:var(--text-secondary)}
.personchip i{
  background:var(--accent-soft);
  color:var(--accent-text);
}
.duechip{
  background:var(--neutral-soft);
  color:var(--neutral-text);
}
.collapsed-stage-dock-head span,
.collapsed-stage-dock-head small{color:var(--text-secondary)}
.collapsed-stage-card{
  background:color-mix(in srgb,var(--stage) 8%,var(--bg-surface));
  color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--stage) 28%,var(--border));
  border-top:3px solid var(--stage);
  border-radius:9px;
  box-shadow:none;
}
.collapsed-stage-card:hover{
  background:color-mix(in srgb,var(--stage) 12%,var(--bg-surface));
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.collapsed-stage-card-head b,
.collapsed-stage-card-count strong{color:var(--text-primary)}
.collapsed-stage-card-count span{color:var(--text-secondary)}

/* ---------- recruiting drawer: fully theme-aware ---------- */
.task-modal{
  color:var(--text-primary);
}
.task-drawer{
  background:var(--bg-canvas);
  color:var(--text-primary);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}
.task-drawer .drawer-head{
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  color:var(--text-primary);
}
.drawer-breadcrumb span{color:var(--text-secondary)}
.drawer-breadcrumb i{color:var(--text-tertiary)}
.drawer-actions a{
  color:var(--accent-text);
}
.drawer-actions button{
  background:var(--bg-raised);
  color:var(--text-primary);
  border:1px solid var(--border);
}
.drawer-actions button:hover{background:var(--danger-soft);color:var(--danger-text)}
.task-drawer .drawer-title{
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
}
.task-drawer .eyebrow{
  color:var(--accent-text);
}
.task-drawer .title-input{
  background:var(--bg-inset);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:7px;
}
.task-drawer .title-input:focus{
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}
.complete-toggle span{
  background:var(--bg-raised);
  border:1px solid var(--border-strong);
  color:var(--text-tertiary);
}
.complete-toggle input:checked+span{
  background:var(--success-soft);
  border-color:var(--success);
  color:var(--success-text);
}
.drawer-layout{
  background:var(--bg-canvas);
}
.drawer-main,
.drawer-side{
  background:var(--bg-canvas);
  color:var(--text-primary);
}
.drawer-main{border-right:1px solid var(--border)}
.card-section{
  border-bottom:1px solid var(--border);
}
.card-section h4,.section-title h4{
  color:var(--text-primary);
}
.section-title>span{
  background:var(--neutral-soft);
  color:var(--neutral-text);
}
.asana-fields{
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.asana-field{
  min-height:68px;
  padding:10px 12px;
  background:var(--bg-surface);
  color:var(--text-primary);
}
.asana-field>span{
  color:var(--text-tertiary);
}
.asana-field>b,.person-value{
  color:var(--text-primary);
}
.asana-field select,
.asana-field input,
.description-section textarea{
  background:var(--bg-inset);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:6px;
}
.asana-field select:focus,
.asana-field input:focus,
.description-section textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}
.person-value i,
.activity-row>i{
  background:var(--accent-soft);
  color:var(--accent-text);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.subtask-row,
.file-row{
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:7px;
}
.subtask-row:hover,.file-row:hover{background:var(--bg-raised)}
.subtask-row b,.file-row b{color:var(--text-primary)}
.subtask-row small,.file-row small{color:var(--text-secondary)}
.activity-row{
  border-bottom:1px solid var(--border-subtle);
}
.activity-row p{color:var(--text-secondary)}
.activity-row p b{color:var(--text-primary)}
.activity-row small{color:var(--text-tertiary)}
.card-empty{
  color:var(--text-tertiary);
}
.drawer-footer{
  background:var(--bg-surface);
  color:var(--text-secondary);
  border-top:1px solid var(--border);
}
.drawer-footer button:not(.access-primary){
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border);
}
.sync-dot{background:var(--success)}

/* ---------- light-theme explicit safety net ---------- */
[data-theme="light"] .task-drawer,
[data-theme="light"] .drawer-main,
[data-theme="light"] .drawer-side,
[data-theme="light"] .subunit-create,
[data-theme="light"] .fleet-inspection-form{
  color:var(--text-primary);
}
[data-theme="light"] .subunit-create :where(h4,b,strong,label,span,p),
[data-theme="light"] .fleet-inspection-form :where(label,span,b,strong),
[data-theme="light"] .task-drawer :where(h1,h2,h3,h4,b,strong,label){
  text-shadow:none;
}

/* ---------- responsive utility labels ---------- */
@media(max-width:1199px){
  #attentionBtn.top-utility,#appearanceBtn.top-utility{
    min-width:38px;
    width:38px;
    padding:0;
  }
  #attentionBtn.top-utility span,#appearanceBtn.top-utility span{display:none}
}
@media(max-width:899px){
  .nav-item,.nav-group-head{min-height:40px;height:40px}
}
/* SIDEBAR RESPONSIVE CASCADE FIX */
@media (min-width:900px) and (max-width:1199px){
html body #app .shell:not(.collapsed){grid-template-columns:228px minmax(0,1fr)}
html body #app .shell:not(.collapsed)>aside{width:228px}
html body #app .shell:not(.collapsed) .brandtxt,html body #app .shell:not(.collapsed) .nav-item b,html body #app .shell:not(.collapsed) .nav-group-head b,html body #app .shell:not(.collapsed) .nav-group-head i,html body #app .shell:not(.collapsed) .sidebottom .user>div,html body #app .shell:not(.collapsed) .sidebottom>button span{display:block}
html body #app .shell:not(.collapsed) .nav-item,html body #app .shell:not(.collapsed) .nav-group-head{justify-content:flex-start;width:auto;margin:2px 0;padding:0 10px}
html body #app .shell:not(.collapsed) .nav-group>.nav-sub{display:none}
html body #app .shell:not(.collapsed) .nav-group.open>.nav-sub{display:flex}
html body #app .shell.collapsed{grid-template-columns:68px minmax(0,1fr)}
html body #app .shell.collapsed>aside{width:68px}
html body #app .shell.collapsed .brandtxt,html body #app .shell.collapsed .nav-item b,html body #app .shell.collapsed .nav-group-head b,html body #app .shell.collapsed .nav-group-head i,html body #app .shell.collapsed .nav-sub,html body #app .shell.collapsed .sidebottom .user>div,html body #app .shell.collapsed .sidebottom>button span{display:none}
html body #app .shell.collapsed .nav-item,html body #app .shell.collapsed .nav-group-head{justify-content:center;width:46px;margin:2px auto;padding:0}
}
/* GLOBAL DESKTOP COLLAPSED SIDEBAR FIX */
@media (min-width:900px){
html body #app .shell.collapsed{grid-template-columns:68px minmax(0,1fr)}
html body #app .shell.collapsed>aside{width:68px;min-width:68px;max-width:68px;overflow:hidden}
html body #app .shell.collapsed .sidehead{justify-content:center;padding:0 6px}
html body #app .shell.collapsed .sidehead .brand-logo,html body #app .shell.collapsed .brandtxt,html body #app .shell.collapsed .nav-item b,html body #app .shell.collapsed .nav-group-head b,html body #app .shell.collapsed .nav-group-head i,html body #app .shell.collapsed .nav-sub,html body #app .shell.collapsed .nav-third,html body #app .shell.collapsed .side-personal,html body #app .shell.collapsed .sidebottom .user>div,html body #app .shell.collapsed .sidebottom>button span{display:none}
html body #app .shell.collapsed .nav-item,html body #app .shell.collapsed .nav-group-head{justify-content:center;width:46px;min-width:46px;max-width:46px;margin:2px auto;padding:0}
html body #app .shell.collapsed .nav-item>span,html body #app .shell.collapsed .nav-group-head>span{margin:0}
html body #app .shell.collapsed .sidebottom{padding:8px 6px}
html body #app .shell.collapsed .sidebottom .user{justify-content:center;padding:6px 0}
html body #app .shell.collapsed #logout{display:flex;justify-content:center;align-items:center;padding:0}
}

/* COLLAPSED SECONDARY ICON RAIL */
@media (min-width:900px){
  html body #app .collapsed-subrail{
    position:fixed;
    top:var(--topbar-h,56px);
    left:68px;
    bottom:0;
    width:58px;
    z-index:48;
    display:flex;
    flex-direction:column;
    background:var(--bg-sidebar);
    border-right:1px solid var(--border);
    border-left:1px solid var(--border-subtle);
    box-shadow:6px 0 18px rgba(0,0,0,.14);
  }
  html body #app .collapsed-subrail-head{
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--border-subtle);
    color:var(--text-tertiary);
    font-size:0;
  }
  html body #app .collapsed-subrail-head:before{
    content:'•••';
    letter-spacing:2px;
    font-size:10px;
  }
  html body #app .collapsed-subrail-items{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 6px;
    overflow-y:auto;
  }
  html body #app .collapsed-subrail-item{
    position:relative;
    width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
  }
  html body #app .collapsed-subrail-item:hover{
    background:var(--bg-raised);
    color:var(--text-primary);
    border-color:var(--border-subtle);
  }
  html body #app .collapsed-subrail-item.active{
    background:var(--accent-soft);
    color:var(--accent-text);
    border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
    box-shadow:inset 2px 0 0 var(--accent);
  }
  html body #app .collapsed-subrail-item svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  html body #app .collapsed-subrail-item>span{
    position:absolute;
    left:48px;
    top:50%;
    transform:translateY(-50%) translateX(-4px);
    z-index:70;
    min-width:max-content;
    max-width:220px;
    padding:6px 8px;
    border-radius:6px;
    background:var(--bg-overlay);
    border:1px solid var(--border);
    color:var(--text-primary);
    box-shadow:var(--shadow-md);
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 120ms var(--ease),transform 120ms var(--ease);
  }
  html body #app .collapsed-subrail-item:hover>span,
  html body #app .collapsed-subrail-item:focus-visible>span{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}
@media (max-width:899px){
  html body #app .collapsed-subrail{display:none}
}



/* COLORED NAVIGATION ICON SYSTEM · 2026-09-24 */
@media (min-width:900px){
  /* Main collapsed rail: one stable color per operational domain */
  html body #app .nav-group:has(>.nav-group-head[data-group="operationsGroup"]){--rail-color:#3B82F6}
  html body #app .nav-group:has(>.nav-group-head[data-group="fleetGroup"]){--rail-color:#14B8A6}
  html body #app .nav-group:has(>.nav-group-head[data-group="peopleGroup"]){--rail-color:#22C55E}
  html body #app .nav-group:has(>.nav-group-head[data-group="financeGroup"]){--rail-color:#F59E0B}
  html body #app .nav-group:has(>.nav-group-head[data-group="reportingGroup"]){--rail-color:#A855F7}
  html body #app .nav-group:has(>.nav-group-head[data-group="adminGroup"]){--rail-color:#EF4444}

  html body #app .shell.collapsed .nav-group>.nav-group-head>span{
    color:var(--rail-color,var(--text-tertiary));
    background:color-mix(in srgb,var(--rail-color) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--rail-color) 20%,transparent);
    border-radius:9px;
  }
  html body #app .shell.collapsed .nav-group>.nav-group-head:hover>span{
    background:color-mix(in srgb,var(--rail-color) 18%,transparent);
    color:color-mix(in srgb,var(--rail-color) 88%,white);
  }
  html body #app .shell.collapsed .nav-group.has-active>.nav-group-head>span{
    background:color-mix(in srgb,var(--rail-color) 22%,transparent);
    color:var(--rail-color);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--rail-color) 28%,transparent);
  }

  /* Secondary rail: every shortcut gets its own visual identity */
  html body #app .collapsed-subrail-item{--sub-color:#94A3B8}
  html body #app .collapsed-subrail-item[data-collapsed-page="ops"]{--sub-color:#60A5FA}
  html body #app .collapsed-subrail-item[data-collapsed-page="trailer"]{--sub-color:#38BDF8}
  html body #app .collapsed-subrail-item[data-collapsed-page="routes"]{--sub-color:#818CF8}
  html body #app .collapsed-subrail-item[data-collapsed-page="exceptions"]{--sub-color:#F87171}

  html body #app .collapsed-subrail-item[data-collapsed-page="fleet"]{--sub-color:#2DD4BF}
  html body #app .collapsed-subrail-item[data-collapsed-page="fleet-trucks"]{--sub-color:#06B6D4}
  html body #app .collapsed-subrail-item[data-collapsed-page="fleet-trailers"]{--sub-color:#22D3EE}
  html body #app .collapsed-subrail-item[data-collapsed-page="maintenance"]{--sub-color:#F59E0B}
  html body #app .collapsed-subrail-item[data-collapsed-page="tires"]{--sub-color:#A3E635}
  html body #app .collapsed-subrail-item[data-collapsed-page="damage"]{--sub-color:#FB7185}

  html body #app .collapsed-subrail-item[data-collapsed-page="drivers"]{--sub-color:#34D399}
  html body #app .collapsed-subrail-item[data-collapsed-page="hometime"]{--sub-color:#4ADE80}
  html body #app .collapsed-subrail-item[data-collapsed-page="recruiting"]{--sub-color:#2DD4BF}
  html body #app .collapsed-subrail-item[data-collapsed-page="driver-onboarding"]{--sub-color:#22C55E}
  html body #app .collapsed-subrail-item[data-collapsed-page="driver-offboarding"]{--sub-color:#F97316}
  html body #app .collapsed-subrail-item[data-collapsed-page="tasks"]{--sub-color:#84CC16}

  html body #app .collapsed-subrail-item[data-collapsed-page="detention"]{--sub-color:#FBBF24}
  html body #app .collapsed-subrail-item[data-collapsed-page="deductions"]{--sub-color:#F97316}
  html body #app .collapsed-subrail-item[data-collapsed-page="expenses"]{--sub-color:#F59E0B}

  html body #app .collapsed-subrail-item[data-collapsed-page="reports"]{--sub-color:#C084FC}
  html body #app .collapsed-subrail-item[data-collapsed-page="audit"]{--sub-color:#A78BFA}
  html body #app .collapsed-subrail-item[data-collapsed-page="n8n"]{--sub-color:#F472B6}
  html body #app .collapsed-subrail-item[data-collapsed-page="samsara"]{--sub-color:#22D3EE}
  html body #app .collapsed-subrail-item[data-collapsed-page="qm"]{--sub-color:#E879F9}
  html body #app .collapsed-subrail-item[data-collapsed-page="email"]{--sub-color:#60A5FA}
  html body #app .collapsed-subrail-item[data-collapsed-page="maps"]{--sub-color:#4ADE80}
  html body #app .collapsed-subrail-item[data-collapsed-page="meta"]{--sub-color:#FB7185}

  html body #app .collapsed-subrail-item[data-collapsed-page="admin"]{--sub-color:#F87171}
  html body #app .collapsed-subrail-item[data-collapsed-page="roles"]{--sub-color:#FB923C}
  html body #app .collapsed-subrail-item[data-collapsed-page="settings"]{--sub-color:#FCA5A5}

  html body #app .collapsed-subrail-item{
    color:var(--sub-color);
    background:color-mix(in srgb,var(--sub-color) 7%,transparent);
    border-color:color-mix(in srgb,var(--sub-color) 13%,transparent);
  }
  html body #app .collapsed-subrail-item:hover{
    color:var(--sub-color);
    background:color-mix(in srgb,var(--sub-color) 16%,transparent);
    border-color:color-mix(in srgb,var(--sub-color) 28%,transparent);
  }
  html body #app .collapsed-subrail-item.active{
    color:var(--sub-color);
    background:color-mix(in srgb,var(--sub-color) 20%,transparent);
    border-color:color-mix(in srgb,var(--sub-color) 35%,transparent);
    box-shadow:inset 3px 0 0 var(--sub-color);
  }
  html body #app .collapsed-subrail-item svg{
    stroke-width:1.9;
  }
}


/* META REPORTING PROFESSIONAL RESTORE · 2026-09-24 */
.meta-dashboard{
  --meta-combined:var(--ui-primary);
  padding:10px 0 28px;
  color:var(--ui-text);
}
.meta-dashboard .meta-toolbar{
  min-height:72px;
  padding:12px 14px;
  margin-bottom:10px;
  gap:18px;
  border:1px solid var(--ui-line);
  border-radius:10px;
  background:var(--ui-s1);
}
.meta-dashboard .meta-title{gap:13px}
.meta-dashboard .meta-title>span{
  font-size:9px;
  letter-spacing:.13em;
  color:var(--ui-primary);
  padding-right:13px;
  border-right:1px solid var(--ui-line);
}
.meta-dashboard .meta-title h1{font-size:22px;color:var(--ui-text)}
.meta-dashboard .meta-title p{font-size:11px;color:var(--ui-text2)}
.meta-dashboard .meta-controls{gap:7px}
.meta-dashboard .meta-ranges{gap:4px}
.meta-dashboard .meta-ranges button,
.meta-dashboard .meta-table-actions button,
.meta-dashboard .meta-sync-row button,
.meta-dashboard .meta-custom button{
  min-height:31px;
  padding:0 11px;
  font-size:10.5px;
  border:1px solid var(--ui-line);
  border-radius:7px;
  background:var(--ui-s2);
  color:var(--ui-text2);
  box-shadow:none;
}
.meta-dashboard .meta-ranges button:hover,
.meta-dashboard .meta-table-actions button:hover,
.meta-dashboard .meta-sync-row button:hover,
.meta-dashboard .meta-custom button:hover{
  background:var(--ui-hover);
  color:var(--ui-text);
}
.meta-dashboard .meta-ranges button.active{
  background:var(--ui-select);
  border-color:var(--ui-focus);
  color:var(--ui-text);
  box-shadow:inset 0 -2px var(--ui-focus);
}

.meta-dashboard .meta-kpis{
  gap:10px;
  margin-bottom:10px;
}
.meta-dashboard .meta-kpis article{
  min-height:86px;
  padding:12px 14px;
  border:1px solid var(--ui-line);
  border-radius:10px;
  background:var(--ui-s1);
  color:var(--ui-text);
  box-shadow:none;
}
.meta-dashboard .meta-kpis article:nth-child(n) strong{color:var(--ui-text)}
.meta-dashboard .meta-kpis span,
.meta-dashboard .meta-kpis small{
  color:var(--ui-text2);
  font-size:9.5px;
}
.meta-dashboard .meta-kpis strong{
  font-size:25px;
  margin:7px 0 5px;
}

.meta-dashboard .meta-account-cards{
  gap:10px;
  margin-bottom:10px;
}
.meta-dashboard .meta-account-cards>button{
  padding:12px 14px;
  border:1px solid var(--ui-line);
  border-radius:10px;
  background:var(--ui-s1);
  color:var(--ui-text);
  box-shadow:none;
}
.meta-dashboard .meta-account-cards>button:first-child,
.meta-dashboard .meta-account-cards>button:nth-child(2){box-shadow:none}
.meta-dashboard .meta-account-cards>button:hover{background:var(--ui-hover)}
.meta-dashboard .meta-account-cards>button.active{
  background:var(--ui-select);
  border-color:var(--ui-focus);
}
.meta-dashboard .meta-account-cards header b{font-size:13px}
.meta-dashboard .meta-account-cards header>span{font-size:9px;color:var(--ui-text3)}
.meta-dashboard .meta-account-metrics{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:11px;
}
.meta-dashboard .meta-account-metrics section{
  padding-right:13px;
  border-right:1px solid var(--ui-line);
}
.meta-dashboard .meta-account-metrics section+section{padding-left:13px}
.meta-dashboard .meta-account-metrics small{font-size:8.5px;color:var(--ui-text3)}
.meta-dashboard .meta-account-metrics strong{font-size:18px;margin-top:3px}

.meta-dashboard .meta-charts-row{
  gap:10px;
  margin-bottom:10px;
}
.meta-dashboard .meta-panel{
  margin-bottom:10px;
  border:1px solid var(--ui-line);
  border-radius:10px;
  background:var(--ui-s1);
  color:var(--ui-text);
  box-shadow:none;
}
.meta-dashboard .meta-panel>header{
  padding:11px 13px;
  border-bottom:1px solid var(--ui-line);
  background:var(--ui-s1);
}
.meta-dashboard .meta-panel h3{font-size:13.5px;color:var(--ui-text)}
.meta-dashboard .meta-panel header p{font-size:9.5px;color:var(--ui-text2)}
.meta-dashboard .meta-chart-kicker{font-size:8.7px;color:var(--ui-text3)}
.meta-dashboard .meta-chart-shell{padding:8px 12px 7px}
.meta-dashboard .meta-chart-legend{
  min-height:24px;
  gap:13px;
  padding-right:2px;
  font-size:9.5px;
  color:var(--ui-text2);
}
.meta-dashboard .meta-chart-legend i{width:14px;height:3px}
.meta-dashboard .meta-chart-scroll{overflow-x:auto;overflow-y:hidden}
.meta-dashboard .meta-line-chart{
  width:100%;
  min-width:720px;
  height:300px;
}
.meta-dashboard .meta-gridline{
  stroke:var(--ui-line2);
  stroke-opacity:.9;
  stroke-width:1;
}
.meta-dashboard .meta-y-label,
.meta-dashboard .meta-x-label{
  fill:var(--ui-text3);
  font-size:10px;
}
.meta-dashboard .meta-line{stroke-width:2.5}
.meta-dashboard .meta-line.combined{stroke:var(--meta-combined)}
.meta-dashboard .meta-dot{
  stroke:var(--ui-s1);
  stroke-width:2;
}
.meta-dashboard .meta-dot.combined{fill:var(--meta-combined)}
.meta-dashboard .meta-point-label{
  font-size:10.5px;
  font-weight:800;
  paint-order:stroke;
  stroke:var(--ui-s1);
  stroke-width:3px;
  stroke-linejoin:round;
}
.meta-dashboard .meta-point-label.combined{fill:var(--meta-combined)}

.meta-dashboard .meta-table-wrap{background:var(--ui-s1)}
.meta-dashboard .meta-table thead th{
  background:var(--ui-s2);
  border-color:var(--ui-line2);
}
.meta-dashboard .meta-table th button{color:var(--ui-text2)}
.meta-dashboard .meta-table td{
  height:40px;
  background:var(--ui-s1);
  border-color:var(--ui-line);
  color:var(--ui-text);
  font-size:10.7px;
}
.meta-dashboard .meta-table tbody tr:hover td{background:var(--ui-hover)}
.meta-dashboard .meta-custom{
  background:var(--ui-s1);
  border-color:var(--ui-line);
}
.meta-dashboard .meta-custom input,
.meta-dashboard .meta-table-actions select{
  background:var(--ui-input);
  border-color:var(--ui-line2);
  color:var(--ui-text);
}

/* Dark themes: keep charts readable instead of black-on-dark. */
:root[data-theme="graphite"] .meta-dashboard,
:root[data-theme="slate"] .meta-dashboard,
:root[data-theme="steel"] .meta-dashboard{
  --meta-east:#66B7F3;
  --meta-front:#B9A0F5;
  --meta-combined:#65C7D0;
}
:root[data-theme="graphite"] .meta-dashboard .meta-gridline,
:root[data-theme="slate"] .meta-dashboard .meta-gridline,
:root[data-theme="steel"] .meta-dashboard .meta-gridline{
  stroke:color-mix(in srgb,var(--ui-text3) 26%,transparent);
}

@media(max-width:1180px){
  .meta-dashboard .meta-charts-row{grid-template-columns:1fr}
}
@media(max-width:700px){
  .meta-dashboard .meta-toolbar{align-items:flex-start;flex-direction:column}
  .meta-dashboard .meta-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meta-dashboard .meta-account-cards{grid-template-columns:1fr}
  .meta-dashboard .meta-line-chart{height:280px}
}
/* END META REPORTING PROFESSIONAL RESTORE */