/* ==========================================================================
   SHUNTING UI UPGRADE — Soft Tinted Cards + Premium Typography
   ==========================================================================
   Professional light-theme colour upgrade for the Shunting dashboard.
   Inspired by the Duralux widgets-statistics / charts / lists pages.
   No layout changes — only colour, shadow, font and tint improvements.
   
   Include AFTER theme.min.css:
   <link rel="stylesheet" href="assets/css/shunting-ui-upgrade.css">
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Variables)
   ========================================================================== */
:root {
    /* Page chrome */
    --sui-page-bg:       #f0f2f8;
    --sui-content-bg:    #f4f6fb;
    --sui-card-bg:       #ffffff;
    --sui-card-radius:   14px;
    --sui-card-shadow:   0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    --sui-card-hover:    0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);

    /* Palette */
    --sui-primary:       #3454d1;
    --sui-success:       #25b865;
    --sui-warning:       #f4a100;
    --sui-danger:        #ea4d4d;
    --sui-info:          #1976d2;
    --sui-teal:          #0ab39c;
    --sui-purple:        #7c3aed;
    --sui-pink:          #ec4899;

    /* Text hierarchy */
    --sui-heading:       #1e293b;
    --sui-body:          #334155;
    --sui-muted:         #94a3b8;
    --sui-label:         #64748b;

    /* Soft tint backgrounds — 8% opacity over white */
    --sui-tint-primary:  #eef1fc;
    --sui-tint-success:  #eaf8f0;
    --sui-tint-warning:  #fef6e4;
    --sui-tint-danger:   #fdeaea;
    --sui-tint-info:     #e7f1fc;
    --sui-tint-teal:     #e5f7f5;
    --sui-tint-purple:   #f1ebfe;
    --sui-tint-pink:     #fde8f3;
    --sui-tint-neutral:  #f1f3f8;

    /* Font */
    --sui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


/* ==========================================================================
   2. GLOBAL FOUNDATIONS
   ========================================================================== */

