/* ============================================================
   Quick-Sale HR — 2025 Redesign Override CSS
   Design: Dark Slate (#1e293b) header + Green (#16a34a) accent
   Strategy: Loaded LAST → wins all specificity battles safely
   ============================================================ */

/* =========================================================
   1. NEW CSS VARIABLES (Design Tokens)
   ========================================================= */
:root {
    --qs-bg:            #f1f5f9;
    --qs-dark:          #1e293b;
    --qs-dark-2:        #0f172a;
    --qs-green:         #16a34a;
    --qs-green-dark:    #15803d;
    --qs-green-light:   #dcfce7;
    --qs-green-text:    #166534;
    --qs-border:        #e5e7eb;
    --qs-border-light:  #f3f4f6;
    --qs-card:          #ffffff;
    --qs-text:          #1e293b;
    --qs-text-muted:    #6b7280;
    --qs-text-light:    #94a3b8;
    --qs-shadow:        0 1px 4px rgba(0,0,0,.08);
    --qs-shadow-md:     0 4px 14px rgba(0,0,0,.10);
    --qs-shadow-lg:     0 8px 24px rgba(0,0,0,.12);
    --qs-radius:        10px;
    --qs-radius-sm:     6px;
    --qs-radius-lg:     14px;
    /* override legacy */
    --primary-color:    #16a34a;
    --primary-dark:     #15803d;
    --primary-light:    #86efac;
    --light-color:      #f1f5f9;
    --dark-color:       #1e293b;
}

/* =========================================================
   2. NAVBAR — Dark Slate + Green border
   ========================================================= */
.modern-navbar {
    background: #1e293b !important;
    background-image: none !important;
    border-bottom: 3px solid #16a34a !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
}

.sidebar-toggle {
    background: rgba(255,255,255,.1) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
.sidebar-toggle:hover {
    background: rgba(22,163,74,.25) !important;
    box-shadow: none !important;
    transform: scale(1.05) !important;
}
.sidebar-toggle:active { transform: scale(0.95) !important; }

.navbar-action-btn {
    background: rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
}
.navbar-action-btn:hover {
    background: rgba(22,163,74,.25) !important;
    transform: translateY(-1px) !important;
}

.user-profile-btn {
    background: rgba(255,255,255,.1) !important;
    border-radius: 10px !important;
}
.user-profile-btn:hover {
    background: rgba(22,163,74,.2) !important;
}

.user-avatar {
    color: #16a34a !important;
    font-weight: 700 !important;
}

.lang-toggle {
    background: rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
}
.lang-toggle:hover {
    background: rgba(22,163,74,.25) !important;
}

.search-input {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 8px !important;
}
.search-input:focus {
    background: rgba(255,255,255,.18) !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.25) !important;
    border-color: rgba(22,163,74,.5) !important;
}

/* =========================================================
   3. SIDEBAR — Clean White + Green accents
   ========================================================= */
.modern-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 2px 0 10px rgba(0,0,0,.05) !important;
}
[dir="rtl"] .modern-sidebar,
body.rtl .modern-sidebar {
    border-right: none !important;
    border-left: 1px solid #e5e7eb !important;
    box-shadow: -2px 0 10px rgba(0,0,0,.05) !important;
}

/* Sidebar section titles */
.sidebar-section-title {
    color: #94a3b8 !important;
    font-size: 0.7rem !important;
    letter-spacing: .8px !important;
}

/* Sidebar divider */
.sidebar-divider {
    background: #f1f5f9 !important;
}

