/* eshraqat-ui.css - Saudi Modern UI v6.1 (Restored Comfort) */
:root {
    /* Brand Identity Colors (Provided by User) */
    --maroon: #5c0e33;
    --navy: #153351;
    --orange: #ff8c00;

    /* Primary System Color & Bootstrap Overrides */
    --bs-primary: var(--maroon) !important;
    --bs-primary-rgb: 92, 14, 51 !important;
    
    /* Overriding the default theme-3 green to Brand Maroon */
    --bs-green: var(--maroon) !important;
    --bs-green-rgb: 92, 14, 51 !important;
    
    --color-customColor: var(--maroon) !important;

    --eshraqat-primary: var(--maroon) !important;
    --eshraqat-secondary: var(--navy) !important;
    --eshraqat-gold: #d4af37;

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --glass-blur: 8px;
}

/* Fix login background explicitly just in case */
.custom-login .bg-login {
    background: var(--maroon) !important;
}

/* Force login illustration to blend with the brand */
.login-bg-img .login-bg-1 {
    filter: hue-rotate(220deg) saturate(0.8) brightness(0.9);
}

.card:hover,
.list_card:hover,
.glass-card:hover {
    transform: translateY(-3px);
    /* Subtle lift */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Color Overrides - Simplified */
.text-primary {
    color: var(--eshraqat-primary) !important;
}

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

/* Specific Saudi Button Classes (Optional Use) */
.btn-saudi-maroon {
    background-color: var(--maroon) !important;
    border-color: var(--maroon) !important;
    color: #fff !important;
}

.btn-saudi-orange {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
}

.btn-saudi-navy {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #fff !important;
}

/* Glassmorphism Standard - Soft & Balanced */
.card:not([class*="bg-"]):not(.bg-white),
.list_card:not([class*="bg-"]):not(.bg-white),
.glass-card:not([class*="bg-"]):not(.bg-white) {
    background: var(--glass-bg);
}

.card,
.list_card,
.glass-card {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

/* Color Overrides */
.text-primary {
    color: var(--eshraqat-primary) !important;
}

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

/* Charts RTL Fix */
.apexcharts-canvas {
    direction: ltr;
}

.apexcharts-yaxis-label,
.apexcharts-xaxis-label {
    direction: ltr;
    font-family: inherit;
}

/* Logical Properties for RTL Support */
[dir="rtl"] .me-2 {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

[dir="rtl"] .ms-2 {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .card,
    .list_card {
        border-radius: 12px;
        backdrop-filter: none;
        /* Disable blur on mobile for max performance */
        -webkit-backdrop-filter: none;
    }
}

/* Rounded Avatars & Profile Images - Point 99 */
.header-avatar,
.avatar-circle,
.user-avatar,
.img-user,
.rounded-circle {
    border-radius: 50% !important;
    object-fit: cover;
    border: 1px solid var(--glass-border);
}

.card-img-top {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Visibility Fixes for Low Contrast Text - Expert Refinement */
.breadcrumb-item, 
.breadcrumb-item a,
.breadcrumb-item.active {
    color: #334155 !important; /* Dark Slate for visibility */
    font-weight: 600 !important;
    text-shadow: none !important;
}

.breadcrumb-item a:hover {
    color: var(--eshraqat-primary) !important;
}

/* Enhancing muted text visibility in cards and forms */
.text-muted {
    color: #4b5563 !important; /* Darker gray for readable muted text */
}

.card p.text-muted, 
.card span.text-muted {
    color: #475569 !important;
    font-weight: 500;
}

/* Sidebar sub-menu visibility fix */
.dash-sidebar .dash-submenu .dash-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dash-sidebar .dash-submenu .dash-item.active > .dash-link,
.dash-sidebar .dash-submenu .dash-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Statistics title contrast */
.fw-bold.text-muted {
    color: #1e293b !important;
    letter-spacing: 0.2px;
}

/* Ensure colored cards keep their background color and text colors */
.card.bg-primary {
    background: var(--eshraqat-primary) !important;
    color: #ffffff !important;
}
.card.bg-secondary {
    background: var(--eshraqat-secondary, #991b1b) !important;
    color: #ffffff !important;
}
.card.bg-success {
    background: #10b981 !important; /* Premium modern emerald green */
    color: #ffffff !important;
}
.card.bg-warning {
    background: #f59e0b !important; /* Premium modern amber orange */
    color: #ffffff !important;
}
.card.bg-danger {
    background: #ef4444 !important; /* Premium modern red */
    color: #ffffff !important;
}
.card.bg-info {
    background: #06b6d4 !important; /* Premium modern cyan */
    color: #ffffff !important;
}

/* High contrast text rules for colored cards */
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) .text-white-50,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) .text-muted,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) p.text-muted,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) span.text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h1,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h2,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h3,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h4,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h5,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) h6,
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) p:not(.btn),
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) span:not(.badge):not(.btn),
.card[class*="bg-"]:not(.bg-white):not(.bg-transparent):not([class*="bg-light"]) i:not(.btn-icon) {
}

