/**
 * Bootstrap Theme CSS Variables - Centralized Color System
 *
 * Based on Bootstrap 5.3 Color Modes:
 * https://getbootstrap.com/docs/5.3/customize/color-modes/
 *
 * Zoekee semantic tokens (--zk-*) are the platform visual contract.
 * SiteTheme may override brand forest / chrome / leaf via --site-theme-*.
 * All components should reference semantic or Bootstrap variables — not raw hex.
 */

/* ============================================
   LIGHT MODE (Default)
   ============================================ */
:root {
  /* ---- Zoekee semantic palette (platform visual contract) ---- */
  --zk-surface-primary: #ffffff;
  --zk-surface-secondary: #f5f5f5;
  --zk-surface-inverse: #121212;
  --zk-text-primary: #121212;
  --zk-text-secondary: #666666;
  --zk-brand-forest: #1b4332;
  --zk-brand-forest-rgb: 27, 67, 50;
  --zk-brand-leaf: #68b824;
  --zk-brand-leaf-rgb: 104, 184, 36;
  --zk-button-primary-bg: #121212;
  --zk-button-primary-text: #ffffff;
  --zk-chrome: #121212;
  --zk-chrome-rgb: 18, 18, 18;
  --zk-border: #e6e6e6;
  --zk-radius-card: 0.75rem;
  --zk-radius-control: 0.625rem;
  --zk-radius-pill: 50rem;

  /* Theme Colors - Can be overridden by SiteTheme model */
  --theme-primary: var(--site-theme-primary, var(--zk-brand-forest));
  --theme-primary-rgb: var(--site-theme-primary-rgb, var(--zk-brand-forest-rgb));
  --theme-secondary: var(--site-theme-secondary, var(--zk-chrome));
  --theme-secondary-rgb: var(--site-theme-secondary-rgb, var(--zk-chrome-rgb));
  --theme-accent: var(--site-theme-accent, var(--zk-brand-leaf));
  --theme-accent-rgb: var(--site-theme-accent-rgb, var(--zk-brand-leaf-rgb));

  /* Bootstrap Primary Color System — forest brand */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-primary-bg-subtle: var(--theme-primary-bg-subtle, #e8f0eb);
  --bs-primary-border-subtle: var(--theme-primary-border-subtle, #b7cfc0);
  --bs-primary-text-emphasis: var(--theme-primary-text-emphasis, #0f2a1f);

  /* Bootstrap Secondary Color System — chrome / ink */
  --bs-secondary: var(--theme-secondary);
  --bs-secondary-rgb: var(--theme-secondary-rgb);
  --bs-secondary-bg-subtle: var(--theme-secondary-bg-subtle, #ececec);
  --bs-secondary-border-subtle: var(--theme-secondary-border-subtle, #c4c4c4);
  --bs-secondary-text-emphasis: var(--theme-secondary-text-emphasis, #333333);

  /* Bootstrap Success (uses leaf accent) */
  --bs-success: var(--theme-accent);
  --bs-success-rgb: var(--theme-accent-rgb);

  /* Body Colors */
  --bs-body-color: var(--zk-text-primary);
  --bs-body-color-rgb: 18, 18, 18;
  --bs-body-bg: var(--site-theme-body-bg, var(--zk-surface-primary));
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-secondary-color: var(--zk-text-secondary);
  --bs-body-secondary-bg: var(--zk-surface-secondary);
  --bs-body-tertiary-color: rgba(18, 18, 18, 0.5);
  --bs-body-tertiary-bg: var(--zk-surface-secondary);
  --bs-body-emphasis-color: #000000;
  --bs-body-emphasis-color-rgb: 0, 0, 0;

  /* Border Colors */
  --bs-border-color: var(--zk-border);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.12);

  /* Link Colors */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary-text-emphasis);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color-rgb: var(--bs-primary-rgb);

  /* Heading Colors */
  --bs-heading-color: var(--zk-text-primary);

  /* Code Colors */
  --bs-code-color: #b02a6b;
  --bs-highlight-color: var(--zk-text-primary);
  --bs-highlight-bg: #fff3cd;

  /* Form Colors */
  --bs-form-valid-color: var(--zk-brand-forest);
  --bs-form-valid-border-color: var(--zk-brand-forest);
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;

  /* Border Radius — compact cards / controls */
  --bs-border-radius: var(--zk-radius-control);
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: var(--zk-radius-card);
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.25rem;
  --bs-border-radius-pill: var(--zk-radius-pill);

  /* Font Family */
  --bs-font-family: var(--theme-font-family, "Plus Jakarta Sans", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --bs-body-font-family: var(--bs-font-family);

  /* Shadows — soft on cream/white */
  --bs-box-shadow-sm: 0 1px 3px rgba(18, 18, 18, 0.06);
  --bs-box-shadow: 0 8px 24px rgba(18, 18, 18, 0.08);
  --bs-box-shadow-lg: 0 16px 40px rgba(18, 18, 18, 0.12);

  /* Custom Theme Variables */
  --theme-overlay-opacity: 0.2;
  --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
  --theme-text-muted: var(--zk-text-secondary);
  --theme-bg-subtle: var(--zk-surface-secondary);
  --theme-border-subtle: var(--zk-border);
  --theme-glassy-bg-rgb: 255, 255, 255;

  /* Chrome aliases for nav/footer */
  --zk-nav-surface: rgba(255, 255, 255, 0.92);
  --zk-nav-surface-solid: #ffffff;
  --zk-nav-border: rgba(18, 18, 18, 0.08);
  --zk-nav-text: var(--zk-text-primary);
  --zk-nav-muted: var(--zk-text-secondary);
  --zk-footer-surface: var(--zk-surface-inverse);
  --zk-footer-text: rgba(245, 245, 247, 0.92);
  --zk-footer-muted: rgba(245, 245, 247, 0.68);
}

/* ============================================
   DARK MODE
   ============================================ */
[data-bs-theme="dark"] {
  --zk-surface-primary: #0b100e;
  --zk-surface-secondary: #141a16;
  --zk-surface-inverse: #050705;
  --zk-text-primary: #f4f7f1;
  --zk-text-secondary: rgba(244, 247, 241, 0.68);
  --zk-brand-forest: #7ed321;
  --zk-brand-forest-rgb: 126, 211, 33;
  --zk-brand-leaf: #68b824;
  --zk-brand-leaf-rgb: 104, 184, 36;
  --zk-button-primary-bg: #f4f7f1;
  --zk-button-primary-text: #0b100e;
  --zk-chrome: #050705;
  --zk-chrome-rgb: 5, 7, 5;
  --zk-border: rgba(255, 255, 255, 0.1);

  --zk-nav-surface: rgba(11, 16, 14, 0.88);
  --zk-nav-surface-solid: rgba(11, 16, 14, 0.96);
  --zk-nav-border: rgba(255, 255, 255, 0.08);
  --zk-nav-text: rgba(244, 247, 241, 0.92);
  --zk-nav-muted: rgba(244, 247, 241, 0.68);
  --zk-footer-surface: #050705;
  --zk-footer-text: rgba(244, 247, 241, 0.92);
  --zk-footer-muted: rgba(244, 247, 241, 0.68);

  /* Prefer leaf-forward brand on dark surfaces when SiteTheme primary is forest */
  --bs-primary: var(--theme-accent, var(--zk-brand-leaf));
  --bs-primary-rgb: var(--theme-accent-rgb, var(--zk-brand-leaf-rgb));
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.18);
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.4);
  --bs-primary-text-emphasis: #d4f5a8;

  --bs-secondary: #aeb5ad;
  --bs-secondary-rgb: 174, 181, 173;
  --bs-secondary-bg-subtle: rgba(174, 181, 173, 0.18);
  --bs-secondary-border-subtle: rgba(174, 181, 173, 0.35);
  --bs-secondary-text-emphasis: #e8ede6;

  --bs-body-color: var(--zk-text-primary);
  --bs-body-color-rgb: 244, 247, 241;
  --bs-body-bg: var(--zk-surface-primary);
  --bs-body-bg-rgb: 11, 16, 14;
  --bs-body-secondary-color: var(--zk-text-secondary);
  --bs-body-secondary-bg: var(--zk-surface-secondary);
  --bs-body-tertiary-color: rgba(244, 247, 241, 0.5);
  --bs-body-tertiary-bg: #1a221c;
  --bs-body-emphasis-color: #ffffff;
  --bs-body-emphasis-color-rgb: 255, 255, 255;

  --bs-border-color: var(--zk-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary-text-emphasis);

  --bs-heading-color: var(--zk-text-primary);

  --bs-code-color: #e685b5;
  --bs-highlight-color: var(--bs-body-color);
  --bs-highlight-bg: #664d03;

  --bs-form-valid-color: #8fdf5a;
  --bs-form-valid-border-color: #8fdf5a;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;

  --theme-overlay-opacity: 0.45;
  --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
  --theme-text-muted: var(--zk-text-secondary);
  --theme-bg-subtle: var(--zk-surface-secondary);
  --theme-border-subtle: var(--zk-border);
  --theme-glassy-bg-rgb: 11, 16, 14;

  --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --bs-box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  --bs-box-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
}

/* ============================================
   AUTO MODE (Media Query Based)
   color-modes.js normally sets data-bs-theme; this is a fallback.
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --zk-surface-primary: #0b100e;
    --zk-surface-secondary: #141a16;
    --zk-surface-inverse: #050705;
    --zk-text-primary: #f4f7f1;
    --zk-text-secondary: rgba(244, 247, 241, 0.68);
    --zk-button-primary-bg: #f4f7f1;
    --zk-button-primary-text: #0b100e;
    --zk-border: rgba(255, 255, 255, 0.1);
    --zk-nav-surface: rgba(11, 16, 14, 0.88);
    --zk-nav-surface-solid: rgba(11, 16, 14, 0.96);
    --zk-nav-border: rgba(255, 255, 255, 0.08);
    --zk-nav-text: rgba(244, 247, 241, 0.92);
    --zk-nav-muted: rgba(244, 247, 241, 0.68);
    --zk-footer-surface: #050705;
    --bs-body-color: #f4f7f1;
    --bs-body-color-rgb: 244, 247, 241;
    --bs-body-bg: #0b100e;
    --bs-body-bg-rgb: 11, 16, 14;
    --bs-body-secondary-color: rgba(244, 247, 241, 0.68);
    --bs-body-secondary-bg: #141a16;
    --bs-body-tertiary-color: rgba(244, 247, 241, 0.5);
    --bs-body-tertiary-bg: #1a221c;
    --bs-body-emphasis-color: #ffffff;
    --bs-body-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-primary: #68b824;
    --bs-primary-rgb: 104, 184, 36;
    --theme-overlay-opacity: 0.45;
    --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
    --theme-text-muted: rgba(244, 247, 241, 0.68);
    --theme-bg-subtle: #141a16;
    --theme-border-subtle: rgba(255, 255, 255, 0.1);
    --theme-glassy-bg-rgb: 11, 16, 14;
  }
}

/* ============================================
   BOOTSTRAP COMPONENT OVERRIDES
   Ensure all Bootstrap components use CSS variables
   ============================================ */

/* Primary Buttons — ink / inverse CTAs (mockup contract) */
.btn-primary {
  --bs-btn-color: var(--zk-button-primary-text);
  --bs-btn-bg: var(--zk-button-primary-bg);
  --bs-btn-border-color: var(--zk-button-primary-bg);
  --bs-btn-hover-bg: color-mix(in srgb, var(--zk-button-primary-bg) 88%, var(--zk-brand-forest));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zk-button-primary-bg) 88%, var(--zk-brand-forest));
  --bs-btn-active-bg: color-mix(in srgb, var(--zk-button-primary-bg) 78%, var(--zk-brand-forest));
  --bs-btn-active-border-color: color-mix(in srgb, var(--zk-button-primary-bg) 78%, var(--zk-brand-forest));
  --bs-btn-disabled-bg: var(--zk-button-primary-bg);
  --bs-btn-disabled-border-color: var(--zk-button-primary-bg);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

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

/* Outline Primary Buttons */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

.btn-outline-primary:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: #fff;
}

/* Secondary Buttons */
.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 85%, black);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

