/**
 * PERTI Global Color System
 * ===========================
 * Centralized color definitions with WCAG AA contrast compliance
 *
 * NAMING CONVENTION:
 * ==================
 * Variables follow this pattern: --[context]-[element]-[variant]
 *
 * CONTEXTS:
 *   light-   = For use ON LIGHT backgrounds (white, cream, light gray)
 *   dark-    = For use ON DARK backgrounds (navy, black, dark gray)
 *   bright-  = For use ON BRIGHT colored backgrounds (yellow, orange, lime)
 *
 * ELEMENTS:
 *   text     = Text color
 *   bg       = Background color
 *   border   = Border color
 *
 * VARIANTS:
 *   primary    = Main/prominent content
 *   secondary  = Supporting content
 *   muted      = De-emphasized content (still readable)
 *   subtle     = Very subtle but accessible
 *   disabled   = Non-interactive elements
 *
 * EXAMPLES:
 *   --light-text-primary    = Primary text color for light backgrounds
 *   --dark-text-muted       = Muted text for dark backgrounds
 *   --bright-text           = Text for bright colored backgrounds
 */

:root {
  /* ===========================================
   * BRAND COLORS
   * Core identity colors used throughout PERTI
   * =========================================== */

  --brand-primary: #332e7a;         /* Navy purple - primary identity */
  --brand-primary-light: #36344e;   /* Lighter navy - btn-link hover */
  --brand-primary-dark: #222d5c;    /* Darker navy - btn-primary */
  --brand-primary-darker: #1d264d;  /* Darkest navy - btn-primary hover */
  --brand-dark: #1c1946;            /* Brand dark - badge-dark, btn-dark, btn-link */
  --brand-dark-surface: #242444;    /* Dark surface - .bg-dark override */
  --brand-dark-deeper: #141427;     /* Deepest dark - card-header.bg-dark */
  --brand-secondary: #f7f7fc;       /* Light gray - secondary surfaces */
  --brand-accent: #6a9bf4;          /* Blue - accent elements */

  /* ===========================================
   * STATUS COLORS
   * Semantic colors for states and feedback
   * =========================================== */

  --status-success: #16c995;        /* Green - success, positive */
  --status-success-text: #43ac6a;   /* Green text on light bg (.text-success) */
  --status-success-bg: #63BD49;     /* Green bg for badges, buttons, .bg-success */
  --status-success-hover: #529e3c;  /* Green hover for btn-success */
  --status-warning: #ffb15c;        /* Orange - warning, caution */
  --status-warning-text: #E99002;   /* Orange text (.text-warning) */
  --status-danger: #f74f78;         /* Red/Pink - error, destructive */
  --status-danger-text: #F04124;    /* Red text (.text-danger) */
  --status-info: #6a9bf4;           /* Blue - informational */
  --status-scheduled: #6a9bf4;     /* Blue - scheduled/upcoming (matches --status-info) */
  --status-info-base: #239BCD;      /* Teal-blue - links, badges, buttons, nav */
  --status-info-hover: #2f7492;     /* Teal-blue hover for btn-info */
  --status-info-link-hover: #166b8f; /* Darker teal - a:hover, nav-link:hover */

  /* Bootstrap alert-info colors */
  --alert-info-bg: #e7f3ff;         /* Light blue background */
  --alert-info-border: #b6d4fe;     /* Light blue border */
  --alert-info-text: #084298;       /* Dark blue text */
  --alert-info-link: #0a58ca;       /* Medium blue link */

  /* ===========================================
   * TEXT COLORS - FOR LIGHT BACKGROUNDS
   * Use these when text appears on white, off-white, or light gray
   * All meet WCAG AA (4.5:1 minimum contrast ratio)
   * =========================================== */

  --light-text-primary: #37384e;    /* Main text - 11.5:1 contrast */
  --light-text-secondary: #5a5b75;  /* Secondary text - 7.1:1 contrast */
  --light-text-muted: #6b7280;      /* Muted/subtle text - 5.4:1 contrast */
  --light-text-disabled: #9ca3af;   /* Disabled elements - decorative */
  --light-text-placeholder: #6b7280; /* Form placeholders - 5.4:1 contrast */
  --light-text-link: #332e7a;       /* Links (matches brand-primary) */
  --light-text-link-hover: #222d5c; /* Link hover (matches brand-primary-dark) */

  /* ===========================================
   * TEXT COLORS - FOR DARK BACKGROUNDS
   * Use these when text appears on dark navy, black, or dark gray
   * All meet WCAG AA (4.5:1 minimum contrast ratio)
   * =========================================== */

  --dark-text-primary: #ffffff;     /* Main text - maximum contrast */
  --dark-text-secondary: #e5e5e5;   /* Secondary text - 14:1 contrast */
  --dark-text-muted: #b3b3b3;       /* Muted/subtle text - 8.5:1 contrast */
  --dark-text-subtle: #999999;      /* Very subtle text - 5.3:1 contrast */
  --dark-text-disabled: #777777;    /* Disabled - 4.5:1 minimum */
  --dark-text-link: #9990f7;        /* Links on dark */
  --dark-text-link-hover: #b3adfa;  /* Link hover on dark */

  /* ===========================================
   * TEXT COLORS - FOR BRIGHT COLORED BACKGROUNDS
   * Use these on yellow, orange, lime green, light blue, etc.
   * Black provides best contrast on bright colors
   * =========================================== */

  --bright-text: #000000;           /* Black text on bright backgrounds */
  --bright-text-secondary: #1a1a1a; /* Slightly softer black */

  /* ===========================================
   * BACKGROUND COLORS - LIGHT THEME
   * Surface and container backgrounds
   * =========================================== */

  --light-bg-page: #ffffff;         /* Page/body background */
  --light-bg-primary: #ffffff;      /* Primary light background (buttons, controls) */
  --light-bg-elevated: #ffffff;     /* Elevated surfaces (toolbars, control bars) */
  --light-bg-surface: #f7f7fc;      /* Cards, panels, elevated surfaces */
  --light-bg-subtle: #f3f3f9;       /* Subtle distinction from page */
  --light-bg-hover: #e9e9f2;        /* Hover states */

  /* ===========================================
   * BACKGROUND COLORS - DARK THEME
   * Dark panels, map overlays, popups
   * =========================================== */

  --dark-bg-page: #1a1a2e;          /* Dark page/body */
  --dark-bg-surface: #252542;       /* Dark cards, elevated surfaces */
  --dark-bg-panel: #16213e;         /* Dark panels */
  --dark-bg-hover: #2a2a4a;         /* Dark hover states */
  --dark-bg-overlay: rgba(0, 0, 0, 0.85); /* Translucent overlay */
  --dark-bg-translucent: rgba(0, 0, 0, 0.75);

  /* Common dark grays for panels */
  --panel-bg-dark: #333333;         /* Standard dark panel */
  --panel-bg-darker: #222222;       /* Darker panel */
  --panel-bg-darkest: #1a1a1a;      /* Darkest panel */

  /* ===========================================
   * BORDER COLORS
   * =========================================== */

  --light-border: #e9e9f2;          /* Borders on light backgrounds */
  --light-border-strong: #dfdfeb;   /* Stronger border definition */
  --dark-border: #444444;           /* Borders on dark backgrounds */
  --dark-border-subtle: #555555;    /* Subtle dark borders */
  --dark-border-highlight: rgba(255, 255, 255, 0.15);

  /* ===========================================
   * FORM COLORS
   * Input fields, placeholders, validation
   * =========================================== */

  --input-placeholder: #6b7280;     /* Placeholder text */
  --input-disabled-bg: #f3f3f9;     /* Disabled input background */
  --input-disabled-text: #9ca3af;   /* Disabled input text */
  --input-focus-border: rgba(51, 46, 122, 0.35);  /* brand-primary with alpha */
  --input-focus-shadow: rgba(51, 46, 122, 0.15);  /* brand-primary with alpha */

  /* ===========================================
   * MAP & POPUP COLORS
   * MapLibre popups, Leaflet, map controls
   * =========================================== */

  --map-popup-bg: #1a1a2e;
  --map-popup-bg-header: #252542;
  --map-popup-text: #e5e5e5;
  --map-popup-text-muted: #b3b3b3;
  --map-popup-text-label: #999999;
  --map-popup-border: #444444;

  --map-control-bg: rgba(0, 0, 0, 0.85);
  --map-control-text: #cccccc;
  --map-control-text-muted: #aaaaaa;

  /* ===========================================
   * WEATHER PANEL COLORS
   * Weather overlays, alerts, hazard panels
   * =========================================== */

  --weather-panel-bg: #333333;
  --weather-panel-header: #444444;
  --weather-panel-text: #e5e5e5;
  --weather-panel-text-muted: #b3b3b3;
  --weather-panel-text-label: #aaaaaa;
  --weather-panel-border: #555555;

  /* ===========================================
   * TMI COMPLIANCE ANALYSIS
   * Neutral data distinction (not judgmental)
   * =========================================== */

  --tmi-data-neutral:      #6b7280;    /* Compliant pairs - baseline gray */
  --tmi-data-attention:    #374151;    /* Non-compliant - darker, draws eye */
  --tmi-scale-bar:         #374151;    /* Required spacing reference */
  --tmi-gap-indicator:     #9ca3af;    /* Time gaps between non-consecutive flights */

  /* TMI flow visualization */
  --tmi-flow-cone-fill:    rgba(107, 114, 128, 0.12);
  --tmi-flow-cone-border:  rgba(107, 114, 128, 0.35);
  --tmi-stream-highlight:  #4b5563;

  /* ===========================================
   * CHART & DATA VISUALIZATION
   * =========================================== */

  --chart-axis-text: rgba(255, 255, 255, 0.7);
  --chart-grid-line: rgba(255, 255, 255, 0.1);
  --chart-label: #cccccc;

  /* ===========================================
   * COMPONENT-SPECIFIC TOKENS
   * =========================================== */

  /* Tabs */
  --tab-inactive: #b3b3b3;
  --tab-active: #ffffff;
  --tab-hover: #e5e5e5;

  /* Badges on dark */
  --badge-muted-bg: #495057;
  --badge-muted-text: #cccccc;

  /* Tables on dark */
  --table-header: #cccccc;
  --table-cell: #e5e5e5;
  --table-cell-muted: #b3b3b3;

  /* Lists on dark */
  --list-text: #cccccc;
  --list-text-muted: #aaaaaa;

  /* ===========================================
   * BODY & SCROLLBAR
   * Page-level tokens
   * =========================================== */

  --body-text: #262633;               /* Body text color */
  --scrollbar-track: #f1f1f1;         /* Scrollbar track background */
  --scrollbar-thumb: #919090;         /* Scrollbar thumb */
  --scrollbar-thumb-hover: #777777;   /* Scrollbar thumb hover */
  --dropdown-hover-bg: hsl(216, 7%, 86%); /* Dropdown item hover */

  /* ===========================================
   * GRADIENT COLOR STOPS
   * Tokenized stops for perti_theme.css gradients
   * =========================================== */

  --gradient-ocean-start: #435ee7;
  --gradient-ocean-end: #044f99;
  --gradient-forest-start: #71ec52;
  --gradient-forest-end: #077e42;
  --gradient-magenta-start: #fc64bd;
  --gradient-magenta-end: #8912c9;
  --gradient-candy-start: #f12ac3;
  --gradient-candy-end: #2f62b4;
  --gradient-danger-start: #b35100;
  --gradient-danger-end: #bd1d1d;
  --gradient-discord-start: #7289DA;
  --gradient-discord-end: #4a5c9c;
  --discord-purple-rgb: 114, 137, 218;  /* RGB values for Discord purple (for use with rgba()) */
  --gradient-utc-start: #667eea;     /* UTC clock gradient start - purple */
  --gradient-utc-end: #764ba2;       /* UTC clock gradient end - purple */
  --link-purple-hover: #5b6eae;      /* Muted purple for link hover states */
  --gradient-table-header-start: #1a5276; /* Table header gradient - dark blue */
  --gradient-table-header-end: #2874a6;   /* Table header gradient - medium blue */
  --table-header-bg: #1a5276;        /* Solid table header background */
  --gradient-dark-start: rgba(43, 45, 66, 1);
  --gradient-dark-end: rgba(130, 138, 146, 1);

  /* ===========================================
   * BOOTSTRAP GRAY SCALE
   * Standard Bootstrap 4/5 gray palette
   * =========================================== */

  --gray-100: #f8f9fa;              /* Lightest gray - backgrounds */
  --gray-200: #e9ecef;              /* Very light gray - borders, hover states */
  --gray-300: #dee2e6;              /* Light gray - borders, dividers */
  --gray-400: #ced4da;              /* Medium-light gray - disabled borders */
  --gray-500: #adb5bd;              /* Medium gray - placeholders */
  --gray-600: #6c757d;              /* Medium-dark gray - muted text */
  --gray-700: #495057;              /* Dark gray - secondary text */
  --gray-800: #212529;              /* Very dark gray - primary text */
  --gray-900: #333333;              /* Darkest gray - headings */

  /* Tailwind slate scale (for info components) */
  --slate-300: #cbd5e1;             /* Slate 300 - separators */
  --slate-400: #94a3b8;             /* Slate 400 - muted labels */
  --slate-500: #64748b;             /* Slate 500 - secondary text */
  --slate-700: #334155;             /* Slate 700 - primary text on light */
  --slate-50: #f8fafc;              /* Slate 50 - very light background */
  --slate-100: #f1f5f9;             /* Slate 100 - light background */
  --slate-200: #e2e8f0;             /* Slate 200 - light gray backgrounds */

  /* Weather badge gradients (Tailwind colors) */
  --weather-vmc-start: #22c55e;     /* VMC - green-500 */
  --weather-vmc-end: #16a34a;       /* VMC - green-600 */
  --weather-mvfr-start: #3b82f6;    /* MVFR - blue-500 */
  --weather-mvfr-end: #2563eb;      /* MVFR - blue-600 */
  --weather-ifr-start: #ef4444;     /* IFR - red-500 */
  --weather-ifr-end: #dc2626;       /* IFR - red-600 */
  --weather-lifr-start: #a855f7;    /* LIFR - purple-500 */
  --weather-lifr-end: #9333ea;      /* LIFR - purple-600 */

  /* ATIS badge colors */
  --atis-badge-start: #10b981;      /* Emerald-500 */
  --atis-badge-end: #059669;        /* Emerald-600 */

  /* Age badge colors */
  --age-normal-bg: #e2e8f0;         /* Slate-200 */
  --age-normal-text: #64748b;       /* Slate-500 */
  --age-stale-bg: #fef3c7;          /* Amber-100 */
  --age-stale-text: #92400e;        /* Amber-800 */
  --age-old-bg: #fee2e2;            /* Red-100 */
  --age-old-text: #991b1b;          /* Red-800 */

  /* Status indicator colors */
  --status-active-start: #dcfce7;   /* Green-100 */
  --status-active-end: #bbf7d0;     /* Green-200 */
  --status-active-text: #15803d;    /* Green-700 */

  /* Weather hazard type colors */
  --hazard-convective-start: #FF0000;  /* Convective (thunderstorms) - red */
  --hazard-convective-end: #CC0000;    /* Convective gradient end */
  --hazard-turb-start: #FFA500;        /* Turbulence - orange */
  --hazard-turb-end: #CC8400;          /* Turbulence gradient end */
  --hazard-ice-start: #00BFFF;         /* Icing - cyan */
  --hazard-ice-end: #0099CC;           /* Icing gradient end */
  --hazard-ifr-start: #808080;         /* IFR conditions - gray */
  --hazard-ifr-end: #666666;           /* IFR gradient end */
  --hazard-mtn-start: #8B4513;         /* Mountain obscuration - brown */
  --hazard-mtn-end: #704010;           /* Mountain gradient end */

  /* Weather impact severity colors */
  --impact-direct: #FF4444;            /* Direct weather impact - bright red */
  --impact-clear: #4CAF50;             /* Clear/no weather impact - green */

  /* Mobile navigation accent */
  --nav-accent-cyan: #4dd0e1;          /* Cyan accent for mobile nav links */

  /* ===========================================
   * TMI INITIATIVE LEVEL COLORS
   * Severity and type indicators for initiative timeline
   * =========================================== */

  /* Collaborative Decision Making levels */
  --level-cdw: #ffff00;             /* CDW - bright yellow */
  --level-cdw-border: #cc0000;      /* CDW border - red */
  --level-possible: #ffffcc;        /* Possible - pale yellow */
  --level-possible-border: #cccc00; /* Possible border - yellow */
  --level-probable: #ffe6b3;        /* Probable - pale orange */
  --level-probable-border: #ff9900; /* Probable border - orange */
  --level-expected: #b3e0ff;        /* Expected - pale blue */
  --level-expected-border: #cc0000; /* Expected border - red */

  /* Active initiative levels */
  --level-active: #cc0000;          /* Active - red */
  --level-active-border: #990000;   /* Active border - dark red */
  --level-advisory-terminal: #cc3333; /* Terminal advisory - light red */
  --level-advisory-enroute: #90c695; /* EnRoute advisory - sage green */

  /* Special initiative types */
  --level-special-event: #d4af37;   /* Special event - gold */
  --level-space-op: #2d5a27;        /* Space operation - dark green */
  --level-vip: #ff8c00;             /* VIP operation - dark orange */
  --level-staffing: #ff6347;        /* Staffing issue - tomato */
  --level-misc: #333333;            /* Miscellaneous - dark gray */
  --level-constraint-enroute: #b30000; /* EnRoute constraint - dark red */
  --level-constraint-border: #800000; /* Constraint border - maroon */

  /* ===========================================
   * INITIATIVE SECTION GRADIENTS
   * Background gradients for initiative modal sections
   * =========================================== */

  /* TMI section - blue tones */
  --section-tmi-start: #cce5ff;
  --section-tmi-end: #e2f0ff;
  --section-tmi-text: #004085;

  /* VIP section - orange tones */
  --section-vip-start: #ffe4cc;
  --section-vip-end: #fff0e6;
  --section-vip-text: #8a4500;

  /* Space section - green tones */
  --section-space-start: #c3e6cb;
  --section-space-end: #d9f0de;
  --section-space-text: #155724;

  /* Staffing section - red tones */
  --section-staffing-start: #ffcccc;
  --section-staffing-end: #ffe6e6;
  --section-staffing-text: #721c24;

  /* Event section - yellow tones */
  --section-event-start: #fff3cd;
  --section-event-end: #fffbe6;
  --section-event-text: #856404;

  /* CDW section - amber tones */
  --section-cdw-start: #ffc107;
  --section-cdw-end: #ffe066;
  --section-cdw-text: #6d4c00;

  /* Misc section - gray tones */
  --section-misc-start: #d6d8db;
  --section-misc-end: #e9ecef;
  --section-misc-text: #383d41;

  /* Constraint section - pink tones */
  --section-constraint-start: #f5c6cb;
  --section-constraint-end: #f8d7da;
  --section-constraint-text: #721c24;

  /* Time section - gray tones */
  --section-time-start: #e2e3e5;
  --section-time-end: #f5f5f5;
  --section-time-text: #383d41;

  /* ===========================================
   * BOOTSTRAP THEME GRAYS
   * Original theme palette grays (from Bootstrap SCSS customization)
   * Note: --theme-text-muted (#9e9fb4) fails WCAG AA on white.
   * Use --light-text-muted for accessible alternatives.
   * =========================================== */

  --theme-text-gray: #737491;        /* Theme gray - general UI text */
  --theme-text-gray-dark: #4a4b65;   /* Theme gray-dark - headings, emphasis */
  --theme-text-muted: #9e9fb4;       /* Theme muted - placeholders, breadcrumbs (low contrast) */

  /* ===========================================
   * LEGACY COMPATIBILITY ALIASES
   * Old variable names mapped to new system
   * (For backward compatibility during transition)
   * =========================================== */

  /* These map old names to new names */
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-muted: var(--light-text-muted);
  --text-disabled: var(--light-text-disabled);
  --text-placeholder: var(--light-text-placeholder);

  --text-on-dark-primary: var(--dark-text-primary);
  --text-on-dark-secondary: var(--dark-text-secondary);
  --text-on-dark-muted: var(--dark-text-muted);
  --text-on-dark-subtle: var(--dark-text-subtle);
  --text-on-dark-disabled: var(--dark-text-disabled);

  --text-on-bright: var(--bright-text);
  --text-on-warning: var(--bright-text);
  --text-on-success: #ffffff;
  --text-on-danger: #ffffff;
  --text-on-info: #ffffff;
  --text-on-primary: #ffffff;

  --bg-body: var(--light-bg-page);
  --bg-light: var(--light-bg-surface);
  --bg-subtle: var(--light-bg-subtle);
  --bg-dark: var(--dark-bg-page);
  --bg-dark-elevated: var(--dark-bg-surface);
  --bg-dark-surface: var(--dark-bg-panel);
  --bg-dark-overlay: var(--dark-bg-overlay);
  --bg-dark-translucent: var(--dark-bg-translucent);
  --bg-panel-dark: var(--panel-bg-dark);
  --bg-panel-darker: var(--panel-bg-darker);
  --bg-panel-darkest: var(--panel-bg-darkest);

  --border-light: var(--light-border);
  --border-medium: var(--light-border-strong);
  --border-dark: var(--dark-border);
  --border-dark-subtle: var(--dark-border-subtle);
  --border-on-dark: var(--dark-border-highlight);
}

