/* ============================================
   Mosbat 20 — Educational System Theme
   Palette: Ink #1C1003 / Cream #FEF7F1 / Orange #F48115 / Olive #A1B55E / Indigo #3A39AC
   ============================================ */

:root {
    --ink: #1C1003;
    --ink-soft: #2b1a08;
    --cream: #FEF7F1;
    --cream-dim: #f3e8dd;
    --orange: #F48115;
    --orange-dark: #d76c0a;
    --olive: #A1B55E;
    --olive-dark: #8aa047;
    --indigo: #3A39AC;
    --indigo-dark: #2d2c88;
    --radius: 18px;
    --shadow-sm: 0 2px 8px rgba(28,16,3,.06);
    --shadow: 0 10px 28px rgba(28,16,3,.10);
    --shadow-lg: 0 18px 40px rgba(28,16,3,.16);
    --surface: #fff;
    --surface-2: #FEF7F1;
    --surface-border: #000;
}

html[data-theme="dark"] {
    --surface: #221407;
    --surface-2: #2a1a0b;
    --surface-border: #3c2812;
    --cream-dim: #2a1a0b;
    --ink: #e7d7c4;
    --ink-soft: #c9b39a;
}


/* ============================================
   GLOBAL
   ============================================ */

* {
    box-sizing: border-box;
}


/* ============================================
   MORRABA FONT
   ============================================ */

@font-face {
    font-family: 'Morraba';
    src: url('/Fonts/Morabba/woff2/Morabba-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Morraba';
    src: url('/Fonts/Morabba/woff2/Morabba-Black.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================
   GLOBAL FONT
   ============================================ */

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
li,
td,
th,
label,
small,
strong,
b,
.nav-link,
.card-custom,
.card,
.breadcrumb-custom,
button,
input,
select,
textarea {
    font-family: 'Morraba','Segoe UI',Tahoma,Geneva,Verdana,sans-serif !important;
}


/* ============================================
   HTML
   ============================================ */

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background: var(--cream);
}

    html[data-theme="dark"] {
        background: #140b03;
    }


/* ============================================
   BODY
   ============================================ */

body {
    min-height: 100vh;
    background: radial-gradient( 1100px 500px at 15% -10%, rgba(244,129,21,.10), transparent 60% ), radial-gradient( 900px 500px at 110% 10%, rgba(58,57,172,.08), transparent 55% ), radial-gradient( 900px 600px at 50% 120%, rgba(161,181,94,.10), transparent 55% ), var(--cream) !important;
    color: #000 !important;
    line-height: 1.8;
    /* Morraba looks much cleaner at normal weight */
    font-weight: 400;
}


/* ============================================
   GLOBAL TEXT
   ============================================ */

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
li,
td,
th,
label,
small,
strong,
b {
    color: #000 !important;
}


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

/*
   Morraba Black was previously being used through
   font-weight:800. That's what made everything feel
   too heavy.

   600 is intentionally used here, but because you only
   provided Regular (400) and Black (700), browsers will
   use the closest available weight.
*/

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700 !important;
    letter-spacing: .1px;
}


/* ============================================
   STRONG / BOLD TEXT
   ============================================ */

strong,
b {
    font-weight: 700 !important;
}


/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--cream-dim);
}

::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 10px;
}


/* ============================================
   BOOTSTRAP COLOR OVERRIDES
   ============================================ */

.text-primary {
    color: var(--orange) !important;
}

.text-muted {
    color: #6b5b4d !important;
}

.text-dark {
    color: #000 !important;
}

.text-secondary {
    color: var(--olive-dark) !important;
}


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

.btn {
    border-radius: 12px !important;
    padding: .55rem 1.3rem !important;
    transition: .2s ease !important;
}

.btn-primary {
    background: linear-gradient( 135deg, var(--orange), var(--orange-dark) ) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(244,129,21,.35) !important;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(244,129,21,.45) !important;
    }

.btn-outline-secondary {
    color: #000 !important;
    border-color: #c9b8a8 !important;
    background: #fff !important;
}

    .btn-outline-secondary:hover {
        background: var(--cream-dim) !important;
        color: #000 !important;
        transform: translateY(-2px);
    }

.btn-outline-danger {
    color: #c23b2c !important;
    border-color: #c23b2c !important;
}

    .btn-outline-danger:hover {
        background: #c23b2c !important;
        color: #fff !important;
        transform: translateY(-2px);
    }

.btn-success {
    background: linear-gradient( 135deg, var(--olive), var(--olive-dark) ) !important;
    border-color: var(--olive) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(161,181,94,.35) !important;
}

.btn-info {
    background: linear-gradient( 135deg, var(--indigo), var(--indigo-dark) ) !important;
    border-color: var(--indigo) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(58,57,172,.35) !important;
}


/* ============================================
   BACKGROUNDS
   ============================================ */

.bg-primary {
    background: var(--orange) !important;
}

.bg-light {
    background: var(--cream-dim) !important;
    color: #000 !important;
}

