/**
 * Triangle Seminars - Theme System
 * Central color management for consistent theming across the application
 */

/* ===== DEFAULT THEME (Dark) ===== */
/* This is the original Triangle Seminars dark theme */
:root, [data-theme="dark"] {
    /* === Core Brand Colors === */
    --color-brand-primary: #FFD658;      /* Triangle Gold - Main brand color */
    --color-brand-secondary: #D9A500;    /* Deep Gold - Hover states, emphasis */
    --color-brand-tertiary: #FFE6A6;     /* Soft Gold - Light accents, backgrounds */
    --color-brand-primary-alpha: rgba(255, 214, 88, 0.25); /* Semi-transparent brand */
    
    /* === Background Colors === */
    --color-bg-primary: #0B0B0B;         /* Main background - Deep black (original) */
    --color-bg-secondary: #1a1a1a;       /* Cards, panels, secondary backgrounds */
    --color-bg-tertiary: #2d2d2d;        /* Elevated elements, modals */
    --color-bg-accent: #232323;          /* Slight variation for hover states (original --border) */
    
    /* === Text Colors === */
    --color-text-primary: #F5F5F5;       /* Main text color - Off white (original) */
    --color-text-secondary: #B8B8B8;     /* Muted text, descriptions (original --muted) */
    --color-text-tertiary: #8A8A8A;      /* Subtle text, placeholders */
    --color-text-inverse: #0B0B0B;       /* Text on light backgrounds */
    --color-text-brand: var(--color-brand-primary);  /* Brand colored text */
    
    /* === Border & Divider Colors === */
    --color-border-primary: #232323;     /* Main borders (original --border) */
    --color-border-secondary: #454545;   /* Subtle borders */
    --color-border-accent: var(--color-brand-primary); /* Accent borders */
    
    /* === Status Colors === */
    --color-success: #22c55e;            /* Success states */
    --color-success-bg: rgba(34, 197, 94, 0.1);
    --color-warning: #f59e0b;            /* Warning states */
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-error: #ef4444;              /* Error states */
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-info: #3b82f6;               /* Info states */
    --color-info-bg: rgba(59, 130, 246, 0.1);
    
    /* === Interactive Colors === */
    --color-link: var(--color-brand-primary);
    --color-link-hover: var(--color-brand-secondary);
    --color-button-primary: var(--color-brand-primary);
    --color-button-primary-hover: var(--color-brand-secondary);
    --color-button-primary-text: var(--color-text-inverse);
    
    /* === Form Colors === */
    --color-input-bg: var(--color-bg-secondary);
    --color-input-border: var(--color-border-accent);
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-text-tertiary);
    --color-input-focus-shadow: rgba(255, 214, 88, 0.25);
    
    /* === Component-Specific Colors === */
    --color-navbar-bg: var(--color-bg-primary);
    --color-footer-bg: var(--color-bg-secondary);
    --color-card-bg: var(--color-bg-tertiary);
    --color-modal-bg: var(--color-bg-primary);
    --color-overlay-bg: rgba(0, 0, 0, 0.8);
    
    /* === Email & Notification Colors === */
    --color-email-bg: #f4f4f4;
    --color-email-text: #333333;
    --color-email-header-bg: var(--color-bg-primary);
    --color-email-header-text: var(--color-brand-primary);
    --color-email-footer-bg: #f0f0f0;
    --color-email-footer-text: #666666;
    --color-email-seminar-bg: #f9f9f9;
    --color-email-seminar-border: var(--color-brand-primary);
    --color-region-header-bg: var(--color-brand-tertiary);
    --color-region-header-text: var(--color-text-inverse);
    
    /* === Debug & Development Colors === */
    --color-debug-visible: rgba(34, 197, 94, 0.9);     /* Green - visible elements */
    --color-debug-hidden: rgba(255, 59, 59, 0.9);      /* Red - hidden elements */
    --color-debug-border-visible: #22c55e;
    --color-debug-border-hidden: #ff3b3b;
    --color-debug-indicator: #ff6b6b;
    
    /* === Gradients === */
    --gradient-brand: linear-gradient(180deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
    --gradient-bg: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    
    /* === Shadows === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-brand: 0 4px 14px 0 rgba(255, 214, 88, 0.25);
}

/* ===== LIGHT THEME OVERRIDE ===== */
[data-theme="light"] {
/* === Core Brand Colors (unchanged) === */
--color-brand-primary: #D9A500;
--color-brand-secondary: #B8860B;
--color-brand-tertiary: #F5E6A3;
--color-brand-primary-alpha: rgba(217, 165, 0, 0.25);

/* === Background Colors (Porcelain–Sage Neutrals) === */
--color-bg-primary:   #f7f9f8; /* cool porcelain base, minimal yellow */
--color-bg-secondary: #f2f4f3; /* panels/sidebars */
--color-bg-tertiary:  #e6e9e7; /* elevated strips */
--color-bg-accent:    #fafcfb; /* hover/active subtle lift */

/* === Text Colors (neutral, crisp) === */
--color-text-primary:   #1e1f20; /* deep neutral charcoal */
--color-text-secondary: #4b5254; /* cool gray */
--color-text-tertiary:  #6a7376; /* muted gray */
--color-text-inverse:   #ffffff;
--color-text-brand:     var(--color-brand-secondary);

/* === Borders === */
--color-border-primary:   #e3e6e5; /* clean, cool border */
--color-border-secondary: #f1f3f2;
--color-border-accent:    var(--color-brand-primary);

/* === Form Components === */
--color-input-bg:     #ffffff; 
--color-input-border: #d3d7d6;
--color-input-text:   var(--color-text-primary);

/* === Components === */
--color-navbar-bg: #f6f8f7;
--color-footer-bg: #f5f7f6;
--color-card-bg:   #ffffff;   /* crisp lift against porcelain bg */
--color-overlay-bg: rgba(0, 0, 0, 0.5);

}

/* ===== ACCESSIBILITY & HIGH CONTRAST THEME ===== */
[data-theme="high-contrast"] {
    --color-bg-primary: #000000;
    --color-bg-secondary: #1a1a1a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #ffffff;
    --color-brand-primary: #ffff00;
    --color-brand-secondary: #ffcc00;
    --color-border-primary: #ffffff;
    --color-link: #ffff00;
    --color-link-hover: #ffcc00;
}


/* ===== WARM x COOL CONTRAST THEME ===== */
[data-theme="warm"] {
  /* === Core Brand Colors (unchanged) === */
  --color-brand-primary: #ce8e49;      /* Warm gold - identity/buttons */
  --color-brand-secondary: #b5723a;    /* Darker warm gold - hover states */
  --color-brand-tertiary: #e4b570;     /* Light warm gold - accents */
  --color-brand-primary-alpha: rgba(206, 142, 73, 0.25);

  /* === Background Colors === */
  --color-bg-primary:   #faf8f5;  /* neutral porcelain base (not yellow) */
  --color-bg-secondary: #cfe0ec;  /* refined cool blue (softer than #c9dae9) */
  --color-bg-tertiary:  #f3e6e3;  /* pale clay/rose for warm contrast */
  --color-bg-accent:    #fff6ec;  /* subtle warm lift for hovers/stripes */

  /* === Text Colors === */
  --color-text-primary:   #1f1f1f;  /* crisp charcoal */
  --color-text-secondary: #4b5157;  /* neutral cool gray */
  --color-text-tertiary:  #6f767d;  /* muted gray */
  --color-text-inverse:   #ffffff;
  --color-text-brand:     var(--color-brand-secondary);

  /* === Border & Divider Colors === */
  --color-border-primary:   #e4e6ea;  /* clean neutral */
  --color-border-secondary: #f0f1f3;  /* very light divider */
  --color-border-accent:    var(--color-brand-primary);

  /* === Status Colors (tuned to the palette) === */
  --color-success:    #2f8f4e;
  --color-success-bg: rgba(47, 143, 78, 0.10);
  --color-warning:    #c67a0b;
  --color-warning-bg: rgba(198, 122, 11, 0.12);
  --color-error:      #c8523c;  /* warm red */
  --color-error-bg:   rgba(200, 82, 60, 0.10);
  --color-info:       #3f74a8;  /* desaturated blue */
  --color-info-bg:    rgba(63, 116, 168, 0.10);

  /* === Interactive Colors === */
  --color-link:                 var(--color-brand-primary);
  --color-link-hover:           var(--color-brand-secondary);
  --color-button-primary:       var(--color-brand-primary);
  --color-button-primary-hover: var(--color-brand-secondary);
  --color-button-primary-text:  var(--color-text-inverse);

  /* === Form Colors === */
  --color-input-bg:           #ffffff;
  --color-input-border:       #d6d9dd;
  --color-input-text:         var(--color-text-primary);
  --color-input-placeholder:  #949aa1;
  --color-input-focus-shadow: rgba(206, 142, 73, 0.25);

  /* === Component-Specific Colors === */
  --color-navbar-bg:  #f7f4f1;   /* distinct from primary */
  --color-footer-bg:  #eaeff3;   /* faint cool echo of secondary */
  --color-card-bg:    #ffffff;   /* crisp lift on porcelain */
  --color-modal-bg:   #ffffff;
  --color-overlay-bg: rgba(0, 0, 0, 0.5);

  /* === Email & Notification Colors === */
  --color-email-bg:            #ffffff;
  --color-email-text:          var(--color-text-primary);
  --color-email-header-bg:     #e9f1f7;   /* light blue header strip */
  --color-email-header-text:   var(--color-brand-primary);
  --color-email-footer-bg:     #fbfaf8;
  --color-email-footer-text:   var(--color-text-secondary);
  --color-email-seminar-bg:    #fff7f1;   /* warm accent box */
  --color-email-seminar-border: var(--color-brand-primary);
  --color-region-header-bg:    #f6e0da;   /* soft rose banner */
  --color-region-header-text:  var(--color-text-primary);

  /* === Gradients & Shadows === */
  --gradient-brand: linear-gradient(180deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
  --gradient-bg:    linear-gradient(180deg, #faf8f5 0%, #f0f4f7 100%);
  --shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:      0 4px 10px -3px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 14px 28px -8px rgba(0, 0, 0, 0.12);
  --shadow-brand:   0 6px 18px 0 rgba(206, 142, 73, 0.22);
}


/* ===== UTILITY CLASSES FOR THEME CONSISTENCY ===== */

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

/* Text utilities */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-brand { color: var(--color-text-brand) !important; }
.text-inverse { color: var(--color-text-inverse) !important; }

/* Border utilities */
.border-primary { border-color: var(--color-border-primary) !important; }
.border-accent { border-color: var(--color-border-accent) !important; }

/* Component-specific utilities */
.triangle-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
}

.triangle-button-primary {
    background-color: var(--color-button-primary);
    border-color: var(--color-button-primary);
    color: var(--color-button-primary-text);
}

.triangle-button-primary:hover {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
    color: var(--color-button-primary-text);
}

.triangle-input {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-input-text);
}

.triangle-input:focus {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-input-text);
    box-shadow: 0 0 0 0.2rem var(--color-input-focus-shadow);
}

