:root {
  --brand: #f28b00;
  --brand-2: #ff9d1c;
  --brand-soft: #fff4e6;
  --ink: #242424;
  --ink-2: #111827;
  --sidebar: #242424;
  --sidebar-hover: #343434;
  --muted: #6b7280;
  --muted-2: #94a3b8;
  --line: #e7e9ee;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --green: #16a34a;
  --green-soft: #eaf8ee;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --gray: #94a3b8;
  --gray-soft: #f1f5f9;
  --blue: #2563eb;
  --shadow: 0 18px 48px rgba(15,23,42,.14);
  --shadow-soft: 0 8px 24px rgba(15,23,42,.08);
  --radius: 18px;
  --sidebar-collapsed: 72px;
  --sidebar-open: 238px;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:#f4f5f7; }
body { overflow:hidden; }
button, input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
svg { width:18px; height:18px; stroke-width:2; }

.toast-host { position:fixed; top:18px; right:18px; z-index:10000; display:grid; gap:10px; }
.toast { background:#202124; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); max-width:360px; border-left:4px solid var(--brand); }
.toast.error { border-left-color:var(--red); }

/* LOGIN */
.login-view { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(390px,.92fr); background:#fff; }
.login-brand-panel { position:relative; overflow:hidden; padding:60px clamp(48px,6vw,100px); display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:linear-gradient(145deg,#1f1f1f 0%,#2a2a2a 62%,#171717 100%); }
.login-brand-panel::before { content:""; position:absolute; width:560px; height:560px; border:90px solid rgba(242,139,0,.11); border-radius:50%; right:-210px; bottom:-260px; }
.login-brand-panel::after { content:""; position:absolute; width:280px; height:280px; background:rgba(242,139,0,.08); border-radius:48px; transform:rotate(25deg); right:80px; top:-120px; }
.login-logo { width:min(270px,70%); height:auto; position:relative; z-index:1; filter:drop-shadow(0 7px 18px rgba(0,0,0,.2)); }
.login-copy { position:relative; z-index:1; max-width:650px; }
.login-copy h1 { font-size:clamp(44px,5vw,72px); line-height:.98; letter-spacing:-.055em; margin:13px 0 20px; max-width:680px; }
.login-copy p { font-size:18px; color:#d7d7d7; line-height:1.6; max-width:620px; }
.eyebrow { display:inline-block; font-size:11px; letter-spacing:.14em; font-weight:900; color:#b86000; text-transform:uppercase; }
.eyebrow.light { color:#ffb34d; }
.login-feature-row { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px 24px; color:#c7c7c7; font-size:12px; }
.login-feature-row b { color:var(--brand-2); margin-right:5px; }
.login-form-panel { display:grid; place-items:center; padding:45px; background:linear-gradient(180deg,#fff,#fafafa); }
.login-card { width:min(430px,100%); }
.login-card h2 { font-size:40px; letter-spacing:-.035em; margin:9px 0 6px; }
.muted { color:var(--muted); margin:0 0 30px; }
.login-logo-mobile { display:none; max-width:230px; margin:0 auto 34px; }
.field-label { display:block; font-size:12px; font-weight:800; margin:16px 0 7px; color:#3f4650; }
.login-card input[type=text], .login-card input[type=password] { width:100%; height:50px; border:1px solid #dfe3e8; border-radius:12px; outline:none; padding:0 14px; background:#fff; transition:.18s; }
.login-card input:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(242,139,0,.11); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:52px !important; }
.ghost-icon { position:absolute; right:7px; top:7px; width:36px; height:36px; border:0; border-radius:9px; background:transparent; color:#717782; display:grid; place-items:center; }
.ghost-icon:hover { background:#f3f4f6; }
.remember-row { margin:18px 0 22px; display:flex; align-items:center; gap:9px; color:#636b75; font-size:12px; }
.remember-row input { accent-color:var(--brand); }
.login-error { margin-top:14px; padding:11px 13px; border-radius:10px; background:var(--red-soft); color:#b91c1c; font-size:12px; }

.btn-primary, .btn-secondary { min-height:42px; border-radius:11px; padding:0 15px; border:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:12px; transition:.18s; }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 8px 18px rgba(242,139,0,.22); }
.login-card .btn-primary { width:100%; height:52px; font-size:13px; }
.btn-primary:hover { transform:translateY(-1px); }
.btn-primary:disabled { opacity:.6; cursor:default; transform:none; }
.btn-primary.small { min-height:39px; }
.btn-secondary { background:#fff; color:#343a43; border:1px solid #dfe3e8; }
.btn-secondary:hover { border-color:#c7ccd2; background:#f9fafb; }

/* SHELL + SIDEBAR */
.app-shell { display:flex; height:100vh; width:100vw; overflow:hidden; }
.sidebar { width:var(--sidebar-open); flex:0 0 var(--sidebar-open); height:100%; background:linear-gradient(180deg,#242424 0%,#1e1e1e 100%); color:#fff; padding:13px 10px 12px; display:flex; flex-direction:column; z-index:900; transition:width .22s ease,flex-basis .22s ease; border-right:1px solid rgba(255,255,255,.04); box-shadow:8px 0 28px rgba(0,0,0,.09); }
.sidebar.collapsed { width:var(--sidebar-collapsed); flex-basis:var(--sidebar-collapsed); }
.sidebar-brand { height:60px; display:flex; align-items:center; padding:0 9px; overflow:hidden; }
.sidebar-logo { width:164px; max-height:46px; object-fit:contain; object-position:left center; }
.sidebar-monogram { display:none; width:39px; height:39px; border-radius:11px; background:#fff; color:#2e2e2e; font-weight:950; place-items:center; position:relative; letter-spacing:-.08em; }
.sidebar-monogram::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--brand); right:4px; top:4px; }
.sidebar.collapsed .sidebar-logo { display:none; }
.sidebar.collapsed .sidebar-monogram { display:grid; }
.sidebar-toggle, .nav-item { width:100%; border:0; color:#c8c8c8; background:transparent; display:flex; align-items:center; gap:13px; text-align:left; border-radius:11px; transition:.16s; }
.sidebar-toggle { min-height:41px; padding:0 13px; margin:2px 0 10px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); border-radius:0; color:#9e9e9e; }
.nav-item { height:45px; padding:0 13px; }
.sidebar-toggle:hover, .nav-item:hover { background:rgba(255,255,255,.065); color:#fff; }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(242,139,0,.98),rgba(255,157,28,.84)); box-shadow:0 8px 20px rgba(242,139,0,.16); }
.nav-icon { width:20px; min-width:20px; height:20px; }
.nav-label { white-space:nowrap; font-size:12px; font-weight:750; overflow:hidden; }
.sidebar.collapsed .nav-label { display:none; }
.sidebar-nav { display:grid; gap:4px; }
.sidebar-bottom { margin-top:auto; display:grid; gap:4px; }

.workspace { position:relative; flex:1; min-width:0; height:100%; overflow:hidden; background:#f4f5f7; }
.page-view { position:absolute; inset:0; }
.content-page { overflow:auto; padding:34px clamp(22px,3vw,46px) 44px; background:#f5f6f8; }
.map-page { overflow:hidden; }

/* MAP */
.map { position:absolute; inset:0; z-index:1; background:#dfe5e8; }
.glass { background:rgba(255,255,255,.95); backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); }
.map-topbar { position:absolute; z-index:500; left:20px; right:20px; top:18px; min-height:52px; display:flex; gap:9px; align-items:center; pointer-events:none; background:transparent; }
.map-topbar > * { pointer-events:auto; }
.search-box { height:48px; width:min(460px,42vw); background:#fff; border:1px solid rgba(219,223,229,.95); border-radius:13px; display:flex; align-items:center; gap:11px; padding:0 14px; box-shadow:var(--shadow-soft); }
.search-box > svg { color:#7a828c; flex:0 0 auto; }
.search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; height:100%; color:#20242a; }
.icon-button { width:44px; height:44px; border:1px solid #dfe3e8; background:#fff; border-radius:12px; display:grid; place-items:center; color:#454c55; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.icon-button:hover { color:var(--brand); border-color:#d3d6db; }
.map-topbar .icon-button { width:48px; height:48px; }
.topbar-spacer { flex:1; }
.company-pill,.live-pill,.profile-pill { min-height:48px; background:#fff; border:1px solid #e1e4e8; border-radius:13px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:9px; padding:0 12px; }
.profile-pill { color:inherit; }
.company-pill strong,.live-pill strong,.profile-pill strong { display:block; font-size:11px; line-height:1.15; white-space:nowrap; }
.company-pill small,.live-pill small,.profile-pill small { display:block; font-size:9px; color:#7c838c; margin-top:3px; white-space:nowrap; }
.company-dot,.live-dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.company-dot { background:var(--brand); box-shadow:0 0 0 5px rgba(242,139,0,.11); }
.live-dot { background:#20b15a; box-shadow:0 0 0 5px rgba(32,177,90,.10); }
.user-avatar { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:900; color:#fff; background:#333; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }

.fleet-kpis { position:absolute; z-index:450; top:82px; left:20px; display:grid; grid-template-columns:repeat(4,minmax(132px,1fr)); gap:8px; width:min(720px,calc(100% - 390px)); }
.map-kpi { min-height:68px; background:rgba(255,255,255,.95); border:1px solid rgba(224,228,233,.96); border-radius:14px; box-shadow:0 9px 24px rgba(15,23,42,.08); display:flex; align-items:center; gap:11px; padding:11px 13px; }
.map-kpi small { display:block; font-size:8px; color:#757e89; font-weight:900; letter-spacing:.055em; }
.map-kpi strong { font-size:23px; line-height:1; }
.kpi-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#f2f4f7; color:#57606a; }
.kpi-icon svg { width:17px; height:17px; }
.kpi-icon.moving { background:var(--green-soft); color:var(--green); }
.kpi-icon.stopped { background:var(--brand-soft); color:#c86c00; }
.kpi-icon.offline { background:var(--gray-soft); color:#7d8996; }

.vehicle-panel { position:absolute; z-index:480; left:20px; bottom:20px; width:370px; max-height:43vh; border:1px solid #e2e5e9; border-radius:15px; box-shadow:var(--shadow); overflow:hidden; transition:.2s; }
.vehicle-panel.minimized { max-height:52px; }
.vehicle-panel.minimized .vehicle-list { display:none; }
.vehicle-panel-head { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 15px; border-bottom:1px solid #eef0f2; }
.vehicle-panel-head > div { display:flex; align-items:center; gap:8px; }
.count-badge { display:inline-grid; place-items:center; min-width:24px; height:22px; border-radius:999px; padding:0 7px; background:var(--brand-soft); color:#ad5c00; font-size:10px; font-weight:900; }
.panel-icon,.drawer-close { width:32px; height:32px; border:0; border-radius:9px; background:#f1f3f5; color:#626a74; display:grid; place-items:center; }
.vehicle-list { max-height:calc(43vh - 52px); overflow:auto; }
.vehicle-row { width:100%; border:0; border-bottom:1px solid #eef0f2; background:transparent; padding:11px 13px; display:grid; grid-template-columns:11px 1fr auto; gap:10px; align-items:center; text-align:left; }
.vehicle-row:hover { background:#fff8ef; }
.vehicle-row.selected { background:#fff3e4; }
.vehicle-status-dot,.legend-dot { width:9px; height:9px; border-radius:50%; }
.vehicle-status-dot.moving,.legend-dot.moving { background:var(--green); }
.vehicle-status-dot.stopped,.legend-dot.stopped { background:var(--brand); }
.vehicle-status-dot.offline,.legend-dot.offline { background:var(--gray); }
.vehicle-main strong { display:block; font-size:12px; }
.vehicle-main small { display:block; color:#747d87; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; font-size:10px; }
.vehicle-speed { font-size:11px; font-weight:850; color:#3d444c; }

.vehicle-drawer { position:absolute; z-index:520; top:82px; right:20px; width:350px; border:1px solid #e0e4e8; border-radius:17px; box-shadow:var(--shadow); padding:19px; }
.drawer-head { display:flex; justify-content:space-between; gap:12px; }
.drawer-head small { color:#bd6600; font-weight:900; letter-spacing:.09em; font-size:9px; }
.drawer-head h2 { margin:4px 0 2px; font-size:26px; }
.drawer-head p { margin:0; color:#737b85; font-size:11px; }
.status-chip { display:inline-flex; align-items:center; min-height:26px; margin:12px 0; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:900; background:#f1f3f5; color:#555f69; }
.status-chip.moving { background:var(--green-soft); color:#16703a; }
.status-chip.stopped { background:var(--brand-soft); color:#a85b00; }
.status-chip.offline { background:var(--gray-soft); color:#687582; }
.drawer-metrics { border-top:1px solid #edf0f2; border-bottom:1px solid #edf0f2; }
.drawer-metrics > div,.drawer-coordinates { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:41px; }
.drawer-metrics span,.drawer-coordinates span { color:#747d87; font-size:11px; }
.drawer-metrics strong,.drawer-coordinates strong { font-size:12px; text-align:right; }
.drawer-coordinates { padding:9px 0; }
.drawer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }

.truck-marker { position:relative; width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:#2c2c2c; border:3px solid #fff; box-shadow:0 7px 20px rgba(15,23,42,.26),0 0 0 3px var(--brand); }
.truck-marker.moving { box-shadow:0 7px 20px rgba(15,23,42,.26),0 0 0 3px var(--green); }
.truck-marker.offline { box-shadow:0 7px 20px rgba(15,23,42,.26),0 0 0 3px var(--gray); }
.truck-marker .truck-glyph { color:#fff; width:16px; height:16px; }
.truck-marker .heading { position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #2c2c2c; top:-10px; left:50%; margin-left:-5px; transform-origin:5px 27px; }
.vehicle-label { background:#fff; color:#222; border:0; box-shadow:0 5px 13px rgba(15,23,42,.15); border-radius:6px; padding:3px 6px; font-size:10px; font-weight:900; }
.vehicle-label::before { display:none; }
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large { background:rgba(242,139,0,.22); }
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div { background:var(--brand); color:#fff; font-weight:900; }
.leaflet-control-zoom { border:0 !important; box-shadow:var(--shadow-soft) !important; }
.leaflet-control-zoom a { border:0 !important; color:#343a42 !important; }

/* CONTENT PAGES */
.page-header { max-width:1500px; margin:0 auto 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.page-header h1 { margin:5px 0 4px; font-size:34px; letter-spacing:-.035em; }
.page-header p { margin:0; color:#747d87; font-size:13px; }
.header-actions { display:flex; align-items:center; gap:9px; }
.refresh-badge { height:38px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:11px; display:flex; gap:8px; align-items:center; color:#4f5862; font-size:11px; font-weight:800; }
.dashboard-grid { max-width:1500px; margin-left:auto; margin-right:auto; display:grid; gap:14px; }
.kpi-grid { grid-template-columns:repeat(4,1fr); margin-bottom:14px; }
.summary-card { min-height:120px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 5px 16px rgba(15,23,42,.035); padding:20px; display:flex; align-items:center; gap:15px; }
.summary-icon { width:46px; height:46px; flex:0 0 46px; border-radius:13px; display:grid; place-items:center; background:#f1f3f5; color:#424950; }
.summary-icon.green { background:var(--green-soft); color:var(--green); }
.summary-icon.orange { background:var(--brand-soft); color:#bc6500; }
.summary-icon.gray { background:var(--gray-soft); color:#75818d; }
.summary-card small { display:block; color:#7b848e; font-size:9px; font-weight:900; letter-spacing:.06em; }
.summary-card strong { display:block; font-size:30px; line-height:1; margin:6px 0 5px; }
.summary-card span { color:#87909a; font-size:10px; }
.dashboard-main-grid { grid-template-columns:1.35fr .85fr; margin-bottom:14px; }
.panel-card { max-width:1500px; margin-left:auto; margin-right:auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 5px 16px rgba(15,23,42,.035); }
.panel-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.panel-title-row h2 { margin:0 0 4px; font-size:16px; }
.panel-title-row p { margin:0; color:#828b95; font-size:10px; }
.text-button { border:0; background:transparent; color:#a95c00; font-size:10px; font-weight:850; display:flex; align-items:center; gap:5px; }
.text-button svg { width:14px; height:14px; }
.fleet-status-visual { min-height:215px; display:flex; align-items:center; justify-content:center; gap:70px; }
.donut { width:174px; height:174px; border-radius:50%; position:relative; display:grid; place-items:center; background:conic-gradient(var(--gray) 0 100%); }
.donut::after { content:""; position:absolute; inset:25px; border-radius:50%; background:#fff; }
.donut > div { position:relative; z-index:1; text-align:center; }
.donut strong { display:block; font-size:35px; line-height:1; }
.donut span { display:block; color:#7c858f; font-size:10px; margin-top:5px; }
.status-legend { display:grid; gap:18px; min-width:190px; }
.status-legend > div { display:flex; align-items:center; gap:11px; }
.status-legend .legend-dot { width:10px; height:10px; flex:0 0 10px; }
.status-legend p { margin:0; }
.status-legend b { display:block; font-size:11px; }
.status-legend small { display:block; color:#8b939c; font-size:9px; margin-top:3px; }
.attention-list { display:grid; gap:8px; }
.attention-item { min-height:58px; border:1px solid #eceef1; border-radius:12px; padding:10px 11px; display:flex; gap:10px; align-items:center; }
.attention-item .attention-icon { width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:#b96200; display:grid; place-items:center; flex:0 0 34px; }
.attention-item strong { display:block; font-size:11px; }
.attention-item small { display:block; color:#838b94; font-size:9px; margin-top:3px; }
.empty-state { min-height:140px; display:grid; place-items:center; text-align:center; color:#8b949e; }
.empty-state svg { width:28px; height:28px; margin-bottom:8px; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:760px; }
.data-table th { height:39px; padding:0 12px; text-align:left; border-bottom:1px solid #e9ebee; color:#7e8791; font-size:9px; letter-spacing:.055em; font-weight:900; }
.data-table td { height:57px; padding:0 12px; border-bottom:1px solid #eff1f3; font-size:11px; color:#424951; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#fafafa; }
.table-vehicle strong { display:block; font-size:11px; color:#222; }
.table-vehicle small { display:block; margin-top:2px; color:#888f98; font-size:9px; }
.table-action { width:32px; height:32px; border:1px solid #e2e5e8; border-radius:9px; background:#fff; color:#5a636d; display:grid; place-items:center; }
.table-action:hover { border-color:#d3d6da; color:var(--brand); }
.status-inline { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:800; }
.filter-bar { max-width:1500px; margin:0 auto 13px; display:flex; align-items:center; gap:11px; }
.page-search { width:340px; height:42px; box-shadow:none; }
.segmented { display:flex; gap:3px; padding:3px; border:1px solid #e0e3e7; border-radius:11px; background:#fff; }
.segmented button { height:34px; border:0; border-radius:8px; padding:0 11px; background:transparent; color:#69727c; font-size:10px; font-weight:800; }
.segmented button.active { background:#2f2f2f; color:#fff; }
.result-count { margin-left:auto; color:#7d858f; font-size:10px; font-weight:800; }
.table-card { padding:0; overflow:hidden; }
.vehicle-table th:first-child,.vehicle-table td:first-child { padding-left:20px; }
.vehicle-table th:last-child,.vehicle-table td:last-child { padding-right:20px; }

/* COCKPIT */
.cockpit-page { background:#f5f6f8; }
.cockpit-header { max-width:1500px; margin:0 auto 18px; display:flex; align-items:center; gap:14px; }
.cockpit-title { flex:1; }
.cockpit-title > div { display:flex; align-items:center; gap:10px; }
.cockpit-title h1 { margin:3px 0 1px; font-size:31px; letter-spacing:-.035em; }
.cockpit-title .status-chip { margin:0; }
.cockpit-title p { margin:0; color:#7b848e; font-size:11px; }
.cockpit-head-actions { display:flex; gap:8px; }
.cockpit-kpis { max-width:1500px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.cockpit-kpis article { min-height:88px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.cockpit-kpis span { display:flex; align-items:center; gap:7px; color:#7a838e; font-size:9px; font-weight:800; }
.cockpit-kpis span svg { width:14px; height:14px; color:#a95c00; }
.cockpit-kpis strong { display:block; margin-top:11px; font-size:17px; }
.cockpit-tabs { max-width:1500px; margin:0 auto 13px; min-height:48px; padding:5px; display:flex; gap:3px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:13px; }
.cockpit-tabs button { flex:0 0 auto; height:36px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:#69727b; font-size:10px; font-weight:800; }
.cockpit-tabs button.active { background:#2d2d2d; color:#fff; }
.cockpit-body { max-width:1500px; margin:0 auto; }
.cockpit-overview { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.cockpit-map-card { min-height:370px; padding:0; overflow:hidden; position:relative; }
#cockpitMiniMap { width:100%; height:370px; background:#dfe5e8; }
.cockpit-location-overlay { position:absolute; left:14px; bottom:14px; z-index:400; background:rgba(255,255,255,.96); border:1px solid #e1e4e8; border-radius:11px; padding:10px 12px; box-shadow:var(--shadow-soft); }
.cockpit-location-overlay small { display:block; color:#818a94; font-size:8px; }
.cockpit-location-overlay strong { display:block; margin-top:3px; font-size:10px; }
.info-list { display:grid; }
.info-row { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #eff1f3; }
.info-row:last-child { border-bottom:0; }
.info-row span { color:#7d858e; font-size:10px; }
.info-row strong { font-size:11px; text-align:right; }
.module-placeholder-card { background:#fff; border:1px solid var(--line); border-radius:16px; min-height:300px; display:grid; place-items:center; text-align:center; padding:40px; }
.module-placeholder-card .big-icon { width:52px; height:52px; border-radius:15px; background:var(--brand-soft); color:#b66000; display:grid; place-items:center; margin:0 auto 14px; }
.module-placeholder-card .big-icon svg { width:25px; height:25px; }
.module-placeholder-card h3 { margin:0 0 6px; }
.module-placeholder-card p { margin:0; color:#838c96; font-size:11px; max-width:520px; line-height:1.55; }

/* MODULE PAGES */
.module-grid { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.module-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; min-height:160px; }
.module-card .module-icon { width:41px; height:41px; border-radius:12px; background:var(--brand-soft); color:#b76000; display:grid; place-items:center; margin-bottom:18px; }
.module-card h3 { font-size:14px; margin:0 0 6px; }
.module-card p { color:#7d858f; font-size:10px; line-height:1.55; margin:0; }

@media (max-width: 1200px) {
  .fleet-kpis { grid-template-columns:repeat(2,1fr); width:390px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .cockpit-kpis { grid-template-columns:repeat(3,1fr); }
  .dashboard-main-grid { grid-template-columns:1fr; }
  .user-copy { display:none; }
}
@media (max-width: 860px) {
  body { overflow:auto; }
  .login-view { grid-template-columns:1fr; }
  .login-brand-panel { display:none; }
  .login-form-panel { min-height:100vh; padding:24px; }
  .login-logo-mobile { display:block; }
  .sidebar { width:62px !important; flex-basis:62px !important; padding-left:8px; padding-right:8px; }
  .sidebar-logo,.sidebar-toggle .nav-label,.nav-label { display:none !important; }
  .sidebar-monogram { display:grid !important; }
  .map-topbar { left:10px; right:10px; top:10px; }
  .search-box { width:calc(100% - 57px); }
  .company-pill,.live-pill,.profile-pill { display:none; }
  .fleet-kpis { top:70px; left:10px; right:10px; width:auto; grid-template-columns:repeat(2,1fr); }
  .map-kpi { min-height:58px; padding:9px; }
  .map-kpi strong { font-size:18px; }
  .vehicle-panel { left:10px; bottom:10px; width:calc(100% - 20px); max-height:35vh; }
  .vehicle-drawer { left:10px; right:10px; top:auto; bottom:10px; width:auto; max-height:62vh; overflow:auto; }
  .content-page { padding:24px 14px 34px; }
  .page-header { align-items:flex-start; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .filter-bar { align-items:stretch; flex-direction:column; }
  .page-search { width:100%; }
  .segmented { overflow:auto; }
  .result-count { margin-left:0; }
  .cockpit-header { align-items:flex-start; }
  .cockpit-head-actions { display:none; }
  .cockpit-kpis { grid-template-columns:repeat(2,1fr); }
  .cockpit-overview { grid-template-columns:1fr; }
  .module-grid { grid-template-columns:1fr; }
}