/**
 * Admin Portal – globale dag / avond / nacht thema’s (Workflow Player-stijl).
 * Werkt via html[data-admin-theme="day|evening|night"] gezet door admin-portal-themes.js
 */
/**
 * Losse admin-tools (o.a. Kanban) – zelfde dag/avond/nacht als deze file.
 * Gebruik: body[data-theme="day|evening|night"] + optioneel html[data-admin-theme] via JS.
 * Dag = donkere tekst op lichte achtergrond (contrast).
 */
:root {
  --admin-transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  /* Fallback vóór body[data-theme] — IT Live navy + cyan */
  --hub-bg: #020917;
  --hub-panel: #0c1b38;
  --hub-border: #102348;
  --hub-text: #ffffff;
  --hub-text-muted: #6b92b8;
  --hub-primary: #00c8ff;
  --hub-primary-glow: rgba(0, 200, 255, 0.3);
  --hub-glass: rgba(12, 27, 56, 0.78);
  --hub-canvas: #060f23;
  --hub-code: #e2e8f0;
  --hub-top-nav-tint: rgba(255, 255, 255, 0.06);
  --hub-shadow-card: rgba(0, 0, 0, 0.45);
}

body[data-theme="day"] {
  /* IT Live Brand v2 — dag: lichte kaarten, navy tekst */
  --hub-bg: #eef2f7;
  --hub-panel: #ffffff;
  --hub-border: #d0dce8;
  --hub-text: #0c1b38;
  --hub-text-muted: #6b92b8;
  --hub-glass: rgba(255, 255, 255, 0.94);
  --hub-canvas: #f4f7fb;
  --hub-code: #0c1b38;
  --hub-top-nav-tint: rgba(12, 27, 56, 0.04);
  --hub-shadow-card: rgba(2, 9, 23, 0.08);
  --hub-primary: #00c8ff;
  --hub-primary-glow: rgba(0, 200, 255, 0.22);
}

body[data-theme="evening"] {
  --hub-bg: #1e1b4b;
  --hub-panel: #312e81;
  --hub-border: #4338ca;
  --hub-text: #e0e7ff;
  --hub-text-muted: #a5b4fc;
  --hub-glass: rgba(49, 46, 129, 0.78);
  --hub-canvas: #1e1b4b;
  --hub-code: #e0e7ff;
  --hub-top-nav-tint: rgba(255, 255, 255, 0.07);
  --hub-shadow-card: rgba(0, 0, 0, 0.4);
  --hub-primary: #f2c14f;
  --hub-primary-glow: rgba(242, 193, 79, 0.28);
}

body[data-theme="night"] {
  --hub-bg: #020917;
  --hub-panel: #0c1b38;
  --hub-border: #102348;
  --hub-text: #ffffff;
  --hub-text-muted: #6b92b8;
  --hub-glass: rgba(12, 27, 56, 0.78);
  --hub-canvas: #060f23;
  --hub-code: #e2e8f0;
  --hub-top-nav-tint: rgba(255, 255, 255, 0.06);
  --hub-shadow-card: rgba(0, 0, 0, 0.45);
  --hub-primary: #00c8ff;
  --hub-primary-glow: rgba(0, 200, 255, 0.28);
}

