:root {

        --flag-gray: #b4b4b4;
        --flag-black: #323232;
        --flag-gold: #ffcc00;

        --bit-more-lighter-flag-black: #505050;
        --bit-lighter-flag-black: #3c3c3c;
        --bit-darker-flag-black: #282828;

        /*RGB: 200*/
        --bit-lighter-flag-white: #c8c8c8;
        --bit-darker-flag-white: #a0a0a0;
        --bit-more-darker-flag-white: #8c8c8c;



        --almost-white: #f5f5f5;
        --close-white: #ebebeb;
        --dirty-white: #e1e1e1;

        --bit-more-dirty-white: #cdcdcd;

        --almost-black: #0a0a0a;
        --close-black: #141414;
        --dirty-black: #1e1e1e;

        /* Difficulty themes colors */
        --level-1: #70FF73;
        --level-2: #bae6fd;
        --level-2: #93C5FD;
        --level-3: var(--bit-lighter-flag-white);
        --level-4: #FD6363;
        --level-5: var(--flag-gold);


        /* Enter Key Global Color */
        --enter-key-color: var(--flag-gold);

        /* Toggle Key Global Color */
        --toggle-left-bg-color: var(--flag-gold);
        --toggle-right-bg-color: var(--dirty-white); 
}

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        outline: none;
}

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


/* Math Fonts */
/* Used for Variables*/
@font-face {
        font-family: 'Computer Modern Serif Italic';
        src: url(/index/font/Computer_Modern/cmu.serif-italic.ttf);
}

/* Used for Function Names, Numbers, punctutation */
@font-face {
        font-family: 'Computer Modern Serif Roman';
        src: url(/index/font/Computer_Modern/cmu.serif-roman.ttf);
}


*,
*::before,
*::after {
        font-family: 'Excalifont', cursive, sans-serif;
}

 html,
body {
        /* Prevent the accidental selecting of text */
        -webkit-user-select: none;
        /* Safari */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* IE / Edge */
        user-select: none;
        /* Standard */
}

body {
        background-color: var(--body-bg-color);
        color: var(--body-text-color);
        -webkit-tap-highlight-color: transparent;

        /* TODO: Clarify where to put it */
        overflow: hidden;
}

body.light-mode {
        /* These colors are defined for Light Mode */
        --navbar-bg-color: var(--almost-white);
        --navbar-border-color: var(--dirty-white);
        --navbar-profile-hover-color: var(--close-white);

        --navbar-sidebar-text-color: var(--almost-black);

        --sidepane-bg-color: var(--close-white);
        --sidepane-border-color: var(--dirty-black);
        --sidepane-hover-color: var(--dirty-white);

        --body-bg-color: var(--close-white);
        --body-text-color: var(--flag-black);
        --body-hover-color: var(--dirty-white);

        --body-highlight-to-neutral: var(--bit-darker-flag-white);

        /* Difficulty Selector */
        --slider-bg-gradient-start: var(--bit-more-darker-flag-white);
        --slider-bg-gradient-end: var(--bit-more-lighter-flag-black);
        --level-selector-spread-radius: 0.4rem;


        /* Sum Game Calculator */
        /* Number Input Buttons: 0-9*/
        --num-input-color: var(--bit-more-dirty-white);
        --num-tap-color: var(--dirty-white);
        --num-text-color: var(--dirty-black);

        /* Function Input Buttons: AC, Backspace, Decimal, 00*/
        --func-input-color: var(--flag-black);
        --func-text-color: var(--dirty-white);
        --func-tap-color: var(--bit-more-lighter-flag-black);
        /* \Sum Game Calculator */

        /* Question Card Background Color */
        --question-card-bg-color: var(--bit-lighter-flag-black);
        --question-card-shadow-color: var(--flag-gray);
        --question-card-text-color: var(--dirty-white);

        /* Highlighting words/symbols in Question/Solution Text */
        --text-highlight-color: var(--flag-gold);

        transition: 1.8s;

}