.triangle-input::placeholder {
    color: var(--color-input-placeholder);
}

/* Region badge styling */
.region-badge {
    color: var(--color-brand-primary) !important;
}

/* Navbar toggler theme-aware styling */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F5F5F5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Light theme - darker toggler icon */
[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Warm theme - darker toggler icon */
[data-theme="warm"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233e3e3e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Prevent line breaks between icons and text in buttons and links */
.btn, .dropdown-item, .navbar-nav .nav-link {
    white-space: nowrap;
}

/* Specific patterns for common icon-text combinations */
.btn:has-text("+"),
.btn:has-text("→"),
.btn:has-text("←"),
.btn:has-text("↑"),
.btn:has-text("↓"),
.dropdown-item:has-text("+"),
.dropdown-item:has-text("→"),
.dropdown-item:has-text("←") {
    white-space: nowrap;
}

/* Mobile theme toggle styling */
#mobileThemeToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#mobileThemeToggle .theme-icon {
    font-size: 1.1em;
}

#mobileThemeToggle .theme-text {
    font-size: 0.9em;
}

/* Offcanvas mobile menu layout fixes */
.offcanvas-body {
    overflow-x: hidden;
}

.offcanvas .auth-links {
    min-width: 0; /* Allow flex items to shrink */
}

