/* 
 * WMS Dynamic Theme System
 * Based on color schemes from wms_theme_colors.md
 * Supports Modern Minimalist and Industrial/Functional themes
 * Each with light and dark mode variants
 */

/* ============================================
   MODERN MINIMALIST THEME - LIGHT MODE
   ============================================ */
.theme-modern-light,
html[data-theme="modern-light"] {
    /* Base Colors */
    --bg-primary: #FFFFFF;           /* Main background */
    --bg-secondary: #F9FAFB;         /* Sidebar background */
    --card-bg: #FFFFFF;              /* Panel/cards */
    --primary-accent: #3B82F6;       /* Blue links, primary CTA */
    --border-color: #E5E7EB;         /* Light gray divider */
    
    /* Text Colors */
    --text-primary: #111827;         /* Dashboard/page titles */
    --text-secondary: #374151;       /* Normal content text */
    --text-muted: #6B7280;          /* Subheadings and subtle labels */
    
    /* Component Colors */
    --sidebar-bg: #F9FAFB;
    --sidebar-text: #374151;
    --navbar-bg: #111827;
    --navbar-text: #FFFFFF;
    --dropdown-hover: #3B82F6;
    --dropdown-hover-text: #FFFFFF;
    --input-bg: #FFFFFF;
    --input-border: #E5E7EB;
    --input-text: #111827;
    --input-placeholder: #9CA3AF;
    --button-hover-bg: #F9FAFB;
    --table-text: #374151;
    --table-header-text: #111827;
    --table-row-bg: #FFFFFF;
    --table-row-alt-bg: #F9FAFB;
    --table-hover-bg: #E5E7EB;
    --table-border: #E5E7EB;
    
    /* Status Badge Colors */
    --badge-success-bg: #D1FAE5;
    --badge-success-text: #065F46;
    --badge-warning-bg: #FEF3C7;
    --badge-warning-text: #92400E;
    --badge-danger-bg: #FEE2E2;
    --badge-danger-text: #991B1B;
    --badge-info-bg: #DBEAFE;
    --badge-info-text: #1E40AF;
    --badge-neutral-bg: #E5E7EB;
    --badge-neutral-text: #1F2937;
    
    /* Flash/Toast Message Colors */
    --toast-success-bg: #ECFDF5;
    --toast-success-border: #10B981;
    --toast-success-text: #065F46;
    --toast-warning-bg: #FFFBEB;
    --toast-warning-border: #F59E0B;
    --toast-warning-text: #92400E;
    --toast-danger-bg: #FEF2F2;
    --toast-danger-border: #EF4444;
    --toast-danger-text: #991B1B;
    --toast-info-bg: #EFF6FF;
    --toast-info-border: #3B82F6;
    --toast-info-text: #1E3A8A;
    
    /* Bootstrap Variable Overrides */
    --bs-body-color: #374151;
    --bs-body-bg: #FFFFFF;
    --bs-heading-color: #111827;
    --bs-secondary-color: #9CA3AF;
    --bs-card-cap-color: #111827;
    --bs-card-color: #374151;
    --bs-body-color-rgb: 55, 65, 81;
}

/* ============================================
   MODERN MINIMALIST THEME - DARK MODE
   ============================================ */
