/* ═════ CarrierIQ stylesheet ═════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0d0f12; --bg2:#13161b; --bg3:#1a1e25; --bg4:#222730;
  --border:#2a2f3a; --border2:#353c4a;
  --text:#e8eaf0; --text2:#9aa0b0; --text3:#5a6070;
  --accent:#3b82f6; --accent2:#1d4ed8;
  --accentg:#10b981; --accentr:#ef4444; --accenty:#f59e0b;
  --radius:8px; --radius2:12px; --radius3:16px;
}
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; font-size:14px; line-height:1.5;
}
button, input, select { font-family:inherit; cursor:pointer; }
.app { display:flex; flex-direction:column; min-height:100vh; }

/* Top bar */
.topbar {
  height:52px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 24px; gap:20px;
  position:sticky; top:0; z-index:100;
}
.logo { font-size:16px; font-weight:600; letter-spacing:-0.5px; }
.logo span { color:var(--accent); }
.topbar-sep { width:1px; height:20px; background:var(--border); }
@keyframes spin { to { transform:rotate(360deg); } }

/* Login + Search */
#login-page, #search-page {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 52px); padding:40px 20px; gap:32px;
}
.login-form {
  width:100%; max-width:380px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius2); padding:28px;
  display:flex; flex-direction:column; gap:16px;
}
.login-form input {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:10px 12px;
  font-size:14px; outline:none; transition:border-color .15s;
}
.login-form input:focus { border-color:var(--accent); }
.login-btn {
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius);
  padding:11px; font-size:14px; font-weight:500; transition:background .15s;
}
.login-btn:hover { background:var(--accent2); }
.search-hero { text-align:center; }
.search-hero h1 { font-size:36px; font-weight:300; letter-spacing:-1px; margin-bottom:8px; }
.search-hero h1 span { color:var(--accent); font-weight:600; }
.search-hero p { color:var(--text2); font-size:15px; }
.search-box {
  width:100%; max-width:640px; background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius3); padding:6px 6px 6px 20px;
  display:flex; gap:8px; align-items:center;
}
.search-box input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:15px; padding:8px 0;
}
.search-box input::placeholder { color:var(--text3); }
.search-tabs {
  display:flex; gap:2px; background:var(--bg3); border-radius:var(--radius); padding:3px;
}
.stab {
  padding:5px 12px; border-radius:6px; border:none; background:none;
  color:var(--text2); font-size:12px; font-weight:500; transition:all .15s;
}
.stab.active { background:var(--accent); color:#fff; }
.stab:hover:not(.active) { background:var(--bg4); color:var(--text); }
.search-btn {
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:10px 20px; font-size:14px; font-weight:500; transition:background .15s;
}
.search-btn:hover { background:var(--accent2); }
.search-result-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:6px; cursor:pointer; transition:all .15s;
}
.search-result-row:hover { border-color:var(--border2); background:var(--bg3); }

/* Search result card — richer multi-line layout */
.search-result-card {
  padding:16px 20px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:10px; cursor:pointer; transition:all .15s;
}
.search-result-card:hover { border-color:var(--accent); background:var(--bg3); }
.src-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.src-tag {
  font-size:10px; font-weight:700; letter-spacing:0.5px;
  padding:3px 8px; border-radius:4px;
}
.src-tag-active   { color:#6ee7b7; background:#0d3320; }
.src-tag-inactive { color:#f87171; background:#3a1010; }
.src-fleet {
  font-size:11px; color:var(--text3); letter-spacing:0.5px;
}
.src-fleet b { color:var(--text); font-weight:600; }
.src-name {
  font-size:18px; font-weight:600; color:var(--text);
  margin-bottom:6px; letter-spacing:-0.2px;
}
.src-ids {
  display:flex; gap:14px; margin-bottom:10px;
}
.src-id {
  font-size:12px; color:var(--text2); font-family:ui-monospace, monospace;
}
.src-addr {
  font-size:13px; color:var(--accent); margin-top:4px;
}

/* Company page shell */
#company-page { display:none; padding:24px; max-width:1500px; margin:0 auto; }
.back-btn {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text2); font-size:13px; margin-bottom:20px; cursor:pointer;
}
.back-btn:hover { color:var(--text); }
#company-loading {
  display:none; align-items:center; justify-content:center;
  padding:60px; flex-direction:column; gap:12px; min-height:300px;
}
.spinner {
  width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite;
}

