/* 
 * 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: #3d688f;       /* Brand blue links, primary CTA - contrast 5.9:1 */
    --border-color: #E5E7EB;         /* Light gray divider */
    
    /* Text Colors */
    --text-primary: #111827;         /* Dashboard/page titles */
    --text-secondary: #374151;       /* Normal content text */
    --text-muted: #5F6A78;          /* Subheadings and subtle labels - Enhanced contrast (5.0:1) */
    
    /* Component Colors */
    --sidebar-bg: #F9FAFB;
    --sidebar-text: #374151;
    --navbar-bg: #111827;
    --navbar-text: #FFFFFF;
    --dropdown-hover: #4c82b3;
    --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: #d6f3f8;
    --badge-info-text: #0f6b80;
    --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: #d6f3f8;
    --toast-info-border: #1891ac;
    --toast-info-text: #0f6b80;

    /* 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;
    --bs-link-color: #3d688f;
    --bs-link-hover-color: #2f5170;
    --bs-link-color-rgb: 61, 104, 143;
    --bs-border-color: #E5E7EB;
    --bs-secondary-bg: #F9FAFB;
    --bs-tertiary-bg: #F3F4F6;
    --bs-emphasis-color: #111827;
    --bs-primary: #3d688f;
    --bs-primary-rgb: 61, 104, 143;
}

/* ============================================
   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: #6fa1c9;       /* Brand blue accents, lightened for dark surfaces */
    --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: #8fb7d8;
    --dropdown-hover-text: #111827;
    --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: #0f4c5c;
    --badge-info-text: #a5f3fc;
    --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: #0f4c5c;
    --toast-info-border: #1891ac;
    --toast-info-text: #cffafe;

    /* 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;
    --bs-link-color: #6fa1c9;
    --bs-link-hover-color: #8fb7d8;
    --bs-link-color-rgb: 111, 161, 201;
    --bs-border-color: #374151;
    --bs-secondary-bg: #1F2937;
    --bs-tertiary-bg: #374151;
    --bs-emphasis-color: #F9FAFB;
    --bs-primary: #6fa1c9;
    --bs-primary-rgb: 111, 161, 201;
}

/* ============================================
   INDUSTRIAL/FUNCTIONAL THEME - LIGHT MODE
   Warm concrete & steel warehouse aesthetic
   ============================================ */