/* ==============================================================
   Mobile UX & Touch Target Enhancements (Go-Live Ready)
   ============================================================== */
@media (max-width: 768px) {
    /* 1. Touch Targets: Fat-finger friendly buttons and links */
    .btn, .nav-link, .dropdown-item, .page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure action buttons in tables are easier to tap */
    .table .action-btn {
        min-width: 44px;
        min-height: 44px;
        margin: 2px !important;
    }

    /* 2. iOS Zoom Fix: Prevent auto-zoom on forms */
    input[type="text"], input[type="email"], input[type="number"], 
    input[type="password"], input[type="tel"], input[type="search"], 
    input[type="date"], select, textarea, .form-control {
        font-size: 16px !important; /* iOS requires 16px to not zoom */
        width: 100%;
        max-width: 100%;
    }

    /* 3. Layout, Container & Spacing Improvements for Mobile */
    .dash-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .dash-container .dash-content {
        padding: 12px 10px 24px 10px !important; /* Extremely clean side gutters on mobile */
    }

    .card {
        margin-bottom: 0.85rem !important; /* Force space between stacked cards */
    }
    
    /* Force override Bootstrap spacing utilities inside mobile cards */
    .card-body,
    .card-body.p-5,
    .card-body.p-4,
    .card-body.p-3 {
        padding: 1rem !important; /* Reduce excessive padding inside mobile cards */
    }

    /* Tighten row gutter spacing on mobile */
    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
    .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 4. Navbar & Header: Responsive bounds */
    .eshraqat-header-left {
        gap: 6px !important;
    }
    .header-icon-btn {
        padding: 4px !important;
        font-size: 1.2rem !important;
    }
    .header-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* 5. Tables: Enforce responsive bounds */
    .table-responsive {
        border: 0;
        margin-bottom: 1rem;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Premium Search Bar Styling */
.search-input-group {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border-radius: 20px;
    padding: 6px 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.search-input-group:focus-within {
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.08);
    border-color: var(--eshraqat-primary);
}

.search-input-group .search-icon {
    color: #94a3b8;
    font-size: 1.15rem;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.search-input-group:focus-within .search-icon {
    color: var(--eshraqat-primary);
}

.search-input-group input {
    border: none;
    background: transparent;
    outline: none !important;
    width: 100%;
    color: #334155;
    font-size: 0.95rem;
    font-family: inherit;
    box-shadow: none !important;
}

.search-input-group input::placeholder {
    color: #94a3b8;
}

/* ==============================================================
   Premium Button Design System & AI Assistant Button Enhancements
   ============================================================== */

/* 1. Global Button Base Enhancements */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.55rem 1.35rem !important;
    border: 1px solid transparent !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Button Hover Micro-animations */
.btn:hover {
    transform: translateY(-2px) !important;
}

.btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* 2. Brand Primary Buttons (Maroon Gradient) */
.btn-primary {
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(92, 14, 51, 0.22) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #7d1748 0%, #991b1b 100%) !important;
    box-shadow: 0 6px 18px rgba(92, 14, 51, 0.35) !important;
    color: #ffffff !important;
}

/* 3. Brand Secondary Buttons (Navy Gradient) */
.btn-secondary {
    background: linear-gradient(135deg, var(--navy) 0%, #204c77 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(21, 51, 81, 0.22) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
    background: linear-gradient(135deg, #204c77 0%, #2b6197 100%) !important;
    box-shadow: 0 6px 18px rgba(21, 51, 81, 0.35) !important;
    color: #ffffff !important;
}

/* 4. Brand Orange / Warning Buttons */
.btn-warning {
    background: linear-gradient(135deg, var(--orange) 0%, #e06c00 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.22) !important;
}

.btn-warning:hover, .btn-warning:focus {
    background: linear-gradient(135deg, #e06c00 0%, #c05c00 100%) !important;
    box-shadow: 0 6px 18px rgba(255, 140, 0, 0.35) !important;
    color: #ffffff !important;
}

/* 5. Success Buttons (Emerald Green Gradient) */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.22) !important;
}

.btn-success:hover, .btn-success:focus {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35) !important;
    color: #ffffff !important;
}

/* 6. Danger Buttons (Rose/Red Gradient) */
.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.22) !important;
}

.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.35) !important;
    color: #ffffff !important;
}

