/* ============================================================================
   LIGHTNING OPERATIONS — Unified Design System
   Loaded on every page AFTER its own inline <style>, so these rules re-skin the
   existing markup to one enterprise language WITHOUT changing layout or logic.
   Overrides target color / type / border / shadow — never width/position — so
   each module's working layout and business engine are untouched.
   ============================================================================ */

:root{
  --lo-navy-900:#0b1730; --lo-navy-800:#0e1b34; --lo-navy-700:#13284a; --lo-navy-600:#1b3a6b;
  --lo-accent:#2f6fed; --lo-accent-600:#2359c9; --lo-accent-050:#eaf1fe; --lo-glow:rgba(47,111,237,.16);
  --lo-bg:#f5f6f8; --lo-surface:#fff; --lo-surface-2:#fafbfc; --lo-sunken:#eff2f6;
  --lo-line:#e4e8ee; --lo-line-2:#d5dbe4;
  --lo-ink:#131a24; --lo-ink-2:#3d4753; --lo-ink-3:#697384; --lo-ink-4:#98a2b0;
  --lo-ok:#12855f; --lo-ok-bg:#e5f5ee; --lo-ok-line:#b6e3d0;
  --lo-warn:#b7791f; --lo-warn-bg:#fdf3e2; --lo-warn-line:#f3dcae;
  --lo-crit:#d1382c; --lo-crit-bg:#fdecea; --lo-crit-line:#f5c6c1;
  --lo-info:#2f6fed; --lo-info-bg:#eaf1fe; --lo-info-line:#c3d8fb;
  --lo-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lo-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --lo-r-sm:6px; --lo-r:9px; --lo-r-md:12px; --lo-r-lg:16px;
  --lo-sh-1:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --lo-sh-2:0 2px 8px rgba(16,24,40,.08),0 8px 24px rgba(16,24,40,.06);
  --lo-sh-pop:0 16px 48px rgba(11,23,48,.24);
  --lo-sidebar-w:236px; --lo-topbar-h:56px;
}

/* ---------- base (scoped so login page can opt out via body.lo-bare) ---------- */
body.lo-app{
  font-family:var(--lo-font); background:var(--lo-bg); color:var(--lo-ink);
  -webkit-font-smoothing:antialiased; margin:0;
  padding-left:var(--lo-sidebar-w); padding-top:var(--lo-topbar-h);
  min-height:100vh; transition:padding-left .16s ease;
}
body.lo-app *{scrollbar-width:thin;scrollbar-color:var(--lo-line-2) transparent;}
body.lo-app ::-webkit-scrollbar{width:10px;height:10px;}
body.lo-app ::-webkit-scrollbar-thumb{background:var(--lo-line-2);border-radius:999px;border:3px solid transparent;background-clip:content-box;}

/* ---------- SIDEBAR ---------- */
#lo-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--lo-sidebar-w);z-index:1000;
  background:linear-gradient(180deg,var(--lo-navy-800),var(--lo-navy-900));
  color:#c3cee0;display:flex;flex-direction:column;
  box-shadow:2px 0 12px rgba(8,16,32,.12);
}
#lo-sidebar .lo-brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);}
#lo-sidebar .lo-logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--lo-accent),#57a0ff);box-shadow:0 3px 10px rgba(47,111,237,.4);color:#fff;}
#lo-sidebar .lo-brand b{color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.15;}
#lo-sidebar .lo-brand span{font-size:10.5px;color:#7c8aa5;letter-spacing:.04em;}
#lo-sidebar nav{flex:1;overflow-y:auto;padding:10px 10px 16px;}
#lo-sidebar .lo-grp{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#63719a;padding:14px 8px 5px;}
#lo-sidebar .lo-grp:first-child{padding-top:4px;}
#lo-sidebar a.lo-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#c3cee0;
  font-size:13px;font-weight:500;text-decoration:none;position:relative;transition:background .15s,color .15s;margin-bottom:1px;}
