/* Opticore - base styles (variables, layout, sidebar, topbar, panels,
   tables, dashboard). Extracted from index.html.
   The light-themed print styles for report popups stay in their JS
   template literals - they style separate documents, not this page. */

:root{
  --bg:#0a0e1a;
  --panel:#101627;
  --panel-2:#0c1220;
  --panel-3:#161d33;
  --border:#1e2742;
  --border-2:#27314f;
  --text:#e8ecf6;
  --text-dim:#8b94ad;
  --text-faint:#5a6380;
  --blue:#3b82f6;
  --blue-dim:rgba(59,130,246,.12);
  --green:#22c55e;
  --green-dim:rgba(34,197,94,.12);
  --red:#ef4444;
  --red-dim:rgba(239,68,68,.12);
  --amber:#f59e0b;
  --amber-dim:rgba(245,158,11,.12);
  --purple:#a855f7;
  --purple-dim:rgba(168,85,247,.12);
  --cyan:#06b6d4;
  --radius:12px;
  --radius-sm:8px;
  --sidebar-w:214px;
  --detail-w:250px;
  font-size:13px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ===== LAYOUT ===== */
.app{display:flex;min-height:100vh}
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.page{display:none;padding:0 20px 24px;flex:1}
.page.active{display:block}
.page-with-detail{display:none;flex:1}
.page-with-detail.active{display:flex}
.page-body{flex:1;min-width:0;padding:0 16px 24px 20px}

/* ===== SIDEBAR ===== */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--panel-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:50;
}
.logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.logo-mark{width:34px;height:34px;border-radius:50%;
  background:conic-gradient(#22c55e,#3b82f6,#a855f7,#ef4444,#f59e0b,#22c55e);
  display:flex;align-items:center;justify-content:center}
.logo-mark::after{content:'';width:20px;height:20px;border-radius:50%;background:var(--panel-2)}
.logo-text b{font-size:15px;font-weight:800;letter-spacing:.2px}
.logo-text b sup{font-size:8px;font-weight:600}
.logo-text span{display:block;font-size:9.5px;color:var(--text-dim);margin-top:1px}
.nav{flex:1;padding:6px 10px;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9.5px 12px;margin-bottom:2px;
  border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;
  font-size:12.5px;font-weight:500;transition:background .15s,color .15s;
  border:none;background:none;width:100%;text-align:left;font-family:inherit;
}
.nav-item:hover{background:var(--panel-3);color:var(--text)}
.nav-item.active{background:var(--blue);color:#fff}
.nav-item .icon{width:17px;height:17px;flex:none}
.nav-item .badge{
  margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.side-summary{margin:10px;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.side-summary h4{font-size:11.5px;font-weight:600;color:var(--text-dim);margin-bottom:10px}
.ss-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:11.5px}
.ss-row .dot{width:8px;height:8px;border-radius:50%}
.ss-row b{font-size:12.5px}
.ss-row span{color:var(--text-dim);font-size:10.5px}

/* ===== TOPBAR ===== */
.topbar{
  display:flex;align-items:center;gap:14px;padding:16px 20px;position:sticky;top:0;
  background:var(--bg);z-index:40;
}
.topbar h1{font-size:19px;font-weight:700}
.topbar .subtitle{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.topbar .spacer{flex:1}
.chip{
  display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;font-weight:500;white-space:nowrap;
}
.chip svg{width:14px;height:14px;color:var(--text-dim)}
.icon-btn{
  position:relative;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--panel);color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn svg{width:16px;height:16px}
.icon-btn .badge{
  position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.user{display:flex;align-items:center;gap:9px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#a855f7);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.user .name{font-size:12px;font-weight:600}
.user .role{font-size:10px;color:var(--text-dim);display:flex;align-items:center;gap:4px}
.user .role::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ===== STAT CARDS ===== */
.stats{display:grid;gap:12px;margin-bottom:16px}
.stats.cols-6{grid-template-columns:repeat(6,1fr)}
.stats.cols-4{grid-template-columns:repeat(4,1fr)}
.stat{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 15px;display:flex;gap:12px;align-items:flex-start;position:relative;overflow:hidden;
}
.stat .s-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.stat .s-icon svg{width:19px;height:19px}
.stat .s-label{font-size:11px;color:var(--text-dim);font-weight:500}
.stat .s-value{font-size:21px;font-weight:800;margin-top:2px;line-height:1.1}
.stat .s-value small{font-size:12px;font-weight:600;color:var(--text-dim)}
.stat .s-sub{font-size:10.5px;color:var(--text-dim);margin-top:3px}
.stat .s-sub.up{color:var(--green)}
.stat .s-sub .hi{color:var(--red);font-weight:600}
.stat .s-sub .med{color:var(--amber);font-weight:600}
.tint-blue{background:var(--blue-dim);color:var(--blue)}
.tint-green{background:var(--green-dim);color:var(--green)}
.tint-red{background:var(--red-dim);color:var(--red)}
.tint-amber{background:var(--amber-dim);color:var(--amber)}
.tint-purple{background:var(--purple-dim);color:var(--purple)}

/* ===== PANELS ===== */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.panel-head h3{font-size:13.5px;font-weight:700}
.link{font-size:11.5px;color:var(--blue);cursor:pointer;font-weight:500;background:none;border:none;font-family:inherit}
.btn{
  display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius-sm);padding:8px 14px;
  font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);
  background:var(--panel-3);color:var(--text);font-family:inherit;white-space:nowrap;
}
.btn svg{width:14px;height:14px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:hover{filter:brightness(1.12)}

/* ===== TAGS / STATUS ===== */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:6px;padding:3px 8px}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.t-green{color:var(--green);background:var(--green-dim)}
.t-red{color:var(--red);background:var(--red-dim)}
.t-amber{color:var(--amber);background:var(--amber-dim)}
.t-blue{color:var(--blue);background:var(--blue-dim)}
.t-gray{color:var(--text-dim);background:rgba(139,148,173,.1)}
.sev{font-size:10px;font-weight:700;border-radius:5px;padding:2.5px 8px}
.sev.high{background:var(--red);color:#fff}
.sev.medium{background:var(--amber);color:#111}
.sev.low{background:var(--green);color:#fff}
.sev.active{background:transparent;border:1px solid var(--green);color:var(--green)}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:none;
  padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--panel-2);
  line-height:1.25;
}
tbody td{padding:5px 10px;border-bottom:1px solid var(--border);font-size:11.5px;vertical-align:middle;white-space:nowrap;line-height:1.3}
tbody tr:hover{background:var(--panel-3)}
tbody tr{cursor:pointer}
.cam-cell{display:flex;align-items:center;gap:8px}
.cam-thumb{width:34px;height:24px;border-radius:5px;flex:none;background-size:cover;position:relative;overflow:hidden}
.cam-cell .cn{font-weight:600;font-size:11.5px;line-height:1.25}
.cam-cell .cm{font-size:10px;color:var(--text-dim);margin-top:0;line-height:1.2}
/* Badges sit inside table cells, so their padding sets the row height floor.
   Keep them readable but stop them dictating a taller row than the text does. */
tbody td .tag{padding:1px 7px;line-height:1.35}

/* thumbnail gradient placeholders (replace with real snapshots/streams) */
/* position:relative is essential — the ::after below is absolutely positioned,
   so without a containing block here it escapes the placeholder and tints
   whichever ancestor happens to be positioned. That was the purple wash that
   appeared on pages showing a person with no photo. */
.ph{background:linear-gradient(135deg,#1c2942,#2b3a5c 55%,#20304e);position:relative;overflow:hidden}
.ph::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 70%, rgba(59,130,246,.25), transparent 60%),
  radial-gradient(ellipse at 75% 25%, rgba(168,85,247,.18), transparent 55%)}

/* ===== FILTER BAR ===== */
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.select{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);padding:8px 30px 8px 12px;font-size:12px;font-weight:500;font-family:inherit;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b94ad' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
.search{
  flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;
}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:12px;font-family:inherit}
.search svg{width:14px;height:14px;color:var(--text-dim)}

/* ===== DASHBOARD GRID ===== */
.dash-mid{display:grid;grid-template-columns:1fr 380px;gap:14px;margin-bottom:14px}
.dash-charts{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.zone-map{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;height:360px;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(34,197,94,.10), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.12), transparent 50%),
    linear-gradient(160deg,#131b30,#0d1424);
  border:1px solid var(--border);
}
.zone-map .grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px}
.zone-box{position:absolute;border:1.5px solid;border-radius:6px;background:rgba(255,255,255,.02)}
.zone-pill{
  position:absolute;transform:translate(-50%,-50%);border:1.5px solid;border-radius:7px;
  padding:5px 10px;font-size:10.5px;font-weight:700;text-align:center;background:rgba(10,14,26,.88);
  white-space:nowrap;line-height:1.35;z-index:2;
}
.zone-pill small{display:block;font-weight:600;font-size:10px;opacity:.85}
.alert-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);align-items:center}
.alert-item:last-child{border-bottom:none}
.alert-thumb{width:52px;height:40px;border-radius:7px;flex:none;position:relative;overflow:hidden}
.alert-thumb .bb{position:absolute;inset:22% 28%;border:1.5px solid var(--red);border-radius:2px}
.alert-body{flex:1;min-width:0}
.alert-body .a-type{font-size:12px;font-weight:700;color:var(--red)}
.alert-body .a-type.med{color:var(--amber)}
.alert-body .a-loc{font-size:11px;color:var(--text);margin-top:1px}
.alert-body .a-time{font-size:10px;color:var(--text-dim);margin-top:2px;display:flex;align-items:center;gap:4px}
.alert-tags{display:flex;flex-direction:column;gap:5px;align-items:flex-end}

/* donut + legend */
.donut-wrap{display:flex;align-items:center;gap:14px}
.donut{position:relative;width:110px;height:110px;flex:none}
.donut svg{transform:rotate(-90deg)}
.donut .d-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .d-center b{font-size:17px;font-weight:800}
.donut .d-center span{font-size:9.5px;color:var(--text-dim)}
.legend{flex:1;display:flex;flex-direction:column;gap:7px}
.legend .l-row{display:flex;align-items:center;gap:8px;font-size:11px}
.legend .l-row .sw{width:9px;height:9px;border-radius:3px;flex:none}
.legend .l-row .lv{margin-left:auto;color:var(--text-dim);font-weight:600}

.health-list{display:flex;flex-direction:column;gap:9px}
.health-row{display:flex;align-items:center;gap:9px;font-size:11.5px}
.health-row svg{width:14px;height:14px;color:var(--green)}
.health-row .hv{margin-left:auto;color:var(--green);font-weight:600;font-size:11px}

.site-cards{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.site-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.site-card .sc-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.site-card .sc-icon svg{width:14px;height:14px}
.site-card .sc-name{font-size:11px;font-weight:600;line-height:1.3}
.site-card .sc-score{font-size:16px;font-weight:800;margin-top:4px}
.site-card .sc-cams{font-size:10px;color:var(--text-dim);margin-top:3px}
.site-card .sc-status{font-size:10px;color:var(--green);margin-top:4px;display:flex;align-items:center;gap:5px}
.site-card .sc-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}