/* =========================================================
   EASY SCIENCE PREP
   GLOBAL DESIGN SYSTEM
   Dark Navy + Cream Theme
========================================================= */


/* =========================================================
   1. ESP BRAND VARIABLES
========================================================= */

:root {

    /* Brand Colors */
    --esp-navy: #071a38;
    --esp-navy-2: #0d2b55;
    --esp-blue: #0d5bd7;
    --esp-red: #e31b23;
    --esp-gold: #ffc52c;
    --esp-green: #159447;

    /* Background / Surface Colors */
    --esp-cream: #fffaf0;
    --esp-card: #fffdf8;
    --esp-border: #eadfc9;

    /* Text Colors */
    --esp-text: #10213e;
    --esp-muted: #667085;

    /* Common Design */
    --esp-radius: 14px;
    --esp-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   2. GLOBAL BASE
========================================================= */

html {
    background: var(--esp-navy);
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--esp-navy) !important;
    color: var(--esp-text);
}


/* =========================================================
   3. PAGE BACKGROUND
========================================================= */

main,
main.py-4,
.main-content,
.esp-page-shell {
    background: var(--esp-navy) !important;
}

.esp-page-shell {
    min-height: 100vh;
}


/* =========================================================
   4. MAIN CONTENT PANELS
========================================================= */

.esp-main-panel {
    background: var(--esp-cream);
    border: 1px solid var(--esp-border);
    border-radius: 18px;
    box-shadow: var(--esp-shadow);
}

.main-topic-card,
.topic-card,
.content-card {
    background: var(--esp-cream) !important;
    border: 1px solid var(--esp-border) !important;
    border-radius: var(--esp-radius);
}


/* =========================================================
   5. CARDS
========================================================= */

.card {
    background: var(--esp-card);
    border: 1px solid var(--esp-border);
    border-radius: var(--esp-radius);
    box-shadow: var(--esp-shadow);
    overflow: hidden;
    color: var(--esp-text);
}

.card-body {
    color: var(--esp-text);
}

.card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--esp-border);
}


/* =========================================================
   6. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--esp-navy);
    font-weight: 700;
}

p {
    color: inherit;
}


/* =========================================================
   7. BUTTONS
========================================================= */

.btn {
    border-radius: 10px;
    font-weight: 600;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}


/* Primary */

.btn-primary {
    background: var(--esp-blue);
    border-color: var(--esp-blue);
}

.btn-primary:hover {
    background: #094db9;
    border-color: #094db9;
}


/* Success */

.btn-success {
    background: var(--esp-green);
    border-color: var(--esp-green);
}

.btn-success:hover {
    background: #117a3b;
    border-color: #117a3b;
}


/* Danger */

.btn-danger {
    background: var(--esp-red);
    border-color: var(--esp-red);
}

.btn-danger:hover {
    background: #c8171e;
    border-color: #c8171e;
}


/* Warning */

.btn-warning {
    background: var(--esp-gold);
    border-color: var(--esp-gold);
    color: #111;
}

.btn-warning:hover {
    background: #eab21c;
    border-color: #eab21c;
    color: #111;
}


/* =========================================================
   8. TABLES
========================================================= */

.table {
    background: var(--esp-card);
    border-radius: 12px;
    overflow: hidden;
    color: var(--esp-text);
}

.table thead th {
    background: var(--esp-navy-2);
    color: #ffffff;
    border: none;
}


/* =========================================================
   9. FORMS
========================================================= */

.form-control,
.form-select {
    border-radius: 10px;
    border: 1px solid #d8dee8;
    min-height: 44px;
    background: #ffffff;
    color: var(--esp-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--esp-blue);
    box-shadow: 0 0 0 0.2rem rgba(13, 91, 215, 0.12);
}


/* =========================================================
   10. ESP NAVBAR
========================================================= */

.esp-navbar {
    background: var(--esp-navy);
    color: #ffffff;
}

.esp-navbar a {
    color: #ffffff;
}

.esp-navbar a:hover {
    color: var(--esp-gold);
}


/* =========================================================
   11. ESP SIDEBAR
========================================================= */

