/**
 * Bootstrap Theme CSS Variables - Centralized Color System
 * 
 * Based on Bootstrap 5.3 Color Modes:
 * https://getbootstrap.com/docs/5.3/customize/color-modes/
 * 
 * This file provides a comprehensive centralized theme system that:
 * - Supports light and dark color modes
 * - Uses CSS custom properties for all colors
 * - Integrates with Bootstrap's color mode system
 * - Allows site-specific theme overrides via SiteTheme model
 * 
 * All colors should reference these variables - no hardcoded colors allowed.
 */

/* ============================================
   LIGHT MODE (Default)
   ============================================ */
:root {
  /* Theme Colors - Can be overridden by SiteTheme model */
  /* Default fallback is white (#ffffff) for sites without a theme */
  --theme-primary: var(--site-theme-primary, #ffffff);
  --theme-primary-rgb: var(--site-theme-primary-rgb, 255, 255, 255);
  --theme-secondary: var(--site-theme-secondary, #6c757d);
  --theme-secondary-rgb: var(--site-theme-secondary-rgb, 108, 117, 125);
  --theme-accent: var(--site-theme-accent, #198754);
  --theme-accent-rgb: var(--site-theme-accent-rgb, 25, 135, 84);
  
  /* Bootstrap Primary Color System */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-primary-bg-subtle: var(--theme-primary-bg-subtle, #cfe2ff);
  --bs-primary-border-subtle: var(--theme-primary-border-subtle, #9ec5fe);
  --bs-primary-text-emphasis: var(--theme-primary-text-emphasis, #052c65);
  
  /* Bootstrap Secondary Color System */
  --bs-secondary: var(--theme-secondary);
  --bs-secondary-rgb: var(--theme-secondary-rgb);
  --bs-secondary-bg-subtle: var(--theme-secondary-bg-subtle, #e2e3e5);
  --bs-secondary-border-subtle: var(--theme-secondary-border-subtle, #adb5bd);
  --bs-secondary-text-emphasis: var(--theme-secondary-text-emphasis, #41464b);
  
  /* Bootstrap Success (uses accent) */
  --bs-success: var(--theme-accent);
  --bs-success-rgb: var(--theme-accent-rgb);
  
  /* Body Colors */
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  /* Light-mode body background; can be overridden per-site via CSS variable */
  --bs-body-bg: var(--site-theme-body-bg, #f5f5f7);
  --bs-body-bg-rgb: 245, 245, 247;
  --bs-body-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-body-secondary-bg: #e9ecef;
  --bs-body-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-body-tertiary-bg: #f8f9fa;
  --bs-body-emphasis-color: #000000;
  --bs-body-emphasis-color-rgb: 0, 0, 0;
  
  /* Border Colors */
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  
  /* 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: inherit;
  
  /* Code Colors */
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  
  /* Form Colors */
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
  
  /* Border Radius */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.5rem;
  --bs-border-radius-pill: 50rem;
  
  /* Font Family */
  --bs-font-family: var(--theme-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --bs-body-font-family: var(--bs-font-family);
  
  /* Shadows */
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Custom Theme Variables */
  --theme-overlay-opacity: 0.2;
  --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
  --theme-text-muted: var(--bs-body-secondary-color);
  --theme-bg-subtle: var(--bs-body-tertiary-bg);
  --theme-border-subtle: var(--bs-border-color);
  --theme-glassy-bg-rgb: 245, 245, 247;
}

/* ============================================
   DARK MODE
   ============================================ */
[data-bs-theme="dark"] {
  /* Bootstrap Primary Color System - Dark Mode */
  --bs-primary: var(--theme-primary-dark, var(--theme-primary));
  --bs-primary-rgb: var(--theme-primary-rgb-dark, var(--theme-primary-rgb));
  --bs-primary-bg-subtle: var(--theme-primary-bg-subtle-dark, rgba(var(--bs-primary-rgb), 0.25));
  --bs-primary-border-subtle: var(--theme-primary-border-subtle-dark, rgba(var(--bs-primary-rgb), 0.5));
  --bs-primary-text-emphasis: var(--theme-primary-text-emphasis-dark, rgba(var(--bs-primary-rgb), 0.8));
  
  /* Bootstrap Secondary Color System - Dark Mode */
  --bs-secondary: var(--theme-secondary-dark, var(--theme-secondary));
  --bs-secondary-rgb: var(--theme-secondary-rgb-dark, var(--theme-secondary-rgb));
  --bs-secondary-bg-subtle: var(--theme-secondary-bg-subtle-dark, rgba(var(--bs-secondary-rgb), 0.25));
  --bs-secondary-border-subtle: var(--theme-secondary-border-subtle-dark, rgba(var(--bs-secondary-rgb), 0.5));
  --bs-secondary-text-emphasis: var(--theme-secondary-text-emphasis-dark, rgba(var(--bs-secondary-rgb), 0.8));
  
  /* Body Colors - Dark Mode */
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-body-secondary-color: rgba(173, 181, 189, 0.75);
  --bs-body-secondary-bg: #343a40;
  --bs-body-tertiary-color: rgba(173, 181, 189, 0.5);
  --bs-body-tertiary-bg: #2b3035;
  --bs-body-emphasis-color: #ffffff;
  --bs-body-emphasis-color-rgb: 255, 255, 255;
  
  /* Border Colors - Dark Mode */
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  
  /* Link Colors - Dark Mode */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary-text-emphasis);
  
  /* Heading Colors - Dark Mode */
  --bs-heading-color: inherit;
  
  /* Code Colors - Dark Mode */
  --bs-code-color: #e685b5;
  --bs-highlight-color: var(--bs-body-color);
  --bs-highlight-bg: #664d03;
  
  /* Form Colors - Dark Mode */
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
  
  /* Custom Theme Variables - Dark Mode */
  --theme-overlay-opacity: 0.4;
  --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
  --theme-text-muted: var(--bs-body-secondary-color);
  --theme-bg-subtle: var(--bs-body-tertiary-bg);
  --theme-border-subtle: var(--bs-border-color);
  --theme-glassy-bg-rgb: 33, 37, 41;
}

/* ============================================
   AUTO MODE (Media Query Based)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    /* Same as dark mode above */
    --bs-body-color: #adb5bd;
    --bs-body-color-rgb: 173, 181, 189;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-body-secondary-color: rgba(173, 181, 189, 0.75);
    --bs-body-secondary-bg: #343a40;
    --bs-body-tertiary-color: rgba(173, 181, 189, 0.5);
    --bs-body-tertiary-bg: #2b3035;
    --bs-body-emphasis-color: #ffffff;
    --bs-body-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-code-color: #e685b5;
    --bs-highlight-color: var(--bs-body-color);
    --bs-highlight-bg: #664d03;
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --theme-overlay-opacity: 0.4;
    --theme-overlay-bg: rgba(0, 0, 0, var(--theme-overlay-opacity));
    --theme-text-muted: var(--bs-body-secondary-color);
    --theme-bg-subtle: var(--bs-body-tertiary-bg);
    --theme-border-subtle: var(--bs-border-color);
    --theme-glassy-bg-rgb: 33, 37, 41;
  }
}

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

/* Primary Buttons - Use theme colors */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  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);
}