/* ═══════════════════════════════════════════════════════════════
   NKOSI Command Center — Design system premium
   Charge en complément de tailwind.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  --nkosi-forest:   #055B49;
  --nkosi-forest-2: #0a3a30;
  --nkosi-gold:     #F29E24;
  --nkosi-gold-2:   #FFB84D;
  --nkosi-cream:    #FDF8F0;
  --nkosi-coal:     #050a08;
  --nkosi-zinc-950: #050708;
  --nkosi-zinc-900: #0c0e10;
  --nkosi-zinc-800: #1a1d20;
  --nkosi-zinc-700: #2a2e33;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[x-cloak] { display: none !important; }

html, body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; }
body {
  background: var(--nkosi-coal);
  position: relative;
  overflow-x: hidden;
}
.heading, h1, h2, h3 { font-family: 'Ubuntu', sans-serif; letter-spacing: -0.01em; }
code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ─── Background mesh + orbs (cohérent avec login) ─────────── */
.nk-bg::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(at 12% 20%, rgba(242, 158, 36, 0.08), transparent 50%),
    radial-gradient(at 85% 75%, rgba(5, 91, 73, 0.30), transparent 50%),
    radial-gradient(at 50% 100%, rgba(122, 74, 30, 0.10), transparent 60%),
    linear-gradient(135deg, #0a1a16 0%, #050a08 100%);
  z-index: -3;
  pointer-events: none;
}
.nk-bg::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.025;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.nk-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -2;
  will-change: transform;
}
.nk-orb-1 { width: 480px; height: 480px; background: var(--nkosi-gold); opacity: 0.10;
            top: -180px; left: -120px; animation: orbA 24s ease-in-out infinite alternate; }
.nk-orb-2 { width: 600px; height: 600px; background: var(--nkosi-forest); opacity: 0.18;
            bottom: -250px; right: -180px; animation: orbB 28s ease-in-out infinite alternate; }
@keyframes orbA { to { transform: translate(60px, 50px) scale(1.1); } }
@keyframes orbB { to { transform: translate(-50px, -40px) scale(1.05); } }

/* ─── Scrollbars stylées ──────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(242, 158, 36, 0.3); background-clip: padding-box; }

/* ─── Header (sticky top) ─────────────────────────────────── */
header.fixed {
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.92) 0%, rgba(10, 12, 14, 0.70) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03);
}

