/* 
 * Color Theme CSS - Centralized Color Management
 * Primary Color: #005499 (80% usage)
 * Accent Color: #FF6B6B - Modern Coral Red (10-20% usage)
 * Background: Light and Light Gray for elderly-friendly design
 */

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
    /* Primary Color Palette - #005499 */
    --primary-color: #005499;
    --primary-dark: #003d73;
    --primary-darker: #002d55;
    --primary-light: #1a6bb3;
    --primary-lighter: #3382cc;
    --primary-lightest: #e6f0f7;
    /* Accent Color Palette - Modern Coral Red (#FF6B6B) */
    --accent-color: #FF6B6B;
    --accent-dark: #E53935;
    --accent-darker: #C62828;
    --accent-light: #FF8A80;
    --accent-lighter: #FFB3B3;
    --accent-lightest: #FFE5E5;
    /* Background Colors - Light & Light Gray */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f0f0;
    --bg-light: #fafafa;
    --bg-light-gray: #e9ecef;
    --bg-lighter-gray: #f5f5f5;
    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: #cccccc;
    --text-on-primary: #ffffff;
    /* Border Colors */
    --border-light: #e0e0e0;
    --border-medium: #d0d0d0;
    --border-dark: #b0b0b0;
    /* Font Sizes */
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 24px;
    /* Font Family */
    --font-family-base: 'Open Sans', sans-serif;
}

/* ============================================
   FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Apply font family globally */
body {
    font-family: var(--font-family-base);
}

/* ============================================
   SIDEBAR - Dark with #005499
   ============================================ */
.user-admin .main-sidebar,
.user-admin .sidebar {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   SEARCH BOX - Responsive using Bootstrap Grid
   ============================================ */
.user-admin .search-bx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

    .user-admin .search-bx form {
        width: 100%;
        display: flex;
    }

    .user-admin .search-bx .input-group {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
    }

        .user-admin .search-bx .input-group .form-control {
            flex: 1 1 auto;
            min-width: 200px;
        }

/* Global Search Dropdown as Nav Item */
.user-admin .main-header #ddlGlobalSearchkey {
    height: 38px;
    border-radius: 4px;
    margin-right: 10px;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 35px;
    cursor: pointer;
}

/* Ensure nav items display properly */
.user-admin .header-megamenu.nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.user-admin .header-megamenu .nav-item {
    display: flex;
    align-items: center;
}

/* Fix Bootstrap w-100 class if overridden */
.user-admin .w-100 {
    width: 100% !important;
}

/* Reduce sidebar width from 19.96rem to 17rem */
.user-admin .main-sidebar {
    width: 17rem !important;
}

/* Adjust content wrapper margin to match new sidebar width (was 19.96rem/20.79rem) */
.user-admin:not(.sidebar-collapse) .content-wrapper {
    margin-left: 18.5rem;
}

/* Keep collapsed state as is (4rem) */
.user-admin.sidebar-collapse .main-sidebar {
    width: 4rem !important;
}

/* Adjust logo-box width to match new sidebar width */
.user-admin .main-header div.logo-box {
    width: 17rem;
    transition: width 0.3s ease-in-out !important;
}

.user-admin.sidebar-collapse .main-header div.logo-box {
    width: 4rem !important;
}

/* Adjust multinav width when fixed */
.user-admin.fixed .multinav {
    width: 17rem;
    transition: width 0.3s ease-in-out !important;
}

.user-admin.fixed.sidebar-collapse .multinav {
    width: 4rem !important;
}

/* Adjust navbar margin to account for logo-box width */
@media (min-width: 768px) {
    .user-admin .main-header .navbar {
        margin-left: 18.5rem;
        transition: margin-left 0.3s ease-in-out !important;
    }
}

.user-admin.sidebar-collapse .main-header .navbar {
    margin-left: 4rem;
}

.user-admin .sidebar-menu > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
}

    .user-admin .sidebar-menu > li > a:hover,
    .user-admin .sidebar-menu > li.active > a {
        background-color: var(--primary-dark) !important;
        color: var(--text-on-primary) !important;
        text-decoration: none !important;
    }

.light-skin.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    background-color: #005499;
}

/* Treeview Menu Links - Must be white */
.user-admin .sidebar-menu .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

    .user-admin .sidebar-menu .treeview-menu > li > a:hover {
        color: rgba(255, 255, 255, 1) !important;
        text-decoration: none !important;
    }

