/* Dark Theme for LMS */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
@import url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css');

:root {
    --body_bg: #030b11 !important;
    --panel-bg: #030b11 !important;
    --primary: #5affeb !important;
    --secondary: #ffffff !important;
    --text-color: #e0e0e0 !important;
    --text-dark: #0a1c2a !important;
    --border-color: #333333 !important;
    --card-bg: #252525 !important;
}

/* Main Body Styling */
body, html {
    background-color: #030b11 !important;
    color: #e0e0e0 !important;
    font-family: 'Almarai', sans-serif !important;
}

/* Text Colors - BUT NOT for icon containers */
body, p:not([class*="icon"]), span:not([class*="icon"]):not(svg), li, div:not([class*="icon"]):not(svg), h1, h2, h3, h4, h5, h6, a {
    color: #e0e0e0 !important;
    font-family: 'Almarai', sans-serif !important;
}

/* SVG and Icon Containers - Preserve original styling */
svg, [class*="icon"], [class*="ion"], i, .fa, .fas, .far, .fal, .fad {
    font-family: inherit !important;
}

a {
    color: #5affeb !important;
}

a:hover {
    color: #5fe591 !important;
}

/* Card Styles */
.card, .panel-item, .dashboard-stats {
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.card-header {
    border-bottom: 1px solid #333333 !important;
    color: #e0e0e0 !important;
}

.card-body {
    color: #e0e0e0 !important;
}

/* Form Elements */
.form-control, .form-select, input, textarea, select {
    color: #e0e0e0 !important;
    border-color: #142e32 !important;
}}

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
    border-color: #5affeb !important;
    box-shadow: 0 0 0 0.2rem rgba(67, 212, 119, 0.25) !important;
}

.form-control::placeholder, .form-select::placeholder {
    color: #888888 !important;
}

