:root{--bg:#080B12;--pn:#10141E;--ln:#222B3D;--ink:#E7ECF5;--mu:#8A97AD;--pur:#A855F7;--grn:#3DFF9A;--tel:#2DE2D0;--amb:#FFB020;--red:#FF4D6D;--org:#FF7A1A;--gl:.7;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#EEF1F6;--pn:#fff;--ln:#D6DCE8;--ink:#141A26;--mu:#5B677A;--pur:#7C3AED;--grn:#0C9F5E;--tel:#0E8C99;--amb:#B45309;--red:#D6224A;--org:#D9530B;--gl:0;color-scheme:light}}
:root[data-theme="light"]{--bg:#EEF1F6;--pn:#fff;--ln:#D6DCE8;--ink:#141A26;--mu:#5B677A;--pur:#7C3AED;--grn:#0C9F5E;--tel:#0E8C99;--amb:#B45309;--red:#D6224A;--org:#D9530B;--gl:0;color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Space Grotesk",system-ui,sans-serif}
.app{max-width:1400px;margin:0 auto;padding:18px 16px 32px}
header{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-bottom:16px}
h1{font-size:22px;margin:0;font-weight:600}
.sub{color:var(--mu);font-size:13px}
.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--ln);background:var(--pn);border-radius:99px;padding:4px 12px;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn)}
.dot.bad{background:var(--red);box-shadow:0 0 8px var(--red)}
.dot.warn{background:var(--amb);box-shadow:0 0 8px var(--amb)}
@media (prefers-reduced-motion:no-preference){.live{animation:p 2s ease-in-out infinite}@keyframes p{50%{opacity:.35}}}
.left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.title-block{min-width:0}
.foot{margin-top:32px;padding-top:18px;border-top:1px solid var(--ln);display:flex;justify-content:center;align-items:center;gap:6px;color:var(--mu);font-size:13px;flex-wrap:wrap}
.foot a{color:var(--org);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.foot a:hover{text-decoration:underline}
.foot a svg{display:block}
.kpis,.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(2,1fr);margin-bottom:14px}
.grid{grid-template-columns:1fr}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}.grid{grid-template-columns:repeat(12,1fr)}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}}
.pn{background:var(--pn);border:1px solid var(--ln);border-radius:10px;padding:14px;min-width:0}
.pn h2{font-size:14px;font-weight:500;color:var(--mu);margin:0 0 10px}