.bg-white {
    background: #fff !important;
    color: #000 !important;
}


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

a {
    color: var(--indigo);
    text-decoration: none;
    transition: .15s;
}

    a:hover {
        color: var(--orange);
    }


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

.sidebar {
    background: #fff !important;
    border-left: 1px solid #f0e4d6 !important;
    border-right: 1px solid #f0e4d6 !important;
    color: #000;
    box-shadow: var(--shadow-sm);
}

.nav-link {
    color: #000 !important;
    border-radius: 12px !important;
    margin-bottom: 4px;
    transition: .18s ease !important;
}

    .nav-link i {
        color: var(--orange);
    }

    .nav-link:hover {
        background: var(--cream-dim) !important;
        color: #000 !important;
        padding-right: 20px;
    }

    .nav-link:hover,
    .nav-link.active {
        background: var(--orange) !important;
        color: #fff !important;
    }

        .nav-link:hover i,
        .nav-link.active i {
            color: #fff !important;
        }


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

.sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 2px solid var(--surface-border);
    background: var(--surface);
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    color: var(--orange);
}

.sidebar-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28,16,3,.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity .25s ease;
}

    .sidebar-drawer-backdrop.open {
        display: block;
        opacity: 1;
    }

.sidebar-close-btn {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    border: none;
    background: none;
    font-size: 1.25rem;
    color: var(--orange);
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

    .sidebar-close-btn:hover {
        background: var(--cream-dim);
    }


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

@media (max-width:768px) {

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -85% !important;
        width: 85% !important;
        max-width: 300px !important;
        height: 100vh !important;
        z-index: 1045 !important;
        box-shadow: -10px 0 30px rgba(28,16,3,.25) !important;
        transition: right .3s ease !important;
        overflow-y: auto !important;
        margin-bottom: 0 !important;
        padding-top: 56px !important;
    }

        .sidebar.open {
            right: 0 !important;
        }

    .sidebar-toggle-btn {
        display: flex;
    }

    .sidebar-close-btn {
        display: block;
    }

    .main,
    .main-content {
        margin-right: 0 !important;
        padding-top: 70px !important;
    }
}


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

.card-custom,
.card {
    background: #fff !important;
    color: #000 !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid #f5ebe0 !important;
    border-top: 4px solid var(--orange) !important;
    transition: .2s ease !important;
}

    .card-custom:hover,
    .card:hover {
        box-shadow: var(--shadow-lg) !important;
        transform: translateY(-3px);
    }

    .card-custom h1,
    .card-custom h2,
    .card-custom h3,
    .card-custom h4,
    .card-custom h5,
    .card h1,
    .card h2,
    .card h3,
    .card h4,
    .card h5 {
        color: #000 !important;
    }


/* ============================================
   CARD ACCENT COLORS
   ============================================ */

.row > div:nth-of-type(3n+2) .card-custom {
    border-top-color: var(--olive) !important;
}

.row > div:nth-of-type(3n+3) .card-custom {
    border-top-color: var(--indigo) !important;
}


/* ============================================
   BREADCRUMBS / SECTION TITLES
   ============================================ */

.breadcrumb-custom,
h4.text-primary {
    color: var(--orange) !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5ebe0;
}

    .breadcrumb-custom a,
    h4.text-primary a {
        color: var(--indigo) !important;
        text-decoration: none;
    }

        .breadcrumb-custom a:hover,
        h4.text-primary a:hover {
            text-decoration: underline;
            color: var(--orange) !important;
        }


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

table {
    color: #000;
    border-collapse: separate !important;
    border-spacing: 0;
}

.table {
    --bs-table-bg: #fff;
    color: #000;
}

    .table thead th {
        background: var(--cream-dim) !important;
        color: #000 !important;
        border-bottom: 2px solid var(--orange) !important;
        font-weight: 700;
    }

    .table tbody tr {
        transition: .15s;
    }

        .table tbody tr:hover {
            background: #fff7ee !important;
        }


/* ============================================
   FORM ELEMENTS
   ============================================ */

input,
select,
textarea,
.form-control,
.form-select {
    background: #fff !important;
    color: #000 !important;
    border: 1.5px solid #e6d8c8 !important;
    border-radius: 10px !important;
    transition: .15s;
}

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .form-select:focus {
        border-color: var(--orange) !important;
        box-shadow: 0 0 0 .2rem rgba(244,129,21,.18) !important;
    }

    input::placeholder {
        color: #9c8875 !important;
    }


/* ============================================
   BADGES
   ============================================ */

.badge {
    border-radius: 8px !important;
    padding: .4em .7em !important;
    font-weight: 600 !important;
}

    .badge.bg-primary {
        background: var(--orange) !important;
        color: #fff !important;
    }

    .badge.bg-success {
        background: var(--olive) !important;
        color: #fff !important;
    }

    .badge.bg-info {
        background: var(--indigo) !important;
        color: #fff !important;
    }


/* ============================================
   ICONS IN HEADINGS
   ============================================ */

h3 i,
h4 i,
h2 i {
    color: var(--orange);
}


