/* =====================================================================
   JTF ENTERPRISE CONSOLE — shared design system (framework-agnostic)
   Canonical visual language for ALL internal apps: Office Portal, Command
   Center, Storm Intel, Storm Reports.
   LIGHT, premium, investor-grade (reskinned 2026-06-17 from the dark shell —
   dark theme got bad market feedback). Navy-anchored on a soft off-white page:
   navy #0E1E3A ink · red #A22C27 hot accent ONLY · gold accent ·
   white cards · hairline slate borders · soft shadows · IBM Plex.
   Brand anchor: Customer 360 v2 demo palette (c360kit.C3) — navy #0E1E3A / red #A22C27.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* navy scale (brand ink / nav surfaces) */
  --ent-navy-950:#06101F; --ent-navy-900:#0A1930; --ent-navy-800:#0E1E3A;
  --ent-navy-700:#13284A; --ent-navy-600:#1B355C;
  /* gold (restrained premium accent) */
  --ent-gold:#b8841d; --ent-gold-600:#a3741a; --ent-gold-700:#8a6212;
  /* red (RISK / destructive only) */
  --ent-red:#A22C27; --ent-red-600:#8f2622; --ent-red-700:#7c211d;
  /* ink + surfaces (light) */
  --ent-canvas:#F4F5F7; --ent-surface:#FFFFFF;
  --ent-text:#0A0F1C; --ent-text-dim:#5A6472; --ent-muted:#8A93A0;
  --ent-line:#E2E4E8; --ent-line-soft:#EFF1F3;
  --ent-emerald:#1E7B4D; --ent-cyan:#0e7490; --ent-amber:#B7791F;
  --ent-shadow-sm:0 1px 2px rgba(10,15,28,.05), 0 4px 14px rgba(10,15,28,.05);
  --ent-shadow-md:0 4px 12px rgba(10,15,28,.08), 0 2px 4px rgba(10,15,28,.05);
  --ent-shadow-lg:0 18px 40px rgba(10,15,28,.12);
  --ent-font:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --ent-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---- surface ---- */
.ent-bg, body.ent-bg {
  background-color:var(--ent-canvas);
  background-image:
    radial-gradient(900px circle at 12% -5%, rgba(14,30,58,0.05), transparent 45%),
    radial-gradient(800px circle at 92% 0%, rgba(162,44,39,0.035), transparent 40%),
    radial-gradient(1200px circle at 50% 120%, rgba(184,132,29,0.03), transparent 50%);
  background-attachment:fixed;
  color:var(--ent-text); font-family:var(--ent-font); -webkit-font-smoothing:antialiased;
  color-scheme:light;
}
.ent-dotgrid::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(10,15,28,0.05) 1px,transparent 1px);background-size:22px 22px;}

/* ---- sticky enterprise header (navy-anchored on light) ---- */
.ent-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--ent-line);
  background:rgba(255,255,255,0.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--ent-shadow-sm);}
.ent-header-inner{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 22px;padding:12px 20px;}
.ent-brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.ent-brand img{height:34px;width:auto;flex:0 0 auto;filter:drop-shadow(0 1px 4px rgba(14,30,58,0.18));}
.ent-brand .sep{width:1px;height:30px;background:var(--ent-line);}
.ent-brand .wm{font-family:var(--ent-mono);font-size:13px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ent-navy-800);line-height:1.1;}
.ent-brand .wm small{display:block;font-size:10px;letter-spacing:.18em;color:var(--ent-muted);font-weight:500;}
.ent-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--ent-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ent-text-dim);text-decoration:none;
  border:1px solid var(--ent-line);padding:6px 11px;transition:all .18s;border-radius:6px;}
.ent-back:hover{color:var(--ent-navy-800);border-color:rgba(14,30,58,.35);background:rgba(14,30,58,.04);}
.ent-spacer{margin-left:auto;}
.ent-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--ent-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border:1px solid;border-radius:6px;}
.ent-chip-online{border-color:rgba(30,123,77,.30);background:rgba(30,123,77,.08);color:#1E7B4D;}
.ent-chip-off{border-color:rgba(100,116,139,.30);background:rgba(100,116,139,.08);color:#64748b;}
.ent-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.ent-chip-online .dot{animation:ent-pulse 2s infinite;}
@keyframes ent-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- search shell ---- */
.ent-search{display:flex;align-items:center;gap:8px;border:1px solid var(--ent-line);
  background:#fff;padding:8px 12px;flex:1 1 auto;max-width:420px;transition:border-color .18s,box-shadow .18s;
  border-radius:7px;}
.ent-search:focus-within{border-color:rgba(14,30,58,.45);box-shadow:0 0 0 3px rgba(14,30,58,.10);}
.ent-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ent-text);
  font-family:var(--ent-font);font-size:14px;}