/* ── Dag ── */
html[data-admin-theme="day"] {
  --admin-page-bg: linear-gradient(165deg, #f4f7fb 0%, #eef2f7 45%, #fafbfc 100%);
  --admin-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f4fa 100%);
  --admin-sidebar-border: rgba(12, 27, 56, 0.1);
  --admin-sidebar-text: #0c1b38;
  --admin-sidebar-muted: #6b92b8;
  --admin-sidebar-hover: rgba(0, 200, 255, 0.08);
  --admin-header-bg: linear-gradient(90deg, #ffffff 0%, #f4f7fb 50%, #f8fafc 100%);
  --admin-header-border: rgba(12, 27, 56, 0.1);
  --admin-header-text: #0c1b38;
  --admin-header-btn: #3a567a;
  --admin-main-text: #0c1b38;
  --admin-muted: #6b92b8;
  --admin-muted-text: #6b92b8;
  --admin-inner-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-border-color: #d0dce8;
  --admin-hover-bg: rgba(0, 200, 255, 0.06);
  --admin-accent: #c8922a;
  --admin-glow: rgba(242, 193, 79, 0.18);
}

/* ── Avond ── */
html[data-admin-theme="evening"] {
  --admin-page-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 25%, #312e81 55%, #1e40af 80%, #1e3a8a 100%);
  --admin-sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e1b4b 45%, #172554 100%);
  --admin-sidebar-border: rgba(129, 140, 248, 0.2);
  --admin-sidebar-text: #e0e7ff;
  --admin-sidebar-muted: #a5b4fc;
  --admin-sidebar-hover: rgba(129, 140, 248, 0.18);
  --admin-header-bg: linear-gradient(90deg, #1e1b4b 0%, #312e81 40%, #1e3a8a 100%);
  --admin-header-border: rgba(129, 140, 248, 0.25);
  --admin-header-text: #e0e7ff;
  --admin-header-btn: #c7d2fe;
  --admin-main-text: #e0e7ff;
  --admin-muted: #a5b4fc;
  --admin-muted-text: #a5b4fc;
  --admin-inner-bg: rgba(30, 27, 75, 0.45);
  --admin-card-bg: rgba(30, 27, 75, 0.65);
  --admin-border-color: rgba(129, 140, 248, 0.2);
  --admin-hover-bg: rgba(129, 140, 248, 0.08);
  --admin-accent: #14b8a6;
  --admin-glow: rgba(20, 184, 166, 0.2);
}

/* ── Nacht ── */
html[data-admin-theme="night"] {
  --admin-page-bg: linear-gradient(145deg, #020917 0%, #060f23 40%, #0c1b38 85%, #020917 100%);
  --admin-sidebar-bg: linear-gradient(180deg, #020917 0%, #0c1b38 55%, #060f23 100%);
  --admin-sidebar-border: rgba(0, 200, 255, 0.14);
  --admin-sidebar-text: #ffffff;
  --admin-sidebar-muted: #6b92b8;
  --admin-sidebar-hover: rgba(0, 200, 255, 0.1);
  --admin-header-bg: linear-gradient(90deg, #020917 0%, #0c1b38 50%, #060f23 100%);
  --admin-header-border: rgba(0, 200, 255, 0.16);
  --admin-header-text: #ffffff;
  --admin-header-btn: #6b92b8;
  --admin-main-text: #f1f5f9;
  --admin-muted: #6b92b8;
  --admin-muted-text: #6b92b8;
  --admin-inner-bg: rgba(12, 27, 56, 0.72);
  --admin-card-bg: rgba(12, 27, 56, 0.88);
  --admin-border-color: rgba(16, 35, 72, 0.9);
  --admin-hover-bg: rgba(0, 200, 255, 0.08);
  --admin-accent: #f2c14f;
  --admin-glow: rgba(242, 193, 79, 0.14);
}

/* IT Live — typografie (DM Sans body, Montserrat display) */
html[data-admin-theme] body.admin-portal-v2 {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-admin-theme] .admin-sidebar-v2-logo,
html[data-admin-theme] .admin-header-v2-logo {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Page + main */
html[data-admin-theme] body.admin-portal-v2 {
  background: var(--admin-page-bg) !important;
  background-attachment: fixed !important;
  color: var(--admin-main-text) !important;
  transition: background var(--admin-transition), color var(--admin-transition);
}

html[data-admin-theme] .main-content-v2 {
  background: transparent !important;
  transition: color var(--admin-transition);
}

html[data-admin-theme] .main-content-v2-inner {
  color: var(--admin-main-text);
  background: var(--admin-inner-bg);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 40px var(--admin-glow);
  backdrop-filter: blur(10px);
  transition: background var(--admin-transition), box-shadow var(--admin-transition);
}

html[data-admin-theme="day"] .main-content-v2-inner {
  border: 1px solid var(--admin-border-color);
  box-shadow: 0 10px 44px rgba(2, 9, 23, 0.07);
}

/* Sidebar */
html[data-admin-theme] .admin-sidebar-v2 {
  background: var(--admin-sidebar-bg) !important;
  border-right: 1px solid var(--admin-sidebar-border) !important;
  color: var(--admin-sidebar-text) !important;
  box-shadow: 4px 0 32px var(--admin-glow) !important;
  transition: background var(--admin-transition), border-color var(--admin-transition), box-shadow var(--admin-transition);
}

html[data-admin-theme] .admin-sidebar-v2-logo,
html[data-admin-theme] .admin-sidebar-v2-item {
  color: var(--admin-sidebar-text) !important;
}

html[data-admin-theme] .admin-sidebar-v2-item:hover,
html[data-admin-theme] .admin-sidebar-v2-item.active {
  background: var(--admin-sidebar-hover) !important;
  color: var(--admin-accent) !important;
}

html[data-admin-theme] .admin-sidebar-v2-sub,
html[data-admin-theme] .admin-sidebar-v2-user-info small {
  color: var(--admin-sidebar-muted) !important;
}

html[data-admin-theme] .admin-sidebar-v2-header {
  border-bottom-color: var(--admin-sidebar-border) !important;
}

/* Header topbar */
html[data-admin-theme] .admin-header-v2 {
  background: var(--admin-header-bg) !important;
  border-bottom: 1px solid var(--admin-header-border) !important;
  transition: background var(--admin-transition), border-color var(--admin-transition);
}

html[data-admin-theme] .admin-header-v2-logo {
  color: var(--admin-header-text) !important;
}

html[data-admin-theme] .admin-header-v2-btn {
  color: var(--admin-header-btn) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-admin-theme] .admin-header-v2-btn:hover {
  color: var(--admin-accent) !important;
  border-color: var(--admin-accent) !important;
}

html[data-admin-theme] .admin-header-v2-user-label {
  color: var(--admin-sidebar-muted) !important;
}

html[data-admin-theme] .admin-header-v2-search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--admin-header-text) !important;
}

html[data-admin-theme="day"] .admin-header-v2-search-input {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--admin-border-color) !important;
  color: #0c1b38 !important;
}

html[data-admin-theme="day"] .admin-header-v2-search-input::placeholder {
  color: #6b92b8 !important;
}

html[data-admin-theme="day"] .admin-header-v2-btn {
  color: #3a567a !important;
  border-color: rgba(12, 27, 56, 0.12) !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

html[data-admin-theme="day"] .admin-header-v2-btn:hover {
  color: var(--admin-accent) !important;
  border-color: rgba(200, 146, 42, 0.45) !important;
}

html[data-admin-theme] .admin-header-v2-search-results {
  background: var(--admin-sidebar-bg) !important;
  border-color: var(--admin-sidebar-border) !important;
}

/* Theme switcher in header */
.admin-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-admin-theme="day"] .admin-theme-switcher {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.1);
}

.admin-theme-btn {
  border: none;
  background: transparent;
  color: var(--admin-header-btn, #94a3b8);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.admin-theme-btn:hover {
  color: var(--admin-accent, #c8922a);
}

.admin-theme-btn.active {
  background: var(--admin-accent, #00c8ff);
  color: #020917 !important;
  box-shadow: 0 2px 12px var(--admin-glow, rgba(0, 200, 255, 0.3));
}

html[data-admin-theme="day"] .admin-theme-btn.active {
  background: linear-gradient(135deg, #c8922a, #f2c14f);
  color: #020917 !important;
  box-shadow: 0 2px 14px rgba(242, 193, 79, 0.35);
}

@media (max-width: 900px) {
  .admin-theme-switcher .admin-theme-label {
    display: none;
  }
  .admin-theme-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ── Semantiek tokens (alias) — gebruik voor nieuwe CSS; nooit --admin-inner-bg als tekstkleur ── */
html[data-admin-theme] {
  --admin-fg: var(--admin-main-text);
  --admin-surface: var(--admin-inner-bg);
}

/*
 * Tekstkleur hoort op --admin-main-text (of --admin-fg), niet op --admin-inner-bg
 * (inner-bg is oppervlak/kaartachtergrond; in day-theme is dat vaak #fff → witte “tekst”).
 */

/* Main content: expliciete basis zodat kind-elementen zonder eigen color leesbaar blijven */
html[data-admin-theme] .main-content-v2-inner {
  color: var(--admin-main-text);
}