body.dark-mode {
        --navbar-bg-color: var(--bit-darker-flag-black);
        --navbar-border-color: var(--dirty-white);
        --navbar-profile-hover-color: var(--flag-black);
        --profile-dropdown-border-color: var(--dirty-white);
        --navbar-sidebar-text-color: var(--dirty-white);

        --sidepane-bg-color: var(--bit-darker-flag-black);
        --sidepane-border-color: var(--dirty-white);
        --sidepane-hover-color: var(--flag-black);


        --body-bg-color: var(--flag-black);
        --body-text-color: var(--dirty-white);
        --body-hover-color: var(--bit-darker-flag-black);
        --body-highlight-to-neutral: var(--bit-lighter-flag-black);

        /* Difficulty Selector */
        --slider-bg-gradient-start: var(--bit-lighter-flag-black);
        --slider-bg-gradient-end: var(--body-bg-color);
        --level-selector-spread-radius: 0.1rem;

        /* Sum Game Calc Input */
        --num-input-color: var(--dirty-black);
        --num-tap-color: var(--bit-darker-flag-black);
        --num-text-color: var(--body-text-color);

        --func-input-color: var(--bit-lighter-flag-black);
        --func-tap-color: var(--bit-more-lighter-flag-black);
        --func-text-color: var(--dirty-white);


        /* Question Card Colors */
        --question-card-bg-color: var(--body-bg-color);
        --question-card-shadow-color: var(--flag-gold);
        --question-card-text-color: var(--body-text-color);

        /* Highlighting words/symbols in Question/Solution Text */
        --text-highlight-color: var(--flag-gold);

        transition: 1.2s;
}

.text-highlight {
        color: var(--text-highlight-color);
}

/* Math Section for the Whole Website */
.math-var {
        /* font-size: 1.2rem; */
        font-family: 'Computer Modern Serif Italic';
}

.math-punc {
        font-size: 0.9rem;
        font-family: 'Computer Modern Serif Roman';
}

.math-eq-line {
        padding: 2px 0px 2px 0px;
        /* white-space: nowrap; */
        font-size: 1rem;
}
.qstn-mcq-no-wrap{
        white-space: nowrap;
        padding: 1px 0px 1px 0px;
}

.gap-left {
        margin-left: 3rem;
}


.btn {
        font-family: inherit;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: filter 0.2s ease, transform 0.1s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.5rem;
}

.btn:active {
        transform: scale(0.98);
}


/* --- Navbar --- */
.navbar {
        height: 60px;
        background-color: var(--navbar-bg-color);
        border-bottom: 1px solid var(--navbar-border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
}

.hamburger-btn {
        color: var(--navbar-sidebar-text-color);
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
}


.nav-title {
        margin-left: 1rem;
        font-weight: 600;
        font-size: 1.25rem;
}

.profile-container {
        position: relative;
}

.profile-btn {
        background: var(--navbar-bg-color);
        color: var(--navbar-sidebar-text-color);
        border: 0px solid var(--navbar-border-color);
        border-radius: 6px;
        padding: 0.4rem 0.8rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.3rem;

}

.profile-btn:hover {
        background-color: var(--navbar-profile-hover-color);
}

.dropdown-menu {
        background-color: var(--navbar-bg-color);
        border: 1px solid var(--navbar-border-color);

        position: absolute;
        top: calc(100% + 16px);
        /* Positioned directly under button with small gap */
        right: 0;
        /* Align to right edge of button */
        width: 180px;
        border-radius: 0px 0px 8px 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        list-style: none;
        padding: 0.5rem 0;
        display: none;
        z-index: 25;
}

.dropdown-menu.active {
        display: block;
}

.dropdown-menu li a {
        text-decoration: none;
        color: var(--navbar-sidebar-text-color);
        display: block;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
}

.dropdown-menu li button {
        background: var(--navbar-bg-color);
        color: var(--navbar-sidebar-text-color);
        width: 100%;
        border: 0px;
        padding: 0.5rem 1rem;
        /* Matched to li a */
        font-family: inherit;
        /* Inherits body font-family */
        font-size: 0.9rem;
        /* Matched to li a */
        font-weight: normal;
        /* Removes default button bolding */
        /* Matched text color */
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* Keeps icon + text left-aligned */
        gap: 0.5rem;
        text-align: left;
}

.dropdown-menu li button:hover,
.dropdown-menu li a:hover {
        background-color: var(--navbar-profile-hover-color)
}


/* --- Sidepane Drawer --- */
.sidepane {
        position: fixed;
        top: 0;
        left: -280px;
        /* Initially hidden off-screen */
        width: 280px;
        height: 100vh;
        background-color: var(--sidepane-bg-color);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
        transition: left 0.3s ease-in-out;
        z-index: 30;
        padding: 1.5rem 1rem;
}

.sidepane.open {
        left: 0;
        /* Slides into view */
}

.sidepane-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--sidepane-border-color);
        color: var(--navbar-sidebar-text-color);
}