/* Success Buttons (uses accent) */
.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, black);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

/* Links using primary color */
a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* Text utilities */
.text-primary {
  color: var(--bs-primary) !important;
}

/* Background utilities */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Cards - Let Bootstrap handle backgrounds, only set border */
.card {
  border-color: var(--bs-border-color);
}

/* Modals */
.modal-content {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.modal-header {
  border-bottom-color: var(--bs-border-color);
}

.modal-footer {
  border-top-color: var(--bs-border-color);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.dropdown-item {
  color: var(--bs-body-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-body-tertiary-bg);
  color: var(--bs-body-color);
}

/* Form Controls */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.form-control::placeholder {
  color: var(--bs-body-secondary-color);
}

.input-group-text {
  background-color: var(--bs-body-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* 
 * DO NOT override Bootstrap utility classes like bg-white, bg-light, bg-dark, text-white, etc.
 * These have specific meanings and should retain their original behavior.
 * Bootstrap 5.3 handles dark mode automatically for semantic classes.
 */

/* Alerts */
.alert {
  border-color: var(--bs-border-color);
}

.alert-light {
  background-color: var(--bs-body-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Navs */
.nav-tabs .nav-link {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

/* List Groups */
.list-group-item {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item.active {
  color: var(--bs-body-secondary-color);
}

/* Pagination */
.page-link {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.page-link:hover {
  background-color: var(--bs-body-tertiary-bg);
  color: var(--bs-body-color);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Tables */
.table {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bs-body-tertiary-bg);
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--bs-body-secondary-bg);
}

/* Offcanvas */
.offcanvas {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.offcanvas-header {
  border-bottom-color: var(--bs-border-color);
}

/* Popovers */
.popover {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.popover-header {
  background-color: var(--bs-body-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}

/* Tooltips */
.tooltip .tooltip-inner {
  background-color: var(--bs-body-emphasis-color);
  color: var(--bs-body-bg);
}

/* Progress Bars */
.progress {
  background-color: var(--bs-body-tertiary-bg);
}

/* Badges */
.badge {
  color: var(--bs-body-bg);
}

.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/* Close Button - Default (dark X on light backgrounds) */
.btn-close {
  filter: none;
}

/* Close Button - White variant for dark/colored backgrounds */
.btn-close-white,
.text-bg-primary .btn-close,
.text-bg-dark .btn-close,
.bg-primary .btn-close,
.bg-dark .btn-close,
.navbar-dark .btn-close,
.offcanvas.text-bg-primary .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark mode: invert close buttons on light backgrounds */
[data-bs-theme="dark"] .btn-close:not(.btn-close-white) {
  filter: invert(1) grayscale(100%) brightness(200%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}

/* ============================================
   FROSTED GLASS UTILITIES
   Standardized glassmorphism effects for the platform.
   Use these utility classes instead of custom backdrop-filter.
   ============================================ */

/* Light frosted glass - for overlays on images */
.glass-light {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark frosted glass - for overlays on light backgrounds */
.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Theme-aware frosted glass - adapts to light/dark mode */
.glass {
  background: rgba(var(--theme-glassy-bg-rgb), 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bs-border-color-translucent);
}

/* Subtle glass - minimal blur, mostly transparency */
.glass-subtle {
  background: rgba(var(--theme-glassy-bg-rgb), 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Strong glass - heavy blur for modals/overlays */
.glass-strong {
  background: rgba(var(--theme-glassy-bg-rgb), 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--bs-border-color-translucent);
}

 .btn-glass {
   color: #ffffff;
   background: rgba(255, 255, 255, 0.14);
   border: 1px solid rgba(255, 255, 255, 0.24);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
 }

 .btn-glass:hover,
 .btn-glass:focus {
   color: #ffffff;
   background: rgba(255, 255, 255, 0.22);
   border-color: rgba(255, 255, 255, 0.32);
 }

/* Dark mode adjustments for glass */
[data-bs-theme="dark"] .glass-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .glass-dark {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.05);
}