.theme-modern-dark,
html[data-theme="modern-dark"] {
    /* Base Colors */
    --bg-primary: #111827;           /* Main app background */
    --bg-secondary: #1F2937;         /* Navigation background */
    --card-bg: #1F2937;             /* Panels */
    --primary-accent: #60A5FA;       /* Blue accents */
    --border-color: #374151;         /* Divider borders */
    
    /* Text Colors */
    --text-primary: #F9FAFB;         /* Strong white text */
    --text-secondary: #D1D5DB;       /* Slightly dimmer than headings */
    --text-muted: #9CA3AF;          /* Labels and metadata */
    
    /* Component Colors */
    --sidebar-bg: #1F2937;
    --sidebar-text: #F9FAFB;
    --navbar-bg: #111827;
    --navbar-text: #F9FAFB;
    --dropdown-hover: #60A5FA;
    --dropdown-hover-text: #FFFFFF;
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: #374151;
    --input-text: #F9FAFB;
    --input-placeholder: #9CA3AF;
    --button-hover-bg: #374151;
    --table-text: #D1D5DB;
    --table-header-text: #F9FAFB;
    --table-row-bg: #1F2937;
    --table-row-alt-bg: #111827;
    --table-hover-bg: #374151;
    --table-border: #374151;
    
    /* Status Badge Colors */
    --badge-success-bg: #064E3B;
    --badge-success-text: #6EE7B7;
    --badge-warning-bg: #78350F;
    --badge-warning-text: #FCD34D;
    --badge-danger-bg: #7F1D1D;
    --badge-danger-text: #FCA5A5;
    --badge-info-bg: #1E3A8A;
    --badge-info-text: #BFDBFE;
    --badge-neutral-bg: #374151;
    --badge-neutral-text: #D1D5DB;
    
    /* Flash/Toast Message Colors */
    --toast-success-bg: #064E3B;
    --toast-success-border: #10B981;
    --toast-success-text: #D1FAE5;
    --toast-warning-bg: #78350F;
    --toast-warning-border: #F59E0B;
    --toast-warning-text: #FEF3C7;
    --toast-danger-bg: #7F1D1D;
    --toast-danger-border: #EF4444;
    --toast-danger-text: #FEE2E2;
    --toast-info-bg: #1E3A8A;
    --toast-info-border: #3B82F6;
    --toast-info-text: #DBEAFE;
    
    /* Bootstrap Variable Overrides */
    --bs-body-color: #D1D5DB;
    --bs-body-bg: #111827;
    --bs-heading-color: #F9FAFB;
    --bs-secondary-color: #9CA3AF;
    --bs-card-cap-color: #F9FAFB;
    --bs-card-color: #D1D5DB;
    --bs-body-color-rgb: 209, 213, 219;
}

/* ============================================
   INDUSTRIAL/FUNCTIONAL THEME - LIGHT MODE
   ============================================ */
.theme-industrial-light,
html[data-theme="industrial-light"] {
    /* Base Colors - More industrial feel */
    --bg-primary: #E5E7EB;           /* Concrete gray background */
    --bg-secondary: #D1D5DB;         /* Darker gray for contrast */
    --card-bg: #F9FAFB;             /* Light gray panels */
    --primary-accent: #EA580C;       /* Safety orange accent */
    --border-color: #9CA3AF;         /* Stronger borders */
    
    /* Text Colors */
    --text-primary: #111827;         /* Almost black text */
    --text-secondary: #374151;       /* Dark gray content */
    --text-muted: #6B7280;          /* Medium gray labels */
    
    /* Component Colors */
    --sidebar-bg: #374151;          /* Dark gray sidebar */
    --sidebar-text: #F9FAFB;        /* Light text on dark */
    --navbar-bg: #1F2937;           /* Very dark navbar */
    --navbar-text: #F9FAFB;
    --dropdown-hover: #EA580C;       /* Orange hover */
    --dropdown-hover-text: #FFFFFF;
    --input-bg: #F3F4F6;
    --input-border: #9CA3AF;
    --input-text: #111827;
    --input-placeholder: #6B7280;
    --button-hover-bg: #DC2626;     /* Red hover for danger */
    --table-text: #374151;
    --table-header-text: #111827;
    --table-row-bg: #F9FAFB;
    --table-row-alt-bg: #E5E7EB;
    --table-hover-bg: #D1D5DB;
    --table-border: #9CA3AF;
    
    /* Status Badge Colors - Industrial style */
    --badge-success-bg: #D1FADF;    /* Updated green tone */
    --badge-success-text: #047857;   /* Updated green text */
    --badge-warning-bg: #FED7AA;    /* Safety orange */
    --badge-warning-text: #7C2D12;   /* Dark orange text */
    --badge-danger-bg: #FECACA;     /* Alert red */
    --badge-danger-text: #7F1D1D;   /* Dark red text */
    --badge-info-bg: #FEF3C7;       /* Caution yellow */
    --badge-info-text: #713F12;     /* Dark yellow text */
    --badge-neutral-bg: #D1D5DB;    /* Gray */
    --badge-neutral-text: #1F2937;  /* Dark gray text */
    
    /* Flash/Toast Message Colors - Industrial style */
    --toast-success-bg: #ECFDF5;
    --toast-success-border: #047857;
    --toast-success-text: #065F46;
    --toast-warning-bg: #FFFBEB;
    --toast-warning-border: #F97316;
    --toast-warning-text: #92400E;
    --toast-danger-bg: #FEE2E2;
    --toast-danger-border: #DC2626;
    --toast-danger-text: #7F1D1D;
    --toast-info-bg: #FEF3C7;
    --toast-info-border: #FACC15;
    --toast-info-text: #713F12;
    
    /* Bootstrap Variable Overrides */
    --bs-body-color: #374151;
    --bs-body-bg: #E5E7EB;
    --bs-heading-color: #111827;
    --bs-secondary-color: #6B7280;
    --bs-card-cap-color: #111827;
    --bs-card-color: #374151;
    --bs-body-color-rgb: 55, 65, 81;
}

