/* ═══════════════════════════════════════════════════════════════════
   master.css  ·  Shared design system
   Import this in any project to get the full token + component layer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────── */
/* ── Design tokens (light) ──────────────────────────────────────── */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace, 'Courier New', monospace;

  /* Surface */
  --bg:            #F4F6F8;
  --surface:       #FFFFFF;
  --surface-2:     #F0F2F5;
  --border:        #E2E8EF;
  --border-strong: #C8D0DC;
  --hover-bg:      #EDF1F7;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;

  /* Status palette */
  --red-bg:     #FFE4E4;  --red-fg:    #B91C1C;
  --yellow-bg:  #FEF3C7;  --yellow-fg: #92400E;
  --green-bg:   #DCFCE7;  --green-fg:  #166534;
  --blue-bg:    #EFF6FF;  --blue-fg:   #1D4ED8;
  --grey-bg:    #E5E7EB;  --grey-fg:   #374151;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.04);
}

/* ── Design tokens (dark) ───────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #0D1117;
  --surface:       #161B22;
  --surface-2:     #1C2128;
  --border:        #2D333B;
  --border-strong: #444C56;
  --hover-bg:      #1C2128;

  --text-primary:   #E6EDF3;
  --text-secondary: #848D97;
  --text-muted:     #545D68;

  --red-bg:     #1F0909;  --red-fg:    #FF7B72;
  --yellow-bg:  #1C1600;  --yellow-fg: #E3B341;
  --green-bg:   #071711;  --green-fg:  #3FB950;
  --blue-bg:    #051028;  --blue-fg:   #79C0FF;
  --grey-bg:    #1C2128;  --grey-fg:   #848D97;
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; height: 32px;
  font-size: 12px; font-weight: 500; font-family: var(--font-sans);
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer; transition: all .12s; user-select: none;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
           stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.btn-primary { background: var(--text-primary); color: var(--bg); border-color: var(--text-primary); }
.btn-primary:hover { opacity: .88; color: var(--bg); }

.btn-red    { background: var(--red-bg);    color: var(--red-fg);    border-color: var(--red-fg); }
.btn-green  { background: var(--green-bg);  color: var(--green-fg);  border-color: var(--green-fg); }
.btn-yellow { background: var(--yellow-bg); color: var(--yellow-fg); border-color: var(--yellow-fg); }

.btn-sm  { height: 26px; padding: 3px 10px; font-size: 11px; border-radius: var(--r-sm); }
.btn-xs  { height: 22px; padding: 2px 8px;  font-size: 10px; border-radius: var(--r-xs); }
.btn-icon { padding: 0; width: 32px; height: 32px; justify-content: center; flex-shrink: 0; }
.btn-icon.sm { width: 26px; height: 26px; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 10px; font-weight: 500;
  font-family: var(--font-mono); border-radius: 20px;
  white-space: nowrap; letter-spacing: .03em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-red    { background: var(--red-bg);    color: var(--red-fg); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.badge-green  { background: var(--green-bg);  color: var(--green-fg); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue-fg); }
.badge-gray   { background: var(--grey-bg);   color: var(--grey-fg); }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
}
.card-sm { padding: 12px; border-radius: var(--r-md); }
.card-interactive { cursor: pointer; transition: border-color .12s, background .12s; }
.card-interactive:hover { border-color: var(--border-strong); }

/* ── Form elements ──────────────────────────────────────────────── */
.field-label {
  display: block; font-size: 10px; font-weight: 500;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px;
}
.field-input, .field-select {
  width: 100%; padding: 7px 10px;
  font-size: 13px; font-family: var(--font-sans);
  color: var(--text-primary); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .12s; outline: none;
}
.field-input:focus, .field-select:focus {
  border-color: var(--border-strong); background: var(--surface);
}
.field-textarea {
  resize: vertical; min-height: 80px; line-height: 1.4;
}

/* ── Stat cards (for dashboards) ────────────────────────────────── */
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 20px;
  cursor: pointer; transition: all .12s; user-select: none;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card-value { font-size: 28px; font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); }
.stat-card-label { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: 4px; }
.stat-card.active { outline: 3px solid currentColor; outline-offset: -1px; }

/* ── Data table ─────────────────────────────────────────────────── */
.data-table { border-collapse: collapse; table-layout: fixed; }
.data-table th {
  padding: 8px 10px; text-align: left;
  font-size: 9px; font-weight: 600; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  background: var(--surface-2); border-bottom: 2px solid var(--border);
  position: sticky; top: 0; white-space: nowrap; z-index: 10;
}
.data-table td {
  vertical-align: middle; border-bottom: 1px solid var(--border); padding: 0;
}
.data-table tr:hover td { background: var(--hover-bg); }
.data-table tr:last-child td { border-bottom: none; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast-system {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--text-primary); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-lg);
  font-size: 12px; font-family: var(--font-mono);
  transform: translateY(80px); opacity: 0;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--shadow-xl); max-width: 320px;
}
.toast-system.show { transform: translateY(0); opacity: 1; }
.toast-system.error { background: var(--red-fg); }

/* ── Print utility ──────────────────────────────────────────────── */
.print-only { display: none; }
@media print { .no-print { display: none !important; } .print-only { display: block; } }