/* ═══════════════════════════════════════════════════════════════════
   LIKHA NEXUS — DESIGN SYSTEM v1
   One file. Every page. Change a value here → the whole site follows.
   Loaded by layouts/nexus.blade.php. Old pages keep the old CSS until
   they are migrated, so nothing breaks mid-rollout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────
   The only place raw colours/sizes are allowed. Everything below and
   every page must use var(--nx-*) — never a hex code. */
/* Monochrome by design: pure neutral greys, no blue tint anywhere. The only
   colour in the whole system is status (ok/warn/bad) — so when you DO see
   colour, it always means something. Never decoration. */
:root{
  /* surfaces — back to front */
  --nx-bg:        #fafafa;
  --nx-surface:   #ffffff;
  --nx-raised:    #ffffff;
  --nx-sunken:    #f4f4f5;
  --nx-line:      #e4e4e7;
  --nx-line-soft: #f0f0f1;

  /* text — loudest to quietest */
  --nx-text:      #09090b;
  --nx-text-2:    #52525b;
  --nx-text-3:    #a1a1aa;

  /* THE action. Black on light, white on dark — on a grey page, black is the
     loudest thing possible without inventing a colour. --accent-fg is the text
     that sits on it, and MUST flip with it or the button goes unreadable. */
  --nx-accent:    #18181b;
  --nx-accent-2:  #000000;
  --nx-accent-fg: #fafafa;
  --nx-accent-sub:rgba(9,9,11,.06);

  /* status — meaning, not taste */
  --nx-ok:        #16a34a;  --nx-ok-sub:   rgba(22,163,74,.11);
  --nx-warn:      #d97706;  --nx-warn-sub: rgba(217,119,6,.11);
  --nx-bad:       #dc2626;  --nx-bad-sub:  rgba(220,38,38,.11);
  --nx-info:      #0891b2;  --nx-info-sub: rgba(8,145,178,.11);
  --nx-ai:        #52525b;  --nx-ai-sub:   rgba(82,82,91,.10);

  /* spacing — a 4px scale. No arbitrary margins anywhere. */
  --nx-1: 4px;  --nx-2: 8px;  --nx-3: 12px; --nx-4: 16px;
  --nx-5: 24px; --nx-6: 32px; --nx-7: 48px;

  /* shape */
  --nx-r-sm: 8px; --nx-r: 12px; --nx-r-lg: 16px; --nx-r-full: 999px;

  /* depth — only 3 levels exist */
  --nx-shadow:    0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --nx-shadow-lg: 0 4px 12px rgba(0,0,0,.07), 0 12px 32px rgba(0,0,0,.06);
  --nx-ring:      0 0 0 3px var(--nx-accent-sub);

  /* type */
  --nx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* motion — one duration, one curve. Consistency reads as quality. */
  --nx-fast: .12s cubic-bezier(.4,0,.2,1);
  --nx-base: .2s  cubic-bezier(.4,0,.2,1);
}

/* Near-black, never pure black. #000 is punishing to read against and kills
   depth — a shadow on pure black is invisible, so every surface flattens into
   one plane. #0a0a0a keeps the black look and lets the layers breathe. */
[data-theme="dark"]{
  --nx-bg:        #0a0a0a;
  --nx-surface:   #141414;
  --nx-raised:    #1c1c1c;
  --nx-sunken:    #171717;
  --nx-line:      #272727;
  --nx-line-soft: #1e1e1e;
  --nx-text:      #fafafa;
  --nx-text-2:    #a1a1aa;
  --nx-text-3:    #71717a;
  --nx-accent:    #fafafa;   /* inverted: the loud thing is now white */
  --nx-accent-2:  #ffffff;
  --nx-accent-fg: #0a0a0a;   /* …so its text must go black */
  --nx-accent-sub:rgba(250,250,250,.10);
  --nx-ok:       #22c55e;  --nx-ok-sub:   rgba(34,197,94,.15);
  --nx-warn:     #f59e0b;  --nx-warn-sub: rgba(245,158,11,.15);
  --nx-bad:      #ef4444;  --nx-bad-sub:  rgba(239,68,68,.15);
  --nx-info:     #22d3ee;  --nx-info-sub: rgba(34,211,238,.15);
  --nx-ai:       #a1a1aa;  --nx-ai-sub:   rgba(161,161,170,.14);
  --nx-shadow:    0 1px 3px rgba(0,0,0,.5);
  --nx-shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}