/* 7. Info Buttons (Cyan Gradient) */
.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.22) !important;
}

.btn-info:hover, .btn-info:focus {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.35) !important;
    color: #ffffff !important;
}

/* 8. Light/White Buttons */
.btn-light, .btn-white {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.btn-light:hover, .btn-white:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 9. Outline Brand Primary Buttons */
.btn-outline-primary {
    border: 2px solid var(--maroon) !important;
    background: transparent !important;
    color: var(--maroon) !important;
}

.btn-outline-primary:hover {
    background: var(--maroon) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(92, 14, 51, 0.2) !important;
}

/* 10. AI Assistant / Content Generator Helper Button Override */
.btn-icon:has(span) {
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px rgba(92, 14, 51, 0.25) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-icon:has(span):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(92, 14, 51, 0.4) !important;
    background: linear-gradient(135deg, #7d1748 0%, var(--maroon) 100%) !important;
}

.btn-icon:has(span) i {
    font-size: 1rem !important;
    margin: 0 !important;
    color: #ffd700 !important; /* Premium Gold for the robot/AI icon */
}

/* 11. Icon-Only Action Buttons Hover Enhancement */
.btn-icon:not(:has(span)) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-icon:not(:has(span)):hover {
    transform: scale(1.1) !important;
}

/* ==============================================================
   Choices.js & Select2 Dropdowns Premium Styling (Brand Maroon & Gold)
   ============================================================== */

/* --- Choices.js Overrides --- */

/* 1. Main Select Input Wrapper (Closed State) */
.choices__inner {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    padding: 0.45rem 1rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 2. Choices Focus State */
.choices.is-focused .choices__inner {
    border-color: var(--maroon) !important;
    box-shadow: 0 0 0 4px rgba(92, 14, 51, 0.15) !important;
}

/* 3. Choices Dropdown Options List Container */
.choices__list--dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    margin-top: 6px !important;
    padding: 6px !important;
    z-index: 1000 !important;
}

/* 4. Dropdown Option Item */
.choices__list--dropdown .choices__item {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
    margin-bottom: 2px !important;
}

/* 5. Highlighted / Hovered Option (Brand Maroon Highlight with White Text) */
.choices__list--dropdown .choices__item.is-highlighted,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item.is-highlighted *,
.choices__list--dropdown .choices__item.is-highlighted span {
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    color: #ffffff !important;
}

/* 6. Active Selection Tag (Multiple or Single chosen option) */
.choices__list--multiple .choices__item,
.choices__inner .choices__item {
    background: rgba(92, 14, 51, 0.07) !important;
    color: var(--maroon) !important;
    border: 1px solid rgba(92, 14, 51, 0.18) !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
}

/* 7. Search Input inside Dropdown */
.choices__list--dropdown .choices__input,
.choices__input {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    background-color: #f8fafc !important;
    font-size: 0.88rem !important;
    margin-bottom: 8px !important;
}

.choices__list--dropdown .choices__input:focus,
.choices__input:focus {
    border-color: var(--maroon) !important;
    box-shadow: 0 0 0 3px rgba(92, 14, 51, 0.15) !important;
}

/* --- Select2 Overrides --- */

/* 1. Closed state selection container */
.select2-container--bootstrap-5 .select2-selection,
.select2-container .select2-selection--single {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    height: auto !important;
    padding: 0.45rem 1rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.25s ease !important;
}

/* 2. Select2 Focus State */
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: var(--maroon) !important;
    box-shadow: 0 0 0 4px rgba(92, 14, 51, 0.15) !important;
}

/* 3. Dropdown Options Container */
.select2-dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}

/* 4. Dropdown option item */
.select2-results__option {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    margin-bottom: 2px !important;
    color: #334155 !important;
}

/* 5. Highlighted / Focused option (Brand Maroon with White Text) */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-results__option--highlighted,
.select2-results__option--highlighted *,
.select2-results__option--highlighted span {
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    color: #ffffff !important;
}

/* 6. Selected option (chosen) */
.select2-results__option[aria-selected=true] {
    background-color: rgba(92, 14, 51, 0.08) !important;
    color: var(--maroon) !important;
    font-weight: 700 !important;
}

/* 7. Search field in dropdown */
.select2-search__field {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    background-color: #f8fafc !important;
}

.select2-search__field:focus {
    border-color: var(--maroon) !important;
    box-shadow: 0 0 0 3px rgba(92, 14, 51, 0.15) !important;
}


/* ==============================================================
   Premium Navigation Tabs & Pills Overrides (Brand Maroon Theme)
   ============================================================== */

/* --- Nav Pills (Pills Navigation) --- */
.nav-pills {
    background: #f1f5f9;
    padding: 6px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    display: inline-flex !important;
}