.ent-search input::placeholder{color:var(--ent-muted);}
.ent-search kbd{font-family:var(--ent-mono);font-size:10px;color:var(--ent-muted);
  border:1px solid var(--ent-line);background:var(--ent-canvas);padding:2px 6px;border-radius:4px;}

/* ---- layout ---- */
.ent-main{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:24px 20px;}
.ent-eyebrow{font-family:var(--ent-mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ent-muted);}
.ent-h{font-family:var(--ent-font);font-weight:800;letter-spacing:-.01em;color:var(--ent-navy-800);}

/* ---- card (white surface, hairline border, soft shadow) ---- */
.ent-card,.glass{background:var(--ent-surface);
  border:1px solid var(--ent-line);box-shadow:var(--ent-shadow-sm);border-radius:10px;}
.ent-card{padding:18px;}
.ent-card-hover{transition:border-color .16s,transform .16s,box-shadow .16s;}
.ent-card-hover:hover{border-color:rgba(14,30,58,.30);transform:translateY(-2px);
  box-shadow:var(--ent-shadow-md);}

/* ---- stat / kpi ---- */
.ent-stat{display:flex;flex-direction:column;gap:4px;}
.ent-stat .v{font-family:var(--ent-mono);font-size:1.7rem;font-weight:700;color:var(--ent-navy-800);line-height:1;
  font-variant-numeric:tabular-nums;}
.ent-stat .l{font-family:var(--ent-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ent-muted);}

/* ---- badges ---- */
.ent-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ent-mono);font-size:9px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border:1px solid;border-radius:5px;}
.ent-badge-gold{border-color:rgba(184,132,29,.35);color:var(--ent-gold-700);background:rgba(184,132,29,.10);}
.ent-badge-green{border-color:rgba(30,123,77,.30);color:#1E7B4D;background:rgba(30,123,77,.10);}
.ent-badge-red{border-color:rgba(162,44,39,.30);color:var(--ent-red-600);background:rgba(162,44,39,.08);}
.ent-badge-cyan{border-color:rgba(14,116,144,.28);color:#0e7490;background:rgba(14,116,144,.08);}
.ent-badge-amber{border-color:rgba(183,121,31,.28);color:#B7791F;background:rgba(183,121,31,.08);}

/* ---- buttons ---- */
.ent-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ent-mono);
  font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all .18s;border-radius:7px;}
/* primary = navy (brand-anchored) */
.ent-btn-gold{background:var(--ent-navy-800);color:#fff;font-weight:700;}
.ent-btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,30,58,.22);}
.ent-btn-ghost{background:#fff;color:var(--ent-navy-800);border-color:var(--ent-line);}
.ent-btn-ghost:hover{background:var(--ent-canvas);border-color:rgba(14,30,58,.40);transform:translateY(-2px);}

/* ---- table ---- */
.ent-table{width:100%;border-collapse:collapse;font-size:13px;}
.ent-table thead th{font-family:var(--ent-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ent-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--ent-line);}
.ent-table tbody td{padding:11px 12px;border-bottom:1px solid var(--ent-line-soft);color:var(--ent-text);
  font-variant-numeric:tabular-nums;}
.ent-table tbody tr:hover{background:rgba(14,30,58,.03);}

/* ---- footer ---- */
.ent-foot{position:relative;z-index:1;border-top:1px solid var(--ent-line-soft);padding:14px 20px;text-align:center;}
.ent-foot p{font-family:var(--ent-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ent-muted);margin:0;}

/* ---- scrollbars ---- */
.ent-bg *::-webkit-scrollbar{width:8px;height:8px;}
.ent-bg *::-webkit-scrollbar-thumb{background:rgba(10,15,28,.18);border-radius:4px;}
.ent-bg *::-webkit-scrollbar-thumb:hover{background:rgba(10,15,28,.30);}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .ent-card-hover,.ent-btn,.ent-back,.ent-search{transition:none;}
  .ent-card-hover:hover,.ent-btn-gold:hover,.ent-btn-ghost:hover{transform:none;}
  .ent-chip-online .dot{animation:none;}
}

@media(max-width:640px){
  .ent-search{order:3;width:100%;max-width:none;}
  /* On phones the horizontal logo shrinks into an unreadable smudge — show the
     mono wordmark (which also names the page) and drop the image instead. */
  .ent-brand img{display:none;}
  .ent-brand .sep{display:none;}
  .ent-brand{gap:8px;}
  .ent-brand .wm{display:block;font-size:12px;letter-spacing:.16em;}
  .ent-brand .wm small{font-size:9px;letter-spacing:.14em;}
  .ent-header-inner{gap:8px 10px;padding:10px 12px;}
  .ent-back{padding:5px 8px;font-size:10px;}
  .ent-chip{padding:5px 8px;font-size:10px;gap:6px;}
}