.k b{display:block;font-size:28px;font-weight:600;line-height:1.1}
.k span{color:var(--mu);font-size:13px}
svg{display:block;width:100%}
.ch svg{height:150px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) calc(var(--gl)*100%),transparent))}
.donut{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.donut svg{width:130px;height:130px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pur) calc(var(--gl)*100%),transparent))}
.lg{list-style:none;margin:0;padding:0;font-size:13px}
.lg li{display:flex;gap:8px;align-items:center;margin:3px 0}
.sw{width:10px;height:10px;border-radius:2px}
.hb{display:grid;grid-template-columns:70px 1fr 40px;gap:8px;align-items:center;font-size:13px;margin:7px 0}
.tr{height:8px;background:var(--ln);border-radius:4px;overflow:hidden}
.tr i{display:block;height:100%;border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
.tw{overflow-x:auto}
th{font-weight:500;color:var(--mu);text-align:left}
td,th{padding:7px 8px;border-bottom:1px solid var(--ln);white-space:nowrap}
.sp{width:80px;height:22px}
.act{border:1px solid var(--ln);border-radius:8px;padding:10px;margin-bottom:10px}
.act p{margin:2px 0;font-size:13px;color:var(--mu)}
.cmd{font:12px ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--ln);border-radius:6px;padding:4px 8px;display:inline-block;margin:4px 0;color:var(--tel);max-width:100%;overflow-x:auto}
.tag{font-size:12px;border-radius:99px;padding:1px 9px;border:1px solid currentColor}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
button{font:inherit;cursor:pointer;border-radius:7px;padding:6px 14px;border:1px solid var(--ln);background:var(--pn);color:var(--ink)}
button.ok{background:var(--grn);color:#04130C;border-color:var(--grn);font-weight:600}
button:hover{filter:brightness(1.12)}
button:focus-visible,input:focus-visible{outline:2px solid var(--pur);outline-offset:2px}
.au{font-size:13px;margin:0;padding:0;list-style:none}
.au li{padding:6px 0;border-bottom:1px solid var(--ln)}
.au time{color:var(--mu);margin-right:8px}
dialog{background:var(--pn);color:var(--ink);border:1px solid var(--ln);border-radius:12px;max-width:420px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
input{font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--ln);border-radius:6px;padding:6px 10px;width:100%;margin-top:8px}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--pn);border:1px solid var(--grn);border-radius:8px;padding:8px 16px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
.empty{color:var(--mu);font-size:14px;padding:8px 0}
@media (max-width:640px){.sep{display:none}.brand-name{font-size:14px}.brand-tag{display:none}}
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeUp   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
  @keyframes drawLine { to  {stroke-dashoffset:0} }
  @keyframes growBarY { from{transform:scaleY(0)} to{transform:scaleY(1)} }
  @keyframes growBarX { from{transform:scaleX(0)} to{transform:scaleX(1)} }
  @keyframes donutPop { from{opacity:0;transform:scale(.86)} to{opacity:1;transform:scale(1)} }
  @keyframes kpiPop   { 0%,100%{transform:scale(1)} 45%{transform:scale(1.07)} }
  .k b                 { animation: kpiPop .55s ease-out; }
  .ch .chart-line      { stroke-dasharray:1; stroke-dashoffset:1; animation: drawLine 1.3s ease-out forwards; }
  .ch .area-fill       { opacity:0; animation: fadeIn .9s ease-out .15s forwards; }
  .ch svg rect         { transform-origin:center bottom; transform-box:fill-box; animation: growBarY .5s ease-out both; }
  .donut svg           { animation: donutPop .7s ease-out both; }
  .hb .tr i            { transform-origin:left center; animation: growBarX .55s ease-out both; }
  .act                 { animation: fadeUp .35s ease-out both; }
  .au li               { animation: fadeUp .30s ease-out both; }
  #srv tr              { animation: fadeUp .30s ease-out both; }
  .sp .chart-line      { stroke-dasharray:1; stroke-dashoffset:1; animation: drawLine .8s ease-out forwards; }
}

/* Login background video */
#login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
#login-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;filter:saturate(1.1) contrast(1.05) brightness(1.15)}
#login-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,18,.15) 0%,rgba(8,11,18,0) 40%,rgba(8,11,18,0) 60%,rgba(8,11,18,.25) 100%);pointer-events:none}
#authdlg{position:relative;z-index:2}
#authdlg::backdrop{background:rgba(8,11,18,.1)}
@media (prefers-reduced-motion:reduce){
  #login-bg video{display:none}
  #login-bg{background:var(--bg) url("/login-bg.jpg") center/cover no-repeat}
}

/* Login modal — brand accents */
#authdlg{
  border:1px solid rgba(255,122,26,.32);
  border-top:3px solid var(--org);
  border-radius:16px;
  padding:30px 28px 26px;
  max-width:440px;
  background:
    linear-gradient(180deg,
      rgba(255,122,26,.08) 0%,
      rgba(16,20,30,.42) 25%,
      rgba(16,20,30,.5) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    0 0 0 1px rgba(255,122,26,.18),
    0 0 80px rgba(255,122,26,.22),
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--ink);
}

#authdlg .auth-logo{
  display:flex;flex-direction:column;align-items:center;
  margin:0 0 20px;
}
#authdlg .auth-logo img{
  max-width:160px;height:auto;display:block;
  filter:drop-shadow(0 0 18px rgba(255,122,26,.45));
}
#authdlg .auth-logo-sub{
  font-size:10px;color:rgba(231,236,245,.65);
  letter-spacing:2.5px;text-transform:uppercase;
  margin-top:10px;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

#authdlg h2{
  color:var(--org) !important;
  font-weight:700;
  letter-spacing:.2px;
  margin:0 0 6px !important;
  font-size:23px !important;
  text-align:center;
  text-shadow:0 2px 14px rgba(255,122,26,.4);
}
#authdlg .auth-sub{
  text-align:center;
  margin:0 0 16px;
  color:rgba(231,236,245,.72);
  font-size:13px;
}
#authdlg #aerr{
  text-align:center;
  font-size:13px;
  color:var(--red);
  min-height:0;
  margin:0 0 10px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

