/*!
 * =======================================================================
 * EASY PARCEL ADMIN THEME - THEME CUSTOMIZATION SYSTEM
 * =======================================================================
 * 
 * This file provides a comprehensive theming system using CSS Custom Properties.
 * Simply modify the brand colors at the top to change the entire theme appearance.
 * 
 * Author: Angelo D'Agostino
 * Website: https://www.easyparcel.io
 * Version: 1.0.0
 * Last Updated: July 2025
 * 
 * =======================================================================
 * 
 * USAGE INSTRUCTIONS:
 * 
 * 1. BASIC BRANDING:
 *    Change the values in the ":root" section below to match your brand colors.
 *    The theme will automatically generate all variations and states.
 * 
 * 2. ADVANCED CUSTOMIZATION:
 *    Uncomment and modify the color variations in the "Advanced Color System"
 *    section for more granular control.
 * 
 * 3. DARK MODE:
 *    The dark mode adaptations are automatically handled.
 *    Customize the dark theme variables if needed.
 * 
 * =======================================================================
 */

/* 
 * =======================================================================
 * 🎨 BRAND COLOR CONFIGURATION
 * =======================================================================
 * 
 * ⚡ QUICK SETUP: Change these values to match your brand!
 * All other colors will be automatically calculated from these base values.
 */

:root {
  /* 
   * 🏢 PRIMARY BRAND COLORS
   * These are the main colors that define your brand identity
   */
  --brand-primary: #1e40af;              /* 🔵 Your Primary Brand Color (Blue) */
  --brand-secondary: #f97316;            /* 🟠 Your Secondary Brand Color (Orange) */
  
  /* 🎯 LOGO SPECIFIC VARIABLES FOR SVG */
  --brand-primary-dark: #f8fafc;         /* ⚪ Light color for logo in dark mode */
  --brand-secondary-dark: #f97316;       /* 🟠 Keep accent color in dark mode */
  
  /* 🎯 SMART TEXT COLORS FOR READABILITY
   * Automatically calculated contrasting text colors for optimal readability
   */
  --brand-primary-text: #ffffff;         /* ⚪ White text for dark blue backgrounds */
  --brand-secondary-text: #ffffff;       /* ⚪ White text for orange backgrounds */
  --brand-primary-contrast: #1e40af;     /* 🔵 Primary color for light backgrounds */
  --brand-secondary-contrast: #ea580c;   /* 🟠 Darker orange for light backgrounds */
  
  /* 
   * 📊 SEMANTIC COLORS
   * Harmonized enterprise colors that complement your blue/orange branding
   */
  --brand-success: #059669;              /* 🟢 Professional Forest Green - for success states */
  --brand-danger: #dc2626;               /* 🔴 Professional Crimson Red - for danger states */
  --brand-warning: #d97706;              /* 🟡 Harmonized Amber - complements your orange */
  --brand-info: #0284c7;                 /* 🔷 Harmonized Sky Blue - complements your primary */
  
  /* 
   * 🎭 ENTERPRISE NEUTRAL COLORS
   * Professional color palette for backgrounds, text, and surfaces
   */
  --brand-light: #f8fafc;                /* 🤍 Clean Light Gray - modern and crisp */
  --brand-dark: #1e293b;                 /* 🖤 Professional Slate - sophisticated dark */
  --brand-white: #ffffff;                /* ⚪ Pure White */
  --brand-body-color: #334155;           /* 📝 Professional Text Gray - easy on eyes */
  --brand-light-bg: #f1f5f9;             /* 🌫️ Subtle Background - enterprise feel */
  
  /* 
   * 🎯 AUTOMATIC COLOR GENERATION
   * These are automatically calculated from your brand colors above.
   * You don't need to change these unless you want very specific control.
   */
  
  /* Primary Color Variations - Professional Blue Gradation */
  --primary-rgb: 30, 64, 175;            /* RGB values for transparency effects */
  --primary-hover: #1d4ed8;              /* Hover state - slightly deeper blue */
  --primary-active: #1e3a8a;             /* Active state - rich navy blue */
  --primary-light: rgba(30, 64, 175, 0.08);      /* Light background variant - subtle */
  --primary-border: rgba(30, 64, 175, 0.25);     /* Border variant - clean lines */
  
  /* Secondary Color Variations - Harmonious Orange Gradation */
  --secondary-rgb: 249, 115, 22;
  --secondary-hover: #ea580c;            /* Hover state - deeper orange */
  --secondary-active: #c2410c;           /* Active state - rich burnt orange */
  --secondary-light: rgba(249, 115, 22, 0.08);
  --secondary-border: rgba(249, 115, 22, 0.25);
  
  /* Success Color Variations - Professional Green Gradation */
  --success-rgb: 5, 150, 105;
  --success-hover: #047857;              /* Deeper forest green */
  --success-active: #065f46;             /* Rich emerald green */
  --success-light: rgba(5, 150, 105, 0.08);
  --success-border: rgba(5, 150, 105, 0.25);
  
  /* Danger Color Variations - Professional Red Gradation */
  --danger-rgb: 220, 38, 38;
  --danger-hover: #b91c1c;               /* Deeper crimson */
  --danger-active: #991b1b;              /* Rich burgundy red */
  --danger-light: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.25);
  
  /* Warning Color Variations - Harmonized Amber Gradation */
  --warning-rgb: 217, 119, 6;
  --warning-hover: #b45309;              /* Deeper amber */
  --warning-active: #92400e;             /* Rich golden brown */
  --warning-light: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.25);
  
  /* Info Color Variations - Harmonized Sky Blue Gradation */
  --info-rgb: 2, 132, 199;
  --info-hover: #0369a1;                 /* Deeper sky blue */
  --info-active: #075985;                /* Rich ocean blue */
  --info-light: rgba(2, 132, 199, 0.08);
  --info-border: rgba(2, 132, 199, 0.25);
  
  /* Light Color Variations - Enterprise Light Gradation */
  --light-rgb: 248, 250, 252;
  --light-hover: #e2e8f0;                /* Subtle gray hover */
  --light-active: #cbd5e1;               /* Professional gray active */
  --light-light: rgba(248, 250, 252, 0.5);
  --light-border: rgba(248, 250, 252, 0.8);
  
  /* Dark Color Variations - Professional Slate Gradation */
  --dark-rgb: 30, 41, 59;
  --dark-hover: #0f172a;                 /* Deep midnight */
  --dark-active: #020617;                /* Rich charcoal */
  --dark-light: rgba(30, 41, 59, 0.08);
  --dark-border: rgba(30, 41, 59, 0.25);
}

/* 
 * =======================================================================
 * 🌙 DARK MODE ADAPTATIONS
 * =======================================================================
 * These colors are applied when the body has the "dark-only" class
 */

body.dark {
  /* Enterprise Dark Mode - Professional color adaptations */
  --brand-light-bg: #0f172a;             /* 🌙 Deep midnight background */
  --brand-white: #1e293b;                /* 🌑 Professional dark surface */
  --brand-body-color: rgba(255, 255, 255, 0.87);  /* 📝 High contrast text */
  --brand-light: #334155;                /* 🌫️ Medium slate for contrast */
  
  /* 🎨 LOGO VARIABLES FOR DARK MODE */
  --brand-primary-dark: #f8fafc;         /* ⚪ Light color for logo in dark mode */
  --brand-secondary-dark: #f97316;       /* 🟠 Keep accent color in dark mode */
  
  /* Enhanced backgrounds for professional dark theme */
  --light-background: rgba(15, 23, 42, 0.75);      /* Deep overlay */
  --recent-chart-bg: #1e293b;                      /* Chart background */
  --recent-box-bg: #0f172a;                        /* Box background */
  --course-light- : #334155;                     /* Button background */
  --view-grid-bg: #1e293b;                         /* Grid background */
  
  /* Refined borders for enterprise dark mode */
  --sidebar-border: rgba(255, 255, 255, 0.08);     /* Subtle borders */
  --chart-border: #475569;                         /* Chart borders */
  --recent-border: #475569;                        /* Content borders */
  --view-border-marker: rgba(71, 85, 105, 0.6);    /* Marker borders */
  
  /* Enhanced primary color for dark mode visibility */
  --brand-primary: #3b82f6;              /* 🔵 Brighter blue for dark mode */
  --primary-hover: #2563eb;              /* Enhanced hover state */
  --primary-active: #1d4ed8;             /* Enhanced active state */
}

/* 
 * =======================================================================
 * 🎨 COMPREHENSIVE COLOR SYSTEM OVERRIDE
 * =======================================================================
 * This section overrides all the colors in app.css with our themed variables
 */

/* 
 * -----------------------------------------------------------------------
 * 🔧 CORE THEME VARIABLES UPDATE
 * -----------------------------------------------------------------------
 * Update the main theme variables used throughout the application
 */