/* ===========================================
 * DARK THEME OVERRIDES
 * Apply .dark-theme class to body or container
 * =========================================== */

.dark-theme {
  --light-bg-page: var(--dark-bg-page);
  --light-bg-surface: var(--dark-bg-surface);
  --light-bg-subtle: var(--dark-bg-panel);

  --light-text-primary: var(--dark-text-primary);
  --light-text-secondary: var(--dark-text-secondary);
  --light-text-muted: var(--dark-text-muted);
  --light-text-disabled: var(--dark-text-disabled);
  --light-text-placeholder: var(--dark-text-subtle);

  --light-border: var(--dark-border);
  --light-border-strong: var(--dark-border-subtle);

  --light-text-link: var(--dark-text-link);
  --light-text-link-hover: var(--dark-text-link-hover);
}

/* ===========================================
 * UTILITY CLASSES
 * Quick access to common color patterns
 * =========================================== */

/* Text on dark backgrounds */
.text-on-dark { color: var(--dark-text-primary) !important; }
.text-on-dark-secondary { color: var(--dark-text-secondary) !important; }
.text-on-dark-muted { color: var(--dark-text-muted) !important; }
.text-on-dark-subtle { color: var(--dark-text-subtle) !important; }

/* Accessible alternatives to Bootstrap classes */
.text-muted-accessible { color: var(--light-text-muted) !important; }
.text-secondary-accessible { color: var(--light-text-secondary) !important; }