/* Logo header — gradient + glow */
header .w-8.h-8.rounded-lg.bg-amber-500 {
  background: linear-gradient(145deg, var(--nkosi-gold-2) 0%, var(--nkosi-gold) 50%, #c97e1a 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 4px 14px rgba(242, 158, 36, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}

/* ─── Sidebar (aside) ─────────────────────────────────────── */
aside {
  background: linear-gradient(180deg, rgba(10, 12, 14, 0.88) 0%, rgba(8, 10, 12, 0.85) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

aside nav button {
  transition: all 0.18s ease;
}
aside nav button:hover {
  transform: translateX(2px);
}

/* Nav active (amber-500/10) → renforce le glow */
aside nav button.bg-amber-500\/10 {
  background: linear-gradient(135deg, rgba(242, 158, 36, 0.12), rgba(242, 158, 36, 0.04)) !important;
  border-color: rgba(242, 158, 36, 0.3) !important;
  box-shadow: 0 0 20px rgba(242, 158, 36, 0.1), inset 0 0 0 1px rgba(242, 158, 36, 0.1);
}

/* ─── Cards (.bg-zinc-900.border.border-zinc-800.rounded-xl) ──*/
.bg-zinc-900.border.border-zinc-800.rounded-xl,
.bg-zinc-900.border.border-zinc-800.rounded-2xl {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 4px 24px -8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.22s ease;
}
.bg-zinc-900.border.border-zinc-800.rounded-xl:hover {
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px);
}

/* Cards "interactive" cliquables (ont @click) → amber on hover */
[x-on\:click]:hover.bg-zinc-900,
[\@click]:hover.bg-zinc-900 {
  border-color: rgba(242, 158, 36, 0.3) !important;
  box-shadow: 0 8px 30px -10px rgba(242, 158, 36, 0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── KPI Cards : grosses valeurs (.text-2xl.font-bold) ───── */
.bg-zinc-900 .text-2xl.font-bold.mt-1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 28px !important;
}

/* ─── Modals ──────────────────────────────────────────────── */
.bg-zinc-900.border.border-zinc-700.rounded-xl {
  background: linear-gradient(180deg, rgba(20, 22, 25, 0.96), rgba(15, 17, 20, 0.94)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
          backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 30px 80px -10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(242, 158, 36, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Modal backdrop renforcé */
.fixed.inset-0.z-50.bg-black\/70 {
  background: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* ─── Buttons ─────────────────────────────────────────────── */
button.bg-amber-500 {
  background: linear-gradient(135deg, var(--nkosi-gold) 0%, var(--nkosi-gold-2) 100%) !important;
  color: #000 !important;
  font-weight: 600 !important;
  box-shadow:
    0 4px 14px rgba(242, 158, 36, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
button.bg-amber-500:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(242, 158, 36, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
button.bg-amber-500:active:not(:disabled) { transform: translateY(0); }
button.bg-amber-500:disabled { opacity: 0.6; cursor: wait; }

/* ─── Inputs / selects ────────────────────────────────────── */
input.bg-zinc-800, select.bg-zinc-800, textarea.bg-zinc-800,
input.bg-zinc-900, select.bg-zinc-900 {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  transition: all 0.18s ease;
}
input.bg-zinc-800:hover, select.bg-zinc-800:hover {
  border-color: rgba(255,255,255,0.15) !important;
}
input.bg-zinc-800:focus, select.bg-zinc-800:focus, textarea.bg-zinc-800:focus,
input.bg-zinc-900:focus, select.bg-zinc-900:focus {
  border-color: var(--nkosi-gold) !important;
  background: rgba(242, 158, 36, 0.04) !important;
  box-shadow: 0 0 0 4px rgba(242, 158, 36, 0.12) !important;
  outline: none !important;
}

/* ─── Badges (.text-xs.px-2.py-0.5.rounded) ───────────────── */
.text-xs.px-2.py-0\.5.rounded {
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
}

/* ─── Tables ──────────────────────────────────────────────── */
table {
  font-variant-numeric: tabular-nums;
}
thead.bg-zinc-800 {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
tbody tr {
  transition: background 0.15s;
}
tbody tr.hover\:bg-zinc-800\/50:hover {
  background: rgba(242, 158, 36, 0.04) !important;
}

/* ─── Tab switcher (Observabilité views) ──────────────────── */
button.bg-amber-500.text-black {
  background: linear-gradient(135deg, var(--nkosi-gold) 0%, var(--nkosi-gold-2) 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 2px 10px rgba(242, 158, 36, 0.3);
}

/* ─── Toast ───────────────────────────────────────────────── */
[x-show="toast.visible"] {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5);
}

/* ─── Code (mono utilities) ───────────────────────────────── */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ─── Level circles (Agents) — animation pulse subtle ─────── */
.inline-flex.items-center.justify-center.w-7.h-7.rounded-full.font-bold {
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0;
}

/* Status dots animation */
.w-2.h-2.rounded-full.bg-green-500 {
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* Animation entrée de section */
section[x-show] {
  animation: sectionFadeIn 0.35s ease-out;
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── h1/h2 amélioration ──────────────────────────────────── */
main h1.text-2xl.heading {
  font-size: 32px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ─── Mobile (< 380px) ────────────────────────────────────── */
@media (max-width: 380px) {
  main { padding: 12px !important; }
  h1.text-2xl { font-size: 22px !important; }
}

/* PWA safe areas */
@supports (padding: env(safe-area-inset-top)) {
  header { padding-top: env(safe-area-inset-top); }
  main   { padding-bottom: env(safe-area-inset-bottom); }
}

/* ─── Selection ───────────────────────────────────────────── */
::selection { background: rgba(242, 158, 36, 0.3); color: #fff; }

/* ─── Logo "N" header — gradient ──────────────────────────── */
.w-8.h-8.rounded-lg.bg-amber-500.grid.place-items-center.text-black.font-bold {
  background: linear-gradient(145deg, var(--nkosi-gold-2), var(--nkosi-gold), #c97e1a) !important;
  position: relative;
  overflow: hidden;
}
.w-8.h-8.rounded-lg.bg-amber-500.grid.place-items-center.text-black.font-bold::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation: shine 4s ease-in-out infinite;
}
@keyframes shine {
  0%, 100% { opacity: 0; transform: translateX(-30%); }
  50%      { opacity: 1; transform: translateX(30%); }
}

/* ─── Live feed item hover gold ───────────────────────────── */
.divide-y.divide-zinc-800 > div.cursor-pointer:hover {
  background: rgba(242, 158, 36, 0.04) !important;
}

/* ─── Department detail headers ───────────────────────────── */
section[x-show*="dept-"] h1 {
  background: linear-gradient(135deg, var(--nkosi-gold) 0%, var(--nkosi-gold-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}