:root {
  /* Override the existing theme variables */
  --theme-default: var(--brand-primary);
  --theme-secondary: var(--brand-secondary);
  --color-success: var(--brand-success);
  --color-danger: var(--brand-danger);
  --color-warning: var(--brand-warning);
  --color-info: var(--brand-info);
  --white: var(--brand-white);
  --body-font-color: var(--brand-body-color);
  --light-bg: var(--brand-light-bg);
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 Logo COLORS
 * -----------------------------------------------------------------------
 * All logo color utilities using the brand colors
 */
.logo-fill-primary {
  fill: var(--brand-primary) !important;
}

.logo-fill-accent {
  fill: var(--brand-secondary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📏 LOGO SIZE CONSTRAINTS
 * -----------------------------------------------------------------------
 * Control logo dimensions in the sidebar
 */
.logo-wrapper img {
  max-width: 170px !important;
  height: auto !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 TEXT COLORS
 * -----------------------------------------------------------------------
 * All text color utilities using the brand colors
 */

.font-primary,
.txt-primary {
  color: var(--brand-primary) !important;
}

.font-secondary,
.txt-secondary {
  color: var(--brand-secondary) !important;
}

.font-success,
.txt-success {
  color: var(--brand-success) !important;
}

.font-danger,
.txt-danger {
  color: var(--brand-danger) !important;
}

.font-info,
.txt-info {
  color: var(--brand-info) !important;
}

.font-light,
.txt-light {
  color: var(--brand-light) !important;
}

.font-dark,
.txt-dark {
  color: var(--brand-dark) !important;
}

.font-warning,
.txt-warning {
  color: var(--brand-warning) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 BACKGROUND COLORS
 * -----------------------------------------------------------------------
 * All background color utilities using the brand colors
 */

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

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

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

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

.bg-success {
  background-color: var(--brand-success) !important;
}

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

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

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

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

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

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

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

.bg-dark {
  background-color: var(--brand-dark) !important;
}

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

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

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

/* 
 * -----------------------------------------------------------------------
 * 🏷️ LABELS AND BADGES
 * -----------------------------------------------------------------------
 * All label and badge color utilities
 */

.label-theme,
.label-primary,
.badge-primary {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

.label-secondary,
.badge-secondary {
  background-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
}

.label-success,
.badge-success {
  background-color: var(--brand-success) !important;
  color: #ffffff !important;
}

.label-danger,
.badge-danger {
  background-color: var(--brand-danger) !important;
  color: #ffffff !important;
}

.label-info,
.badge-info {
  background-color: var(--brand-info) !important;
  color: #ffffff !important;
}

.label-light,
.badge-light {
  background-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}

.label-dark,
.badge-dark {
  background-color: var(--brand-dark) !important;
  color: #ffffff !important;
}

.label-warning,
.badge-warning {
  background-color: var(--brand-warning) !important;
  color: #ffffff !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 LIGHT BADGES (SUBTLE BACKGROUND VARIANTS)
 * -----------------------------------------------------------------------
 * Light badge variations with subtle backgrounds
 */

.badge-light-primary {
  background-color: var(--primary-light) !important;
  color: var(--brand-primary-contrast) !important;
}

.badge-light-secondary {
  background-color: var(--secondary-light) !important;
  color: var(--brand-secondary-contrast) !important;
}

.badge-light-success {
  background-color: var(--success-light) !important;
  color: var(--brand-success) !important;
}

.badge-light-danger {
  background-color: var(--danger-light) !important;
  color: var(--brand-danger) !important;
}

.badge-light-info {
  background-color: var(--info-light) !important;
  color: var(--brand-info) !important;
}

.badge-light-warning {
  background-color: var(--warning-light) !important;
  color: var(--brand-warning) !important;
}

.badge-light-light {
  background-color: var(--light-light) !important;
  color: var(--brand-dark) !important;
}

.badge-light-dark {
  background-color: var(--dark-light) !important;
  color: var(--brand-dark) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🖱️ BADGE HOVER STATES
 * -----------------------------------------------------------------------
 * Enhanced hover effects for all badge types
 */

/* Regular badge hover states */
a.badge:hover {
  color: inherit !important;
  transform: translateY(-1px) !important;
  transition: all 0.3s ease !important;
}

a.badge:hover.badge-dark:hover {
  color: #fff !important;
}

/* Primary badge hover states */
a.badge-primary:hover,
.badge-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Secondary badge hover states */
a.badge-secondary:hover,
.badge-secondary:hover {
  background-color: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
}

/* Success badge hover states */
a.badge-success:hover,
.badge-success:hover {
  background-color: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
}

/* Danger badge hover states */
a.badge-danger:hover,
.badge-danger:hover {
  background-color: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
}

/* Info badge hover states */
a.badge-info:hover,
.badge-info:hover {
  background-color: var(--info-hover) !important;
  border-color: var(--info-hover) !important;
}

/* Warning badge hover states */
a.badge-warning:hover,
.badge-warning:hover {
  background-color: var(--warning-hover) !important;
  border-color: var(--warning-hover) !important;
}

/* Light badge hover states */
a.badge-light:hover,
.badge-light:hover {
  background-color: var(--light-hover) !important;
  border-color: var(--light-hover) !important;
}

/* Dark badge hover states */
a.badge-dark:hover,
.badge-dark:hover {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-hover) !important;
}

/* Light badge hover states */
a.badge-light-primary:hover,
.badge-light-primary:hover,
.header-top a.btn.badge-light-primary:hover,
.recent-table tr:hover .badge-light-primary {
  background-color: var(--primary-border) !important;
  color: var(--primary-hover) !important;
}

a.badge-light-secondary:hover,
.badge-light-secondary:hover {
  background-color: var(--secondary-border) !important;
  color: var(--secondary-hover) !important;
}

a.badge-light-success:hover,
.badge-light-success:hover {
  background-color: var(--success-border) !important;
  color: var(--success-hover) !important;
}

a.badge-light-danger:hover,
.badge-light-danger:hover {
  background-color: var(--danger-border) !important;
  color: var(--danger-hover) !important;
}

a.badge-light-info:hover,
.badge-light-info:hover {
  background-color: var(--info-border) !important;
  color: var(--info-hover) !important;
}

a.badge-light-warning:hover,
.a.badge-light-warning:hover {
  background-color: var(--warning-border) !important;
  color: var(--warning-hover) !important;
}

a.badge-light-light:hover,
.badge-light-light:hover {
  background-color: var(--light-border) !important;
  color: var(--light-hover) !important;
}

a.badge-light-dark:hover,
.badge-light-dark:hover {
  background-color: var(--dark-border) !important;
  color: var(--dark-hover) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🌙 DARK MODE BADGE ADAPTATIONS
 * -----------------------------------------------------------------------
 * Dark mode specific badge styling
 */
  color-scheme: dark;

/* Brand Logo Fill Colors */
body.dark .logo-fill-primary {
  fill: var(--brand-primary-dark) !important; /* Light color for primary logo in dark mode */
}

body.dark .logo-fill-accent {
  fill: var(--brand-secondary-dark) !important; /* Keep accent color in dark mode */
}

body.dark .badge-light-primary {
  background-color: rgba(var(--primary-rgb), 0.15) !important;
  color: #3b82f6 !important;
}

body.dark .badge-light-secondary {
  background-color: rgba(var(--secondary-rgb), 0.15) !important;
  color: var(--brand-secondary) !important;
}

body.dark .badge-light-success {
  background-color: rgba(var(--success-rgb), 0.15) !important;
  color: var(--brand-success) !important;
}

body.dark .badge-light-danger {
  background-color: rgba(var(--danger-rgb), 0.15) !important;
  color: var(--brand-danger) !important;
}

body.dark .badge-light-info {
  background-color: rgba(var(--info-rgb), 0.15) !important;
  color: var(--brand-info) !important;
}

body.dark .badge-light-warning {
  background-color: rgba(var(--warning-rgb), 0.15) !important;
  color: var(--brand-warning) !important;
}

body.dark .badge-light-light {
  background-color: rgba(248, 250, 252, 0.15) !important;
  color: var(--brand-white) !important;
}

body.dark .badge-light-dark {
  background-color: rgba(var(--dark-rgb), 0.25) !important;
  color: var(--brand-white) !important;
}

/* Dark mode hover states */
body.dark .btn.badge-light-primary:hover,
body.dark a.badge-light-primary:hover,
body.dark .badge-light-primary:hover {
  background-color: rgba(var(--primary-rgb), 0.25) !important;
  color: #3b82f6 !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🔘 BUTTONS
 * -----------------------------------------------------------------------
 * All button styling with brand colors and their variations
 */

/* Primary Buttons */
.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--brand-primary-text) !important;
}

.btn-primary:not([disabled]):not(.disabled).active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: var(--brand-primary-text) !important;
}

/* Secondary Buttons */
.btn-secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  background-color: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
  color: var(--brand-secondary-text) !important;
}

.btn-secondary:not([disabled]):not(.disabled).active {
  background-color: var(--secondary-active) !important;
  border-color: var(--secondary-active) !important;
}

/* Success Buttons */
.btn-success {
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
}

.btn-success:not([disabled]):not(.disabled).active {
  background-color: var(--success-active) !important;
  border-color: var(--success-active) !important;
}

/* Danger Buttons */
.btn-danger {
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
}

.btn-danger:not([disabled]):not(.disabled).active {
  background-color: var(--danger-active) !important;
  border-color: var(--danger-active) !important;
}

/* Info Buttons */
.btn-info {
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: var(--info-hover) !important;
  border-color: var(--info-hover) !important;
}

.btn-info:not([disabled]):not(.disabled).active {
  background-color: var(--info-active) !important;
  border-color: var(--info-active) !important;
}

/* Warning Buttons */
.btn-warning {
  background-color: var(--brand-warning) !important;
  border-color: var(--brand-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: var(--warning-hover) !important;
  border-color: var(--warning-hover) !important;
}

.btn-warning:not([disabled]):not(.disabled).active {
  background-color: var(--warning-active) !important;
  border-color: var(--warning-active) !important;
}

/* Light Buttons */
.btn-light {
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active {
  background-color: var(--light-hover) !important;
  border-color: var(--light-hover) !important;
}

.btn-light:not([disabled]):not(.disabled).active {
  background-color: var(--light-active) !important;
  border-color: var(--light-active) !important;
}

/* Dark Buttons */
.btn-dark {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-hover) !important;
}

.btn-dark:not([disabled]):not(.disabled).active {
  background-color: var(--dark-active) !important;
  border-color: var(--dark-active) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📝 OUTLINE BUTTONS
 * -----------------------------------------------------------------------
 * All outline button variations
 */

/* Primary Outline */
.btn-outline-primary {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

.btn-outline-primary-2x {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.btn-outline-primary-2x:hover,
.btn-outline-primary-2x:focus,
.btn-outline-primary-2x:active,
.btn-outline-primary-2x.active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--brand-primary-text) !important;
}

/* Secondary Outline */
.btn-outline-secondary {
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
}

.btn-outline-secondary-2x {
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary) !important;
}

.btn-outline-secondary-2x:hover,
.btn-outline-secondary-2x:focus,
.btn-outline-secondary-2x:active,
.btn-outline-secondary-2x.active {
  background-color: var(--secondary-hover) !important;
  border-color: var(--secondary-hover) !important;
}

/* Success Outline */
.btn-outline-success {
  border-color: var(--brand-success) !important;
  color: var(--brand-success) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
  color: #ffffff !important;
}

.btn-outline-success-2x {
  border-color: var(--brand-success) !important;
  color: var(--brand-success) !important;
}

.btn-outline-success-2x:hover,
.btn-outline-success-2x:focus,
.btn-outline-success-2x:active,
.btn-outline-success-2x.active {
  background-color: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
  color: #ffffff !important;
}

/* Danger Outline */
.btn-outline-danger {
  border-color: var(--brand-danger) !important;
  color: var(--brand-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
  color: #ffffff !important;
}

.btn-outline-danger-2x {
  border-color: var(--brand-danger) !important;
  color: var(--brand-danger) !important;
}

.btn-outline-danger-2x:hover,
.btn-outline-danger-2x:focus,
.btn-outline-danger-2x:active,
.btn-outline-danger-2x.active {
  background-color: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
  color: #ffffff !important;
}

/* Info Outline */
.btn-outline-info {
  border-color: var(--brand-info) !important;
  color: var(--brand-info) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
  color: #ffffff !important;
}

.btn-outline-info-2x {
  border-color: var(--brand-info) !important;
  color: var(--brand-info) !important;
}

.btn-outline-info-2x:hover,
.btn-outline-info-2x:focus,
.btn-outline-info-2x:active,
.btn-outline-info-2x.active {
  background-color: var(--info-hover) !important;
  border-color: var(--info-hover) !important;
  color: #ffffff !important;
}

/* Warning Outline */
.btn-outline-warning {
  border-color: var(--brand-warning) !important;
  color: var(--brand-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
  background-color: var(--brand-warning) !important;
  border-color: var(--brand-warning) !important;
  color: #ffffff !important;
}

.btn-outline-warning-2x {
  border-color: var(--brand-warning) !important;
  color: var(--brand-warning) !important;
}

.btn-outline-warning-2x:hover,
.btn-outline-warning-2x:focus,
.btn-outline-warning-2x:active,
.btn-outline-warning-2x.active {
  background-color: var(--warning-hover) !important;
  border-color: var(--warning-hover) !important;
  color: #ffffff !important;
}

/* Light Outline */
.btn-outline-light {
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active {
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}

.btn-outline-light-2x {
  border-color: var(--brand-light) !important;
  color: var(--brand-light) !important;
}

.btn-outline-light-2x:hover,
.btn-outline-light-2x:focus,
.btn-outline-light-2x:active,
.btn-outline-light-2x.active {
  background-color: var(--light-hover) !important;
  border-color: var(--light-hover) !important;
  color: var(--brand-dark) !important;
}

/* Dark Outline */
.btn-outline-dark {
  border-color: var(--brand-dark) !important;
  color: var(--brand-dark) !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
}

.btn-outline-dark-2x {
  border-color: var(--brand-dark) !important;
  color: var(--brand-dark) !important;
}

.btn-outline-dark-2x:hover,
.btn-outline-dark-2x:focus,
.btn-outline-dark-2x:active,
.btn-outline-dark-2x.active {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-hover) !important;
  color: #ffffff !important;
}

/* 
 * -----------------------------------------------------------------------
 * � BOOTSTRAP BUTTON STATE OVERRIDES
 * -----------------------------------------------------------------------
 * Override Bootstrap's default active state with our brand colors
 */

/* Override the bootstrap default gray active state for all buttons */
.btn-check:checked+.btn, 
.btn.active, 
.btn.show, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--primary-active) !important; /* Use our theme active color instead of BS gray */
  border-color: var(--primary-active) !important; /* Match the border to the background */
}

/* Specific overrides for different button types */
.btn-primary:active, .btn-primary.active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
}

.btn-secondary:active, .btn-secondary.active {
  background-color: var(--secondary-active) !important;
  border-color: var(--secondary-active) !important;
}

.btn-success:active, .btn-success.active {
  background-color: var(--success-active) !important;
  border-color: var(--success-active) !important;
}

.btn-danger:active, .btn-danger.active {
  background-color: var(--danger-active) !important;
  border-color: var(--danger-active) !important;
}

.btn-warning:active, .btn-warning.active {
  background-color: var(--warning-active) !important;
  border-color: var(--warning-active) !important;
}

.btn-info:active, .btn-info.active {
  background-color: var(--info-active) !important;
  border-color: var(--info-active) !important;
}

/* 
 * -----------------------------------------------------------------------
 * �🔗 BORDERS
 * -----------------------------------------------------------------------
 * All border color utilities using the brand colors
 */

.border-primary,
.b-primary,
.b-t-primary,
.border-t-primary,
.b-b-primary,
.border-b-primary,
.b-l-primary,
.border-l-primary,
.b-r-primary,
.border-r-primary {
  border-color: var(--brand-primary) !important;
}

.border-secondary,
.b-secondary,
.b-t-secondary,
.border-t-secondary,
.b-b-secondary,
.border-b-secondary,
.b-l-secondary,
.border-l-secondary,
.b-r-secondary,
.border-r-secondary {
  border-color: var(--brand-secondary) !important;
}

.border-success,
.b-success,
.b-t-success,
.border-t-success,
.b-b-success,
.border-b-success,
.b-l-success,
.border-l-success,
.b-r-success,
.border-r-success {
  border-color: var(--brand-success) !important;
}

.border-danger,
.b-danger,
.b-t-danger,
.border-t-danger,
.b-b-danger,
.border-b-danger,
.b-l-danger,
.border-l-danger,
.b-r-danger,
.border-r-danger {
  border-color: var(--brand-danger) !important;
}

.border-info,
.b-info,
.b-t-info,
.border-t-info,
.b-b-info,
.border-b-info,
.b-l-info,
.border-l-info,
.b-r-info,
.border-r-info {
  border-color: var(--brand-info) !important;
}

.border-warning,
.b-warning,
.b-t-warning,
.border-t-warning,
.b-b-warning,
.border-b-warning,
.b-l-warning,
.border-l-warning,
.b-r-warning,
.border-r-warning {
  border-color: var(--brand-warning) !important;
}

.border-light,
.b-light,
.b-t-light,
.border-t-light,
.b-b-light,
.border-b-light,
.b-l-light,
.border-l-light,
.b-r-light,
.border-r-light {
  border-color: var(--brand-light) !important;
}

.border-dark,
.b-dark,
.b-t-dark,
.border-t-dark,
.b-b-dark,
.border-b-dark,
.b-l-dark,
.border-l-dark,
.b-r-dark,
.border-r-dark {
  border-color: var(--brand-dark) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📊 TABLE STYLING
 * -----------------------------------------------------------------------
 * Table border colors and styling variations
 */

/* Table Border Bottom Colors */
table thead .border-bottom-primary th,
table tbody .border-bottom-primary th,
table tbody .border-bottom-primary td {
  border-bottom: 1px solid var(--brand-primary) !important;
}

table thead .border-bottom-secondary th,
table tbody .border-bottom-secondary th,
table tbody .border-bottom-secondary td {
  border-bottom: 1px solid var(--brand-secondary) !important;
}

table thead .border-bottom-success th,
table tbody .border-bottom-success th,
table tbody .border-bottom-success td {
  border-bottom: 1px solid var(--brand-success) !important;
}

table thead .border-bottom-danger th,
table tbody .border-bottom-danger th,
table tbody .border-bottom-danger td {
  border-bottom: 1px solid var(--brand-danger) !important;
}

table thead .border-bottom-info th,
table tbody .border-bottom-info th,
table tbody .border-bottom-info td {
  border-bottom: 1px solid var(--brand-info) !important;
}

table thead .border-bottom-warning th,
table tbody .border-bottom-warning th,
table tbody .border-bottom-warning td {
  border-bottom: 1px solid var(--brand-warning) !important;
}

table thead .border-bottom-light th,
table tbody .border-bottom-light th,
table tbody .border-bottom-light td {
  border-bottom: 1px solid var(--brand-light) !important;
}

table thead .border-bottom-dark th,
table tbody .border-bottom-dark th,
table tbody .border-bottom-dark td {
  border-bottom: 1px solid var(--brand-dark) !important;
}

/* Table Styling Variations */
.table-styling .table-primary,
.table-styling.table-primary {
  background-color: var(--brand-primary) !important;
  border: 3px solid var(--brand-primary) !important;
}

.table-styling .table-primary thead,
.table-styling.table-primary thead {
  background-color: var(--primary-hover) !important;
  border: 3px solid var(--primary-hover) !important;
}

.table-styling .table-secondary,
.table-styling.table-secondary {
  background-color: var(--brand-secondary) !important;
  border: 3px solid var(--brand-secondary) !important;
}

.table-styling .table-secondary thead,
.table-styling.table-secondary thead {
  background-color: var(--secondary-hover) !important;
  border: 3px solid var(--secondary-hover) !important;
}

.table-styling .table-success,
.table-styling.table-success {
  background-color: var(--brand-success) !important;
  border: 3px solid var(--brand-success) !important;
}

.table-styling .table-success thead,
.table-styling.table-success thead {
  background-color: var(--success-hover) !important;
  border: 3px solid var(--success-hover) !important;
}

.table-styling .table-danger,
.table-styling.table-danger {
  background-color: var(--brand-danger) !important;
  border: 3px solid var(--brand-danger) !important;
}

.table-styling .table-danger thead,
.table-styling.table-danger thead {
  background-color: var(--danger-hover) !important;
  border: 3px solid var(--danger-hover) !important;
}

.table-styling .table-info,
.table-styling.table-info {
  background-color: var(--brand-info) !important;
  border: 3px solid var(--brand-info) !important;
}

.table-styling .table-info thead,
.table-styling.table-info thead {
  background-color: var(--info-hover) !important;
  border: 3px solid var(--info-hover) !important;
}

.table-styling .table-warning,
.table-styling.table-warning {
  background-color: var(--brand-warning) !important;
  border: 3px solid var(--brand-warning) !important;
}

.table-styling .table-warning thead,
.table-styling.table-warning thead {
  background-color: var(--warning-hover) !important;
  border: 3px solid var(--warning-hover) !important;
}

.table-styling .table-light,
.table-styling.table-light {
  background-color: var(--brand-light) !important;
  border: 3px solid var(--brand-light) !important;
}

.table-styling .table-light thead,
.table-styling.table-light thead {
  background-color: var(--light-hover) !important;
  border: 3px solid var(--light-hover) !important;
}

.table-styling .table-dark,
.table-styling.table-dark {
  background-color: var(--brand-dark) !important;
  border: 3px solid var(--brand-dark) !important;
}

.table-styling .table-dark thead,
.table-styling.table-dark thead {
  background-color: var(--dark-hover) !important;
  border: 3px solid var(--dark-hover) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🚨 ALERT STYLING
 * -----------------------------------------------------------------------
 * Alert component variations with brand colors
 */

.alert-primary {
  background-color: rgba(var(--primary-rgb), 0.8) !important;
  border-color: rgba(var(--primary-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-primary .alert-link {
  color: var(--brand-primary) !important;
}

.alert-primary hr {
  border-top-color: var(--brand-primary) !important;
}

.alert-secondary {
  background-color: rgba(var(--secondary-rgb), 0.8) !important;
  border-color: rgba(var(--secondary-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-secondary .alert-link {
  color: var(--brand-secondary) !important;
}

.alert-secondary hr {
  border-top-color: var(--brand-secondary) !important;
}

.alert-success {
  background-color: rgba(var(--success-rgb), 0.8) !important;
  border-color: rgba(var(--success-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-success .alert-link {
  color: var(--brand-success) !important;
}

.alert-success hr {
  border-top-color: var(--brand-success) !important;
}

.alert-danger {
  background-color: rgba(var(--danger-rgb), 0.8) !important;
  border-color: rgba(var(--danger-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-danger .alert-link {
  color: var(--brand-danger) !important;
}

.alert-danger hr {
  border-top-color: var(--brand-danger) !important;
}

.alert-info {
  background-color: rgba(var(--info-rgb), 0.8) !important;
  border-color: rgba(var(--info-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-info .alert-link {
  color: var(--brand-info) !important;
}

.alert-info hr {
  border-top-color: var(--brand-info) !important;
}

.alert-warning {
  background-color: rgba(var(--warning-rgb), 0.8) !important;
  border-color: rgba(var(--warning-rgb), 0.9) !important;
  color: #fff !important;
}

.alert-warning .alert-link {
  color: var(--brand-warning) !important;
}

.alert-warning hr {
  border-top-color: var(--brand-warning) !important;
}

.alert-light {
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}

.alert-light .alert-link {
  color: var(--brand-dark) !important;
}

.alert-light hr {
  border-top-color: var(--brand-light) !important;
}

.alert-dark {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
}

.alert-dark .alert-link {
  color: var(--brand-dark) !important;
}

.alert-dark hr {
  border-top-color: var(--brand-dark) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📝 FORMS AND INPUTS
 * -----------------------------------------------------------------------
 * Form styling with brand color integration
 */

/* Focus states for form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* Form validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--brand-success) !important;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--brand-success) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--success-rgb), 0.25) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--brand-danger) !important;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--brand-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--danger-rgb), 0.25) !important;
}

/* Checkbox and radio styling */
.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.form-check-input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🔗 LINKS AND NAVIGATION
 * -----------------------------------------------------------------------
 * Link styling and navigation elements
 */

a {
  color: var(--brand-primary) !important;
}

a:hover,
a:focus {
  color: var(--primary-hover) !important;
}

/* Navigation links */
.nav-link {
  color: var(--brand-primary) !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--secondary-hover) !important;
}

.nav-link.active {
  color: var(--brand-primary) !important;
}

/* Breadcrumb styling */
.breadcrumb-item.active {
  color: var(--brand-primary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎛️ SIDEBAR AND NAVIGATION
 * -----------------------------------------------------------------------
 * Sidebar styling with brand color integration
 */

/* Sidebar active states */
.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.stroke-icon {
  stroke: var(--brand-primary) !important;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active svg.fill-icon {
  fill: var(--brand-primary) !important;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li a.active span {
  color: var(--brand-primary) !important;
}

/* Sidebar hover states */
.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover svg.stroke-icon {
  stroke: var(--brand-primary) !important;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover svg.fill-icon {
  fill: var(--brand-primary) !important;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li:hover .sidebar-link:not(.active):hover span {
  color: var(--brand-primary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 GRADIENT AND SPECIAL EFFECTS
 * -----------------------------------------------------------------------
 * Gradient backgrounds and special visual effects
 */

.primary .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--primary-rgb), 0.1) 19.06%, rgba(var(--primary-rgb), 0) 79.03%) !important;
}

.secondary .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--secondary-rgb), 0.1) 19.06%, rgba(var(--secondary-rgb), 0) 79.03%) !important;
}

.success .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--success-rgb), 0.1) 19.06%, rgba(var(--success-rgb), 0) 79.03%) !important;
}

.warning .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--warning-rgb), 0.1) 19.06%, rgba(var(--warning-rgb), 0) 79.03%) !important;
}

.info .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--info-rgb), 0.1) 19.06%, rgba(var(--info-rgb), 0) 79.03%) !important;
}

.danger .bg-gradient {
  background-image: linear-gradient(144.16deg, rgba(var(--danger-rgb), 0.1) 19.06%, rgba(var(--danger-rgb), 0) 79.03%) !important;
}

/* SVG fill colors */
.primary .svg-fill {
  fill: var(--brand-primary) !important;
}

.primary .svg-fill:not(.half-circle) {
  stroke: var(--brand-primary) !important;
}

.secondary .svg-fill {
  fill: var(--brand-secondary) !important;
}

.secondary .svg-fill:not(.half-circle) {
  stroke: var(--brand-secondary) !important;
}

.success .svg-fill {
  fill: var(--brand-success) !important;
}

.warning .svg-fill {
  fill: var(--brand-warning) !important;
}

.info .svg-fill {
  fill: var(--brand-info) !important;
}

.danger .svg-fill {
  fill: var(--brand-danger) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 SPECIAL COMPONENTS
 * -----------------------------------------------------------------------
 * Special component styling (toasts, progress bars, etc.)
 */

/* Toast colors */
.toast-primary {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

.toast-secondary {
  background-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
}

.toast-success {
  background-color: var(--brand-success) !important;
  color: var(--brand-white) !important;
}

.toast-danger {
  background-color: var(--brand-danger) !important;
  color: var(--brand-white) !important;
}

.toast-info {
  background-color: var(--brand-info) !important;
  color: var(--brand-white) !important;
}

.toast-warning {
  background-color: var(--brand-warning) !important;
  color: var(--brand-white) !important;
}

.toast-light {
  background-color: var(--brand-light) !important;
  color: var(--brand-body-color) !important;
}

.toast-dark {
  background-color: var(--brand-dark) !important;
  color: var(--brand-white) !important;
}

/* Progress bars */
.progress-bar {
  background-color: var(--brand-primary) !important;
}

.progress-bar-primary {
  background-color: var(--brand-primary) !important;
}

.progress-bar-secondary {
  background-color: var(--brand-secondary) !important;
}

.progress-bar-success {
  background-color: var(--brand-success) !important;
}

.progress-bar-danger {
  background-color: var(--brand-danger) !important;
}

.progress-bar-info {
  background-color: var(--brand-info) !important;
}

.progress-bar-warning {
  background-color: var(--brand-warning) !important;
}

.progress-bar-light {
  background-color: var(--brand-light) !important;
}

.progress-bar-dark {
  background-color: var(--brand-dark) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 ACCORDIONS
 * -----------------------------------------------------------------------
 * Accordion component styling with brand colors
 */

.accordion-button.accordion-light-primary:not(.collapsed) {
  background-color: var(--primary-light) !important;
}

.accordion-button.accordion-light-secondary:not(.collapsed) {
  background-color: var(--secondary-light) !important;
}

.accordion-button.accordion-light-success:not(.collapsed) {
  background-color: var(--success-light) !important;
}

.accordion-button.accordion-light-warning:not(.collapsed) {
  background-color: var(--warning-light) !important;
}

.accordion-button.accordion-light-info:not(.collapsed) {
  background-color: var(--info-light) !important;
}

.accordion-button.accordion-light-danger:not(.collapsed) {
  background-color: var(--danger-light) !important;
}

.accordion-button.accordion-light-dark:not(.collapsed) {
  background-color: var(--dark-light) !important;
}

.accordion-button.accordion-light-light:not(.collapsed) {
  background-color: var(--light-light) !important;
}

/* Multi-collapse backgrounds */
.multi-collapse.show .collapse-wrapper.accordion-light-primary {
  background-color: var(--primary-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-secondary {
  background-color: var(--secondary-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-success {
  background-color: var(--success-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-warning {
  background-color: var(--warning-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-info {
  background-color: var(--info-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-danger {
  background-color: var(--danger-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-dark {
  background-color: var(--dark-light) !important;
}

.multi-collapse.show .collapse-wrapper.accordion-light-light {
  background-color: var(--light-light) !important;
}

/* 
 * =======================================================================
 * 🎯 ADVANCED CUSTOMIZATION SECTION
 * =======================================================================
 * 
 * 💡 Pro Tip: The sections below are for advanced users who want
 *    more granular control over specific components.
 * 
 * 🎨 Most users will only need to modify the brand colors at the top!
 */

/* 
 * -----------------------------------------------------------------------
 * 🔧 COMPONENT-SPECIFIC OVERRIDES
 * -----------------------------------------------------------------------
 * Uncomment and modify these sections for specific component customizations
 */

/*
// Custom Dropzone Colors
.dropzone.dropzone-secondary {
  border: 2px dashed var(--brand-secondary) !important;
}

.dropzone.dropzone-secondary i {
  color: var(--brand-secondary) !important;
}

// Custom Select2 Colors
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.select2-container--default .select2-results__options .select2-results__option[aria-selected=true] {
  background-color: var(--brand-primary) !important;
}

// Custom File Pond Colors
.filepond--list .filepond--file {
  background-color: var(--brand-primary) !important;
}

.filepond--drop-label .filepond--label-action {
  color: var(--brand-danger) !important;
}
*/

/* 
 * -----------------------------------------------------------------------
 * 📱 RESPONSIVE CUSTOMIZATIONS
 * -----------------------------------------------------------------------
 * Add responsive customizations here if needed
 */

/*
@media (max-width: 768px) {
  // Mobile-specific theme customizations
}

@media (min-width: 769px) and (max-width: 1024px) {
  // Tablet-specific theme customizations
}

@media (min-width: 1025px) {
  // Desktop-specific theme customizations
}
*/

/* 
 * -----------------------------------------------------------------------
 * 🌟 ANIMATION AND TRANSITION OVERRIDES
 * -----------------------------------------------------------------------
 * Custom animations and transitions
 */

/* Ensure smooth transitions for all themed elements */
.btn,
.alert,
.badge,
.label,
.form-control,
.nav-link,
a {
  transition: all 0.3s ease !important;
}

/* Hover effects for interactive elements */
.btn:hover,
.nav-link:hover,
a:hover {
  transform: translateY(-1px);
  transition: all 0.3s ease !important;
}

/* 
 * =======================================================================
 * 📝 THEME CUSTOMIZATION NOTES
 * =======================================================================
 * 
 * 🎨 QUICK BRAND COLOR CHANGE:
 * To change your entire theme, simply modify these variables at the top:
 * --brand-primary: #YOUR_PRIMARY_COLOR;
 * --brand-secondary: #YOUR_SECONDARY_COLOR;
 * 
 * 🔧 ADVANCED CUSTOMIZATION:
 * For more control, you can modify the auto-generated color variations:
 * --primary-hover, --primary-active, --primary-light, etc.
 * 
 * 🌙 DARK MODE:
 * Dark mode colors are automatically adapted, but you can customize
 * them in the body.dark section above.
 * 
 * 📱 RESPONSIVE:
 * Add media queries in the responsive section for device-specific theming.
 * 
 * 🎯 COMPONENT-SPECIFIC:
 * Uncomment and modify the component-specific sections for granular control.
 * 
 * =======================================================================
 */

/*
 * =======================================================================
 * 🔘 BOOTSTRAP 5.3.7 BUTTON GROUP ENHANCEMENTS
 * =======================================================================
 * Enhanced button group styling for better Bootstrap 5.3.7 compatibility
 */

/* Button Group General Fixes - Enhanced Active States */
.btn-group .btn.active,
.btn-group .btn:active {
  color: #ffffff !important;
  z-index: 2;
}

/* Enhanced Outline Button Active States in Button Groups */
.btn-group .btn-outline-info.active,
.btn-group .btn-outline-info:active {
  color: #ffffff !important;
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
}

.btn-group .btn-outline-success.active,
.btn-group .btn-outline-success:active {
  color: #ffffff !important;
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
}

.btn-group .btn-outline-danger.active,
.btn-group .btn-outline-danger:active {
  color: #ffffff !important;
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
}

.btn-group .btn-outline-warning.active,
.btn-group .btn-outline-warning:active {
  color: #212529 !important;
  background-color: var(--brand-warning) !important;
  border-color: var(--brand-warning) !important;
}

.btn-group .btn-outline-secondary.active,
.btn-group .btn-outline-secondary:active {
  color: var(--brand-secondary-text) !important;
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
}

.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-primary:active {
  color: var(--brand-primary-text) !important;
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Button Group Form Integration - Bootstrap 5.3.7 Compatible */
.btn-group form {
  display: inline-block;
}

.btn-group form .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.btn-group form + .btn,
.btn-group form + a.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

/* Enhanced Border Radius Management for Button Groups */
.btn-group .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group .btn:first-child:not(:last-child),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Responsive Button Group Enhancements */
.btn-group {
  flex-wrap: wrap;
}

.btn-group .btn {
  white-space: nowrap;
  margin-bottom: 0.25rem;
}

/* Additional Form Element Fixes in Button Groups */
.btn-group form:not(:last-child) .btn {
  border-right: 0;
}

.btn-group form:not(:first-child) .btn {
  margin-left: -1px;
}

/* Enhanced Hover and Focus States */
.btn-group .btn:hover,
.btn-group .btn:focus {
  z-index: 1;
}

.btn-group .btn.active,
.btn-group .btn:active {
  z-index: 2;
}

/* Mobile Responsive Enhancements */
@media (max-width: 576px) {
  .btn-group {
    width: 100%;
  }
  
  .btn-group .btn {
    width: auto;
    flex: 1;
    min-width: fit-content;
  }
}

/* Dark Mode Button Group Adaptations */
body.dark .btn-group .btn-outline-light.active,
body.dark .btn-group .btn-outline-light:active {
  color: var(--brand-dark) !important;
  background-color: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
}

body.dark .btn-group .btn-outline-dark.active,
body.dark .btn-group .btn-outline-dark:active {
  color: #ffffff !important;
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/*
 * =======================================================================
 * END OF BUTTON GROUP ENHANCEMENTS
 * =======================================================================
 */

/* 
 * =======================================================================
 * 📄 PAGINATION THEME OVERRIDES
 * =======================================================================
 * Professional pagination styling using theme variables for consistency
 */

/* 
 * -----------------------------------------------------------------------
 * 🔗 BASE PAGINATION STYLES
 * -----------------------------------------------------------------------
 * Core pagination appearance with theme integration
 */

.pagination {
  gap: 0.25rem;
}

.page-item {
  margin: 0 1px;
}

.page-link {
  background-color: var(--brand-white) !important;
  border: 1px solid var(--light-border, #dee2e6) !important;
  color: var(--brand-body-color) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  border-radius: 0.375rem !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
}

.page-link:hover {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  z-index: 2 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-subtle, 0 1px 3px 0 rgba(0, 0, 0, 0.1)) !important;
}

.page-link:focus {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
  z-index: 3 !important;
}

.page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  font-weight: 600 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-primary, 0 4px 14px 0 rgba(30, 64, 175, 0.25)) !important;
  z-index: 3 !important;
}

.page-item.disabled .page-link {
  background-color: var(--brand-light-bg) !important;
  border-color: var(--light-border, #dee2e6) !important;
  color: rgba(var(--dark-rgb), 0.5) !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 THEMED PAGINATION VARIANTS
 * -----------------------------------------------------------------------
 * Enhanced pagination variants using theme colors
 */

/* Primary Theme Pagination */
.pagination-primary .page-item .page-link,
.pagination-theme .page-item .page-link {
  color: var(--brand-primary) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-primary .page-item .page-link:hover,
.pagination-theme .page-item .page-link:hover {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.pagination-primary .page-item.active .page-link,
.pagination-theme .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  box-shadow: var(--shadow-primary, 0 4px 14px 0 rgba(30, 64, 175, 0.25)) !important;
}

/* Secondary Theme Pagination */
.pagination-secondary .page-item .page-link {
  color: var(--brand-secondary) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-secondary .page-item .page-link:hover {
  background-color: var(--secondary-light, rgba(249, 115, 22, 0.08)) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary) !important;
}

.pagination-secondary .page-item.active .page-link {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
  box-shadow: var(--shadow-secondary, 0 4px 14px 0 rgba(249, 115, 22, 0.25)) !important;
}

/* Success Theme Pagination */
.pagination-success .page-item .page-link {
  color: var(--brand-success) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-success .page-item .page-link:hover {
  background-color: var(--success-light, rgba(5, 150, 105, 0.08)) !important;
  border-color: var(--brand-success) !important;
  color: var(--brand-success) !important;
}

.pagination-success .page-item.active .page-link {
  background-color: var(--brand-success) !important;
  border-color: var(--brand-success) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(5, 150, 105, 0.25) !important;
}

/* Danger Theme Pagination */
.pagination-danger .page-item .page-link {
  color: var(--brand-danger) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-danger .page-item .page-link:hover {
  background-color: var(--danger-light, rgba(220, 38, 38, 0.08)) !important;
  border-color: var(--brand-danger) !important;
  color: var(--brand-danger) !important;
}

.pagination-danger .page-item.active .page-link {
  background-color: var(--brand-danger) !important;
  border-color: var(--brand-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.25) !important;
}

/* Warning Theme Pagination */
.pagination-warning .page-item .page-link {
  color: var(--brand-warning) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-warning .page-item .page-link:hover {
  background-color: var(--warning-light, rgba(217, 119, 6, 0.08)) !important;
  border-color: var(--brand-warning) !important;
  color: var(--brand-warning) !important;
}

.pagination-warning .page-item.active .page-link {
  background-color: var(--brand-warning) !important;
  border-color: var(--brand-warning) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(217, 119, 6, 0.25) !important;
}

/* Info Theme Pagination */
.pagination-info .page-item .page-link {
  color: var(--brand-info) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-info .page-item .page-link:hover {
  background-color: var(--info-light, rgba(2, 132, 199, 0.08)) !important;
  border-color: var(--brand-info) !important;
  color: var(--brand-info) !important;
}

.pagination-info .page-item.active .page-link {
  background-color: var(--brand-info) !important;
  border-color: var(--brand-info) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.25) !important;
}

/* Dark Theme Pagination */
.pagination-dark .page-item .page-link {
  color: var(--brand-dark) !important;
  background-color: transparent !important;
  border-color: var(--light-border, #dee2e6) !important;
}

.pagination-dark .page-item .page-link:hover {
  background-color: var(--dark-light, rgba(30, 41, 59, 0.08)) !important;
  border-color: var(--brand-dark) !important;
  color: var(--brand-dark) !important;
}

.pagination-dark .page-item.active .page-link {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(30, 41, 59, 0.25) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🔄 PAGINATION SIZING VARIANTS
 * -----------------------------------------------------------------------
 * Size variations with proper proportions
 */

.pagination-sm .page-link {
  padding: 0.375rem 0.5rem !important;
  font-size: 0.75rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 0.25rem !important;
}

.pagination-lg .page-link {
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  min-width: 3rem !important;
  min-height: 3rem !important;
  border-radius: 0.5rem !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🌙 DARK MODE PAGINATION STYLES
 * -----------------------------------------------------------------------
 * Professional dark mode adaptations
 */

body.dark .page-link {
  background-color: var(--brand-white) !important; /* Uses dark surface in dark mode */
  border-color: var(--dark-border, rgba(30, 41, 59, 0.25)) !important;
  color: var(--brand-body-color) !important; /* High contrast text in dark mode */
}

body.dark .page-link:hover {
  background-color: var(--dark-light, rgba(30, 41, 59, 0.15)) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

body.dark .page-link:focus {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

body.dark .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  box-shadow: var(--shadow-primary, 0 4px 14px 0 rgba(30, 64, 175, 0.25)) !important;
}

body.dark .page-item.disabled .page-link {
  background-color: var(--brand-white) !important;
  border-color: var(--dark-border, rgba(30, 41, 59, 0.25)) !important;
  color: rgba(var(--primary-rgb), 0.4) !important;
  opacity: 0.5 !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🔄 RTL (RIGHT-TO-LEFT) PAGINATION SUPPORT
 * -----------------------------------------------------------------------
 * Enhanced RTL support for pagination
 */

html[dir="rtl"] .pagination {
  direction: rtl;
}

html[dir="rtl"] .page-item:first-child .page-link {
  margin-right: 0 !important;
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

html[dir="rtl"] .page-item:last-child .page-link {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📊 DATATABLE PAGINATION INTEGRATION
 * -----------------------------------------------------------------------
 * Enhanced DataTables pagination styling
 */

.dt-ext .dataTables_wrapper .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  box-shadow: var(--shadow-primary, 0 4px 14px 0 rgba(30, 64, 175, 0.25)) !important;
}

.dt-ext .dataTables_wrapper .dataTables_paginate .page-link {
  background-color: var(--brand-white) !important;
  border-color: var(--light-border, #dee2e6) !important;
  color: var(--brand-body-color) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 PAGINATION BORDER VARIANTS
 * -----------------------------------------------------------------------
 * Border-style pagination variants
 */

.pagin-border-primary .page-item.active,
.pagin-border-primary .page-item:active {
  background-color: transparent !important;
}

.pagin-border-primary .page-item .page-link {
  border: 2px solid var(--brand-primary) !important;
  background-color: transparent !important;
  color: var(--brand-primary) !important;
}

.pagin-border-primary .page-item .page-link:hover,
.pagin-border-primary .page-item .page-link:focus {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  transform: translateY(-1px) !important;
}

.pagin-border-primary .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  box-shadow: var(--shadow-primary, 0 4px 14px 0 rgba(30, 64, 175, 0.25)) !important;
}

/* 
 * -----------------------------------------------------------------------
 * ⚡ PAGINATION PERFORMANCE OPTIMIZATIONS
 * -----------------------------------------------------------------------
 * Hardware acceleration and smooth animations
 */

.page-link {
  will-change: transform, box-shadow !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.page-item.active .page-link {
  transform: translateZ(0) translateY(-1px) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📱 RESPONSIVE PAGINATION ENHANCEMENTS
 * -----------------------------------------------------------------------
 * Mobile-friendly pagination styling
 */

@media (max-width: 576px) {
  .pagination {
    gap: 0.125rem;
  }
  
  .page-link {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
  }
  
  .pagination-lg .page-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
  }
}

/*
 * =======================================================================
 * END OF PAGINATION THEME OVERRIDES
 * =======================================================================
 */

/* 
 * =======================================================================
 * 🎨 POPOVER THEME OVERRIDES
 * =======================================================================
 * Override popover colors to use theme variables for consistent branding
 */

/* 
 * -----------------------------------------------------------------------
 * 🔷 BASIC POPOVER STYLES
 * -----------------------------------------------------------------------
 * Core popover appearance using theme colors
 */

.popover {
  background-color: var(--brand-white) !important;
  border-color: var(--light-border, rgba(0, 0, 0, 0.125)) !important;
  box-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)) !important;
}

.popover-header {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  border-bottom-color: var(--primary-border, rgba(30, 64, 175, 0.25)) !important;
}

.popover-body {
  color: var(--brand-body-color) !important;
}

/* Popover arrows using theme colors */
.popover.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-white) !important;
}

.popover.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-white) !important;
}

.popover.bs-popover-start .popover-arrow:after {
  border-left-color: var(--brand-white) !important;
}

.popover.bs-popover-end .popover-arrow:after {
  border-right-color: var(--brand-white) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🕐 CLOCKPICKER POPOVER STYLES
 * -----------------------------------------------------------------------
 * Specialized styles for clockpicker component
 */

.clockpicker-popover .popover-content {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
}

.clockpicker-popover .popover-title {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  border-bottom-color: var(--primary-border, rgba(30, 64, 175, 0.25)) !important;
}

/* Clockpicker popover arrows */
.clockpicker-popover.bottom > .arrow {
  border-bottom-color: var(--brand-primary) !important;
}

.clockpicker-popover.bottom > .arrow:after {
  border-bottom-color: var(--brand-primary) !important;
}

.clockpicker-popover.top > .arrow {
  border-top-color: var(--brand-primary) !important;
}

.clockpicker-popover.top > .arrow::after {
  border-top-color: var(--brand-primary) !important;
}

.clockpicker-popover.left > .arrow {
  border-left-color: var(--brand-primary) !important;
}

.clockpicker-popover.left > .arrow::after {
  border-left-color: var(--brand-primary) !important;
}

.clockpicker-popover.right > .arrow {
  border-right-color: var(--brand-primary) !important;
}

.clockpicker-popover.right > .arrow::after {
  border-right-color: var(--brand-primary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🌙 DARK MODE POPOVER STYLES
 * -----------------------------------------------------------------------
 * Dark theme adaptations for popovers
 */

body.dark .popover {
  background-color: var(--brand-white) !important; /* Uses dark surface color in dark mode */
  border-color: var(--dark-border, rgba(30, 41, 59, 0.25)) !important;
}

body.dark .popover-header {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

body.dark .popover-body {
  color: var(--brand-body-color) !important; /* Uses high contrast text in dark mode */
}

/* Dark mode popover arrows */
body.dark .popover.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-white) !important;
  border-right-color: transparent !important;
}

body.dark .popover.bs-popover-top .popover-arrow:after {
  border-right-color: transparent !important;
  border-top-color: var(--brand-white) !important;
}

body.dark .popover.bs-popover-start .popover-arrow:after {
  border-left-color: var(--brand-white) !important;
}

body.dark .popover.bs-popover-end .popover-arrow:after {
  border-right-color: var(--brand-white) !important;
}

/* Dark mode clockpicker popover */
body.dark .clockpicker-popover .popover-title {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  border-bottom-color: var(--primary-border, rgba(30, 64, 175, 0.25)) !important;
}

body.dark .clockpicker-popover .popover-content {
  background-color: var(--primary-light, rgba(30, 64, 175, 0.08)) !important;
}

/* Dark mode clockpicker arrows */
body.dark .clockpicker-popover.bottom > .arrow {
  border-bottom-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.bottom > .arrow:after {
  border-bottom-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.top > .arrow {
  border-top-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.top > .arrow::after {
  border-top-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.left > .arrow {
  border-left-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.left > .arrow::after {
  border-left-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.right > .arrow {
  border-right-color: var(--brand-primary) !important;
}

body.dark .clockpicker-popover.right > .arrow::after {
  border-right-color: var(--brand-primary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🔄 RTL (RIGHT-TO-LEFT) POPOVER SUPPORT
 * -----------------------------------------------------------------------
 * RTL language support for popover arrows
 */

html[dir="rtl"] .popover.top > .arrow:after,
html[dir="rtl"] .popover.bottom > .arrow:after {
  margin-right: -10px !important;
  margin-left: unset !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 POPOVER MAIN COMPONENT STYLES
 * -----------------------------------------------------------------------
 * Additional popover-related component styling
 */

.popover-main .btn-showcase a {
  color: var(--brand-primary-text) !important;
}

.popover-main .btn-showcase button:last-child {
  margin-right: 0 !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 ENHANCED POPOVER VARIATIONS
 * -----------------------------------------------------------------------
 * Additional themed popover variants for different use cases
 */

/* Success themed popover */
.popover.popover-success .popover-header {
  background-color: var(--brand-success) !important;
  color: #ffffff !important;
}

.popover.popover-success.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-success) !important;
}

.popover.popover-success.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-success) !important;
}

/* Warning themed popover */
.popover.popover-warning .popover-header {
  background-color: var(--brand-warning) !important;
  color: #ffffff !important;
}

.popover.popover-warning.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-warning) !important;
}

.popover.popover-warning.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-warning) !important;
}

/* Danger themed popover */
.popover.popover-danger .popover-header {
  background-color: var(--brand-danger) !important;
  color: #ffffff !important;
}

.popover.popover-danger.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-danger) !important;
}

.popover.popover-danger.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-danger) !important;
}

/* Info themed popover */
.popover.popover-info .popover-header {
  background-color: var(--brand-info) !important;
  color: #ffffff !important;
}

.popover.popover-info.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-info) !important;
}

.popover.popover-info.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-info) !important;
}

/* Secondary themed popover */
.popover.popover-secondary .popover-header {
  background-color: var(--brand-secondary) !important;
  color: var(--brand-secondary-text) !important;
}

.popover.popover-secondary.bs-popover-bottom .popover-arrow:after {
  border-bottom-color: var(--brand-secondary) !important;
}

.popover.popover-secondary.bs-popover-top .popover-arrow:after {
  border-top-color: var(--brand-secondary) !important;
}

/*
 * =======================================================================
 * END OF POPOVER THEME OVERRIDES
 * =======================================================================
 */

/*
 * =======================================================================
 * END OF THEME CUSTOMIZATION SYSTEM
 * =======================================================================
 * 
 * This theme system provides complete control over your application's
 * visual appearance through CSS custom properties.
 * 
 * For support and updates:
 * - Website: https://www.easyparcel.io
 * - Developer: Angelo D'Agostino (https://www.angelo-dagostino.com)
 * 
 * =======================================================================
 */

/* 
 * =======================================================================
 * 🎨 ENTERPRISE ENHANCEMENT COLORS
 * =======================================================================
 * Additional sophisticated colors for a premium enterprise experience
 */

:root {
  /* 🏢 ENTERPRISE ACCENT COLORS - Harmonized with Blue/Orange branding */
  --accent-slate: #64748b;               /* 🔘 Professional Slate - for subtle accents */
  --accent-indigo: #4338ca;              /* 🟣 Deep Indigo - complements blue */
  --accent-teal: #0d9488;                /* 🟢 Professional Teal - sophisticated accent */
  --accent-rose: #e11d48;                /* 🌹 Professional Rose - elegant contrast */
  
  /* 🎯 GRADIENT COMBINATIONS for sophisticated enterprise look */
  --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, #3b82f6 100%);
  --gradient-secondary: linear-gradient(135deg, var(--brand-secondary) 0%, #fb923c 100%);
  --gradient-enterprise: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  --gradient-success: linear-gradient(135deg, var(--brand-success) 0%, #10b981 100%);
  --gradient-professional: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  
  /* 🌟 SOPHISTICATED SHADOW SYSTEM */
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-primary: 0 4px 14px 0 rgba(30, 64, 175, 0.25);
  --shadow-secondary: 0 4px 14px 0 rgba(249, 115, 22, 0.25);
  
  /* 📊 ENTERPRISE DATA VISUALIZATION COLORS */
  --chart-blue-1: #1e40af;              /* Primary data color */
  --chart-blue-2: #3b82f6;              /* Secondary data color */
  --chart-orange-1: #f97316;            /* Accent data color */
  --chart-orange-2: #fb923c;            /* Secondary accent color */
  --chart-success: #059669;             /* Positive data color */
  --chart-warning: #d97706;             /* Caution data color */
  --chart-neutral: #64748b;             /* Neutral data color */
  --chart-background: rgba(248, 250, 252, 0.5);  /* Chart background overlay */
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 ENHANCED GRADIENT BACKGROUNDS
 * -----------------------------------------------------------------------
 * Professional gradient system for enterprise applications
 */

.bg-gradient-primary {
  background: var(--gradient-primary) !important;
}

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

.bg-gradient-enterprise {
  background: var(--gradient-enterprise) !important;
}

.bg-gradient-success {
  background: var(--gradient-success) !important;
}

.bg-gradient-professional {
  background: var(--gradient-professional) !important;
  color: white !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🌟 ENHANCED SHADOW SYSTEM
 * -----------------------------------------------------------------------
 * Professional shadow utilities for depth and hierarchy
 */

.shadow-subtle {
  box-shadow: var(--shadow-subtle) !important;
}

.shadow-medium {
  box-shadow: var(--shadow-medium) !important;
}

.shadow-large {
  box-shadow: var(--shadow-large) !important;
}

.shadow-primary {
  box-shadow: var(--shadow-primary) !important;
}

.shadow-secondary {
  box-shadow: var(--shadow-secondary) !important;
}

/* Enhanced button shadows for premium feel */
.btn-primary {
  box-shadow: var(--shadow-primary) !important;
}

.btn-primary:hover {
  box-shadow: var(--shadow-large) !important;
  transform: translateY(-2px);
}

.btn-secondary {
  box-shadow: var(--shadow-secondary) !important;
}

.btn-secondary:hover {
  box-shadow: var(--shadow-large) !important;
  transform: translateY(-2px);
}

/* 
 * -----------------------------------------------------------------------
 * 📊 ENHANCED DATA VISUALIZATION
 * -----------------------------------------------------------------------
 * Professional chart and data display colors
 */

.chart-color-1 { color: var(--chart-blue-1) !important; }
.chart-color-2 { color: var(--chart-blue-2) !important; }
.chart-color-3 { color: var(--chart-orange-1) !important; }
.chart-color-4 { color: var(--chart-orange-2) !important; }
.chart-color-5 { color: var(--chart-success) !important; }
.chart-color-6 { color: var(--chart-warning) !important; }
.chart-color-7 { color: var(--chart-neutral) !important; }

.bg-chart-1 { background-color: var(--chart-blue-1) !important; }
.bg-chart-2 { background-color: var(--chart-blue-2) !important; }
.bg-chart-3 { background-color: var(--chart-orange-1) !important; }
.bg-chart-4 { background-color: var(--chart-orange-2) !important; }
.bg-chart-5 { background-color: var(--chart-success) !important; }
.bg-chart-6 { background-color: var(--chart-warning) !important; }
.bg-chart-7 { background-color: var(--chart-neutral) !important; }

/* 
 * -----------------------------------------------------------------------
 * 🎯 PROFESSIONAL ACCENT COLORS
 * -----------------------------------------------------------------------
 * Additional enterprise-grade accent colors
 */

.accent-slate { color: var(--accent-slate) !important; }
.accent-indigo { color: var(--accent-indigo) !important; }
.accent-teal { color: var(--accent-teal) !important; }
.accent-rose { color: var(--accent-rose) !important; }

.bg-accent-slate { background-color: var(--accent-slate) !important; }
.bg-accent-indigo { background-color: var(--accent-indigo) !important; }
.bg-accent-teal { background-color: var(--accent-teal) !important; }
.bg-accent-rose { background-color: var(--accent-rose) !important; }

.border-accent-slate { border-color: var(--accent-slate) !important; }
.border-accent-indigo { border-color: var(--accent-indigo) !important; }
.border-accent-teal { border-color: var(--accent-teal) !important; }
.border-accent-rose { border-color: var(--accent-rose) !important; }

/* 
 * =======================================================================
 * 🚨 COMPREHENSIVE HARDCODED COLOR OVERRIDES
 * =======================================================================
 * This section specifically overrides ALL hardcoded #7366FF and #FF3364 
 * values found throughout app.css to use our brand colors instead.
 * 
 * There are 263+ instances of hardcoded colors that need to be overridden!
 */

/* 
 * -----------------------------------------------------------------------
 * 🎯 HARDCODED TEXT COLOR OVERRIDES
 * -----------------------------------------------------------------------
 */

/* Override any element with hardcoded primary text color */
*[style*="#7366FF"],
*[style*="#7366ff"] {
  color: var(--brand-primary) !important;
}

*[style*="#FF3364"],
*[style*="#ff3364"],
*[style*="#f73164"],
*[style*="#F73164"] {
  color: var(--brand-secondary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 HARDCODED BACKGROUND COLOR OVERRIDES
 * -----------------------------------------------------------------------
 */

/* Override any element with hardcoded primary background */
*[style*="background-color:#7366FF"],
*[style*="background-color:#7366ff"],
*[style*="background:#7366FF"],
*[style*="background:#7366ff"] {
  background-color: var(--brand-primary) !important;
}

*[style*="background-color:#FF3364"],
*[style*="background-color:#ff3364"],
*[style*="background-color:#f73164"],
*[style*="background-color:#F73164"],
*[style*="background:#FF3364"],
*[style*="background:#ff3364"],
*[style*="background:#f73164"],
*[style*="background:#F73164"] {
  background-color: var(--brand-secondary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 HARDCODED BORDER COLOR OVERRIDES
 * -----------------------------------------------------------------------
 */

/* Override any element with hardcoded primary border */
*[style*="border-color:#7366FF"],
*[style*="border-color:#7366ff"],
*[style*="border:#7366FF"],
*[style*="border:#7366ff"],
*[style*="border-top:#7366FF"],
*[style*="border-top:#7366ff"],
*[style*="border-bottom:#7366FF"],
*[style*="border-bottom:#7366ff"],
*[style*="border-left:#7366FF"],
*[style*="border-left:#7366ff"],
*[style*="border-right:#7366FF"],
*[style*="border-right:#7366ff"] {
  border-color: var(--brand-primary) !important;
}

*[style*="border-color:#FF3364"],
*[style*="border-color:#ff3364"],
*[style*="border-color:#f73164"],
*[style*="border-color:#F73164"],
*[style*="border:#FF3364"],
*[style*="border:#ff3364"],
*[style*="border:#f73164"],
*[style*="border:#F73164"],
*[style*="border-top:#FF3364"],
*[style*="border-top:#ff3364"],
*[style*="border-top:#f73164"],
*[style*="border-top:#F73164"],
*[style*="border-bottom:#FF3364"],
*[style*="border-bottom:#ff3364"],
*[style*="border-bottom:#f73164"],
*[style*="border-bottom:#F73164"],
*[style*="border-left:#FF3364"],
*[style*="border-left:#ff3364"],
*[style*="border-left:#f73164"],
*[style*="border-left:#F73164"],
*[style*="border-right:#FF3364"],
*[style*="border-right:#ff3364"],
*[style*="border-right:#f73164"],
*[style*="border-right:#F73164"] {
  border-color: var(--brand-secondary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 SPECIFIC COMPONENT OVERRIDES
 * -----------------------------------------------------------------------
 * Target specific components that use hardcoded colors
 */

/* Badge light primary override */
.badge-light-primary {
  background-color: white !important;
  color: var(--brand-primary) !important;
}

/* Chart and data visualization overrides */
.apexcharts-theme-light .apexcharts-series-primary .apexcharts-area,
.apexcharts-theme-light .apexcharts-series-primary .apexcharts-line {
  fill: var(--brand-primary) !important;
  stroke: var(--brand-primary) !important;
}

.apexcharts-theme-light .apexcharts-series-secondary .apexcharts-area,
.apexcharts-theme-light .apexcharts-series-secondary .apexcharts-line {
  fill: var(--brand-secondary) !important;
  stroke: var(--brand-secondary) !important;
}

/* Calendar and date picker overrides */
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  background-color: var(--brand-primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Modal and dialog overrides */
.modal-header {
  border-bottom-color: var(--primary-light) !important;
}

.modal-footer {
  border-top-color: var(--primary-light) !important;
}

/* Dropdown and select overrides */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-light) !important;
}

/* Tab navigation overrides */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand-primary) !important;
}

/* Pagination overrides */
.page-link {
  color: var(--brand-primary) !important;
}

.page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.page-link:hover {
  background-color: var(--primary-light) !important;
  color: var(--primary-hover) !important;
}

/* Carousel and slider overrides */
.carousel-indicators .active {
  background-color: var(--brand-primary) !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  color: var(--brand-primary) !important;
}

/* Tooltip and popover overrides */
.tooltip-inner {
  background-color: var(--brand-dark) !important;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--brand-dark) !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--brand-dark) !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--brand-dark) !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--brand-dark) !important;
}

/* Toast notification overrides */
.toast-container {
    /* Ensure proper stacking and spacing */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    /* Smooth animations for show/hide */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100%);
    opacity: 0;
    margin-bottom: 0.5rem;
}

.toast.showing {
    transform: translateX(0);
    opacity: 1;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.toast.hide {
    transform: translateX(100%);
    opacity: 0;
}

/* For left positioned toasts */
.toast-container[class*="start"] .toast {
    transform: translateX(-100%);
}

.toast-container[class*="start"] .toast.showing,
.toast-container[class*="start"] .toast.show {
    transform: translateX(0);
}

.toast-container[class*="start"] .toast.hide {
    transform: translateX(-100%);
}

/* For center positioned toasts */
.toast-container[class*="center"] .toast {
    transform: translateY(-20px);
    opacity: 0;
}

.toast-container[class*="center"] .toast.showing,
.toast-container[class*="center"] .toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-container[class*="center"] .toast.hide {
    transform: translateY(-20px);
    opacity: 0;
}

.toast.toast-themed {
    background-color: var(--bs-body-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

/* Toast border colors for left accent - more precise alignment */
.toast.border-primary-toast {
    border-end-start-radius: 4px solid var(--brand-primary) !important;
}

.toast.border-secondary-toast {
    border-end-start-radius: 4px solid var(--brand-secondary) !important;
}

.toast.border-success-toast {
    border-end-start-radius: 4px solid var(--brand-success) !important;
}

.toast.border-danger-toast {
    border-end-start-radius: 4px solid var(--brand-danger) !important;
}

.toast.border-info-toast {
    border-end-start-radius: 4px solid var(--brand-info) !important;
}

.toast.border-warning-toast {
    border-end-start-radius: 4px solid var(--brand-warning) !important;
}

/* Softer, more subtle header backgrounds with transparency */
.toast-header {
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1rem;
    position: relative;
}

/* Subtle overlay backgrounds for headers */
.toast-header.bg-primary {
    background-color: rgba(30, 64, 175, 0.1) !important;
    color: var(--brand-primary) !important;
    border-bottom-color: rgba(30, 64, 175, 0.15);
}

.toast-header.bg-secondary {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: var(--brand-secondary) !important;
    border-bottom-color: rgba(249, 115, 22, 0.15);
}

.toast-header.bg-success {
    background-color: rgba(5, 150, 105, 0.1) !important;
    color: var(--brand-success) !important;
    border-bottom-color: rgba(5, 150, 105, 0.15);
}

.toast-header.bg-danger {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: var(--brand-danger) !important;
    border-bottom-color: rgba(220, 38, 38, 0.15);
}

.toast-header.bg-info {
    background-color: rgba(2, 132, 199, 0.1) !important;
    color: var(--brand-info) !important;
    border-bottom-color: rgba(2, 132, 199, 0.15);
}

.toast-header.bg-warning {
    background-color: rgba(217, 119, 6, 0.1) !important;
    color: var(--brand-warning) !important;
    border-bottom-color: rgba(217, 119, 6, 0.15);
}

/* Toast header should align perfectly with the left border */
.toast.border-primary-toast .toast-header,
.toast.border-secondary-toast .toast-header,
.toast.border-success-toast .toast-header,
.toast.border-danger-toast .toast-header,
.toast.border-info-toast .toast-header,
.toast.border-warning-toast .toast-header {
    border-top-left-radius: 0.5rem;
    margin-left: -4px;
    padding-left: calc(1rem + 4px);
}

.toast-body {
    padding: 1rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    margin-left: -4px;
    padding-left: calc(1rem + 4px);
}

/* Toast body border radius when no progress bar */
.toast .toast-body {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Override when progress bar exists */
.toast .toast-body:has(+ .toast-progress),
.toast:has(.toast-progress) .toast-body {
    border-radius: 0;
}

/* Fallback for browsers without :has() support */
.toast.with-progress .toast-body {
    border-radius: 0;
}

/* Toast progress bar styling */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.toast-progress .progress {
    height: 3px;
    margin: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Toast progress bar colors - override default progress-bar styling */
.toast-progress .progress-bar.bg-primary {
    background-color: var(--brand-primary) !important;
}

.toast-progress .progress-bar.bg-secondary {
    background-color: var(--brand-secondary) !important;
}

.toast-progress .progress-bar.bg-success {
    background-color: var(--brand-success) !important;
}

.toast-progress .progress-bar.bg-danger {
    background-color: var(--brand-danger) !important;
}

.toast-progress .progress-bar.bg-info {
    background-color: var(--brand-info) !important;
}

.toast-progress .progress-bar.bg-warning {
    background-color: var(--brand-warning) !important;
}

/* Dark mode support with subtle backgrounds */
body.dark .toast.toast-themed {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-dark, #495057);
}

body.dark .toast-body {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

body.dark .toast-header {
    border-bottom-color: rgba(255, 255, 255, .05);
}

/* Dark mode subtle header backgrounds */
body.dark .toast-header.bg-primary {
    background-color: rgba(30, 64, 175, 0.15) !important;
    color: #6b96ff !important;
}

body.dark .toast-header.bg-secondary {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #ff9b47 !important;
}

body.dark .toast-header.bg-success {
    background-color: rgba(5, 150, 105, 0.15) !important;
    color: #4ade80 !important;
}

body.dark .toast-header.bg-danger {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

body.dark .toast-header.bg-info {
    background-color: rgba(2, 132, 199, 0.15) !important;
    color: #60a5fa !important;
}

body.dark .toast-header.bg-warning {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
}

body.dark .toast-progress .progress {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Spinner and loading overrides */
.spinner-border-primary {
  border-color: var(--primary-light) !important;
  border-right-color: var(--brand-primary) !important;
}

.spinner-grow-primary {
  background-color: var(--brand-primary) !important;
}

/* Switch and toggle overrides */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* Range slider overrides */
.custom-range::-webkit-slider-thumb {
  background: var(--brand-primary) !important;
}

.custom-range::-moz-range-thumb {
  background: var(--brand-primary) !important;
}

.custom-range::-ms-thumb {
  background: var(--brand-primary) !important;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--brand-white), 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--brand-white), 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px var(--brand-white), 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
}

/* List group overrides */
.list-group-item.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--primary-light) !important;
}

/* Card overrides */
.card-header-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.card-primary {
  border-color: var(--brand-primary) !important;
}

.card-primary .card-header {
  background-color: var(--brand-primary) !important;
  border-bottom-color: var(--brand-primary) !important;
}

/* Sidebar and navigation active states */
.sidebar .nav-link.active {
  background-color: var(--primary-light) !important;
  color: var(--brand-primary) !important;
}

.sidebar .nav-link:hover {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--brand-primary) !important;
}

/* Sidebar thumb-tack icon color */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-list i.fa-thumb-tack {
  color: var(--brand-secondary) !important;
}

/* Header and navbar overrides */
.navbar-brand {
  color: var(--brand-primary) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--brand-primary) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--primary-hover) !important;
}

/* Dashboard widget overrides */
.widget-primary {
  background: var(--gradient-primary) !important;
}

.widget-secondary {
  background: var(--gradient-secondary) !important;
}

.widget-icon-primary {
  background-color: var(--brand-primary) !important;
}

.widget-icon-secondary {
  background-color: var(--brand-secondary) !important;
}

/* Data table overrides */
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: var(--primary-light) !important;
}

.table-hover .table-primary:hover,
.table-hover .table-primary:hover > th,
.table-hover .table-primary:hover > td {
  background-color: var(--primary-border) !important;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: var(--secondary-light) !important;
}

.table-hover .table-secondary:hover,
.table-hover .table-secondary:hover > th,
.table-hover .table-secondary:hover > td {
  background-color: var(--secondary-border) !important;
}

/* File upload and dropzone overrides */
.dropzone {
  border-color: var(--primary-border) !important;
}

.dropzone.dz-drag-hover {
  border-color: var(--brand-primary) !important;
}

.dropzone .dz-message {
  color: var(--brand-primary) !important;
}

/* Select2 and multiselect overrides */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand-primary) !important;
}

/* Date range picker overrides */
.daterangepicker .ranges li.active {
  background-color: var(--brand-primary) !important;
  color: var(--brand-white) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Code editor and syntax highlighting overrides */
.CodeMirror-focused .CodeMirror-selected {
  background: rgba(var(--primary-rgb), 0.2) !important;
}

.CodeMirror-activeline-background {
  background: var(--primary-light) !important;
}

/* Chart.js and data visualization overrides */
.chartjs-tooltip {
  border-color: var(--brand-primary) !important;
}

.chartjs-tooltip-key {
  border-color: var(--brand-primary) !important;
}

/* Progress bar variants */
.progress-bar-animated {
  background-color: var(--brand-primary) !important;
}

.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) !important;
  background-color: var(--brand-primary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 CSS CUSTOM PROPERTY OVERRIDES FOR APP.CSS VARIABLES
 * -----------------------------------------------------------------------
 * Override the hardcoded values in app.css CSS custom properties
 */

:root {
  /* Force override the CSS variables in app.css that use hardcoded colors */
  --theme-default: var(--brand-primary) !important;
  --theme-secondary: var(--brand-secondary) !important;
  
  /* Override any remaining hardcoded primary/secondary variations */
  --primary-color: var(--brand-primary) !important;
  --secondary-color: var(--brand-secondary) !important;
  --primary-bg: var(--brand-primary) !important;
  --secondary-bg: var(--brand-secondary) !important;
  --primary-border: var(--brand-primary) !important;
  --secondary-border: var(--brand-secondary) !important;
  --primary-text: var(--brand-primary) !important;
  --secondary-text: var(--brand-secondary) !important;

  
  /* Chart and widget color overrides */
  --widget-primary: var(--brand-primary) !important;
  --widget-secondary: var(--brand-secondary) !important;
  --chart-primary: var(--brand-primary) !important;
  --chart-secondary: var(--brand-secondary) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 SVG AND ICON COLOR OVERRIDES
 * -----------------------------------------------------------------------
 * Override SVG fill and stroke colors
 */

/* SVG fills with hardcoded colors */
svg[fill="#7366FF"],
svg[fill="#7366ff"] {
  fill: var(--brand-primary) !important;
}

svg[fill="#FF3364"],
svg[fill="#ff3364"],
svg[fill="#f73164"],
svg[fill="#F73164"] {
  fill: var(--brand-secondary) !important;
}

/* SVG strokes with hardcoded colors */
svg[stroke="#7366FF"],
svg[stroke="#7366ff"] {
  stroke: var(--brand-primary) !important;
}

svg[stroke="#FF3364"],
svg[stroke="#ff3364"],
svg[stroke="#f73164"],
svg[stroke="#F73164"] {
  stroke: var(--brand-secondary) !important;
}

/* Icon color classes */
.icon-primary {
  color: var(--brand-primary) !important;
  fill: var(--brand-primary) !important;
}

.icon-secondary {
  color: var(--brand-secondary) !important;
  fill: var(--brand-secondary) !important;
}

/* Font Awesome and other icon libraries */
.fa-primary,
.fas.text-primary,
.far.text-primary,
.fab.text-primary {
  color: var(--brand-primary) !important;
}

.fa-secondary,
.fas.text-secondary,
.far.text-secondary,
.fab.text-secondary {
  color: var(--brand-secondary) !important;
}

/* Feather icons */
.feather.text-primary {
  color: var(--brand-primary) !important;
  stroke: var(--brand-primary) !important;
}

.feather.text-secondary {
  color: var(--brand-secondary) !important;
  stroke: var(--brand-secondary) !important;
}

/* 
 * =======================================================================
 * 🏁 END OF HARDCODED COLOR OVERRIDES
 * =======================================================================
 * This comprehensive override system should catch all instances of 
 * hardcoded #7366FF and #FF3364 colors throughout the application
 */

/* Text Color Classes - Smart Contrast */
.text-primary {
  color: var(--brand-primary) !important;
}

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

/* When text-primary is used on elements that might have brand backgrounds */
.bg-primary .text-primary,
.badge-primary .text-primary,
.btn-primary .text-primary,
.alert-primary .text-primary {
  color: var(--brand-primary-text) !important;
}

/* When text-secondary is used on elements that might have brand backgrounds */
.bg-secondary .text-secondary,
.badge-secondary .text-secondary,
.btn-secondary .text-secondary,
.alert-secondary .text-secondary {
  color: var(--brand-secondary-text) !important;
}

/* Link colors with proper contrast */
a.text-primary {
  color: var(--brand-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--primary-hover) !important;
}

a.text-secondary {
  color: var(--brand-secondary) !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
  color: var(--secondary-hover) !important;
}

/* 
 * =======================================================================
 * 📅 DATE RANGE PICKER COMPREHENSIVE STYLING
 * =======================================================================
 * 
 * Complete styling for the daterangepicker component with responsive design
 * This section handles all daterangepicker styling needs across the application
 */

/* Update CSS custom properties for daterangepicker */
:root {
  --theme-default: var(--brand-primary);
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 CONTAINER AND LAYOUT
 * -----------------------------------------------------------------------
 */

/* Dropdown positioning fixes */
.dropdown.position-relative {
  position: relative !important;
}

.dropdown.position-relative .dropdown-menu,
.daterangepicker.dropdown-menu {
  position: absolute !important;
  overflow: visible !important;
}

/* Main container styling */
.daterangepicker {
  background: inherit !important;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
}

.daterangepicker.dropdown-menu {
  position: fixed !important;
  z-index: 1051 !important; /* Ensure it appears above modals */
}

/* Size and layout when showing ranges */
.daterangepicker.show-ranges {
  width: auto !important;
  min-width: 700px !important;
  max-width: 900px !important;
}

.daterangepicker.show-ranges::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Ranges section layout */
.daterangepicker.show-ranges .ranges {
  float: left !important;
}

/* Calendar containers layout */
.daterangepicker.show-ranges .drp-calendar.left,
.daterangepicker.show-ranges .drp-calendar.right {
  float: left !important;
  padding: 12px !important;
  min-width: 280px !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎯 BORDERS AND STRUCTURE
 * -----------------------------------------------------------------------
 */

/* Border overrides for LTR and RTL modes */
.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid var(--bs-border-color, #dee2e6) !important;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid var(--bs-border-color, #dee2e6) !important;
}

/* Calendar table styling */
.daterangepicker .calendar-table {
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
  background: var(--bs-body-bg, #fff) !important;
}

/* Override the media query for desktop - fix unwanted padding */
@media (min-width: 564px) {
  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 0 !important; /* Remove the 8px padding that's not needed on desktop */
  }
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  padding: 8px !important;
  border: none !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: var(--bs-body-color, #212529) !important;
}

.daterangepicker .calendar-table th {
  background-color: var(--light-background, #f8f9fa) !important;
  font-weight: 600 !important;
  color: var(--brand-body-color) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🎨 INTERACTIVE STATES AND COLORS
 * -----------------------------------------------------------------------
 */

/* Hover states */
.daterangepicker .calendar-table td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--primary-light) !important;
  border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  color: var(--brand-primary) !important;
}

/* Active and selected dates */
.daterangepicker.ltr tr td.active,
.daterangepicker tr td.start-date,
.daterangepicker tr td.end-date {
  background-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
  border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
}

/* In-range dates */
.daterangepicker tr td.in-range,
.daterangepicker.ltr tr td.in-range {
  background-color: var(--primary-light) !important;
  color: var(--brand-primary-contrast) !important;
}

/* Today's date */
.daterangepicker .calendar-table td.today {
  background-color: var(--warning-light) !important;
  color: var(--brand-warning) !important;
}

/* Range options styling */
.daterangepicker.ltr .ranges li {
  color: var(--brand-primary) !important;
}

.daterangepicker.ltr .ranges li:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

.daterangepicker.ltr .ranges li.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 🧭 NAVIGATION AND CONTROLS
 * -----------------------------------------------------------------------
 */

/* Month/year navigation arrows */
.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
  color: var(--brand-primary) !important;
  border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  padding: 4px 8px !important;
}

.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
  background-color: var(--primary-light) !important;
}

/* Fix for dark mode navigation arrows */
body.dark .daterangepicker .calendar-table .next span,
body.dark .daterangepicker .calendar-table .prev span {
  color: #fff !important;
  border-color: #fff !important;
}

/* Ensure the span borders for the arrow triangles are visible in dark mode */
body.dark .daterangepicker .calendar-table .next span {
  border-left-color: #fff !important;
}

body.dark .daterangepicker .calendar-table .prev span {
  border-right-color: #fff !important;
}

/* Month header */
.daterangepicker th.month,
.daterangepicker td.month {
  color: var(--brand-primary) !important;
}

/* Button container */
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
  padding: 12px !important;
  text-align: right !important;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px !important;
  font-size: 0.875rem !important;
}

/* Apply button */
.daterangepicker .drp-buttons .btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-text) !important;
}

.daterangepicker .drp-buttons .btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.daterangepicker .drp-buttons .btn-primary:active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
}

/* Cancel button */
.daterangepicker .drp-buttons .btn-default {
  background-color: var(--brand-light) !important;
  border-color: var(--primary-border) !important;
  color: var(--brand-body-color) !important;
}

.daterangepicker .drp-buttons .btn-default:hover {
  background-color: var(--brand-light-bg) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* Override button active background */
.daterangepicker .drp-buttons .btn:active,
.daterangepicker .drp-buttons .btn.active {
  background-color: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: var(--brand-primary-text) !important;
}

/* 
 * -----------------------------------------------------------------------
 * 📱 RESPONSIVE DESIGNS
 * -----------------------------------------------------------------------
 */

/* Tablet and smaller screens */
@media (max-width: 768px) {
  /* Container sizing with improved positioning */
  .daterangepicker.show-ranges {
    min-width: 320px !important;
    max-width: 100vw !important;
    width: calc(100vw - 30px) !important;
    left: 15px !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  /* Stack vertically on mobile */
  .daterangepicker.show-ranges .ranges {
    width: 100% !important;
    float: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6) !important;
    margin-bottom: 12px !important;
  }

  /* Improved ranges UI for touch devices */
  .daterangepicker.show-ranges .ranges ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .daterangepicker.show-ranges .ranges li {
    flex: 1 1 calc(50% - 4px) !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    padding: 8px !important;
    text-align: center !important;
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
  }

  /* Full width calendars on mobile with better spacing */
  .daterangepicker.show-ranges .drp-calendar,
  .daterangepicker.show-ranges .drp-calendar.left,
  .daterangepicker.show-ranges .drp-calendar.right {
    float: none !important;
    width: 100% !important;
    min-width: auto !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
  }
  
  /* Border handling for mobile */
  .daterangepicker.show-ranges.ltr .drp-calendar {
    border: none !important;
  }
  
  .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: none !important;
  }
  
  .daterangepicker.show-ranges.rtl .drp-calendar {
    border: none !important;
  }
  
  .daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right: none !important;
  }

  /* Better spacing and legibility for mobile calendar cells */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    padding: 10px 4px !important;
    font-size: 0.875rem !important;
    height: 36px !important;
    width: 36px !important;
    line-height: 1.2 !important;
  }
  
  /* Improved calendar headers for mobile */
  .daterangepicker .calendar-table th {
    font-weight: 600 !important;
    padding: 8px 4px !important;
  }
  
  /* Improved visibility for dark mode on mobile */
  body.dark .daterangepicker {
    background-color: var(--dark-active) !important;
    border-color: var(--dark-hover) !important;
  }
  
  body.dark .daterangepicker .calendar-table {
    background-color: var(--dark-hover) !important;
  }
  
  body.dark .daterangepicker .calendar-table th {
    background-color: var(--dark-active) !important;
    color: var(--brand-primary-text) !important;
  }
  
  body.dark .daterangepicker .calendar-table td {
    color: var(--brand-primary-text) !important;
  }
  
  body.dark .daterangepicker .calendar-table td.off {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.3) !important;
  }
  
  body.dark .daterangepicker .drp-buttons {
    border-top-color: var(--dark-hover) !important;
  }
  
  /* Improved buttons for mobile */
  .daterangepicker .drp-buttons {
    padding: 12px 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
  
  .daterangepicker .drp-buttons .btn {
    flex: 1 !important;
    margin: 0 5px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
  
  .daterangepicker .drp-buttons .drp-selected {
    flex-basis: 100% !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    font-size: 0.875rem !important;
  }
}

/* Extra small phone screens */
@media (max-width: 480px) {
  /* Maximized screen usage with better positioning */
  .daterangepicker.show-ranges {
    min-width: 280px !important;
    width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
  }
  
  /* Stacked range options for very small screens */
  .daterangepicker.show-ranges .ranges li {
    flex: 1 1 100% !important;
    font-size: 0.875rem !important;
    padding: 10px !important;
    margin-bottom: 5px !important;
  }
  
  /* More compact cells for very small screens */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    padding: 8px 3px !important;
    font-size: 0.8125rem !important;
    height: 32px !important;
    width: 32px !important;
  }
  
  /* Improved date range input for tiny screens */
  .daterangepicker .drp-buttons .drp-selected {
    font-size: 0.75rem !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  
  /* Better buttons for tiny screens */
  .daterangepicker .drp-buttons .btn {
    font-size: 0.8125rem !important;
    padding: 6px 8px !important;
  }
}

/* ================================
 * ENHANCED TOAST NOTIFICATION STYLES
 * ================================ */

/* Toast container positioning improvements */
.toast-container {
    z-index: 1090;
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
}

/* Toast animation improvements */
.toast {
    transition: all 0.3s ease-in-out;
}

.toast:not(.show) {
    opacity: 0;
    transform: translateX(100%);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* Toast action button styling */
.toast-body .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    margin: 0.125rem 0.25rem 0 0;
}

/* Responsive toast improvements */
@media (max-width: 576px) {
    .toast-container {
        left: 1rem !important;
        right: 1rem !important;
        max-width: none !important;
    }
    
    .toast {
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    .toast-header {
        padding: 0.75rem;
    }
    
    .toast-body {
        padding: 0.75rem;
    }
}

/* Dark mode toast improvements */
body.dark .toast {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
}body.dark .toast-header {
  border-bottom-color: rgba(255, 255, 255, .1);
}

/* Accessibility improvements */
.toast[aria-live="assertive"] {
  position: relative;
}

/* Toast z-index layering */
.toast-container .toast:nth-child(1) { z-index: 1095; }
.toast-container .toast:nth-child(2) { z-index: 1094; }
.toast-container .toast:nth-child(3) { z-index: 1093; }
.toast-container .toast:nth-child(4) { z-index: 1092; }
.toast-container .toast:nth-child(5) { z-index: 1091; }

/* ========================================= */
/* Font Awesome Close Button Styling */
/* ========================================= */

/* Font Awesome close button styling */
.toast-header .btn-close-fa {
    background: none;
    border: none;
    padding: 0.375rem 0.375rem;
    margin: -0.375rem -0.375rem -0.375rem auto;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.toast-header .btn-close-fa:hover {
    transform: scale(1.1);
}

.toast-header .btn-close-fa:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

.toast-header .btn-close-fa i {
    font-size: 0.875rem;
    transition: color 0.15s ease-in-out;
}

/* Color-matched close button backgrounds and icons */
.toast-header.bg-primary .btn-close-fa {
    background-color: rgba(var(--primary-rgb), 0.2);
}

.toast-header.bg-primary .btn-close-fa i {
    color: var(--brand-primary);
}

.toast-header.bg-primary .btn-close-fa:hover {
    background-color: rgba(var(--primary-rgb), 0.3);
}

.toast-header.bg-secondary .btn-close-fa {
    background-color: rgba(var(--secondary-rgb), 0.2);
}

.toast-header.bg-secondary .btn-close-fa i {
    color: var(--brand-secondary);
}

.toast-header.bg-secondary .btn-close-fa:hover {
    background-color: rgba(var(--secondary-rgb), 0.3);
}

.toast-header.bg-success .btn-close-fa {
    background-color: rgba(var(--success-rgb), 0.2);
}

.toast-header.bg-success .btn-close-fa i {
    color: var(--brand-success);
}

.toast-header.bg-success .btn-close-fa:hover {
    background-color: rgba(var(--success-rgb), 0.3);
}

.toast-header.bg-danger .btn-close-fa {
    background-color: rgba(var(--danger-rgb), 0.2);
}

.toast-header.bg-danger .btn-close-fa i {
    color: var(--brand-danger);
}

.toast-header.bg-danger .btn-close-fa:hover {
    background-color: rgba(var(--danger-rgb), 0.3);
}

.toast-header.bg-info .btn-close-fa {
    background-color: rgba(var(--info-rgb), 0.2);
}

.toast-header.bg-info .btn-close-fa i {
    color: var(--brand-info);
}

.toast-header.bg-info .btn-close-fa:hover {
    background-color: rgba(var(--info-rgb), 0.3);
}

.toast-header.bg-warning .btn-close-fa {
    background-color: rgba(var(--warning-rgb), 0.2);
}

.toast-header.bg-warning .btn-close-fa i {
    color: var(--brand-warning);
}

.toast-header.bg-warning .btn-close-fa:hover {
    background-color: rgba(var(--warning-rgb), 0.3);
}

/* Dark mode Font Awesome close button styling */
body.dark .toast-header .btn-close-fa:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

body.dark .toast-header.bg-primary .btn-close-fa {
    background-color: rgba(107, 150, 255, 0.2);
}

body.dark .toast-header.bg-primary .btn-close-fa i {
    color: #6b96ff;
}

body.dark .toast-header.bg-primary .btn-close-fa:hover {
    background-color: rgba(107, 150, 255, 0.3);
}

body.dark .toast-header.bg-secondary .btn-close-fa {
    background-color: rgba(255, 155, 71, 0.2);
}

body.dark .toast-header.bg-secondary .btn-close-fa i {
    color: #ff9b47;
}

body.dark .toast-header.bg-secondary .btn-close-fa:hover {
    background-color: rgba(255, 155, 71, 0.3);
}

body.dark .toast-header.bg-success .btn-close-fa {
    background-color: rgba(74, 222, 128, 0.2);
}

body.dark .toast-header.bg-success .btn-close-fa i {
    color: #4ade80;
}

body.dark .toast-header.bg-success .btn-close-fa:hover {
    background-color: rgba(74, 222, 128, 0.3);
}

body.dark .toast-header.bg-danger .btn-close-fa {
    background-color: rgba(248, 113, 113, 0.2);
}

body.dark .toast-header.bg-danger .btn-close-fa i {
    color: #f87171;
}

body.dark .toast-header.bg-danger .btn-close-fa:hover {
    background-color: rgba(248, 113, 113, 0.3);
}

body.dark .toast-header.bg-info .btn-close-fa {
    background-color: rgba(96, 165, 250, 0.2);
}

body.dark .toast-header.bg-info .btn-close-fa i {
    color: #60a5fa;
}

body.dark .toast-header.bg-info .btn-close-fa:hover {
    background-color: rgba(96, 165, 250, 0.3);
}

body.dark .toast-header.bg-warning .btn-close-fa {
    background-color: rgba(251, 191, 36, 0.2);
}

body.dark .toast-header.bg-warning .btn-close-fa i {
    color: #fbbf24;
}

body.dark .toast-header.bg-warning .btn-close-fa:hover {
    background-color: rgba(251, 191, 36, 0.3);
}