/* ============================================================
   THEME OVERRIDE — Purple & Green Professional v1.0
   لوحة الألوان: بنفسجي داكن + أخضر زمردي
   يُحمَّل آخر CSS لضمان التغلب على كل الأنماط السابقة
   ============================================================ */

/* ── 1. CSS Custom Properties (Bootstrap 5 + Metronic overrides) ── */
:root {
    /* ── Primary: بنفسجي ── */
    --bs-primary:              #6d28d9;
    --bs-primary-rgb:          109, 40, 217;
    --bs-primary-text-emphasis:#4c1d95;
    --bs-primary-bg-subtle:    #ede9fe;
    --bs-primary-border-subtle:#c4b5fd;
    --bs-link-color:           #6d28d9;
    --bs-link-hover-color:     #4c1d95;
    --bs-focus-ring-color:     rgba(109,40,217,.25);

    /* ── Success: أخضر زمردي ── */
    --bs-success:              #059669;
    --bs-success-rgb:          5, 150, 105;
    --bs-success-text-emphasis:#064e3b;
    --bs-success-bg-subtle:    #d1fae5;
    --bs-success-border-subtle:#6ee7b7;

    /* ── Info: بنفسجي فاتح ── */
    --bs-info:                 #7c3aed;
    --bs-info-rgb:             124, 58, 237;
    --bs-info-text-emphasis:   #4c1d95;
    --bs-info-bg-subtle:       #ede9fe;
    --bs-info-border-subtle:   #c4b5fd;

    /* ── Warning: كهرماني دافئ ── */
    --bs-warning:              #d97706;
    --bs-warning-rgb:          217, 119, 6;

    /* ── Danger: أحمر واضح ── */
    --bs-danger:               #dc2626;
    --bs-danger-rgb:           220, 38, 38;

    /* ── Body Text ── */
    --bs-body-color:           #1e1b4b;
    --bs-body-color-rgb:       30, 27, 75;
    --bs-secondary-color:      #4b5563;
    --bs-tertiary-color:       #6b7280;

    /* ── Metronic/KT Variables ── */
    --kt-primary:              #6d28d9;
    --kt-primary-active:       #4c1d95;
    --kt-primary-light:        #ede9fe;
    --kt-primary-inverse:      #fff;
    --kt-success:              #059669;
    --kt-success-active:       #047857;
    --kt-success-light:        #d1fae5;
    --kt-info:                 #7c3aed;
    --kt-info-light:           #ede9fe;

    /* ── App Background ── */
    --bs-body-bg:              #f5f3ff;
    --kt-app-bg-color:         #f5f3ff;
}

/* ── 2. Button: Primary ── */
.btn-primary,
.btn-primary:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.btn-active-light) {
    background-color: #6d28d9 !important;
    border-color:     #6d28d9 !important;
    color:            #fff    !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #5b21b6 !important;
    border-color:     #5b21b6 !important;
    color:            #fff    !important;
}
.btn-light-primary {
    background-color: #ede9fe !important;
    border-color:     transparent !important;
    color:            #6d28d9 !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus {
    background-color: #6d28d9 !important;
    color:            #fff    !important;
}
.btn-active-primary:hover,
.btn-active-primary.active {
    background-color: #6d28d9 !important;
    color:            #fff    !important;
}

/* ── 3. Button: Success ── */
.btn-success {
    background-color: #059669 !important;
    border-color:     #059669 !important;
    color:            #fff    !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #047857 !important;
    border-color:     #047857 !important;
}
.btn-light-success {
    background-color: #d1fae5 !important;
    color:            #059669 !important;
}
.btn-light-success:hover {
    background-color: #059669 !important;
    color:            #fff    !important;
}