/* Treeview menu text when sidebar is collapsed - ensure visibility */
.user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

    .user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li > a:hover,
    .user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li.active > a {
        color: rgba(255, 255, 255, 1) !important;
        text-decoration: none !important;
    }

    /* Treeview menu spans - ensure text is visible when collapsed */
    .user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li > a > span {
        color: rgba(255, 255, 255, 0.8) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li > a:hover > span,
    .user-admin.sidebar-collapse .sidebar-menu .treeview-menu > li.active > a > span {
        color: rgba(255, 255, 255, 1) !important;
    }

.user-admin .sidebar-menu .header {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600;
}

.user-admin .sidebar-menu .treeview.active > a {
    background-color: var(--primary-dark) !important;
    color: var(--text-on-primary) !important;
}

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


/* Sidebar Icons - Make them white/visible (Font Awesome) */
/* Override any gray colors from adminstyle.css */
.user-admin .sidebar-menu .fa,
.user-admin .sidebar-menu i.fa,
.user-admin .sidebar-menu > li > a .fa,
.user-admin .sidebar-menu > li > a i.fa,
.user-admin .sidebar-menu > li > a > i,
.user-admin .sidebar-menu > li > a > i.fa,
.user-admin .light-skin .sidebar-menu > li > a > i,
.user-admin .light-skin .sidebar-menu > li > a .fa,
.user-admin .light-skin .sidebar-menu > li > a i.fa {
    color: rgba(255, 255, 255, 0.9) !important;
}

.user-admin .sidebar-menu > li:hover > a .fa,
.user-admin .sidebar-menu > li:hover > a i.fa,
.user-admin .sidebar-menu > li:hover > a > i.fa,
.user-admin .sidebar-menu > li.active > a .fa,
.user-admin .sidebar-menu > li.active > a i.fa,
.user-admin .sidebar-menu > li.active > a > i.fa,
.user-admin .sidebar-menu > li.menu-open > a .fa,
.user-admin .sidebar-menu > li.menu-open > a i.fa,
.user-admin .sidebar-menu > li.menu-open > a > i.fa {
    color: rgba(255, 255, 255, 1) !important;
}

.user-admin .sidebar-menu .treeview-menu > li > a .fa,
.user-admin .sidebar-menu .treeview-menu > li > a i.fa,
.user-admin .sidebar-menu .treeview-menu > li > a > i.fa {
    color: rgba(255, 255, 255, 0.8) !important;
}

.user-admin .sidebar-menu .treeview-menu > li > a:hover .fa,
.user-admin .sidebar-menu .treeview-menu > li > a:hover i.fa,
.user-admin .sidebar-menu .treeview-menu > li > a:hover > i.fa,
.user-admin .sidebar-menu .treeview-menu > li.active > a .fa,
.user-admin .sidebar-menu .treeview-menu > li.active > a i.fa,
.user-admin .sidebar-menu .treeview-menu > li.active > a > i.fa {
    color: rgba(255, 255, 255, 1) !important;
}

.user-admin .sidebar-menu .pull-right-container .fa {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Also target SVG icons if any remain */
.user-admin .sidebar-menu svg {
    color: rgba(255, 255, 255, 0.9) !important;
    stroke: rgba(255, 255, 255, 0.9) !important;
    fill: none !important;
}

.user-admin .sidebar-menu .icon-Commit {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Feather Icons in Sidebar - Target rendered SVGs */
.user-admin .sidebar-menu svg[stroke] {
    stroke: rgba(255, 255, 255, 0.9) !important;
}

.user-admin .sidebar-menu .treeview-menu svg[stroke] {
    stroke: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   HEADER
   ============================================ */

.user-admin .main-header .navbar {
    background-color: #ffffff !important;
}

.user-admin .main-header .navbar-nav {
    background-color: transparent !important;
}

.user-admin.fixed .main-header .navbar {
    background-color: #ffffff !important;
}

.user-admin .main-header .logo a {
    color: var(--primary-color) !important;
}

/* Logo Box Background */
.user-admin .logo-box {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Logo transitions */
.user-admin .logo-lg,
.user-admin .logo-mini {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Show logo-lg when sidebar is expanded (no sidebar-collapse class) */
.user-admin:not(.sidebar-collapse) .logo-lg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.user-admin:not(.sidebar-collapse) .logo-mini {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) !important;
}

/* Hide logo-lg and show logo-mini when sidebar is collapsed (has sidebar-collapse class) */
.user-admin.sidebar-collapse .logo-lg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) !important;
}

.user-admin.sidebar-collapse .logo-mini {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.user-admin .navbar-custom-menu .notifications-menu > a .badge {
    background-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

/* Header Buttons - All use primary color */
.user-admin .navbar-custom-menu .btn-danger-light,
.user-admin .navbar-custom-menu .btn-success-light,
.user-admin .navbar-custom-menu .btn-info-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-lightest) !important;
}

    .user-admin .navbar-custom-menu .btn-danger-light:hover,
    .user-admin .navbar-custom-menu .btn-success-light:hover,
    .user-admin .navbar-custom-menu .btn-info-light:hover {
        background-color: var(--primary-lighter) !important;
        color: var(--text-on-primary) !important;
    }

/* Navbar buttons with btn-outline and no-border - ensure primary color on hover */
.user-admin .navbar-custom-menu .btn-outline.no-border.btn-primary-light:hover,
.user-admin .navbar-custom-menu .btn-outline.no-border:hover,
.user-admin .navbar .btn-outline.no-border.btn-primary-light:hover,
.user-admin .navbar .btn-outline.no-border:hover,
.user-admin .btn-outline.no-border.btn-primary-light:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   DASHBOARD CARDS - Light & Light Gray
   ============================================ */
.user-admin .box {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-light) !important;
}

/* Align boxes in same row to have equal height */
.user-admin .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

    .user-admin .row > [class*="col-"] > .box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

/* Statistics Cards - Light Blue Background */
.user-admin .stat-card-blue,
.user-admin .stat-card-mauve,
.user-admin .stat-card-gray,
.user-admin .stat-card-mint {
    background: #fff !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

    /* Statistics Cards - Icon colors */
    .user-admin .stat-card-blue .bg-primary-light {
        background: #8b7eff !important;
        color: #fff !important;
    }

    .user-admin .stat-card-mauve .bg-primary-light {
        background: #ffb748 !important;
        color: #fff !important;
    }

    .user-admin .stat-card-gray .bg-primary-light {
        background: #35bdaa !important;
        color: #fff !important;
    }

    .user-admin .stat-card-mint .bg-primary-light {
        background: #2e8ef7 !important;
        color: #fff !important;
    }

/* Statistics Cards - Label and Value */
.user-admin .stat-label {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin-bottom: 0.5rem !important;
}

.user-admin .stat-value {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
}

/* Statistics Cards - Change indicator */
.user-admin .stat-change {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-admin .stat-change-value {
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .user-admin .stat-change-value i {
        font-size: 1rem !important;
    }

.user-admin .stat-change-label {
    font-size: 0.8rem !important;
    color: #999 !important;
    font-weight: 400 !important;
}

/* Statistics Cards - Icon wrapper */
.user-admin .stat-icon-wrapper {
    flex-shrink: 0;
    margin-left: 1rem;
    display: flex;
    align-items: center;
}

    .user-admin .stat-icon-wrapper .bg-primary-light {
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .user-admin .stat-icon-wrapper i {
        font-size: 1.5rem !important;
        color: #fff !important;
    }

/* Sub-stat cards */
.user-admin .sub-stat-card {
    background-color: var(--bg-light) !important;
    border-color: var(--border-light) !important;
}

.user-admin .sub-stat-label {
    color: var(--text-secondary) !important;
}

.user-admin .sub-stat-value {
    color: var(--text-primary) !important;
}

/* ============================================
   BUTTONS - Primary Color (#005499)
   ============================================ */
.user-admin .btn-primary,
.user-admin .btn-outline-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

    .user-admin .btn-primary:hover,
    .user-admin .btn-outline-primary:hover {
        background-color: var(--primary-dark) !important;
        border-color: var(--primary-dark) !important;
        color: var(--text-on-primary) !important;
    }

.user-admin .btn-outline-primary {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

    .user-admin .btn-outline-primary:hover {
        background-color: var(--primary-color) !important;
        color: var(--text-on-primary) !important;
    }

/* Accent Buttons - #FF0015 variants (10-20% usage) */
.user-admin .btn-danger,
.user-admin .btn-outline-danger {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

    .user-admin .btn-danger:hover,
    .user-admin .btn-outline-danger:hover {
        background-color: var(--accent-dark) !important;
        border-color: var(--accent-dark) !important;
        color: var(--text-on-primary) !important;
    }

/* Light button variants */
.user-admin .btn-primary-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-lightest) !important;
}

    .user-admin .btn-primary-light:hover {
        background-color: var(--primary-lighter) !important;
        color: var(--text-on-primary) !important;
    }

.user-admin .btn-danger-light {
    background-color: var(--accent-lightest) !important;
    color: var(--accent-color) !important;
    border-color: var(--accent-lightest) !important;
}

    .user-admin .btn-danger-light:hover {
        background-color: var(--accent-lighter) !important;
        color: var(--text-on-primary) !important;
    }

/* ============================================
   BADGES - Primary Color
   ============================================ */
.user-admin .badge-primary,
.user-admin .badge-pill.badge-primary {
    background-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .badge-success,
.user-admin .badge-pill.badge-success,
.user-admin .badge-success-light,
.user-admin .badge-pill.badge-success-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-lighter) !important;
}

/* Accent Badges - #FF0015 variants */
.user-admin .badge-danger,
.user-admin .badge-pill.badge-danger,
.user-admin .badge-danger-light,
.user-admin .badge-pill.badge-danger-light {
    background-color: var(--accent-lightest) !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-lighter) !important;
}

.user-admin .badge-warning,
.user-admin .badge-pill.badge-warning,
.user-admin .badge-warning-light,
.user-admin .badge-pill.badge-warning-light {
    background-color: var(--bg-lighter-gray) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}

.user-admin .badge-info,
.user-admin .badge-pill.badge-info,
.user-admin .badge-info-light,
.user-admin .badge-pill.badge-info-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-lighter) !important;
}

/* ============================================
   LINKS - Primary Color
   ============================================ */
.user-admin a {
    color: var(--primary-color) !important;
}

/* Exclude sidebar menu links from general link color - they have their own white color */
.user-admin .sidebar-menu a,
.user-admin .sidebar-menu .treeview-menu a {
    color: inherit !important;
}

.user-admin a:hover {
    background: var(--border-dark);
    color: #fff !important;
}

/* Exclude sidebar menu links from general link hover color */
.user-admin .sidebar-menu a:hover,
.user-admin .sidebar-menu .treeview-menu a:hover {
    color: inherit !important;
}

/* Exclude sidebar menu links from general link hover color */
.user-admin .sidebar-menu a:hover,
.user-admin .sidebar-menu .treeview-menu a:hover {
    color: inherit !important;
}

.user-admin .hover-primary:hover {
    color: var(--primary-color) !important;
}

.user-admin .hover-success:hover {
    color: var(--primary-color) !important;
}

.user-admin .hover-danger:hover {
    color: var(--accent-color) !important;
}

/* ============================================
   TABLES
   ============================================ */
.user-admin .table thead {
    background-color: var(--bg-light-gray) !important;
    color: var(--text-primary) !important;
}

    .user-admin .table thead th {
        border-color: var(--border-light) !important;
        /* color: var(--text-primary) !important; */
        background: transparent;
        font-weight: 600;
    }

.user-admin .table tbody tr {
    border-color: var(--border-light) !important;
}

    .user-admin .table tbody tr:hover {
        background-color: var(--bg-secondary) !important;
    }

/* ============================================
   TABS
   ============================================ */
.user-admin .nav-tabs {
    border-bottom: 2px solid var(--border-light) !important;
}

    .user-admin .nav-tabs .nav-link {
        color: var(--text-secondary) !important;
        border: none !important;
        border-bottom: 3px solid transparent !important;
        background-color: transparent !important;
        padding: 12px 20px !important;
        margin-bottom: -2px !important;
        transition: all 0.3s ease !important;
    }

        .user-admin .nav-tabs .nav-link:hover {
            color: var(--primary-color) !important;
            border-bottom-color: var(--primary-lighter) !important;
            background-color: var(--bg-secondary) !important;
        }

        .user-admin .nav-tabs .nav-link.active {
            background-color: #ededed !important;
            border-bottom: 3px solid var(--primary-color) !important;
            color: var(--primary-color) !important;
            font-weight: 600 !important;
        }

            .user-admin .nav-tabs .nav-link.active:hover {
                border-bottom-color: var(--primary-color) !important;
                background-color: transparent !important;
            }

/* ============================================
   FORMS
   ============================================ */
.user-admin .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 84, 153, 0.25);
}