/* ===========================================
 * BOOTSTRAP OVERRIDES
 * Fix contrast issues in Bootstrap theme.css
 * =========================================== */

/* Fix alert text that was nearly invisible */
.alert-light,
.alert-secondary,
.badge-light,
.badge-secondary {
  color: var(--light-text-primary) !important;
}

/* Fix .text-muted - original #9e9fb4 has poor contrast */
.text-muted {
  color: var(--light-text-muted) !important;
}

/* Fix .text-secondary - original #f7f7fc was nearly invisible */
.text-secondary {
  color: var(--light-text-secondary) !important;
}

/* Fix breadcrumb contrast on dark backgrounds */
.breadcrumb-light .breadcrumb-item.active {
  color: var(--dark-text-muted) !important;
}

/* Fix pagination disabled state */
.page-item.disabled .page-link {
  color: var(--light-text-muted) !important;
}

/* Fix form placeholders */
.form-control::placeholder,
.custom-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1;
}

/* Fix disabled form elements */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  color: var(--light-text-muted);
}

/* Fix dropdown disabled items */
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--light-text-muted);
}

/* Fix nav disabled items */
.nav-link.disabled {
  color: var(--light-text-muted) !important;
}

/* Fix list group disabled */
.list-group-item.disabled,
.list-group-item:disabled {
  color: var(--light-text-muted);
}