/* Slightly tinted page background instead of pure white */
.nxl-container .nxl-content {
    background: var(--sui-content-bg);
}
body {
    font-family: var(--sui-font);
    color: var(--sui-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14.5px;
    line-height: 1.6;
}

/* Typography boost — bigger sizes */
h1, .h1 { font-size: 2rem !important; }
h2, .h2 { font-size: 1.7rem !important; }
h3, .h3 { font-size: 1.45rem !important; }
h4, .h4 { font-size: 1.2rem !important; }
h5, .h5 { font-size: 1.05rem !important; }
h6, .h6 { font-size: 0.95rem !important; }
h1, h2, h3, h4, h5, h6, .card-title, .fw-bold, .fw-semibold { color: var(--sui-heading); letter-spacing: -0.01em; }
.text-muted { color: var(--sui-muted) !important; }
.fs-11 { font-size: 12px !important; line-height: 1.5; }
.fs-12 { font-size: 13px !important; line-height: 1.55; }
.fs-13 { font-size: 14px !important; line-height: 1.5; }

/* Table & form font sizes */
.table { font-size: 14px; }
.table thead th { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.form-control, .form-select { font-size: 14px; }
.btn { font-size: 14px; }
.badge { font-size: 11.5px; }
.nav-link { font-size: 14px; }
.breadcrumb-item, .breadcrumb-item a { font-size: 13px; }
.dropdown-item { font-size: 14px; }
.card-body p, .card-body span, .card-body div { font-size: inherit; }

/* Nav sidebar text slightly bigger */
.nxl-navigation .nxl-mtext { font-size: 14px !important; }
.nxl-navigation .nxl-link { padding: 10px 16px !important; }

/* Page header title bigger */
.page-header-title h5 { font-size: 1.15rem !important; font-weight: 700 !important; }


/* ==========================================================================
   3. CARD SYSTEM — Softer, Rounder, Livelier
   ========================================================================== */

/* Base card polish */
.card {
    background: var(--sui-card-bg);
    border-radius: var(--sui-card-radius) !important;
    border: 1px solid rgba(0,0,0,0.045);
    box-shadow: var(--sui-card-shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
    box-shadow: var(--sui-card-hover);
}

/* Card header — subtle bottom accent */
.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 16px 20px;
}
.card-header h5.card-title {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--sui-heading);
}

/* Card footer polish */
.card-footer {
    background: var(--sui-tint-neutral);
    border-top: 1px solid rgba(0,0,0,0.04);
    border-radius: 0 0 var(--sui-card-radius) var(--sui-card-radius) !important;
}


/* ==========================================================================
   4. KPI STAT CARDS — Soft-Tinted Icon Bubbles (ROW 1)
   ========================================================================== */

/* icon-bubble-primary on the Carriers card */
.icon-bubble-primary {
    background: var(--sui-tint-primary) !important;
    color: var(--sui-primary) !important;
    border: 1.5px solid rgba(52,84,209,0.12);
}
.icon-bubble-success {
    background: var(--sui-tint-success) !important;
    color: var(--sui-success) !important;
    border: 1.5px solid rgba(37,184,101,0.12);
}
.icon-bubble-warning {
    background: var(--sui-tint-warning) !important;
    color: var(--sui-warning) !important;
    border: 1.5px solid rgba(244,161,0,0.12);
}
.icon-bubble-danger {
    background: var(--sui-tint-danger) !important;
    color: var(--sui-danger) !important;
    border: 1.5px solid rgba(234,77,77,0.12);
}
.icon-bubble-info {
    background: var(--sui-tint-info) !important;
    color: var(--sui-info) !important;
    border: 1.5px solid rgba(25,118,210,0.12);
}
.icon-bubble-teal {
    background: var(--sui-tint-teal) !important;
    color: var(--sui-teal) !important;
    border: 1.5px solid rgba(10,179,156,0.12);
}
.icon-bubble-purple {
    background: var(--sui-tint-purple) !important;
    color: var(--sui-purple) !important;
    border: 1.5px solid rgba(124,58,237,0.12);
}


/* ==========================================================================
   5. TINTED CARD BACKGROUNDS — Whole-Card Soft Tints
   ========================================================================== */

/* Add these classes to any .card for a full soft-tint look */
.card-tint-primary  { background: var(--sui-tint-primary) !important;  border-color: rgba(52,84,209,0.1) !important; }
.card-tint-success  { background: var(--sui-tint-success) !important;  border-color: rgba(37,184,101,0.1) !important; }
.card-tint-warning  { background: var(--sui-tint-warning) !important;  border-color: rgba(244,161,0,0.1) !important; }
.card-tint-danger   { background: var(--sui-tint-danger) !important;   border-color: rgba(234,77,77,0.1) !important; }
.card-tint-info     { background: var(--sui-tint-info) !important;     border-color: rgba(25,118,210,0.1) !important; }
.card-tint-teal     { background: var(--sui-tint-teal) !important;     border-color: rgba(10,179,156,0.1) !important; }
.card-tint-purple   { background: var(--sui-tint-purple) !important;   border-color: rgba(124,58,237,0.1) !important; }
.card-tint-neutral  { background: var(--sui-tint-neutral) !important;  border-color: rgba(0,0,0,0.05) !important; }


/* ==========================================================================
   6. TINTED CARD HEADERS — Section Differentiation (ROW 6)
   ========================================================================== */

.card-header-tint-primary  { background: var(--sui-tint-primary);  border-bottom: 2px solid rgba(52,84,209,0.15); }
.card-header-tint-success  { background: var(--sui-tint-success);  border-bottom: 2px solid rgba(37,184,101,0.15); }
.card-header-tint-warning  { background: var(--sui-tint-warning);  border-bottom: 2px solid rgba(244,161,0,0.15); }
.card-header-tint-danger   { background: var(--sui-tint-danger);   border-bottom: 2px solid rgba(234,77,77,0.15); }
.card-header-tint-info     { background: var(--sui-tint-info);     border-bottom: 2px solid rgba(25,118,210,0.15); }
.card-header-tint-teal     { background: var(--sui-tint-teal);     border-bottom: 2px solid rgba(10,179,156,0.15); }
.card-header-tint-purple   { background: var(--sui-tint-purple);   border-bottom: 2px solid rgba(124,58,237,0.15); }

.card-header-tint-primary h5  { color: var(--sui-primary); }
.card-header-tint-success h5  { color: #1a8a4d; }
.card-header-tint-warning h5  { color: #b77900; }
.card-header-tint-danger h5   { color: #c83939; }
.card-header-tint-info h5     { color: var(--sui-info); }
.card-header-tint-teal h5     { color: #088a77; }
.card-header-tint-purple h5   { color: var(--sui-purple); }


/* ==========================================================================
   7. SECTION HEADER BAR
   ========================================================================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--sui-tint-neutral);
    border-bottom: 2px solid rgba(0,0,0,0.04);
    border-radius: var(--sui-card-radius) var(--sui-card-radius) 0 0;
    margin: -1px -1px 0;
}
.section-header .section-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--sui-heading);
    margin: 0;
}
.section-header .section-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* ==========================================================================
   8. MINI CARD ICON HEADERS (ROW 3)
   ========================================================================== */

/* Soft coloured icon in the mini card headers */
.mini-icon-primary .avatar-text { background: var(--sui-tint-primary) !important; color: var(--sui-primary) !important; }
.mini-icon-success .avatar-text { background: var(--sui-tint-success) !important; color: var(--sui-success) !important; }
.mini-icon-warning .avatar-text { background: var(--sui-tint-warning) !important; color: var(--sui-warning) !important; }
.mini-icon-danger  .avatar-text { background: var(--sui-tint-danger) !important;  color: var(--sui-danger) !important;  }
.mini-icon-info    .avatar-text { background: var(--sui-tint-info) !important;    color: var(--sui-info) !important;    }
.mini-icon-teal    .avatar-text { background: var(--sui-tint-teal) !important;    color: var(--sui-teal) !important;    }


/* ==========================================================================
   9. TABLE IMPROVEMENTS
   ========================================================================== */

.table thead tr {
    background: var(--sui-tint-neutral);
}
.table thead th {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sui-label);
    border-bottom-width: 2px;
    border-bottom-color: rgba(0,0,0,0.06);
    padding: 10px 12px;
}
.table tbody td {
    vertical-align: middle;
    font-size: 13px;
    color: var(--sui-body);
    border-color: rgba(0,0,0,0.04);
    padding: 10px 12px;
}
.table tbody tr:hover {
    background-color: rgba(52,84,209,0.025);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.015);
}


/* ==========================================================================
   10. BADGE REFINEMENT
   ========================================================================== */

.badge {
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 5px 10px;
    border-radius: 8px;
}
.badge.bg-soft-primary  { background: var(--sui-tint-primary) !important;  color: var(--sui-primary) !important; }
.badge.bg-soft-success  { background: var(--sui-tint-success) !important;  color: var(--sui-success) !important; }
.badge.bg-soft-warning  { background: var(--sui-tint-warning) !important;  color: var(--sui-warning) !important; }
.badge.bg-soft-danger   { background: var(--sui-tint-danger) !important;   color: var(--sui-danger) !important; }
.badge.bg-soft-info     { background: var(--sui-tint-info) !important;     color: var(--sui-info) !important; }


/* ==========================================================================
   11. PROGRESS BAR POLISH
   ========================================================================== */

.progress {
    border-radius: 10px;
    background-color: var(--sui-tint-neutral);
    overflow: hidden;
}
.progress-bar {
    border-radius: 10px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar.bg-primary { box-shadow: 0 2px 8px rgba(52,84,209,0.25); }
.progress-bar.bg-success { box-shadow: 0 2px 8px rgba(37,184,101,0.25); }
.progress-bar.bg-warning { box-shadow: 0 2px 8px rgba(244,161,0,0.25); }
.progress-bar.bg-danger  { box-shadow: 0 2px 8px rgba(234,77,77,0.25); }
.progress-bar.bg-info    { box-shadow: 0 2px 8px rgba(25,118,210,0.25); }


/* ==========================================================================
   12. AVATAR / ICON BUBBLE REFINEMENTS
   ========================================================================== */

.avatar-text {
    border-radius: 12px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.avatar-text.avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 20px;
}
.avatar-text.avatar-sm {
    border-radius: 10px;
}
.avatar-image img {
    border-radius: 12px;
}


/* ==========================================================================
   13. ACTIVITY LIST ITEMS
   ========================================================================== */

.activity-clickable {
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
    border-color: rgba(0,0,0,0.06) !important;
}
.activity-clickable:hover {
    background-color: var(--sui-tint-primary) !important;
    border-color: rgba(52,84,209,0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(52,84,209,0.08);
}

/* Left-border accent on activity items */
.activity-border-primary  { border-left: 3px solid var(--sui-primary) !important; }
.activity-border-success  { border-left: 3px solid var(--sui-success) !important; }
.activity-border-warning  { border-left: 3px solid var(--sui-warning) !important; }
.activity-border-danger   { border-left: 3px solid var(--sui-danger) !important; }
.activity-border-info     { border-left: 3px solid var(--sui-info) !important; }
.activity-border-teal     { border-left: 3px solid var(--sui-teal) !important; }


/* ==========================================================================
   14. PAGE HEADER REFINEMENT
   ========================================================================== */

.page-header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.page-header-title h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--sui-heading);
    letter-spacing: -0.02em;
}
.breadcrumb-item a {
    color: var(--sui-primary);
    font-weight: 500;
}
.breadcrumb-item.active {
    color: var(--sui-muted);
}


/* ==========================================================================
   15. DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    padding: 8px;
}
.dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease;
}
.dropdown-item:hover {
    background: var(--sui-tint-primary);
    color: var(--sui-primary);
}
.dropdown-divider {
    margin: 4px 8px;
    border-color: rgba(0,0,0,0.05);
}


/* ==========================================================================
   16. MODAL POLISH
   ========================================================================== */

.modal-content {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 25px 80px rgba(0,0,0,0.12);
    overflow: hidden;
}
.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: var(--sui-tint-neutral);
}
.modal-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--sui-heading);
}
.modal-body { padding: 20px 24px; }
.modal-footer {
    padding: 12px 24px;
    border-top: 1px solid rgba(0,0,0,0.05);
    background: var(--sui-tint-neutral);
}