#authdlg label.sub{
  display:block;
  color:rgba(255,122,26,.85);
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:600;
  margin-top:14px;
}

#authdlg input{
  background:rgba(8,11,18,.55);
  border:1px solid rgba(255,122,26,.25);
  color:var(--ink);
  margin-top:6px;
  padding:11px 14px;
  border-radius:9px;
  font-size:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .15s, box-shadow .15s;
}
#authdlg input:focus{
  outline:none;
  border-color:var(--org);
  box-shadow:0 0 0 3px rgba(255,122,26,.25), 0 0 24px rgba(255,122,26,.15);
}
#authdlg input::placeholder{color:rgba(138,151,173,.55)}

#authdlg button.ok{
  width:100%;
  padding:12px 16px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--org) 92%, #ffe0bd) 0%,
    var(--org) 100%);
  border:1px solid var(--org);
  color:#1a0a00;
  font-weight:700;
  letter-spacing:.4px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(255,122,26,.4), 0 2px 6px rgba(0,0,0,.3);
  transition:filter .15s, box-shadow .15s, transform .08s;
  font-size:14px;
}
#authdlg button.ok:hover{
  filter:brightness(1.08);
  box-shadow:0 10px 32px rgba(255,122,26,.55), 0 2px 6px rgba(0,0,0,.4);
}
#authdlg button.ok:active{transform:translateY(1px)}

#authdlg .row{justify-content:stretch;margin-top:22px}

#authdlg::backdrop{
  background:rgba(8,11,18,.15);
  backdrop-filter:blur(2px);
}


/* ── brand tagline ─────────────────────────────────────────────── */
  text-decoration: underline;
  text-decoration-color: rgba(255,122,26,.85);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ── KPI cards – per-card glass tint (uses inline --c on .k) ────── */
.k{
  border:1px solid color-mix(in srgb, var(--c, var(--tel)) 35%, transparent) !important;
  border-radius:14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c, var(--tel)) 10%, rgba(16,20,30,.55)) 0%,
      rgba(16,20,30,.55) 60%,
      rgba(16,20,30,.65) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--c, var(--tel)) 18%, transparent),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 color-mix(in srgb, var(--c, var(--tel)) 15%, rgba(255,255,255,.04));
}
.k b{ color: var(--ink); }
.k span{ color: color-mix(in srgb, var(--c, var(--tel)) 70%, var(--mu)); }

/* ── header actions wrapper (clock + logout) ──────────────────── */
.header-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}

/* ── logout button ────────────────────────────────────────────── */
.logout-btn{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;cursor:pointer;
  padding:8px 14px;border-radius:8px;
  background:rgba(255,77,109,.10);
  border:1px solid rgba(255,77,109,.35);
  color:var(--red);
  font-size:13px;font-weight:600;
  transition:background .15s, border-color .15s, box-shadow .15s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.logout-btn svg{width:15px;height:15px}
.logout-btn:hover{
  background:rgba(255,77,109,.18);
  border-color:var(--red);
  box-shadow:0 0 20px rgba(255,77,109,.25);
}
.logout-btn:active{transform:translateY(1px)}

/* ── fixed footer at bottom of viewport ───────────────────────── */
body{ min-height:100vh; }
.app{ padding-bottom: 90px; }   /* space so footer never covers content */
.foot{
  position: fixed !important;
  left:0; right:0; bottom:0;
  margin:0 !important;
  padding: 12px 16px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top:1px solid var(--ln);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}

/* KPI cards — hover animation */
.k{
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
  will-change: transform;
  cursor: default;
}
.k b{
  transition: text-shadow .32s ease, color .32s ease;
}

@media (prefers-reduced-motion:no-preference){
  .k:hover{
    transform: translateY(-4px);
  }
}
.k:hover{
  border-color: color-mix(in srgb, var(--c, var(--tel)) 72%, transparent) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c, var(--tel)) 16%, rgba(16,20,30,.55)) 0%,
      rgba(16,20,30,.55) 55%,
      rgba(16,20,30,.65) 100%);
  box-shadow:
    0 0 44px color-mix(in srgb, var(--c, var(--tel)) 34%, transparent),
    0 16px 34px rgba(0,0,0,.45),
    inset 0 1px 0 color-mix(in srgb, var(--c, var(--tel)) 28%, rgba(255,255,255,.08));
}
.k:hover b{
  color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c, var(--tel)) 65%, transparent);
}
.k:hover span{
  color: color-mix(in srgb, var(--c, var(--tel)) 92%, var(--mu));
}
.k:active{
  transition-duration:.12s;
}
@media (prefers-reduced-motion:no-preference){
  .k:active{ transform: translateY(-1px); }
}