/* ── 2. RESET ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
body.nx{
  margin:0; font-family:var(--nx-font); background:var(--nx-bg);
  color:var(--nx-text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.nx :focus-visible{outline:none; box-shadow:var(--nx-ring); border-radius:var(--nx-r-sm);}

/* ── 3. TYPE SCALE — 4 sizes only. More sizes = visual noise. ────── */
.nx-h1{font-size:20px; font-weight:800; letter-spacing:-.3px; margin:0;}
.nx-h2{font-size:15px; font-weight:700; margin:0;}
.nx-body{font-size:14px;}
.nx-meta{font-size:12px; color:var(--nx-text-3);}
.nx-num{font-size:30px; font-weight:800; letter-spacing:-.8px; font-variant-numeric:tabular-nums;}
.nx-mono{font-family:var(--nx-mono); font-size:12.5px;}

/* ── 4. CARD ─────────────────────────────────────────────────────── */
.nx-card{
  background:var(--nx-surface); border:1px solid var(--nx-line);
  border-radius:var(--nx-r); box-shadow:var(--nx-shadow);
}
.nx-card-pad{padding:var(--nx-4);}
.nx-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--nx-3); padding:var(--nx-3) var(--nx-4);
  border-bottom:1px solid var(--nx-line-soft);
}