/* ==========================================================================
   17. FORM CONTROLS
   ========================================================================== */

.form-control, .form-select {
    border-radius: 10px;
    border-color: rgba(0,0,0,0.1);
    font-size: 13px;
    padding: 8px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--sui-primary);
    box-shadow: 0 0 0 3px rgba(52,84,209,0.08);
}


/* ==========================================================================
   18. REPORTRANGE DATE PICKER
   ========================================================================== */

.reportrange-picker {
    border-radius: 10px;
    background: var(--sui-tint-primary) !important;
    border: 1.5px solid rgba(52,84,209,0.15) !important;
    color: var(--sui-primary) !important;
    font-weight: 500;
    padding: 6px 14px;
    transition: all 0.2s ease;
}
.reportrange-picker:hover {
    border-color: rgba(52,84,209,0.3) !important;
    box-shadow: 0 2px 8px rgba(52,84,209,0.08);
}


/* ==========================================================================
   19. FOOTER POLISH
   ========================================================================== */

.footer {
    border-top: 1px solid rgba(0,0,0,0.04);
    padding: 16px 24px;
}


/* ==========================================================================
   20. NAVIGATION REFINEMENT
   ========================================================================== */

.nxl-navigation {
    border-right: 1px solid rgba(0,0,0,0.05);
}
.nxl-navigation .nxl-link {
    border-radius: 10px;
    margin: 2px 8px;
    transition: all 0.2s ease;
}
.nxl-navigation .nxl-link:hover {
    background: var(--sui-tint-primary);
}


