500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

:root{
  --bg:#07090d;
  --bg2:#0b0f16;
  --surface:rgba(16,21,31,.76);
  --surface-strong:#111722;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.13);
  --text:#f4f7fb;
  --muted:#8f99aa;
  --muted2:#657084;
  --accent:#7c5cff;
  --accent2:#41d7ff;
  --success:#39e99a;
  --warning:#ffbd4a;
  --danger:#ff5b68;
  --shadow:0 24px 80px rgba(0,0,0,.4);
  --radius:22px;
  --radius-sm:14px;
  --sidebar:268px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 25% 0%,rgba(124,92,255,.16),transparent 34%),
  radial-gradient(circle at 100% 25%,rgba(65,215,255,.08),transparent 30%),
  var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input{font:inherit}
button{color:inherit}
body{overflow-x:hidden}
.hidden{display:none!important}
.glass{background:linear-gradient(180deg,rgba(20,26,38,.85),rgba(12,16,24,.76));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px)}
.ambient{position:fixed;pointer-events:none;filter:blur(60px);opacity:.34;z-index:0}
.ambient-a{width:500px;height:500px;left:-150px;top:-220px;background:radial-gradient(circle,var(--accent),transparent 66%)}
.ambient-b{width:420px;height:420px;right:-100px;bottom:-120px;background:radial-gradient(circle,var(--accent2),transparent 66%)}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:#9da7bb}
h1,h2,p{margin-top:0}
h1{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.04em}
h2{font-size:18px;letter-spacing:-.02em}
p{color:var(--muted);line-height:1.65}
.brand-lockup{display:flex;align-items:center;gap:11px}
.brand-center{justify-content:center}
.brand-mark{width:48px;height:48px;filter:drop-shadow(0 0 22px rgba(124,92,255,.35))}
.brand-mark.small{width:38px;height:38px}
.brand-word{font-family:"Space Grotesk",Inter,sans-serif;font-size:23px;font-weight:700;letter-spacing:.11em}
.brand-sub{font-size:9px;letter-spacing:.22em;color:var(--muted);font-weight:700;margin-top:2px}

/* LOGIN */
.login-shell{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(340px,540px) minmax(420px,1fr);padding:24px;gap:24px}
.login-card{display:flex;flex-direction:column;justify-content:center;padding:54px;border-radius:30px;max-width:540px;width:100%}
.login-copy{margin-top:64px}
.login-copy h1{font-size:48px;margin:10px 0 10px}
.login-form{display:grid;gap:18px;margin-top:22px}
.login-form label>span{display:block;color:#b7c0d0;font-size:12px;font-weight:600;margin:0 0 8px}
.login-form input{width:100%;height:52px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(5,8,13,.68);color:var(--text);padding:0 16px;outline:none;transition:.2s}
.login-form input:focus{border-color:rgba(124,92,255,.75);box-shadow:0 0 0 4px rgba(124,92,255,.1)}
.password-field{position:relative}
.password-field input{padding-right:52px}
.password-field .icon-btn{position:absolute;right:8px;top:7px}
.form-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.check input{width:16px;height:16px}
.check span{margin:0!important}
.text-button,.ghost-btn{background:none;border:0;color:#b3bdd0;cursor:pointer}
.text-button{font-size:12px}
.primary-btn,.secondary-btn{min-height:50px;border-radius:14px;border:1px solid transparent;padding:0 18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:.2s}
.primary-btn{background:linear-gradient(135deg,var(--accent),#5c8dff);box-shadow:0 10px 30px rgba(92,99,255,.24)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.secondary-btn{background:rgba(255,255,255,.035);border-color:var(--line-strong)}
.secondary-btn:hover{background:rgba(255,255,255,.07)}
.compact{min-height:40px;padding:0 14px;font-size:13px;border-radius:11px}
.demo-hint{font-size:11px;text-align:center;margin:-4px 0 0;color:var(--muted2)}
.form-message{min-height:18px;margin:0;text-align:center;color:var(--danger);font-size:12px}
.security-note{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--success);box-shadow:0 0 0 5px rgba(57,233,154,.08),0 0 16px rgba(57,233,154,.45)}
.login-visual{position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line);background:
  linear-gradient(145deg,rgba(7,9,13,.5),rgba(7,9,13,.08)),
  radial-gradient(circle at 65% 30%,rgba(124,92,255,.38),transparent 36%),
  radial-gradient(circle at 35% 70%,rgba(65,215,255,.17),transparent 28%),
  #0b0e14;display:flex;flex-direction:column;justify-content:flex-end;padding:64px}
.login-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent)}
.visual-badge{position:absolute;top:48px;left:48px;font-size:11px;letter-spacing:.18em;font-weight:800;color:#c5ccda}
.visual-title{position:relative;z-index:2;font-family:"Space Grotesk";font-size:clamp(48px,6vw,88px);font-weight:700;line-height:.95;letter-spacing:-.05em;margin-bottom:34px;max-width:900px}
.route-orbit{position:absolute;inset:12% 8% 25% 16%}
.route-dot{position:absolute;width:14px;height:14px;background:white;border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.07),0 0 35px rgba(124,92,255,.45);z-index:2}
.d1{left:8%;top:58%}.d2{left:48%;top:30%}.d3{right:10%;top:52%}
.route-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(132,115,255,.8),rgba(65,215,255,.65),transparent);transform-origin:left center}
.l1{width:47%;left:10%;top:59%;transform:rotate(-24deg)}
.l2{width:44%;left:50%;top:31%;transform:rotate(23deg)}
.visual-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border-radius:18px;padding:18px 22px;max-width:620px}
.visual-stats div{display:grid;gap:4px}
.visual-stats strong{font-size:20px}.visual-stats span{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:700}