/* ── 4. Badges ── */
.badge.badge-primary, .badge-primary              { background-color: #6d28d9 !important; color: #fff !important; }
.badge.badge-success, .badge-success              { background-color: #059669 !important; color: #fff !important; }
.badge.badge-info,    .badge-info                 { background-color: #7c3aed !important; color: #fff !important; }
.badge-light-primary, .badge.badge-light-primary  { background-color: #ede9fe !important; color: #6d28d9 !important; }
.badge-light-success, .badge.badge-light-success  { background-color: #d1fae5 !important; color: #059669 !important; }
.badge-light-info,    .badge.badge-light-info      { background-color: #ede9fe !important; color: #7c3aed !important; }
.badge-light-warning, .badge.badge-light-warning  { background-color: #fef3c7 !important; color: #b45309 !important; }
.badge-light-danger,  .badge.badge-light-danger   { background-color: #fee2e2 !important; color: #dc2626 !important; }

/* ── 5. Links ── */
a { color: #6d28d9 !important; }
a:hover { color: #4c1d95 !important; }
/* Reset links inside buttons, badges and nav to not get overridden */
.btn, .badge, .nav-link, .menu-link,
.ep-btn, .breadcrumb-item a { color: inherit !important; }
a.btn-primary, a.btn-primary:hover { color: #fff !important; }
a.btn-success, a.btn-success:hover { color: #fff !important; }
a.btn-danger,  a.btn-danger:hover  { color: #fff !important; }
a.btn-warning, a.btn-warning:hover { color: #fff !important; }
a.btn-info,    a.btn-info:hover    { color: #fff !important; }

/* ── 6. Form Focus ── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #6d28d9 !important;
    box-shadow:   0 0 0 0.25rem rgba(109,40,217,.18) !important;
}
.form-check-input:checked {
    background-color: #6d28d9 !important;
    border-color:     #6d28d9 !important;
}
.form-switch .form-check-input:checked {
    background-color: #059669 !important;
    border-color:     #059669 !important;
}

/* ── 7. Sidebar ── */
/* السايدبار الأساسي */
.app-sidebar,
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background: linear-gradient(180deg, #1e1b4b 0%, #2e1065 40%, #1a1a2e 100%) !important;
    box-shadow: 4px 0 24px rgba(30,27,75,.35) !important;
}
/* عنوان الموديول */
.menu-section .menu-content span,
.menu .menu-section-text {
    color: rgba(167,139,250,.7) !important;
    text-transform: uppercase;
    font-size: .68rem !important;
    letter-spacing: .08em;
}
/* روابط الميني */
.menu-link {
    color: rgba(221,214,254,.85) !important;
    font-size: .84rem !important;
    font-weight: 500 !important;
    border-radius: 9px !important;
    transition: all .2s ease !important;
}
.menu-link:hover,
.menu-item.hover > .menu-link,
.menu-item.show > .menu-link {
    background: rgba(109,40,217,.25) !important;
    color: #fff !important;
}
.menu-link.active,
.menu-item.here > .menu-link {
    background: linear-gradient(135deg, rgba(109,40,217,.5), rgba(5,150,105,.3)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(109,40,217,.3) !important;
}
/* أيقونات الميني */
.menu-icon i, .menu-icon .svg-icon {
    color: rgba(167,139,250,.8) !important;
}
.menu-link.active .menu-icon i,
.menu-link.active .menu-icon .svg-icon,
.menu-link:hover .menu-icon i {
    color: #a7f3d0 !important;
}
/* Bullet dots */
.menu-bullet .bullet { background: rgba(167,139,250,.5) !important; }
.menu-link.active .menu-bullet .bullet,
.menu-link:hover .menu-bullet .bullet { background: #34d399 !important; }

/* Logo area */
.app-sidebar .logo-wrapper,
.app-sidebar-logo { border-bottom: 1px solid rgba(109,40,217,.25) !important; }

/* ── 8. Header / Navbar ── */
.app-header {
    background: #fff !important;
    border-bottom: 2px solid #ede9fe !important;
    box-shadow: 0 2px 16px rgba(109,40,217,.08) !important;
}

/* ── 9. Page Headers (Hero sections) ── */
/* Dashboard header */
.dashboard-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 45%, #059669 100%) !important;
}
/* Generic ef-hero (employee) */
.ef-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 60%, #047857 100%) !important;
}
/* ep-hero-bg (employee show) */
.ep-hero-bg {
    background: linear-gradient(135deg, #0f2544 0%, #5b21b6 55%, #059669 100%) !important;
}
/* .ep-tab */
.ep-tab {
    background: linear-gradient(135deg, #1a1a2e, #4c1d95) !important;
}
.ep-tab.active, .ep-tab:hover { border-bottom-color: #34d399 !important; color: #fff !important; }

/* Ramadan / Shifts hero cards */
[class*="card-flush"] .card-header {
    border-bottom: 2px solid #ede9fe;
}

/* ── 10. Cards ── */
.card { border: 1px solid #ede9fe !important; }
.card-header {
    background: linear-gradient(90deg, #f5f3ff, #fff) !important;
    border-bottom: 1.5px solid #ede9fe !important;
}
.card-title { color: #1e1b4b !important; font-weight: 700 !important; }

/* ── 11. Tables ── */
.table thead th,
.table > thead > tr > th {
    background: linear-gradient(90deg, #ede9fe, #f5f3ff) !important;
    color: #4c1d95 !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .03em;
    border-bottom: 2px solid #c4b5fd !important;
}
.table tbody tr:hover td {
    background: rgba(237,233,254,.4) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(237,233,254,.2) !important;
}
.datatable-table thead th { color: #4c1d95 !important; }

/* ── 12. Pagination ── */
.page-item.active .page-link {
    background-color: #6d28d9 !important;
    border-color:     #6d28d9 !important;
    color:            #fff !important;
}
.page-link { color: #6d28d9 !important; }
.page-link:hover { background: #ede9fe !important; }

/* ── 13. Tabs (Bootstrap nav-link) ── */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color:        #6d28d9 !important;
    border-color: transparent transparent #6d28d9 !important;
    font-weight:  700 !important;
}
.nav-line-tabs .nav-link.active,
.nav-line-tabs.nav-line-tabs-2x .nav-link.active {
    border-bottom: 3px solid #6d28d9 !important;
    color:         #6d28d9 !important;
    font-weight:   700 !important;
}
.nav-tabs .nav-link:hover { color: #5b21b6 !important; }

/* ── 14. Breadcrumb ── */
.breadcrumb-item.active {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #a78bfa !important;
}

/* ── 15. Stats Cards (KT / Metronic) ── */
.bg-primary, [class*="bg-light-primary"] { --bs-bg-opacity: 1; }
.bg-primary       { background-color: #6d28d9 !important; }
.bg-light-primary { background-color: #ede9fe !important; }
.bg-success       { background-color: #059669 !important; }
.bg-light-success { background-color: #d1fae5 !important; }
.bg-info          { background-color: #7c3aed !important; }
.bg-light-info    { background-color: #ede9fe !important; }

/* ── 16. Text Colors ── */
.text-primary { color: #6d28d9 !important; }
.text-success { color: #059669 !important; }
.text-info    { color: #7c3aed !important; }
.text-muted   { color: #6b7280 !important; }
/* Make muted text darker/more readable */
.text-muted, .fs-8, .fs-9, .form-text {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* ── 17. Progress Bars ── */
.progress-bar { background-color: #6d28d9 !important; }
.progress-bar.bg-success { background-color: #059669 !important; }

/* ── 18. Alerts ── */
.alert-primary {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #4c1d95 !important;
}
.alert-success {
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #064e3b !important;
}
.alert-info {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #4c1d95 !important;
}

/* ── 19. Select2 ── */
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #6d28d9 !important;
    box-shadow:   0 0 0 .25rem rgba(109,40,217,.2) !important;
}
.select2-dropdown .select2-results__option--highlighted {
    background: #6d28d9 !important;
    color: #fff !important;
}
.select2-dropdown .select2-results__option--selected {
    background: #ede9fe !important;
    color: #4c1d95 !important;
}

/* ── 20. Metronic Stats Card border-left accent ── */
.ep-stat { border-right-color: var(--sc, #6d28d9) !important; }

/* ── 21. Dashboard Stats (quick-stat-card) ── */
.quick-stat-card::before {
    background: var(--stat-color, #6d28d9) !important;
}

/* ── 22. Spinner / Loader ── */
.spinner-border.text-primary { color: #6d28d9 !important; }

/* ── 23. Separator ── */
.separator { background-color: #ede9fe !important; }

/* ── 24. Scrollbar (Global Dark Blue — Mobile Touch Friendly) ── */
* {
    scrollbar-color: #1e3a8a #e2e8f0 !important;
    scrollbar-width: auto !important;
}

::-webkit-scrollbar:horizontal,
*::-webkit-scrollbar:horizontal,
html::-webkit-scrollbar:horizontal,
body::-webkit-scrollbar:horizontal,
div::-webkit-scrollbar:horizontal,
.table-responsive::-webkit-scrollbar:horizontal,
.dataTables_wrapper::-webkit-scrollbar:horizontal,
.table-container::-webkit-scrollbar:horizontal {
    height: 18px !important;
    background-color: #e2e8f0 !important;
}

::-webkit-scrollbar:vertical,
*::-webkit-scrollbar:vertical,
html::-webkit-scrollbar:vertical,
body::-webkit-scrollbar:vertical,
div::-webkit-scrollbar:vertical {
    width: 10px !important;
    background-color: #e2e8f0 !important;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08) !important;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #1e3a8a !important; /* Deep Dark Blue */
    border-radius: 10px !important;
    border: 3px solid #e2e8f0 !important;
    min-width: 45px !important;
    cursor: pointer !important;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
div::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #0f172a !important; /* Navy Blue */
}

@media (max-width: 991px) {
    ::-webkit-scrollbar:horizontal,
    *::-webkit-scrollbar:horizontal,
    .table-responsive::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar:horizontal,
    .dataTables_wrapper::-webkit-scrollbar:horizontal {
        height: 20px !important;
        display: block !important;
    }
    .table-responsive,
    .dataTables_wrapper,
    .table-container {
        scrollbar-width: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── 25. Typography — Clarity ── */
body, .form-label, .card-title, .fw-bold, .fw-semibold,
h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
/* Form labels: darker + heavier */
.form-label {
    color: #1e1b4b !important;
    font-weight: 600 !important;
    font-size: .83rem !important;
    margin-bottom: .4rem;
}
/* Input text clear */
.form-control, .form-select {
    color: #1e1b4b !important;
    font-size: .88rem !important;
}
.form-control::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}
/* form-control-solid */
.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: #f5f3ff !important;
    border: 1.5px solid #e5e7eb !important;
    color: #1e1b4b !important;
}
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
    background-color: #fff !important;
    border-color: #6d28d9 !important;
    box-shadow: 0 0 0 .2rem rgba(109,40,217,.15) !important;
}

/* ── 26. HR Module: specific hero gradients ── */
/* Ramadan calendar header in form */
.card-flush .card-header h3.card-label { color: #1e1b4b !important; }

/* ── 27. Toolbar / Page Header Strip ── */
.toolbar, .page-title h1, .page-heading {
    color: #1e1b4b !important;
    font-weight: 800 !important;
}

/* ── 28. Dashboard Module Cards Colors ── */
.dashboard-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 50%, #059669 100%) !important;
    box-shadow: 0 16px 50px rgba(91,33,182,.25) !important;
}

/* ── 29. Pill / Status Colors ── */
.ep-pill-blue { background: #ede9fe !important; color: #5b21b6 !important; }
.ep-pill-green { background: #d1fae5 !important; color: #059669 !important; }
.ep-pill-purple { background: #ede9fe !important; color: #7c3aed !important; }

/* ── 30. Notice Boxes ── */
.notice.bg-light-warning { background: #fef3c7 !important; }
.notice.bg-light-primary { background: #ede9fe !important; }
.notice.bg-light-success { background: #d1fae5 !important; }
.notice.bg-light-danger  { background: #fee2e2 !important; }
.notice.bg-light-info    { background: #ede9fe !important; }
.notice .text-warning { color: #b45309 !important; }
.notice .text-primary { color: #6d28d9 !important; }
.notice .text-success { color: #059669 !important; }

/* ── 31. Toggle / Switch ── */
.form-switch .form-check-input { border-color: #c4b5fd !important; }

/* ── 32. Active Menu item accent  ── */
[data-kt-app-sidebar-fixed="true"] .app-sidebar .menu-item.here > .menu-link,
[data-kt-app-sidebar-fixed="true"] .app-sidebar .menu-item.show > .menu-link {
    background: rgba(109,40,217,.3) !important;
}

/* ── 33. Button: Warning (Ramadan save button) ── */
.btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    color: #fff !important;
}
.btn-light-warning {
    background: #fef3c7 !important;
    color: #b45309 !important;
}
.btn-light-warning:hover {
    background: #d97706 !important;
    color: #fff !important;
}

/* ── 34. Input Group Text ── */
.input-group-text {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #6d28d9 !important;
    font-weight: 600 !important;
}

/* ── 35. Metronic App Content BG ── */
.app-content { background: #f5f3ff !important; }
.app-wrapper  { background: #f5f3ff !important; }

/* ── 36. Stat Cards (EP) ── */
.ep-stat[style*="--sc:#2563a8"]   { --sc: #6d28d9 !important; }
.ep-stat[style*="--sc:#10b981"]   { --sc: #059669 !important; }
.ep-stat[style*="--sc:#7c3aed"]   { --sc: #7c3aed !important; }

/* ── 37. Card Icon Gradient Overrides  ── */
/* EP card icons */
.ep-card-icon[style*="background:linear-gradient(135deg,#2563a8"] {
    background: linear-gradient(135deg, #5b21b6, #6d28d9) !important;
}

/* ── 38. Sidebar menu-section (group titles) ── */
.menu-section { padding: .75rem 1.2rem .25rem !important; }
.menu-section .menu-icon { color: rgba(167,139,250,.6) !important; }

/* ── 39. Sidebar header / logo area ── */
.app-sidebar-logo { padding: 1rem 1.5rem !important; }

/* ── 40. Metronic Switch (form-check-custom) ── */
.form-check-input[type="checkbox"]:checked ~ .form-check-label,
.form-check-input[type="radio"]:checked ~ .form-check-label {
    color: #1e1b4b !important;
    font-weight: 600 !important;
}

/* ── 41. Ramadan preview card header ── */
/* (already inline, just add fallback) */

/* ── 42. Tabs (ef/ep custom tabs) ── */
.ef-tab.active { background: #fff !important; color: #5b21b6 !important; }
.ef-tab        { color: #6b7280 !important; }
.ef-tab:hover:not(.active) { background: rgba(109,40,217,.06) !important; color: #5b21b6 !important; }

/* ── 43. Metronic symbol color  ── */
.symbol-label.bg-light-primary { background: #ede9fe !important; color: #6d28d9 !important; }
.symbol-label.bg-light-success { background: #d1fae5 !important; color: #059669 !important; }

/* ── 44. DataTables buttons ── */
div.dt-buttons .dt-button:hover { background: #ede9fe !important; color: #6d28d9 !important; }

/* ── 45. Status dots (sidebar bullet active) ── */
.bullet.bg-success  { background: #059669 !important; }
.bullet.bg-primary  { background: #6d28d9 !important; }
.bullet.bg-warning  { background: #d97706 !important; }
.bullet.bg-danger   { background: #dc2626 !important; }

/* ── 46. Text contrast improvement ── */
/* All muted/grey text: make more visible */
.text-gray-500, .text-gray-600, .text-gray-700 { color: #4b5563 !important; }
.text-gray-400, .text-gray-300 { color: #6b7280 !important; }
.text-gray-800, .text-gray-900 { color: #1e1b4b !important; }
/* Table cell text */
.table td { color: #1f2937 !important; }
/* Card subtitle */
.card-title.fw-bold                { color: #1e1b4b !important; }
.fs-7 { color: #374151 !important; }
/* Larger body text */
.fs-6 { color: #1e1b4b !important; font-weight: 500 !important; }

/* ── 47. HR Sidebar specific (تواريخ رمضان link) ── */
.menu-link[href*="ramadan"] .menu-title { font-weight: 700 !important; }

/* ── 48. Media footer  ── */
@media (max-width: 768px) {
    .app-sidebar { z-index: 1050 !important; }
}