/* ============================================================================
   GFS Admin Dashboard · R596 supplemental styles
   Critical (above-fold) CSS stays inline in admin-dashboard.html.
   This file owns: sticky top nav · platform hub grid · SLI dots · accordion ·
   glass panels (Apple HIG 2026 Liquid Glass discipline).
   ============================================================================ */

/* ---- Skip link (a11y) ---------------------------------------------------- */
.skip-to-content{position:absolute;left:-999px;top:0;z-index:1000;background:var(--cobalt);color:#fff;padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;border-radius:var(--radius-md);text-decoration:none}
.skip-to-content:focus{left:8px;top:8px;outline:2px solid var(--tufts);outline-offset:2px}

/* ---- Sticky top nav (Phase 8) ------------------------------------------- */
.gfs-topnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);border-bottom:1px solid rgba(9,47,100,0.08);padding:8px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11px}
.gfs-topnav .tn-logo{font-weight:700;color:var(--cobalt);letter-spacing:.08em;text-transform:uppercase}
.gfs-topnav .tn-crumb{color:var(--slate)}
.gfs-topnav .tn-crumb a{color:var(--tufts);text-decoration:none}
.gfs-topnav .tn-crumb a:hover{text-decoration:underline}
.gfs-topnav .tn-spacer{flex:1 1 auto}
.gfs-topnav .tn-status{display:flex;gap:10px;align-items:center}
.gfs-topnav .tn-kbd{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--cobalt);background:var(--alice);border:1px solid var(--jordy);padding:2px 6px;border-radius:var(--radius-sm)}
.gfs-topnav .tn-kbd:hover{background:var(--jordy);color:#fff;cursor:pointer}
.gfs-topnav .tn-user{color:var(--cobalt);font-weight:600}
@media print { .gfs-topnav { display:none } }

/* ---- SLI dot row (observability-designer skill, surprise pick) ---------- */
.sli-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;border:1px solid var(--silver);border-radius:var(--radius-md);background:var(--white);box-shadow:0 1px 2px rgba(9,47,100,0.06);overflow:hidden;margin-bottom:18px}
.sli-cell{padding:12px 14px;border-right:1px solid var(--silver);display:flex;flex-direction:column;gap:2px;min-width:0}
.sli-cell:last-child{border-right:0}
.sli-cell-head{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sli-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--steel);position:relative;flex-shrink:0;transition:background .3s var(--ease), box-shadow .3s var(--ease)}
.sli-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;animation:sli-breathe 2.2s var(--ease) infinite}
.sli-dot.sli-green{background:var(--success);box-shadow:0 0 0 3px rgba(15,118,110,0.18)}
.sli-dot.sli-green::after{border-color:rgba(15,118,110,0.3)}
.sli-dot.sli-amber{background:var(--warning);box-shadow:0 0 0 3px rgba(180,83,9,0.18)}
.sli-dot.sli-amber::after{border-color:rgba(180,83,9,0.3)}
.sli-dot.sli-red{background:var(--error);box-shadow:0 0 0 3px rgba(220,38,38,0.18)}
.sli-dot.sli-red::after{border-color:rgba(220,38,38,0.3);animation-duration:1.1s}
.sli-dot.sli-unknown{background:var(--steel)}
@keyframes sli-breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion: reduce){ .sli-dot::after{animation:none} }
.sli-value{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;color:var(--cobalt);line-height:1.15}
.sli-detail{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate)}
.sli-fresh{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);font-style:italic}

/* ---- Platform Hub grid (Phase 2) ---------------------------------------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:18px;margin-bottom:24px}
.hub-col{background:var(--white);border:1px solid var(--silver);border-radius:var(--radius-lg);padding:14px;box-shadow:0 1px 2px rgba(9,47,100,0.06);min-width:0}
.hub-col h3{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--cobalt);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.hub-col h3 .hub-count{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);background:var(--fog);padding:1px 6px;border-radius:var(--radius-sm);font-weight:400;margin-left:auto}
.hub-link{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--radius-md);border:1px solid transparent;color:var(--eerie);text-decoration:none;font-size:12px;line-height:1.4;margin-bottom:4px;transition:all .18s var(--ease)}
.hub-link:hover{background:var(--alice);border-color:var(--jordy);text-decoration:none;transform:translateX(2px)}
.hub-link .hub-link-icon{flex-shrink:0;width:18px;text-align:center;color:var(--tufts);font-family:'IBM Plex Mono',monospace;font-size:11px}
.hub-link .hub-link-body{min-width:0;flex:1}
.hub-link strong{font-weight:600;color:var(--cobalt);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-link span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-link .hub-ext{color:var(--steel);font-size:11px;font-family:'IBM Plex Mono',monospace;flex-shrink:0}
.hub-tbd{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--warning);background:#FEF3C7;border:1px solid #FDE68A;padding:4px 8px;border-radius:var(--radius-sm);margin-bottom:8px;text-align:center}

/* ---- System status accordion (Phase 1) ---------------------------------- */
.sys-status-accordion{margin-bottom:24px;border:1px solid var(--silver);border-radius:var(--radius-md);background:var(--white);box-shadow:0 1px 2px rgba(9,47,100,0.06);overflow:hidden}
.sys-status-accordion > summary{padding:12px 16px;background:var(--fog);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--cobalt);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;border-radius:0;list-style:none;border:0}
.sys-status-tabs{display:flex;gap:0;border-bottom:1px solid var(--silver);background:var(--fog);overflow-x:auto;flex-wrap:wrap}
.sys-status-tab{padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);background:transparent;border:0;border-right:1px solid var(--silver);border-bottom:2px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-weight:500;transition:all .15s var(--ease);white-space:nowrap}
.sys-status-tab:hover{background:var(--white);color:var(--cobalt)}
.sys-status-tab[aria-selected="true"]{background:var(--white);color:var(--cobalt);border-bottom-color:var(--tufts);font-weight:600}
.sys-status-panel{padding:14px 16px;display:none}
.sys-status-panel[aria-hidden="false"]{display:block}

/* ---- Apple HIG 2026 Liquid Glass — applied to live data cards only ----- */
.glass-panel{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(9,47,100,0.06);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(9,47,100,0.04), 0 4px 12px rgba(9,47,100,0.06);
}
@media (prefers-color-scheme: dark){
  body:not([data-theme="light"]) .glass-panel{ background:rgba(10,22,40,0.6); border-color:rgba(147,191,239,0.12) }
}
@supports not (backdrop-filter: blur(20px)){
  .glass-panel{ background:rgba(255,255,255,0.95) }
}

/* ---- Tabular nums on counters ------------------------------------------ */
.sli-value, .live-cell .v, .kpi .value, .r588-stat-val, .attn-count{ font-variant-numeric:tabular-nums }

/* ---- count-up entry placeholder (alive-layer paints in) ----------------- */
.count-up{display:inline-block;font-variant-numeric:tabular-nums}

/* ---- Print: hide live cells ---------------------------------------------- */
@media print { .sli-row, .hub-grid, .sys-status-accordion { break-inside: avoid } }

/* ---- Reduced-motion respect --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hub-link:hover{transform:none}
}

/* ---- Cmd+K kind badges for new kinds (ns, cf, page, round) -------------- */
.cmdk-kind.ns{background:#FEE2E2;color:#9B1C1C}
.cmdk-kind.cf{background:#FED7AA;color:#9A3412}
.cmdk-kind.round{background:#E0E7FF;color:#3730A3}