/* SchoolJunkie Custom Styles */

/* Dark Sidebar Theme - Using Metronic's built-in dark-sidebar layout */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background-color: #1e1e2d !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
    background-color: #1e1e2d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link {
    color: rgba(255, 255, 255, 0.65);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon {
    color: rgba(255, 255, 255, 0.45);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon {
    color: #ffffff;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-section {
    color: rgba(255, 255, 255, 0.35);
}

/* Primary brand colors */
:root {
    --sj-primary: #0acc00;
    --sj-secondary: #175cb9;
    --sj-dark: #1e1e2d;
}

/* Ensure main content area remains light when sidebar is dark */
.app-sidebar-dark .app-main,
.app-sidebar-dark .app-content,
.app-sidebar-dark .app-toolbar,
.app-sidebar-dark .app-header {
    background-color: #ffffff !important;
    color: #181c32 !important;
}

.app-sidebar-dark .app-header {
    border-bottom: 1px solid #e4e6ef;
}

/* Dark theme override - when entire app is dark, still keep light content but dark sidebar */
[data-bs-theme="dark"] .app-sidebar-dark .app-main,
[data-bs-theme="dark"] .app-sidebar-dark .app-content,
[data-bs-theme="dark"] .app-sidebar-dark .app-toolbar {
    background-color: #1c1c29 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .app-sidebar-dark .app-header {
    background-color: #1c1c29 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light theme - ensure content is light */
[data-bs-theme="light"] .app-sidebar-dark .app-main,
[data-bs-theme="light"] .app-sidebar-dark .app-content,
[data-bs-theme="light"] .app-sidebar-dark .app-toolbar {
    background-color: #ffffff !important;
    color: #181c32 !important;
}

[data-bs-theme="light"] .app-sidebar-dark .app-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e4e6ef;
}

/* Custom metric cards styling */
.card.bg-primary {
    background: linear-gradient(135deg, var(--sj-primary), var(--sj-secondary)) !important;
}

.app-header {
    background-color: #f8f9fa !important; /* Light grey background */
    border-bottom: 1px solid #e5e7eb; /* Optional: subtle border */
    backdrop-filter: none !important; /* Remove any blur effects */
    -webkit-backdrop-filter: none !important; /* Remove any blur effects for Safari */
}

/* Auth/Login page specific styles */
.auth-page-clean {
    background: #ffffff !important;
    background-image: none !important;
}

.auth-page-clean body {
    background: #ffffff !important;
    background-image: none !important;
}

/* Ensure all auth text is dark/readable */
.auth-form-text,
.auth-form-text h1,
.auth-form-text h2,
.auth-form-text h3,
.auth-form-text h4,
.auth-form-text div,
.auth-form-text span,
.auth-form-text p,
.auth-form-text a {
    color: #181c32 !important;
}

/* Auth form inputs with better contrast */
.auth-form-input {
    background-color: #ffffff !important;
    border: 1px solid #e4e6ef !important;
    color: #181c32 !important;
}

.auth-form-input::placeholder {
    color: #a1a5b7 !important;
}

.auth-form-input:focus {
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.25) !important;
}

/* Auth aside section clean styling */
.auth-aside-clean {
    background: #f8f9fa !important;
    background-image: none !important;
}

.auth-aside-clean .text-white {
    color: #181c32 !important;
}

/* Dark text for auth pages */
.auth-text-dark {
    color: #181c32 !important;
}

.auth-text-gray {
    color: #5e6278 !important;
}

/* Override any light text in auth context */
body.app-blank .text-white,
body.app-blank .text-light {
    color: #181c32 !important;
}

/* Ensure auth buttons maintain proper styling */
.auth-form .btn-primary {
    background-color: #009ef7 !important;
    border-color: #009ef7 !important;
    color: #ffffff !important;
}

.auth-form .btn-primary:hover,
.auth-form .btn-primary:focus {
    background-color: #0077c0 !important;
    border-color: #0077c0 !important;
}