.esp-sidebar {
    background: linear-gradient(
        180deg,
        var(--esp-navy),
        var(--esp-navy-2)
    );

    color: #ffffff;
}

.esp-sidebar a {
    color: #ffffff;
}

.esp-sidebar a:hover,
.esp-sidebar a.active {
    color: var(--esp-gold);
}


/* =========================================================
   12. STATUS COLORS
========================================================= */

.esp-success {
    color: var(--esp-green);
}

.esp-warning {
    color: #b77900;
}

.esp-danger {
    color: var(--esp-red);
}

.esp-primary {
    color: var(--esp-blue);
}


/* =========================================================
   13. TOPIC / READING CONTENT
========================================================= */

.formatted-content {
    background: var(--esp-cream) !important;
    color: var(--esp-text);
}

.formatted-content p,
.formatted-content li {
    color: var(--esp-text);
}

.formatted-content h1,
.formatted-content h2,
.formatted-content h3,
.formatted-content h4,
.formatted-content h5,
.formatted-content h6 {
    color: var(--esp-navy);
}


/* =========================================================
   14. FOOTER
========================================================= */

.esp-footer {
    background: var(--esp-navy);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.esp-footer a {
    color: #ffffff;
}

.esp-footer a:hover {
    color: var(--esp-gold);
}


/* =========================================================
   15. MOBILE
========================================================= */

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    .esp-main-panel {
        border-radius: 12px;
    }

    .card {
        border-radius: 12px;
    }

}
/* =========================================================
   16. ESP PREMIUM DARK HEADER
   ========================================================= */

/* Main Header */
.navbar.navbar-expand-lg {
    background: #1F4E79 !important;
    background-color: #1F4E79 !important;
    background-image: none !important;

    border-bottom: 1px solid rgba(255,255,255,0.16) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.28) !important;
}


/* Main Navigation Links */
.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 600;
}


/* Navigation Hover */
.navbar .navbar-nav .nav-link:hover {
    color: var(--esp-gold) !important;
}


/* Active Navigation */
.navbar .navbar-nav .nav-link.active {
    color: var(--esp-gold) !important;
}


/* Logo Text */

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

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


/* Tagline */

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

.navbar .brand-tagline strong {
    color: #f4c84a !important;
}


/* ESP text below logo */

.navbar .logo-short-name {
    color: #ffffff !important;
}


/* Tutor 24x7 Button */

.navbar .btn-tutor {
    background: #1264e8 !important;
    color: #ffffff !important;
    border: none !important;
}


/* Online Test Button */

.navbar .btn-online {
    background: #dc1f26 !important;
    border-color: #dc1f26 !important;
    color: #ffffff !important;
}


/* Login Button */

.navbar .btn-outline-primary {
    color: #ffffff !important;
    border: 2px solid #4d82ff !important;
    background: transparent !important;
}

.navbar .btn-outline-primary:hover {
    background: #1264e8 !important;
    color: #ffffff !important;
}


/* Register / Dashboard Button */

.navbar .btn-primary,
.navbar .btn-dashboard {
    background: #1264e8 !important;
    border-color: #1264e8 !important;
    color: #ffffff !important;
}


/* Mobile Menu */

@media (max-width: 991.98px) {

    .navbar-collapse {
        background: #0d2b55 !important;
        border: 1px solid rgba(255,255,255,0.10);
    }

    .custom-toggler {
        border-color: #ffc52c !important;
    }

    .custom-toggler i {
        color: #ffc52c !important;
    }
}
/* =========================================================
   17. ESP COMPACT PREMIUM FOOTER
========================================================= */

footer.footer {
    background: #0D2B55 !important;
    color: #ffffff !important;

    border-top: 1px solid rgba(255,255,255,0.14);

    padding-top: 28px !important;
    padding-bottom: 14px !important;

    box-shadow: 0 -4px 18px rgba(0,0,0,0.16);
}


/* =========================================================
   FOOTER MAIN ROW
========================================================= */

footer.footer .row.g-4 {
    display: flex;
    align-items: flex-start;
}


/* =========================================================
   GENERAL FOOTER TEXT
========================================================= */

