/* ============================================================
   SpectroNova™ Fleet & Compliance Management System — Stylesheet
   ============================================================ */
:root {
  --or:       #E8671A;
  --or-dark:  #B84E10;
  --or-mid:   #F5A96A;
  --or-light: #FDF0E8;
  --or-pale:  #FEF7F2;
  --white:    #FFFFFF;
  --gray-1:   #F4F5F7;
  --gray-2:   #E8E8E8;
  --gray-3:   #D0D0D0;
  --gray-4:   #999999;
  --gray-5:   #666666;
  --gray-6:   #444444;
  --gray-7:   #222222;
  --dark:       #1A1B2E;
  --sidebar-bg: #1A1B2E;
  --sidebar-bg2:#14152A;
  --green:  #1A7A2E;
  --blue:   #1A56A0;
  --red:    #C0392B;
  --amber:  #E8A817;
  --success-green:  #1A7A2E;
  --warning-amber:  #E8A817;
  --error-red:      #C0392B;
  --info-blue:      #1A56A0;
  --accent-orange:  #E8671A;
  --sidebar-w: 236px;
  --header-h:  52px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  background: var(--gray-1);
  color: var(--gray-7);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--sidebar-bg); height: 100vh;
  position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column; z-index: 100;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--sidebar-bg2);
  text-decoration: none; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.sidebar-logo-icon {
  width: 30px; height: 30px; background: var(--or);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0;
}
.sidebar-logo-text { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.sidebar-logo-text small { display: block; font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.45); letter-spacing: 0.4px; }

