/*
 * sp-theme.css — Blackifier School ERP
 * ─────────────────────────────────────
 * Single file for all design tokens + repeated utility classes.
 * Loaded via app.blade.php <head>. Blade injects dynamic values
 * (colors, logo) via sp-dynamic-tokens blade component.
 *
 * TO REBRAND: edit config/branding.php or .env — do NOT edit here.
 */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
/* NOTE: :root color values here are FALLBACKS only.
   The real values come from the <style id="sp-dyn"> block injected by
   resources/views/components/sp-dynamic-tokens.blade.php               */
:root {
  --ink:         #0f1117;
  --ink-2:       #2a2d3a;
  --ink-muted:   #7a7f95;
  --paper:       #f8f7f4;
  --cream:       #fdfcf8;
  --gold:        #c8973a;
  --gold-lt:     #f5e6c8;
  --green:       #1a7a5e;
  --green-lt:    #d4f0e7;
  --red:         #b83232;
  --red-lt:      #fde8e8;
  --blue:        #2350a0;
  --blue-lt:     #dde9ff;
  --orange:      #b85a00;
  --orange-lt:   #ffefd6;
  --purple:      #6b3fa0;
  --purple-lt:   #efe6ff;
  --border:      #e4e1d8;
  --or:          #c2570a;
  --or-l:        #fff4ed;
  --or-b:        #fcd8b2;
  --sidebar:     #ffffff;
  --sidebar-acc: #f7f5f0;
  --sidebar-border: #ece9e2;

  /* Semantic aliases */
  --fg:          var(--ink);
  --card:        var(--cream);
  --muted:       var(--paper);
  --muted-fg:    var(--ink-muted);
  --primary:     var(--gold);
  --destructive: var(--red);
  --success:     var(--green);
  --info:        var(--blue);
  --warning:     var(--orange);

  /* Layout */
  --sw:          260px;
  --th:          65px;
  --radius:      12px;
  --radius-sm:   7px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,17,23,.06), 0 1px 2px rgba(15,17,23,.04);
  --shadow-md: 0 4px 16px rgba(15,17,23,.08), 0 2px 6px rgba(15,17,23,.05);
  --shadow-lg: 0 12px 40px rgba(15,17,23,.12), 0 4px 12px rgba(15,17,23,.06);
}

/* ── UTILITY CLASSES (replace repeated inline style="" attrs) ──────────── */

/* Text */
.u-text-ink      { font-size:13px; color:var(--ink); }
.u-text-bold     { font-weight:600; font-size:13px; color:var(--ink); }
.u-text-bold-700 { font-weight:700; font-size:13px; color:var(--ink); }
.u-text-muted    { font-size:12px; color:var(--ink-muted); }
.u-text-muted-xs { font-size:11px; color:var(--ink-muted); }
.u-text-muted-11 { font-size:11.5px; color:var(--ink-muted); }
.u-text-sub      { font-size:11.5px; color:var(--muted-fg); }
.u-text-sub-xs   { font-size:11px;   color:var(--muted-fg); }
.u-text-sub-sm   { font-size:12px;   color:var(--muted-fg); }
.u-text-normal   { font-weight:normal; color:#666; }
.u-text-success  { color:var(--green); font-weight:600; }
.u-text-danger   { color:var(--destructive); }

/* Flex row layouts */
.u-flex          { display:flex; align-items:center; gap:8px; }
.u-flex-5        { display:flex; align-items:center; gap:5px; }
.u-flex-3        { display:flex; align-items:center; gap:3px; }
.u-flex-between  { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.u-flex-wrap     { display:flex; gap:8px; flex-wrap:wrap; }
.u-shrink-top    { flex-shrink:0; margin-top:1px; }

/* Grids */
.u-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.u-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* Color left-border accent */
.u-bl-green  { border-left:3px solid var(--green); }
.u-bl-blue   { border-left:3px solid var(--blue); }
.u-bl-orange { border-left:3px solid var(--orange); }
.u-bl-red    { border-left:3px solid var(--red); }
.u-bl-gold   { border-left:3px solid var(--gold); }
.u-bl-purple { border-left:3px solid var(--purple); }

/* Color chip backgrounds */
.u-chip-green  { background:var(--green-lt);  color:var(--green); }
.u-chip-blue   { background:var(--blue-lt);   color:var(--blue); }
.u-chip-orange { background:var(--orange-lt); color:var(--orange); }
.u-chip-gold   { background:var(--gold-lt);   color:var(--gold); }
.u-chip-purple { background:var(--purple-lt); color:var(--purple); }
.u-chip-red    { background:var(--red-lt);    color:var(--red); }

/* Count/number chip (used on nav badges) */
.u-count-chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:27px; padding:0 8px; border-radius:5px;
  background:var(--primary); color:#fff;
  font-size:12px; font-weight:700; border:1px solid var(--primary);
}

/* Linked tag (active + disabled) */
.u-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:6px;
  border:1px solid var(--border); background:var(--card);
  color:var(--fg); font-size:12px; font-weight:500;
  text-decoration:none; transition:all .15s;
}
.u-tag:hover { background:var(--muted); }
.u-tag-off {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:6px;
  border:1px solid var(--border); background:var(--muted);
  color:var(--muted-fg); font-size:12px; font-weight:500;
  opacity:.5; cursor:not-allowed;
}

/* Inline icon helper */
.u-ic { display:inline; vertical-align:-.15em; margin-right:5px; }

/* Code/shortcode pill */
.u-code { padding:0 2px; color:var(--muted-fg); font-size:12px; font-weight:600; user-select:none; }

/* Empty states */
.u-empty { text-align:center; padding:40px; color:var(--muted-fg); }
.u-empty-icon { display:block; margin:0 auto 10px; opacity:.3; }

/* Table field label/value pair */
.u-field-key { font-size:12px; color:var(--muted-fg); }
.u-field-val { font-weight:600; font-size:13px; color:var(--ink); margin-top:2px; }
.u-col-46    { width:46px; color:var(--muted-fg); }

/* ── TOUR (sp-tour) — ALWAYS black regardless of step ─────────────────── */
#sp-hd   { background:#0f1117 !important; }
#sp-next { background:#0f1117 !important; color:#fff !important; }
#sp-arw  { background:#0f1117 !important; }