.theme-industrial-light,
html[data-theme="industrial-light"] {
    /* Base Colors - Warm concrete warehouse */
    --bg-primary: #D5D0C8;           /* Warm stone/concrete background */
    --bg-secondary: #C4BEB5;         /* Darker warm stone for contrast */
    --card-bg: #EEEBE5;             /* Warm off-white panels */
    --primary-accent: #EA580C;       /* Safety orange accent */
    --border-color: #8B8378;         /* Warm medium borders */

    /* Text Colors - Warm stone palette */
    --text-primary: #1C1917;         /* Stone-900 */
    --text-secondary: #44403C;       /* Stone-700 */
    --text-muted: #78716C;          /* Stone-500 - WCAG AA (4.6:1 on warm bg) */

    /* Component Colors */
    --sidebar-bg: #3D3832;          /* Dark warm gray sidebar */
    --sidebar-text: #FAFAF9;        /* Stone-50 light text */
    --navbar-bg: #2D2A26;           /* Dark charcoal with warm undertone */
    --navbar-text: #FAFAF9;
    --dropdown-hover: #EA580C;       /* Orange hover */
    --dropdown-hover-text: #FFFFFF;
    --input-bg: #F5F3EF;            /* Warm off-white input */
    --input-border: #8B8378;
    --input-text: #1C1917;
    --input-placeholder: #78716C;    /* Stone-500 (4.5:1 on warm inputs) */
    --button-hover-bg: #DC2626;     /* Red hover for danger */
    --table-text: #44403C;
    --table-header-text: #1C1917;
    --table-row-bg: #EEEBE5;
    --table-row-alt-bg: #E2DED6;
    --table-hover-bg: #D5D0C8;
    --table-border: #8B8378;

    /* Status Badge Colors - Industrial style */
    --badge-success-bg: #D1FADF;
    --badge-success-text: #047857;
    --badge-warning-bg: #FED7AA;    /* Safety orange */
    --badge-warning-text: #7C2D12;
    --badge-danger-bg: #FECACA;     /* Alert red */
    --badge-danger-text: #7F1D1D;
    --badge-info-bg: #FEF3C7;       /* Caution yellow */
    --badge-info-text: #713F12;
    --badge-neutral-bg: #D6D3D1;    /* Stone-300 */
    --badge-neutral-text: #1C1917;

    /* 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: #44403C;
    --bs-body-bg: #D5D0C8;
    --bs-heading-color: #1C1917;
    --bs-secondary-color: #78716C;
    --bs-card-cap-color: #1C1917;
    --bs-card-color: #44403C;
    --bs-body-color-rgb: 68, 64, 60;
    --bs-link-color: #B45309;
    --bs-link-hover-color: #92400E;
    --bs-link-color-rgb: 180, 83, 9;
    --bs-border-color: #8B8378;
    --bs-secondary-bg: #E2DED6;
    --bs-tertiary-bg: #D5D0C8;
    --bs-emphasis-color: #1C1917;
    --bs-primary: #EA580C;
    --bs-primary-rgb: 234, 88, 12;
}

/* ============================================
   INDUSTRIAL/FUNCTIONAL THEME - DARK MODE
   Dark steel workshop aesthetic
   ============================================ */
.theme-industrial-dark,
html[data-theme="industrial-dark"] {
    /* Base Colors - Warm dark steel workshop */
    --bg-primary: #1A1816;           /* Warm dark background */
    --bg-secondary: #292524;         /* Stone-800 */
    --card-bg: #292524;             /* Stone-800 cards */
    --primary-accent: #F97316;       /* Safety orange accent */
    --border-color: #57534E;         /* Stone-600 borders */

    /* Text Colors - Warm off-whites */
    --text-primary: #FAFAF9;         /* Stone-50 */
    --text-secondary: #D6D3D1;       /* Stone-300 */
    --text-muted: #A8A29E;          /* Stone-400 - (6.2:1 on dark bg) */

    /* Component Colors */
    --sidebar-bg: #292524;          /* Stone-800 sidebar */
    --sidebar-text: #FAFAF9;
    --navbar-bg: #1A1816;           /* Warm black navbar */
    --navbar-text: #FAFAF9;
    --dropdown-hover: #F97316;       /* Orange hover */
    --dropdown-hover-text: #FFFFFF;
    --input-bg: rgba(168, 162, 158, 0.1);  /* Stone-tinted input */
    --input-border: #57534E;
    --input-text: #FAFAF9;
    --input-placeholder: #A8A29E;    /* Stone-400 (6.2:1) */
    --button-hover-bg: #44403C;     /* Stone-700 */
    --table-text: #D6D3D1;
    --table-header-text: #FAFAF9;
    --table-row-bg: #292524;
    --table-row-alt-bg: #1C1917;
    --table-hover-bg: #44403C;
    --table-border: #57534E;

    /* Status Badge Colors - Industrial night shift */
    --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: #422006;
    --badge-info-text: #FDE047;
    --badge-neutral-bg: #44403C;    /* Stone-700 */
    --badge-neutral-text: #E7E5E4;  /* Stone-200 */

    /* 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: #D6D3D1;
    --bs-body-bg: #1A1816;
    --bs-heading-color: #FAFAF9;
    --bs-secondary-color: #A8A29E;
    --bs-card-cap-color: #FAFAF9;
    --bs-card-color: #D6D3D1;
    --bs-body-color-rgb: 214, 211, 209;
    --bs-link-color: #F97316;
    --bs-link-hover-color: #FB923C;
    --bs-link-color-rgb: 249, 115, 22;
    --bs-border-color: #57534E;
    --bs-secondary-bg: #292524;
    --bs-tertiary-bg: #44403C;
    --bs-emphasis-color: #FAFAF9;
    --bs-primary: #F97316;
    --bs-primary-rgb: 249, 115, 22;
}

/* ============================================
   COSMIC / NEBULA THEME - LIGHT MODE
   ============================================ */
.theme-cosmic-light,
html[data-theme="cosmic-light"] {
    /* Base Colors - Soft lavender whites */
    --bg-primary: #faf9fd;              /* Pale lavender background */
    --bg-secondary: #f2f0f7;            /* Slightly deeper lavender */
    --card-bg: #FFFFFF;                 /* Clean white cards */
    --primary-accent: #6E6BAD;          /* Muted slate-purple accent */
    --border-color: #d4d0e2;            /* Lavender border */

    /* Text Colors */
    --text-primary: #1e1b2e;            /* Deep indigo headings */
    --text-secondary: #403a56;          /* Purple-tinted body text */
    --text-muted: #6e678a;             /* Muted purple-gray */

    /* Component Colors */
    --sidebar-bg: #edebf4;
    --sidebar-text: #403a56;
    --navbar-bg: #5B6199;              /* Muted slate-indigo solid */
    --navbar-text: #FFFFFF;
    --dropdown-hover: #6E6BAD;
    --dropdown-hover-text: #FFFFFF;
    --input-bg: #FFFFFF;
    --input-border: #d4d0e2;
    --input-text: #1e1b2e;
    --input-placeholder: #958fb0;
    --button-hover-bg: #f2f0f7;
    --table-text: #403a56;
    --table-header-text: #1e1b2e;
    --table-row-bg: #FFFFFF;
    --table-row-alt-bg: #f5f3f9;
    --table-hover-bg: #ece9f2;
    --table-border: #d4d0e2;

    /* Status Badge Colors - Cosmic tinted */
    --badge-success-bg: #d1fae5;
    --badge-success-text: #065f46;
    --badge-warning-bg: #fef3c7;
    --badge-warning-text: #92400e;
    --badge-danger-bg: #fce7f3;
    --badge-danger-text: #9d174d;
    --badge-info-bg: #cffafe;
    --badge-info-text: #155e75;
    --badge-neutral-bg: #e8e5f0;
    --badge-neutral-text: #403a56;

    /* Flash/Toast Message Colors */
    --toast-success-bg: #ecfdf5;
    --toast-success-border: #34d399;
    --toast-success-text: #065f46;
    --toast-warning-bg: #fffbeb;
    --toast-warning-border: #fbbf24;
    --toast-warning-text: #92400e;
    --toast-danger-bg: #fdf2f8;
    --toast-danger-border: #f472b6;
    --toast-danger-text: #9d174d;
    --toast-info-bg: #ecfeff;
    --toast-info-border: #22d3ee;
    --toast-info-text: #155e75;

    /* Bootstrap Variable Overrides */
    --bs-body-color: #403a56;
    --bs-body-bg: #faf9fd;
    --bs-heading-color: #1e1b2e;
    --bs-secondary-color: #958fb0;
    --bs-card-cap-color: #1e1b2e;
    --bs-card-color: #403a56;
    --bs-body-color-rgb: 64, 58, 86;
    --bs-link-color: #5B5A95;
    --bs-link-hover-color: #4A497A;
    --bs-link-color-rgb: 91, 90, 149;
    --bs-border-color: #d4d0e2;
    --bs-secondary-bg: #f2f0f7;
    --bs-tertiary-bg: #ece9f2;
    --bs-emphasis-color: #1e1b2e;
    --bs-primary: #6E6BAD;
    --bs-primary-rgb: 110, 107, 173;
}

/* ============================================
   COSMIC / NEBULA THEME - DARK MODE
   ============================================ */
.theme-cosmic-dark,
html[data-theme="cosmic-dark"] {
    /* Base Colors - Deep space */
    --bg-primary: #121018;              /* Deep space background */
    --bg-secondary: #1a1726;            /* Nebula dark */
    --card-bg: #211e2e;                /* Dark indigo cards */
    --primary-accent: #8480BA;          /* Muted soft purple accent */
    --border-color: #3b375a;            /* Muted purple border */

    /* Text Colors */
    --text-primary: #e0dced;            /* Soft lavender white */
    --text-secondary: #c0b9d6;          /* Light purple-gray */
    --text-muted: #958fb0;             /* Muted lavender */

    /* Component Colors */
    --sidebar-bg: #15121f;
    --sidebar-text: #e0dced;
    --navbar-bg: #5B6199;              /* Muted slate-indigo solid */
    --navbar-text: #FFFFFF;
    --dropdown-hover: #8480BA;
    --dropdown-hover-text: #FFFFFF;
    --input-bg: #1c1929;
    --input-border: #3b375a;
    --input-text: #e0dced;
    --input-placeholder: #7a7599;
    --button-hover-bg: #2c2842;
    --table-text: #c0b9d6;
    --table-header-text: #e0dced;
    --table-row-bg: #211e2e;
    --table-row-alt-bg: #1c1929;
    --table-hover-bg: #2c2842;
    --table-border: #3b375a;

    /* Status Badge Colors - Cosmic night */
    --badge-success-bg: #064e3b;
    --badge-success-text: #6ee7b7;
    --badge-warning-bg: #78350f;
    --badge-warning-text: #fcd34d;
    --badge-danger-bg: #831843;
    --badge-danger-text: #f9a8d4;
    --badge-info-bg: #164e63;
    --badge-info-text: #67e8f9;
    --badge-neutral-bg: #2c2842;
    --badge-neutral-text: #c0b9d6;

    /* Flash/Toast Message Colors - Deep space */
    --toast-success-bg: #064e3b;
    --toast-success-border: #34d399;
    --toast-success-text: #d1fae5;
    --toast-warning-bg: #78350f;
    --toast-warning-border: #fbbf24;
    --toast-warning-text: #fef3c7;
    --toast-danger-bg: #831843;
    --toast-danger-border: #f472b6;
    --toast-danger-text: #fce7f3;
    --toast-info-bg: #164e63;
    --toast-info-border: #22d3ee;
    --toast-info-text: #cffafe;

    /* Bootstrap Variable Overrides */
    --bs-body-color: #c0b9d6;
    --bs-body-bg: #121018;
    --bs-heading-color: #e0dced;
    --bs-secondary-color: #958fb0;
    --bs-card-cap-color: #e0dced;
    --bs-card-color: #c0b9d6;
    --bs-body-color-rgb: 192, 185, 214;
    --bs-link-color: #9D9ACD;
    --bs-link-hover-color: #B5B2DC;
    --bs-link-color-rgb: 157, 154, 205;
    --bs-border-color: #3b375a;
    --bs-secondary-bg: #1c1929;
    --bs-tertiary-bg: #2c2842;
    --bs-emphasis-color: #e0dced;
    --bs-primary: #8480BA;
    --bs-primary-rgb: 132, 128, 186;
}

/* ============================================
   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;
}

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

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

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

.list-group-item:hover,
.list-group-item:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

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

.list-group-item-action {
    color: var(--text-secondary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* ---- Progress Bars ---- */
.progress {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.progress-bar {
    background-color: var(--primary-accent);
}

/* ---- Input Group Text ---- */
.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

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

.breadcrumb-item a {
    color: var(--bs-link-color, var(--primary-accent));
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

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

.text-body-secondary {
    color: var(--text-muted) !important;
}

/* ---- Borders ---- */
.border {
    border-color: var(--border-color) !important;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-color) !important;
}

/* ---- Bg Utilities ---- */
.bg-body {
    background-color: var(--bg-primary) !important;
}

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

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

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

/* 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);
}

/* The list of updates ("What has changed"): each note is a bullet point,
   whatever other stylesheets a product loads */
#changelogContent ul {
    list-style: disc;
    margin: 0 0 1rem;
    padding-left: 2rem;
}

/* 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: var(--text-secondary);
    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);
}

.navbar .dropdown-item:hover .text-muted {
    color: var(--dropdown-hover-text) !important;
    opacity: 0.9;
}

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

.navbar .dropdown-item.active .text-muted,
.navbar .dropdown-item:active .text-muted {
    color: white !important;
    opacity: 0.9;
}

/* 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;
}

/* Info button styling for better visibility in dark mode */
[data-theme*="dark"] .btn-info {
    background-color: var(--badge-info-bg);
    border-color: var(--badge-info-bg);
    color: var(--badge-info-text);
}

[data-theme*="dark"] .btn-info:hover,
[data-theme*="dark"] .btn-info:focus {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

[data-theme*="dark"] .btn-info:not(:disabled):not(.disabled):active,
[data-theme*="dark"] .btn-info:not(:disabled):not(.disabled).active {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

/* 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,
.alert-error {
    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);
}

.alert-light {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.alert-light .text-muted {
    color: var(--text-secondary) !important;
}

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

.alert-secondary .text-muted {
    color: var(--text-secondary) !important;
}

/* ============================================
   THEME TRANSITION ANIMATIONS
   ============================================ */

/* Apply transitions only to interactive and themed elements for better performance */
body,
.card,
.card-header,
.navbar,
.sidebar,
.nav-link,
.btn,
.form-control,
.form-select,
.table,
.badge,
.alert,
.modal-content,
.modal-header,
.modal-footer,
.dropdown-menu,
.dropdown-item,
a,
.list-group-item {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Add box-shadow transition only to elements that use it */
.card,
.dropdown-menu,
.modal-content,
.btn:hover,
.btn:focus {
    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(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

@media (max-width: 991.98px) {
    .theme-selector-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .theme-selector-container {
        grid-template-columns: 1fr;
    }
}

.theme-option-card {
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background-color: var(--card-bg);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.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-option-card small:last-child {
    margin-top: auto;
}

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

/* The colour swatches on each scheme's card in Settings > Appearance. They show
   what a scheme looks like, so they are fixed colours, not theme variables. */
.color-preview.swatch-modern-1 { background-color: #FFFFFF; }
.color-preview.swatch-modern-2 { background-color: #F9FAFB; }
.color-preview.swatch-modern-3 { background-color: #3B82F6; }
.color-preview.swatch-modern-4 { background-color: #111827; }
.color-preview.swatch-modern-5 { background-color: #374151; }
.color-preview.swatch-industrial-1 { background-color: #D5D0C8; }
.color-preview.swatch-industrial-2 { background-color: #3D3832; }
.color-preview.swatch-industrial-3 { background-color: #EA580C; }
.color-preview.swatch-industrial-4 { background-color: #1C1917; }
.color-preview.swatch-industrial-5 { background-color: #D97706; }
.color-preview.swatch-cosmic-1 { background: linear-gradient(135deg, #5B6199, #6E5E8A); }
.color-preview.swatch-cosmic-2 { background-color: #121018; }
.color-preview.swatch-cosmic-3 { background-color: #6E6BAD; }
.color-preview.swatch-cosmic-4 { background-color: #e0dced; }
.color-preview.swatch-cosmic-5 { background-color: #67e8f9; }
.theme-accent-cosmic { color: #7c6cf0; }

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

/* ============================================
   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,
.modal .alert-error {
    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-error .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:not(.btn),
[data-theme*="dark"] .alert a:not(.btn) {
    color: var(--primary-accent);
    text-decoration: underline;
}

[data-theme*="dark"] .modal a:not(.btn):hover,
[data-theme*="dark"] .alert a:not(.btn):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;
}

/* ============================================
   TRIAL COUNTDOWN BANNER STYLES
   ============================================ */

.trial-countdown-banner {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-left: 4px solid #F59E0B;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

[data-theme*="dark"] .trial-countdown-banner {
    background: linear-gradient(135deg, #92400E 0%, #78350F 100%);
    border-left-color: #F59E0B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.trial-banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.trial-banner-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #F59E0B;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    animation: pulse 2s ease-in-out infinite;
}

[data-theme*="dark"] .trial-banner-icon {
    background-color: #FBBF24;
    color: #111827;
}

.trial-banner-text {
    flex: 1;
    min-width: 200px;
    color: #92400E;
    font-size: 0.95rem;
}

[data-theme*="dark"] .trial-banner-text {
    color: #FEF3C7;
}

.trial-banner-text strong {
    font-weight: 600;
}

.trial-banner-action {
    flex-shrink: 0;
}

.trial-action-btn {
    background-color: #F59E0B !important;
    color: #FFFFFF !important;
    border: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.trial-action-btn:hover {
    background-color: #D97706 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

[data-theme*="dark"] .trial-action-btn {
    background-color: #FBBF24 !important;
    color: #111827 !important;
}

[data-theme*="dark"] .trial-action-btn:hover {
    background-color: #F59E0B !important;
}

.trial-banner-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #92400E;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: auto;
    font-size: 1.125rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.trial-banner-close:hover {
    opacity: 1;
}

[data-theme*="dark"] .trial-banner-close {
    color: #FDE68A;
}

/* ============================================
   SHOPIFY BRAND COLORS
   ============================================ */

.text-shopify {
    color: #95BF47 !important;
}

.btn-outline-shopify {
    color: #95BF47;
    border-color: #95BF47;
    background-color: transparent;
}

.btn-outline-shopify:hover {
    color: #fff;
    background-color: #95BF47;
    border-color: #95BF47;
}

.btn-outline-shopify:focus,
.btn-outline-shopify.focus {
    box-shadow: 0 0 0 0.2rem rgba(149, 191, 71, 0.5);
}

.btn-shopify {
    color: #fff;
    background-color: #95BF47;
    border-color: #95BF47;
}

.btn-shopify:hover {
    color: #fff;
    background-color: #7da33a;
    border-color: #749835;
}

.bg-shopify {
    background-color: #95BF47 !important;
}

.border-shopify {
    border-color: #95BF47 !important;
}

/* Dark mode adjustments for Shopify colors */
[data-theme*="dark"] .text-shopify {
    color: #a8cf5a !important;
}

[data-theme*="dark"] .btn-outline-shopify {
    color: #a8cf5a;
    border-color: #a8cf5a;
}

[data-theme*="dark"] .btn-outline-shopify:hover {
    color: #1a1a2e;
    background-color: #a8cf5a;
    border-color: #a8cf5a;
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .trial-countdown-banner {
        padding: 0.875rem 1rem;
    }

    .trial-banner-content {
        gap: 0.75rem;
    }

    .trial-banner-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .trial-banner-text {
        font-size: 0.875rem;
        min-width: 150px;
    }

    .trial-action-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ============================================
   COMPREHENSIVE DARK MODE VISIBILITY FIXES
   ============================================ */

/* Fix form-select dropdown options - globally */
[data-theme*="dark"] .form-select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

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

/* Fix for select option rendering in different browsers */
[data-theme*="dark"] select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Fix checkboxes and radio buttons visibility */
[data-theme*="dark"] .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    filter: brightness(1.2);
}

[data-theme*="dark"] .form-check-input:checked {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
}

[data-theme*="dark"] .form-check-input:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}

/* Fix toggle switches (form-switch) visibility */
[data-theme*="dark"] .form-switch .form-check-input {
    background-color: var(--input-border);
    border-color: var(--input-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

[data-theme*="dark"] .form-switch .form-check-input:checked {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

[data-theme*="dark"] .form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Fix form-check labels */
[data-theme*="dark"] .form-check-label,
[data-theme*="dark"] .form-check label {
    color: var(--text-primary) !important;
}

/* Fix all bg-light elements globally in dark mode */
[data-theme*="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

[data-theme*="dark"] .card.bg-light .card-title,
[data-theme*="dark"] .card.bg-light .card-header,
[data-theme*="dark"] .card.bg-light h1,
[data-theme*="dark"] .card.bg-light h2,
[data-theme*="dark"] .card.bg-light h3,
[data-theme*="dark"] .card.bg-light h4,
[data-theme*="dark"] .card.bg-light h5,
[data-theme*="dark"] .card.bg-light h6 {
    color: var(--text-primary) !important;
}

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

/* Fix strong/bold text in bg-light cards */
[data-theme*="dark"] .card.bg-light strong,
[data-theme*="dark"] .card.bg-light b {
    color: var(--text-primary) !important;
}

/* Fix small text in bg-light cards */
[data-theme*="dark"] .card.bg-light small,
[data-theme*="dark"] .card.bg-light .small {
    color: var(--text-muted) !important;
}

/* Fix alerts with bg-light */
[data-theme*="dark"] .alert.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

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

/* Fix textarea visibility */
[data-theme*="dark"] textarea.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

[data-theme*="dark"] textarea.form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--primary-accent) !important;
}

/* Fix readonly and disabled inputs */
[data-theme*="dark"] .form-control:disabled,
[data-theme*="dark"] .form-control[readonly],
[data-theme*="dark"] .form-select:disabled {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Fix input group text */
[data-theme*="dark"] .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* Fix range inputs */
[data-theme*="dark"] input[type="range"] {
    background-color: transparent;
}

[data-theme*="dark"] input[type="range"]::-webkit-slider-track {
    background-color: var(--input-border);
}

[data-theme*="dark"] input[type="range"]::-moz-range-track {
    background-color: var(--input-border);
}

[data-theme*="dark"] input[type="range"]::-webkit-slider-thumb {
    background-color: var(--primary-accent);
}

[data-theme*="dark"] input[type="range"]::-moz-range-thumb {
    background-color: var(--primary-accent);
}

/* Fix file input visibility */
[data-theme*="dark"] .form-control[type="file"] {
    background-color: var(--input-bg);
    color: var(--input-text);
}

[data-theme*="dark"] .form-control[type="file"]::file-selector-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--input-border);
}

/* Fix search inputs */
[data-theme*="dark"] input[type="search"] {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* Fix number inputs */
[data-theme*="dark"] input[type="number"] {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

/* Fix date/time inputs */
[data-theme*="dark"] input[type="date"],
[data-theme*="dark"] input[type="datetime-local"],
[data-theme*="dark"] input[type="time"],
[data-theme*="dark"] input[type="month"],
[data-theme*="dark"] input[type="week"] {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    color-scheme: dark;
}

/* Fix calendar picker in dark mode */
[data-theme*="dark"] ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Fix valid/invalid feedback text */
[data-theme*="dark"] .valid-feedback,
[data-theme*="dark"] .invalid-feedback {
    color: var(--text-primary);
}

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

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

/* Fix list group items */
[data-theme*="dark"] .list-group-item {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme*="dark"] .list-group-item:hover {
    background-color: var(--button-hover-bg);
}

/* Fix pagination */
[data-theme*="dark"] .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .pagination .page-link:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme*="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

[data-theme*="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Fix breadcrumb */
[data-theme*="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme*="dark"] .breadcrumb-item,
[data-theme*="dark"] .breadcrumb-item a {
    color: var(--text-primary);
}

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

/* Fix accordion */
[data-theme*="dark"] .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

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

[data-theme*="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--button-hover-bg);
    color: var(--text-primary);
}

[data-theme*="dark"] .accordion-button:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}

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

/* Fix nav tabs */
[data-theme*="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme*="dark"] .nav-tabs .nav-link {
    color: var(--text-primary);
    border-color: transparent;
}

[data-theme*="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    background-color: var(--button-hover-bg);
}

[data-theme*="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
    color: var(--text-primary);
}

/* Fix nav pills */
[data-theme*="dark"] .nav-pills .nav-link {
    color: var(--text-primary);
    background-color: var(--bg-tertiary, #374151);
    border-color: var(--border-color);
}

[data-theme*="dark"] .nav-pills .nav-link:hover {
    background-color: var(--primary-700, #4b5563);
    color: var(--text-primary);
}

[data-theme*="dark"] .nav-pills .nav-link.active {
    background-color: var(--primary-accent);
    color: white;
}

/* Fix progress bars */
[data-theme*="dark"] .progress {
    background-color: var(--bg-secondary);
}

[data-theme*="dark"] .progress-bar {
    background-color: var(--primary-accent);
    color: white;
}

[data-theme*="dark"] .progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
}

/* Fix spinners */
[data-theme*="dark"] .spinner-border,
[data-theme*="dark"] .spinner-grow {
    border-color: var(--primary-accent);
    border-right-color: transparent;
}

/* Fix offcanvas */
[data-theme*="dark"] .offcanvas {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme*="dark"] .offcanvas-header {
    border-bottom-color: var(--border-color);
}

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

/* Fix code and pre blocks */
[data-theme*="dark"] code {
    background-color: var(--bg-secondary);
    color: var(--badge-danger-text);
}

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

/* Fix kbd (keyboard input) */
[data-theme*="dark"] kbd {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Fix hr dividers */
[data-theme*="dark"] hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Fix mark/highlight */
[data-theme*="dark"] mark {
    background-color: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}

/* Fix blockquote */
[data-theme*="dark"] blockquote {
    border-left-color: var(--border-color);
    color: var(--text-muted);
}

/* Fix details/summary */
[data-theme*="dark"] details {
    color: var(--text-primary);
}

[data-theme*="dark"] summary {
    color: var(--text-primary);
    cursor: pointer;
}

[data-theme*="dark"] summary:hover {
    color: var(--primary-accent);
}

/* Fix fieldset */
[data-theme*="dark"] fieldset {
    border-color: var(--border-color);
}

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

/* Fix placeholder text for all input types */
[data-theme*="dark"] ::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

[data-theme*="dark"] :-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

[data-theme*="dark"] ::-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

/* END OF COMPREHENSIVE DARK MODE VISIBILITY FIXES */

/* ============================================
   STANDARDIZED ACTION BUTTONS FOR LIST PAGES
   ============================================ */

/* Consistent sizing for table action buttons */
.btn-group-sm > .btn,
td .btn.btn-sm,
.action-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon sizing within action buttons */
td .btn.btn-sm i,
.action-btn i {
    font-size: 0.875rem;
}

/* Hover effect for action buttons */
td .btn.btn-sm:hover,
.btn-group .btn:hover {
    transform: translateY(-1px);
    transition: transform 0.15s ease-in-out;
}

/* Focus states for accessibility */
td .btn.btn-sm:focus-visible,
.action-btn:focus-visible {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

/* Dark mode adjustments for warning button (Edit) */
[data-theme*="dark"] .btn-warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #1f2937;
}

[data-theme*="dark"] .btn-warning:hover,
[data-theme*="dark"] .btn-warning:focus {
    background-color: #d97706;
    border-color: #d97706;
    color: #1f2937;
}

/* Print: hide action buttons */
@media print {
    td .btn,
    .btn-group,
    .action-btn {
        display: none !important;
    }
}

/* ============================================
   BOOTSTRAP ICONS SIZING
   ============================================ */

/* Default Bootstrap Icons - inherit text size */
.bi {
    font-size: 1em;
    vertical-align: -0.125em;
    line-height: 1;
}

/* Small icons for badges and compact UI */
.bi-sm,
.badge .bi,
small .bi {
    font-size: 0.875em;
}

/* Large icons for headers */
h1 .bi, h2 .bi, h3 .bi {
    font-size: 0.9em;
}

/* Icons in buttons - slightly smaller */
.btn .bi {
    font-size: 0.9em;
    vertical-align: -0.1em;
}

/* Icons in alerts and info boxes */
.alert .bi {
    font-size: 1.1em;
    vertical-align: -0.15em;
}

/* ============================================
   FLEXIBLE IMPORT WIZARD - DARK MODE FIXES
   ============================================ */

/* File Drop Zone */
[data-theme*="dark"] .file-drop-zone {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .file-drop-zone:hover,
[data-theme*="dark"] .file-drop-zone.dragover {
    border-color: var(--primary-accent) !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

[data-theme*="dark"] .file-drop-zone h5,
[data-theme*="dark"] .file-drop-zone p {
    color: var(--text-primary) !important;
}

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

/* Visual Import Canvas */
[data-theme*="dark"] .visual-import-canvas {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .visual-import-canvas.has-files {
    border-color: var(--badge-success-text) !important;
    background: var(--bg-primary) !important;
}

/* Data Target Boxes */
[data-theme*="dark"] .data-target-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .data-target-box:hover {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme*="dark"] .data-target-box.has-file {
    border-color: var(--badge-success-text) !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
}

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

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

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

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

/* File Info Badge */
[data-theme*="dark"] .target-file-info {
    background-color: var(--bg-secondary) !important;
}

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

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

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

[data-theme*="dark"] .connection-arrow::before {
    background-color: var(--border-color) !important;
}

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

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

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

[data-theme*="dark"] .connection-arrow .link-label {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .connection-arrow.linked .link-label {
    border-color: var(--badge-success-text) !important;
    color: var(--badge-success-text) !important;
}

/* Process Step Panel */
[data-theme*="dark"] .process-step-panel {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

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

[data-theme*="dark"] .process-step-row .file-indicator i {
    color: var(--primary-accent) !important;
}

/* Mapping Panel */
[data-theme*="dark"] .mapping-panel {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .mapping-panel-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

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

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

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

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

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

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

[data-theme*="dark"] .mapping-explanation {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-left-color: var(--primary-accent) !important;
    color: var(--text-secondary) !important;
}

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

/* Link Detection Panel */
[data-theme*="dark"] .link-detection-panel {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme*="dark"] .link-detection-header h6 i {
    color: var(--primary-accent) !important;
}

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

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

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

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

[data-theme*="dark"] .link-visual .file-column .column-name {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

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

[data-theme*="dark"] .link-stats .stat-value.warning {
    color: var(--badge-warning-text) !important;
}

/* Education Elements / Help Links */
[data-theme*="dark"] .help-link {
    color: var(--primary-accent) !important;
}

[data-theme*="dark"] .help-expansion {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

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

[data-theme*="dark"] .help-expansion p,
[data-theme*="dark"] .help-expansion ul li {
    color: var(--text-secondary) !important;
}

/* Import Order Indicator */
[data-theme*="dark"] .import-order-indicator {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

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

[data-theme*="dark"] .import-order-step .step-number {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

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

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

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

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

/* Preview & Results */
[data-theme*="dark"] .import-preview-summary {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

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

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

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

[data-theme*="dark"] .preview-warnings {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

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

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

/* Import Results */
[data-theme*="dark"] .import-results-header.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
}

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

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

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

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

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

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

/* Skipped Items Section */
[data-theme*="dark"] .skipped-items-section {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-top-color: var(--border-color) !important;
}

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

[data-theme*="dark"] .skipped-items-section h6 i {
    color: var(--badge-warning-text) !important;
}

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

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

/* Saved Configurations */
[data-theme*="dark"] .saved-config-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .saved-config-card:hover {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme*="dark"] .saved-config-card.selected {
    border-color: var(--primary-accent) !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

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

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

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

/* Walkthrough */
[data-theme*="dark"] .walkthrough-tooltip {
    background-color: var(--card-bg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

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

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

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

/* Uploaded Files List */
[data-theme*="dark"] .uploaded-file-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    border-left-color: var(--primary-accent) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .uploaded-file-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme*="dark"] .uploaded-file-card.primary {
    border-left-color: var(--badge-success-text) !important;
}

[data-theme*="dark"] .uploaded-file-card .file-info i {
    color: var(--primary-accent) !important;
}

[data-theme*="dark"] .uploaded-file-card.primary .file-info i {
    color: var(--badge-success-text) !important;
}

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

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

/* Fix for dynamically generated file list cards (Step 1) */
[data-theme*="dark"] .uploaded-file-card strong {
    color: var(--text-primary) !important;
}

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

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

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

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

[data-theme*="dark"] #uploadedFilesList .uploaded-file-card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

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

/* File Links List */
[data-theme*="dark"] .file-link-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

[data-theme*="dark"] .file-link-item .link-file .column-name {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

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

/* Column Mapping Tabs */
[data-theme*="dark"] #fileMappingTabs .nav-link {
    color: var(--text-primary) !important;
}

[data-theme*="dark"] #fileMappingTabs .nav-link.active {
    color: var(--primary-accent) !important;
}

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

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

[data-theme*="dark"] .mapping-summary .unmapped-count {
    color: var(--badge-warning-text) !important;
}

/* Zone Mapping Table */
[data-theme*="dark"] #zoneMappingTable th {
    color: var(--text-muted) !important;
}

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

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

/* Zone Assignment Card */
[data-theme*="dark"] .zone-assignment-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

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

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

/* Import Summary Card */
[data-theme*="dark"] .import-summary-card {
    background-color: var(--bg-secondary) !important;
}

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

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

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

/* Preview Table */
[data-theme*="dark"] #previewTable th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

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

[data-theme*="dark"] #previewTable tr:hover td {
    background-color: rgba(96, 165, 250, 0.08) !important;
}

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

/* Import Stats Grid */
[data-theme*="dark"] .import-stat-item {
    background-color: var(--bg-secondary) !important;
}

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

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

[data-theme*="dark"] .import-stat-item .stat-value.warning {
    color: var(--badge-warning-text) !important;
}

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

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

/* Wizard Step Indicator */
[data-theme*="dark"] .wizard-step .step-number {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme*="dark"] .wizard-step.active .step-number {
    background-color: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    color: white !important;
}

[data-theme*="dark"] .wizard-step.completed .step-number {
    background-color: var(--badge-success-text) !important;
    border-color: var(--badge-success-text) !important;
    color: white !important;
}

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

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

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

[data-theme*="dark"] .wizard-step:not(:last-child)::after {
    background-color: var(--border-color) !important;
}

[data-theme*="dark"] .wizard-step.completed:not(:last-child)::after {
    background-color: var(--badge-success-text) !important;
}

/* Data Source Selection */
[data-theme*="dark"] .data-source-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .data-source-card:hover {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme*="dark"] .data-source-card.selected {
    border-color: var(--primary-accent) !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

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

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

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

/* Flexible Wizard Template Inline Styles */
[data-theme*="dark"] .step-indicator::before {
    background-color: var(--bg-secondary) !important;
}

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

[data-theme*="dark"] .step.active .step-number {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

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

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

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

/* Primary Key Config */
[data-theme*="dark"] .primary-key-row {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

/* Link Validation Result */
[data-theme*="dark"] .link-validation-result.success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: var(--badge-success-text) !important;
}

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

[data-theme*="dark"] .link-validation-result.error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: var(--badge-danger-text) !important;
}

/* Data Type Card */
[data-theme*="dark"] .data-type-card {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

[data-theme*="dark"] .data-type-card.selected {
    border-color: var(--primary-accent) !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

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

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

/* Mapping Section */
[data-theme*="dark"] .mapping-section {
    border-color: var(--border-color) !important;
}

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

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

/* Zone Mapping Row */
[data-theme*="dark"] .zone-mapping-row {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .zone-mapping-row.existing {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

[data-theme*="dark"] .zone-mapping-row.new {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

/* Summary Card */
[data-theme*="dark"] .summary-card {
    background-color: var(--bg-secondary) !important;
}

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

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

/* Wizard Navigation */
[data-theme*="dark"] .wizard-navigation {
    border-top-color: var(--border-color) !important;
}

/* Normalization Preview */
[data-theme*="dark"] .normalization-preview .original {
    color: var(--text-muted) !important;
}

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

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

/* Secondary Key Section */
[data-theme*="dark"] .secondary-key-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Zone Mapping Summary */
[data-theme*="dark"] #zoneMappingList {
    border-color: var(--border-color) !important;
}

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

/* Import Progress */
[data-theme*="dark"] #importProgress .text-muted,
[data-theme*="dark"] #importStatusText {
    color: var(--text-muted) !important;
}

/* Import Results Alert */
[data-theme*="dark"] #importSuccessAlert {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: var(--badge-success-text) !important;
    color: var(--text-primary) !important;
}

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

/* Import Progress Stages - Dark Mode Visibility Fix */
[data-theme*="dark"] .import-stages {
    background-color: var(--bg-secondary) !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

[data-theme*="dark"] .import-stage {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme*="dark"] .import-stage.pending {
    opacity: 0.6;
    background-color: var(--bg-secondary) !important;
}

[data-theme*="dark"] .import-stage.active {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: var(--primary-accent) !important;
    border-left: 3px solid var(--primary-accent) !important;
}

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

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

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

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

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

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

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

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

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

/* Progress bar track visibility in dark mode */
[data-theme*="dark"] #importProgress .progress {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme*="dark"] #importProgress .progress-bar {
    background-color: var(--primary-accent) !important;
}

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

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

/* Spinner visibility for active stage */
[data-theme*="dark"] .import-stage.active .stage-status::after {
    border-color: var(--primary-accent) !important;
    border-top-color: transparent !important;
}

/* Data Filters Section - Dark Mode */
[data-theme*="dark"] .filter-rule-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme*="dark"] .filter-rule-item:hover {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

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

[data-theme*="dark"] .filter-rule-item .form-select,
[data-theme*="dark"] .filter-rule-item .form-control {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .filter-rule-item .form-select:focus,
[data-theme*="dark"] .filter-rule-item .form-control:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

[data-theme*="dark"] .filter-rule-item .btn-outline-danger {
    color: var(--badge-danger-text) !important;
    border-color: var(--badge-danger-text) !important;
}

[data-theme*="dark"] .filter-rule-item .btn-outline-danger:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fff !important;
}

/* Filter Preview Dark Mode */
[data-theme*="dark"] .filter-preview {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

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

[data-theme*="dark"] .filter-preview.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-left-color: var(--badge-warning-text) !important;
    color: var(--badge-warning-text) !important;
}

[data-theme*="dark"] .filter-preview.bg-info-subtle {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-left-color: var(--primary-accent) !important;
    color: var(--text-primary) !important;
}

[data-theme*="dark"] .filter-preview.bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-left-color: var(--badge-danger-text) !important;
    color: var(--badge-danger-text) !important;
}

[data-theme*="dark"] .filter-preview.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-left-color: var(--badge-success-text) !important;
    color: var(--badge-success-text) !important;
}

/* END FLEXIBLE IMPORT WIZARD DARK MODE FIXES */

/* ============================================
   COSMIC THEME - GRADIENT OVERRIDES
   Navbar and card headers use the signature
   purple gradient instead of flat colors.
   ============================================ */

/* Navbar gradient for cosmic themes */
[data-theme="cosmic-light"] .navbar,
[data-theme="cosmic-dark"] .navbar {
    background: linear-gradient(135deg, #5B6199 0%, #6E5E8A 100%) !important;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .navbar .nav-link,
[data-theme="cosmic-dark"] .navbar .nav-link,
[data-theme="cosmic-light"] .navbar .navbar-brand,
[data-theme="cosmic-dark"] .navbar .navbar-brand {
    color: #FFFFFF !important;
}

/* Card header gradient for cosmic themes */
[data-theme="cosmic-light"] .card-header,
[data-theme="cosmic-dark"] .card-header {
    background: linear-gradient(135deg, #5B6199 0%, #6E5E8A 100%) !important;
    color: #FFFFFF !important;
    border-bottom-color: rgba(110, 94, 138, 0.3);
}

[data-theme="cosmic-light"] .card-header h5,
[data-theme="cosmic-light"] .card-header h6,
[data-theme="cosmic-light"] .card-header small,
[data-theme="cosmic-light"] .card-header .mb-0,
[data-theme="cosmic-dark"] .card-header h5,
[data-theme="cosmic-dark"] .card-header h6,
[data-theme="cosmic-dark"] .card-header small,
[data-theme="cosmic-dark"] .card-header .mb-0 {
    color: #FFFFFF !important;
}

/* Card header links and badges stay visible */
[data-theme="cosmic-light"] .card-header a,
[data-theme="cosmic-dark"] .card-header a {
    color: #dedaf0 !important;
}

[data-theme="cosmic-light"] .card-header a:hover,
[data-theme="cosmic-dark"] .card-header a:hover {
    color: #FFFFFF !important;
}

/* Card header buttons */
[data-theme="cosmic-light"] .card-header .btn-outline-primary,
[data-theme="cosmic-dark"] .card-header .btn-outline-primary,
[data-theme="cosmic-light"] .card-header .btn-sm,
[data-theme="cosmic-dark"] .card-header .btn-sm {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="cosmic-light"] .card-header .btn-outline-primary:hover,
[data-theme="cosmic-dark"] .card-header .btn-outline-primary:hover,
[data-theme="cosmic-light"] .card-header .btn-sm:hover,
[data-theme="cosmic-dark"] .card-header .btn-sm:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

/* Primary button uses solid purple instead of gradient */
[data-theme="cosmic-light"] .btn-primary,
[data-theme="cosmic-dark"] .btn-primary {
    background-color: #6E6BAD !important;
    border-color: #6E6BAD !important;
}

[data-theme="cosmic-light"] .btn-primary:hover,
[data-theme="cosmic-dark"] .btn-primary:hover {
    background-color: #5E5B9A !important;
    border-color: #5E5B9A !important;
}

/* Cosmic outline buttons - solid fills for visibility */
[data-theme="cosmic-light"] .btn-outline-primary {
    background-color: #6E6BAD;
    border-color: #6E6BAD;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-primary:hover {
    background-color: #5E5B9A;
    border-color: #5E5B9A;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-secondary {
    background-color: #6e678a;
    border-color: #6e678a;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-secondary:hover {
    background-color: #5a5475;
    border-color: #5a5475;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-success {
    background-color: #15803D;
    border-color: #15803D;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-success:hover {
    background-color: #166534;
    border-color: #166534;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-warning {
    background-color: #B45309;
    border-color: #B45309;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-warning:hover {
    background-color: #92400E;
    border-color: #92400E;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-danger {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-danger:hover {
    background-color: #991B1B;
    border-color: #991B1B;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-info {
    background-color: #0E7490;
    border-color: #0E7490;
    color: #FFFFFF;
}

[data-theme="cosmic-light"] .btn-outline-info:hover {
    background-color: #0C5E75;
    border-color: #0C5E75;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-primary {
    background-color: #8480BA;
    border-color: #8480BA;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-primary:hover {
    background-color: #9D9ACD;
    border-color: #9D9ACD;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-secondary {
    background-color: #5a5475;
    border-color: #5a5475;
    color: #e0dced;
}

[data-theme="cosmic-dark"] .btn-outline-secondary:hover {
    background-color: #6e678a;
    border-color: #6e678a;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-success {
    background-color: #15803D;
    border-color: #15803D;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-success:hover {
    background-color: #16A34A;
    border-color: #16A34A;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-warning {
    background-color: #B45309;
    border-color: #B45309;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-warning:hover {
    background-color: #D97706;
    border-color: #D97706;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-danger {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-info {
    background-color: #0E7490;
    border-color: #0E7490;
    color: #FFFFFF;
}

[data-theme="cosmic-dark"] .btn-outline-info:hover {
    background-color: #06B6D4;
    border-color: #06B6D4;
    color: #FFFFFF;
}

/* ============================================
   INDUSTRIAL THEME - COMPONENT OVERRIDES
   Angular, utilitarian warehouse control panel
   aesthetic with squared-off shapes and accent
   stripe markers.
   ============================================ */

/* --- Navbar: bottom accent stripe --- */
[data-theme="industrial-light"] .navbar,
[data-theme="industrial-dark"] .navbar {
    border-bottom: 3px solid #EA580C !important;
}

/* --- Cards: left accent stripe + angular --- */
[data-theme="industrial-light"] .card,
[data-theme="industrial-dark"] .card {
    border-left: 3px solid #EA580C;
    border-radius: 2px;
}

/* Card headers: darker bg with strong bottom border */
/* Only apply default header bg when no explicit bg-* color class is set */
[data-theme="industrial-light"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not(.bg-light) {
    background-color: #DDD8D0 !important;
}
[data-theme="industrial-light"] .card-header {
    border-bottom: 2px solid #8B8378 !important;
}

/* Ensure bg-* card headers keep their intended colors in industrial-light */
[data-theme="industrial-light"] .card-header.bg-primary {
    background-color: #C2410C !important; /* orange-700 */
    color: #FFFFFF !important;
}
[data-theme="industrial-light"] .card-header.bg-secondary {
    background-color: #57534E !important; /* stone-600 */
    color: #FFFFFF !important;
}
[data-theme="industrial-light"] .card-header.bg-info {
    background-color: #0E7490 !important; /* teal-700 */
    color: #FFFFFF !important;
}
[data-theme="industrial-light"] .card-header.bg-success {
    background-color: #15803D !important; /* green-700 */
    color: #FFFFFF !important;
}
[data-theme="industrial-light"] .card-header.bg-warning {
    background-color: #92400E !important; /* amber-800 */
    color: #FFFFFF !important;
}
[data-theme="industrial-light"] .card-header.bg-danger {
    background-color: #B91C1C !important; /* red-700 */
    color: #FFFFFF !important;
}

[data-theme="industrial-dark"] .card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not(.bg-light) {
    background-color: #1C1917 !important;
}
[data-theme="industrial-dark"] .card-header {
    border-bottom: 2px solid #57534E !important;
}

/* --- Buttons: squared-off industrial feel --- */
[data-theme="industrial-light"] .btn,
[data-theme="industrial-dark"] .btn {
    border-radius: 2px;
}

[data-theme="industrial-light"] .btn-primary {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
}

[data-theme="industrial-light"] .btn-primary:hover {
    background-color: #D97706 !important;
    border-color: #D97706 !important;
}

[data-theme="industrial-dark"] .btn-primary {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
}

[data-theme="industrial-dark"] .btn-primary:hover {
    background-color: #D97706 !important;
    border-color: #D97706 !important;
}

/* --- Badges: angular industrial tags --- */
[data-theme="industrial-light"] .badge,
[data-theme="industrial-dark"] .badge {
    border-radius: 2px;
}

/* --- Tables: stronger header styling --- */
[data-theme="industrial-light"] .table thead th {
    background-color: #C4BEB5 !important;
    border-bottom: 2px solid #8B8378 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

[data-theme="industrial-dark"] .table thead th {
    background-color: #1C1917 !important;
    border-bottom: 2px solid #57534E !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

/* --- Outline buttons: solid fill for visibility on warm bg --- */
[data-theme="industrial-light"] .btn-outline-primary {
    background-color: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-primary:hover {
    background-color: #C2410C;
    border-color: #C2410C;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-secondary {
    background-color: #57534E;
    border-color: #57534E;
    color: #FAFAF9;
}

[data-theme="industrial-light"] .btn-outline-secondary:hover {
    background-color: #44403C;
    border-color: #44403C;
    color: #FAFAF9;
}

[data-theme="industrial-light"] .btn-outline-info {
    background-color: #0E7490;
    border-color: #0E7490;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-info:hover {
    background-color: #0C5E75;
    border-color: #0C5E75;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-success {
    background-color: #15803D;
    border-color: #15803D;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-success:hover {
    background-color: #166534;
    border-color: #166534;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-warning {
    background-color: #B45309;
    border-color: #B45309;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-warning:hover {
    background-color: #92400E;
    border-color: #92400E;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-danger {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-danger:hover {
    background-color: #991B1B;
    border-color: #991B1B;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-shopify {
    background-color: #6D8F35;
    border-color: #6D8F35;
    color: #FFFFFF;
}

[data-theme="industrial-light"] .btn-outline-shopify:hover {
    background-color: #5A7A2B;
    border-color: #5A7A2B;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-primary {
    background-color: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-primary:hover {
    background-color: #F97316;
    border-color: #F97316;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-secondary {
    background-color: #57534E;
    border-color: #57534E;
    color: #FAFAF9;
}

[data-theme="industrial-dark"] .btn-outline-secondary:hover {
    background-color: #78716C;
    border-color: #78716C;
    color: #FAFAF9;
}

[data-theme="industrial-dark"] .btn-outline-info {
    background-color: #0E7490;
    border-color: #0E7490;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-info:hover {
    background-color: #06B6D4;
    border-color: #06B6D4;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-success {
    background-color: #15803D;
    border-color: #15803D;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-success:hover {
    background-color: #16A34A;
    border-color: #16A34A;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-warning {
    background-color: #B45309;
    border-color: #B45309;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-warning:hover {
    background-color: #D97706;
    border-color: #D97706;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-danger {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-shopify {
    background-color: #6D8F35;
    border-color: #6D8F35;
    color: #FFFFFF;
}

[data-theme="industrial-dark"] .btn-outline-shopify:hover {
    background-color: #95BF47;
    border-color: #95BF47;
    color: #FFFFFF;
}

/* --- Text utility overrides for industrial-light (warm bg needs darker text) --- */
[data-theme="industrial-light"] .text-info {
    color: #0E7490 !important; /* teal-700: contrast 6.5:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-muted {
    color: #57534E !important; /* stone-600: contrast 5.2:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-success {
    color: #15803D !important; /* green-700: contrast 5.5:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-warning {
    color: #92400E !important; /* amber-800: contrast 6.8:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-danger {
    color: #B91C1C !important; /* red-700: contrast 6.2:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-primary {
    color: #C2410C !important; /* orange-700: contrast 5.0:1 on #EEEBE5 */
}

[data-theme="industrial-light"] .text-secondary {
    color: #44403C !important; /* stone-700: contrast 7.2:1 on #EEEBE5 */
}

/* --- Badge overrides for industrial-light (visible against warm card headers) --- */
[data-theme="industrial-light"] .badge.bg-secondary {
    background-color: #78716C !important; /* stone-500: visible on #DDD8D0 header */
    color: #FAFAF9 !important;
}

[data-theme="industrial-light"] .badge.bg-info {
    background-color: #0E7490 !important; /* teal-700 */
    color: #FFFFFF !important;
}

/* --- Inputs: angular to match buttons --- */
[data-theme="industrial-light"] .form-control,
[data-theme="industrial-light"] .form-select,
[data-theme="industrial-dark"] .form-control,
[data-theme="industrial-dark"] .form-select {
    border-radius: 2px;
}

/* --- Modern-dark: brand-blue tint overrides ---
   The generic dark-mode fixes above hardcode the old Tailwind accent
   (rgba(96, 165, 250, *)) instead of referencing --primary-accent, so they
   don't pick up the new brand color automatically. These re-target just
   modern-dark with the new accent's RGB (111, 161, 201) so industrial-dark
   and cosmic-dark keep whatever tint already matches their own accent. */
[data-theme="modern-dark"] .form-check-input:focus,
[data-theme="modern-dark"] .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(111, 161, 201, 0.25);
}

[data-theme="modern-dark"] .file-drop-zone:hover,
[data-theme="modern-dark"] .file-drop-zone.dragover,
[data-theme="modern-dark"] .mapping-explanation,
[data-theme="modern-dark"] .help-expansion,
[data-theme="modern-dark"] .saved-config-card.selected,
[data-theme="modern-dark"] .data-source-card.selected,
[data-theme="modern-dark"] .data-type-card.selected {
    background-color: rgba(111, 161, 201, 0.1) !important;
}

[data-theme="modern-dark"] .help-expansion {
    border-color: rgba(111, 161, 201, 0.3) !important;
}

[data-theme="modern-dark"] #previewTable tr:hover td {
    background-color: rgba(111, 161, 201, 0.08) !important;
}

/* ============================================================
   Desktop polish
   ============================================================ */

/* Titles are text only; a leading icon on some pages and not others looked uneven */
.content-wrapper h1:not(.card h1) > i[class*="fa-"]:first-child,
.content-wrapper h1:not(.card h1) > i.bi:first-child,
.content-wrapper h2.d-flex.align-items-center:not(.card h2) > i:first-child {
    display: none;
}

@media (min-width: 992px) {
    /* ---- Page titles: one size and weight, whatever heading markup a page uses ---- */
    .content-wrapper h1:not(.card h1):not([class*="display-"]),
    .content-wrapper h2.d-flex.align-items-center:not(.card h2) {
        font-size: 1.75rem;
        font-weight: 600;
        line-height: 1.25;
    }

    /* Less empty space between the top bar and the page */
    .content-wrapper.mobile-content {
        padding-top: 1.5rem;
    }

    /* Keep the title on one line when its buttons sit beside it */
    .flex-lg-row > h1,
    .stock-header > h1 {
        flex-shrink: 0;
    }

    .stock-header > h1 + .header-actions {
        width: auto;
        margin-top: 0;
        margin-left: auto;
    }

    .d-flex:not(.flex-column) > h1 + .header-actions,
    .d-flex:not(.flex-column) > h1 + .d-flex,
    .flex-lg-row > h1 + .header-actions,
    .flex-lg-row > h1 + .d-flex {
        width: auto;
        margin-top: 0;
    }
}

/* ---- Breadcrumb: quiet line of small text above the title ---- */
.content-wrapper .breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* ---- Help "?" beside titles and labels ---- */
.help-btn,
.help-btn:hover,
.help-btn:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1;
    opacity: 0.65;
}

.help-btn:hover,
.help-btn:focus-visible {
    opacity: 1;
}

.help-btn i {
    margin: 0 !important;
    font-size: 1.125rem !important;
    color: var(--text-muted) !important;
}

/* ---- Sidebar ---- */
#mainSidebar,
#mainSidebar .nav-item {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#mainSidebar::-webkit-scrollbar,
#mainSidebar .nav-item::-webkit-scrollbar {
    width: 6px;
}

#mainSidebar::-webkit-scrollbar-track,
#mainSidebar .nav-item::-webkit-scrollbar-track {
    background: transparent;
}

#mainSidebar::-webkit-scrollbar-thumb,
#mainSidebar .nav-item::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

@media (min-width: 992px) {
    #mainSidebar .collapse .nav-link {
        font-size: 0.9375rem;
    }
}

/* Features on a higher plan: dimmed label with a small lock at the end of the row */
.nav-lock {
    order: 2;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-muted);
}

.nav-lock i {
    margin: 0 !important;
    min-width: 0 !important;
}

.sidebar .nav-link .nav-lock,
.sidebar .collapse .nav-link .nav-lock {
    margin-left: auto;
    padding: 0 0 0 0.5rem;
    overflow: visible;
    flex-shrink: 0;
}

#mainSidebar .nav-link.text-muted {
    opacity: 0.6;
}

#mainSidebar .nav-link.text-muted:hover {
    opacity: 1;
}

.dropdown-item .nav-lock {
    float: right;
}

/* ---- Row action buttons: quiet until hovered, so the data leads ---- */
@media all {
    .content-wrapper .action-btn {
        background-color: transparent !important;
        border-color: var(--border-color) !important;
        color: var(--text-secondary) !important;
        box-shadow: none !important;
    }

    .content-wrapper .action-btn i {
        color: inherit !important;
    }

    .content-wrapper .action-btn:hover,
    .content-wrapper .action-btn:focus-visible {
        background-color: var(--bg-secondary) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-primary) !important;
    }

    .content-wrapper .action-btn-delete,
    .content-wrapper .action-btn-cancel,
    .content-wrapper .action-btn-hold {
        color: #dc3545 !important;
    }

    .content-wrapper .action-btn-delete:hover,
    .content-wrapper .action-btn-delete:focus-visible,
    .content-wrapper .action-btn-cancel:hover,
    .content-wrapper .action-btn-cancel:focus-visible,
    .content-wrapper .action-btn-hold:hover,
    .content-wrapper .action-btn-hold:focus-visible {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: #fff !important;
    }

    [data-theme*="dark"] .content-wrapper .action-btn-delete:not(:hover):not(:focus-visible),
    [data-theme*="dark"] .content-wrapper .action-btn-cancel:not(:hover):not(:focus-visible),
    [data-theme*="dark"] .content-wrapper .action-btn-hold:not(:hover):not(:focus-visible) {
        color: #f87171 !important;
    }
}

/* Phone: page titles written as a second-level heading match the others */
@media (max-width: 991.98px) {
    .mobile-content h1:not(.card h1):not([class*="display-"]),
    .mobile-content h2.d-flex.align-items-center:not(.card h2) {
        font-size: 1.5rem;
        font-weight: 600;
    }
}

/* Phone list cards: a row of buttons wraps instead of running off the card */
@media (max-width: 991.98px) {
    /* Wide tables and charts stay inside their card */
    .mobile-content .card-body.p-0 {
        overflow-x: auto;
    }

    .mobile-content canvas {
        max-width: 100%;
    }

    /* A long page name in the top bar is cut short, not drawn over the buttons */
    .mobile-top-nav-center {
        min-width: 0;
        overflow: hidden;
    }

    .mobile-top-nav-title-link {
        min-width: 0;
        max-width: 100%;
    }

    /* Small icon buttons inside list rows keep their size */
    .mobile-content .list-group-item .btn-sm {
        width: auto !important;
        min-width: 0 !important;
    }

    .mobile-content .card .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Card titles: space between a leading icon and the text, and a proper title size for
   second and third level headings (which otherwise render as body text) */
.card-header :is(h1, h2, h3, h4, h5, h6) > i:first-child {
    margin-right: 0.5rem;
}

.content-wrapper .card-header :is(h2, h3):not([class*="fs-"]):not(.h4):not(.h5):not(.h6),
.content-wrapper .card-body > :is(h2, h3).d-flex.justify-content-center {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Titles on a coloured card header take the header's own text colour */
.card-header.text-white :is(h1, h2, h3, h4, h5, h6),
.card-header.text-white .help-btn i {
    color: #fff !important;
}

/* ============================================
   BRAND (suite style guide, section 3a)
   Kept last so it applies in every theme.
   ============================================ */

/* Lato, the brand's body face, for everything in the products. The files are a
   Latin subset of Lato 2.0 (SIL Open Font License 1.1, tyPoland Lukasz Dziedzic). */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lato-400i.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lato-600.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato-700.woff2') format('woff2'); }

:root {
    --bs-font-sans-serif: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

body {
    font-family: var(--bs-font-sans-serif);
}

/* Main buttons are slate blue whether filled or outlined: Bootstrap's own
   bright blue is not a brand colour. */
.btn-outline-primary {
    --bs-btn-color: var(--primary-accent);
    --bs-btn-border-color: var(--primary-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-accent);
    --bs-btn-hover-border-color: var(--primary-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-accent);
    --bs-btn-active-border-color: var(--primary-accent);
    --bs-btn-disabled-color: var(--primary-accent);
    --bs-btn-disabled-border-color: var(--primary-accent);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* The current page number in paging, likewise. */
.pagination {
    --bs-pagination-color: var(--primary-accent);
    --bs-pagination-hover-color: var(--primary-accent);
    --bs-pagination-focus-color: var(--primary-accent);
    --bs-pagination-active-bg: var(--primary-accent);
    --bs-pagination-active-border-color: var(--primary-accent);
}

.pagination .page-item.active .page-link,
.pagination .page-link.active {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: #fff;
}

/* The logo: black on a light page, white on a dark one or on the dark bars.
   Put both in the page and these show the right one. */
.brand-logo { height: 2.25rem; width: auto; max-width: 100%; }
.navbar .brand-logo { height: 2.125rem; }
.brand-logo-on-dark { display: none; }
[data-theme*="dark"] .brand-logo-on-light { display: none; }
[data-theme*="dark"] .brand-logo-on-dark { display: inline; }
.navbar .brand-logo-on-dark { display: inline; }