/* ==========================================================================
   21. STAT VALUE STYLING  
   ========================================================================== */

/* Big numbers in KPI cards (ROW 1 counters) */
.sui-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--sui-heading);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.sui-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sui-label);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/* ==========================================================================
   22. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }


/* ==========================================================================
   23. BORDER-DASHED REFINEMENT
   ========================================================================== */

.border-dashed {
    border-color: rgba(0,0,0,0.065) !important;
}
.border.border-dashed {
    border-color: rgba(0,0,0,0.065) !important;
}


/* ==========================================================================
   24. ROW 1 KPI CARDS — Subtle Top-Border Accent (pure CSS, no HTML changes)
   ========================================================================== */

/* Use nth-child to add colour accents to the 4 KPI columns */
.main-content > .row > .col-xxl-3:nth-child(1) > .card { border-top: 3px solid var(--sui-primary); }
.main-content > .row > .col-xxl-3:nth-child(2) > .card { border-top: 3px solid var(--sui-success); }
.main-content > .row > .col-xxl-3:nth-child(3) > .card { border-top: 3px solid var(--sui-warning); }
.main-content > .row > .col-xxl-3:nth-child(4) > .card { border-top: 3px solid var(--sui-danger); }


/* ==========================================================================
   25. CHART CARD POLISH
   ========================================================================== */

.card .apexcharts-canvas {
    border-radius: 0 0 var(--sui-card-radius) var(--sui-card-radius);
}


/* ==========================================================================
   26. SMOOTH TRANSITIONS ON INTERACTIVE ELEMENTS
   ========================================================================== */

a, .btn, .badge, .avatar-text, .nav-link { transition: all 0.2s ease; }
.btn { border-radius: 4px; font-weight: 600; }
.btn:hover { transform: translateY(-3px); }


/* ==========================================================================
   27. DARK THEME COMPATIBILITY
   Ensure dark themes in dashboard-themes.css override these light styles.
   ========================================================================== */