/* Tables */
.table {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.table thead th {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.table tbody td {
    border-color: #333333 !important;
}

.table tbody tr:hover {
    background-color: #2a2a2a !important;
}



.navbar-brand {
    color: #e0e0e0 !important;
}

.nav-link {
    color: #b0b0b0 !important;
}

.nav-link:hover, .nav-link.active {
    color: #5affeb !important;
}

/* Sidebar */
.sidebar, aside, .panel-sidebar {
    background-color: #030b11 !important;
    border-right: 1px solid #333333 !important;
}

/* Buttons */
.btn {
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.btn-primary {
    background-color: #5affeb !important;
    border-color: #5affeb !important;
    color: #0a1c2a !important;
    box-shadow: 0 4px 8px rgba(90, 255, 235, 0.3) !important;
}

.btn-primary:hover {
    background-color: #3effdc !important;
    border-color: #3effdc !important;
    color: #0a1c2a !important;
    box-shadow: 0 6px 12px rgba(90, 255, 235, 0.5) !important;
}

.btn-primary:focus {
    background-color: #3effdc !important;
    border-color: #3effdc !important;
    color: #0a1c2a !important;
    box-shadow: 0 0 0 0.25rem rgba(90, 255, 235, 0.5) !important;
}

.btn-light {
    background-color: #5affeb !important;
    color: #0a1c2a !important;
    border-color: #5affeb !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 8px rgba(90, 255, 235, 0.3) !important;
}

.btn-light:hover {
    background-color: #3effdc !important;
    color: #0a1c2a !important;
    border-color: #3effdc !important;
    box-shadow: 0 6px 12px rgba(90, 255, 235, 0.5) !important;
}

.btn-light:focus {
    background-color: #3effdc !important;
    color: #0a1c2a !important;
    box-shadow: 0 0 0 0.25rem rgba(90, 255, 235, 0.5) !important;
}

.btn-secondary {
    background-color: #5affeb !important;
    border-color: #5affeb !important;
    color: #030b11 !important;
    box-shadow: 0 4px 8px rgba(67, 212, 119, 0.3) !important;
}

.btn-secondary:hover {
    background-color: #2fb860 !important;
    border-color: #2fb860 !important;
    color: #030b11 !important;
    box-shadow: 0 6px 12px rgba(67, 212, 119, 0.5) !important;
}

.btn-secondary:focus {
    background-color: #2fb860 !important;
    border-color: #2fb860 !important;
    box-shadow: 0 0 0 0.25rem rgba(67, 212, 119, 0.5) !important;
}

/* Alerts */
.alert {
    background-color: #2a2a2a !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

.alert-info {
    background-color: #1a3a4f !important;
    border-color: #2a5a7f !important;
    color: #a8d8ea !important;
}

.alert-warning {
    background-color: #4a3a1a !important;
    border-color: #7a5a2a !important;
    color: #ffc966 !important;
}

.alert-danger {
    background-color: #4a1a1a !important;
    border-color: #7a2a2a !important;
    color: #ff9999 !important;
}

.alert-success {
    background-color: #1a3a2a !important;
    border-color: #2a5a4a !important;
    color: #66d977 !important;
}

/* Modal */
.modal-content {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.modal-header {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #333333 !important;
}

.modal-footer {
    border-top: 1px solid #333333 !important;
}

.close, .btn-close {
    color: #e0e0e0 !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: #252525 !important;
    border-color: #333333 !important;
}

.dropdown-item {
    color: #e0e0e0 !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #5affeb !important;
}

.dropdown-divider {
    border-color: #333333 !important;
}

/* Badges & Labels */
.badge {
    background-color: #0c1924 !important;
    color: #e0e0e0 !important;
}

.label {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* Progress Bar */
.progress {
    background-color: #2a2a2a !important;
}

.progress-bar {
    background-color: #5affeb !important;
}

/* Pagination */
.pagination .page-link {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.pagination .page-link:hover {
    background-color: #333333 !important;
    color: #5affeb !important;
    border-color: #444444 !important;
}

.pagination .page-item.active .page-link {
    background-color: #5affeb !important;
    border-color: #5affeb !important;
    color: #030b11 !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: #252525 !important;
}

.breadcrumb-item {
    color: #b0b0b0 !important;
}

.breadcrumb-item.active {
    color: #e0e0e0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #555555 !important;
}

/* Learning Page Specific */
.learning-page-navbar-btn {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

.learning-page-navbar-btn:hover {
    background-color: #333333 !important;
}

/* Panel/Dashboard */
.dashboard-stats {
    background-color: #252525 !important;
}

.dashboard-stats:hover {
    background-color: #2a2a2a !important;
}

/* List Groups */
.list-group-item {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.list-group-item:hover {
    background-color: #2a2a2a !important;
}

.list-group-item.active {
    background-color: #5affeb !important;
    border-color: #5affeb !important;
    color: #030b11 !important;
}

/* Pills */
.nav-pills .nav-link {
    color: #b0b0b0 !important;
}

.nav-pills .nav-link:hover {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.nav-pills .nav-link.active {
    background-color: #5affeb !important;
    color: #030b11 !important;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid #333333 !important;
}

.nav-tabs .nav-link {
    color: #b0b0b0 !important;
}

.nav-tabs .nav-link:hover {
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

.nav-tabs .nav-link.active {
    background-color: #252525 !important;
    border-color: #333333 #333333 #252525 !important;
    color: #5affeb !important;
}

/* Code Blocks */
code, pre {
    background-color: #030b11 !important;
    color: #66d977 !important;
}

/* Icon Font Exclusions */
.fas, .far, .fal, .fab, .fa,
i.fa, i[class^="fa-"], i[class*=" fa-"],
.feather, .material-icons, .bi,
i.feather, i[class^="feather"], i[class*=" feather"],
i.material-icons,
i[class^="bi"], i[class*=" bi"],
.ion, i.ion, i[class^="ion-"], i[class*=" ion-"],
svg.icon, svg.feather,
[class*="icon"], [class*="icon-"],
.glyphicon, i.glyphicon {
    font-family: inherit !important;
    font-style: normal !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #030b11 !important;
}

::-webkit-scrollbar-thumb {
    background: #444444 !important;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555 !important;
}