/* Header card */
.c-header {
  display:grid; grid-template-columns:1fr auto; gap:20px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:24px; margin-bottom:20px;
}
.c-name { font-size:26px; font-weight:600; letter-spacing:-0.5px; margin-bottom:6px; }
.c-ids { display:flex; gap:12px; margin-bottom:20px; }
.badge {
  padding:3px 10px; border-radius:4px; font-size:12px;
  font-family:'DM Mono',monospace; font-weight:500;
}
.badge-blue  { background:#1d3a6e; color:#60a5fa; }
.badge-green { background:#0d3320; color:#34d399; }
.badge-red   { background:#3a1010; color:#f87171; }
.contact-label {
  font-size:11px; font-weight:600; letter-spacing:1px;
  color:var(--text3); text-transform:uppercase; margin-bottom:10px;
}
.contact-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:7px; font-size:13px; }
.contact-link { color:var(--accent); cursor:pointer; }
.contact-link:hover { text-decoration:underline; }
.c-meta { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.meta-item { text-align:right; }
.meta-label { font-size:11px; color:var(--text3); margin-bottom:2px; }
.meta-value { font-size:13px; font-weight:500; }
.fleet-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  padding-top:16px; border-top:1px solid var(--border);
}
.fleet-card { background:var(--bg3); border-radius:var(--radius); padding:12px; text-align:center; }
.fleet-num  { font-size:20px; font-weight:600; margin-bottom:2px; }
.fleet-lbl  { font-size:11px; color:var(--text3); }

/* Sections */
.section-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:20px; margin-bottom:20px;
}
.section-title {
  font-size:14px; font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
}
.period-btn-group { display:flex; gap:4px; }
.pbtn {
  padding:4px 10px; border-radius:6px; border:1px solid var(--border);
  background:none; color:var(--text2); font-size:12px; transition:all .15s;
}
.pbtn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.pbtn:hover:not(.active) { border-color:var(--border2); color:var(--text); }

/* Map */
#us-map { width:100%; height:340px; overflow:hidden; position:relative; }
#us-map svg { display:block; max-width:100%; }
.map-legend { display:flex; gap:8px; margin-top:8px; }
.map-toggle {
  display:flex; align-items:center; gap:5px;
  background:none; border:1px solid transparent; padding:3px 8px; border-radius:6px;
  cursor:pointer;
  transition:all .15s;
}
.map-toggle:hover  { background:var(--bg3); }
.map-toggle.dim    { opacity:0.3; }
/* Active KPI = the metric currently driving the heatmap. */
.map-toggle.active {
  background:var(--bg3);
  border-color:var(--border2);
}
.map-toggle.active span:last-child { color:var(--text); font-weight:600; }
/* Non-clickable stat (e.g. States count) — same visual as map-toggle but inert. */
.map-stat {
  display:flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:6px;
  border:1px solid transparent;
}
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* State data table — sits under the map.
   Compact, dark, sortable-looking but currently sorted server-side desc.
   Numeric columns right-aligned, monospace for easy column scanning. */
#state-table-container { margin-top:18px; }
.state-table-empty {
  text-align:center; color:var(--text3); font-size:13px;
  padding:20px; border:1px dashed var(--border); border-radius:var(--radius);
}
.state-table-wrap {
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg2); overflow:hidden;
}
.state-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.state-table thead th {
  background:var(--bg3); color:var(--text3); font-weight:600;
  font-size:11px; letter-spacing:0.5px; text-transform:uppercase;
  padding:10px 14px; border-bottom:1px solid var(--border);
  text-align:left;
}
/* Sortable column headers — clickable, with a sort indicator. */
.state-table thead th.st-sortable {
  cursor:pointer; user-select:none;
  transition:background .15s, color .15s;
}
.state-table thead th.st-sortable:hover { background:var(--border); color:var(--text); }
.st-sort-arrow {
  display:inline-block; margin-left:5px; font-size:9px;
  color:var(--text3); opacity:0.5; transition:opacity .15s;
}
.st-sort-arrow.active { color:var(--accent); opacity:1; }
.state-table th.st-num,
.state-table td.st-num {
  text-align:right; font-family:ui-monospace, monospace;
  white-space:nowrap;
}
.state-table tbody td {
  padding:9px 14px; border-bottom:1px solid var(--border);
  color:var(--text2);
}
.state-table tbody tr:last-child td { border-bottom:none; }
.state-table tbody tr:hover { background:var(--bg3); }
.state-table td.st-state { color:var(--text); font-weight:500; }

/* Tabs */
.toggle-row { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.toggle-btn {
  padding:8px 20px; border-radius:var(--radius); border:1px solid var(--border);
  background:none; color:var(--text2); font-size:13px; font-weight:500; transition:all .15s;
}
.toggle-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.toggle-btn:hover:not(.active) { border-color:var(--border2); color:var(--text); }

/* KPIs */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.kpi {
  background:var(--bg3); border-radius:var(--radius2);
  padding:16px; border:1px solid var(--border);
}
.kpi-val { font-size:28px; font-weight:600; letter-spacing:-1px; margin-bottom:2px; }
.kpi-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }
.kpi-sub  { font-size:12px; color:var(--text2); margin-top:6px; }
.kpi-green  .kpi-val { color:var(--accentg); }
.kpi-red    .kpi-val { color:var(--accentr); }
.kpi-yellow .kpi-val { color:var(--accenty); }
.kpi-blue   .kpi-val { color:var(--accent); }
.chart-wrap { height:200px; position:relative; margin-bottom:20px; }
.crash-chart-wrap { height:260px; position:relative; }

