/* DrivePulse · style.css */

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

:root{
  --bg:#0a0c0f;
  --surface:#111318;
  --surface2:#181c22;
  --border:#232830;
  --border2:#2e3540;
  --text:#e8eaed;
  --muted:#6b7585;
  --accent:#3b82f6;
  --accent2:#1d4ed8;
  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;
  --purple:#a78bfa;
  --teal:#2dd4bf;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── NAV ──────────────────────────────────── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;border-bottom:1px solid var(--border);
  background:var(--surface);position:sticky;top:0;z-index:50;
}
.nav-logo{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
.nav-logo-muted{color:var(--muted)}
.nav-version{font-size:10px;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-status{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;color:var(--green)}
.nav-clock{font-family:var(--mono);font-size:10px;color:var(--muted)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── ALERT BANNER ─────────────────────────── */
.alert-banner{
  display:none;align-items:center;gap:12px;
  padding:8px 20px;font-family:var(--mono);font-size:11px;
  border-bottom:1px solid var(--border);
}
.alert-banner.show{display:flex}
.alert-banner.urgent{background:#1a0a0a;border-bottom-color:var(--red);color:var(--red)}
.alert-banner.warn{background:#1a1400;border-bottom-color:var(--amber);color:var(--amber)}
.alert-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;animation:pulse 1.2s infinite}
.alert-dismiss{margin-left:auto;cursor:pointer;opacity:.6;font-size:12px}
.alert-dismiss:hover{opacity:1}

/* ── CAROUSEL ─────────────────────────────── */
.carousel-section{padding:14px 20px 0;background:var(--surface)}
.carousel-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.carousel-wrap{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.carousel-wrap::-webkit-scrollbar{display:none}

.vehicle-card{
  flex:0 0 180px;background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:11px;cursor:pointer;transition:border-color .15s;
  position:relative;overflow:hidden;
}
.vehicle-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .15s}
.vehicle-card.active{border-color:var(--accent);background:#0f1824}
.vehicle-card.active::before{background:var(--accent)}
.vehicle-card.alert-urgent{border-color:var(--red)}
.vehicle-card.alert-urgent::before{background:var(--red)}
.vehicle-card.alert-warn{border-color:var(--amber)}
.vehicle-card.alert-warn::before{background:var(--amber)}
.vc-nickname{font-weight:500;font-size:13px;margin-bottom:1px}
.vc-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:8px}
.vc-rings{display:flex;gap:5px;margin-bottom:7px}
.ring-wrap{position:relative;width:34px;height:34px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7px;font-weight:600}
.vc-odo{font-family:var(--mono);font-size:10px;color:var(--muted)}
.vc-odo span{color:var(--text);font-weight:500}
.add-card{
  flex:0 0 110px;border:1px dashed var(--border2);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:pointer;color:var(--muted);font-size:11px;transition:all .15s;
}
.add-card:hover{border-color:var(--accent);color:var(--accent)}

/* ── TABBAR ───────────────────────────────── */
.tabbar{
  display:flex;border-bottom:1px solid var(--border);background:var(--surface);
  padding:0 20px;overflow-x:auto;scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none}
.tab{
  padding:10px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0;
}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab:hover:not(.active){color:var(--text)}

/* ── PANELS ───────────────────────────────── */
.panel{display:none;padding:20px;min-height:400px}
.panel.active{display:block}
.panel-2col{display:none;gap:1px;background:var(--border);min-height:400px}
.panel-2col.active{display:grid;grid-template-columns:1fr 300px}
.panel-left{background:var(--bg);padding:20px}
.panel-right{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:12px}
.panel-narrow{max-width:640px;margin:0 auto}

/* ── SECTION HEADER ───────────────────────── */
.sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-title{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.sec-action{font-family:var(--mono);font-size:10px;color:var(--accent);cursor:pointer;border:none;background:none;padding:0}
.sec-action:hover{text-decoration:underline}

/* ── STAT CARDS ───────────────────────────── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px}
.stat-label{font-family:var(--mono);font-size:9px;color:var(--muted);margin-bottom:3px;letter-spacing:.06em;text-transform:uppercase}
.stat-value{font-family:var(--mono);font-size:16px;font-weight:600;line-height:1}
.stat-unit{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
.stat-delta{font-family:var(--mono);font-size:10px;margin-top:3px}
.delta-up{color:var(--red)}.delta-dn{color:var(--green)}

/* ── PREDICTIVE BLOCKS ────────────────────── */
.predict-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:11px;margin-bottom:8px}
.predict-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.progress-bar{height:3px;background:var(--border2);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;border-radius:2px;transition:width .4s}
.fill-green{background:var(--green)}.fill-amber{background:var(--amber)}.fill-red{background:var(--red)}

/* ── ALERT TAGS ───────────────────────────── */
.alert-tag{font-family:var(--mono);font-size:9px;padding:2px 6px;border-radius:3px;font-weight:600;flex-shrink:0}
.tag-green{background:#0a2010;color:var(--green)}
.tag-amber{background:#2a1f00;color:var(--amber)}
.tag-red{background:#2a0a0a;color:var(--red)}
.tag-blue{background:#0a1020;color:var(--accent)}
.tag-purple{background:#1a1030;color:var(--purple)}

/* ── LOG TABLE ────────────────────────────── */
.log-table{width:100%;border-collapse:collapse}
.log-table th{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:left;padding:5px 8px;border-bottom:1px solid var(--border);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.log-table td{padding:8px 8px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.log-table tr:last-child td{border-bottom:none}
.log-table tr:hover td{background:var(--surface)}
.type-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-family:var(--mono);font-size:9px;font-weight:500}
.badge-fuel{background:#1a2a1a;color:var(--green)}
.badge-maintenance{background:#1a1a2a;color:#818cf8}
.badge-trip{background:#1a2030;color:var(--accent)}
.badge-repair{background:#2a1a1a;color:var(--red)}
.cost-neg{color:var(--red);font-family:var(--mono);font-size:11px}
.cost-pos,.green{color:var(--green)}

/* ── ADM ENGINE ───────────────────────────── */
.adm-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:10px}
.adm-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.adm-title{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.adm-body{padding:12px}
.adm-row{display:flex;align-items:flex-start;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border)}
.adm-row:last-child{border-bottom:none}
.adm-service{font-size:12px;font-weight:500;margin-bottom:2px}
.adm-detail{font-family:var(--mono);font-size:10px;color:var(--muted)}
.adm-days{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right}
.adm-date{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:2px;text-align:right}

/* ── PARTS PROCUREMENT ────────────────────── */
.parts-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.part-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.part-row:last-child{border-bottom:none}
.part-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:1px}
.part-name{font-size:12px;font-weight:500;margin-bottom:2px}
.part-sub{font-family:var(--mono);font-size:10px;color:var(--muted)}
.part-right{margin-left:auto;text-align:right;flex-shrink:0}
.part-lead{font-family:var(--mono);font-size:11px;font-weight:600}

/* ── TCO ──────────────────────────────────── */
.tco-chart{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px}
.tco-bars{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tco-bar-row{display:flex;align-items:center;gap:8px}
.tco-bar-label{font-family:var(--mono);font-size:10px;color:var(--muted);width:70px;text-align:right;flex-shrink:0}
.tco-bar-wrap{flex:1;height:18px;background:var(--border2);border-radius:3px;overflow:hidden}
.tco-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.tco-bar-val{font-family:var(--mono);font-size:10px;color:var(--muted);width:55px;flex-shrink:0}
.tco-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

/* ── FLEET ────────────────────────────────── */
.fleet-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:10px}
.fleet-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fleet-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.fleet-stat{text-align:center}
.fleet-stat-val{font-family:var(--mono);font-size:13px;font-weight:600;line-height:1}
.fleet-stat-label{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase}
.fleet-bar{height:3px;border-radius:2px;overflow:hidden;background:var(--border2)}
.fleet-bar-fill{height:100%;border-radius:2px}

/* ── SHIFT MODE ───────────────────────────── */
.shift-hud{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.shift-hud-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.shift-hud-title{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.shift-hud-sub{font-size:12px;margin-top:3px;color:var(--muted)}
.shift-status-label{font-family:var(--mono);font-size:10px;color:var(--muted)}
.shift-active-banner{
  background:#0a1a0a;border:1px solid var(--green);border-radius:6px;
  padding:10px 14px;margin:12px;display:none;
  animation:gpspulse 1.5s ease-in-out infinite;
}
@keyframes gpspulse{0%,100%{border-color:var(--green)}50%{border-color:#0f4020}}
.shift-active-banner.show{display:block}
.shift-active-label{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:600}
.gps-coords{font-family:var(--mono);font-size:10px;color:var(--green);margin-top:4px}
.shift-active-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px}
.shift-trips{padding:0 14px 12px}
.shift-trip-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.shift-trip-row:last-child{border-bottom:none}
.shift-trip-reimb{font-family:var(--mono);font-size:10px;color:var(--green)}
.shift-summary{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px}
.toggle-btn{width:34px;height:18px;background:var(--border2);border-radius:9px;position:relative;cursor:pointer;border:none;transition:background .2s;flex-shrink:0}
.toggle-btn.on{background:var(--accent)}
.toggle-knob{position:absolute;width:12px;height:12px;background:white;border-radius:50%;top:3px;left:3px;transition:left .2s}
.toggle-btn.on .toggle-knob{left:19px}

/* ── IRS REPORT ───────────────────────────── */
.report-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.ctrl-group label{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase}
.ctrl-group select,.ctrl-group input,.input-sm{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:6px;padding:7px 9px;color:var(--text);font-family:var(--mono);font-size:11px;outline:none}
.ctrl-group select:focus,.ctrl-group input:focus,.input-sm:focus{border-color:var(--accent)}
.ctrl-group select option{background:var(--surface)}
.report-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px}
.report-card-title{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.report-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.report-row:last-child{border-bottom:none}
.report-row-label{color:var(--muted)}
.report-row-val{font-family:var(--mono);font-size:12px;font-weight:500}
.report-total{background:#0a1a2a;border:1px solid var(--accent);border-radius:8px;padding:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.report-total-label{font-family:var(--mono);font-size:11px;color:var(--accent)}
.report-total-val{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--accent)}
.export-row{display:flex;gap:8px;margin-top:4px}
.exp-btn{flex:1;padding:8px;border:1px solid var(--border2);border-radius:6px;background:transparent;color:var(--text);font-family:var(--mono);font-size:11px;cursor:pointer;transition:border-color .15s,color .15s}
.exp-btn:hover{border-color:var(--accent);color:var(--accent)}
.exp-btn.primary{border-color:var(--accent);color:var(--accent)}

/* ── OCR ──────────────────────────────────── */
.ocr-drop{border:2px dashed var(--border2);border-radius:10px;padding:32px 20px;text-align:center;cursor:pointer;transition:border-color .2s;position:relative}
.ocr-drop:hover,.ocr-drop.drag{border-color:var(--accent)}
.ocr-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ocr-icon{font-size:28px;margin-bottom:8px;color:var(--muted)}
.ocr-drop-title{font-family:var(--mono);font-size:12px;color:var(--text);margin-bottom:4px}
.ocr-drop-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ocr-result{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;display:none}
.ocr-field-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.ocr-field-row:last-child{border-bottom:none}
.ocr-field-label{color:var(--muted);font-size:11px}
.ocr-field-val{font-family:var(--mono);font-size:12px;font-weight:500}
.ocr-preview{width:100%;max-height:160px;object-fit:contain;border-radius:6px;border:1px solid var(--border);margin:12px 0;display:none}
.batch-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.batch-item{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:12px}
.batch-status{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:3px}
.status-ok{background:#0a2010;color:var(--green)}.status-pend{background:#1a2030;color:var(--accent)}.status-err{background:#2a0a0a;color:var(--red)}

/* ── NOTION SYNC ──────────────────────────── */
.notion-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.notion-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notion-header-title{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text);margin-bottom:2px}
.notion-header-sub{font-size:11px;color:var(--muted)}
.notion-status-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px}
.notion-status-row:last-child{border-bottom:none}
.notion-label{color:var(--muted);font-size:12px;flex:1}
.notion-val{font-family:var(--mono);font-size:11px}
.notion-input-section{padding:12px 14px;border-bottom:1px solid var(--border)}
.notion-actions{padding:10px 14px;display:flex;gap:8px}
.notion-payload-block{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px}
.notion-config-block{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px}
.config-options{display:flex;flex-direction:column;gap:8px}
.config-option{display:flex;align-items:center;gap:10px;font-size:12px;cursor:pointer}
.config-option input{accent-color:var(--accent)}
.sync-btn{padding:8px 14px;background:transparent;border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-family:var(--mono);font-size:11px;cursor:pointer;transition:background .15s}
.sync-btn:hover{background:rgba(59,130,246,.1)}
.sync-btn:disabled{opacity:.4;cursor:not-allowed}
.sync-log{margin:0 14px 12px;background:var(--bg);border-radius:6px;padding:10px;font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.8;max-height:100px;overflow-y:auto;display:none}
.json-preview{background:var(--bg);border-radius:6px;padding:10px;font-family:var(--mono);font-size:10px;color:#6b8cae;line-height:1.8;max-height:180px;overflow-y:auto}

/* ── LIFE OS BRIDGE ───────────────────────── */
.export-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px}
.export-block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.export-desc{font-size:12px;color:var(--muted);margin-bottom:8px}
.export-btns{display:flex;gap:6px;flex-wrap:wrap}
.export-btn{flex:1;min-width:70px;padding:7px 8px;border:1px solid var(--border2);border-radius:6px;background:transparent;color:var(--text);font-family:var(--mono);font-size:10px;cursor:pointer;text-align:center;transition:border-color .15s,color .15s}
.export-btn:hover{border-color:var(--accent);color:var(--accent)}
.export-btn.primary{border-color:var(--accent);color:var(--accent)}

/* ── MODALS ───────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:20px;width:380px;max-width:92vw;max-height:88vh;overflow-y:auto}
.modal-title{font-family:var(--mono);font-size:12px;font-weight:600;margin-bottom:12px;color:var(--accent)}
.field{margin-bottom:9px}
.field label{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.field input,.field select,.select-sm{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:7px 9px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none}
.field input:focus,.field select:focus,.select-sm:focus{border-color:var(--accent)}
.field select option,.select-sm option{background:var(--surface)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-actions{display:flex;gap:8px;margin-top:12px}
.btn-primary{flex:1;padding:8px;background:var(--accent);border:none;border-radius:6px;color:white;font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--accent2)}
.btn-cancel,.btn-outline{padding:8px 14px;background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--muted);font-family:var(--mono);font-size:11px;cursor:pointer}
.btn-cancel:hover,.btn-outline:hover{border-color:var(--text);color:var(--text)}
.calc-box{background:#0a1020;border-radius:5px;padding:7px 9px;font-family:var(--mono);font-size:10px;color:var(--green);margin-bottom:8px}
.calc-teal{color:var(--teal)}

/* ── TOAST ────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:20px;background:var(--surface2);
  border:1px solid var(--green);border-radius:8px;padding:9px 14px;
  font-family:var(--mono);font-size:11px;color:var(--green);z-index:200;
  transform:translateY(60px);opacity:0;transition:all .3s;max-width:300px;
}
.toast.show{transform:translateY(0);opacity:1}

/* ── UTILITY ──────────────────────────────── */
.empty-state{text-align:center;padding:28px 20px;color:var(--muted);font-family:var(--mono);font-size:11px;line-height:2.2}
.muted{color:var(--muted)}
.mono-sm{font-family:var(--mono);font-size:10px}

/* ── RESPONSIVE ───────────────────────────── */
@media(max-width:680px){
  .panel-2col.active{grid-template-columns:1fr}
  .panel-right{border-top:1px solid var(--border)}
  .report-controls{grid-template-columns:1fr}
  .fleet-stats-row{grid-template-columns:repeat(2,1fr)}
}