/* ============================================================
   ADIB COMMAND CENTER — global styles
   Palette: exact ADIB website values. Fonts: ADIB DS (Inter / JetBrains Mono).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — ADIB website exact */
  --navy:          #192857;
  --navy-2:        #0C1F3C;
  --navy-3:        #001E40;
  --navy-sidebar:  #061634;
  --cyan:          #00B0E5;
  --cyan-soft:     #5FD6E8;
  --blue:          #1B4988;
  --blue-2:        #0099D6;
  --light-blue:    #BFECFC;

  /* Text */
  --fg:    #FFFFFF;
  --fg-2:  #D6DEEC;
  --fg-3:  #97A4C2;
  --fg-4:  #6E7DA0;

  /* Status */
  --pos:   #00D6B0;
  --neg:   #FF6B6B;
  --amber: #E0AC2B;

  /* Surfaces */
  --bg:        radial-gradient(125% 115% at 50% 32%, #21459b 0%, #163a82 26%, #0e2a63 50%, #091d45 74%, #050f2c 100%);
  --card-grad: linear-gradient(162deg, #16315E 0%, #0C1F3C 100%);
  --tile:      rgba(8, 26, 56, 0.55);
  --tile-elev: #15294a;

  /* Lines */
  --edge:        rgba(255,255,255,0.08);
  --edge-2:      rgba(255,255,255,0.05);
  --edge-cyan:   rgba(0,193,222,0.28);
  --line-cyan-s: rgba(0,193,222,0.12);

  /* Shadows */
  --sh-low:  inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.18);
  --sh-med:  0 8px 28px rgba(0,0,0,0.30);
  --sh-glow: 0 0 0 1px rgba(0,193,222,0.30), 0 8px 32px rgba(0,193,222,0.14);

  --font:  "Open Sans", "Segoe UI", Tahoma, "Helvetica Neue", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --sidebar-w: 222px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #04102a;
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
#root { height: 100vh; width: 100vw; }

/* scrollbars */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,193,222,0.25) transparent; }
.scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: rgba(0,193,222,0.22); border-radius: 8px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }
.no-scrollbar { scrollbar-width: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── App layout ───────────────────────────────────────────── */
.app-bg { position: fixed; inset: 0; background: var(--bg); z-index: 0; }
.canvas-fixed { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.noise { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.022; mix-blend-mode: overlay;
  background-image: url("noise.png"); background-size: 160px 160px; }

.shell { position: relative; z-index: 1; height: 100vh; display: flex; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.content { flex: 1; min-height: 0; position: relative; }
.content-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 26px 30px 90px; }

/* ── Glass card ───────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: var(--sh-low);
  transition: border-color var(--dur,.2s) var(--ease), box-shadow .3s var(--ease), transform .35s var(--ease);
}
.glass::before {
  content:""; position:absolute; inset:0; border-radius: inherit; z-index:0; pointer-events:none;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(0,193,222,0.13), transparent 68%);
  opacity: var(--spot,0); transition: opacity .3s ease;
}
.glass > * { position: relative; z-index: 1; }
.glass.hoverable:hover { transform: translateY(-3px); border-color: var(--edge-cyan); box-shadow: 0 12px 34px rgba(0,0,0,0.34), 0 0 0 1px rgba(0,193,222,0.22), 0 0 26px rgba(0,193,222,0.10); }
.calm .glass { transition: none; }
.calm .glass::before { display:none; }

/* ── Border beam (animated traveling light) ── */
.beam { position: relative; }
.beam::after {
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; pointer-events:none; z-index:2;
  background: conic-gradient(from var(--beam-a, 0deg), transparent 0deg, transparent 300deg, rgba(0,193,222,0.9) 340deg, #7DD7F2 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beamspin 4.5s linear infinite;
}
@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beamspin { to { --beam-a: 360deg; } }
.calm .beam::after { display:none; }

/* ── LIVE ping ring ── */
.live .ld { position: relative; }
.live .ld::after { content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--cyan);
  animation: livePing 1.8s ease-out infinite; }
@keyframes livePing { 0% { transform:scale(1); opacity:0.7; } 100% { transform:scale(3.2); opacity:0; } }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.5); } 50% { box-shadow: 0 0 0 6px rgba(255,107,107,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.calm .live .ld::after { display:none; }

/* ── Labels & type ────────────────────────────────────────── */
.eyebrow { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cyan); }
.label   { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-4); }
.h-page  { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0;
  background: linear-gradient(100deg, #ffffff 0%, #BFECFC 30%, #00B0E5 50%, #BFECFC 70%, #ffffff 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: titleSheen 6s linear infinite; }
@keyframes titleSheen { to { background-position: 220% center; } }
.calm .h-page { animation: none; }
.h-card  { font-size: 13px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; }
.kpi .label { color: var(--fg-4); }
.kpi-value { color: #fff; }
.sub     { font-size: 12px; color: var(--fg-3); line-height: 1.55; }

/* ── Pills ────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; border-radius: 999px; font-size: 9.5px; padding: 4px 10px; white-space: nowrap; }
.pill .dot { width:6px; height:6px; border-radius:50%; }
.pill.green { background: rgba(0,214,176,0.12); color: var(--pos); }
.pill.amber { background: rgba(224,172,43,0.14); color: var(--amber); }
.pill.red   { background: rgba(255,107,107,0.15); color: var(--neg); }
.pill.cyan  { background: rgba(0,193,222,0.12); color: var(--cyan); }

.live { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background: rgba(0,193,222,0.08); border:1px solid rgba(0,193,222,0.18); }
.live .ld { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(0,193,222,0.6);
  animation: pulse 1.6s ease-in-out infinite; }
.live span { font-size:9px; font-weight:800; letter-spacing:0.12em; color:var(--cyan); text-transform:uppercase; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { font-family:var(--font); cursor:pointer; border:none; border-radius:9px; font-weight:700; font-size:12px;
  display:inline-flex; align-items:center; gap:8px; transition: all .2s var(--ease); padding: 9px 16px; }
.btn.primary { background: linear-gradient(135deg, #00B0E5, #0099D6); color:#04203a; position:relative; overflow:hidden; }
.btn.primary::after { content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-18deg);
  animation: btnshine 3.4s ease-in-out infinite; pointer-events:none; }
.btn.primary:hover { box-shadow: 0 6px 22px rgba(0,193,222,0.45); transform: translateY(-1px); }
@keyframes btnshine { 0% { left:-60%; } 55%,100% { left:140%; } }
.calm .btn.primary::after { display:none; }
.btn.ghost { background: rgba(255,255,255,0.04); color: var(--fg-2); border:1px solid var(--edge); }
.btn.ghost:hover { border-color: var(--edge-cyan); color:#fff; background: rgba(0,193,222,0.06); }
.btn:active { transform: translateY(1px); }

/* ── Sparkline ────────────────────────────────────────────── */
.spark path.line { fill:none; stroke:var(--cyan); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 3px rgba(0,193,222,0.45)); }

/* ── Animations ───────────────────────────────────────────── */
/* Entrance animations are transform-led, never opacity-gated, so content is
   ALWAYS visible even if an animation is paused, stripped, or caught mid-frame
   (demo-safe: a backgrounded tab or snapshot can never show a blank card). */
@keyframes fadeUp { from{transform:translateY(12px)} to{transform:translateY(0)} }
@keyframes fadeIn { from{transform:translateY(2px)} to{transform:translateY(0)} }
@keyframes scaleIn { from{transform:scale(.985)} to{transform:scale(1)} }
.enter { animation: fadeUp .5s var(--ease) both; }
.page-enter { animation: scaleIn .34s var(--ease) both; }

@keyframes wlogo { 0%{opacity:0; transform:scale(.7); filter:blur(14px)} 60%{opacity:1; filter:blur(0)} 100%{transform:scale(1)} }
@keyframes wchar { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
@keyframes wfade { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes agentIn { from{opacity:0; transform:translateY(18px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes fabpulse { 0%{transform:scale(1); opacity:.55} 100%{transform:scale(1.85); opacity:0} }
@keyframes stillIn { 0%{opacity:0; transform:scale(1.08); filter:blur(12px) brightness(0.6)} 60%{opacity:1; filter:blur(0) brightness(1)} 100%{opacity:1; transform:scale(1)} }
@keyframes kenburns { 0%{transform:scale(1.02)} 100%{transform:scale(1.09)} }
@keyframes glowPulse { 0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:.7; transform:scale(1.08)} }
@keyframes sheen { 0%{transform:translateX(-120%) skewX(-18deg)} 100%{transform:translateX(220%) skewX(-18deg)} }

/* ── ADIB AI loader (rotating glow ring + pulsing letters) ── */
.ai-loader { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.ai-loader-letter { display: inline-block; color: #fff; font-weight: 800; letter-spacing: 0.06em; animation: loaderLetter 3s infinite; }
.ai-loader-ring { position: absolute; inset: 0; border-radius: 50%; animation: loaderCircle 5s linear infinite; }
.ai-globe { position: relative; z-index: 1; transition: transform .3s var(--ease); will-change: transform; animation: globeFloat 6s ease-in-out infinite; filter: drop-shadow(0 6px 22px rgba(0,120,255,0.45)); }
.ai-loader-logo:hover .ai-loader-ring { animation-duration: 2.2s; }
.ai-loader-logo:hover .ai-globe { animation-play-state: paused; }
@keyframes globeFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes loaderCircle {
  0%   { transform: rotate(90deg);  box-shadow: 0 6px 12px 0 #38bdf8 inset, 0 12px 18px 0 #005dff inset, 0 36px 36px 0 #1e40af inset, 0 0 3px 1.2px rgba(56,189,248,0.3), 0 0 6px 1.8px rgba(0,93,255,0.2); }
  50%  { transform: rotate(270deg); box-shadow: 0 6px 12px 0 #60a5fa inset, 0 12px 6px 0 #0284c7 inset, 0 24px 36px 0 #005dff inset, 0 0 3px 1.2px rgba(56,189,248,0.3), 0 0 6px 1.8px rgba(0,93,255,0.2); }
  100% { transform: rotate(450deg); box-shadow: 0 6px 12px 0 #4dc8fd inset, 0 12px 18px 0 #005dff inset, 0 36px 36px 0 #1e40af inset, 0 0 3px 1.2px rgba(56,189,248,0.3), 0 0 6px 1.8px rgba(0,93,255,0.2); }
}
@keyframes loaderLetter {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  20% { opacity: 1; transform: scale(1.15); }
  40% { opacity: 0.7; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ── Ticker ───────────────────────────────────────────────── */
.ticker { overflow:hidden; background: rgba(2,14,32,0.6); border-top:1px solid var(--edge-2);
  border-bottom:1px solid var(--edge-2); padding: 7px 0; flex-shrink:0; }
.ticker-track { display:flex; align-items:center; gap:30px; white-space:nowrap; width:max-content;
  animation: tick 46s linear infinite; }
.calm .ticker-track { animation-duration: 80s; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.sig { display:inline-flex; align-items:center; gap:8px; font-size:10.5px; }
.sig .t { font-family:var(--mono); color: var(--fg-4); }
.sig .s { color: var(--fg-3); }
.sig .bar { color: var(--edge-cyan); }

/* ── Bars ─────────────────────────────────────────────────── */
.bartrack { height:7px; border-radius:6px; background: rgba(255,255,255,0.06); overflow:hidden; }
.barfill { height:100%; border-radius:6px; width:0; animation: growbar 1s var(--ease) forwards; }
@keyframes growbar { from { width:0; } }
/* ── Sliding tab indicator (motion layoutId style) ── */
.seg-tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--edge); }
.seg-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: var(--font);
  cursor: pointer; border: none; background: transparent; color: var(--fg-3); transition: color .25s var(--ease); }
.seg-tab.on { color: #04203a; }
.seg-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: 9px;
  background: linear-gradient(135deg, #00B0E5, #0099D6); box-shadow: 0 4px 16px rgba(0,193,222,0.4);
  transition: left .34s var(--ease), width .34s var(--ease); }

/* ── Spotlight follow on welcome ── */
@keyframes growbarY { from { height:0; } }
@keyframes dashflow { to { stroke-dashoffset: -7; } }
@keyframes uaepulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.skeleton { border-radius:9px; background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ── Table ────────────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.14em;
  color: var(--fg-4); padding: 10px 14px; border-bottom:1px solid var(--edge); }
.tbl td { padding: 12px 14px; border-bottom:1px solid var(--edge-2); font-size:12.5px; color: var(--fg-2); }
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: rgba(0,193,222,0.04); }
.tbl td.r, .tbl th.r { text-align:right; }