/* Filters */
.filters-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.filter-select, .sort-select {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:6px 10px;
  font-size:12px; outline:none;
}
.search-input {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); padding:8px 12px;
  font-size:13px; outline:none; width:100%;
}
.search-input::placeholder { color:var(--text3); }
.search-input:focus, .filter-select:focus { border-color:var(--accent); }

/* Tables */
.insp-table, .fleet-table, .summary-table, .viol-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.insp-table th, .fleet-table th {
  text-align:left; padding:8px 12px; font-size:11px; font-weight:600;
  color:var(--text3); text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.insp-table td, .fleet-table td {
  padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle;
}
.insp-table tr:last-child td, .fleet-table tr:last-child td { border-bottom:none; }
.insp-table tbody tr, .fleet-table tbody tr { transition:background .1s; }
.insp-table tbody tr:hover, .fleet-table tbody tr:hover { background:var(--bg3); }
.insp-table tbody tr.expanded { background:var(--bg3); }
.clean-tag { color:var(--accentg); font-weight:500; font-size:12px; }
.viol-tag  { color:var(--accentr); font-weight:500; font-size:12px; }
.oos-pill {
  display:inline-block; padding:1px 6px; background:#3a1010; color:#f87171;
  border-radius:3px; font-size:10px; font-weight:600; margin-left:4px;
}
.viol-detail-row td { padding:0; background:var(--bg3); }
.viol-detail-inner  { padding:12px 12px 12px 40px; }
.viol-detail-table  { width:100%; border-collapse:collapse; font-size:12px; }
.viol-detail-table th {
  text-align:left; padding:6px 10px; font-size:10px; font-weight:600;
  color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; background:var(--bg4);
}
.viol-detail-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
.viol-detail-table tr:last-child td { border-bottom:none; }
.severity-dot {
  display:inline-block; width:20px; height:20px; border-radius:50%;
  line-height:20px; text-align:center; font-size:11px; font-weight:600; background:var(--bg4);
}

/* Crash KPIs */
.crash-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.crash-kpi {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius2); padding:16px 18px;
}
.ckpi-label {
  font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--text3); margin-bottom:8px;
}
.ckpi-val { font-size:30px; font-weight:600; letter-spacing:-1.5px; line-height:1; margin-bottom:6px; }
.ckpi-sub { font-size:11px; color:var(--text3); }
.ckpi-red    .ckpi-val { color:var(--accentr); }
.ckpi-yellow .ckpi-val { color:var(--accenty); }
.ckpi-blue   .ckpi-val { color:var(--accent); }

