/* Link-aligned visual refinement: preserves the original project's information architecture
   while keeping the standalone build fast, responsive, and local-first. */
:root{
  --bg:#030712;
  --surface:#0b1220;
  --surface-2:#111a2b;
  --surface-3:#172238;
  --text:#f8fafc;
  --muted:#94a3b8;
  --line:#26354e;
  --accent:#38bdf8;
  --accent-2:#22d3ee;
  --purple:#818cf8;
  --danger:#fb7185;
  --warning:#fbbf24;
  --shadow:0 22px 70px rgba(0,0,0,.38);
  --radius:18px;
  --header-h:86px;
  --sidebar-w:256px;
}
html[data-theme="light"]{
  --bg:#eff6ff;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --surface-3:#e9f1fb;
  --text:#0f172a;
  --muted:#58677d;
  --line:#cbd8e8;
  --accent:#0284c7;
  --accent-2:#0891b2;
  --purple:#4f46e5;
  --danger:#e11d48;
  --warning:#a16207;
  --shadow:0 22px 55px rgba(30,64,175,.14);
}
body{
  background:
    radial-gradient(circle at 78% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 31%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 96%,#07172f),var(--bg));
}
.topbar{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  box-shadow:0 10px 36px rgba(0,0,0,.18);
}
.brand-icon,.mini-brand img{
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  background:linear-gradient(145deg,#dff7ff,#bdefff);
}
.workspace{align-items:start}
.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,#06152c),color-mix(in srgb,var(--bg) 96%,#06152c));
  box-shadow:18px 0 45px rgba(0,0,0,.14);
}
.nav-item{
  position:relative;
  overflow:hidden;
}
.nav-item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 78%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.nav-item:hover:after{transform:translateX(120%)}
.nav-item.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,var(--surface)),color-mix(in srgb,var(--purple) 7%,var(--surface-2)));
  box-shadow:inset 4px 0 0 var(--accent),0 12px 28px rgba(2,132,199,.10);
}
.page-heading{align-items:center}
.page-heading h1{font-size:clamp(34px,4.8vw,58px)}
.heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.updated-chip{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:0 13px;
  background:var(--surface);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.updated-chip strong{color:var(--text)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent-2) 13%,transparent)}
.status-hero{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--purple) 6%,var(--surface)) 62%,var(--surface));
}
.status-orb{background:color-mix(in srgb,var(--accent) 17%,var(--surface-2));border-color:color-mix(in srgb,var(--accent) 48%,var(--line))}
.status-orb span{background:var(--accent);box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 12%,transparent),0 0 34px var(--accent)}
.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.metric-card{
  min-height:155px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.metric-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 50%,var(--line));box-shadow:0 18px 36px rgba(0,0,0,.16)}
.metric-delta{letter-spacing:.08em}
.panel{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.panel:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 18px 42px rgba(0,0,0,.13)}
.overview-workload-panel{margin:18px 0}
.overview-bars{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.overview-bars .bar-row{grid-template-columns:minmax(130px,.38fr) minmax(140px,1fr) 34px}
.bar-fill{background:linear-gradient(90deg,var(--accent),var(--purple));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent)}
.primary-button{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#03131e}
.data-table tbody tr{transition:background .18s ease,transform .18s ease}
.data-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.incident-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.incident-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 36%,var(--line));box-shadow:0 18px 38px rgba(0,0,0,.14)}
.project-footer{margin-top:48px}
@media(max-width:1260px){
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .heading-actions{justify-content:flex-start;width:100%}
  .updated-chip{order:3;width:100%;justify-content:center}
}
@media(max-width:760px){
  :root{--header-h:78px}
  .topbar{height:var(--header-h)}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-card{min-height:142px}
  .overview-bars{grid-template-columns:1fr}
  .page-heading h1{font-size:36px}
  .heading-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .heading-actions .updated-chip{grid-column:1/-1}
  .heading-actions button{width:100%}
  .sidebar{background:var(--bg)}
}
@media(max-width:430px){
  .metric-grid{grid-template-columns:1fr}
  .metric-card{min-height:128px}
  .page-heading h1{font-size:32px}
}