.user-admin .form-control {
    border-color: var(--border-light);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.user-admin .form-control,
.user-admin .form-select {
    height: 40px;
}
/* ============================================
   ICONS & AVATARS
   ============================================ */
.user-admin .bg-primary-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
}

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

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

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

.user-admin .bg-warning-light {
    background-color: var(--bg-lighter-gray) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   QUICK LINKS BUTTONS
   ============================================ */
.user-admin .btn-outline-success {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

    .user-admin .btn-outline-success:hover {
        background-color: var(--primary-color) !important;
        color: var(--text-on-primary) !important;
    }

.user-admin .btn-outline-warning {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

    .user-admin .btn-outline-warning:hover {
        background-color: var(--primary-color) !important;
        color: var(--text-on-primary) !important;
    }

.user-admin .btn-outline-info {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

    .user-admin .btn-outline-info:hover {
        background-color: var(--primary-color) !important;
        color: var(--text-on-primary) !important;
    }

/* ============================================
   WELCOME SECTION
   ============================================ */
.user-admin .welcome-section-container {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-light) !important;
}

/* ============================================
   CHARTS & WIDGETS
   ============================================ */
.user-admin .widget-card-blue,
.user-admin .widget-card-mint {
    background-color: var(--bg-lighter-gray) !important;
    border-color: var(--border-light) !important;
}

/* ============================================
   STATUS INDICATORS
   ============================================ */
.user-admin .status-delivered,
.user-admin .status-badge.success,
.user-admin .status-badge.active {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
}

.user-admin .status-pending,
.user-admin .status-badge.pending,
.user-admin .status-badge.warning {
    background-color: var(--bg-lighter-gray) !important;
    color: var(--text-primary) !important;
}

.user-admin .status-cancelled,
.user-admin .status-badge.danger,
.user-admin .status-badge.inactive {
    background-color: var(--accent-lightest) !important;
    color: var(--accent-color) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.user-admin .progress-bar-fill {
    background: var(--primary-color) !important;
}

/* Accent progress bars (10-20% usage) */
.user-admin .progress-bar-danger {
    background: var(--accent-color) !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
.user-admin .dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-light) !important;
}

.user-admin .dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--primary-color) !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.user-admin .text-primary {
    color: var(--primary-color) !important;
}

.user-admin .text-muted {
    color: var(--text-muted) !important;
}

.user-admin .text-fade {
    color: var(--text-secondary) !important;
}

.user-admin .text-dark {
    color: var(--text-primary) !important;
}

.user-admin .text-danger {
    color: var(--accent-color) !important;
}

/* ============================================
   NAVBAR BUTTONS
   ============================================ */
.user-admin .btn-info-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-lightest) !important;
}

    .user-admin .btn-info-light:hover {
        background-color: var(--primary-lighter) !important;
        color: var(--text-on-primary) !important;
    }