/* Panels get a subtler lift so the dashboard still feels alive */
.pn{
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}
.pn:hover{
  border-color: color-mix(in srgb, var(--org) 28%, var(--ln));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--org) 10%, transparent),
    0 10px 28px rgba(0,0,0,.32);
}
/* Title block separator */
.title-sep{
  color: var(--org);
  font-weight: 300;
  margin: 0 6px;
  opacity: .8;
}

/* Matrix rain — dashboard background */
#ops-matrix-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
#ops-matrix-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .55;
}
#ops-matrix-vig{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 88% at 50% 46%,
      rgba(8,11,18,.10) 34%,
      rgba(8,11,18,.85) 100%),
    linear-gradient(180deg,
      rgba(8,11,18,.45) 0%,
      rgba(8,11,18,.10) 22%,
      rgba(8,11,18,.10) 78%,
      rgba(8,11,18,.55) 100%);
}

/* keep the whole app above the matrix */
.app{
  position: relative;
  z-index: 1;
}

/* Dashboard Layout Tightening */
#acts {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

.au {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Glass-styled Scrollbars */
#acts::-webkit-scrollbar, .au::-webkit-scrollbar {
  width: 6px;
}
#acts::-webkit-scrollbar-track, .au::-webkit-scrollbar-track {
  background: transparent;
}
#acts::-webkit-scrollbar-thumb, .au::-webkit-scrollbar-thumb {
  background: var(--ln);
  border-radius: 4px;
}
#acts::-webkit-scrollbar-thumb:hover, .au::-webkit-scrollbar-thumb:hover {
  background: var(--org);
}

/* 1. Stop the grid from stretching cards vertically */
.grid {
  align-items: start !important;
}

/* 2. Force the Recent Activity card to a fixed height */
.pn.s4:has(.au) {
  height: 340px;
  display: flex;
  flex-direction: column;
}
.au {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

/* 3. Force the Needs Approval card to a fixed height */
.pn.s5:has(#acts) {
  height: 380px;
  display: flex;
  flex-direction: column;
}
#acts {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

/* 4. Force the charts to stay a normal height */
.ch {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ch svg {
  height: 150px !important; /* Prevents the bars from stretching */
  flex-shrink: 0;
}

/* --- NUCLEAR DASHBOARD LAYOUT FIX --- */

/* 1. Stop all cards from stretching to match each other vertically */
.grid {
  align-items: start !important;
}

/* 2. Lock the chart cards (SSH, Disk, Load, Events) to a tight 240px height */
.pn.ch {
  height: 240px !important;
  display: flex;
  flex-direction: column;
}
.pn.ch svg {
  height: 150px !important;
  min-height: 150px !important;
  flex-shrink: 0;
}

/* 3. Lock Recent Activity to exactly match the charts */
.pn.s4:has(#audit) {
  height: 240px !important;
  display: flex;
  flex-direction: column;
}
#audit {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

/* 4. Lock Needs Approval to a reasonable height so it doesn't push the page down */
.pn.s5:has(#acts) {
  height: 350px !important;
  display: flex;
  flex-direction: column;
}
#acts {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

/* 5. Lock the Servers table to match the Approval card */
.pn.s7:has(.tw) {
  height: 350px !important;
  display: flex;
  flex-direction: column;
}
.tw {
  flex: 1;
  overflow-y: auto;
}

/* --- FINAL LAYOUT FIX --- */

/* 1. Stop the grid from stretching cards to match the tallest sibling */
.grid {
  align-items: start !important;
}

/* 2. Shrink the chart SVG so the cards match the exact height of the Donut card */
.ch svg {
  height: 105px !important;
  min-height: 105px !important;
}

/* 3. Constrain Recent Activity to a scrollable box */
.pn.s4:has(#audit) {
  height: auto !important;
}
#audit {
  max-height: 200px !important;
  overflow-y: auto !important;
  padding-right: 6px;
}

/* 4. Constrain Needs Approval to a scrollable box */
.pn.s5:has(#acts) {
  height: auto !important;
}
#acts {
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-right: 6px;
}