/* ============================================
   INDUSTRIAL/FUNCTIONAL THEME - DARK MODE
   ============================================ */
.theme-industrial-dark,
html[data-theme="industrial-dark"] {
    /* Base Colors - Industrial night shift */
    --bg-primary: #0F172A;           /* Deep slate background */
    --bg-secondary: #1E293B;         /* Steel blue-gray */
    --card-bg: #1E293B;             /* Matches sidebar */
    --primary-accent: #F97316;       /* Safety orange accent */
    --border-color: #475569;         /* Medium steel borders */
    
    /* Text Colors */
    --text-primary: #F8FAFC;         /* Bright white text */
    --text-secondary: #CBD5E1;       /* Light gray content */
    --text-muted: #94A3B8;          /* Muted blue-gray */
    
    /* Component Colors */
    --sidebar-bg: #1E293B;          /* Steel blue sidebar */
    --sidebar-text: #F8FAFC;
    --navbar-bg: #0F172A;
    --navbar-text: #F8FAFC;
    --dropdown-hover: #F97316;       /* Orange hover */
    --dropdown-hover-text: #FFFFFF;
    --input-bg: rgba(148, 163, 184, 0.1);
    --input-border: #475569;
    --input-text: #F8FAFC;
    --input-placeholder: #94A3B8;
    --button-hover-bg: #334155;
    --table-text: #CBD5E1;
    --table-header-text: #F8FAFC;
    --table-row-bg: #1E293B;
    --table-row-alt-bg: #0F172A;
    --table-hover-bg: #334155;
    --table-border: #475569;
    
    /* Status Badge Colors - Industrial night shift */
    --badge-success-bg: #064E3B;    /* Dark green */
    --badge-success-text: #6EE7B7;  /* Bright green text */
    --badge-warning-bg: #78350F;    /* Dark orange */
    --badge-warning-text: #FCD34D;  /* Bright orange text */
    --badge-danger-bg: #7F1D1D;     /* Dark red */
    --badge-danger-text: #FCA5A5;   /* Light red text */
    --badge-info-bg: #422006;       /* Dark amber */
    --badge-info-text: #FDE047;     /* Bright yellow text */
    --badge-neutral-bg: #334155;    /* Steel gray */
    --badge-neutral-text: #E2E8F0;  /* Light gray text */
    
    /* Flash/Toast Message Colors - Industrial night */
    --toast-success-bg: #052E16;
    --toast-success-border: #16A34A;
    --toast-success-text: #86EFAC;
    --toast-warning-bg: #431407;
    --toast-warning-border: #F97316;
    --toast-warning-text: #FDBA74;
    --toast-danger-bg: #450A0A;
    --toast-danger-border: #DC2626;
    --toast-danger-text: #FCA5A5;
    --toast-info-bg: #422006;
    --toast-info-border: #FDE047;
    --toast-info-text: #FEF3C7;
    
    /* Bootstrap Variable Overrides */
    --bs-body-color: #CBD5E1;
    --bs-body-bg: #0F172A;
    --bs-heading-color: #F8FAFC;
    --bs-secondary-color: #94A3B8;
    --bs-card-cap-color: #F8FAFC;
    --bs-card-color: #CBD5E1;
    --bs-body-color-rgb: 203, 213, 225;
}

/* ============================================
   THEME COMPONENT STYLING
   ============================================ */

/* Base Body Styling */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Form Labels and Help Text */
.form-label,
label {
    color: var(--text-primary) !important;
}