#lo-sidebar a.lo-nav:hover{background:rgba(255,255,255,.05);color:#fff;}
#lo-sidebar a.lo-nav.active{background:rgba(47,111,237,.16);color:#fff;font-weight:600;}
#lo-sidebar a.lo-nav.active::before{content:"";position:absolute;left:-4px;top:7px;bottom:7px;width:3px;border-radius:3px;background:#4f8bff;}
#lo-sidebar a.lo-nav svg{width:17px;height:17px;flex:none;opacity:.92;}
#lo-sidebar a.lo-nav .lo-tag{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.03em;color:#8fa2c4;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:999px;}
#lo-sidebar .lo-user{border-top:1px solid rgba(255,255,255,.07);padding:10px 12px;display:flex;align-items:center;gap:9px;}
#lo-sidebar .lo-user .lo-av{width:30px;height:30px;border-radius:50%;background:var(--lo-accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;}
#lo-sidebar .lo-user .lo-um{min-width:0;line-height:1.2;flex:1;}
#lo-sidebar .lo-user .lo-um b{color:#fff;font-size:12.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#lo-sidebar .lo-user .lo-um span{font-size:11px;color:#7c8aa5;}
#lo-sidebar .lo-user button{background:transparent;border:0;color:#7c8aa5;padding:6px;border-radius:6px;cursor:pointer;display:grid;place-items:center;}
#lo-sidebar .lo-user button:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ---------- TOPBAR ---------- */
#lo-topbar{
  position:fixed;top:0;left:var(--lo-sidebar-w);right:0;height:var(--lo-topbar-h);z-index:900;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--lo-line);display:flex;align-items:center;gap:12px;padding:0 20px;
  transition:left .16s ease;
}
#lo-topbar .lo-mtoggle{display:none;background:transparent;border:0;color:var(--lo-ink-2);padding:7px;border-radius:7px;cursor:pointer;}
#lo-topbar .lo-ptitle{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--lo-ink);}
#lo-topbar .lo-search{margin-left:8px;flex:1;max-width:400px;display:flex;align-items:center;gap:8px;height:36px;
  padding:0 12px;border-radius:9px;border:1px solid var(--lo-line-2);background:var(--lo-surface-2);color:var(--lo-ink-3);cursor:text;}
#lo-topbar .lo-search:hover{border-color:var(--lo-line-2);}
#lo-topbar .lo-search kbd{font-family:var(--lo-mono);font-size:11px;color:var(--lo-ink-3);background:#fff;border:1px solid var(--lo-line-2);border-radius:5px;padding:1px 6px;}
#lo-topbar .lo-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}
#lo-topbar .lo-ib{position:relative;background:transparent;border:0;color:var(--lo-ink-3);padding:8px;border-radius:8px;cursor:pointer;display:grid;place-items:center;}
#lo-topbar .lo-ib:hover{background:var(--lo-sunken);color:var(--lo-ink);}
#lo-topbar .lo-ib .lo-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--lo-crit);border:1.5px solid #fff;}

/* ---------- data-status chip ---------- */
.lo-fresh{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--lo-ink-3);}
.lo-fresh .d{width:7px;height:7px;border-radius:50%;background:var(--lo-ok);}
.lo-fresh.snap .d{background:var(--lo-warn);}
.lo-fresh.snap{color:var(--lo-warn);font-weight:600;}

/* ============================================================================
   HARMONIZERS — re-skin existing component classes to the unified language.
   Color/border/shadow/type only.
   ============================================================================ */
body.lo-app .card,body.lo-app .panel,body.lo-app .authbox{
  background:var(--lo-surface)!important;border:1px solid var(--lo-line)!important;
  border-radius:var(--lo-r-md)!important;box-shadow:var(--lo-sh-1)!important;
}
body.lo-app .panel-hd,body.lo-app .sec-head,body.lo-app .secthead{border-color:var(--lo-line)!important;}