body[class*="theme-"] .card          { border-top: none !important; }
body[class*="theme-"] .card-footer   { background: initial; }
body[class*="theme-"] .modal-header  { background: initial; }
body[class*="theme-"] .modal-footer  { background: initial; }
body[class*="theme-"] .table thead tr { background: initial; }
body[class*="theme-"] .reportrange-picker { background: initial !important; border-color: initial !important; color: initial !important; }
body[class*="theme-"] .nxl-container .nxl-content { background: initial; }


/* ==========================================================================
   28. DATATABLES CSV EXPORT BUTTON — Shiny Royal Blue
   Placed LAST for maximum cascade priority. High specificity to beat
   theme customizer overrides (body.br-pill .btn, etc.).
   ========================================================================== */

body .btn.btn-csv-custom,
body .btn.btn-sm.btn-csv-custom,
.dt-buttons .btn.btn-csv-custom {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 700;
    border-radius: 4px !important;
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    letter-spacing: 0.3px;
}
body .btn.btn-csv-custom:hover,
body .btn.btn-csv-custom:focus,
body .btn.btn-sm.btn-csv-custom:hover,
body .btn.btn-sm.btn-csv-custom:focus,
.dt-buttons .btn.btn-csv-custom:hover,
.dt-buttons .btn.btn-csv-custom:focus {
    background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(30,60,114,0.45), 0 4px 12px rgba(42,82,152,0.25);
    transform: translateY(-3px);
}


/* ==========================================================================
   29. DATATABLES EXPORT BUTTONS — Straight Corners & Hover Rise
   All export buttons (Copy, Excel, CSV, PDF, Print, Column Visibility)
   ========================================================================== */

/* Base styles for all DataTables buttons */
.dt-button,
.dt-buttons .btn,
.buttons-copy,
.buttons-excel, 
.buttons-csv,
.buttons-pdf,
.buttons-print,
.buttons-colvis,
body .dt-button,
body .dt-buttons .btn {
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

/* Hover effect for all DataTables buttons */
.dt-button:hover,
.dt-buttons .btn:hover,
.buttons-copy:hover,
.buttons-excel:hover,
.buttons-csv:hover,
.buttons-pdf:hover,
.buttons-print:hover,
.buttons-colvis:hover,
body .dt-button:hover,
body .dt-buttons .btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
}


/* ==========================================================================
   30. NAVIGATION & HEADER DARK THEME — Table Header Style
   Matching the elegant dark blue gradient and red accent from table headers
   ========================================================================== */

/* Navigation Panel Dark Theme - Apply LEFT TO RIGHT gradient to all containers */
html.app-navigation-dark .nxl-navigation,
html.app-navigation-dark .nxl-navigation .navbar-wrapper,
html.app-navigation-dark .nxl-navigation .navbar-content {
    background: linear-gradient(to right, #050324 0%, #1a2866 100%) !important;
}

html.app-navigation-dark .nxl-navigation .m-header {
    background: linear-gradient(to right, #050324 0%, #1a2866 100%) !important;
    border-right: 1px solid #c81515 !important;
    border-bottom: 2px solid #c81515 !important;
}

html.app-navigation-dark .nxl-navigation .navbar-content {
    border-right: 2px solid #c81515 !important;
}

/* Menu items - vibrant gold selection bar that pops on dark navy */
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar>.nxl-item.active>.nxl-link,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar>.nxl-item:focus>.nxl-link,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-navbar>.nxl-item:hover>.nxl-link,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item.active>.nxl-link,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:focus>.nxl-link,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:hover>.nxl-link {
    background: linear-gradient(to right, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15)) !important;
    border-left: 3px solid #fbbf24 !important;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

/* Menu item icons and text color on active/hover */
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item.active>.nxl-link .nxl-micon i,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:focus>.nxl-link .nxl-micon i,
html.app-navigation-dark .nxl-navigation .navbar-content .nxl-item:hover>.nxl-link .nxl-micon i {
    color: #fbbf24 !important;
}

/* Minimenu hover state */
html.app-navigation-dark.minimenu .nxl-navigation:hover .navbar-content {
    background: linear-gradient(to right, #050324 0%, #1a2866 100%) !important;
}

/* Header Panel Dark Theme - Apply TOP TO BOTTOM gradient with red accent */
html.app-header-dark .nxl-header,
html.app-header-dark .nxl-header .header-wrapper {
    background: linear-gradient(to bottom, #050324 0%, #1a2866 100%) !important;
    border-bottom: 2px solid #c81515 !important;
    color: #ffffff !important;
}

html.app-header-dark .nxl-navigation .m-header {
    background: linear-gradient(to right, #050324 0%, #1a2866 100%) !important;
    border-bottom: 2px solid #c81515 !important;
    border-right: 2px solid #c81515 !important;
}