.form-text,
.text-muted,
small {
    color: var(--text-muted) !important;
}

/* Form Check Labels */
.form-check-label {
    color: var(--text-primary) !important;
}

/* Form Select Options */
.form-select option {
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Additional text elements that might be invisible */
.card-text {
    color: var(--text-secondary) !important;
}

/* Tab content text */
.tab-content {
    color: var(--text-primary);
}

/* List items */
li {
    color: var(--text-primary);
}

/* Card Subtitles and Headers */
.card-subtitle,
.card-header small {
    color: var(--text-muted) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
}

/* Subsection Headings - Enhanced for dark mode visibility */
.subsection-heading,
h4, h5, h6,
.h4, .h5, .h6 {
    font-weight: 600;
}

/* Dark mode specific subsection heading improvements */
[data-theme*="dark"] .subsection-heading,
[data-theme*="dark"] h4,
[data-theme*="dark"] h5,
[data-theme*="dark"] h6,
[data-theme*="dark"] .h4,
[data-theme*="dark"] .h5,
[data-theme*="dark"] .h6 {
    color: #CBD5E1;
    font-weight: 600;
}

/* Help blocks and descriptions */
.help-block,
.form-help,
.description {
    color: var(--text-muted);
}

/* Links */
a {
    color: var(--primary-accent);
}

a:hover {
    color: var(--primary-accent);
    opacity: 0.8;
}

/* Theme Toggle Button */
.theme-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--navbar-text) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    margin-right: 1rem !important;
    cursor: pointer !important;
    color: var(--navbar-text) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.theme-toggle i {
    font-size: 1.1rem !important;
    color: var(--navbar-text) !important;
}

.theme-toggle:focus {
    outline: 2px solid var(--primary-accent) !important;
    outline-offset: 2px !important;
}

/* Theme toggle icon states */
[data-theme*="light"] .theme-toggle i::before {
    content: "\f186" !important; /* moon icon for light mode */
}

[data-theme*="dark"] .theme-toggle i::before {
    content: "\f185" !important; /* sun icon for dark mode */
}

/* Fallback for theme toggle */
.theme-toggle i {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.theme-toggle i::before {
    content: "\f186" !important; /* default to moon icon */
}

/* Navigation */
.navbar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text);
}

.navbar .nav-link {
    color: var(--navbar-text) !important;
}

.navbar .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.navbar .dropdown-item {
    color: var(--text-primary);
}

.navbar .dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--dropdown-hover-text);
}

/* Sidebar */
.sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color);
}

.sidebar .nav-link {
    color: var(--sidebar-text) !important;
}

.sidebar .nav-link:hover {
    background-color: var(--button-hover-bg) !important;
    color: var(--sidebar-text) !important;
}

.sidebar .nav-link.active {
    background-color: var(--primary-accent) !important;
    color: var(--bg-primary) !important;
}

.sidebar .collapse .nav-link {
    color: var(--sidebar-text) !important;
}

.sidebar .collapse .nav-link:hover {
    background-color: var(--button-hover-bg) !important;
    color: var(--sidebar-text) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Tables */
.table {
    color: var(--table-text);
    --bs-table-bg: var(--table-row-bg);
    --bs-table-striped-bg: var(--table-row-alt-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-border-color: var(--table-border);
}

.table th {
    color: var(--table-header-text);
    background-color: var(--bg-secondary);
}

/* Forms */
.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

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

.form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-accent);
    color: var(--input-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-accent), 0.25);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
}

.btn-primary:hover {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    opacity: 0.9;
}

/* Status Badges */
.badge.bg-success {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-text) !important;
}

.badge.bg-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
}

.badge.bg-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
}

.badge.bg-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
}

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

/* Alert/Toast Messages */
.alert-success {
    background-color: var(--toast-success-bg);
    border-color: var(--toast-success-border);
    color: var(--toast-success-text);
}

.alert-warning {
    background-color: var(--toast-warning-bg);
    border-color: var(--toast-warning-border);
    color: var(--toast-warning-text);
}

.alert-danger {
    background-color: var(--toast-danger-bg);
    border-color: var(--toast-danger-border);
    color: var(--toast-danger-text);
}

.alert-info {
    background-color: var(--toast-info-bg);
    border-color: var(--toast-info-border);
    color: var(--toast-info-text);
}