/* KPI / stat tiles */
body.lo-app .kpi,body.lo-app .kpi-d,body.lo-app .stat{
  background:var(--lo-surface)!important;border:1px solid var(--lo-line)!important;
  border-radius:var(--lo-r-md)!important;box-shadow:var(--lo-sh-1)!important;
}
body.lo-app .kpi .label,body.lo-app .kpi-lab,body.lo-app .stat .l,body.lo-app .kpi .lab{
  color:var(--lo-ink-3)!important;font-weight:600!important;letter-spacing:.02em;text-transform:uppercase;font-size:11px!important;
}
body.lo-app .kpi .value,body.lo-app .kpi-val,body.lo-app .stat .n,body.lo-app .kpi .val{
  color:var(--lo-ink)!important;font-weight:700!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
body.lo-app .kpi.hero,body.lo-app .kpi.flag-good{border-color:var(--lo-ok-line)!important;}
body.lo-app .kpi.flag-bad{border-color:var(--lo-crit-line)!important;}
body.lo-app .kpi.flag-warn{border-color:var(--lo-warn-line)!important;}

/* Buttons */
body.lo-app .btn{border-radius:var(--lo-r)!important;border:1px solid var(--lo-line-2)!important;background:var(--lo-surface)!important;
  color:var(--lo-ink)!important;font-weight:600!important;transition:background .15s,border-color .15s;}
body.lo-app .btn:hover{background:var(--lo-surface-2)!important;}
body.lo-app .btn.primary,body.lo-app .btn-primary,body.lo-app button.primary,body.lo-app .primary.btn{
  background:var(--lo-accent)!important;border-color:var(--lo-accent)!important;color:#fff!important;}
body.lo-app .btn.primary:hover,body.lo-app button.primary:hover{background:var(--lo-accent-600)!important;border-color:var(--lo-accent-600)!important;}

/* Pills / chips / badges / status words */
body.lo-app .pill,body.lo-app .chip,body.lo-app .badge{border-radius:999px!important;font-weight:600!important;}
body.lo-app .warn,body.lo-app .pill.warn,body.lo-app .chip.warn{color:var(--lo-warn)!important;}
body.lo-app .bad,body.lo-app .pill.bad{color:var(--lo-crit)!important;}
body.lo-app .good,body.lo-app .pill.good{color:var(--lo-ok)!important;}
body.lo-app .high{color:var(--lo-accent)!important;}

/* Tables */
body.lo-app table th{color:var(--lo-ink-3)!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700!important;background:var(--lo-surface-2)!important;border-bottom:1px solid var(--lo-line)!important;}
body.lo-app table td{border-bottom:1px solid var(--lo-line)!important;color:var(--lo-ink-2)!important;}

/* Links / accents */
body.lo-app a.link,body.lo-app .accent{color:var(--lo-accent)!important;}

/* ---------- reusable components for new/rebuilt pages ---------- */
.lo-page{max-width:1440px;margin:0 auto;padding:22px 24px 60px;}
.lo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.lo-h1{font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--lo-ink);}
.lo-h1 + .lo-sub{color:var(--lo-ink-3);font-size:13px;margin-top:3px;}
.lo-seclabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lo-ink-3);margin:26px 0 12px;}
.lo-grid{display:grid;gap:14px;}
.lo-grid.k{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.lo-grid.k5{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.lo-grid.two{grid-template-columns:1.5fr 1fr;}
.lo-card{background:var(--lo-surface);border:1px solid var(--lo-line);border-radius:var(--lo-r-md);box-shadow:var(--lo-sh-1);}
.lo-card__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--lo-line);}
.lo-card__hd h3{font-size:14px;font-weight:700;color:var(--lo-ink);}
.lo-card__bd{padding:18px;}
.lo-card__bd.flush{padding:0;}
.lo-metric{background:var(--lo-surface);border:1px solid var(--lo-line);border-radius:var(--lo-r-md);box-shadow:var(--lo-sh-1);padding:15px 16px;display:flex;flex-direction:column;gap:7px;transition:box-shadow .12s,border-color .12s,transform .12s;min-width:0;}
a.lo-metric,.lo-metric.link{cursor:pointer;text-decoration:none;color:inherit;}
a.lo-metric:hover,.lo-metric.link:hover{box-shadow:var(--lo-sh-2);border-color:var(--lo-line-2);transform:translateY(-1px);}
.lo-metric__t{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.lo-metric__l{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--lo-ink-3);}
.lo-metric__i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--lo-sunken);flex:none;color:var(--lo-ink-3);}
.lo-metric__v{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--lo-ink);}
.lo-metric__v.sm{font-size:17px;font-weight:700;}
.lo-metric__v.empty{color:var(--lo-ink-4);font-size:15px;font-weight:600;}
.lo-metric__f{font-size:12px;color:var(--lo-ink-3);}
.lo-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;border:1px solid transparent;white-space:nowrap;}
.lo-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.lo-badge.ok{color:var(--lo-ok);background:var(--lo-ok-bg);border-color:var(--lo-ok-line);}
.lo-badge.warn{color:var(--lo-warn);background:var(--lo-warn-bg);border-color:var(--lo-warn-line);}
.lo-badge.crit{color:var(--lo-crit);background:var(--lo-crit-bg);border-color:var(--lo-crit-line);}
.lo-badge.info{color:var(--lo-info);background:var(--lo-info-bg);border-color:var(--lo-info-line);}
.lo-badge.neutral{color:var(--lo-ink-3);background:var(--lo-sunken);border-color:var(--lo-line);}
.lo-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--lo-r);border:1px solid var(--lo-line-2);background:var(--lo-surface);color:var(--lo-ink);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap;}
.lo-btn:hover{background:var(--lo-surface-2);}
.lo-btn.pri{background:var(--lo-accent);border-color:var(--lo-accent);color:#fff;}
.lo-btn.pri:hover{background:var(--lo-accent-600);}
.lo-btn.sm{height:30px;padding:0 11px;font-size:12px;}
.lo-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.lo-tbl th{position:sticky;top:0;text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--lo-ink-3);background:var(--lo-surface-2);padding:10px 16px;border-bottom:1px solid var(--lo-line);white-space:nowrap;z-index:1;}
.lo-tbl td{padding:11px 16px;border-bottom:1px solid var(--lo-line);color:var(--lo-ink-2);vertical-align:middle;}
.lo-tbl tbody tr:last-child td,.lo-tbl tbody tr:last-child td{border-bottom:none;}
.lo-tbl tbody tr{transition:background .12s;}
.lo-tbl tbody tr:hover{background:var(--lo-sunken);}
.lo-tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.lo-tbl .strong{color:var(--lo-ink);font-weight:600;}
.lo-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:46px 20px;color:var(--lo-ink-3);}
.lo-state .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--lo-sunken);}
.lo-state.crit .ic{background:var(--lo-crit-bg);color:var(--lo-crit);}
.lo-state b{color:var(--lo-ink-2);font-size:14px;}
.lo-skel{position:relative;overflow:hidden;background:var(--lo-sunken);border-radius:6px;}
.lo-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:lo-shim 1.3s infinite;}
@keyframes lo-shim{100%{transform:translateX(100%);}}
.lo-av{width:30px;height:30px;border-radius:50%;background:var(--lo-navy-600);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;}