/* 5. Style the scrollbars so they look like glass */
#acts::-webkit-scrollbar, #audit::-webkit-scrollbar {
  width: 6px;
}
#acts::-webkit-scrollbar-track, #audit::-webkit-scrollbar-track {
  background: transparent;
}
#acts::-webkit-scrollbar-thumb, #audit::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
#acts::-webkit-scrollbar-thumb:hover, #audit::-webkit-scrollbar-thumb:hover {
  background: var(--org);
}

/* --- ABSOLUTE FINAL LAYOUT FIX --- */

/* 1. Stop the grid from stretching rows vertically */
.grid {
  align-items: start !important;
  grid-auto-rows: min-content !important;
}

/* 2. Reset chart containers so they don't stretch */
.ch {
  display: block !important;
  height: auto !important;
}
.ch svg {
  height: 135px !important; /* Matches the exact height of the donut chart */
  min-height: 135px !important;
  max-height: 135px !important;
}

/* 3. Force Recent Activity to stay compact and scroll internally */
#audit {
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 6px;
}

/* 4. Force Needs Approval to stay compact and scroll internally */
#acts {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding-right: 6px;
}

/* 5. Keep the Servers table compact too */
.tw {
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* 6. Add the glass scrollbars to all three */
#acts::-webkit-scrollbar, #audit::-webkit-scrollbar, .tw::-webkit-scrollbar {
  width: 6px;
}
#acts::-webkit-scrollbar-track, #audit::-webkit-scrollbar-track, .tw::-webkit-scrollbar-track {
  background: transparent;
}
#acts::-webkit-scrollbar-thumb, #audit::-webkit-scrollbar-thumb, .tw::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
#acts::-webkit-scrollbar-thumb:hover, #audit::-webkit-scrollbar-thumb:hover, .tw::-webkit-scrollbar-thumb:hover {
  background: var(--org);
}

/* --- THE ULTIMATE GRID & CHART FIX --- */

/* 1. Force the grid to hug the content and not stretch rows */
main.grid {
  display: grid !important;
  align-items: start !important;
  grid-auto-rows: min-content !important;
}

main.grid > .pn {
  align-self: start !important;
  height: fit-content !important;
}

/* 2. Kill all flex stretching on the chart cards */
.pn.ch {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

.ch {
  display: block !important;
  height: auto !important;
}

/* 3. Lock the SVG height exactly */
.ch svg {
  height: 130px !important;
  min-height: 130px !important;
  max-height: 130px !important;
}

/* 4. Force the long lists to scroll inside fixed-size boxes */
.pn.s4:has(#audit) {
  max-height: 300px !important;
  overflow: hidden !important;
}
#audit {
  max-height: 220px !important;
  overflow-y: auto !important;
}

