/* ============================================================================
   app-theme.css — ONE shared stylesheet applied to every Django page.

   Goal: give the whole app the landing page's typography + token colors with a
   single include, so individual templates don't each need a color pass. Loaded
   AFTER tokens.css (which defines the palette per html[data-theme]) and AFTER
   Argon, so these win. Many rules use !important on purpose: that lets them
   override the inline `style="color:#fff"` / hardcoded literals scattered in
   page templates (inline styles without !important lose to a stylesheet rule
   WITH !important). Reference var(--*) only — never hardcode.
   ============================================================================ */

/* Fonts — same as the landing (body = Plus Jakarta Sans, numbers = JetBrains Mono). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Legacy var aliases ──────────────────────────────────────────────────
   Many templates use the landing/fullscreen var names (--text, --muted,
   --panel, --bg, --accent-2 …) which are NOT defined on base.html pages — so
   they resolved to nothing and text/surfaces looked faded. Alias them onto the
   shared tokens here (loaded everywhere). They reference themed tokens, so they
   flip per data-theme automatically. (--accent / --border / --danger are owned
   by tokens.css directly, so they're not re-aliased.) */
:root {
  --text:          var(--text-primary);
  --muted:         var(--text-secondary);
  --muted-strong:  var(--text-secondary);
  --bg:            var(--bg-primary);
  --bg-soft:       var(--bg-overlay);
  --panel:         var(--bg-elevated);
  --panel-strong:  var(--bg-overlay);
  --surface:       var(--bg-overlay);
  --surface-strong:var(--bg-overlay);
  --accent-2:      var(--success);
  --accent-3:      var(--warning);
  --brand-grad:    var(--brand-gradient);
}

/* ── Typography baseline ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  color: var(--text-primary);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.pg-title, .page-title {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
  /* Neutralise gradient-clipped text (background-clip:text + transparent fill)
     which goes invisible on the light theme — force the real token color. */
  -webkit-text-fill-color: var(--text-primary) !important;
  background-image: none !important;
}
p, li, dd, dt, label, blockquote, figcaption {
  color: var(--text-primary);
}
/* Monospace for numbers / code / metrics — the data-terminal feel. */
code, pre, kbd, samp, .text-mono, .font-mono,
.metric, .stat-value, .data-value, .num, .mono {
  font-family: var(--font-mono) !important;
}

/* Muted / secondary text */
.text-muted, .text-secondary, small, .small, .heading-small,
.description, .subtitle, .text-sm {
  color: var(--text-secondary) !important;
}

/* Links */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
a.text-muted:hover { color: var(--text-primary) !important; }

/* Utility text colors mapped to tokens */
.text-primary { color: var(--accent) !important; }
.text-success, .text-green { color: var(--success) !important; }
.text-danger, .text-red { color: var(--danger) !important; }
.text-warning, .text-orange { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-white { color: var(--text-primary) !important; } /* "white" text → themed text */
.text-dark, .text-black { color: var(--text-primary) !important; }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.card, .modal-content, .dropdown-menu, .popover, .list-group-item,
.panel, .tile, .surface, .well {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
}
.card-header, .card-footer, .modal-header, .modal-footer {
  background-color: var(--bg-overlay) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
}
hr, .border, .border-top, .border-bottom, .border-left, .border-right {
  border-color: var(--border) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table, .table td, .table th { color: var(--text-primary); border-color: var(--border) !important; }
.table thead th, .thead-light th { background-color: var(--bg-overlay) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
.table-hover tbody tr:hover { background-color: var(--accent-soft) !important; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select, select, textarea, input[type="text"],
input[type="search"], input[type="number"], input[type="email"], input[type="password"] {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; }
.input-group-text { background-color: var(--bg-overlay) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-primary:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-secondary, .btn-default {
  background-color: var(--bg-overlay) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge-primary, .badge-info { background-color: var(--accent-soft) !important; color: var(--accent) !important; }
.badge-success { background-color: var(--success-soft) !important; color: var(--success) !important; }
.badge-danger { background-color: var(--danger-soft) !important; color: var(--danger) !important; }
.badge-default, .badge-secondary { background-color: var(--bg-overlay) !important; color: var(--text-primary) !important; }

/* ── No glassmorphism ────────────────────────────────────────────────────
   The design system bans backdrop blur (it reads as "blurry/hazy", especially
   on the light theme, and isn't part of the editorial look). Kill it app-wide.
   Also flatten the common translucent glass gradients to solid token surfaces. */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-track { background: var(--bg-overlay); }