/* ===========================================
 * NOD PAGE SPECIFIC
 * =========================================== */

.nod-status-badge.tmu-none {
  color: var(--dark-text-muted) !important;
}

.nod-panel-tab {
  color: var(--tab-inactive) !important;
}

.nod-panel-tab.active,
.nod-panel-tab:hover {
  color: var(--tab-active) !important;
}

/* ===========================================
 * MAP POPUP OVERRIDES
 * =========================================== */

.dark-popup .maplibregl-popup-content,
.dark-popup .leaflet-popup-content,
.maplibregl-popup-content.dark-popup,
.leaflet-popup-content.dark-popup {
  background: var(--map-popup-bg);
  color: var(--map-popup-text);
}

/* ===========================================
 * PLUGIN OVERRIDES
 * =========================================== */

/* Datetimepicker dark mode */
.dark-theme .bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dark {
  background: var(--dark-bg-page);
  color: var(--dark-text-primary);
}

.dark-theme .bootstrap-datetimepicker-widget td,
.dark-theme .bootstrap-datetimepicker-widget th,
.bootstrap-datetimepicker-widget.dark td,
.bootstrap-datetimepicker-widget.dark th {
  color: var(--dark-text-secondary);
}

.dark-theme .bootstrap-datetimepicker-widget td.disabled,
.bootstrap-datetimepicker-widget.dark td.disabled {
  color: var(--dark-text-disabled);
}