/* ============================================
   DAY / NIGHT TOGGLE
   ============================================ */

.theme-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1050;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient( 135deg, var(--orange), var(--indigo) );
    color: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: .25s ease;
}

    .theme-toggle-btn:hover {
        transform: translateY(-3px) rotate(18deg);
    }


/* ============================================
   DARK MODE
   ============================================ */

html[data-theme="dark"] body {
    background: radial-gradient( 1100px 500px at 15% -10%, rgba(244,129,21,.16), transparent 60% ), radial-gradient( 900px 500px at 110% 10%, rgba(90,88,220,.20), transparent 55% ), radial-gradient( 900px 600px at 50% 120%, rgba(161,181,94,.12), transparent 55% ), #140b03 !important;
    color: #e7d7c4 !important;
}


html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: #e7d7c4 !important;
}


/* ============================================
   DARK HEADINGS
   ============================================ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #fbe4c7 !important;
}


/* ============================================
   DARK TEXT COLORS
   ============================================ */

html[data-theme="dark"] .text-dark {
    color: #e7d7c4 !important;
}

html[data-theme="dark"] .text-muted {
    color: #a8927c !important;
}

html[data-theme="dark"] .text-secondary {
    color: var(--olive) !important;
}


/* ============================================
   DARK SURFACES
   ============================================ */

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card-custom,
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .navbar-custom,
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .square-image,
html[data-theme="dark"] .accordion-item-custom,
html[data-theme="dark"] .accordion-custom,
html[data-theme="dark"] .big-cta-box,
html[data-theme="dark"] .cta-image,
html[data-theme="dark"] .testimonial-slide {
    background: #221407 !important;
    border-color: #3c2812 !important;
    color: #e7d7c4 !important;
}


    html[data-theme="dark"] .accordion-item-custom.bg-primary {
        background: var(--orange) !important;
        color: #fff !important;
    }

html[data-theme="dark"] .bg-light {
    background: #2a1a0b !important;
    color: #e7d7c4 !important;
}


/* ============================================
   DARK FORM ELEMENTS
   ============================================ */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: #221407 !important;
    color: #e7d7c4 !important;
    border-color: #3c2812 !important;
}

    html[data-theme="dark"] input::placeholder {
        color: #9c8875 !important;
    }


/* ============================================
   DARK TABLES
   ============================================ */

html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: #e7d7c4 !important;
    --bs-table-bg: #221407;
}

    html[data-theme="dark"] .table thead th {
        background: #2a1a0b !important;
        color: #e7d7c4 !important;
        border-bottom-color: var(--orange) !important;
    }

    html[data-theme="dark"] .table tbody tr:hover {
        background: #2e1c0d !important;
    }


/* ============================================
   DARK LINKS
   ============================================ */

html[data-theme="dark"] a {
    color: #8f8dff;
}

    html[data-theme="dark"] a:hover {
        color: var(--orange);
    }


/* ============================================
   DARK BUTTONS
   ============================================ */

html[data-theme="dark"] .btn-outline-secondary {
    color: #e7d7c4 !important;
    border-color: #4a3520 !important;
    background: #221407 !important;
}

html[data-theme="dark"] .btn-landing {
    background: #221407 !important;
    border-color: #e7d7c4 !important;
    color: #e7d7c4 !important;
}


/* ============================================
   DARK BORDERS
   ============================================ */

html[data-theme="dark"] .breadcrumb-custom,
html[data-theme="dark"] h4.text-primary {
    border-bottom-color: #3c2812 !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #221407;
}

html[data-theme="dark"] .testimonial-dot {
    background: #3c2812 !important;
}

html[data-theme="dark"] .testimonial-text {
    color: #e7d7c4 !important;
}


/* ============================================
   DARK QUIZ
   ============================================ */

html[data-theme="dark"] .option-item.green {
    background: #28331c !important;
    border-color: var(--olive) !important;
}


/* ============================================
   DARK CUSTOM BUTTONS
   ============================================ */

html[data-theme="dark"] .btn-custom,
html[data-theme="dark"] .btn-download,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-outline-square,
html[data-theme="dark"] .btn-print,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .btn-summit,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-white-sq,
html[data-theme="dark"] .option-btn,
html[data-theme="dark"] .accordion-btn,
html[data-theme="dark"] .btn-circle,
html[data-theme="dark"] .btn-gray-circle {
    color: #e7d7c4 !important;
}

html[data-theme="dark"] .btn-print {
    border-color: #4a3520 !important;
}


/* ============================================
   GLOBAL SUBMIT LOADING SPINNER
   ============================================ */

#form-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(28,16,3,.45);
    backdrop-filter: blur(2px);
}

    #form-loading-overlay.show {
        display: flex;
    }

    #form-loading-overlay .spinner-ring {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 6px solid rgba(255,255,255,.28);
        border-top-color: var(--orange);
        animation: form-spin .8s linear infinite;
    }

@keyframes form-spin {
    to {
        transform: rotate(360deg);
    }
}