/* ── 5. BUTTON — ONE primary per screen. That's the "1 click". ───── */
.nx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--nx-2);
  height:36px; padding:0 var(--nx-4); border-radius:var(--nx-r-sm);
  border:1px solid var(--nx-line); background:var(--nx-surface); color:var(--nx-text);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background var(--nx-fast), border-color var(--nx-fast), transform var(--nx-fast);
  white-space:nowrap;
}
.nx-btn:hover{background:var(--nx-sunken);}
.nx-btn:active{transform:translateY(1px);}
.nx-btn[disabled]{opacity:.5; cursor:not-allowed; transform:none;}
.nx-btn-primary{background:var(--nx-accent); border-color:var(--nx-accent); color:var(--nx-accent-fg);}
.nx-btn-primary:hover{background:var(--nx-accent-2); border-color:var(--nx-accent-2);}
.nx-btn-ghost{border-color:transparent; background:transparent; color:var(--nx-text-2);}
.nx-btn-ghost:hover{background:var(--nx-sunken); color:var(--nx-text);}
.nx-btn-lg{height:44px; padding:0 var(--nx-5); font-size:14px;}
.nx-btn-danger{background:var(--nx-bad); border-color:var(--nx-bad); color:#fff;}

/* ── 6. INPUT ────────────────────────────────────────────────────── */
.nx-input, .nx-select{
  height:36px; padding:0 var(--nx-3); width:100%;
  border:1px solid var(--nx-line); border-radius:var(--nx-r-sm);
  background:var(--nx-surface); color:var(--nx-text); font:inherit; font-size:13px;
  transition:border-color var(--nx-fast), box-shadow var(--nx-fast);
}
.nx-input:focus, .nx-select:focus{border-color:var(--nx-accent); box-shadow:var(--nx-ring);}
.nx-input::placeholder{color:var(--nx-text-3);}
.nx-field{display:flex; flex-direction:column; gap:var(--nx-1);}
.nx-label{font-size:11px; font-weight:700; color:var(--nx-text-3); text-transform:uppercase; letter-spacing:.4px;}

/* ── 7. PILL / BADGE ─────────────────────────────────────────────── */
.nx-pill{
  display:inline-flex; align-items:center; gap:var(--nx-1);
  padding:2px var(--nx-2); border-radius:var(--nx-r-full);
  font-size:11px; font-weight:700; white-space:nowrap;
}
.nx-pill-ok  {background:var(--nx-ok-sub);   color:var(--nx-ok);}
.nx-pill-warn{background:var(--nx-warn-sub); color:var(--nx-warn);}
.nx-pill-bad {background:var(--nx-bad-sub);  color:var(--nx-bad);}
.nx-pill-info{background:var(--nx-info-sub); color:var(--nx-info);}
.nx-pill-ai  {background:var(--nx-ai-sub);   color:var(--nx-ai);}
.nx-pill-mute{background:var(--nx-sunken);   color:var(--nx-text-3);}

/* ── 8. TABS — the proven pattern, now the only one. ─────────────── */
.nx-tabs{display:flex; gap:var(--nx-1); padding:var(--nx-1); background:var(--nx-sunken);
  border:1px solid var(--nx-line); border-radius:var(--nx-r); width:fit-content; max-width:100%; overflow-x:auto;}
.nx-tab{
  display:inline-flex; align-items:center; gap:var(--nx-2);
  height:32px; padding:0 var(--nx-3); border:none; border-radius:var(--nx-r-sm);
  background:transparent; color:var(--nx-text-2); font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background var(--nx-fast), color var(--nx-fast);
}
.nx-tab:hover{color:var(--nx-text); background:var(--nx-surface);}
.nx-tab.on{background:var(--nx-accent); color:#fff;}

/* ── 9. TABLE ────────────────────────────────────────────────────── */
.nx-tblwrap{overflow:auto; border-radius:var(--nx-r);}
.nx-tbl{width:100%; border-collapse:collapse; font-size:13px;}
.nx-tbl th{
  position:sticky; top:0; z-index:1; background:var(--nx-sunken);
  padding:var(--nx-2) var(--nx-3); text-align:left;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--nx-text-3); border-bottom:1px solid var(--nx-line); white-space:nowrap;
}
.nx-tbl td{padding:var(--nx-2) var(--nx-3); border-bottom:1px solid var(--nx-line-soft);}
.nx-tbl tbody tr{transition:background var(--nx-fast);}
.nx-tbl tbody tr:hover{background:var(--nx-sunken);}
.nx-tbl .num{text-align:right; font-variant-numeric:tabular-nums;}

/* ── 10. EMPTY STATE — every list needs one. Never a blank box. ──── */
.nx-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--nx-2); padding:var(--nx-7) var(--nx-4); text-align:center; color:var(--nx-text-3);
}
.nx-empty .ic{font-size:32px; opacity:.5;}
.nx-empty .msg{font-size:13px; font-weight:600; color:var(--nx-text-2);}

/* ── 11. SKELETON — the ONLY loading state. Never a spinner. ─────── */
.nx-sk{
  background:linear-gradient(90deg, var(--nx-sunken) 25%, var(--nx-line-soft) 37%, var(--nx-sunken) 63%);
  background-size:400% 100%; animation:nx-sk 1.4s ease infinite; border-radius:var(--nx-r-sm);
}
@keyframes nx-sk{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}
.nx-sk-line{height:12px; margin-bottom:var(--nx-2);}
.nx-sk-num{height:30px; width:52%; margin:var(--nx-2) 0;}

/* ── 12. LAYOUT PRIMITIVES — so no page invents its own grid. ───── */
.nx-stack{display:flex; flex-direction:column; gap:var(--nx-3);}
.nx-row{display:flex; align-items:center; gap:var(--nx-3);}
.nx-grid{display:grid; gap:var(--nx-3);}
.nx-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.nx-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.nx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.nx-spacer{flex:1;}
@media(max-width:900px){
  .nx-grid-3,.nx-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .nx-grid-2,.nx-grid-3,.nx-grid-4{grid-template-columns:1fr;}
}

/* ── 13. ENTRANCE — one animation, staggered by --i. ─────────────── */
.nx-in{animation:nx-in .4s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i,0) * .05s);}
@keyframes nx-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){
  .nx-in{animation:none;} .nx-sk{animation:none;} *{transition:none !important;}
}