/* =========================================================
   Azaiba 2 Workshop Dashboard
   Design tokens — light operations/SaaS aesthetic.
   ========================================================= */
:root{
  --bg:            #F5F7FB;
  --panel:         #FFFFFF;
  --panel-raised:  #F8FAFC;
  --border:        #DCE3EC;
  --border-soft:   #E8EEF5;

  --brand:         #D81E26;
  --brand-text:    #FFFFFF;
  --brand-dim:     #FBE7E8;
  --brand-glow:    #E33A42;

  --amber:         #B7791F;
  --amber-text:    #5F370E;
  --amber-dim:     #FEF3C7;
  --green:         #15803D;
  --green-dim:     #DCFCE7;
  --red:           #B91C1C;
  --red-dim:       #FEE2E2;

  --text:          #334155;
  --text-bright:   #0F172A;
  --text-dim:      #64748B;
  --text-faint:    #94A3B8;

  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-drawer: -24px 0 54px rgba(15,23,42,0.18);
  --shadow-soft: 0 12px 30px rgba(15,23,42,0.08);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hidden{ display:none !important; }

button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea{ font-family: inherit; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-raised);
}
.topbar-brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:30px; height:30px;
  background: var(--bg);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:12px;
  color: var(--brand-glow);
  letter-spacing: 0.3px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:17px; color: var(--text-bright); letter-spacing:0.2px; }
.brand-sub{ font-size:10px; color: var(--text-dim); text-transform:uppercase; letter-spacing:1.2px; }

.topbar-middle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-width: 0;
}

.topbar-status{
  display:flex; align-items:center; gap:7px;
  font-size:12px; color: var(--text-dim);
}
.conn-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--text-faint);
}
.conn-dot.online{ background: var(--green); }
.conn-dot.offline{ background: var(--red); }
.topbar-clock{
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(15,23,42,0.04);
}

.top-quick-nav{
  display:flex;
  align-items:center;
  gap: 6px;
  min-width: 0;
}
.top-nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.top-nav-btn:hover{
  background: var(--panel-raised);
  border-color: var(--text-faint);
  color: var(--text-bright);
}