/* APP LAYOUT */
.app-shell{position:relative;z-index:2;min-height:100vh;display:block;width:100%}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:rgba(8,11,17,.92);border-right:1px solid var(--line);backdrop-filter:blur(24px);display:flex;flex-direction:column;z-index:50;transition:.25s}
.sidebar.collapsed{width:82px}
.sidebar-top{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}
.sidebar-collapse{font-size:14px}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:11px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.07)}
.nav-scroll{padding:18px 12px;overflow-y:auto;flex:1}
.nav-section{margin-bottom:22px}
.nav-label{font-size:9px;letter-spacing:.16em;font-weight:800;color:#525d70;padding:0 11px 8px}
.nav-item{width:100%;height:43px;border:0;background:transparent;border-radius:11px;color:#8f99aa;display:flex;align-items:center;gap:11px;padding:0 11px;margin:3px 0;cursor:pointer;text-align:left;position:relative}
.nav-item:hover{background:rgba(255,255,255,.035);color:#d7ddeb}
.nav-item.active{background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(124,92,255,.04));color:white;box-shadow:inset 2px 0 0 var(--accent)}
.nav-icon{width:22px;text-align:center;font-size:16px}
.nav-text{font-size:13px;font-weight:600;white-space:nowrap}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(124,92,255,.18);color:#bdb2ff;font-size:10px;font-weight:800}
.nav-badge.warning{background:rgba(255,189,74,.13);color:var(--warning)}
.sidebar-footer{padding:14px 16px 18px;border-top:1px solid var(--line)}
.system-mini{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:13px;padding:12px}
.system-mini-copy{display:grid;gap:3px}.system-mini strong{font-size:11px}.system-mini span{font-size:9px;color:var(--muted)}
.sidebar.collapsed .brand-copy,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-text,.sidebar.collapsed .nav-badge,.sidebar.collapsed .system-mini-copy{display:none}
.sidebar.collapsed .nav-item{justify-content:center}
.sidebar.collapsed .system-mini{justify-content:center}
.sidebar.collapsed + .workspace{margin-left:82px;width:calc(100% - 82px)}
.workspace{min-width:0;margin-left:var(--sidebar);width:calc(100% - var(--sidebar));transition:.25s}

.workspace > *{min-width:0}
.content{width:100%;max-width:1800px;margin:0 auto}
.metric-grid > *, .dashboard-grid > *{min-width:0}

.topbar{height:78px;position:sticky;top:0;z-index:30;background:rgba(7,9,13,.76);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}
.breadcrumb{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.live-clock{font-family:"Space Grotesk";font-size:14px;margin-top:2px}
.top-action,.profile-btn{height:40px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer;color:#adb6c7}
.notification-btn{position:relative}
.notification-ping{position:absolute;right:8px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px var(--bg)}
.system-pill{height:34px;border-radius:999px;border:1px solid rgba(57,233,154,.14);background:rgba(57,233,154,.05);display:flex;align-items:center;gap:8px;padding:0 12px;color:#b7f6d8;font-size:9px;letter-spacing:.1em;font-weight:800}
.profile-btn{position:relative;padding-right:10px}
.avatar{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#7862ff,#3a8cff);color:white;font-size:10px;font-weight:800}
.profile-copy{display:grid;text-align:left;gap:1px}.profile-copy strong{font-size:11px}.profile-copy small{font-size:9px;color:var(--muted)}
.profile-menu{position:fixed;right:28px;top:68px;width:160px;border:1px solid var(--line);background:#10151f;border-radius:12px;padding:7px;box-shadow:var(--shadow);z-index:80}
.profile-menu button{width:100%;height:36px;background:none;border:0;color:#cbd2df;text-align:left;border-radius:8px;padding:0 10px;cursor:pointer}
.profile-menu button:hover{background:rgba(255,255,255,.06)}
.content{padding:30px 30px 60px}
.page{display:none}.active-page{display:block}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-heading h1{font-size:34px;margin:6px 0 6px}
.page-heading p{margin:0;font-size:13px}
.heading-actions{display:flex;gap:10px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.metric-card{border-radius:18px;padding:19px 20px;min-height:145px}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:#7f899b;font-size:10px;letter-spacing:.1em;font-weight:800}
.metric-icon{width:28px;height:28px;border-radius:9px;background:rgba(124,92,255,.08);display:grid;place-items:center;color:#aca0ff}
.metric-value{font-family:"Space Grotesk";font-size:34px;font-weight:700;letter-spacing:-.04em;margin:20px 0 8px}
.small-value{font-size:26px;color:#c9ffe3}
.metric-meta{font-size:10px;color:var(--muted)}.metric-meta span{color:var(--muted2)}
.positive{color:var(--success)}.warning-text{color:var(--warning)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:16px;margin-bottom:16px}
.panel{border-radius:19px;padding:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel-head h2{margin:4px 0 0}
.ghost-btn{font-size:11px}
.map-placeholder{height:390px;border-radius:14px;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;background:
  radial-gradient(circle at 30% 40%,rgba(124,92,255,.13),transparent 30%),
  radial-gradient(circle at 70% 65%,rgba(65,215,255,.08),transparent 26%),
  #090d13}
.map-placeholder:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px}
.map-road{position:absolute;height:5px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(129,140,158,.2),rgba(137,114,255,.36),rgba(129,140,158,.2),transparent)}
.r1{width:76%;left:5%;top:36%;transform:rotate(12deg)}.r2{width:62%;left:22%;top:58%;transform:rotate(-16deg)}.r3{width:52%;left:15%;top:70%;transform:rotate(6deg)}.r4{width:40%;right:8%;top:29%;transform:rotate(-32deg)}
.map-city{position:absolute;font-size:9px;letter-spacing:.13em;color:#778194;font-weight:800;z-index:2}
.c1{right:18%;top:34%}.c2{left:31%;bottom:22%}.c3{left:48%;top:53%}.c4{left:12%;top:24%}
.map-pin{position:absolute;z-index:3;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(124,92,255,.09),0 0 24px rgba(124,92,255,.4)}
.map-pin.alert{background:var(--danger);box-shadow:0 0 0 8px rgba(255,91,104,.08),0 0 24px rgba(255,91,104,.4)}
.warning-pin{background:var(--warning);box-shadow:0 0 0 8px rgba(255,189,74,.08),0 0 24px rgba(255,189,74,.4)}
.p1{right:26%;top:40%}.p2{left:28%;top:62%}.p3{left:51%;top:49%}.p4{left:14%;top:29%}
.map-center-label{position:absolute;left:22px;bottom:22px;z-index:4;background:rgba(7,9,13,.76);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:3px}
.map-center-label strong{font-size:11px}.map-center-label span{font-size:9px;color:var(--muted)}
.activity-list{display:grid}
.activity-item{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line)}
.activity-item:last-child{border-bottom:0}
.activity-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:12px}
.red{background:rgba(255,91,104,.11);color:var(--danger)}.amber{background:rgba(255,189,74,.11);color:var(--warning)}.green{background:rgba(57,233,154,.1);color:var(--success)}.blue{background:rgba(65,215,255,.1);color:var(--accent2)}
.activity-copy{min-width:0;display:grid;gap:4px;flex:1}.activity-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-copy span{font-size:9px;color:var(--muted)}
.status-chip{display:inline-flex;align-items:center;justify-content:center;min-height:23px;border-radius:999px;padding:0 8px;font-size:8px;font-weight:800;letter-spacing:.07em;border:1px solid transparent;white-space:nowrap}
.review{color:#ff9aa3;background:rgba(255,91,104,.08);border-color:rgba(255,91,104,.14)}
.active{color:#ffd78d;background:rgba(255,189,74,.08);border-color:rgba(255,189,74,.14)}
.verified{color:#aaf8d1;background:rgba(57,233,154,.08);border-color:rgba(57,233,154,.14)}
.neutral{color:#9fdff2;background:rgba(65,215,255,.08);border-color:rgba(65,215,255,.14)}
.table-panel{padding-bottom:8px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:11px}
th{color:#626d80;font-size:9px;letter-spacing:.1em}td{color:#bfc7d4}
tr:last-child td{border-bottom:0}
.placeholder-card{min-height:420px;border-radius:20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:44px}
.placeholder-card h1{font-size:38px;margin:8px 0}.placeholder-card p{max-width:620px}
.toast{position:fixed;right:26px;bottom:26px;z-index:90;min-width:240px;max-width:420px;padding:14px 16px;background:#141a24;border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);font-size:12px}
.mobile-menu{display:none}.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45}

@media (max-width:1180px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .system-pill{display:none}
}
@media (max-width:900px){
  .login-shell{grid-template-columns:1fr;padding:14px}
  .login-card{max-width:none;min-height:calc(100vh - 28px);padding:34px}
  .login-visual{display:none}
  .login-copy{margin-top:44px}
  .login-copy h1{font-size:40px}
  .sidebar{transform:translateX(-100%);width:270px!important}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar.collapsed{width:270px}
  .workspace,.sidebar.collapsed + .workspace{margin-left:0;width:100%}
  .sidebar-collapse{display:none}
  .mobile-menu{display:grid}
  .content{padding:24px 18px 50px}
  .topbar{padding:0 18px}
}
@media (max-width:680px){
  .metric-grid{grid-template-columns:1fr}
  .page-heading{align-items:flex-start;flex-direction:column}
  .heading-actions{width:100%}.heading-actions button{flex:1}
  .hide-sm,.profile-copy{display:none}
  .top-action{padding:0 10px}
  .map-placeholder{height:310px}
  .login-card{padding:28px 22px}
  .brand-center{justify-content:flex-start}
}


/* =========================
   PHASE 2 — LIVE OPERATIONS
   MapLibre / CARTO Dark Matter
   ========================= */
.leaflet-map{
  width:100%;
  position:relative;
  overflow:hidden;
  background:#080c12;
  border:1px solid rgba(255,255,255,.055);
}
.dashboard-live-map{height:390px;border-radius:14px}
.full-live-map{height:650px;border-radius:14px}

.maplibregl-map{
  width:100%;
  height:100%;
  font-family:Inter,system-ui,sans-serif;
  background:#080c12;
}
.maplibregl-canvas{
  outline:none;
}
.maplibregl-ctrl-group{
  background:#111722!important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
}
.maplibregl-ctrl-group button{
  filter:invert(1) brightness(1.25);
}
.maplibregl-ctrl-attrib{
  background:rgba(8,12,18,.82)!important;
  color:#788396!important;
}
.maplibregl-ctrl-attrib a{
  color:#a99cff!important;
}
.maplibregl-popup-content{
  background:#111722;
  color:#eef2f8;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  padding:12px 14px;
  font-size:11px;
}
.maplibregl-popup-tip{
  border-top-color:#111722!important;
  border-bottom-color:#111722!important;
}
.map-marker{
  width:22px;
  height:22px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.9);
  cursor:pointer;
  box-shadow:0 0 0 7px rgba(124,92,255,.12),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-review{
  background:#ff5b68;
  box-shadow:0 0 0 7px rgba(255,91,104,.12),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-active{
  background:#ffbd4a;
  box-shadow:0 0 0 7px rgba(255,189,74,.12),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-verified{
  background:#39e99a;
  box-shadow:0 0 0 7px rgba(57,233,154,.12),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-hidden{
  display:block!important;
  background:#657084;
  opacity:.65;
  box-shadow:0 0 0 7px rgba(101,112,132,.10),0 8px 22px rgba(0,0,0,.55);
}
.ops-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ops-stat{border-radius:16px;padding:16px 18px;display:flex;align-items:end;justify-content:space-between;min-height:84px}
.ops-stat span{font-size:9px;letter-spacing:.13em;color:#697589;font-weight:800}
.ops-stat strong{font-family:"Space Grotesk";font-size:28px;letter-spacing:-.04em}
.reports-panel{padding:16px 18px 8px}
.filter-toolbar{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(140px,.55fr)) auto;gap:10px;align-items:center;margin-bottom:12px}
.search-control{height:42px;border:1px solid var(--line-strong);background:rgba(5,8,13,.54);border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 12px;color:#737e91}
.search-control input{border:0;outline:0;background:transparent;color:var(--text);width:100%;min-width:0}
.select-control,.report-form select,.report-form input,.report-form textarea{width:100%;border:1px solid var(--line-strong);background:#090d14;color:var(--text);border-radius:11px;outline:none}
.select-control{height:42px;padding:0 11px;font-size:11px}
.reports-toolbar-row{display:flex;align-items:center;justify-content:space-between;padding:7px 3px 10px;color:var(--muted);font-size:10px}
.reports-table tbody tr{cursor:pointer;transition:.16s}
.reports-table tbody tr:hover{background:rgba(124,92,255,.045)}
.report-id{font-family:"Space Grotesk";color:#8f99aa}
.row-title{display:grid;gap:3px}.row-title strong{font-size:11px;color:#dce2ec}.row-title span{font-size:9px;color:#697589}
.action-dots{border:0;background:none;color:#aeb7c7;cursor:pointer;font-size:16px}
.empty-row{text-align:center!important;padding:42px!important;color:var(--muted)!important}

.live-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.live-map-panel{padding:16px}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.map-legend{display:flex;align-items:center;flex-wrap:wrap;gap:13px;color:#8f99aa;font-size:9px}
.map-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.review-dot{background:var(--danger)}.active-dot{background:var(--warning)}.verified-dot{background:var(--success)}.hidden-dot{background:#657084}
.map-data-note{display:flex;align-items:center;gap:8px;font-size:9px;color:#7d889a}
.map-feed-panel{padding:16px;max-height:697px;overflow:hidden}
.map-report-feed{height:610px;overflow:auto;padding-right:4px}
.map-feed-item{display:flex;align-items:flex-start;gap:11px;padding:13px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.map-feed-item:hover strong{color:#bdb4ff}
.map-feed-dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:0 0 auto}
.map-feed-dot.review{background:var(--danger)}.map-feed-dot.active{background:var(--warning)}.map-feed-dot.verified{background:var(--success)}.map-feed-dot.hidden{background:#657084}
.map-feed-copy{min-width:0;display:grid;gap:4px;flex:1}.map-feed-copy strong{font-size:10px;transition:.15s}.map-feed-copy span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(2px);z-index:100}
.report-drawer{position:fixed;z-index:110;right:0;top:0;bottom:0;width:min(440px,100vw);background:#0d121b;border-left:1px solid var(--line-strong);box-shadow:-24px 0 70px rgba(0,0,0,.48);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:5px 0 0;font-size:20px}
.drawer-body{padding:22px;overflow:auto;flex:1}
.drawer-actions{padding:16px 22px 22px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
.detail-hero{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);margin-bottom:16px}
.detail-hero h3{margin:8px 0 8px;font-size:19px}.detail-hero p{font-size:11px;margin:0}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.detail-cell{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.018);display:grid;gap:5px}
.detail-cell span{font-size:8px;letter-spacing:.1em;color:#667286;font-weight:800}.detail-cell strong{font-size:11px}
.detail-section{margin-top:18px}.detail-section h4{font-size:10px;letter-spacing:.1em;color:#788396;margin:0 0 8px}.detail-section p{font-size:11px;margin:0}
.drawer-map-link{width:100%;margin-top:10px}

.modal-card{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 28px));max-height:92vh;overflow:auto;border-radius:20px}
.report-form{padding:20px 22px 22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.report-form label{display:grid;gap:7px}.report-form label>span{font-size:10px;color:#9ca6b8;font-weight:600}
.report-form input,.report-form select{height:44px;padding:0 12px}.report-form textarea{padding:11px 12px;resize:vertical}
.span-2{grid-column:span 2}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.map-load-error{height:100%;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);font-size:12px}

@media(max-width:1180px){
  .filter-toolbar{grid-template-columns:1fr 1fr 1fr}
  .search-control{grid-column:span 2}
  .live-map-layout{grid-template-columns:1fr}
  .map-feed-panel{max-height:none}.map-report-feed{height:auto;max-height:330px}
}
@media(max-width:760px){
  .ops-stat-grid{grid-template-columns:1fr 1fr}
  .filter-toolbar{grid-template-columns:1fr}
  .search-control{grid-column:auto}
  .full-live-map{height:520px}
  .map-toolbar{align-items:flex-start;flex-direction:column}
  .drawer-actions{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}
}




/* ============================================================
   VORAUS ADMIN v2.4 — BETA DESIGN SYSTEM
   Extracted from DEPLOY_BETA/assets/css/app.css
   Desktop admin layout stays intact; visual identity matches beta.
   ============================================================ */
:root{
  --bg:#030608;
  --bg2:#050a0d;
  --surface:#081015;
  --surface-strong:#0d151b;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.12);
  --text:#f7f9fb;
  --muted:#95a0a7;
  --muted2:#75828a;

  --accent:#d7ff35;
  --accent2:#54e59c;
  --success:#54e59c;
  --warning:#ffad47;
  --danger:#ff5e67;
  --info:#6da6ff;

  --shadow:0 18px 42px rgba(0,0,0,.42);
  --radius:18px;
  --radius-sm:12px;
}

html,body{
  background:#05090c;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  background:
    radial-gradient(circle at 12% 0%,rgba(215,255,53,.045),transparent 25rem),
    radial-gradient(circle at 100% 90%,rgba(84,229,156,.035),transparent 24rem),
    linear-gradient(180deg,#050a0d,#030608);
}

h1,h2,.brand-word,.metric-value,.live-clock{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

h1,.brand-word,.metric-value{
  font-weight:900;
}

.brand-word{
  letter-spacing:.18em;
  font-size:21px;
}
.brand-word span{color:var(--accent)}
.brand-sub{
  color:var(--muted);
  letter-spacing:.22em;
}

.brand-mark{
  object-fit:contain;
  border-radius:8px;
  background:#05090c;
  padding:4px;
  filter:drop-shadow(0 0 16px rgba(215,255,53,.12));
}

.ambient-a{
  background:radial-gradient(circle,rgba(215,255,53,.13),transparent 68%);
  opacity:.25;
}
.ambient-b{
  background:radial-gradient(circle,rgba(84,229,156,.10),transparent 68%);
  opacity:.20;
}

.glass{
  background:linear-gradient(180deg,rgba(13,21,27,.96),rgba(8,16,21,.93));
  border:1px solid var(--line);
  box-shadow:0 16px 42px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}

.eyebrow{
  color:var(--accent);
  font-size:10px;
  letter-spacing:.13em;
  font-weight:900;
}

.login-card{
  background:linear-gradient(180deg,#0b1217,#080e12);
}
.login-copy h1{
  font-weight:900;
  letter-spacing:-.035em;
}
.login-form label>span{color:#d1d8dc}
.login-form input,
.select-control,
.report-form select,
.report-form input,
.report-form textarea{
  background:#081015;
  border-color:var(--line);
  color:var(--text);
}
.login-form input:focus,
.report-form input:focus,
.report-form textarea:focus,
.report-form select:focus,
.select-control:focus{
  border-color:rgba(215,255,53,.55);
  box-shadow:0 0 0 3px rgba(215,255,53,.08);
}

.primary-btn{
  color:var(--accent);
  background:rgba(215,255,53,.10);
  border-color:var(--accent);
  box-shadow:none;
}
.primary-btn:hover{
  background:rgba(215,255,53,.15);
  filter:none;
}
.secondary-btn{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
}
.secondary-btn:hover{background:rgba(255,255,255,.055)}
.text-button,.ghost-btn{color:var(--muted)}
.text-button:hover,.ghost-btn:hover{color:var(--accent)}

.login-visual{
  background:
    linear-gradient(145deg,rgba(3,6,8,.62),rgba(5,10,13,.15)),
    radial-gradient(circle at 62% 30%,rgba(215,255,53,.09),transparent 34%),
    radial-gradient(circle at 35% 70%,rgba(84,229,156,.07),transparent 30%),
    #030608;
}
.route-dot{
  background:var(--accent);
  box-shadow:0 0 0 8px rgba(215,255,53,.06),0 0 30px rgba(215,255,53,.28);
}
.route-line{
  background:linear-gradient(90deg,transparent,rgba(215,255,53,.68),rgba(84,229,156,.5),transparent);
}
.visual-stats{
  background:rgba(8,14,18,.92);
}

/* Sidebar = same deep black/petrol language as beta chrome */
.sidebar{
  background:rgba(4,8,11,.97);
  border-right:1px solid rgba(255,255,255,.055);
}
.sidebar-top{
  border-bottom-color:rgba(255,255,255,.05);
}
.nav-label{color:#75828a}
.nav-item{color:#95a0a7}
.nav-item:hover{
  background:rgba(255,255,255,.035);
  color:var(--text);
}
.nav-item.active{
  background:rgba(215,255,53,.075);
  color:var(--text);
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav-item.active .nav-icon{color:var(--accent)}
.nav-badge{
  background:rgba(215,255,53,.10);
  color:var(--accent);
}
.nav-badge.warning{
  background:rgba(255,173,71,.10);
  color:var(--warning);
}
.system-mini{
  background:rgba(255,255,255,.025);
}

/* Top chrome */
.topbar{
  background:rgba(4,8,11,.95);
  border-bottom-color:rgba(255,255,255,.05);
}
.icon-btn,.top-action,.profile-btn{
  background:#0b1217;
  border-color:var(--line);
}
.icon-btn:hover,.top-action:hover,.profile-btn:hover{
  background:#0d151b;
  border-color:rgba(215,255,53,.22);
}
.avatar{
  background:#0d151b;
  border:1px solid rgba(215,255,53,.40);
  color:var(--accent);
}
.system-pill{
  color:var(--accent);
  border-color:rgba(215,255,53,.25);
  background:rgba(215,255,53,.055);
}
.status-dot{
  background:var(--success);
  box-shadow:0 0 0 5px rgba(84,229,156,.07),0 0 14px rgba(84,229,156,.35);
}
.profile-menu{
  background:#0d151b;
}

/* Cards */
.metric-card,.panel,.ops-stat,.placeholder-card{
  background:linear-gradient(180deg,#0d151b,#081015);
  border-color:var(--line);
}
.metric-icon{
  background:rgba(215,255,53,.07);
  color:var(--accent);
}
.metric-value{color:var(--text)}
.small-value{color:var(--accent)}
.positive{color:var(--success)}
.warning-text{color:var(--warning)}

.activity-icon.red{background:rgba(255,94,103,.10);color:var(--danger)}
.activity-icon.amber{background:rgba(255,173,71,.10);color:var(--warning)}
.activity-icon.green{background:rgba(84,229,156,.09);color:var(--success)}
.activity-icon.blue{background:rgba(109,166,255,.09);color:var(--info)}

.status-chip.review{
  color:#ff8d94;
  background:rgba(255,94,103,.08);
  border-color:rgba(255,94,103,.24);
}
.status-chip.active{
  color:#ffc773;
  background:rgba(255,173,71,.08);
  border-color:rgba(255,173,71,.24);
}
.status-chip.verified{
  color:#86efba;
  background:rgba(84,229,156,.08);
  border-color:rgba(84,229,156,.22);
}
.status-chip.neutral{
  color:#8db8ff;
  background:rgba(109,166,255,.08);
  border-color:rgba(109,166,255,.22);
}
.status-chip.hidden{
  color:#95a0a7;
  background:rgba(149,160,167,.07);
  border-color:rgba(149,160,167,.18);
}

/* Search/filter/table */
.search-control{
  background:#081015;
  border-color:var(--line);
}
.reports-table tbody tr:hover{
  background:rgba(215,255,53,.025);
}
th{color:#75828a}
td{color:#d1d8dc}

/* MapLibre controls copied into beta visual grammar */
.maplibregl-map{
  background:#071016;
}
.maplibregl-ctrl-group{
  background:rgba(6,11,15,.90)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.40)!important;
}
.maplibregl-ctrl-group button{
  filter:invert(1) brightness(1.8);
}
.maplibregl-ctrl-group button:not(:disabled):hover{
  background:rgba(255,255,255,.06)!important;
}
.maplibregl-ctrl-attrib{
  background:rgba(6,11,15,.55)!important;
  color:#8a949b!important;
  border-radius:8px;
}
.maplibregl-ctrl-attrib a{color:#8a949b!important}
.maplibregl-popup-content{
  background:rgba(8,14,18,.97);
  border-color:var(--line);
}
.maplibregl-popup-tip{
  border-top-color:#080e12!important;
  border-bottom-color:#080e12!important;
}

/* Map report markers: beta event palette */
.map-marker.status-review{
  background:var(--danger);
  box-shadow:0 0 0 7px rgba(255,94,103,.09),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-active{
  background:var(--warning);
  box-shadow:0 0 0 7px rgba(255,173,71,.09),0 8px 22px rgba(0,0,0,.55);
}
.map-marker.status-verified{
  background:var(--success);
  box-shadow:0 0 0 7px rgba(84,229,156,.09),0 8px 22px rgba(0,0,0,.55);
}

/* Drawers / modal */
.report-drawer{
  background:#081015;
  border-left-color:var(--line);
}
.modal-card{
  background:linear-gradient(180deg,#0d151b,#081015);
}
.detail-hero,.detail-cell{
  background:rgba(255,255,255,.025);
  border-color:var(--line);
}

/* Beta-like focused accent for selected/admin actions */
.drawer-actions .primary-btn,
.modal-actions .primary-btn,
.heading-actions .primary-btn{
  border-color:rgba(215,255,53,.75);
  background:rgba(215,255,53,.10);
  color:var(--accent);
}

/* Avoid old purple/blue visual residue */
.notification-ping{background:var(--orange)}
.breadcrumb span{color:var(--accent)}
.metric-top{color:#95a0a7}
.map-data-note{color:#95a0a7}
.map-feed-item:hover strong{color:var(--accent)}


/* ============================================================
   VORAUS ADMIN v2.5 — RESPONSIVE SHELL FIX
   Prevents content/map from sliding underneath the fixed sidebar.
   ============================================================ */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Desktop: real two-column layout instead of fixed sidebar + manual margin math */
.app-shell{
  --admin-sidebar-width:268px;
  display:grid;
  grid-template-columns:var(--admin-sidebar-width) minmax(0,1fr);
  width:100%;
  max-width:100vw;
  min-height:100vh;
  overflow-x:clip;
  transition:grid-template-columns .25s ease;
}

.app-shell.sidebar-collapsed{
  --admin-sidebar-width:82px;
}

.sidebar{
  position:sticky;
  top:0;
  left:auto;
  bottom:auto;
  grid-column:1;
  width:100%;
  height:100vh;
  max-height:100vh;
  min-width:0;
  transform:none;
}

.sidebar.collapsed{
  width:100%;
}

.workspace,
.sidebar.collapsed + .workspace{
  grid-column:2;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-left:0;
  overflow-x:hidden;
}

/* Never allow content to be centered outside its own workspace */
.content{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}

.content > *,
.page,
.page > *,
.metric-grid,
.dashboard-grid,
.live-map-layout,
.panel,
.metric-card,
.map-panel,
.activity-panel,
.table-panel,
.reports-panel,
.live-map-panel,
.map-feed-panel{
  min-width:0;
  max-width:100%;
}

.page-heading{
  min-width:0;
}

.page-heading > div:first-child{
  min-width:0;
}

.page-heading h1,
.page-heading p{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Header can shrink without pushing the workspace wider */
.topbar{
  width:100%;
  max-width:100%;
  min-width:0;
}

.topbar-left,
.topbar-right{
  min-width:0;
}

.topbar-right{
  flex-wrap:nowrap;
}

/* Responsive dashboard grids */
.metric-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.dashboard-grid{
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr);
}

/* Map must use ONLY the width of its card/workspace */
.map-panel,
.live-map-panel{
  overflow:hidden;
}

.leaflet-map,
.dashboard-live-map,
.full-live-map,
.maplibregl-map,
.maplibregl-canvas-container{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.maplibregl-canvas{
  max-width:none!important;
}

/* Tables scroll inside their own card, never the whole admin page */
.table-panel,
.reports-panel{
  overflow:hidden;
}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}

/* Large laptop / smaller desktop */
@media (max-width:1450px){
  .content{
    padding:26px 24px 52px;
  }

  .dashboard-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(285px,.8fr);
  }

  .metric-card{
    padding:17px 18px;
  }
}

/* Tablet landscape / narrow desktop */
@media (max-width:1180px){
  .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-grid,
  .live-map-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .activity-panel{
    min-height:auto;
  }

  .map-feed-panel{
    max-height:none;
  }
}

/* Mobile/tablet shell: sidebar becomes overlay drawer */
@media (max-width:900px){
  .app-shell,
  .app-shell.sidebar-collapsed{
    display:block;
    width:100%;
    max-width:100vw;
  }

  .sidebar,
  .sidebar.collapsed{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(290px,86vw)!important;
    height:100dvh;
    max-height:100dvh;
    transform:translateX(-102%);
    z-index:70;
  }

  .sidebar.mobile-open{
    transform:translateX(0);
  }

  .workspace,
  .sidebar.collapsed + .workspace{
    width:100%;
    max-width:100%;
    margin:0;
  }

  .topbar{
    padding:0 16px;
  }

  .content{
    padding:22px 16px 44px;
  }

  .profile-copy,
  .system-pill{
    display:none;
  }
}

/* Phone */
@media (max-width:680px){
  .metric-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .page-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .heading-actions{
    width:100%;
  }

  .heading-actions > button{
    flex:1;
  }

  .dashboard-live-map{
    height:300px;
  }

  .full-live-map{
    height:480px;
  }

  .topbar-right{
    gap:6px;
  }

  .top-action{
    padding:0 9px;
  }
}


/* ============================================================
   VORAUS ADMIN v2.6 — CUSTOM SIDEBAR ICONS
   Replaces glyph/emoji nav icons with a unified in-house icon set.
   ============================================================ */
.nav-icon-svg{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 22px;
}
.nav-icon-svg svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
}
.nav-icon-svg svg *{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-item{
  gap:12px;
}
.nav-item .nav-icon-svg{
  color:#8d99a1;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
  opacity:.95;
}
.nav-item:hover .nav-icon-svg{
  color:#dbe2e6;
  transform:translateX(1px);
}
.nav-item.active .nav-icon-svg{
  color:var(--accent);
  opacity:1;
}
.nav-item.active .nav-icon-svg svg{
  filter:drop-shadow(0 0 8px rgba(215,255,53,.16));
}
.sidebar.collapsed .nav-item{
  justify-content:center;
  gap:0;
}
.sidebar.collapsed .nav-icon-svg{
  width:20px;
  flex:0 0 20px;
}