/* ---------- global search + notifications overlays ---------- */
.lo-scrim{position:fixed;inset:0;background:rgba(11,23,48,.42);z-index:2000;display:grid;backdrop-filter:blur(2px);}
.lo-cmd{width:min(600px,94vw);background:#fff;border-radius:14px;box-shadow:var(--lo-sh-pop);align-self:flex-start;justify-self:center;margin-top:11vh;overflow:hidden;}
.lo-cmd__in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--lo-line);}
.lo-cmd__in input{border:0;outline:none;font-size:15px;flex:1;background:transparent;color:var(--lo-ink);}
.lo-cmd__res{max-height:52vh;overflow:auto;padding:8px;}
.lo-cmd__row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;border:0;background:transparent;cursor:pointer;}
.lo-cmd__row:hover,.lo-cmd__row.active{background:var(--lo-sunken);}
.lo-drawer{width:min(400px,94vw);height:100%;background:#fff;box-shadow:var(--lo-sh-pop);justify-self:end;display:flex;flex-direction:column;}
.lo-drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--lo-line);}
.lo-note{display:flex;gap:11px;padding:11px 12px;border-radius:10px;align-items:flex-start;}
.lo-note .ni{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;}

/* ---------- toast ---------- */
#lo-toasts{position:fixed;bottom:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:8px;}
.lo-toast{background:var(--lo-navy-800);color:#fff;padding:11px 15px;border-radius:10px;box-shadow:var(--lo-sh-pop);font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;animation:lo-in .18s ease;}
.lo-toast.ok{background:var(--lo-ok);} .lo-toast.err{background:var(--lo-crit);}
@keyframes lo-in{from{opacity:0;transform:translateY(6px);}}

/* Hide the legacy floating "Hub" button — the sidebar replaces it. */
body.lo-app a[href="hub.html"][style*="fixed"]{display:none!important;}

/* ---------- responsive ---------- */
#lo-scrim-nav{display:none;}
@media(max-width:1040px){ .lo-grid.two{grid-template-columns:1fr;} }
@media(max-width:900px){
  body.lo-app{padding-left:0;}
  #lo-sidebar{transform:translateX(-100%);transition:transform .16s ease;}
  #lo-sidebar.open{transform:translateX(0);}
  #lo-topbar{left:0;}
  #lo-topbar .lo-mtoggle{display:grid;place-items:center;}
  #lo-topbar .lo-search{display:none;}
  #lo-scrim-nav.show{display:block;position:fixed;inset:0;background:rgba(11,23,48,.4);z-index:999;}
  .lo-page{padding:16px 14px 48px;}
}