.topbar-right{ display:flex; align-items:center; gap:12px; }
.updates-bell{
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.updates-bell:hover{ background:var(--panel-raised); border-color:var(--text-faint); color:var(--text-bright); }
.updates-bell svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.updates-unread-dot{
  position:absolute;
  top:2px;
  right:2px;
  width:10px;
  height:10px;
  border:2px solid var(--panel-raised);
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 2px rgba(216,30,38,0.16);
}
.updates-bell.has-unread svg{ color:var(--text-bright); }
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover{
  border-color: var(--text-faint);
  color: var(--text-bright);
}
.theme-toggle-track{
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #CBD5E1;
  transition: background .15s ease;
}
.theme-toggle-thumb{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(15,23,42,0.25);
  transition: transform .18s ease;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-track{
  background: var(--brand);
}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{
  transform: translateX(16px);
}
.theme-toggle-text{ min-width: 32px; text-align:left; }
.role-chip{
  font-size:11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.btn-ghost{
  font-size:13px; color: var(--text-dim);
  padding: 7px 12px; border-radius: var(--radius);
  border: 1px solid var(--border);
  text-decoration: none;
  display: inline-block;
  transition: color .15s ease, border-color .15s ease;
}
.btn-ghost:hover{ color: var(--text-bright); border-color: var(--text-faint); }

/* =========================================================
   ROLE SELECT SCREEN
   ========================================================= */
.screen{ width:100%; }
.screen-select{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}
.select-wrap{ text-align:center; max-width: 980px; position: relative; z-index: 1; }

/* =========================================================
   ALLOY WHEEL BACKGROUND DECORATION
   A faint line-art alloy wheel — tyre, tread blocks, rim,
   twin five-spoke design, drilled brake disc, lug nuts and a
   brand-red centre cap — rotating slowly in the corner. Sits
   behind the tiles, large and partially off-screen so only a
   slice reads, like a glimpse of a car on the lift rather
   than a graphic competing for attention.
   ========================================================= */
.wheel-decoration{
  position: absolute;
  bottom: -180px;
  right: -180px;
  width: 720px;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.wheel-decoration .wheel-tyre-outer{
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}
.wheel-decoration .wheel-tyre-inner{
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
}
.wheel-decoration .wheel-spin{
  transform-origin: 360px 360px;
  animation: wheelSpin 32s linear infinite;
}
.wheel-decoration .wheel-tread{
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 26;
  stroke-dasharray: 14 36;
  opacity: 0.35;
}
.wheel-decoration .wheel-rim{
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 3;
}
.wheel-decoration .wheel-rim-inner{
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
}
.wheel-decoration .wheel-disc{
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
}
.wheel-decoration .wheel-disc-holes{
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 9;
  stroke-dasharray: 5 24;
  opacity: 0.4;
}
.wheel-decoration .wheel-spoke line{
  stroke: var(--text-faint);
  stroke-width: 13;
  stroke-linecap: round;
  opacity: 0.55;
}
.wheel-decoration .wheel-hubplate{
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 3;
}
.wheel-decoration .wheel-lug{
  fill: var(--text-faint);
  opacity: 0.6;
}
.wheel-decoration .wheel-cap{
  fill: var(--brand);
  opacity: 0.72;
}
@keyframes wheelSpin{
  to { transform: rotate(360deg); }
}

@media (max-width: 768px){
  .wheel-decoration{ width: 420px; height: 420px; bottom: auto; top: -34px; right: -168px; opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce){
  .wheel-decoration .wheel-spin{ animation: none; }
  .warranty-rejected-row,
  .warranty-rejection-alert{ animation: none; }
}

.eyebrow{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.select-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  color: var(--text-bright);
  margin: 0 0 38px;
  letter-spacing: 0.2px;
}

.role-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){ .role-tiles{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .role-tiles{ grid-template-columns: 1fr; } }

.advisor-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){ .advisor-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px){ .advisor-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .advisor-tiles{ grid-template-columns: 1fr; } }

.advisor-tile{
  min-height: 154px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.advisor-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(216,30,38,0.35);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12);
}
.advisor-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand-dim);
  color: var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
}
.advisor-name{
  color: var(--text-bright);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.advisor-code{
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.manager-announcement{
  width: min(720px, 100%);
  margin: 20px auto 0;
  padding: 16px 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  text-align: left;
}
.manager-announcement-label{
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.manager-announcement-text{
  margin: 0;
  color: var(--text-bright);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =========================================================
   GATE SCREEN — shared centered card pattern, used by the
   main app's login screen and the TV admin password gate.
   ========================================================= */
.gate-screen{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.gate-box{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 380px;
  text-align:center;
}
.gate-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--text-bright);
  margin: 4px 0 20px;
}
.gate-input{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.gate-input:focus{ border-color: var(--brand); }
.gate-error{ color: var(--red); font-size: 12.5px; margin-top: 12px; }

.role-tile{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 26px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  transition: border-color .15s ease, background .15s ease;
}
.role-tile:hover{
  border-color: var(--brand);
  background: var(--panel-raised);
}
.role-tile:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

.tile-bracket{ display:none; } /* corner brackets removed — replaced by the ticket-icon + hover border as the signal */

.tile-icon{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: 19px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1.5px solid var(--border);
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 4px;
  transition: color .15s ease, border-color .15s ease;
}
.role-tile:hover .tile-icon{ color: var(--brand-glow); border-color: var(--brand-dim); }
.tile-label{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 20px;
  color: var(--text-bright);
}
.tile-desc{ font-size: 12.5px; color: var(--text-dim); }

/* =========================================================
   WORKSPACE SCREEN
   ========================================================= */
.screen-workspace{ padding: 28px 32px 56px; max-width: 1400px; margin: 0 auto; }
.workspace-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 14px;
}
.workspace-head-left{ flex-shrink: 0; }
.workspace-head-middle{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
}
.workspace-head-middle.hidden{ display: none; }

/* Ready-vehicle exclude toggle */
.ready-toggle-label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ready-toggle-text{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.ready-toggle-switch{ position: relative; flex-shrink: 0; }
.ready-toggle-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ready-toggle-track{
  display: block;
  width: 42px;
  height: 24px;
  background: #CBD5E1;
  border-radius: 999px;
  position: relative;
  transition: background .2s ease;
}
.ready-toggle-switch input:checked ~ .ready-toggle-track{ background: var(--brand); }
.ready-toggle-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform .2s ease;
}
.ready-toggle-switch input:checked ~ .ready-toggle-track .ready-toggle-thumb{
  transform: translateX(18px);
}

.workspace-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--text-bright);
  margin: 2px 0 0;
}

.workspace-actions{
  display:flex; align-items:center; gap:10px;
}
.search-input{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 13px;
  color: var(--text-bright);
  font-size: 13px;
  width: 220px;
  outline: none;
  transition: border-color .15s ease;
}
.search-input::placeholder{ color: var(--text-faint); }
.search-input:focus{ border-color: var(--brand); }

.btn-primary{
  background: var(--brand);
  color: var(--brand-text);
  font-weight:600;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: filter .15s ease;
}
.btn-primary:hover{ filter: brightness(1.08); }

.btn-secondary{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight:500;
  font-size: 13px;
  padding: 10px 15px;
  border-radius: var(--radius);
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-secondary:hover{ border-color: var(--text-faint); color: var(--text-bright); }

.btn-danger{
  color: var(--red);
  border: 1px solid var(--red-dim);
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius);
  transition: background .15s ease;
}
.btn-danger:hover{ background: rgba(232,113,106,0.08); }

/* filter chips: quiet by default, amber is the ONLY active-state signal */
.filter-bar{
  display:flex; align-items:center; gap:7px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-chip{
  font-size: 12px; font-weight:500;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: transparent;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-chip:hover{ border-color: var(--text-faint); color: var(--text); }
.filter-chip.active{
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-text);
  font-weight: 600;
}

/* =========================================================
   TABLE
   ========================================================= */
.table-shell{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-top-scroll{
  position: sticky;
  top: 58px;
  z-index: 20;
  overflow-x: auto;
  overflow-y: hidden;
  height: 20px;
  margin: 0 0 12px;
  border: 1px solid rgba(100,116,139,0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(100,116,139,0.08), rgba(148,163,184,0.06));
  box-shadow: 0 0 0 8px var(--bg);
  scrollbar-width: thin;
  scrollbar-color: #94A3B8 rgba(148,163,184,0.14);
}
.table-top-scroll.hidden{ display:none; }
.table-top-scroll-inner{
  height: 1px;
}
.table-top-scroll::-webkit-scrollbar{
  height: 14px;
}
.table-top-scroll::-webkit-scrollbar-track{
  background: rgba(148,163,184,0.14);
  border-radius: 999px;
}
.table-top-scroll::-webkit-scrollbar-thumb{
  min-width: 90px;
  border: 3px solid rgba(255,255,255,0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, #94A3B8, #64748B);
}
.table-top-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(90deg, #64748B, #475569);
}
.job-table{
  width:100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 13px;
}
.job-table thead th{
  text-align:left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.job-table tbody tr{
  border-bottom: 1px solid var(--border-soft);
  transition: background .12s ease;
  cursor: pointer;
}
.job-table tbody tr:last-child{ border-bottom:none; }
.job-table tbody tr:hover{ background: var(--panel-raised); }
.job-table tbody td{
  padding: 9px 14px;
  vertical-align: middle;
}
.job-table tbody td:first-child{
  border-left: 3px solid var(--text-faint);
}
.row-status-amber td:first-child{ border-left-color: var(--amber); }
.row-status-green td:first-child{ border-left-color: var(--green); }
.row-status-red td:first-child{ border-left-color: var(--red); }
.warranty-rejected-row{
  animation: warrantyRejectPulse 1.6s ease-in-out infinite;
}
.warranty-rejected-row td:first-child{
  border-left-color: var(--red) !important;
}
.warranty-rejection-alert{
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--red-dim);
  color: var(--red);
  font-weight: 800;
  line-height: 1.35;
  animation: warrantyRejectTextPulse 1.1s ease-in-out infinite;
}
@keyframes warrantyRejectPulse{
  0%, 100%{ background: transparent; }
  50%{ background: rgba(185,28,28,0.08); }
}
@keyframes warrantyRejectTextPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(185,28,28,0.12); }
  50%{ box-shadow: 0 0 0 4px rgba(185,28,28,0.12); }
}

.cell-mono{ font-family: var(--font-mono); color: var(--text); }
.cell-dim{ color: var(--text-faint); }

/* signature: ticket-stub treatment for WIP No / Reg No — a torn
   carbon-copy job-card edge. The one recurring motif across job
   cards, courtesy loans, and the TV board. */
.cell-mono.ticket, td .ticket{
  display:inline-flex; align-items:center;
  font-family: var(--font-mono); font-weight:600; color: var(--text-bright);
  background: var(--panel-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 1px dashed var(--text-faint);
  border-right: 1px dashed var(--text-faint);
  padding: 3px 9px;
  font-size: 12.5px;
}

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11.5px; font-weight:500;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.status-pill::before{ content:''; width:5px; height:5px; border-radius:50%; }
.status-pill.amber{ background: rgba(244,169,60,0.12); color: var(--amber); }
.status-pill.amber::before{ background: var(--amber); }
.status-pill.green{ background: rgba(127,217,184,0.12); color: var(--green); }
.status-pill.green::before{ background: var(--green); }
.status-pill.red{ background: rgba(232,113,106,0.12); color: var(--red); }
.status-pill.red::before{ background: var(--red); }
.status-pill.neutral{ background: rgba(130,141,152,0.12); color: var(--text-dim); }
.status-pill.neutral::before{ background: var(--text-faint); }
.status-with-action{
  min-width:210px;
}

.updates-screen{ max-width:1180px; margin:0 auto; }
.updates-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.updates-page-sub{ margin-top:6px; color:var(--text-dim); font-size:13px; }
.updates-retention-note{ flex:0 0 auto; padding:7px 10px; border:1px solid var(--border-soft); border-radius:999px; background:var(--panel-raised); color:var(--text-dim); font-size:11px; font-weight:700; }
.updates-list{ border-top:1px solid var(--border-soft); }
.update-entry{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; padding:24px 4px; border-bottom:1px solid var(--border-soft); }
.update-entry-new{ background:linear-gradient(90deg, rgba(216,30,38,0.045), transparent 58%); }
.update-entry-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.update-entry-meta time{ color:var(--text-dim); font-family:var(--font-mono); font-size:11px; }
.update-category{ color:var(--brand); font-size:10px; font-weight:800; text-transform:uppercase; }
.update-title-row{ display:flex; align-items:center; gap:10px; }
.update-title-row h3{ color:var(--text-bright); font-size:17px; }
.update-new-label{ padding:3px 7px; border-radius:999px; background:var(--brand); color:#FFFFFF; font-size:9px; font-weight:800; text-transform:uppercase; }
.update-entry-copy p{ max-width:760px; margin-top:8px; color:var(--text); font-size:13px; line-height:1.65; }
.status-action-wrap{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.whatsapp-ready-link{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 8px;
  border:1px solid rgba(22,163,74,0.32);
  border-radius:4px;
  background:rgba(22,163,74,0.09);
  color:#15803d;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.whatsapp-ready-link:hover{
  border-color:#16a34a;
  background:rgba(22,163,74,0.16);
}
.whatsapp-ready-link:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:2px;
}
.whatsapp-missing{
  color:var(--text-dim);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.ready-contact-actions{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.contact-state,
.contact-confirm-btn{
  min-height:24px;
  padding:3px 7px;
  border-radius:4px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.contact-state{ display:inline-flex; align-items:center; }
.contact-pending{
  border:1px solid var(--border);
  background:var(--panel-raised);
  color:var(--text-dim);
}
.contact-confirmed{
  border:1px solid rgba(22,163,74,0.28);
  background:rgba(22,163,74,0.10);
  color:#15803d;
}
.contact-confirm-btn{
  border:1px solid rgba(217,119,6,0.35);
  background:rgba(217,119,6,0.10);
  color:#b45309;
  cursor:pointer;
}
.contact-confirm-btn:hover{ background:rgba(217,119,6,0.18); }
.contact-confirm-btn:disabled{ cursor:wait; opacity:.6; }

.empty-state{ padding: 64px 20px; text-align:center; }
.empty-title{ font-family: var(--font-display); font-size:19px; font-weight:600; color: var(--text-bright); margin:0 0 6px; }
.empty-sub{ color: var(--text-dim); font-size: 13px; margin:0; }

/* =========================================================
   DRAWER (Add / Edit job card)
   ========================================================= */
.drawer-overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,0.55);
  display:flex; justify-content:flex-end;
  z-index: 100;
}
.drawer{
  width: min(460px, 100%);
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-drawer);
  display:flex; flex-direction:column;
  animation: slideIn .18s ease;
}
@keyframes slideIn{ from{ transform: translateX(20px); opacity:0; } to{ transform: translateX(0); opacity:1; } }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-head h3{ font-family: var(--font-display); font-size: 19px; font-weight:600; color: var(--text-bright); margin:0; }
.btn-icon{ color: var(--text-dim); font-size: 16px; padding:4px; }
.btn-icon:hover{ color: var(--text-bright); }

.drawer-body{ padding: 18px 20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:15px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field-checkbox{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-raised);
}
.contact-history-panel{
  display:grid;
  gap:8px;
  margin-top:8px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel-raised);
}
.contact-history-panel h4{
  margin:0;
  color:var(--text-bright);
  font-size:13px;
}
.contact-history-row{
  display:grid;
  gap:2px;
  padding-top:8px;
  border-top:1px solid var(--border-soft);
}
.contact-history-row strong{ color:var(--text); font-size:11px; }
.contact-history-row span,
.contact-history-empty{ margin:0; color:var(--text-dim); font-size:10px; }
.field-checkbox label{ margin:0; }
.field-checkbox input[type="checkbox"]{
  width:20px;
  height:20px;
  min-height:0;
  padding:0;
  accent-color:var(--brand);
}
.field-checkbox .field-hint{ grid-column:1 / -1; }
.field label{
  font-size: 11px; text-transform:uppercase; letter-spacing:0.6px;
  color: var(--text-dim); font-weight:600;
}
.field input, .field select, .field textarea{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  color: var(--text-bright);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brand); }
.field textarea{ resize: vertical; min-height: 64px; }
.field-mono input{ font-family: var(--font-mono); }
.job-type-value{ display:none; }
.job-type-options{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.field .job-type-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text-bright);
  cursor:pointer;
  font-size:12px;
  line-height:1.25;
  text-transform:none;
}
.field .job-type-option input{
  width:16px;
  height:16px;
  margin:0;
  padding:0;
  accent-color:var(--brand);
  flex:0 0 auto;
}
.field .job-type-option:has(input:checked){
  border-color:var(--brand);
  background:var(--brand-soft);
}
@media (max-width: 520px){
  .job-type-options{ grid-template-columns:1fr; }
}
.field-locked input, .field-locked select{
  opacity: 0.5; cursor: not-allowed;
}
.field-hint{ font-size: 11px; color: var(--text-faint); }
.technician-picker{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.technician-selected{
  display:flex;
  flex-wrap:wrap;
  gap: 7px;
  min-height: 30px;
  align-items:center;
}
.technician-selected-empty{
  color: var(--text-faint);
  font-size: 12px;
}
.technician-selected-pill{
  border: 1px solid rgba(216,30,38,0.22);
  background: var(--brand-dim);
  color: var(--brand);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  cursor:pointer;
}
.technician-search{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 10px 11px;
  font-size: 13px;
  outline:none;
}
.technician-search:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(216,30,38,0.10);
}
.technician-options{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow:auto;
  padding-right: 4px;
}
.technician-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 8px 10px;
  cursor:pointer;
  text-align:left;
}
.technician-option span{
  font-size: 12px;
  font-weight: 800;
}
.technician-option small{
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}
.technician-option:hover,
.technician-option.selected{
  border-color: rgba(216,30,38,0.36);
  background: var(--brand-dim);
  color: var(--brand);
}

.wip-dup-warn{
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  padding: 8px 10px;
  margin: 0;
  line-height: 1.4;
}

/* Glowing highlight for the Current Status field in the drawer —
   makes it immediately visible when the drawer opens */
.field-status-highlight select{
  border-color: var(--brand) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(216,30,38,0.12), 0 0 12px rgba(216,30,38,0.10);
  background: rgba(216,30,38,0.02);
  font-weight: 700;
  color: var(--text-bright);
}
.field-status-highlight label{
  color: var(--brand);
  font-weight: 800;
}

.courtesy-block{
  border-top: 1px solid var(--border);
  padding-top: 15px;
  margin-top: 3px;
}
.courtesy-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; flex-wrap: wrap;
}
.courtesy-toggle-row > span{ font-size: 13px; color: var(--text); }
.courtesy-toggle-btns{ display:flex; gap: 6px; }
.courtesy-issue-area select{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  color: var(--text-bright);
  font-size: 13px;
}
.courtesy-active-info{
  background: var(--panel-raised);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.drawer-foot{
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-foot-right{ display:flex; gap:10px; }

/* =========================================================
   TV DETAIL MODAL
   ========================================================= */
.tv-detail-overlay{
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.tv-detail-modal{
  width: min(1040px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.tv-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.tv-detail-head h3{
  margin: 2px 0 4px;
  color: var(--text-bright);
  font-size: 20px;
}
.tv-detail-sub{
  margin:0;
  color: var(--text-dim);
  font-size: 13px;
}
.tv-detail-table{
  overflow:auto;
  padding: 0 22px 18px;
}
.tv-detail-table table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tv-detail-table th{
  position: sticky;
  top: 0;
  background: #F8FAFC;
  color: var(--text-dim);
  text-align:left;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 11px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tv-detail-table td{
  color: var(--text);
  padding: 11px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.technician-recommendations{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
}
.technician-recommendations > p{
  grid-column:1 / -1;
  margin:0;
  color:var(--text-dim);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.technician-recommendation{
  display:grid;
  gap:2px;
  min-width:0;
  padding:8px;
  border:1px solid rgba(22,163,74,0.28);
  border-radius:6px;
  background:rgba(22,163,74,0.07);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.technician-recommendation strong{ overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.technician-recommendation span{ color:var(--text-dim); font-size:9px; }
.technician-recommendation:hover,
.technician-recommendation.selected{ border-color:#16a34a; background:rgba(22,163,74,0.14); }
@media (max-width:520px){ .technician-recommendations{ grid-template-columns:1fr; } }
.report-table-link{
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.report-table-link:hover{ color: var(--text-bright); }
.report-table-link:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
.wip-log-search{
  max-width:620px;
  padding:18px;
  border:1px solid var(--border-soft);
  background:var(--panel-raised);
}
.wip-log-search > label{
  display:block;
  margin-bottom:7px;
  color:var(--text-dim);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}
.wip-log-search-row{
  display:flex;
  gap:10px;
}
.wip-log-search-row input{
  min-width:0;
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text-bright);
  font-size:14px;
  text-transform:uppercase;
}
.wip-log-message{
  min-height:18px;
  margin:8px 0 0;
  color:var(--red);
  font-size:12px;
}
.service-report-picker{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  max-width:780px;
}
.service-report-choice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:74px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel-raised);
  color:var(--text-bright);
  cursor:pointer;
  text-align:left;
}
.service-report-choice:hover{
  border-color:var(--brand);
  background:var(--brand-soft);
}
.service-report-choice span{ font-size:13px; font-weight:700; }
.service-report-choice strong{ color:var(--brand); font-size:24px; }
.service-report-choice small{ color:var(--text-dim); font-size:11px; }
.yesterday-report-picker{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width:520px){
  .wip-log-search-row{ align-items:stretch; flex-direction:column; }
  .service-report-picker,
  .yesterday-report-picker{ grid-template-columns:1fr; }
}
.tv-detail-foot{
  display:flex;
  justify-content:flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
  background: #FBFCFE;
}
@media (max-width: 720px){
  .tv-detail-overlay{ padding: 12px; align-items: stretch; }
  .tv-detail-modal{ max-height: calc(100vh - 24px); }
  .tv-detail-head{ padding: 16px; }
  .tv-detail-table{ padding: 0 16px 14px; }
  .tv-detail-foot{ padding: 12px 16px; }
}

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text-bright);
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 200;
}
.toast.error{ border-color: var(--red-dim); color: var(--red); }
.toast.success{ border-color: var(--green-dim); color: var(--green); }


.version-banner{
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 360px;
  background: var(--panel-raised);
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  color: var(--text-bright);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
}
.version-banner.hidden{ display: none; }
.version-banner-title{
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--amber);
}
.version-banner-sub{
  font-size: 12.5px;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}
.version-banner-sub span{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-bright);
}
.version-banner #versionBannerRefreshNow,
#versionBannerRefreshNow{
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12.5px;
}

@media (max-width: 700px){
  .version-banner{
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }
  #versionBannerRefreshNow{ width: 100%; }
}

/* =========================================================
   COURTESY CAR — FLEET GRID
   ========================================================= */
.fleet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 13px;
  margin-bottom: 8px;
}
.fleet-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--text-faint);
  border-radius: var(--radius);
  padding: 15px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.fleet-card:hover{ border-color: var(--text-faint); }
.fleet-card-in{ border-top-color: var(--green); }
.fleet-card-out{ border-top-color: var(--red); }
.fleet-card-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 9px;
}
.fleet-reg{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-bright);
  letter-spacing: 0.3px;
}
.fleet-reg-pending{ color: var(--amber); }
.fleet-pending-note{
  font-size: 11px;
  color: var(--amber);
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.fleet-status-pill{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 100px;
}
.fleet-status-pill.green{ background: rgba(127,217,184,0.14); color: var(--green); }
.fleet-status-pill.red{ background: rgba(232,113,106,0.14); color: var(--red); }
.fleet-model{
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
}
.fleet-meta{ font-size: 11.5px; color: var(--text-dim); margin: 0; }
.fleet-loan-note{
  font-size: 11.5px;
  color: var(--amber);
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

.section-divider{
  margin: 34px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.section-divider .workspace-title{ margin-top: 4px; }

/* =========================================================
   REPORTS
   ========================================================= */
.report-summary-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.report-summary-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  border-left: 4px solid var(--border);
}
.report-summary-clickable{
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.report-summary-clickable:hover{
  transform: translateY(-1px);
  border-color: rgba(216,30,38,0.35);
  box-shadow: 0 16px 36px rgba(15,23,42,0.10);
}
.report-kpi-green{ border-left-color: var(--green); }
.report-kpi-amber{ border-left-color: var(--amber); }
.report-kpi-red{ border-left-color: var(--red); }
.report-kpi-neutral{ border-left-color: var(--brand); }
.report-contact-card{
  border-width:2px;
  border-left-width:5px;
  box-shadow:0 12px 28px rgba(15,23,42,0.10);
}
.report-contact-card .report-summary-label{
  color:var(--text-bright);
  font-weight:800;
}
.report-summary-label{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.report-summary-value{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--text-bright);
  line-height: 1;
}
.report-summary-sub{
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 8px 0 0;
}

.report-toolbar{
  flex-wrap: wrap;
  justify-content: flex-end;
}
.report-filter-select{
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  padding: 9px 11px;
  outline: none;
}
.report-filter-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(216,30,38,0.10);
}
.report-date-filter{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.report-date-filter .report-filter-select{
  min-width: 150px;
}
.report-jump-menu{
  position: sticky;
  top: 58px;
  z-index: 18;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
}
.report-jump-menu a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.report-jump-menu a:hover{
  border-color: rgba(216,30,38,0.36);
  color: var(--brand);
  background: rgba(216,30,38,0.06);
}
#reportSummaryRow,
#reportAiBrief,
#reportDailyTargets,
#reportWorkshopFlow,
#reportTechnicianPerformance,
#reportOperationalIntelligence,
#reportCourtesyFleet,
#reportActionLists{
  scroll-margin-top: 128px;
}
.report-section-divider{
  margin-top: 28px;
}
.daily-target-panel{
  margin:18px 0 28px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:0 12px 30px rgba(15,23,42,0.07);
}
.daily-target-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.daily-target-head .workspace-title{ font-size:22px; }
.daily-target-overall{
  display:grid;
  place-items:center;
  width:76px;
  height:58px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:6px;
  font:800 24px/1 var(--font-display);
}
.daily-target-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.daily-target-card{
  display:flex;
  min-width:0;
  padding:16px;
  border:1px solid var(--border-soft);
  border-top:3px solid #94a3b8;
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  flex-direction:column;
  text-align:left;
  cursor:pointer;
}
.daily-target-card:hover{ border-color:var(--brand); }
.daily-target-label{ min-height:34px; color:var(--text-dim); font-size:11px; font-weight:800; text-transform:uppercase; }
.daily-target-numbers{ display:flex; align-items:baseline; gap:7px; }
.daily-target-numbers strong{ color:var(--text-bright); font:800 30px/1 var(--font-display); }
.daily-target-numbers small,.daily-target-foot small,.daily-target-detail{ color:var(--text-dim); font-size:11px; }
.daily-target-track{ height:7px; margin:14px 0 9px; overflow:hidden; border-radius:4px; background:var(--border-soft); }
.daily-target-track i{ display:block; height:100%; border-radius:inherit; background:currentColor; }
.daily-target-foot{ display:flex; justify-content:space-between; gap:8px; }
.daily-target-foot b{ font-size:11px; }
.daily-target-detail{ margin-top:9px; }
.target-green{ color:#16a34a; border-top-color:#16a34a; }
.target-amber{ color:#d97706; border-top-color:#d97706; }
.target-red{ color:#dc2626; border-top-color:#dc2626; }
.daily-target-note{ margin:14px 0 0; color:var(--text-dim); font-size:11px; }
@media (max-width:1100px){ .daily-target-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px){
  .daily-target-grid{ grid-template-columns:1fr; }
  .daily-target-head{ align-items:flex-start; }
}

.ai-summary-panel{
  margin: 18px 0 28px;
  padding: 22px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}
.ai-summary-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ai-summary-head .workspace-title{ font-size: 22px; }
.ai-summary-state{
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}
.ai-summary-progress{
  width: 100%;
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--border-soft);
}
.ai-summary-progress-bar{
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.45s ease;
}
.ai-summary-output{
  position: relative;
  margin: 14px 0 0;
  padding: 0;
  color: var(--text);
  font: 500 14px/1.7 var(--font-body);
  overflow-wrap: anywhere;
}
.ai-summary-output.is-generating{
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
}
.ai-summary-output.is-generating::before{
  content: "AI is analysing live workshop data";
  color: var(--text-dim);
  font-weight: 700;
}
.ai-summary-output.is-generating::after{
  content: "";
  width: 7px;
  height: 18px;
  margin-left: 7px;
  border-radius: 1px;
  background: var(--brand);
  animation: ai-cursor-blink 0.8s steps(1) infinite;
}
.ai-summary-output.is-typing::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -2px;
  border-radius: 1px;
  background: var(--brand);
  animation: ai-cursor-blink 0.8s steps(1) infinite;
}
.ai-summary-output.is-typing{
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface);
  white-space: pre-wrap;
}
.ai-brief-section{
  margin-top: 10px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  background: var(--surface);
}
.ai-brief-section:first-child{ margin-top: 0; }
.ai-brief-section h3{
  margin: 0 0 8px;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.ai-brief-section p{ margin: 6px 0 0; }
.ai-brief-section ul{
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding-left: 20px;
}
.ai-brief-section li::marker{ color: var(--brand); }
.ai-brief-hidden-patterns{ border-left-color:#2563eb; }
.ai-brief-risks-before-they-escalate{ border-left-color:#dc2626; }
.ai-brief-root-cause-hypotheses{ border-left-color:#f59e0b; }
.ai-brief-recommended-interventions{ border-left-color:#16a34a; }
.ai-brief-questions-for-morning-meeting{ border-left-color:#64748b; }
@keyframes ai-cursor-blink{
  0%, 48%{ opacity: 1; }
  49%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ai-summary-progress-bar{ transition: none; }
  .ai-summary-output.is-generating::after,
  .ai-summary-output.is-typing::after{ animation: none; }
}
@media (max-width: 700px){
  .ai-summary-head{ align-items: stretch; flex-direction: column; }
  .ai-summary-head button{ width: 100%; }
}

.report-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){ .report-grid{ grid-template-columns: 1fr; } }
@media (max-width: 900px){ .report-action-grid{ grid-template-columns: 1fr; } }
@media (max-width: 900px){
  .report-jump-menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .report-jump-menu a{ flex: 0 0 auto; }
}

.report-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.report-card-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-bright);
  margin: 0 0 3px;
}
.report-card-sub{
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.report-chart-wrap{
  position: relative;
  height: 240px;
}
.report-chart-wrap-donut{
  height: 220px;
  max-width: 280px;
  margin: 0 auto;
}

.report-action-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.report-table-card{
  min-height: 280px;
}
.report-table-card-wide{
  grid-column: 1 / -1;
}
.report-mini-table{
  overflow-x: auto;
}
.report-mini-table table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.report-mini-table th{
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.report-mini-table td{
  padding: 9px 6px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: top;
}
.report-mini-table tr:last-child td{
  border-bottom: none;
}
.report-mini-empty{
  color: var(--text-dim);
  font-size: 13px;
  padding: 22px 0;
  text-align: center;
}
.report-mini-more{
  color: var(--text-dim);
  font-size: 12px;
  margin: 10px 0 0;
}

.report-technician-panel{
  margin-top: 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(216, 30, 38, 0.07), rgba(21, 128, 61, 0.06)), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.report-technician-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.report-date-filter-inline{
  margin-top: 0;
  min-width: 190px;
}
.report-technician-visual{
  display: grid;
  gap: 16px;
}
.tech-spotlight-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tech-spotlight{
  min-height: 108px;
  padding: 15px 16px;
  border: 1px solid var(--border-soft);
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  background: rgba(255,255,255,0.68);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tech-spotlight span{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tech-spotlight strong{
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--text-bright);
}
.tech-spotlight small{
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-spotlight.tone-green{ border-left-color: var(--green); }
.tech-spotlight.tone-amber{ border-left-color: var(--amber); }
.tech-spotlight.tone-red{ border-left-color: var(--red); }
.tech-spotlight.tone-brand{ border-left-color: var(--brand); }
.tech-card-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tech-performance-tile{
  min-height: 190px;
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.tech-tile-top,
.tech-speed-row,
.tech-tile-metrics{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tech-rank{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--brand);
}
.tech-load-pill{
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-bright);
  background: rgba(148,163,184,0.18);
}
.tech-performance-tile h4{
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-tile-metrics{
  margin-bottom: 12px;
}
.tech-tile-metrics div{
  min-width: 0;
}
.tech-tile-metrics strong{
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--text-bright);
}
.tech-tile-metrics span,
.tech-speed-row{
  font-size: 11px;
  color: var(--text-dim);
}
.tech-load-bar,
.tech-done-meter{
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
}
.tech-load-bar span,
.tech-done-meter span{
  display: block;
  height: 100%;
  border-radius: inherit;
}
.tech-load-bar span{
  background: var(--amber);
}
.tech-done-meter{
  height: 5px;
  margin-top: 10px;
}
.tech-done-meter span{
  background: var(--green);
}
.tech-speed-row{
  margin-top: 12px;
}
.tech-performance-tile.tone-green .tech-load-bar span,
.tech-performance-tile.tone-green .tech-rank{ background: var(--green); }
.tech-performance-tile.tone-amber .tech-load-bar span,
.tech-performance-tile.tone-amber .tech-rank{ background: var(--amber); }
.tech-performance-tile.tone-red .tech-load-bar span,
.tech-performance-tile.tone-red .tech-rank{ background: var(--red); }
@media (max-width: 1200px){
  .tech-spotlight-grid,
  .tech-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .tech-spotlight-grid,
  .tech-card-grid{ grid-template-columns: 1fr; }
}
html.theme-dark .report-technician-panel{
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.08), rgba(52, 211, 153, 0.07)), var(--panel);
}
html.theme-dark .tech-spotlight,
html.theme-dark .tech-performance-tile{
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148,163,184,0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}
html.theme-dark .tech-load-pill,
html.theme-dark .tech-load-bar,
html.theme-dark .tech-done-meter{
  background: rgba(148,163,184,0.16);
}

.daily-tech-board{
  display: grid;
  gap: 16px;
}
.daily-tech-hero{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: stretch;
}
.daily-tech-score{
  min-height: 158px;
  padding: 18px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #D81E26, #8B1117);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 18px 42px rgba(216,30,38,0.2);
}
.daily-tech-score span,
.daily-tech-score small{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.88;
}
.daily-tech-score strong{
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 0.9;
}
.daily-tech-kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.daily-tech-kpis div{
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.76);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.daily-tech-kpis strong{
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-tech-kpis span{
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.daily-tech-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.daily-tech-tile{
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.86);
}
.daily-tech-name{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.daily-tech-name strong{
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-tech-name span{
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(21,128,61,0.11);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}
.daily-tech-numbers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
}
.daily-tech-numbers div{
  min-width: 0;
}
.daily-tech-numbers strong{
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-tech-numbers span,
.daily-tech-tile small{
  color: var(--text-dim);
  font-size: 11px;
}
.daily-tech-progress{
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  margin-bottom: 10px;
}
.daily-tech-progress span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--brand));
}
.workshop-scorecard{
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
}
.workshop-scorecard-main{
  min-height: 168px;
  padding: 18px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #D81E26, #7A1116);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 18px 42px rgba(216,30,38,0.18);
}
.workshop-scorecard-main span,
.workshop-scorecard-main small{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
}
.workshop-scorecard-main strong{
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.9;
}
.workshop-kpi-strip{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.workshop-kpi{
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.82);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.workshop-kpi span{
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.workshop-kpi strong{
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workshop-kpi small{
  color: var(--text-dim);
  font-size: 11px;
}
.workshop-leaderboard{
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.62);
}
.workshop-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.workshop-section-head strong{
  color: var(--text-bright);
}
.workshop-section-head span{
  color: var(--text-dim);
  font-size: 12px;
}
.workshop-tech-row{
  display: grid;
  grid-template-columns: 46px minmax(180px, 1.5fr) minmax(250px, 1.4fr) minmax(150px, 0.8fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.workshop-rank{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.workshop-tech-name{
  min-width: 0;
}
.workshop-tech-name strong{
  display: block;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workshop-tech-name span{
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workshop-tech-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.workshop-tech-metrics strong{
  display: block;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}
.workshop-tech-metrics span{
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workshop-score-meter{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
}
.workshop-score-meter strong{
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 24px;
}
.workshop-score-meter span{
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148,163,184,0.18);
}
.workshop-score-meter i{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}
.workshop-tech-row.tone-amber .workshop-rank,
.workshop-tech-row.tone-amber .workshop-score-meter i{
  background: var(--amber);
}
.workshop-tech-row.tone-red .workshop-rank,
.workshop-tech-row.tone-red .workshop-score-meter i{
  background: var(--red);
}
html.theme-dark .daily-tech-kpis div,
html.theme-dark .daily-tech-tile,
html.theme-dark .workshop-kpi,
html.theme-dark .workshop-leaderboard{
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(148,163,184,0.18);
}
html.theme-dark .daily-tech-progress,
html.theme-dark .workshop-score-meter span{
  background: rgba(148,163,184,0.16);
}
@media (max-width: 1200px){
  .daily-tech-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-scorecard{ grid-template-columns: 1fr; }
  .workshop-kpi-strip{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workshop-tech-row{ grid-template-columns: 40px minmax(160px, 1fr) minmax(220px, 1fr); }
  .workshop-score-meter{ grid-column: 2 / -1; }
}
@media (max-width: 900px){
  .report-technician-head{ flex-direction: column; }
  .report-date-filter-inline{ width: 100%; }
  .daily-tech-hero{ grid-template-columns: 1fr; }
  .daily-tech-kpis{ grid-template-columns: 1fr; }
  .workshop-kpi-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-tech-row{ grid-template-columns: 1fr; }
  .workshop-rank{ width: 30px; height: 30px; }
  .workshop-score-meter{ grid-column: auto; }
}
@media (max-width: 700px){
  .daily-tech-grid{ grid-template-columns: 1fr; }
  .workshop-kpi-strip{ grid-template-columns: 1fr; }
  .workshop-section-head{ flex-direction: column; }
}

/* =========================================================
   SERVICE KPI CALCULATORS
   ========================================================= */
.calculator-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1100px){ .calculator-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px){ .calculator-grid{ grid-template-columns: 1fr; } }

.calculator-card{
  display:flex;
  flex-direction:column;
  gap: 14px;
  min-height: 300px;
}
.calculator-fields{
  display:grid;
  gap: 10px;
  margin-top: auto;
}
.calculator-fields label{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.calculator-fields input{
  width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-size: 14px;
  padding: 10px 11px;
  outline: none;
}
.calculator-fields input:focus{
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}
.calculator-result{
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1;
}
.calculator-result.green{ color: var(--green); }
.calculator-result.amber{ color: var(--amber); }
.calculator-result.red{ color: var(--red); }
.calculator-result.neutral{ color: var(--text-bright); }
.calculator-note{
  margin: -4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   MANAGER / DAILY MEETING VIEW (command center layout)
   ========================================================= */
.meeting-meta{
  color: var(--text-dim);
  font-size: 13px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: 0 8px 18px rgba(15,23,42,0.05);
}
.meeting-actions{
  flex-wrap: wrap;
  justify-content: flex-end;
}

.meeting-kpi-card{
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.meeting-kpi-label{
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.meeting-kpi-value{
  color: var(--text-bright);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* ---- ROW LAYOUTS ---- */
.mv-row{
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
.mv-row-hero{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.mv-row-mix{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.mv-row-bottom{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

@media (max-width: 1100px){
  .mv-row-hero, .mv-row-mix, .mv-row-bottom{
    grid-template-columns: 1fr;
  }
}

/* ---- SHARED CARD STYLES ---- */
.mv-pulse-card,
.mv-mix-card,
.mv-time-card,
.mv-mission-card,
.mv-advisor-card,
.mv-courtesy-card{
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}
.mv-card-head{ margin-bottom: 14px; }
.mv-card-title{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 4px;
}
.mv-card-sub{
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
}

/* ---- ROW 1A: PULSE CARD (gauge + stats) ---- */
.mv-pulse-card{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 18px 22px;
  background:
    radial-gradient(circle at top right, rgba(216,30,38,0.07), transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  position: relative;
  overflow: hidden;
}
.mv-pulse-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
  opacity: 0.9;
}
.mv-pulse-meta{ grid-column: 1; grid-row: 1; }
.mv-pulse-gauge{ grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 180px; }
.mv-pulse-stats{ grid-column: 1; grid-row: 2; display:flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }

.mv-pulse-eyebrow{
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand);
}
.mv-pulse-headline{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.05;
  color: var(--text-bright);
  margin: 6px 0 4px;
}
.mv-pulse-sub{
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
}

.mv-pulse-stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid var(--border-soft);
}
.mv-pulse-stat:last-child{ border-right: none; padding-right: 0; }
.mv-pulse-stat-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--text-bright);
}
.mv-pulse-stat-lbl{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* gauge SVG */
.mv-gauge-svg{ width: 100%; height: auto; display: block; }
.mv-gauge-track{ fill: none; stroke: #E2E8F0; stroke-width: 14; }
.mv-gauge-fill{
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dashoffset .6s ease, stroke .4s ease;
}
.mv-gauge-fill.tone-green{ stroke: var(--green); }
.mv-gauge-fill.tone-amber{ stroke: var(--amber); }
.mv-gauge-fill.tone-red{ stroke: var(--red); }
.mv-gauge-score{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  fill: var(--text-bright);
}
.mv-gauge-score-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: var(--text-dim);
}

/* ---- ROW 1B: 4 ALERT TILES (right column) ---- */
.mv-alerts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.mv-alert{
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 130px;
}
.mv-alert:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.10);
}
.mv-alert::before{
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--text-faint);
}
.mv-alert.tone-red::before{ background: var(--red); }
.mv-alert.tone-amber::before{ background: var(--amber); }
.mv-alert.tone-green::before{ background: var(--green); }
.mv-alert.tone-blue::before{ background: #2563EB; }

.mv-alert-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mv-alert-icon{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  background: #F1F5F9;
  color: var(--text);
}
.mv-alert.tone-red .mv-alert-icon{ background: #FEE2E2; color: var(--red); }
.mv-alert.tone-amber .mv-alert-icon{ background: #FEF3C7; color: var(--amber); }
.mv-alert.tone-green .mv-alert-icon{ background: #DCFCE7; color: var(--green); }
.mv-alert.tone-blue .mv-alert-icon{ background: #DBEAFE; color: #2563EB; }

.mv-alert-label{
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mv-alert-value{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--text-bright);
  margin: 8px 0 4px;
}
.mv-alert.tone-red .mv-alert-value{ color: var(--red); }
.mv-alert.tone-amber .mv-alert-value{ color: var(--amber); }
.mv-alert.tone-green .mv-alert-value{ color: var(--green); }
.mv-alert.tone-blue .mv-alert-value{ color: #2563EB; }
.mv-alert-sub{
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 600;
}

/* ---- ROW 2A: STATUS MIX DONUT ---- */
.mv-mix-body{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 700px){
  .mv-mix-body{ grid-template-columns: 1fr; justify-items: center; }
}
.mv-donut-wrap{ position: relative; width: 200px; height: 200px; }
.mv-donut-svg{ width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.mv-donut-center{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mv-donut-center-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--text-bright);
}
.mv-donut-center-lbl{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}
.mv-mix-legend{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.mv-mix-legend li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: opacity .15s ease;
}
.mv-mix-legend li:hover{ opacity: 0.75; }
.mv-legend-swatch{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mv-legend-label{ flex: 1; }
.mv-legend-count{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-bright);
}

/* ---- ROW 2B: WHERE TIME IS GOING (horizontal bars) ---- */
.mv-time-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mv-time-row{
  display: grid;
  grid-template-columns: 170px 1fr 48px;
  align-items: center;
  gap: 12px;
}
.mv-time-status{
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-time-bar{
  position: relative;
  height: 14px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.mv-time-bar-fill{
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  transition: width .5s ease;
}
.mv-time-bar-fill.tone-green{ background: linear-gradient(90deg, var(--green), #4ADE80); }
.mv-time-bar-fill.tone-amber{ background: linear-gradient(90deg, var(--amber), #FBBF24); }
.mv-time-bar-fill.tone-red{ background: linear-gradient(90deg, var(--red), #F87171); }
.mv-time-val{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-bright);
  text-align: right;
}
.mv-time-empty{
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}

/* ---- ROW 3: MISSION CONTROL / ACTION QUEUE ---- */
.mv-mission-card{ margin-bottom: 18px; }
.mv-mission-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mv-mission-tabs{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mv-mission-tab{
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mv-mission-tab:hover{ background: var(--panel-raised); }
.mv-mission-tab.active{
  background: var(--text-bright);
  color: #FFFFFF;
  border-color: var(--text-bright);
}
.mv-mission-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mv-mission-row{
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--text-faint);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mv-mission-row:hover{
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  border-color: var(--brand);
}
.mv-mission-row.tone-red{ border-left-color: var(--red); }
.mv-mission-row.tone-amber{ border-left-color: var(--amber); }
.mv-mission-row.tone-green{ border-left-color: var(--green); }
.mv-mission-priority{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  width: 24px;
  text-align: center;
  color: var(--text-dim);
}
.mv-mission-main{ min-width: 0; }
.mv-mission-title{
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-bright);
}
.mv-mission-title .reg{
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  margin-left: 8px;
}
.mv-mission-meta{
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mv-mission-status{
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.mv-mission-status.tone-red{ background: #FEE2E2; color: var(--red); }
.mv-mission-status.tone-amber{ background: #FEF3C7; color: #92400E; }
.mv-mission-status.tone-green{ background: #DCFCE7; color: #166534; }
.mv-mission-status.tone-neutral{ background: #F1F5F9; color: var(--text); }
.mv-mission-age{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--text-bright);
  min-width: 48px;
  text-align: right;
}
.mv-mission-age.tone-red{ color: var(--red); }
.mv-mission-age.tone-amber{ color: var(--amber); }
.mv-mission-age small{
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.mv-mission-cta{
  font-size: 18px;
  color: var(--text-faint);
  padding-left: 4px;
}
.mv-mission-empty{
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}
.mv-mission-more{
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 8px 0;
}

/* ---- ROW 4A: ADVISOR LOAD ---- */
.mv-advisor-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mv-advisor-row{
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 12px;
}
.mv-advisor-name{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-advisor-bar{
  height: 22px;
  background: #F1F5F9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.mv-advisor-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  border-radius: 6px;
  transition: width .5s ease;
  position: relative;
}
.mv-advisor-bar-fill.tone-red{ background: linear-gradient(90deg, var(--red), #F87171); }
.mv-advisor-count{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
  color: var(--text-bright);
  min-width: 36px;
  text-align: right;
}

/* ---- ROW 4B: COURTESY WATCH ---- */
.mv-courtesy-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mv-courtesy-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 11px 12px;
  background: #F8FAFC;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.mv-courtesy-row:hover{ background: var(--panel-raised); }
.mv-courtesy-main{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mv-courtesy-plate{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-bright);
}
.mv-courtesy-sub{
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-courtesy-age{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-bright);
  align-self: center;
}
.mv-courtesy-age.tone-red{ color: var(--red); }
.mv-courtesy-age.tone-amber{ color: var(--amber); }
.mv-courtesy-empty{
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 30px 0;
}

/* ---- MOBILE FIXES ---- */
@media (max-width: 700px){
  .mv-pulse-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .mv-pulse-gauge{ grid-column: 1; grid-row: 2; justify-self: center; }
  .mv-pulse-stats{ grid-row: 3; }
  .mv-alerts{ grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
  .mv-time-row{ grid-template-columns: 110px 1fr 40px; gap: 8px; }
  .mv-mission-row{
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "pri main age"
      "pri meta age"
      "status status status";
    row-gap: 6px;
  }
  .mv-mission-priority{ grid-area: pri; }
  .mv-mission-main{ grid-area: main; }
  .mv-mission-status{ grid-area: status; justify-self: start; }
  .mv-mission-age{ grid-area: age; }
  .mv-mission-cta{ display: none; }
  .mv-advisor-row{ grid-template-columns: 90px 1fr 32px; gap: 8px; }
}



/* =========================================================
   MOBILE (≤ 768px)
   ========================================================= */
@media (max-width: 768px){

  .fleet-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .fleet-card{ padding: 12px; }
  .fleet-reg{ font-size: 13px; }
  .section-divider{ margin: 26px 0 16px; }

  .topbar{ padding: 0 14px; height: 50px; }
  .brand-sub{ display:none; }
  .topbar-middle{ gap: 6px; }
  .topbar-status span:last-child{ display:none; }
  .topbar-clock{
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
    padding: 5px 8px;
  }
  .top-quick-nav{
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 7px 12px;
    overflow-x: auto;
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--border-soft);
    z-index: 49;
  }
  .top-nav-btn{ font-size: 11.5px; padding: 6px 10px; }
  .topbar-right{ gap: 8px; }
  .updates-bell{ width:32px; height:32px; flex-basis:32px; }
  .theme-toggle{ padding: 5px 7px; }
  .theme-toggle-text{ display:none; }
  .role-chip{ display:none; }
  .btn-ghost{ font-size: 12px; padding: 6px 9px; }

  .screen-select{ padding: 22px 16px; min-height: calc(100vh - 50px); }
  .select-title{ font-size: 26px; margin-bottom: 26px; }
  .role-tile{ padding: 30px 18px; }

  .screen-workspace{ padding: 16px 14px 36px; }
  .updates-page-head{ flex-direction:column; margin-bottom:16px; }
  .update-entry{ grid-template-columns:1fr; gap:10px; padding:18px 2px; }
  .update-entry-meta{ flex-direction:row; align-items:center; }
  .workspace-head{ flex-direction: column; align-items: stretch; margin-bottom: 14px; }
  .workspace-title{ font-size: 22px; }
  .workspace-actions{ flex-direction: column; align-items: stretch; gap: 8px; }
  .search-input{ width: 100%; }
  .report-toolbar{ align-items: stretch; justify-content: flex-start; }
  .report-filter-select{ width: 100%; }
  .meeting-meta{ width: 100%; text-align: center; border-radius: var(--radius); }
  .btn-primary{ width: 100%; text-align:center; padding: 11px 16px; }
  .btn-secondary{ width: 100%; text-align:center; }

  .filter-bar{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px 14px;
    padding: 0 14px 4px;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex-shrink: 0; padding: 8px 13px; }

  .table-top-scroll{ display:none !important; }
  .table-shell{ background: transparent; border: none; overflow-x: visible; }
  .job-table{ min-width: 0; }
  .job-table thead{ display:none; }
  .job-table, .job-table tbody{ display:block; width:100%; }
  .job-table tbody tr{
    display:block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .job-table tbody tr:last-child{ margin-bottom:0; }
  .job-table tbody td{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border-soft);
    border-left: none !important;
  }
  .job-table tbody td:last-child{ border-bottom: none; }
  .job-table tbody td::before{
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .job-table tbody td > *{ text-align:right; }

  .job-table tbody tr{ border-top: 3px solid var(--text-faint); }
  .row-status-amber{ border-top-color: var(--amber) !important; }
  .row-status-green{ border-top-color: var(--green) !important; }
  .row-status-red{ border-top-color: var(--red) !important; }

  .td-card-header{
    background: var(--panel-raised);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-bright);
  }
  .td-card-header::before{ display:none; }
  .td-card-header > *{ text-align:left; }

  .empty-state{ padding: 44px 16px; }

  .drawer-overlay{ align-items: stretch; }
  .drawer{
    width: 100%;
    border-left: none;
    animation: slideUp .18s ease;
  }
  @keyframes slideUp{ from{ transform: translateY(14px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
  .drawer-foot{ flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .drawer-foot-right{ flex-direction: column-reverse; gap: 8px; }
  .drawer-foot-right button, #drawerDelete{ width: 100%; text-align:center; }

  .toast{ left: 14px; right: 14px; transform: none; bottom: 16px; text-align:center; }
}

/* =========================================================
   PRINT / PDF: Daily Meeting
   ========================================================= */
@media print{
  @page{
    size: A4;
    margin: 12mm;
  }
  body{
    background: #FFFFFF !important;
    color: #111827 !important;
  }
  .topbar,
  .toast,
  .wheel-decoration,
  #screenLogin,
  #screenRoleSelect,
  #screenDashboardHub,
  #screenWorkspace,
  #screenCourtesy,
  #screenTvDashboard,
  #screenReports,
  .drawer-overlay,
  #btnPrintMeeting{
    display: none !important;
  }
  #screenManagerView{
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  #screenManagerView .workspace-head{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
    break-after: avoid;
  }
  #screenManagerView .workspace-title{
    color: #111827 !important;
    font-size: 22px !important;
    margin: 0 !important;
  }
  #screenManagerView .eyebrow{
    color: #B91C1C !important;
    margin-bottom: 4px !important;
  }
  .meeting-actions{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .meeting-meta{
    box-shadow: none !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
    padding: 6px 10px !important;
  }
  .mv-row,
  .mv-mission-card{
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .mv-row-hero,
  .mv-row-mix,
  .mv-row-bottom{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .mv-pulse-card,
  .mv-mix-card,
  .mv-time-card,
  .mv-mission-card,
  .mv-advisor-card,
  .mv-courtesy-card,
  .mv-alert{
    box-shadow: none !important;
    border-color: #D1D5DB !important;
    padding: 12px !important;
  }
  .mv-pulse-headline{ font-size: 18px !important; }
  .mv-pulse-stat-num{ font-size: 18px !important; }
  .mv-gauge-score{ font-size: 32px !important; }
  .mv-alert-value{ font-size: 26px !important; }
  .mv-mission-row{ padding: 8px 10px !important; background: #FFFFFF !important; }
  .mv-card-title{ font-size: 13px !important; }
  .mv-card-sub{ font-size: 10px !important; }
}

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius:4px; }
::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   LIGHT SAAS REFRESH OVERRIDES
   Keeps the existing app structure and behavior intact while
   shifting the UI into a cleaner Zoho-style operations app.
   ========================================================= */
body{
  background:
    radial-gradient(circle at top left, rgba(216,30,38,0.06), transparent 28rem),
    linear-gradient(180deg, #FAFBFE 0%, var(--bg) 100%);
}

.topbar{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-mark{
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
  box-shadow: 0 8px 18px rgba(216,30,38,0.18);
}
.brand-name{ color: var(--text-bright); }
.topbar-status{
  background: var(--panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 11px;
  color: var(--text-dim);
}
.topbar-clock{
  background: #FFFFFF;
  border-color: var(--border-soft);
}
.conn-dot{ width:7px; height:7px; background: #CBD5E1; }
.role-chip{
  background: var(--brand-dim);
  border-color: transparent;
  color: var(--brand);
}
.btn-ghost{
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover{
  background: var(--panel-raised);
  border-color: #C7D2DE;
  color: var(--text-bright);
}

.screen-select{
  align-items: flex-start;
  padding-top: 72px;
}
.wheel-decoration{
  opacity: 0.18;
  right: -210px;
  bottom: -210px;
}
.wheel-decoration .wheel-tyre-outer,
.wheel-decoration .wheel-tyre-inner,
.wheel-decoration .wheel-rim-inner,
.wheel-decoration .wheel-disc{ stroke: #CBD5E1; }
.wheel-decoration .wheel-tread,
.wheel-decoration .wheel-rim,
.wheel-decoration .wheel-disc-holes,
.wheel-decoration .wheel-hubplate{ stroke: #CBD5E1; }
.wheel-decoration .wheel-spoke line{
  stroke: var(--brand);
  opacity: 0.4;
  filter: drop-shadow(0 0 4px rgba(216,30,38,0.06));
}
.wheel-decoration .wheel-lug{ fill: #CBD5E1; }
.wheel-decoration .wheel-cap{ fill: var(--brand); opacity: 0.6; }
.eyebrow{ color: var(--brand); }
.select-title{
  color: var(--text-bright);
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 28px;
}
.role-tiles{ gap: 20px; }
.role-tile{
  background: rgba(255,255,255,0.96);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
  align-items: flex-start;
  text-align: left;
  padding: 28px;
}
.role-tile:hover{
  background: #FFFFFF;
  border-color: rgba(216,30,38,0.35);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12);
  transform: translateY(-2px);
}
.tile-icon{
  background: var(--brand-dim);
  border-color: transparent;
  color: var(--brand);
  border-radius: 14px;
}
.role-tile:hover .tile-icon{
  color: #FFFFFF;
  background: var(--brand);
  border-color: var(--brand);
}
.tile-label{
  color: var(--text-bright);
  font-size: 18px;
}
.tile-desc{
  color: var(--text-dim);
  line-height: 1.45;
}
.gate-screen{
  background:
    linear-gradient(135deg, rgba(216,30,38,0.08), transparent 36%),
    radial-gradient(circle at bottom right, rgba(15,23,42,0.08), transparent 28rem);
}
.gate-box{
  background: rgba(255,255,255,0.98);
  border-color: transparent;
  box-shadow: 0 24px 70px rgba(15,23,42,0.16);
  text-align: left;
  max-width: 430px;
  padding: 42px;
}
.gate-box .eyebrow{ margin-bottom: 10px; }
.gate-title{
  color: var(--text-bright);
  font-size: 30px;
}
.gate-input,
.search-input,
.field input,
.field select,
.field textarea,
.courtesy-issue-area select{
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: var(--text-bright);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.gate-input:focus,
.search-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(216,30,38,0.10);
}

.screen-workspace{
  max-width: 1480px;
  padding-top: 30px;
}
.workspace-title{
  color: var(--text-bright);
  font-size: 25px;
}
.workspace-actions{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
}
.btn-primary{
  box-shadow: 0 10px 18px rgba(216,30,38,0.18);
}
.btn-primary:hover{
  filter: none;
  background: #B91C1C;
}
.btn-secondary{
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: var(--text);
}
.btn-secondary:hover{
  background: var(--panel-raised);
  border-color: #AEBCCE;
  color: var(--text-bright);
}
.btn-danger{
  background: #FFFFFF;
  border-color: var(--red-dim);
  color: var(--red);
}
.btn-danger:hover{ background: var(--red-dim); }

.filter-bar{
  background: rgba(255,255,255,0.70);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
}
.filter-chip{
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text);
}
.filter-chip:hover{
  border-color: #AEBCCE;
  color: var(--text-bright);
}
.filter-chip.active{
  background: var(--brand);
  border-color: var(--brand);
}

.table-shell{
  background: #FFFFFF;
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.table-top-scroll{
  background: linear-gradient(180deg, rgba(100,116,139,0.08), rgba(148,163,184,0.06));
  border-color: rgba(100,116,139,0.24);
  box-shadow: 0 8px 18px rgba(15,23,42,0.07);
}
.job-table thead th{
  background: #F8FAFC;
  color: #475569;
  border-bottom-color: var(--border);
}
.job-table tbody tr{
  border-bottom-color: var(--border-soft);
}
.job-table tbody tr:hover{
  background: #FFF7F7;
}
.job-table tbody td{ color: var(--text); }
.cell-mono{ color: var(--text-bright); }
.cell-dim{ color: var(--text-faint); }
.cell-mono.ticket,
td .ticket{
  color: var(--text-bright);
  background: #F8FAFC;
  border-top-color: #CBD5E1;
  border-bottom-color: #CBD5E1;
  border-left-color: #AEBCCE;
  border-right-color: #AEBCCE;
}
.status-pill.amber{ background: var(--amber-dim); color: var(--amber-text); }
.status-pill.green{ background: var(--green-dim); color: var(--green); }
.status-pill.red{ background: var(--red-dim); color: var(--red); }
.status-pill.neutral{ background: #F1F5F9; color: var(--text-dim); }
.empty-title{ color: var(--text-bright); }
.empty-sub{ color: var(--text-dim); }

.drawer-overlay{
  background: rgba(15,23,42,0.38);
  backdrop-filter: blur(3px);
}
.drawer{
  background: #FFFFFF;
  border-left-color: var(--border);
}
.drawer-head{
  background: #FFFFFF;
  border-bottom-color: var(--border-soft);
}
.drawer-head h3{ color: var(--text-bright); }
.btn-icon{
  color: var(--text-dim);
  border-radius: 999px;
}
.btn-icon:hover{
  background: var(--panel-raised);
  color: var(--text-bright);
}
.drawer-body{ background: #FBFCFE; }
.field label{ color: #475569; }
.field-hint{ color: var(--text-dim); margin: 0; }
.field-locked input,
.field-locked select{
  background: #F1F5F9;
  color: var(--text-dim);
  opacity: 1;
}
.courtesy-block{ border-top-color: var(--border); }
.courtesy-active-info{
  background: #F8FAFC;
  border: 1px solid var(--border-soft);
}
.drawer-foot{
  background: #FFFFFF;
  border-top-color: var(--border-soft);
}

.toast{
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text-bright);
  box-shadow: 0 18px 44px rgba(15,23,42,0.18);
}
.toast.error{ background: #FFF7F7; border-color: var(--red-dim); color: var(--red); }
.toast.success{ background: #F0FDF4; border-color: var(--green-dim); color: var(--green); }

.fleet-card,
.report-summary-card,
.report-card{
  background: #FFFFFF;
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.fleet-card:hover{
  border-color: #C7D2DE;
  box-shadow: 0 16px 36px rgba(15,23,42,0.10);
}
.fleet-reg,
.report-summary-value,
.report-card-title{ color: var(--text-bright); }
.fleet-model{ color: var(--text); }
.fleet-meta,
.report-summary-label,
.report-card-sub{ color: var(--text-dim); }
.fleet-status-pill.green{ background: var(--green-dim); color: var(--green); }
.fleet-status-pill.red{ background: var(--red-dim); color: var(--red); }
.fleet-pending-note,
.fleet-loan-note{
  color: var(--amber-text);
  border-top-color: var(--border-soft);
}
.section-divider{ border-top-color: var(--border); }
.report-chart-wrap{
  background: #FBFCFE;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px;
}

@media (max-width: 768px){
  .topbar{
    position: sticky;
    padding: 0 12px;
  }
  .topbar-status{ padding: 0; border: none; background: transparent; }
  .topbar-clock{
    background: var(--panel-raised);
    border-color: var(--border-soft);
  }
  .screen-select{ align-items: center; padding-top: 28px; }
  .role-tile{ align-items: center; text-align: center; }
  .workspace-actions{
    background: transparent;
    border: none;
    padding: 0;
  }
  .filter-bar{
    border-radius: 0;
    border-left: none;
    border-right: none;
    background: rgba(255,255,255,0.85);
  }
  .job-table tbody tr{
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(15,23,42,0.07);
  }
  .td-card-header{ background: #F8FAFC; color: var(--text-bright); }
}

/* =========================================================
   USER THEME: DARK MODE
   ========================================================= */
:root.theme-dark{
  --bg:            #0B1120;
  --panel:         #111827;
  --panel-raised:  #172033;
  --border:        #2A3548;
  --border-soft:   #223047;

  --brand-dim:     rgba(216,30,38,0.18);
  --amber:         #F59E0B;
  --amber-text:    #FCD34D;
  --amber-dim:     rgba(245,158,11,0.14);
  --green:         #22C55E;
  --green-dim:     rgba(34,197,94,0.14);
  --red:           #F87171;
  --red-dim:       rgba(248,113,113,0.16);

  --text:          #CBD5E1;
  --text-bright:   #F8FAFC;
  --text-dim:      #94A3B8;
  --text-faint:    #64748B;

  --shadow-drawer: -24px 0 54px rgba(0,0,0,0.48);
  --shadow-soft: 0 14px 34px rgba(0,0,0,0.28);
}

html.theme-dark body{
  background:
    radial-gradient(circle at top left, rgba(216,30,38,0.12), transparent 28rem),
    linear-gradient(180deg, #0B1120 0%, var(--bg) 100%);
}
html.theme-dark .topbar{
  background: rgba(17,24,39,0.94);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
html.theme-dark .topbar-status,
html.theme-dark .topbar-clock,
html.theme-dark .updates-bell,
html.theme-dark .theme-toggle,
html.theme-dark .top-nav-btn,
html.theme-dark .btn-ghost,
html.theme-dark .btn-secondary,
html.theme-dark .btn-danger{
  background: var(--panel-raised);
  border-color: var(--border);
  color: var(--text);
}
html.theme-dark .theme-toggle:hover,
html.theme-dark .updates-bell:hover,
html.theme-dark .top-nav-btn:hover,
html.theme-dark .btn-ghost:hover,
html.theme-dark .btn-secondary:hover{
  background: #1E293B;
  border-color: #3B4A62;
  color: var(--text-bright);
}
html.theme-dark .theme-toggle-track{
  background: #334155;
}
html.theme-dark .theme-toggle[aria-pressed="true"] .theme-toggle-track{
  background: var(--brand);
}
html.theme-dark .top-quick-nav{
  background: rgba(17,24,39,0.94);
  border-bottom-color: var(--border);
}
html.theme-dark .role-chip{
  background: var(--brand-dim);
  color: #FCA5A5;
}
html.theme-dark .update-entry-new{ background:linear-gradient(90deg, rgba(239,68,68,0.09), transparent 58%); }
html.theme-dark .gate-screen{
  background:
    linear-gradient(135deg, rgba(216,30,38,0.14), transparent 38%),
    radial-gradient(circle at bottom right, rgba(148,163,184,0.09), transparent 28rem);
}
html.theme-dark .gate-box,
html.theme-dark .role-tile,
html.theme-dark .advisor-tile,
html.theme-dark .manager-announcement,
html.theme-dark .workspace-actions,
html.theme-dark .filter-bar,
html.theme-dark .report-jump-menu,
html.theme-dark .table-top-scroll,
html.theme-dark .table-shell,
html.theme-dark .fleet-card,
html.theme-dark .report-summary-card,
html.theme-dark .report-card,
html.theme-dark .mv-pulse-card,
html.theme-dark .mv-mix-card,
html.theme-dark .mv-time-card,
html.theme-dark .mv-mission-card,
html.theme-dark .mv-advisor-card,
html.theme-dark .mv-courtesy-card,
html.theme-dark .mv-alert,
html.theme-dark .meeting-meta{
  background: rgba(17,24,39,0.96);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
html.theme-dark .table-top-scroll{
  background: linear-gradient(180deg, rgba(148,163,184,0.14), rgba(100,116,139,0.12));
  border-color: rgba(148,163,184,0.28);
  box-shadow: 0 0 0 8px var(--bg), 0 8px 18px rgba(0,0,0,0.22);
  scrollbar-color: #94A3B8 rgba(148,163,184,0.14);
}
html.theme-dark .table-top-scroll::-webkit-scrollbar-track{
  background: rgba(148,163,184,0.14);
}
html.theme-dark .table-top-scroll::-webkit-scrollbar-thumb{
  border-color: rgba(17,24,39,0.86);
  background: linear-gradient(90deg, #94A3B8, #CBD5E1);
}
html.theme-dark .report-summary-clickable:hover{
  border-color: rgba(248,113,113,0.42);
  box-shadow: 0 16px 36px rgba(0,0,0,0.30);
}
html.theme-dark .report-jump-menu a{
  background: rgba(30,41,59,0.88);
  border-color: var(--border);
  color: var(--text);
}
html.theme-dark .report-jump-menu a:hover{
  background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.36);
  color: var(--text-bright);
}
html.theme-dark .role-tile:hover{
  background: #162033;
  border-color: rgba(248,113,113,0.42);
  box-shadow: 0 18px 44px rgba(0,0,0,0.32);
}
html.theme-dark .advisor-tile:hover{
  background: #162033;
  border-color: rgba(248,113,113,0.42);
}
html.theme-dark .tile-icon,
html.theme-dark .advisor-avatar{
  background: var(--brand-dim);
  color: #FCA5A5;
}
html.theme-dark .role-tile:hover .tile-icon{
  background: var(--brand);
  color: #FFFFFF;
}
html.theme-dark .advisor-name{ color: var(--text-bright); }
html.theme-dark .advisor-code{ color: var(--text-dim); }
html.theme-dark .wheel-decoration .wheel-tyre-outer,
html.theme-dark .wheel-decoration .wheel-tyre-inner,
html.theme-dark .wheel-decoration .wheel-tread,
html.theme-dark .wheel-decoration .wheel-rim,
html.theme-dark .wheel-decoration .wheel-rim-inner,
html.theme-dark .wheel-decoration .wheel-disc,
html.theme-dark .wheel-decoration .wheel-disc-holes,
html.theme-dark .wheel-decoration .wheel-hubplate{
  stroke: #334155;
}
html.theme-dark .wheel-decoration .wheel-lug{
  fill: #334155;
}
html.theme-dark .gate-input,
html.theme-dark .search-input,
html.theme-dark .field input,
html.theme-dark .field select,
html.theme-dark .field textarea,
html.theme-dark .courtesy-issue-area select,
html.theme-dark .report-filter-select,
html.theme-dark .calculator-fields input{
  background: #0F172A;
  border-color: #334155;
  color: var(--text-bright);
  box-shadow: none;
}
html.theme-dark .gate-input::placeholder,
html.theme-dark .search-input::placeholder,
html.theme-dark .calculator-fields input::placeholder{
  color: var(--text-faint);
}
html.theme-dark .filter-chip{
  background: #0F172A;
  border-color: var(--border);
  color: var(--text-dim);
}
html.theme-dark .filter-chip:hover{
  border-color: #475569;
  color: var(--text-bright);
}
html.theme-dark .filter-chip.active{
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}
html.theme-dark .job-table thead th,
html.theme-dark .td-card-header{
  background: #172033;
  color: var(--text-dim);
  border-bottom-color: var(--border);
}
html.theme-dark .job-table tbody tr{
  background: transparent;
  border-bottom-color: var(--border-soft);
  box-shadow: none;
}
html.theme-dark .job-table tbody tr:hover{
  background: rgba(30,41,59,0.72);
}
html.theme-dark .cell-mono.ticket,
html.theme-dark td .ticket{
  background: #172033;
  border-top-color: #334155;
  border-bottom-color: #334155;
  border-left-color: #475569;
  border-right-color: #475569;
}
html.theme-dark .status-pill.neutral{
  background: rgba(148,163,184,0.12);
  color: var(--text-dim);
}
html.theme-dark .drawer-overlay{
  background: rgba(0,0,0,0.62);
}
html.theme-dark .drawer,
html.theme-dark .drawer-head,
html.theme-dark .drawer-foot,
html.theme-dark .tv-detail-modal,
html.theme-dark .toast{
  background: var(--panel);
  border-color: var(--border);
}
html.theme-dark .drawer-body,
html.theme-dark .field-locked input,
html.theme-dark .field-locked select,
html.theme-dark .courtesy-active-info,
html.theme-dark .report-chart-wrap,
html.theme-dark .tv-detail-foot{
  background: #0F172A;
  border-color: var(--border);
}
html.theme-dark .tv-detail-overlay{
  background: rgba(0,0,0,0.62);
}
html.theme-dark .tv-detail-head,
html.theme-dark .tv-detail-foot{
  border-color: var(--border);
}
html.theme-dark .tv-detail-table th{
  background: #172033;
  color: var(--text-dim);
  border-bottom-color: var(--border);
}
html.theme-dark .tv-detail-table td{
  color: var(--text);
  border-bottom-color: var(--border-soft);
}
html.theme-dark .toast.error{ background: #2B1216; color: #FDA4AF; }
html.theme-dark .toast.success{ background: #10251A; color: #86EFAC; }
html.theme-dark .btn-danger:hover{
  background: rgba(248,113,113,0.16);
}
html.theme-dark .fleet-status-pill.green,
html.theme-dark .status-pill.green{
  background: var(--green-dim);
  color: #86EFAC;
}
html.theme-dark .fleet-status-pill.red,
html.theme-dark .status-pill.red{
  background: var(--red-dim);
  color: #FCA5A5;
}
html.theme-dark .status-pill.amber{
  background: var(--amber-dim);
  color: #FCD34D;
}