/* ============================================
   THEME TRANSITION ANIMATIONS
   ============================================ */
*, *::before, *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ============================================
   THEME PREVIEW UTILITIES
   ============================================ */
.theme-preview-card {
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.theme-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-preview-card.selected {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(var(--primary-accent), 0.1);
}

.theme-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 2px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Location Label (Pill) Styling */
.location-label,
.pill-label {
    background-color: var(--badge-neutral-bg);
    color: var(--badge-neutral-text);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
}

/* Preview Area Specific Styling */
#themePreviewArea .preview-card {
    background-color: var(--card-bg);
    border-color: var(--border-color) !important;
}

#themePreviewArea .preview-heading {
    color: var(--text-primary);
}

#themePreviewArea .preview-text {
    color: var(--text-secondary);
}

#themePreviewArea .preview-sidebar {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color) !important;
}

#themePreviewArea .preview-sidebar-heading {
    color: var(--sidebar-text);
}

#themePreviewArea .preview-nav-item {
    color: var(--sidebar-text);
    transition: background-color 0.2s ease;
}

#themePreviewArea .preview-nav-item:hover {
    background-color: var(--button-hover-bg);
}

/* ============================================
   RESPONSIVE THEME ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .theme-preview-card {
        margin-bottom: 1rem;
    }
}

/* ============================================
   THEME SELECTION INTERFACE STYLES
   ============================================ */
.theme-selector-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.theme-option-card {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: var(--card-bg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.theme-option-card:hover {
    border-color: var(--primary-accent);
    transform: translateY(-2px);
}

.theme-option-card.active {
    border-color: var(--primary-accent);
    background-color: rgba(var(--primary-accent), 0.05);
}

.theme-colors-preview {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.color-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   MODAL AND POPUP DARK MODE STYLES
   ============================================ */

/* Bootstrap Modal Components */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.modal-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-title {
    color: var(--text-primary);
}

.modal-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.modal-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Dark mode specific modal adjustments */
[data-theme*="dark"] .modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

[data-theme*="dark"] .modal-backdrop {
    background-color: #000;
    opacity: 0.7;
}

/* Fix close button visibility in dark mode */
[data-theme*="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme*="dark"] .btn-close-white {
    filter: none;
}

/* Modal with colored headers - maintain readability */
[data-theme*="dark"] .modal-header.bg-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
}

[data-theme*="dark"] .modal-header.bg-danger .btn-close {
    filter: none;
    opacity: 0.8;
}

[data-theme*="dark"] .modal-header.bg-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
}

[data-theme*="dark"] .modal-header.bg-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
}

[data-theme*="dark"] .modal-header.bg-success {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-text) !important;
}

/* Form elements inside modals */
.modal .form-label,
.modal label {
    color: var(--text-primary) !important;
}

.modal .form-control,
.modal .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.modal .form-control:focus,
.modal .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-accent);
    color: var(--input-text);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.modal .form-text,
.modal .text-muted {
    color: var(--text-muted) !important;
}

/* Alert components inside modals */
.modal .alert {
    background-color: var(--toast-info-bg);
    border-color: var(--toast-info-border);
    color: var(--toast-info-text);
}

.modal .alert-info {
    background-color: var(--toast-info-bg);
    border-color: var(--toast-info-border);
    color: var(--toast-info-text);
}

.modal .alert-danger {
    background-color: var(--toast-danger-bg);
    border-color: var(--toast-danger-border);
    color: var(--toast-danger-text);
}

.modal .alert-warning {
    background-color: var(--toast-warning-bg);
    border-color: var(--toast-warning-border);
    color: var(--toast-warning-text);
}

.modal .alert-success {
    background-color: var(--toast-success-bg);
    border-color: var(--toast-success-border);
    color: var(--toast-success-text);
}