/* Crash chart card + table */
.chart-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.crash-meta-right { text-align:right; }
.crash-count-big { font-size:15px; font-weight:600; color:var(--accenty); }
.crash-pills { display:flex; gap:6px; justify-content:flex-end; margin:6px 0; }
.cpill { padding:2px 10px; border-radius:4px; font-size:11px; font-weight:600; }
.cpill-fatal   { background:#3a1010; color:#f87171; }
.cpill-injured { background:#1a1035; color:#a78bfa; }
.cpill-injury  { background:#2e2000; color:#fbbf24; }
.cpill-tow     { background:#0d3320; color:#6ee7b7; }
.chart-legend { display:flex; gap:20px; margin-top:12px; flex-wrap:wrap; }
.cleg { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text2); }
.cswatch { width:10px; height:10px; border-radius:2px; }
.sev-pills { display:flex; gap:4px; }
.sev-pill {
  padding:5px 12px; border-radius:20px; border:1px solid var(--border2);
  background:none; color:var(--text2); font-size:12px; font-weight:500;
  cursor:pointer; transition:all .15s;
}
.sev-pill:hover { background:var(--bg3); color:var(--text); }
.sev-pill.active-fatal  { background:#3a1010; border-color:#f87171; color:#f87171; }
.sev-pill.active-injury { background:#2e2000; border-color:#fbbf24; color:#fbbf24; }
.sev-pill.active-tow    { background:#0d3320; border-color:#34d399; color:#34d399; }
.crash-row {
  border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:6px; overflow:hidden; transition:border-color .15s;
}
.crash-row:hover { border-color:var(--border2); }
.crash-row-header {
  display:grid; grid-template-columns:110px 90px 1fr auto;
  align-items:center; gap:12px; padding:12px 16px; cursor:pointer;
}
.crash-sev-badge {
  display:inline-block; padding:3px 8px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:0.5px; white-space:nowrap;
}
.csb-fatal  { background:#3a1010; color:#f87171; }
.csb-injury { background:#2e2000; color:#fbbf24; }
.csb-tow    { background:#0d3320; color:#34d399; }
.csb-other  { background:var(--bg4); color:var(--text2); }
.crash-detail { display:none; background:var(--bg3); border-top:1px solid var(--border); padding:16px; }
.crash-detail.open { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.detail-label {
  font-size:10px; font-weight:600; letter-spacing:0.8px;
  text-transform:uppercase; color:var(--text3); margin-bottom:3px;
}
.detail-val { font-size:13px; font-weight:500; }

/* Safety Summary tables */
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.summary-table { font-size:12px; }
.summary-table th {
  text-align:left; padding:7px 10px; font-size:10px; font-weight:600;
  color:var(--text3); text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--border); white-space:nowrap; background:var(--bg3);
}
.summary-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
.summary-table tr:last-child td { border-bottom:none; }
.summary-table .row-label {
  font-weight:600; color:var(--text2); font-size:11px;
  text-transform:uppercase; letter-spacing:0.3px;
}

/* SMS Trends */
.basic-cards-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:20px; }
.basic-score-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 14px;
}
.bsc-label {
  font-size:10px; font-weight:600; letter-spacing:0.8px;
  text-transform:uppercase; color:var(--text3); margin-bottom:6px;
}
.bsc-val  { font-size:22px; font-weight:600; letter-spacing:-0.5px; margin-bottom:4px; }
.bsc-date { font-size:10px; color:var(--text3); }
.sms-chart-wrap { height:240px; position:relative; margin-bottom:20px; }
.viol-table th {
  text-align:left; padding:7px 10px; font-size:10px; font-weight:600;
  color:var(--text3); text-transform:uppercase; letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
.viol-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.viol-table tbody tr:hover { background:var(--bg3); }
.basic-pill { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:600; }
.bp-unsafe  { background:#2e1a00; color:#fbbf24; }
.bp-vehicle { background:#0c2240; color:#60a5fa; }
.bp-driver  { background:#0d3320; color:#34d399; }
.bp-hos     { background:#1a1035; color:#a78bfa; }
.bp-hazmat  { background:#1a0a0a; color:#f87171; }
.bp-other   { background:var(--bg4); color:var(--text2); }

/* Fleet */
.fleet-kpi {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
}
.fkpi-label {
  font-size:10px; font-weight:600; letter-spacing:0.8px;
  text-transform:uppercase; color:var(--text3); margin-bottom:8px;
}
.fkpi-val { font-size:24px; font-weight:600; letter-spacing:-1px; margin-bottom:2px; }
.fkpi-sub { font-size:11px; color:var(--text3); }
.vin-link { color:var(--accent); font-family:'DM Mono',monospace; font-size:11px; }
.type-pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.type-power   { background:#0c2240; color:#60a5fa; }
.type-trailer { background:#0d3320; color:#34d399; }
.fleet-filter-pills { display:flex; gap:4px; flex-wrap:wrap; }
.fleet-pill {
  padding:4px 12px; border-radius:20px; border:1px solid var(--border);
  background:none; color:var(--text2); font-size:12px; transition:all .15s;
}
.fleet-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.fleet-pill:hover:not(.active) { border-color:var(--border2); color:var(--text); }

/* Pagination */
.page-btn {
  width:28px; height:28px; border-radius:var(--radius); border:1px solid var(--border);
  background:none; color:var(--text2); font-size:18px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.page-btn:hover:not(:disabled) { border-color:var(--border2); color:var(--text); background:var(--bg3); }
.page-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* ═════ Force password change screen ═════ */
#forcepw-page {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 52px); padding:40px 20px; gap:32px;
}

/* ═════ Admin panel ═════ */
#admin-page { display:none; padding:24px; max-width:1500px; margin:0 auto; }
#admin-page .back-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

#admin-users-tbody td { vertical-align:middle; }
.user-status-active   { color:var(--accentg); font-weight:500; }
.user-status-inactive { color:var(--accentr); font-weight:500; }
.user-role-admin {
  background:#1a1035; color:#a78bfa;
  padding:2px 8px; border-radius:3px; font-size:10px; font-weight:600;
}
.user-role-user {
  background:var(--bg4); color:var(--text2);
  padding:2px 8px; border-radius:3px; font-size:10px; font-weight:600;
}
.admin-action-btn {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--text2); padding:4px 10px; font-size:11px;
  cursor:pointer; transition:all .15s; margin-left:6px;
}
.admin-action-btn:hover { background:var(--bg3); color:var(--text); border-color:var(--border2); }
.admin-action-btn.danger { color:#f87171; border-color:#3a1010; }
.admin-action-btn.danger:hover { background:#1a0808; }