.user-admin .btn-success-light {
    background-color: var(--primary-lightest) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-lightest) !important;
}

    .user-admin .btn-success-light:hover {
        background-color: var(--primary-lighter) !important;
        color: var(--text-on-primary) !important;
    }

/* ============================================
   NOTIFICATION ICONS
   ============================================ */
.user-admin .navbar-custom-menu .notifications-menu > a .badge.badge-info {
    background-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .navbar-custom-menu .notifications-menu > a .badge.badge-success {
    background-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .navbar-custom-menu .notifications-menu > a .badge.badge-danger {
    background-color: var(--accent-color) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   MEDIA LIST ITEMS
   ============================================ */
.user-admin .media-list .media:hover {
    background-color: var(--bg-secondary) !important;
}

/* ============================================
   CART & CHECKOUT PAGES
   ============================================ */
/* Box Headers - Primary Color */
.user-admin .box-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .box-header.bg-success {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .box-header.bg-info {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .box-header.bg-dark {
    background-color: var(--primary-dark) !important;
    color: var(--text-on-primary) !important;
}

/* Box Inverse - Primary Color */
.user-admin .box.bg-primary.box-inverse {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.user-admin .box.bg-info.box-inverse {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* Orders Page - Action Icons */
.user-admin .text-info {
    color: var(--primary-color) !important;
}

    .user-admin .text-info:hover {
        color: var(--primary-dark) !important;
    }

.user-admin .text-danger {
    color: var(--accent-color) !important;
}

    .user-admin .text-danger:hover {
        color: var(--accent-dark) !important;
    }

/* ============================================
   LIGHT SKIN THEME STYLES
   ============================================ */
.light-skin .main-header li.user-header {
    background-color: var(--bg-primary);
}

.light-skin .main-header .navbar .sidebar-toggle,
.light-skin .main-header .navbar .res-only-view {
    color: var(--text-on-primary);
}

.light-skin .main-header .navbar .nav > li > a:hover,
.light-skin .main-header .navbar .nav > li > a:active,
.light-skin .main-header .navbar .nav > li > a:focus {
    background-color: rgba(0, 0, 0, 0.03);
    color: #ffffff !important;
}

.light-skin .main-header .navbar .nav .open > a,
.light-skin .main-header .navbar .nav > .active > a {
    background-color: rgba(0, 0, 0, 0.05);
}

.light-skin .main-header .app-menu .dropdown-mega-menu .nav > li > a {
    color: var(--primary-light);
}

.light-skin .main-sidebar {
    border-right: 0;
    background-color: var(--bg-primary);
    box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.05);
}

.light-skin .user-panel > .info,
.light-skin .user-panel > .info > a {
    color: var(--text-on-primary);
}

.light-skin .sidebar-menu > li:hover > a,
.light-skin .sidebar-menu > li:active > a,
.light-skin .sidebar-menu > li.active > a {
    color: var(--primary-darker);
}

.light-skin .sidebar-menu > li.active > a {
    background-color: var(--primary-darker);
    color: var(--text-on-primary);
}

    .light-skin .sidebar-menu > li.active > a > i,
    .light-skin .sidebar-menu > li.active > a .fa,
    .light-skin .sidebar-menu > li.active > a i.fa {
        color: var(--text-on-primary) !important;
    }

/* Light skin sidebar icons - white color for Font Awesome */
.light-skin .sidebar-menu > li > a > i,
.light-skin .sidebar-menu > li > a .fa,
.light-skin .sidebar-menu > li > a i.fa {
    color: rgba(255, 255, 255, 0.9) !important;
}

.light-skin .sidebar-menu > li:hover > a > i,
.light-skin .sidebar-menu > li:hover > a .fa,
.light-skin .sidebar-menu > li:hover > a i.fa,
.light-skin .sidebar-menu > li.menu-open > a > i,
.light-skin .sidebar-menu > li.menu-open > a .fa,
.light-skin .sidebar-menu > li.menu-open > a i.fa {
    color: rgba(255, 255, 255, 1) !important;
}

.light-skin .sidebar-menu > li.menu-open > a,
.light-skin .sidebar-menu > li.menu-open > a svg {
    color: var(--primary-darker);
}

.light-skin .sidebar-menu > li > .treeview-menu {
    margin: 0 0px;
    background-color: transparent;
}

.light-skin.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    /* background-color: var(--bg-primary); */
    box-shadow: 5px 8px 10px 0px rgba(0, 0, 0, 0.1);
}

/* Treeview menu text - visible in both expanded and collapsed states */
.light-skin .sidebar-menu .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

    .light-skin .sidebar-menu .treeview-menu > li > a:hover,
    .light-skin .sidebar-menu .treeview-menu > li.active > a {
        color: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 0.1);
        text-decoration: none !important;
    }

/* Ensure treeview menu text is visible when sidebar is collapsed */
.light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

    .light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li > a:hover,
    .light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li.active > a {
        color: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 0.1);
        text-decoration: none !important;
    }

    /* Treeview menu text spans - ensure visibility when collapsed */
    .light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li > a > span {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li > a:hover > span,
    .light-skin.sidebar-collapse .sidebar-menu .treeview-menu > li.active > a > span {
        color: rgba(255, 255, 255, 1) !important;
    }

.light-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
    background-color: var(--bg-primary) !important;
    box-shadow: 5px 8px 10px 0px rgba(0, 0, 0, 0.1);
}

.light-skin .sidebar a {
    color: var(--text-secondary);
}

.light-skin .control-sidebar {
    color: var(--primary-darker);
    background-color: var(--bg-primary);
}

    .light-skin .control-sidebar .nav-tabs.control-sidebar-tabs {
        border-bottom: 1px solid var(--border-medium);
    }

        .light-skin .control-sidebar .nav-tabs.control-sidebar-tabs > li > a {
            color: var(--primary-darker);
            border-bottom-color: var(--border-medium);
        }

    .light-skin .control-sidebar .control-sidebar-heading,
    .light-skin .control-sidebar .control-sidebar-subheading {
        color: var(--primary-darker);
    }

    .light-skin .control-sidebar .control-sidebar-menu > li > a:hover {
        background-color: var(--bg-secondary);
    }

    .light-skin .control-sidebar .control-sidebar-menu > li > a .menu-info > p {
        color: var(--text-secondary);
    }

.control-sidebar + .control-sidebar-bg {
    background-color: var(--bg-primary);
}

@media (max-width: 767px) {
    .light-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    .light-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-open > a,
    .light-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}

/* Alert and Modal Colors */
.alert-primary, .alert-danger, .alert-error, .alert-info, .alert-success, .alert-warning,
.bg-black, .bg-black-active,
.callout.callout-danger, .callout.callout-info, .callout.callout-success, .callout.callout-warning, .callout.callout-primary,
.label-danger, .label-info, .label-primary, .label-success, .label-warning,
.modal-danger .modal-body, .modal-danger .modal-footer, .modal-danger .modal-header,
.modal-info .modal-body, .modal-info .modal-footer, .modal-info .modal-header,
.modal-primary .modal-body, .modal-primary .modal-footer, .modal-primary .modal-header,
.modal-success .modal-body, .modal-success .modal-footer, .modal-success .modal-header,
.modal-warning .modal-body, .modal-warning .modal-footer, .modal-warning .modal-header,
.bg-warning, .bg-gray,
.modal-primary .modal-header *, .modal-info .modal-header *, .modal-success .modal-header *,
.modal-danger .modal-header *, .modal-warning .modal-header * {
    color: var(--text-on-primary);
}

/* ============================================
   DARK SKIN THEME STYLES
   ============================================
   Dark skin styles from skin_color.css
   Note: Colors are kept as-is for dark theme compatibility
   ============================================ */
body.dark-skin {
    background-color: #20304c;
    color: #b5b5c3;
}

    body.dark-skin .content-wrapper {
        background-color: #20304c;
    }

.dark-skin h1, .dark-skin h2, .dark-skin h3, .dark-skin h4, .dark-skin h5, .dark-skin h6 {
    color: rgba(255, 255, 255, 0.85);
}

.dark-skin a {
    color: #b5b5c3;
}

.dark-skin .form-control, .dark-skin .form-select {
    background-color: #0c1a32;
    color: #b5b5c3;
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-skin .box {
    background-color: #0c1a32;
    box-shadow: -7.829px 11.607px 21px 0px rgba(25, 42, 70, 0.13);
}

.dark-skin .box-header {
    color: #b5b5c3;
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-skin .main-sidebar {
    background-color: #0c1a32;
}

.dark-skin .sidebar-menu > li > a > i {
    color: #b5b5c3;
}

.dark-skin .sidebar-menu > li.active > a {
    background-color: #ffffff;
    color: #172b4c;
}

    .dark-skin .sidebar-menu > li.active > a > i {
        color: #172b4c;
    }

.dark-skin .table {
    color: #b5b5c3;
}

    .dark-skin .table > thead > tr > th,
    .dark-skin .table > thead > tr > td,
    .dark-skin .table > tbody > tr > td,
    .dark-skin .table > tbody > tr > th,
    .dark-skin .table > tfoot > tr > td,
    .dark-skin .table > tfoot > tr > th {
        border-color: rgba(255, 255, 255, 0.12);
    }

.dark-skin .dropdown-menu {
    background-color: #112547;
    border-color: rgba(255, 255, 255, 0.12);
}

    .dark-skin .dropdown-menu > li > a {
        color: #b5b5c3;
    }

.dark-skin .control-sidebar {
    color: #b5b5c3;
    background-color: #112547;
}

.dark-skin .main-header .logo-box {
    background: #0c1a32 !important;
}

.dark-skin .main-footer {
    background: #0c1a32;
    color: #b5b5c3;
    border-color: rgba(255, 255, 255, 0.12);
}