/* Suggestion/Autocomplete Boxes */
.suggestion-box {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-theme*="dark"] .suggestion-box {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.suggestion-item {
    color: var(--text-primary) !important;
    background-color: transparent;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: var(--button-hover-bg) !important;
    color: var(--text-primary) !important;
}

/* jQuery UI Components Dark Mode */
[data-theme*="dark"] .ui-widget {
    font-family: inherit;
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-widget-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-widget-header {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: bold;
}

/* jQuery UI Dialog */
[data-theme*="dark"] .ui-dialog {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

[data-theme*="dark"] .ui-dialog-titlebar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-dialog-content {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-dialog-buttonpane {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

[data-theme*="dark"] .ui-dialog-buttonset button {
    background: var(--primary-accent);
    color: white;
    border: 1px solid var(--primary-accent);
}

/* jQuery UI Datepicker */
[data-theme*="dark"] .ui-datepicker {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme*="dark"] .ui-datepicker-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-datepicker-title {
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-datepicker-calendar th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: none;
}

[data-theme*="dark"] .ui-datepicker-calendar td {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme*="dark"] .ui-datepicker-calendar td a {
    color: var(--text-primary);
    text-decoration: none;
}

[data-theme*="dark"] .ui-datepicker-calendar td a:hover {
    background: var(--button-hover-bg);
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-datepicker-current-day a {
    background: var(--primary-accent) !important;
    color: white !important;
}

/* jQuery UI Autocomplete */
[data-theme*="dark"] .ui-autocomplete {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme*="dark"] .ui-menu-item {
    background: transparent;
    color: var(--text-primary);
}

[data-theme*="dark"] .ui-menu-item:hover,
[data-theme*="dark"] .ui-menu-item.ui-state-focus {
    background: var(--button-hover-bg);
    color: var(--text-primary);
    border: none;
}

/* Enhanced Dropdown Menu Styling */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .dropdown-menu {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    color: var(--text-primary);
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--button-hover-bg);
    color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-accent);
    color: white;
}

.dropdown-divider {
    border-top-color: var(--border-color);
    opacity: 0.5;
}

.dropdown-header {
    color: var(--text-muted);
}

/* Bootstrap Tooltips and Popovers */
[data-theme*="dark"] .tooltip-inner {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme*="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before,
[data-theme*="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--bg-secondary);
}

[data-theme*="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before,
[data-theme*="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--bg-secondary);
}

[data-theme*="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
[data-theme*="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--bg-secondary);
}

[data-theme*="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before,
[data-theme*="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--bg-secondary);
}

[data-theme*="dark"] .popover {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

[data-theme*="dark"] .popover-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .popover-body {
    color: var(--text-primary);
}

[data-theme*="dark"] .popover .popover-arrow::after {
    border-color: var(--card-bg);
}

/* Fix Alert Close Buttons */
[data-theme*="dark"] .alert-dismissible .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

/* Special handling for colored alerts */
[data-theme*="dark"] .alert-danger .btn-close,
[data-theme*="dark"] .alert-warning .btn-close,
[data-theme*="dark"] .alert-success .btn-close,
[data-theme*="dark"] .alert-info .btn-close {
    filter: none;
    opacity: 0.9;
}

/* Ensure proper contrast for links in dark mode modals and alerts */
[data-theme*="dark"] .modal a,
[data-theme*="dark"] .alert a {
    color: var(--primary-accent);
    text-decoration: underline;
}

[data-theme*="dark"] .modal a:hover,
[data-theme*="dark"] .alert a:hover {
    opacity: 0.8;
}

/* ============================================
   BOOTSTRAP UTILITY CLASS OVERRIDES FOR DARK MODE
   ============================================ */

/* Background Color Utilities */
[data-theme*="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme*="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme*="dark"] .bg-dark {
    background-color: var(--bg-primary) !important;
}

/* Colored backgrounds - adapt for dark mode */
[data-theme*="dark"] .bg-primary {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

[data-theme*="dark"] .bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .bg-success {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-text) !important;
}

[data-theme*="dark"] .bg-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
}

[data-theme*="dark"] .bg-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
}

[data-theme*="dark"] .bg-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
}

/* Text Color Utilities - ensure proper contrast */
[data-theme*="dark"] .text-white {
    color: var(--text-primary) !important;
}

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

[data-theme*="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Card headers with colored backgrounds */
[data-theme*="dark"] .card-header.bg-primary {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

[data-theme*="dark"] .card-header.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme*="dark"] .card-header.bg-success {
    background-color: var(--badge-success-bg) !important;
    color: var(--badge-success-text) !important;
}

[data-theme*="dark"] .card-header.bg-danger {
    background-color: var(--badge-danger-bg) !important;
    color: var(--badge-danger-text) !important;
}

[data-theme*="dark"] .card-header.bg-warning {
    background-color: var(--badge-warning-bg) !important;
    color: var(--badge-warning-text) !important;
}

[data-theme*="dark"] .card-header.bg-info {
    background-color: var(--badge-info-bg) !important;
    color: var(--badge-info-text) !important;
}

[data-theme*="dark"] .card-header.bg-transparent {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Dashboard metric cards - special handling */
[data-theme*="dark"] .card.bg-primary,
[data-theme*="dark"] .card.bg-success,
[data-theme*="dark"] .card.bg-info,
[data-theme*="dark"] .card.bg-warning,
[data-theme*="dark"] .card.bg-danger {
    border: 1px solid var(--border-color);
}

[data-theme*="dark"] .card.bg-primary .card-body {
    color: white !important;
}

[data-theme*="dark"] .card.bg-success .card-body {
    color: var(--badge-success-text) !important;
}

[data-theme*="dark"] .card.bg-info .card-body {
    color: var(--badge-info-text) !important;
}

[data-theme*="dark"] .card.bg-warning .card-body {
    color: var(--badge-warning-text) !important;
}

[data-theme*="dark"] .card.bg-danger .card-body {
    color: var(--badge-danger-text) !important;
}

/* Table utility classes */
[data-theme*="dark"] .table-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-dark {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .table-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] thead.table-light th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] tbody tr.table-primary td {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--text-primary) !important;
}

/* Pricing cards and similar components */
[data-theme*="dark"] .card.bg-light {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme*="dark"] .card.bg-light .card-body {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .card.bg-light h6,
[data-theme*="dark"] .card.bg-light p,
[data-theme*="dark"] .card.bg-light span {
    color: var(--text-primary) !important;
}

/* Registration form overrides */
[data-theme*="dark"] .registration-container .form-control,
[data-theme*="dark"] .registration-container .form-select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

[data-theme*="dark"] .registration-container .form-control:focus,
[data-theme*="dark"] .registration-container .form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

[data-theme*="dark"] .registration-container .form-control::placeholder {
    color: var(--input-placeholder) !important;
}

[data-theme*="dark"] .registration-container .form-select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .registration-container .card.bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme*="dark"] .registration-container .card.bg-light * {
    color: var(--text-primary) !important;
}

/* List group items with backgrounds */
[data-theme*="dark"] .list-group-item.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .list-group-item.bg-primary {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

/* Badge overrides for consistency */
[data-theme*="dark"] .badge.bg-light {
    background-color: var(--badge-neutral-bg) !important;
    color: var(--badge-neutral-text) !important;
}

/* Border utilities */
[data-theme*="dark"] .border-light {
    border-color: var(--border-color) !important;
}

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

/* Special case for white text that should remain white in certain contexts */
[data-theme*="dark"] .card.bg-primary .text-white,
[data-theme*="dark"] .btn-primary .text-white,
[data-theme*="dark"] .badge.bg-primary .text-white {
    color: white !important;
}

/* Ensure colored card text remains readable */
[data-theme*="dark"] .card.bg-primary h1,
[data-theme*="dark"] .card.bg-primary h2,
[data-theme*="dark"] .card.bg-primary h3,
[data-theme*="dark"] .card.bg-primary h4,
[data-theme*="dark"] .card.bg-primary h5,
[data-theme*="dark"] .card.bg-primary h6,
[data-theme*="dark"] .card.bg-primary .card-title {
    color: white !important;
}

/* Price display elements */
[data-theme*="dark"] .fs-4,
[data-theme*="dark"] .fs-5,
[data-theme*="dark"] .fs-6 {
    color: var(--text-primary) !important;
}

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

[data-theme*="dark"] .text-success {
    color: var(--badge-success-text) !important;
}

[data-theme*="dark"] .text-danger {
    color: var(--badge-danger-text) !important;
}

/* Transitions for smooth theme switching */
.bg-light, .bg-white, .bg-dark,
.bg-primary, .bg-secondary, .bg-success,
.bg-danger, .bg-warning, .bg-info,
.table-light, .table-dark, .table-primary,
.table-secondary, .table-success, .table-danger,
.table-warning, .table-info {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}