/* Menu links */
.sidebar-menu-link {
    color: #374151 !important;
    font-size: 0.9rem !important;
    padding: 0.8rem 1.25rem !important;
    border-radius: 0 !important;
}
.sidebar-menu-link::before {
    background: #16a34a !important;
    width: 3px !important;
}
.sidebar-menu-link:hover {
    background: rgba(22,163,74,.07) !important;
    color: #16a34a !important;
}
.sidebar-menu-link:hover .menu-icon { color: #16a34a !important; }

.sidebar-menu-link.active {
    background: rgba(22,163,74,.1) !important;
    color: #16a34a !important;
    font-weight: 600 !important;
}
.sidebar-menu-link.active::before { transform: scaleY(1) !important; }
.sidebar-menu-link.active .menu-icon { color: #16a34a !important; }

/* Submenu */
.sidebar-submenu-link {
    color: #4b5563 !important;
    font-size: 0.85rem !important;
    padding: 0.65rem 1.25rem 0.65rem 3.25rem !important;
}
.sidebar-submenu-link::before {
    background: #94a3b8 !important;
}
.sidebar-submenu-link:hover {
    background: rgba(22,163,74,.05) !important;
    color: #16a34a !important;
}
.sidebar-submenu-link:hover::before {
    background: #16a34a !important;
}
.sidebar-submenu-link.active {
    color: #16a34a !important;
    font-weight: 600 !important;
}
.sidebar-submenu-link.active::before {
    background: #16a34a !important;
}

/* Menu badges */
.menu-badge {
    background: #16a34a !important;
    font-size: 0.65rem !important;
    border-radius: 6px !important;
}

/* =========================================================
   4. MAIN CONTENT BACKGROUND + BODY
   ========================================================= */
body {
    background: #f1f5f9 !important;
}

.main-content {
    background: #f1f5f9 !important;
}

/* =========================================================
   5. PAGE HEADER / SECTION HEADER
   ========================================================= */
.page-header {
    background: #1e293b !important;
    color: #fff !important;
    border-radius: var(--qs-radius) var(--qs-radius) 0 0 !important;
    padding: 0.85rem 1.25rem !important;
    border-bottom: 2px solid #16a34a !important;
    margin-bottom: 0 !important;
}
.page-header h1,.page-header h2,.page-header h3,
.page-header h4,.page-header h5,.page-header h6 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.page-header .btn { font-size: 0.82rem !important; padding: 0.35rem 0.75rem !important; }
.page-header .btn-light {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
}
.page-header .btn-light:hover {
    background: rgba(255,255,255,.25) !important;
}

/* =========================================================
   6. CARDS — Clean white, subtle shadow
   ========================================================= */
.card {
    border-radius: var(--qs-radius) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
    background: #ffffff !important;
}
.card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0.85rem 1.25rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 0.92rem !important;
}
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-dark,
.card-header.bg-secondary {
    /* keep colored headers intact, just tighten padding */
    padding: 0.85rem 1.25rem !important;
}

/* Dark card header override (common pattern) */
.card-header.bg-dark,
.card-header[style*="background:#1e293b"],
.card-header[style*="background: #1e293b"] {
    background: #1e293b !important;
    color: #fff !important;
    border-bottom: 2px solid #16a34a !important;
}

/* Stats cards */
.stats-card, .stat-card {
    border-radius: var(--qs-radius) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    overflow: hidden !important;
}
.stats-card:hover, .stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--qs-shadow-md) !important;
}

/* =========================================================
   7. BUTTONS — Green primary
   ========================================================= */