.sidebar-section {
  padding: 14px 0 4px 18px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; color: rgba(255,255,255,0.3); text-transform: uppercase; flex-shrink: 0;
}
.sidebar-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px; color: rgba(255,255,255,0.62);
  text-decoration: none; font-size: 12.5px;
  border-left: 3px solid transparent; transition: all 0.15s; flex-shrink: 0;
}
.sidebar-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar-item.active {
  background: rgba(232,103,26,0.13); color: var(--or);
  border-left-color: var(--or); font-weight: 600;
}
.sidebar-item .si-icon { width: 17px; text-align: center; font-size: 13px; flex-shrink: 0; }
.sidebar-bottom {
  margin-top: auto; padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.sidebar-bottom a { display: block; color: rgba(255,255,255,0.45); font-size: 11px; text-decoration: none; padding: 4px 0; }
.sidebar-bottom a:hover { color: var(--or-mid); }

/* ---- Main ---- */
.main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Topbar ---- */
.topbar {
  height: var(--header-h); background: var(--white);
  border-bottom: 1px solid var(--gray-2); padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.breadcrumb { font-size: 11px; color: var(--gray-5); }
.breadcrumb span { color: var(--or-mid); font-weight: 600; }
.page-title { font-size: 16px; font-weight: 700; color: var(--gray-7); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-6); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--or);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.topbar-badge { background: var(--or-pale); color: var(--or-dark); border: 1px solid var(--or-mid); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 700; }

/* ---- Content ---- */
.content { padding: 20px 24px 32px; flex: 1; }

/* ---- Hero strip ---- */
.hero-strip {
  background: linear-gradient(135deg, var(--dark) 0%, #2D2E45 100%);
  border-radius: 10px; padding: 18px 24px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-left: 4px solid var(--or);
}
.hero-strip h1 { font-size: 18px; font-weight: 700; color: #fff; }
.hero-strip p { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.hero-strip .hero-meta { display: flex; gap: 20px; }
.hero-strip .hero-meta-item { text-align: center; }
.hero-strip .hero-meta-item .hm-val { font-size: 22px; font-weight: 800; color: var(--or-mid); }
.hero-strip .hero-meta-item .hm-lbl { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.6px; }

/* ---- Stat Cards ---- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  border-radius: 10px; padding: 16px 14px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.stat-card.c-dark   { background: #1F2937; }
.stat-card.c-dark::before   { background: linear-gradient(90deg, #F59E0B, #D97706); }
.stat-card.c-orange { background: #FFF7ED; }
.stat-card.c-orange::before { background: linear-gradient(90deg, var(--or), var(--or-mid)); }
.stat-card.c-green  { background: #ECFDF5; }
.stat-card.c-green::before  { background: linear-gradient(90deg, #10B981, #059669); }
.stat-card.c-blue   { background: #EFF6FF; }
.stat-card.c-blue::before   { background: linear-gradient(90deg, #3B82F6, #2563EB); }
.stat-card.c-purple { background: #F5F3FF; }
.stat-card.c-purple::before { background: linear-gradient(90deg, #8B5CF6, #7C3AED); }
.stat-card.c-red    { background: #FEF2F2; }
.stat-card.c-red::before    { background: linear-gradient(90deg, #EF4444, #DC2626); }
.stat-card.c-amber  { background: #FFFBEB; }
.stat-card.c-amber::before  { background: linear-gradient(90deg, #F59E0B, #D97706); }
.stat-card.c-teal   { background: #F0FDFA; }
.stat-card.c-teal::before   { background: linear-gradient(90deg, #14B8A6, #0D9488); }
.stat-card.c-dark .stat-label   { color: rgba(255,255,255,0.6); }
.stat-card.c-orange .stat-label { color: #92400E; }
.stat-card.c-green .stat-label  { color: #065F46; }
.stat-card.c-blue .stat-label   { color: #1E3A5F; }
.stat-card.c-purple .stat-label { color: #5B21B6; }
.stat-card.c-red .stat-label    { color: #991B1B; }
.stat-card.c-amber .stat-label  { color: #78350F; }
.stat-card.c-teal .stat-label   { color: #134E4A; }
.stat-card.c-dark .stat-value   { color: #FCD34D; }
.stat-card.c-orange .stat-value { color: #B45309; }
.stat-card.c-green .stat-value  { color: #047857; }
.stat-card.c-blue .stat-value   { color: #1D4ED8; }
.stat-card.c-purple .stat-value { color: #6D28D9; }
.stat-card.c-red .stat-value    { color: #DC2626; }
.stat-card.c-amber .stat-value  { color: #B45309; }
.stat-card.c-teal .stat-value   { color: #0F766E; }
.stat-icon { font-size: 18px; margin-bottom: 6px; display: block; }
.stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px; }
.stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; }
.stat-sub { font-size: 11px; margin-top: 4px; font-weight: 600; }

/* ---- Two-column layout ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.col-wide { grid-column: span 2; }

/* ---- Cards ---- */
.card { background: var(--white); border-radius: 10px; border: 1px solid var(--gray-2); margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--gray-2);
}
.card-header h2 { font-size: 14px; font-weight: 700; color: var(--gray-7); }
.card-header .card-hdr-right { display: flex; align-items: center; gap: 8px; }
.card-body { padding: 16px 18px; }
.card-body-flush { padding: 0; }

/* ---- Data Tables ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  background: var(--gray-7); color: #fff; padding: 9px 14px;
  text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.data-table td { padding: 9px 14px; border-bottom: 1px solid var(--gray-2); color: var(--gray-7); }
.data-table tbody tr:hover { background: var(--or-pale); }
.data-table tbody tr { cursor: pointer; transition: background 0.12s; }
.data-table th:first-child { border-radius: 0; }

/* ---- Tags / Badges ---- */
.tag { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.tag-green  { background: #D1FAE5; color: #065F46; }
.tag-or     { background: #FDE8D0; color: #7C2D12; }
.tag-blue   { background: #DBEAFE; color: #1E3A5F; }
.tag-red    { background: #FEE2E2; color: #7F1D1D; }
.tag-gray   { background: #E5E7EB; color: #374151; }
.tag-amber  { background: #FEF3C7; color: #78350F; }
.tag-orange { background: #FED7AA; color: #7C2D12; }
.tag-purple { background: #EDE9FE; color: #5B21B6; }
.tag-dark   { background: #1F2937; color: #F9FAFB; }
.tag-teal   { background: #CCFBF1; color: #134E4A; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 6px; font-family: inherit;
  font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.btn-sm  { padding: 6px 13px; font-size: 12px; }
.btn-md  { padding: 8px 18px; font-size: 13px; }
.btn-primary   { background: var(--or); color: #fff; }
.btn-primary:hover   { background: var(--or-dark); }
.btn-secondary { background: var(--white); color: var(--gray-7); border: 1px solid var(--gray-3); }
.btn-secondary:hover { border-color: var(--gray-4); background: var(--gray-1); }
.btn-ghost     { background: transparent; color: var(--or); }
.btn-ghost:hover     { background: var(--or-light); }
.btn-danger    { background: #DC2626; color: #fff; }
.btn-danger:hover    { background: #B91C1C; }
.btn-green     { background: #059669; color: #fff; }
.btn-green:hover     { background: #047857; }

/* ---- Toolbar ---- */
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 180px; padding: 8px 13px; border: 1px solid var(--gray-3); border-radius: 7px; font-size: 13px; font-family: inherit; }
.search-box:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(232,103,26,0.12); }
.filter-sel { padding: 8px 12px; border: 1px solid var(--gray-3); border-radius: 7px; font-size: 12px; font-family: inherit; background: var(--white); color: var(--gray-7); }
.search-input { padding: 7px 12px; border: 1px solid var(--gray-3); border-radius: 7px; font-family: inherit; font-size: 13px; color: var(--gray-7); background: var(--white); }
.search-input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 2px rgba(232,103,26,0.12); }

/* ---- Form controls (used in modals / detail panels) ---- */
.form-label { font-size: 10px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.form-control { width: 100%; padding: 8px 11px; border: 1px solid var(--gray-3); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--gray-7); background: var(--white); }
.form-control:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(232,103,26,0.1); }
.form-control[readonly], .form-control[disabled] { background: #F8F8F8; color: var(--gray-5); cursor: default; }
textarea.form-control { resize: vertical; }

/* ---- Tab buttons (alias for .tab) ---- */
.tab-btn { padding: 8px 14px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.75); cursor: pointer; border: none; white-space: nowrap; transition: all 0.2s; border-radius: 20px; background: transparent; font-family: inherit; }
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.18); }
.tab-btn.active { color: var(--or); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); font-weight: 700; }

/* ---- Inline modal (respects sidebar) ---- */
.modal-overlay { display:none; position:fixed; top:0; left:var(--sidebar-w); right:0; bottom:0; background:rgba(0,0,0,0.55); z-index:500; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,0.3); max-height:90vh; overflow-y:auto; }

/* ---- Progress bar ---- */
.prog-bar { background: var(--gray-2); border-radius: 4px; height: 7px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 4px; }

/* ---- Expiry bar ---- */
.expiry-ok   { background: #10B981; }
.expiry-warn { background: #F59E0B; }
.expiry-crit { background: #EF4444; }

/* ═══════════════════════════════════════════════════════════
   DETAIL MODAL (covers main area only, sidebar stays visible)
═══════════════════════════════════════════════════════════ */
.detail-overlay { display:none; position:fixed; top:0; left:var(--sidebar-w); right:0; bottom:0; background:rgba(0,0,0,0.55); z-index:200; overflow-y:auto; }
.detail-overlay.active { display:block; }
.detail-panel { background:#F4F5F7; width:100%; min-height:100%; animation:slideUp 0.25s ease; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.detail-header { background:linear-gradient(135deg,#1A1B2E,#2D2E45); color:#fff; padding:18px 28px; display:flex; align-items:center; gap:16px; border-bottom:3px solid var(--or); }
.detail-avatar { width:54px; height:54px; border-radius:10px; background:var(--or); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#fff; border:3px solid rgba(255,255,255,0.25); flex-shrink:0; }
.detail-avatar.round { border-radius:50%; }
.detail-info h2 { font-size:18px; font-weight:700; }
.detail-info p  { font-size:11px; color:#F5A96A; margin-top:2px; }
.detail-badges  { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.detail-badges span { padding:2px 10px; border-radius:10px; font-size:10px; font-weight:700; }
.detail-close { margin-left:auto; background:none; border:2px solid rgba(255,255,255,0.3); color:#fff; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.detail-close:hover { background:rgba(255,255,255,0.1); }
.detail-actions { display:flex; gap:8px; align-items:center; }

/* Tab Bar */
.tab-bar { display:flex; background:linear-gradient(135deg,#F5A96A 0%,#E8671A 100%); padding:8px 16px; overflow-x:auto; gap:4px; }
.tab-bar::-webkit-scrollbar { height:3px; } .tab-bar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.4); border-radius:2px; }
.tab { padding:8px 14px; font-size:11px; font-weight:600; color:rgba(255,255,255,0.75); cursor:pointer; border:none; white-space:nowrap; transition:all 0.2s; border-radius:20px; background:transparent; font-family:inherit; }
.tab:hover { color:#fff; background:rgba(255,255,255,0.18); }
.tab.active { color:var(--or); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.12); font-weight:700; }
.tab-content { display:none; padding:20px 28px; } .tab-content.active { display:block; }

/* Form grid inside tabs */
.form-section { margin-bottom:18px; }
.form-section-title { font-size:13px; font-weight:700; color:var(--dark); padding-bottom:6px; border-bottom:2px solid var(--or); margin-bottom:12px; }
.form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.form-grid.two   { grid-template-columns:repeat(2,1fr); }
.form-grid.four  { grid-template-columns:repeat(4,1fr); }
.form-group { display:flex; flex-direction:column; gap:3px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; }
.form-group .fval { font-size:13px; color:#222; padding:7px 11px; background:#fff; border:1px solid #E8E8E8; border-radius:6px; min-height:32px; }

/* Risk score gauge */
.risk-gauge-wrap { display:flex; align-items:center; gap:18px; padding:16px 0; }
.risk-circle { width:90px; height:90px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; border:6px solid; flex-shrink:0; }
.risk-circle .rc-val { font-size:24px; font-weight:800; line-height:1; }
.risk-circle .rc-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.risk-low    { border-color:#10B981; color:#059669; }
.risk-medium { border-color:#F59E0B; color:#D97706; }
.risk-high   { border-color:#EF4444; color:#DC2626; }
.risk-detail { flex:1; }
.risk-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.risk-row-label { font-size:12px; color:#666; width:140px; flex-shrink:0; }
.risk-row-bar { flex:1; background:#E8E8E8; border-radius:4px; height:8px; overflow:hidden; }
.risk-row-fill { height:100%; border-radius:4px; }
.risk-row-val { font-size:12px; font-weight:700; color:#222; width:30px; text-align:right; flex-shrink:0; }

/* Toast */
#toast { position:fixed; bottom:24px; right:24px; z-index:9999; }
.toast-msg { background:var(--dark); color:#fff; padding:12px 20px; border-radius:8px; font-size:13px; border-left:4px solid var(--or); box-shadow:0 4px 20px rgba(0,0,0,0.25); }

/* Mini timeline */
.timeline { list-style:none; padding:0; }
.timeline li { display:flex; gap:12px; padding-bottom:14px; position:relative; }
.timeline li::before { content:''; position:absolute; left:10px; top:22px; bottom:0; width:2px; background:var(--gray-2); }
.timeline li:last-child::before { display:none; }
.tl-dot { width:22px; height:22px; border-radius:50%; border:3px solid var(--or); background:#fff; flex-shrink:0; margin-top:2px; }
.tl-dot.tl-green  { border-color:#10B981; }
.tl-dot.tl-red    { border-color:#EF4444; }
.tl-dot.tl-amber  { border-color:#F59E0B; }
.tl-body .tl-date { font-size:10px; color:#999; }
.tl-body .tl-text { font-size:13px; color:#222; font-weight:500; }
.tl-body .tl-sub  { font-size:11px; color:#666; margin-top:2px; }