footer.footer p,
footer.footer span,
footer.footer li {
    color: #d9e3f0 !important;
}


/* Description */

footer.footer .text-muted {
    color: #d9e3f0 !important;
    line-height: 1.6;
}


/* =========================================================
   FOOTER HEADINGS
========================================================= */

footer.footer .footer-heading {
    color: #ffffff !important;

    font-weight: 700;

    margin-bottom: 16px !important;

    position: relative;
}


/* Gold underline */

footer.footer .footer-heading::after {
    content: "";

    display: block;

    width: 28px;
    height: 3px;

    background: #FFC52C !important;

    border-radius: 3px;

    margin-top: 7px;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

footer.footer ul {
    margin-bottom: 0;
}

footer.footer li {
    margin-bottom: 7px !important;
}

footer.footer .footer-link {
    color: #d9e3f0 !important;

    text-decoration: none;

    transition: 0.2s ease;
}

footer.footer .footer-link:hover {
    color: #FFC52C !important;
    padding-left: 3px;
}


/* =========================================================
   CONTACT SECTION
========================================================= */

footer.footer .contact-icon {
    color: #FFC52C !important;
}

footer.footer .contact-item {
    margin-bottom: 10px !important;
    color: #d9e3f0 !important;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

footer.footer .social-links {
    margin-top: 14px !important;
}

footer.footer .social-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.08) !important;

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 50%;

    color: #ffffff !important;

    transition: 0.2s ease;
}

