/* Presentation layer. Report content, values and interactions are unchanged. */
:root,
:root[data-theme="light"]{
  --bg:#edf3f1;--surface:#fff;--surface-2:#f3f7f6;--sidebar:#fff;
  --ink:#183b43;--ink-2:#48636b;--muted:#758c91;--line:#e0eae7;--line-2:#cdded9;
  --accent:#0f7d8f;--fac:#bd8d36;--nonfac:#498db9;--violet:#8672b7;--teal:#3b9795;
  --seq-2:#b7d9d4;--seq-3:#73b7b0;--seq-4:#248e93;
  --good:#39866b;--warn:#a97a2f;--crit:#bc5a5a;
  --hair:#eaf0ee;--r:20px;
  --shadow:0 12px 32px -20px #244a4838,0 2px 5px #244a4805;
  --dash-bg:#edf3f1;--dash-rail:#ffffffed;--dash-hover:#e7f2ef;
  --dash-brand-filter:none;--theme-moon:block;--theme-sun:none;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101f24;--surface:#192b30;--surface-2:#20353a;--sidebar:#172b30;
    --ink:#e8f3ef;--ink-2:#bbcfca;--muted:#8ca9a3;--line:#2d4448;--line-2:#3b5659;
    --accent:#62c5c8;--fac:#d9b66d;--nonfac:#83b8dd;--violet:#b5a2da;--teal:#70c4bb;
    --seq-2:#405f62;--seq-3:#5eaaa6;--seq-4:#72c7c0;
    --good:#7cc6a5;--warn:#d9b66d;--crit:#e49792;--hair:#2a4044;
    --shadow:0 14px 34px -19px #0007,0 1px 1px #ffffff03;
    --dash-bg:#101f24;--dash-rail:#172a2ff5;--dash-hover:#263f43;
    --dash-brand-filter:brightness(0) invert(1);--theme-moon:none;--theme-sun:block;
  }
}
:root[data-theme="dark"]{
  --bg:#101f24;--surface:#192b30;--surface-2:#20353a;--sidebar:#172b30;
  --ink:#e8f3ef;--ink-2:#bbcfca;--muted:#8ca9a3;--line:#2d4448;--line-2:#3b5659;
  --accent:#62c5c8;--fac:#d9b66d;--nonfac:#83b8dd;--violet:#b5a2da;--teal:#70c4bb;
  --seq-2:#405f62;--seq-3:#5eaaa6;--seq-4:#72c7c0;
  --good:#7cc6a5;--warn:#d9b66d;--crit:#e49792;--hair:#2a4044;
  --shadow:0 14px 34px -19px #0007,0 1px 1px #ffffff03;
  --dash-bg:#101f24;--dash-rail:#172a2ff5;--dash-hover:#263f43;
  --dash-brand-filter:brightness(0) invert(1);--theme-moon:none;--theme-sun:block;
}
body:not(.login-visible){background:var(--dash-bg)}
#app{background:var(--dash-bg)}
#app .shell{grid-template-columns:238px minmax(0,1fr);gap:22px;padding:18px;align-items:start}
#app main{padding:0 0 36px;min-width:0}
#app aside.rail{position:sticky;top:18px;height:calc(100dvh - 36px);min-height:460px;overflow-y:auto;scrollbar-width:thin;padding:24px 16px 18px;border:1px solid var(--line);border-radius:24px;background:var(--dash-rail);color:var(--ink-2);box-shadow:var(--shadow)}
#app .side-brand{gap:13px;padding:0 4px 22px;margin-bottom:10px;border-color:var(--line)}
#app .side-brand img{width:46px;height:55px;object-fit:contain;padding:0;background:none;border-radius:0;filter:var(--dash-brand-filter)}
#app .side-brand .sb-t{font-size:13px;color:var(--ink);line-height:1.7}
#app .side-brand .sb-s{font-size:11px;color:var(--muted);margin-top:2px}
#app .nav-lbl{font-size:10px;letter-spacing:0;color:var(--muted);padding:9px 12px 12px}
#app .nav a{min-height:45px;gap:11px;margin-bottom:7px;padding:10px 12px;border-radius:12px;color:var(--ink-2);font-size:12px;transition:background .2s,box-shadow .2s,color .2s}
#app .nav a:hover{background:var(--dash-hover);color:var(--ink)}
#app .nav a.on{background:#0f7d8f;color:#fff;box-shadow:0 7px 15px -8px #0f7d8f85}
#app .nav a .ico{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,currentColor 7%,transparent);font-size:14px;opacity:1}
#app .nav a .badge{font-size:10px;min-width:22px;text-align:center;background:color-mix(in srgb,var(--crit) 15%,var(--surface));color:var(--crit)}
#app .side-foot{border-color:var(--line);padding:16px 6px 0;color:var(--muted);font-size:11px}
#app .side-foot b{color:var(--ink-2)!important}
#app .side-reset{margin-top:12px;background:var(--surface-2);border-color:var(--line);color:var(--muted);font-size:11px;padding:8px 10px;min-height:36px}
#app .topbar{top:12px;padding:12px 16px;gap:12px;border:1px solid var(--line);border-radius:19px;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
#app .searchbox{max-width:none;min-width:190px;flex:1}
#app .searchbox input{height:40px;padding:0 34px 0 14px;border-radius:12px;border-color:var(--line);background:var(--surface-2);font-size:12px}
#app .searchbox input:focus{outline:2px solid color-mix(in srgb,var(--accent) 22%,transparent);border-color:var(--accent)}
#app .search-hit{border-radius:15px;box-shadow:0 16px 36px -12px #193a4340}
#app .freshness{padding:6px 10px;font-size:10px;border-color:var(--line);background:var(--surface-2);gap:5px}
#app .freshness .pulse{width:6px;height:6px;animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 11%,transparent)}
#app .who{gap:9px;margin-inline-start:0}
#app .who .av{width:36px;height:36px;background:var(--dash-hover);border:1px solid var(--line);color:var(--accent);font-size:14px}
#app .who .wt b{font-size:12px}
#app .who .wt span{font-size:10px}
#app .top-actions{gap:7px}
#app .btn.ghost{border-color:var(--line);border-radius:11px;background:var(--surface);color:var(--ink-2);min-height:38px;font-size:11px;transition:background .2s,border-color .2s}
#app .btn.ghost:hover{background:var(--dash-hover);border-color:var(--line-2)}
#app #theme-btn{width:38px;padding:0;display:grid;place-items:center;flex:none}
#theme-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#theme-btn .theme-moon{display:var(--theme-moon)}
#theme-btn .theme-sun{display:var(--theme-sun)}
#theme-btn .theme-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#app .page{max-width:1440px;margin-inline:auto;padding:27px 2px 0}
#app .page-head{margin:0 0 24px;padding:0 3px}
#app .page-head h2{font-size:26px;line-height:1.5;letter-spacing:-.4px;color:var(--ink)}
#app .page-head p{font-size:12.8px;line-height:1.9;margin-top:6px;max-width:90ch;color:var(--ink-2)}
#app .kpis{gap:14px;margin-bottom:20px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
#app .kpi{padding:22px 20px 19px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
#app .kpi::before{inset-block:23px auto;inset-inline-start:0;width:3px;height:29px;border-radius:3px;opacity:.75}
#app .kpi .kv{font-size:29px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
#app .kpi .kl{font-size:11px;line-height:1.8;margin-top:9px;color:var(--ink-2)}
#app .kpi .kd{font-size:10px;margin-top:7px;font-weight:500}
#app #home-kpis .kpi:first-child{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}
#app #home-kpis .kpi:first-child .kv{color:var(--accent)}
#app .alert-strip{gap:14px;margin-bottom:22px}
#app .alert-card{border-radius:16px;padding:17px 19px;border-color:var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
#app .alert-card .ac-n{font-size:23px;line-height:1.4}
#app .alert-card .ac-l{font-size:11px;margin-top:5px;line-height:1.7}
#app .callout,#app .narr{background:linear-gradient(110deg,var(--surface),color-mix(in srgb,var(--accent) 7%,var(--surface)));border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:18px;padding:21px 24px;margin-bottom:22px;box-shadow:0 5px 15px -12px #143b4633}
#app .callout h3,#app .narr h3{font-size:14px;line-height:1.8;margin-bottom:7px}
#app .callout p,#app .narr p{font-size:12.5px;line-height:2.05}
#app .grid2,#app .grid3{gap:18px;align-items:stretch}
#app .panel{padding:23px 24px 20px;border-radius:20px;border-color:var(--line);box-shadow:var(--shadow);margin-bottom:18px;min-width:0}
#app .panel h3{font-size:14px;line-height:1.8;font-weight:700}
#app .panel .p-note{font-size:11px;line-height:1.8;margin-top:5px;margin-bottom:20px}
#app .read{font-size:11.8px;line-height:1.95;margin-top:18px;padding-top:14px;border-color:var(--line)}
#app .stack{height:25px;border-radius:9px;gap:2px;background:transparent}
#app .stack button{transition:filter .2s}
#app .stack button:hover{filter:brightness(1.12)}
#app .stack-legend{gap:9px 16px;margin-top:17px;font-size:11px}
#app .sw{width:8px;height:8px;border-radius:3px}
#app .hbars{gap:13px}
#app .hbar .hb-top{font-size:11px;margin-bottom:6px;gap:10px}
#app .hb-track{height:9px;border-radius:8px;background:var(--surface-2)}
#app .hb-seg{border-radius:inherit}
#app .cols{height:155px;gap:9px;padding-top:12px}
#app .col .cb,#app .c-bar{max-width:29px;border-radius:6px 6px 2px 2px;box-shadow:inset 0 1px 0 #ffffff30}
#app .col .cn,#app .c-num{font-size:10px}
#app .col .cl,#app .c-lbl{font-size:10px}
#app .tabs{gap:7px;margin-bottom:22px;padding:5px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);width:fit-content;max-width:100%}
#app .tab{padding:8px 15px;border:0;border-radius:10px;background:transparent;font-size:11.5px;color:var(--ink-2)}
#app .tab.on{background:#0f7d8f;color:#fff;box-shadow:0 4px 9px -5px #0f7d8f80}
#app .fchips{gap:7px;margin-top:17px}
#app .fchips button{font-size:10.5px;padding:5px 11px;border-radius:8px;border-color:var(--line);background:var(--surface-2)}
#app .fchips button.on{background:#0f7d8f;color:#fff;border-color:transparent}
#app .gallery{gap:18px;margin-top:5px}
#app .rcard{border-radius:20px;padding:24px;border-color:var(--line);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
#app .rcard .rc-ico{width:42px;height:42px;border-radius:13px;margin-bottom:15px}
#app .rcard h4{font-size:14px;line-height:1.7}
#app .rcard p{font-size:11.8px;line-height:1.9}
#app .rcard .rc-meta{font-size:10.5px;margin-top:16px;padding-top:12px}
#app .rcard:hover,#app .alert-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 18px 34px -22px #17464f66}
#app .filterbox{margin:14px 0 18px}
#app .filterbox input{height:42px;max-width:400px;border-radius:11px;border-color:var(--line);background:var(--surface-2);font-size:12px}
#app .tbl-wrap{border:1px solid var(--line);border-radius:12px;scrollbar-width:thin}
#app table{font-size:12px}
#app thead th{background:var(--surface-2);padding:13px 14px;font-size:10.8px;border-color:var(--line)}
#app tbody td{padding:13px 14px;line-height:1.8;border-color:var(--hair)}
#app tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
#app tbody tr:hover{background:var(--dash-hover)}
#app .c360-head,#app .alert,#app .so{border-radius:18px;box-shadow:var(--shadow);border-color:var(--line)}
#app .chip{border-radius:8px;font-size:10px;padding:4px 9px}
#app :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.drawer{border-color:var(--line);background:var(--surface);box-shadow:14px 0 50px #10282f20;padding:28px 26px 40px}
.drawer .editbox input,.drawer .editbox select,.drawer .editbox textarea{border-color:var(--line);border-radius:10px}
.drawer-back{background:#10282f66;backdrop-filter:blur(3px)}
@media(max-width:1180px) and (min-width:1001px){
  #app .shell{grid-template-columns:220px minmax(0,1fr);gap:16px;padding:16px}
  #app aside.rail{top:16px;height:calc(100dvh - 32px);padding-inline:12px}
  #app .topbar{gap:8px;padding:10px 12px}
  #app .searchbox{min-width:160px}
  #app .freshness{font-size:9px;padding:5px 8px}
  #app .kpi{padding:20px 16px 18px}
  #app .kpi .kv{font-size:27px}
  #app .panel{padding:21px 20px}
}
@media(max-width:1000px){
  #app .shell{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}
  #app aside.rail{position:static;min-height:0;height:auto;overflow:visible;display:grid;grid-template-columns:1fr auto;gap:12px 24px;padding:16px 18px;border-radius:20px}
  #app .side-brand{padding:0;margin:0;border:0;align-self:center}
  #app .side-brand img{width:36px;height:44px}
  #app .side-foot{grid-column:2;grid-row:1;padding:0;border:0;margin:0;font-size:9px;line-height:1.5}
  #app .side-reset{padding:4px 10px;min-height:30px;margin-top:5px;font-size:10px}
  #app .nav{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:5px;border-top:1px solid var(--line);padding-top:12px}
  #app .nav-lbl{padding:0 5px;margin-inline-end:4px}
  #app .nav a{margin:0;padding:8px 10px;min-height:38px;gap:7px;font-size:11px}
  #app .nav a .ico{width:19px;height:19px;font-size:12px}
  #app .page{padding-top:22px}
  #app .topbar{top:8px}
  #app .grid2,#app .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  #app .shell{padding:10px;gap:12px}
  #app aside.rail{padding:14px 12px;border-radius:17px;gap:12px}
  #app .side-brand{gap:8px}
  #app .side-brand .sb-t{font-size:11px}
  #app .side-brand .sb-s{font-size:9px}
  #app .nav{gap:5px;padding-top:10px}
  #app .nav-lbl{flex-basis:100%;padding:0 4px 3px;font-size:9px}
  #app .nav a{font-size:10.5px;padding:7px 9px}
  #app .topbar{padding:10px;border-radius:16px;gap:10px;position:relative;top:0}
  #app .searchbox{flex-basis:100%;order:-1;min-width:0}
  #app .who{margin-inline-start:auto}
  #app .freshness{font-size:9px;padding:5px 8px}
  #app .top-actions{gap:5px}
  #app .top-actions .btn.ghost{min-height:34px;padding:5px 9px;font-size:10px}
  #app #theme-btn{width:34px;padding:0}
  #app .who .av{width:29px;height:29px;font-size:11px}
  #app .who .wt b{font-size:10px}
  #app .who .wt span{font-size:9px}
  #app .page{padding:20px 1px 0}
  #app .page-head{margin-bottom:18px}
  #app .page-head h2{font-size:23px}
  #app .page-head p{font-size:11.5px;line-height:1.95}
  #app .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  #app .kpi{padding:18px 14px;border-radius:16px}
  #app .kpi .kv{font-size:25px}
  #app .kpi .kl{font-size:10px;margin-top:7px}
  #app .kpi .kd{font-size:9px}
  #app .alert-strip{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:16px}
  #app .alert-card{display:flex;align-items:center;gap:14px;padding:12px 17px;text-align:right}
  #app .alert-card .ac-n{min-width:34px;font-size:22px}
  #app .alert-card .ac-l{margin:0;font-size:11px}
  #app .callout,#app .narr{padding:18px;border-radius:16px;margin-bottom:16px}
  #app .callout p,#app .narr p{font-size:11.8px}
  #app .grid2,#app .grid3,#app .gallery{grid-template-columns:minmax(0,1fr);gap:0}
  #app .panel{padding:20px 17px;margin-bottom:14px;border-radius:17px}
  #app .panel h3{font-size:13px}
  #app .rcard{padding:21px;margin-bottom:14px;border-radius:17px}
  #app .tabs{gap:4px;padding:4px;margin-bottom:16px}
  #app .tab{font-size:10.5px;padding:7px 10px}
  #app .sim{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  #app *,#app *::before,#app *::after,.drawer{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}