/* Select2 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--input-placeholder);
}

.select2-container--bootstrap-5 .select2-results__option--disabled {
  color: var(--light-text-muted);
}

/* ===========================================
 * QUICK REFERENCE - COLOR MAPPING
 * ===========================================
 *
 * OLD HARDCODED VALUE  →  NEW VARIABLE
 * =====================================================
 *
 * ON DARK BACKGROUNDS:
 *   #666              →  var(--dark-text-disabled)
 *   #888              →  var(--dark-text-subtle)
 *   #999              →  var(--dark-text-subtle)
 *   #aaa              →  var(--dark-text-muted)
 *   #bbb              →  var(--dark-text-secondary)
 *   #ccc              →  var(--dark-text-secondary)
 *   #ddd, #eee, #fff  →  var(--dark-text-primary)
 *
 * ON LIGHT BACKGROUNDS:
 *   #9e9fb4           →  var(--light-text-muted)
 *   #737491           →  var(--light-text-muted)
 *   #5a5b75           →  var(--light-text-secondary)
 *   #4a4b65           →  var(--light-text-secondary)
 *   #37384e           →  var(--light-text-primary)
 *
 * ON BRIGHT COLORED BACKGROUNDS:
 *   #333              →  var(--bright-text)  [change to #000]
 *
 */