/* ===========================================================================
   Risos AI — Legacy global theme variables + light-mode component adapters.
   Extracted from base.html inline <style> (redesign 2026-05-31) so templates
   carry no inline CSS/hex. Used by all pages NOT on shell-v2.
   New shell uses tokens.css. Accent migrated indigo -> cyan-blue signature.
   =========================================================================== */

/* ── Mini footer ─────────────────────────────────────────────── */
.risos-mini-footer {
  padding: 1.4rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
  margin-top: auto;
}
body.theme-light .risos-mini-footer { background: rgba(0,0,0,0.02); border-top-color: rgba(0,0,0,0.06); }
.risos-mini-footer__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem;
  justify-content: space-between; align-items: center;
  color: var(--text-secondary, #94a3b8); font-size: 0.84rem;
}
.risos-mini-footer__brand { color: var(--text-faint, #64748b); }
.risos-mini-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.risos-mini-footer__links a { color: var(--text-secondary, #94a3b8); text-decoration: none; transition: color 0.15s; }
.risos-mini-footer__links a:hover { color: var(--text-primary, #f1f5f9); }
body.theme-light .risos-mini-footer__brand,
body.theme-light .risos-mini-footer__links a { color: #475569; }
body.theme-light .risos-mini-footer__links a:hover { color: #0f172a; }

/* ═══════════════════════════════════════════════════════
   GLOBAL THEME VARIABLES — Risos AI Design System (LEGACY)
   Used by all pages NOT on shell-v2. New shell uses tokens.css.
   Accent = cyan-blue signature (was indigo/violet).
   ═══════════════════════════════════════════════════════ */
:root, body.theme-dark {
  --bg-primary: #0a0a14;
  --bg-secondary: #14141f;
  --bg-tertiary: #1a1a2e;
  --bg-elevated: rgba(255,255,255,0.05);
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --bg-input: rgba(255,255,255,0.05);
  --border-color: rgba(255,255,255,0.08);
  --border-color-strong: rgba(255,255,255,0.15);
  --text-primary: #fff;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  --accent: #38BDF8;
  --accent-hover: #22D3EE;
  --accent-soft: rgba(56,189,248,0.15);
  /* Brand accent vars for new components (pendekatan setup, coming soon,
     method-page-header). Cyan-blue signature gradient. */
  --accent-primary: #38BDF8;
  --accent-primary-rgb: 56, 189, 248;
  --accent-secondary: #22D3EE;
  --accent-secondary-rgb: 34, 211, 238;
  --accent-gradient: var(--grad, linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%));
  --success: #22c55e;
  --success-soft: rgba(34,197,94,0.15);
  --warning: #eab308;
  --warning-soft: rgba(234,179,8,0.15);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,0.15);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);
}
/* Halaman LEGACY (body:not(.shell-v2)) jadi terang lewat html[data-theme=light]
   — bukan hanya kelas body.theme-light. HANYA token bg/text (BUKAN --accent:
   itu milik themes.css per-palette). Spesifisitas (0,2,0) juga menang atas
   body.theme-dark (0,1,1) → fix race "html=light tapi body masih theme-dark". */
:root[data-theme="light"] {
  /* Ikut palette: referensi token themes.css (var --bg/--surface) supaya halaman
     LEGACY pun ber-tint sesuai tema di light. Fallback = nilai putih lama. */
  --bg-primary: var(--bg, #ffffff);
  --bg-secondary: var(--surface-1, #f8fafc);
  --bg-tertiary: var(--surface-3, #f1f5f9);
  --bg-elevated: var(--surface-2, rgba(15,23,42,0.04));
  --bg-card: var(--surface-2, rgba(0,0,0,0.02));
  --bg-card-hover: var(--surface-3, rgba(0,0,0,0.04));
  --bg-input: var(--surface-3, rgba(0,0,0,0.03));
  --border-color: rgba(0,0,0,0.08);
  --border-color-strong: rgba(0,0,0,0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-muted: #94a3b8;
  --text-inverse: #fff;
}
body.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: rgba(15,23,42,0.04);
  --bg-card: rgba(0,0,0,0.02);
  --bg-card-hover: rgba(0,0,0,0.04);
  --bg-input: rgba(0,0,0,0.03);
  --border-color: rgba(0,0,0,0.08);
  --border-color-strong: rgba(0,0,0,0.15);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-muted: #94a3b8;
  --text-inverse: #fff;
  --accent: #1D6FE0;
  --accent-hover: #0E63C8;
  --accent-soft: rgba(29,111,224,0.1);
  --accent-primary: #1D6FE0;
  --accent-primary-rgb: 29, 111, 224;
  --accent-secondary: #0891B2;
  --accent-secondary-rgb: 8, 145, 178;
  --accent-gradient: var(--grad, linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%));
  --success: #16a34a;
  --success-soft: rgba(22,163,74,0.1);
  --warning: #ca8a04;
  --warning-soft: rgba(234,179,8,0.1);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,0.1);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --glass-bg: rgba(255,255,255,0.7);
  --glass-border: rgba(0,0,0,0.1);
}
/* Smooth theme transition (legacy) */
body:not(.shell-v2) { transition: background 0.3s ease, color 0.3s ease; }
body.theme-light:not(.shell-v2),
body.theme-dark:not(.shell-v2) { background: var(--bg-primary); color: var(--text-primary); }

/* ═══ Component-level theme adapters (legacy) ═══ */
body.theme-light:not(.shell-v2) .card,
body.theme-light:not(.shell-v2) .stat-card,
body.theme-light:not(.shell-v2) .info-card,
body.theme-light:not(.shell-v2) .panel-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}
body.theme-light:not(.shell-v2) table { color: var(--text-primary); }
body.theme-light:not(.shell-v2) table th { background: var(--bg-secondary); border-color: var(--border-color); }
body.theme-light:not(.shell-v2) table td { border-color: var(--border-color); }
body.theme-light:not(.shell-v2) input,
body.theme-light:not(.shell-v2) textarea,
body.theme-light:not(.shell-v2) select {
  background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary);
}
body.theme-light:not(.shell-v2) input:focus,
body.theme-light:not(.shell-v2) textarea:focus,
body.theme-light:not(.shell-v2) select:focus {
  border-color: var(--accent);
}

/* Light mode text visibility fixes (legacy only) */
body.theme-light:not(.shell-v2) .welcome-greeting,
body.theme-light:not(.shell-v2) .welcome-banner h1,
body.theme-light:not(.shell-v2) .welcome-card h1,
body.theme-light:not(.shell-v2) .dash-stat-value,
body.theme-light:not(.shell-v2) .stat-value,
body.theme-light:not(.shell-v2) .stat-card .stat-value,
body.theme-light:not(.shell-v2) .page-title,
body.theme-light:not(.shell-v2) .balance-card .value {
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
body.theme-light:not(.shell-v2) .stat-label,
body.theme-light:not(.shell-v2) .dash-stat-label,
body.theme-light:not(.shell-v2) .stat-sub,
body.theme-light:not(.shell-v2) .dash-stat-sub {
  color: var(--text-secondary);
}
body.theme-light:not(.shell-v2) .welcome-banner,
body.theme-light:not(.shell-v2) .dash-stat-card,
body.theme-light:not(.shell-v2) .qa-card,
body.theme-light:not(.shell-v2) .stat-card,
body.theme-light:not(.shell-v2) .welcome-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
body.theme-light:not(.shell-v2) .text-gradient {
  background: none !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* Navbar + Sidebar light-mode background (legacy only) */
body.theme-light:not(.shell-v2) .navbar,
body.theme-light:not(.shell-v2) .navbar-app,
body.theme-light:not(.shell-v2) nav.navbar {
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.theme-light:not(.shell-v2) .nav-link,
body.theme-light:not(.shell-v2) .navbar .nav-links a,
body.theme-light:not(.shell-v2) .nav-links a {
  color: #475569;
}
body.theme-light:not(.shell-v2) .nav-link:hover,
body.theme-light:not(.shell-v2) .nav-link.active,
body.theme-light:not(.shell-v2) .navbar .nav-links a:hover,
body.theme-light:not(.shell-v2) .navbar .nav-links a.active,
body.theme-light:not(.shell-v2) .nav-links a:hover,
body.theme-light:not(.shell-v2) .nav-links a.active {
  color: #0f172a;
  background: rgba(29,111,224,0.08);
}
body.theme-light:not(.shell-v2) .credit-badge {
  background: rgba(0,0,0,0.04);
  color: #0f172a;
  border-color: rgba(0,0,0,0.08);
}
body.theme-light:not(.shell-v2) .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.theme-light:not(.shell-v2) .dropdown-item { color: #0f172a; }
body.theme-light:not(.shell-v2) .dropdown-item:hover { background: rgba(0,0,0,0.04); }
body.theme-light:not(.shell-v2) .dropdown-name { color: #0f172a; }
body.theme-light:not(.shell-v2) .dropdown-divider { background: rgba(0,0,0,0.08); }

body.theme-light:not(.shell-v2) .sidebar,
body.theme-light:not(.shell-v2) .dashboard-sidebar {
  background: #f8fafc !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
}
body.theme-light:not(.shell-v2) .sidebar-item,
body.theme-light:not(.shell-v2) .sb-link {
  color: #475569;
}
body.theme-light:not(.shell-v2) .sidebar-item:hover,
body.theme-light:not(.shell-v2) .sb-link:hover {
  background: rgba(0,0,0,0.04);
  color: #0f172a;
}
body.theme-light:not(.shell-v2) .sidebar-item.active,
body.theme-light:not(.shell-v2) .sb-link.active {
  background: rgba(29,111,224,0.08);
  border-color: rgba(29,111,224,0.2);
  color: #0f172a;
}
body.theme-light:not(.shell-v2) .sb-section-label { color: #64748b; }
body.theme-light:not(.shell-v2) .sb-brand-mini .name { color: #0f172a; }
body.theme-light:not(.shell-v2) .sb-tier-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(6,182,212,0.04));
  border-color: rgba(29,111,224,0.2);
}
body.theme-light:not(.shell-v2) .sb-tier-card .name { color: #0f172a; }
body.theme-light:not(.shell-v2) .sidebar-divider { background: rgba(0,0,0,0.08); }

/* Universal navbar icon buttons (legacy theme/lang toggle) */
.navbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0; margin-right: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1;
  transition: background .2s, border-color .2s, transform .15s;
}
.navbar-icon-btn:hover { background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.4); }
.navbar-icon-btn:active { transform: scale(0.96); }
.navbar-lang-btn { font-weight: 700; font-size: 12px; letter-spacing: 0.5px; }
body.theme-light:not(.shell-v2) .navbar-icon-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
body.theme-light:not(.shell-v2) .navbar-icon-btn:hover { background: rgba(29,111,224,0.1); }

/* Inline SVG icon sizing (replaces emoji icons; see templates/_icons.html) */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.ic-lg { width: 1.4em; height: 1.4em; }
.ic-sm { width: 0.95em; height: 0.95em; }