footer.footer .social-icon:hover {
    background: #FFC52C !important;

    color: #071A38 !important;

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER DIVIDER
========================================================= */

footer.footer hr {
    border-color: rgba(255,255,255,0.20) !important;

    opacity: 1;

    margin-top: 20px !important;
    margin-bottom: 12px !important;
}


/* =========================================================
   COPYRIGHT ROW
========================================================= */

footer.footer .small,
footer.footer .small p {
    color: #cbd7e6 !important;
}

footer.footer .small a {
    color: #FFC52C !important;

    text-decoration: none;
}

footer.footer .small a:hover {
    color: #ffffff !important;
}


/* =========================================================
   DESKTOP FOOTER COLUMN SEPARATION
========================================================= */

@media (min-width: 992px) {

    footer.footer .row.g-4 > div:first-child {
        padding-right: 35px;

        border-right:
            1px solid rgba(255,255,255,0.16);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    footer.footer {
        padding-top: 24px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    footer.footer {
        padding-top: 22px !important;
        padding-bottom: 12px !important;
    }

    footer.footer .row.g-4 {
        display: flex;
    }

    footer.footer .footer-heading {
        margin-top: 8px;
    }

    footer.footer .d-flex.justify-content-between {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

}
/* =========================================================
   19. STUDENT PANEL THEME
========================================================= */

/* Whole Student Area */

body.esp-student-layout {
    background: #071A38 !important;
}


/* Top Navbar */

body.esp-student-layout .navbar {
    background: #1F4E79 !important;
    background-color: #1F4E79 !important;
    color: #ffffff !important;

    border-bottom: 1px solid rgba(255,255,255,0.14);

    box-shadow: 0 4px 16px rgba(0,0,0,0.20);
}


/* Navbar Brand */

body.esp-student-layout .navbar-brand,
body.esp-student-layout .navbar-brand span {
    color: #ffffff !important;
    font-weight: 700;
}


/* User Info */

body.esp-student-layout .navbar .nav-item .d-flex {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
}


/* =========================================================
   STUDENT SIDEBAR
========================================================= */

body.esp-student-layout .sidebar {
    background: linear-gradient(
        180deg,
        #0D2B55 0%,
        #071A38 100%
    ) !important;

    color: #ffffff !important;

    border-right: 1px solid rgba(255,255,255,0.10);
}


/* Sidebar Heading */

body.esp-student-layout .sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

body.esp-student-layout .sidebar-header h4 {
    color: #ffffff !important;
}


/* Sidebar Menu Headers */

body.esp-student-layout .menu-header {
    color: #FFC52C !important;

    border-top: 1px solid rgba(255,255,255,0.10);

    font-weight: 700;
}


/* Sidebar Links */

body.esp-student-layout .sidebar-menu .nav-link {
    color: #dbe7f5 !important;

    border-left: 4px solid transparent;

    border-radius: 0 8px 8px 0;
}


/* Sidebar Hover */

body.esp-student-layout .sidebar-menu .nav-link:hover {
    color: #ffffff !important;

    background: rgba(255,255,255,0.08) !important;

    border-left-color: #FFC52C !important;
}


/* Sidebar Active */

body.esp-student-layout .sidebar-menu .nav-link.active {
    color: #071A38 !important;

    background: #FFC52C !important;

    border-left-color: #FFC52C !important;

    font-weight: 700;
}


/* Sidebar Icons */

body.esp-student-layout .sidebar-menu .nav-link i {
    color: inherit;
}


/* =========================================================
   STUDENT MAIN CONTENT AREA
========================================================= */

body.esp-student-layout .main-content {
    background: #071A38 !important;
}


/* Main Content Wrapper */

body.esp-student-layout .content-container {
    background: transparent !important;
}


/* Main White/Cream Surface */

body.esp-student-layout .content {
    background: #FFFAF0 !important;

    border: 1px solid #EADFC9;

    border-radius: 16px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}


/* =========================================================
   STUDENT CARDS
========================================================= */

body.esp-student-layout .card,
body.esp-student-layout .stat-card {
    background: #FFFDF8 !important;

    border: 1px solid #EADFC9 !important;

    border-radius: 14px !important;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


/* Card Headings */

body.esp-student-layout .card-header {
    background: #FFF8E8 !important;

    border-bottom: 1px solid #EADFC9 !important;
}


/* =========================================================
   STUDENT BUTTONS
========================================================= */

body.esp-student-layout .btn-primary {
    background: #1264E8 !important;

    border-color: #1264E8 !important;
}


body.esp-student-layout .btn-success {
    background: #159447 !important;

    border-color: #159447 !important;
}


/* =========================================================
   STUDENT TABLES
========================================================= */

body.esp-student-layout .table thead th {
    background: #0D2B55 !important;

    color: #ffffff !important;
}


/* =========================================================
   STUDENT FOOTER
========================================================= */

body.esp-student-layout .footer {
    background: #0D2B55 !important;

    color: #ffffff !important;

    border-top: 1px solid rgba(255,255,255,0.12);
}

body.esp-student-layout .footer p {
    color: #d9e3f0 !important;
}


/* =========================================================
   MOBILE STUDENT PANEL
========================================================= */

@media (max-width: 768px) {

    body.esp-student-layout .sidebar {
        background: #0D2B55 !important;
    }

    body.esp-student-layout .content {
        border-radius: 12px;
    }

}
/* =========================================================
   ESP STUDENT PANEL - PREMIUM SIDEBAR
   ========================================================= */

body.esp-student-layout .sidebar {
    background: linear-gradient(
        180deg,
        #12345B 0%,
        #0B2545 100%
    ) !important;

    color: #ffffff !important;

    border-right: 1px solid rgba(255,255,255,.10);

    box-shadow: 4px 0 18px rgba(0,0,0,.18);
}


/* Student Panel title */

body.esp-student-layout .sidebar-header h4 {
    color: #ffffff !important;
}


/* Sidebar links */

body.esp-student-layout .sidebar-menu .nav-link {
    color: #eaf2ff !important;
}


/* Icons */

body.esp-student-layout .sidebar-menu .nav-link i {
    color: #8fc5ff;
}


/* Hover */

body.esp-student-layout .sidebar-menu .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;

    border-left-color: #ffc52c !important;
}


/* Active menu */

body.esp-student-layout .sidebar-menu .nav-link.active {
    background: #0d5bd7 !important;
    color: #ffffff !important;

    border-left-color: #ffc52c !important;
}


/* Active icon */

body.esp-student-layout .sidebar-menu .nav-link.active i {
    color: #ffffff !important;
}


/* Section labels:
   LEARNING / SUPPORT / ACCOUNT */

body.esp-student-layout .menu-header {
    color: #ffc52c !important;

    border-top-color: rgba(255,255,255,.10) !important;

    font-weight: 600;
}