.offcanvas .auth-links .btn {
    min-width: 0; /* Prevent button min-width issues */
    word-wrap: break-word;
}

/* Ensure buttons don't cause horizontal scroll */
.offcanvas .btn {
    max-width: 100%;
    white-space: normal; /* Allow text wrapping in mobile menu */
}

/* ===== LATEX / MATH RENDERING STYLES ===== */

/* MathJax LaTeX styling - inherits theme colors */
.tex2jax_process {
    color: var(--color-text-primary);
}

/* Inline math expressions */
.MathJax {
    color: var(--color-text-primary) !important;
    font-size: inherit !important;
}

/* Display math expressions */
.MathJax_Display {
    color: var(--color-text-primary) !important;
    text-align: center !important;
    margin: 1em 0 !important;
}

/* Math preview/processing elements */
.MathJax_Preview {
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Abstract containers with LaTeX content */
.abstract-with-math {
    line-height: 1.6;
    font-size: 0.95em;
}

.abstract-with-math .MathJax {
    font-size: 1em !important;
}

/* LaTeX in titles should inherit title colors */
.seminar-title .MathJax,
.seminar-title .tex2jax_process {
    color: var(--color-brand-primary) !important;
}

.seminar-card.compact .seminar-title .MathJax,
.seminar-card.compact .seminar-title .tex2jax_process {
    color: var(--color-brand-primary) !important;
}

/* Ensure math expressions are readable in all themes */
[data-theme="high-contrast"] .MathJax {
    color: #ffffff !important;
}

[data-theme="light"] .MathJax {
    color: var(--color-text-primary) !important;
}

[data-theme="warm"] .MathJax {
    color: var(--color-text-primary) !important;
}

/* Theme-specific overrides for LaTeX in titles - ensure brand color is used */
[data-theme="high-contrast"] .seminar-title .MathJax,
[data-theme="high-contrast"] .seminar-title .tex2jax_process,
[data-theme="high-contrast"] .seminar-card.compact .seminar-title .MathJax,
[data-theme="high-contrast"] .seminar-card.compact .seminar-title .tex2jax_process {
    color: var(--color-brand-primary) !important;
}

[data-theme="light"] .seminar-title .MathJax,
[data-theme="light"] .seminar-title .tex2jax_process,
[data-theme="light"] .seminar-card.compact .seminar-title .MathJax,
[data-theme="light"] .seminar-card.compact .seminar-title .tex2jax_process {
    color: var(--color-brand-primary) !important;
}

[data-theme="warm"] .seminar-title .MathJax,
[data-theme="warm"] .seminar-title .tex2jax_process,
[data-theme="warm"] .seminar-card.compact .seminar-title .MathJax,
[data-theme="warm"] .seminar-card.compact .seminar-title .tex2jax_process {
    color: var(--color-brand-primary) !important;
}

/* ===== THEME SWITCHING UTILITIES ===== */

/* JavaScript can use these classes to detect current theme */
.theme-indicator {
    display: none;
}

.theme-indicator::before {
    content: "dark";
}

[data-theme="light"] .theme-indicator::before {
    content: "light";
}

[data-theme="high-contrast"] .theme-indicator::before {
    content: "high-contrast";
}

/* ===== RESPONSIVE THEME ADJUSTMENTS ===== */

@media (prefers-reduced-motion: reduce) {
    /* Respect user's motion preferences */
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ===== LEGACY SUPPORT FALLBACKS ===== */

/* For browsers that don't support CSS custom properties */
@supports not (color: var(--test)) {
    body {
        background-color: #0B0B0B;
        color: #F5F5F5;
    }
    
    .triangle-card {
        background-color: #2d2d2d;
        border-color: #FFD658;
    }
    
    .triangle-button-primary {
        background-color: #FFD658;
        color: #0B0B0B;
    }
}

/* ===== CRITICAL OVERRIDES FOR BOOTSTRAP ===== */
/* Force theme backgrounds over any Bootstrap defaults */
html {
    background-color: var(--color-bg-primary) !important;
}

body {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

/* ===== WEEK VIEW DAY GROUPING STYLES ===== */

/* Day group container */
.day-group {
    margin-bottom: 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Day header styling */
.day-header {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-surface-secondary);
    border-radius: 8px 8px 0 0;
}

.day-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.today-badge {
    background: var(--color-brand-primary);
    color: var(--color-surface-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Adjust seminar cards within day groups */
.day-group .seminar-card {
    margin-bottom: 1rem;
    border-radius: 0 0 8px 8px;
}

.day-group .seminar-card:first-of-type {
    border-radius: 0;
}

.day-group .seminar-card:last-of-type {
    border-radius: 0 0 8px 8px;
    margin-bottom: 0;
}

.day-group .seminar-card:only-of-type {
    border-radius: 0 0 8px 8px;
}