.close-btn {
        background: none;
        border: none;
        font-size: 2rem;
        margin-left: 1rem;
        cursor: pointer;
        color: var(--navbar-sidebar-text-color);
}

.sidepane-menu {
        list-style: none;
}

.sidepane-menu li {
        margin-bottom: 0.75rem;
}

.sidepane-menu a {
        text-decoration: none;
        color: var(--navbar-sidebar-text-color);
        display: block;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        transition: 0.2s ease-in;

        -webkit-tap-highlight-color: transparent;
}

.sidepane-menu a:hover {
        background-color: var(--sidepane-hover-color);
        transition: 0s;

        -webkit-user-select: none;
        user-select: none;

        /* Prevents iOS callout popup (copy, share, preview) */
        -webkit-touch-callout: none;
}

/* --- Backdrop Overlay --- */
.overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
        z-index: 20;
}

.overlay.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease-out, visibility 0s ease-out;
}

/* --- Main Content Body --- */
.main-body {
        /* background-color: blueviolet; */

        margin: 0 auto;
        /* minimal padding at bottom of calculator */
        padding: 0.5rem 0.25rem 0.25rem 0.25rem;
        max-width: 1200px;
        height: calc(100dvh - 60px);

        /* Creates a flex, and pushes the calculator part to the bottom of screen */
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */


}

/* AI CSS To be reviewed */

/* --- Login Card & Form --- */
.main-body {
        align-items: center;
        justify-content: center;
}

.login-card {
        width: 100%;
        max-width: 420px;
        padding: 2.25rem 2rem;
        background-color: var(--question-card-bg-color);
        border: 1px solid var(--navbar-border-color);
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        transition: background-color 1.2s, border-color 1.2s;
}

.login-card h2 {
        font-size: 1.8rem;
        color: var(--dirty-white);
        margin-bottom: 0.25rem;
        text-align: center;
}

.login-subtitle {
        font-size: 0.95rem;
        color: var(--bit-more-darker-flag-white);
        margin-bottom: 1.75rem;
        text-align: center;
}

.login-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
}

.form-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
}

.form-group label {
        font-size: 0.95rem;
        color: var(--dirty-white);
}

.form-group input[type="email"],
.form-group input[type="password"] {
        width: 100%;
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
        background-color: var(--num-input-color);
        color: var(--body-text-color);
        border: 1px solid var(--navbar-border-color);
        border-radius: 6px;
        transition: border-color 0.2s, background-color 0.2s;
}

.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
        border-color: var(--flag-gold);
}

.form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.9rem;
        margin-top: -0.25rem;
}

.remember-me {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        cursor: pointer;
        color: var(--dirty-white);
}

.remember-me input[type="checkbox"] {
        accent-color: var(--flag-gold);
        width: 1rem;
        height: 1rem;
        cursor: pointer;
}

.forgot-link {
        color: var(--text-highlight-color);
        text-decoration: none;
        transition: opacity 0.2s;
}

.forgot-link:hover {
        opacity: 0.8;
        text-decoration: underline;
}

.submit-btn {
        width: 100%;
        padding: 0.8rem;
        margin-top: 0.5rem;
        font-size: 1.1rem;
        background-color: var(--flag-gold);
        color: var(--almost-black);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.1s ease, filter 0.2s ease;
}

.submit-btn:hover {
        filter: brightness(1.1);
}

.submit-btn:active {
        transform: scale(0.98);
}