.pn.s5:has(#acts) {
  max-height: 350px !important;
  overflow: hidden !important;
}
#acts {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.pn.s7:has(.tw) {
  max-height: 350px !important;
  overflow: hidden !important;
}
.tw {
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* --- PERFECT GRID ALIGNMENT --- */
@media (min-width: 760px) {
  /* TOP ROW: Donut, Fleet Load, Events (Forced to 210px) */
  main.grid > .pn:nth-child(1),
  main.grid > .pn:nth-child(2),
  main.grid > .pn:nth-child(3) {
    height: 210px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  main.grid > .pn:nth-child(1) .donut {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  main.grid > .pn:nth-child(2) .ch,
  main.grid > .pn:nth-child(3) .ch {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  main.grid > .pn:nth-child(2) .ch svg,
  main.grid > .pn:nth-child(3) .ch svg {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* MIDDLE ROW: SSH, Disk, Recent Activity (Forced to 230px) */
  main.grid > .pn:nth-child(4),
  main.grid > .pn:nth-child(5),
  main.grid > .pn:nth-child(6) {
    height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  main.grid > .pn:nth-child(4) .ch {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  main.grid > .pn:nth-child(4) .ch svg {
    height: 100% !important;
    min-height: 0 !important;
  }
  main.grid > .pn:nth-child(6) .au {
    flex: 1 !important;
    overflow-y: auto !important;
  }

  /* BOTTOM ROW: Approvals, Servers (Forced to 350px) */
  main.grid > .pn:nth-child(7),
  main.grid > .pn:nth-child(8) {
    height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  main.grid > .pn:nth-child(7) #acts {
    flex: 1 !important;
    overflow-y: auto !important;
  }
  main.grid > .pn:nth-child(8) .tw {
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

/* --- PERFECT ROW 2 ALIGNMENT (SSH, Disk, Activity) --- */
@media (min-width: 760px) {
  /* Target cards 4 (SSH), 5 (Disk), and 6 (Activity) */
  main.grid > .pn:nth-child(4),
  main.grid > .pn:nth-child(5),
  main.grid > .pn:nth-child(6) {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
  }

  /* Make the SSH chart fill the card exactly */
  main.grid > .pn:nth-child(4) .ch {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  main.grid > .pn:nth-child(4) .ch svg {
    flex: 1 !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* Make the Recent Activity list fill the card exactly */
  main.grid > .pn:nth-child(6) .au {
    flex: 1 !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* --- FORCE MIDDLE ROW TO MATCH EXACTLY --- */
main.grid {
  align-items: start !important;
}

/* Target cards 4 (SSH), 5 (Disk), and 6 (Activity) */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Force the chart SVGs and the activity list to fill the box and scroll */
main.grid > .pn:nth-child(4) .ch,
main.grid > .pn:nth-child(6) .au {
  flex: 1 !important;
  overflow-y: auto !important;
  margin: 0 !important;
}

main.grid > .pn:nth-child(4) .ch svg {
  height: 100% !important;
  width: 100% !important;
}

/* --- THE TRUE FIX FOR GRID HEIGHTS --- */

/* 1. Force grid items to be able to shrink smaller than their content */
main.grid > .pn {
  min-height: 0 !important; 
}

/* 2. Lock the middle row (SSH, Disk, Activity) to exactly 250px */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 3. Make the charts and activity list fill their cards perfectly */
main.grid > .pn:nth-child(4) .ch,
main.grid > .pn:nth-child(6) .au {
  flex: 1 !important;
  height: 100% !important;
  overflow-y: auto !important;
  margin: 0 !important;
}

/* 4. Make the SVG chart fill 100% of its new fixed area */
main.grid > .pn:nth-child(4) .ch svg {
  height: 100% !important;
  width: 100% !important;
}

/* --- FORCE ACTIVITY CARD TO 250PX --- */
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 0 !important; /* This kills the stretching */
  overflow: hidden !important;
}

/* Force the inner list to scroll within the remaining space */
main.grid > .pn:nth-child(6) #audit {
  flex: 1 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}

/* --- LOCK MIDDLE ROW BACK TO 250PX --- */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 250px !important;
  overflow: hidden !important;
}

/* Ensure inner elements still fill the 250px correctly */
main.grid > .pn:nth-child(6) #audit {
  flex: 1 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

main.grid > .pn:nth-child(4) .ch {
  flex: 1 !important;
  height: 100% !important;
}

main.grid > .pn:nth-child(4) .ch svg {
  height: 100% !important;
}

/* --- FORCE RESET HEIGHT TO 250PX --- */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 0 !important; /* Kills the 300px stretching */
  overflow: hidden !important;
}

/* Ensure the inner activity list fills the space */
main.grid > .pn:nth-child(6) #audit {
  flex: 1 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}

/* --- THE FINAL, UNAVOIDABLE 250PX LOCK --- */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 0 !important; 
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

/* Target the inner list directly so it CANNOT push the card open */
main.grid > .pn:nth-child(6) #audit {
  height: 190px !important; /* 250px minus the header */
  max-height: 190px !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}

/* Target the chart directly */
main.grid > .pn:nth-child(4) .ch {
  height: 190px !important;
}

/* --- FINAL FLEXBOX FIX FOR EXACT 250PX --- */
main.grid > .pn:nth-child(4),
main.grid > .pn:nth-child(5),
main.grid > .pn:nth-child(6) {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Tell the chart and the activity list to fill the exact remaining space */
main.grid > .pn:nth-child(4) .ch,
main.grid > .pn:nth-child(6) #audit {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}

main.grid > .pn:nth-child(4) .ch svg {
  height: 100% !important;
}

/* --- THREAT TICKER --- */
.ticker-wrap {
  display: flex; align-items: center; background: rgba(16,20,30,.85);
  border: 1px solid rgba(255,77,109,.3); border-radius: 8px;
  overflow: hidden; margin-bottom: 14px; height: 38px;
}
.ticker-title {
  background: var(--red); color: #fff; font-weight: 700;
  font-size: 12px; padding: 0 14px; height: 100%;
  display: flex; align-items: center; letter-spacing: 1px; z-index: 2; flex-shrink: 0;
}
.ticker { flex: 1; overflow: hidden; white-space: nowrap; }
.ticker-content { display: inline-block; white-space: nowrap; animation: ticker 80s linear infinite; padding-left: 20px; }
.ticker-content:hover { animation-play-state: paused; }
.ticker-content span { margin-right: 40px; font-family: ui-monospace, monospace; font-size: 13px; }
.ticker-ip { color: var(--red); font-weight: 600; }
.ticker-details { color: var(--mu); }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* --- CVE SIDEBAR LAYOUT (FLEXBOX) --- */
@media (min-width: 1024px) {
  .app {
    max-width: 1800px !important; /* Widen the app to fit the sidebar */
  }
  .main-and-sidebar {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 14px;
  }
  .main-and-sidebar > main.grid {
    flex: 1;
    min-width: 0; /* Prevents inner grid from overflowing */
    margin-top: 0 !important;
  }
  #cveSidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    height: calc(100vh - 120px);
  }
}

/* Mobile fallback */
@media (max-width: 1023px) {
  .main-and-sidebar {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
  }
  #cveSidebar {
    width: 100%;
    order: -1; /* Put feed above main dashboard on mobile */
    margin-bottom: 14px;
    max-height: 400px;
  }
}

.cve-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}
.cve-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(16,20,30,.5);
  border: 1px solid var(--ln); border-radius: 8px; font-size: 13px;
}
.cve-cvss { font-weight: 700; font-family: monospace; padding: 4px 8px; border-radius: 4px; min-width: 44px; text-align: center; }
.cve-cvss.critical { background: rgba(255,59,92,.15); color: var(--red); }
.cve-cvss.high { background: rgba(255,122,69,.15); color: var(--sev-high); }
.cve-cvss.medium { background: rgba(255,176,32,.15); color: var(--amb); }
.cve-cvss.low { background: rgba(79,156,255,.15); color: var(--tel); }
.cve-title { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-id { color: var(--mu); font-size: 11px; font-family: monospace; margin-top: 2px; }
.cve-kev { color: var(--red); font-size: 11px; font-weight: 700; }

/* Make CVE items feel clickable */
.cve-item {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a:hover .cve-item {
  background: rgba(255, 122, 26, 0.1) !important;
  border-color: var(--org) !important;
  transform: translateY(-1px);
}

/* --- CVE Dialog Glassmorphism --- */
#cveDialog {
  background: rgba(18, 20, 28, 0.75) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6) !important;
  border-radius: 16px !important;
  color: var(--ink, #e2e8f0);
}

#cveDialog::backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* Make the rows look nicer inside the glass */
#cveDialogList > div {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#cveDialogList > div:last-child {
  border-bottom: none !important;
}

/* Colored edge for CVE Dialog */
#cveDialog {
  border-left: 6px solid var(--red) !important;
  background: rgba(18, 20, 28, 0.85) !important; /* Slightly more opaque for readability */
}

/* Override the left border and apply full card border + glow */
#cveDialog {
  border-left: 1px solid var(--red, #ef4444) !important; /* Resets the 6px line */
  border: 1px solid var(--red, #ef4444) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2), 0 8px 32px 0 rgba(0, 0, 0, 0.6) !important;
}

/* True neon glow effect matching the dashboard cards */
#cveDialog {
  border: 1px solid var(--red, #ef4444) !important;
  box-shadow: 
    0 0 15px rgba(239, 68, 68, 0.5),           /* Outer neon bloom */
    inset 0 0 10px rgba(239, 68, 68, 0.15),    /* Inner glow */
    0 10px 30px rgba(0, 0, 0, 0.8) !important; /* Base drop shadow for depth */
}

/* Top-down gradient shade for the neon glass effect */
#cveDialog {
  background: 
    linear-gradient(180deg, rgba(239, 68, 68, 0.15) 0%, rgba(18, 20, 28, 0.95) 30%), 
    rgba(18, 20, 28, 0.95) !important;
}