.btn-primary {
    background: linear-gradient(135deg,#16a34a,#15803d) !important;
    border-color: #16a34a !important;
    color: #fff !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
}
.btn-primary:hover,.btn-primary:focus {
    background: linear-gradient(135deg,#15803d,#166534) !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.35) !important;
}
.btn-primary:active {
    background: #15803d !important;
    transform: scale(.97) !important;
}
.btn-primary.disabled,.btn-primary:disabled {
    background: #86efac !important;
    border-color: #86efac !important;
}

/* Success → keep green, just ensure consistency */
.btn-success {
    background: linear-gradient(135deg,#16a34a,#15803d) !important;
    border-color: #16a34a !important;
}
.btn-success:hover,.btn-success:focus {
    background: linear-gradient(135deg,#15803d,#166534) !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.35) !important;
}

/* Outline primary */
.btn-outline-primary {
    color: #16a34a !important;
    border-color: #16a34a !important;
}
.btn-outline-primary:hover {
    background: #16a34a !important;
    color: #fff !important;
}

/* Icon buttons */
.btn-icon, .action-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--qs-radius-sm) !important;
    font-size: 0.9rem !important;
}

/* =========================================================
   8. FORM INPUTS
   ========================================================= */
.form-control,.form-select {
    border: 1.5px solid #e5e7eb !important;
    border-radius: var(--qs-radius-sm) !important;
    color: #1e293b !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 0.85rem !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus,.form-select:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
    outline: none !important;
}
.form-control::placeholder { color: #9ca3af !important; }

.form-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: .35rem !important;
}

.input-group-text {
    background: #f8fafc !important;
    border: 1.5px solid #e5e7eb !important;
    color: #6b7280 !important;
    font-size: 0.9rem !important;
}

/* =========================================================
   9. TABLES
   ========================================================= */
.table {
    font-size: 0.88rem !important;
    color: #1e293b !important;
    margin-bottom: 0 !important;
}
.table thead th {
    background: #f1f5f9 !important;
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-top: none !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap !important;
}
.table tbody td {
    padding: 0.65rem 1rem !important;
    vertical-align: middle !important;
    border-color: #f1f5f9 !important;
}
.table tbody tr:hover > td {
    background: rgba(22,163,74,.04) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(248,250,252,.7) !important;
}
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
    border-color: #e5e7eb !important;
}

/* =========================================================
   10. BADGES & PILLS
   ========================================================= */
.badge {
    font-weight: 500 !important;
    letter-spacing: .2px !important;
    padding: .3em .65em !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}
.badge.bg-primary { background: #16a34a !important; }
.bg-primary { background-color: #16a34a !important; }
.text-primary { color: #16a34a !important; }
.border-primary { border-color: #16a34a !important; }
.link-primary { color: #16a34a !important; }
.link-primary:hover { color: #15803d !important; }

/* =========================================================
   11. ALERTS
   ========================================================= */
.alert {
    border-radius: var(--qs-radius-sm) !important;
    border: 1px solid !important;
    font-size: 0.88rem !important;
}
.alert-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #15803d !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }

/* =========================================================
   12. MODALS
   ========================================================= */
.modal-header {
    background: #1e293b !important;
    color: #fff !important;
    border-bottom: 2px solid #16a34a !important;
    border-radius: calc(var(--qs-radius) - 1px) calc(var(--qs-radius) - 1px) 0 0 !important;
    padding: 0.9rem 1.25rem !important;
}
.modal-header .modal-title {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.modal-header .btn-close {
    filter: invert(1) !important;
    opacity: .8 !important;
}
.modal-header .btn-close:hover { opacity: 1 !important; }
.modal-content {
    border-radius: var(--qs-radius) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
    overflow: hidden !important;
}
.modal-footer {
    border-top: 1px solid #e5e7eb !important;
    padding: 0.85rem 1.25rem !important;
    background: #f8fafc !important;
}

/* =========================================================
   13. DROPDOWNS
   ========================================================= */
.dropdown-menu {
    border-radius: var(--qs-radius) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    padding: .35rem !important;
    font-size: 0.88rem !important;
}
.dropdown-item {
    border-radius: var(--qs-radius-sm) !important;
    padding: .5rem .85rem !important;
    color: #374151 !important;
}
.dropdown-item:hover,.dropdown-item:focus {
    background: rgba(22,163,74,.08) !important;
    color: #16a34a !important;
}
.dropdown-item.active,.dropdown-item:active {
    background: #16a34a !important;
    color: #fff !important;
}
.dropdown-divider { border-color: #e5e7eb !important; margin: .25rem !important; }

/* =========================================================
   14. PAGINATION
   ========================================================= */
.page-link {
    border-color: #e5e7eb !important;
    color: #374151 !important;
    border-radius: var(--qs-radius-sm) !important;
    margin: 0 2px !important;
    font-size: 0.85rem !important;
}
.page-link:hover { background: rgba(22,163,74,.08) !important; color: #16a34a !important; border-color: #16a34a !important; }
.page-item.active .page-link {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.page-item.disabled .page-link { background: #f8fafc !important; color: #94a3b8 !important; }

/* =========================================================
   15. PROGRESS BARS
   ========================================================= */
.progress {
    border-radius: 100px !important;
    background: #f1f5f9 !important;
    height: 8px !important;
}
.progress-bar {
    border-radius: 100px !important;
    background: linear-gradient(90deg,#16a34a,#22c55e) !important;
}
.progress-bar.bg-primary { background: linear-gradient(90deg,#16a34a,#22c55e) !important; }
.progress-bar.bg-info    { background: linear-gradient(90deg,#0ea5e9,#38bdf8) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg,#dc2626,#ef4444) !important; }

/* =========================================================
   16. TABS
   ========================================================= */
.nav-tabs {
    border-bottom: 2px solid #e5e7eb !important;
    gap: .25rem !important;
}
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    color: #6b7280 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: .65rem 1rem !important;
    margin-bottom: -2px !important;
    transition: color .15s, border-color .15s !important;
}
.nav-tabs .nav-link:hover { color: #16a34a !important; border-bottom-color: rgba(22,163,74,.4) !important; background: none !important; }
.nav-tabs .nav-link.active {
    color: #16a34a !important;
    border-bottom-color: #16a34a !important;
    background: none !important;
    font-weight: 600 !important;
}
.nav-pills .nav-link {
    border-radius: var(--qs-radius-sm) !important;
    color: #374151 !important;
    font-size: 0.88rem !important;
}
.nav-pills .nav-link.active {
    background: #16a34a !important;
    color: #fff !important;
}
.nav-pills .nav-link:hover:not(.active) {
    background: rgba(22,163,74,.08) !important;
    color: #16a34a !important;
}

/* =========================================================
   17. SWITCHES & CHECKBOXES
   ========================================================= */
.form-check-input:checked {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(22,163,74,.25) !important;
    border-color: #16a34a !important;
}
.form-switch .form-check-input { cursor: pointer !important; }

/* =========================================================
   18. TOOLTIPS
   ========================================================= */
.tooltip .tooltip-inner {
    background: #1e293b !important;
    border-radius: var(--qs-radius-sm) !important;
    font-size: 0.8rem !important;
    max-width: 220px !important;
}

/* =========================================================
   19. BREADCRUMB
   ========================================================= */
.breadcrumb-modern {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    border-radius: var(--qs-radius-sm) !important;
    padding: .6rem 1rem !important;
    margin-bottom: 1rem !important;
}
.breadcrumb-modern a { color: #6b7280 !important; font-size: 0.85rem !important; }
.breadcrumb-modern a:hover { color: #16a34a !important; }
.breadcrumb-modern .active { color: #1e293b !important; font-weight: 600 !important; }

/* =========================================================
   20. DASHBOARD — STAT CARDS REDESIGN
   ========================================================= */
.stats-card .card-body,.stat-card .card-body {
    padding: 1.1rem 1.25rem !important;
}
/* Stat number typography */
.stats-card .display-6,.stat-card .display-6 {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #1e293b !important;
}
/* Stat icon background */
.stats-icon, .stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
}

/* Quick action buttons on dashboard */
.quick-action-btn {
    border-radius: var(--qs-radius) !important;
    padding: 1rem !important;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    transition: all .2s ease !important;
    text-align: center !important;
}
.quick-action-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
    border-color: #16a34a !important;
}

/* =========================================================
   21. LIST GROUPS
   ========================================================= */
.list-group-item {
    border-color: #e5e7eb !important;
    font-size: 0.88rem !important;
    padding: .65rem 1rem !important;
    color: #374151 !important;
}
.list-group-item:first-child { border-radius: var(--qs-radius-sm) var(--qs-radius-sm) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--qs-radius-sm) var(--qs-radius-sm) !important; }
.list-group-item.active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.list-group-item-action:hover { background: rgba(22,163,74,.06) !important; color: #16a34a !important; }

/* =========================================================
   22. ACCORDION
   ========================================================= */
.accordion-button:not(.collapsed) {
    background: rgba(22,163,74,.08) !important;
    color: #16a34a !important;
    box-shadow: none !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important; }
.accordion-button::after {
    /* Bootstrap uses CSS var for the rotate icon, color it */
    filter: none !important;
}
.accordion-button:not(.collapsed)::after {
    filter: invert(35%) sepia(90%) saturate(500%) hue-rotate(105deg) !important;
}
.accordion-item { border-color: #e5e7eb !important; }

/* =========================================================
   23. SPINNERS / LOADING
   ========================================================= */
.spinner-border.text-primary { color: #16a34a !important; }
.spinner-grow.text-primary   { color: #16a34a !important; }
.spinner-border { border-color: rgba(22,163,74,.25) !important; border-right-color: #16a34a !important; }

/* =========================================================
   24. GENERAL TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5,h6 { color: #1e293b !important; }
.text-muted { color: #6b7280 !important; }
.text-secondary { color: #6b7280 !important; }
small,.small { font-size: .8rem !important; color: #6b7280 !important; }

/* =========================================================
   25. SCROLLBAR — Subtle green thumb
   ========================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #16a34a; }

/* =========================================================
   26. RTL-SPECIFIC FIXES
   ========================================================= */
[dir="rtl"] .sidebar-menu-link::before,
body.rtl .sidebar-menu-link::before {
    left: auto !important;
    right: 0 !important;
}
[dir="rtl"] .sidebar-submenu-link,
body.rtl .sidebar-submenu-link {
    padding: 0.65rem 3.25rem 0.65rem 1.25rem !important;
}
[dir="rtl"] .sidebar-submenu-link::before,
body.rtl .sidebar-submenu-link::before {
    left: auto !important;
    right: 2.25rem !important;
}
[dir="rtl"] .sidebar-submenu-link:hover,
body.rtl .sidebar-submenu-link:hover {
    padding: 0.65rem 3.5rem 0.65rem 1.25rem !important;
}

/* =========================================================
   27. UTILITIES
   ========================================================= */
.rounded-qs   { border-radius: var(--qs-radius) !important; }
.rounded-qs-sm{ border-radius: var(--qs-radius-sm) !important; }
.bg-qs-dark   { background: #1e293b !important; }
.bg-qs-green  { background: #16a34a !important; }
.bg-qs-light  { background: #f1f5f9 !important; }
.text-qs-green{ color: #16a34a !important; }
.border-qs    { border: 1.5px solid #e5e7eb !important; }

/* =========================================================
   28. SPECIAL PAGE-LEVEL OVERRIDES
   ========================================================= */

/* Dashboard purple vars override */
.dashboard-page { --purple: #16a34a; --purple-dark: #15803d; --blue: #16a34a; }

/* Sales / Invoice pages */
.invoice-section-header,.section-title-bar {
    background: #1e293b !important;
    color: #fff !important;
    border-radius: var(--qs-radius-sm) !important;
    padding: .6rem 1rem !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    border-left: 3px solid #16a34a !important;
}

/* Chat pages — keep their own styles mostly */
.chat-sidebar { border-color: #e5e7eb !important; }
.chat-header  { background: #1e293b !important; }

/* Settings page card headers */
.settings-section .card-header { background: #1e293b !important; color: #fff !important; border-bottom: 2px solid #16a34a !important; }

/* Attendance status colors — keep semantic meaning but unify look */
.badge-present,.badge.bg-success { background: #16a34a !important; }

/* Reports page */
.report-header,.report-title { color: #1e293b !important; font-weight: 700 !important; }

/* =========================================================
   29. FLATPICKR OVERRIDES — Green theme
   ========================================================= */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #16a34a !important;
    border-color: #16a34a !important;
}
.flatpickr-day:hover:not(.selected) {
    background: rgba(22,163,74,.1) !important;
    border-color: transparent !important;
}
.flatpickr-months { background: #1e293b !important; }
.flatpickr-month { background: #1e293b !important; color: #fff !important; fill: #fff !important; }
.flatpickr-weekdays { background: #f8fafc !important; }
.flatpickr-prev-month,.flatpickr-next-month { fill: #fff !important; }
.flatpickr-prev-month:hover,.flatpickr-next-month:hover { fill: #16a34a !important; }
.flatpickr-current-month { color: #fff !important; font-size: 1rem !important; }
.flatpickr-current-month select.cur-month { color: #fff !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color: #fff !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #fff !important; }

/* =========================================================
   30. SELECT2 / CUSTOM SELECTS — Green focus
   ========================================================= */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #e5e7eb !important;
    border-radius: var(--qs-radius-sm) !important;
    height: auto !important;
    min-height: 38px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
}
.select2-container--default .select2-results__option--highlighted {
    background: #16a34a !important;
}
.select2-container--default .select2-selection__choice {
    background: rgba(22,163,74,.1) !important;
    border: 1px solid rgba(22,163,74,.3) !important;
    color: #15803d !important;
    border-radius: 4px !important;
}

/* =========================================================
   31. NOTIFICATION BELL — keep badge red
   ========================================================= */
#notification-badge { background: #dc2626 !important; }
.notification-badge { background: #dc2626 !important; }

/* =========================================================
   32. SIDEBAR ARROW TOGGLE — Green
   ========================================================= */
.sidebar-arrow-toggle {
    background: linear-gradient(145deg,#16a34a,#15803d) !important;
    box-shadow: 0 8px 20px rgba(22,163,74,.35) !important;
    border: 2px solid rgba(255,255,255,.2) !important;
}
.sidebar-arrow-toggle:hover {
    background: linear-gradient(145deg,#15803d,#16a34a) !important;
    box-shadow: 0 12px 30px rgba(22,163,74,.5) !important;
}

/* =========================================================
   33. CHART.JS — custom tooltip (no CSS overrides needed)
       Just ensure canvas containers have right background
   ========================================================= */
.chart-wrapper, .chart-container {
    background: #ffffff !important;
    border-radius: var(--qs-radius) !important;
    padding: 1rem !important;
}

/* =========================================================
   34. PRESENCE ALERT WIDGET
   ========================================================= */
#presence-alert-widget {
    border-radius: var(--qs-radius-sm) !important;
    font-size: 0.82rem !important;
}

/* =========================================================
   35. MOBILE RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 768px) {
    .main-content { padding: 1rem !important; }
    .card-header { padding: .75rem 1rem !important; }
    .card-body   { padding: .85rem 1rem !important; }
    .table thead th { font-size: 0.72rem !important; padding: .5rem .75rem !important; }
    .table tbody td { padding: .5rem .75rem !important; font-size: 0.82rem !important; }
    .modal-header { padding: .75rem 1rem !important; }
    .btn { font-size: 0.85rem !important; }
}

/* =========================================================
   END OF redesign-2025.css
   ========================================================= */