.nav-pills .nav-link {
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.nav-pills .nav-link:hover {
    color: var(--maroon) !important;
    background: rgba(92, 14, 51, 0.05) !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(92, 14, 51, 0.18) !important;
}

/* --- Nav Tabs (Classic Underline Navigation) --- */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    gap: 10px !important;
}

.nav-tabs .nav-link {
    color: #64748b !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 20px !important;
    position: relative !important;
    transition: color 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
    color: var(--maroon) !important;
}

.nav-tabs .nav-link.active {
    color: var(--maroon) !important;
    background: transparent !important;
    border: none !important;
    font-weight: 700 !important;
}

.nav-tabs .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--maroon) !important;
    border-radius: 3px 3px 0 0 !important;
}

/* ==============================================================
   Flatpickr Calendar Dropdown Premium Styling (Brand Maroon & Orange)
   ============================================================== */

/* 1. Main Calendar Popup Container (Force LTR to align weekdays with days column-by-column) */
.flatpickr-calendar {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 8px !important;
    font-family: inherit !important;
    width: auto !important;
    margin-top: 6px !important;
    direction: ltr !important;
}

/* 2. Month and Year Navigation Header (Force row flex and LTR to prevent overlaps) */
.flatpickr-months {
    background: transparent !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    direction: ltr !important;
}

.flatpickr-current-month {
    color: var(--maroon) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    direction: ltr !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    left: 0 !important;
}

.flatpickr-monthDropdown-months {
    color: var(--maroon) !important;
    font-weight: 700 !important;
    background: transparent !important;
    width: auto !important;
    max-width: 100px !important;
    display: inline-block !important;
}

.flatpickr-current-month .numInputWrapper {
    width: 65px !important;
    display: inline-block !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--maroon) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    border-top-color: var(--maroon) !important;
}

/* 3. Next and Previous Month Arrows */
.flatpickr-next-month,
.flatpickr-prev-month {
    color: var(--maroon) !important;
    fill: var(--maroon) !important;
    padding: 6px !important;
    transition: all 0.2s ease !important;
}

.flatpickr-next-month:hover,
.flatpickr-prev-month:hover {
    background: rgba(92, 14, 51, 0.06) !important;
    border-radius: 50% !important;
    color: var(--maroon) !important;
    fill: var(--maroon) !important;
}

.flatpickr-next-month svg,
.flatpickr-prev-month svg {
    fill: currentColor !important;
}

/* 4. Weekdays Header */
.flatpickr-weekdays {
    direction: ltr !important;
    display: flex !important;
}

span.flatpickr-weekday {
    color: #94a3b8 !important; /* Muted slate gray */
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* 5. Calendar Days Container */
.flatpickr-days {
    padding: 4px 0 0 0 !important;
    direction: ltr !important;
}

.dayContainer {
    direction: ltr !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 6. Day Grid Style */
.flatpickr-day {
    border-radius: 8px !important;
    color: #334155 !important; /* Dark text for perfect contrast */
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin: 2px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 36px !important;
    height: 36px !important;
}

/* 7. Hover Day State */
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: rgba(92, 14, 51, 0.08) !important;
    color: var(--maroon) !important;
    border-color: transparent !important;
}

/* 8. Today Indicator (Orange line at the bottom) */
.flatpickr-day.today {
    border-bottom: 2.5px solid var(--orange) !important;
    border-radius: 8px !important;
    color: var(--maroon) !important;
}

.flatpickr-day.today:hover {
    background: rgba(92, 14, 51, 0.08) !important;
    color: var(--maroon) !important;
}

/* 9. Selected / Start / End Day of Range (Maroon Gradient) */
.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 {
    background: linear-gradient(135deg, var(--maroon) 0%, #7d1748 100%) !important;
    border-color: var(--maroon) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(92, 14, 51, 0.25) !important;
}

/* 10. Days In-Between Selected Range (Soft Maroon Tint) */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: rgba(92, 14, 51, 0.06) !important;
    color: var(--maroon) !important;
    border-color: transparent !important;
    border-radius: 0 !important; /* Keep range looking like a contiguous block */
}

/* 11. Prev/Next Month Days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: #cbd5e1 !important; /* Very light gray for disabled/out-of-month days */
    background: transparent !important;
    border-color: transparent !important;
}

/* 12. Input Field Adjustments (Arrow and Layout) */
.flatpickr-date-input {
    background-color: #ffffff !important;
    cursor: text !important;
}

/* Brand Primary Border Overrides (System-Wide UI Polish) */
.border-primary {
    border-color: var(--maroon) !important;
}
.border-primary-subtle {
    border-color: rgba(92, 14, 51, 0.15) !important;
}