/* Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Use Inter font */
body, .btn, .nav-link, .modal-title, .modal-body, .form-control, .list-group-item, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
}

/* Custom dark theme */
body {
    background-color: #121212;
    color: #e0e0e0;
}
.navbar {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #333;
}
.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* --- Card Styles --- */
.card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-link {
    text-decoration: none;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.card-icon {
    font-size: 2.5rem;
    color: #7c3aed; /* A nice violet color */
}

/* --- Nav Pills --- */
.nav-pills .nav-link {
    color: #adb5bd;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    background-color: #7c3aed;
    color: #fff;
    font-weight: 600;
}

/* --- Question Viewer --- */
/* Layout is now controlled by media queries */
.question-list-container, .batch-list-container {
    overflow-y: auto;
    flex-grow: 1;
}

.question-content {
    flex-grow: 1;
    /* overflow-y: auto; <-- REMOVED */
    background-color: #121212;
    display: flex; 
    flex-direction: column; 
    /* --- NEW: Prevents flex content from shrinking or overflowing improperly --- */
    min-height: 0;
    min-width: 0;
}

.list-group-item {
    background-color: transparent;
    border-color: #333;
    color: #e0e0e0;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #2a2a2a;
    color: #fff;
}
.list-group-item.active {
    background-color: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

/* --- Textbook Viewer --- */
.textbook-content {
    flex-grow: 1;
    /* overflow-y: auto; <-- Removed, will be added by media query */
    padding: 2rem;
    background-color: #121212;
}
/* Style the content that comes from the HTML files */
.textbook-content-inner h1, .textbook-content-inner h2, .textbook-content-inner h3, .textbook-content-inner h4, .textbook-content-inner h5 {
    color: #fff;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
    margin-top: 1.5rem;
}
.textbook-content-inner table {
    background-color: #2a2a2a;
    color: #e0e0e0;
    width: 100%;
    border-collapse: collapse;
}
.textbook-content-inner th, .textbook-content-inner td {
    border: 1px solid #444;
    padding: 8px;
}
.textbook-content-inner th {
    background-color: #333;
}
.textbook-content-inner img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.textbook-content-inner a {
    color: #a37eff;
}

    /* --- Responsive Layout (Desktop First) --- */
@media (min-width: 992px) {
    .question-viewer-layout,
    .textbook-viewer-layout {
        display: flex;
        height: calc(100vh - 58px); /* Full height minus navbar */
    }

    /* --- .question-sidebar rule REMOVED --- */

    .textbook-sidebar {
        width: 400px;
        background-color: #1e1e1e;
        border-right: 1px solid #333;
        flex-shrink: 0;
        overflow-y: auto;
        padding: 1.5rem;
    }

    /* --- UPDATED: Removed .question-content from this selector --- */
    .textbook-content {
        /* REMOVED: overflow-y: auto; */
        flex-grow: 1; /* <-- ADDED */
        min-width: 0; /* <-- ADDED */
    }
}

/* --- Mobile-specific styles --- */
@media (max-width: 991.98px) {
    .question-content {
        /* padding: 1rem; <-- REMOVED PADDING */
    }
    .textbook-content {
        padding: 1rem;
    }
    /* Remove padding from the inner textbook area on mobile */
    .textbook-content .textbook-content-inner {
        padding: 0;
    }
    /* Fix quiz nav buttons on mobile */
    .quiz-navigation {
        flex-direction: column;
        gap: 0.5rem;
    }
    .quiz-navigation .btn {
        width: 100%;
    }
    .quiz-nav-text-container {
        order: -1; /* Put text on top */
        text-align: center;
        margin-bottom: 0.5rem;
    }
    /* --- NEW: Re-order flag button on mobile --- */
    .quiz-navigation #quiz-flag-btn {
        order: -2; /* Put flag button above text */
    }
}


/* --- Question Rendering --- */

/* --- NEW: Make question area scrollable and grow --- */
#quiz-question-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem; /* <-- Added desktop padding here */
}

/* --- NEW: Adjust padding for mobile --- */
@media (max-width: 991.98px) {
    #quiz-question-area {
        padding: 1rem; /* <-- Added mobile padding here */
    }
}

.question-option {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.question-option:hover {
    background-color: #3a3a3a;
}
.question-option.selected {
    background-color: #3b3b3b;
    border-color: #7c3aed;
}

.question-option.correct {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: #198754;
    color: #fff;
}
.question-option.incorrect {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #fff;
}
.question-explanation {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.question-explanation img, .modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Modal & Offcanvas dark theme */
.modal-content, .offcanvas {
    background-color: #1e1e1e;
    border: 1px solid #333;
    color: #e0e0e0;
}
.modal-header, .offcanvas-header {
    border-bottom: 1px solid #333;
}
.modal-footer {
    border-top: 1px solid #333;
}
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Specificity for textbook links in sidebar */
.textbook-sidebar a, .textbook-sidebar-mobile a {
    color: #a37eff;
    text-decoration: none;
    display: block; /* Make mobile links easier to tap */
    padding: 4px 0;
}
.textbook-sidebar a:hover, .textbook-sidebar-mobile a:hover {
    text-decoration: underline;
}
/* Add some padding to nested lists in mobile index */
.textbook-sidebar-mobile ul {
    padding-left: 1rem;
}

/* Question ranking inputs */
.rank-input {
    width: 50px;
    margin-right: 10px;
    background-color: #333;
    border: 1px solid #555;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* Quiz UI Additions */
.quiz-start-card, .progress-card {
    min-height: 400px;
}
.progress-by-category .list-group-item {
    padding-left: 0;
    padding-right: 0;
}
.progress-by-category .progress {
    height: 8px;
    background-color: #333;
}
.progress-by-category .progress-bar {
    background-color: #7c3aed;
}

/* --- NEW: Flag button styles --- */
.quiz-flag-btn {
    /* Default state is just outline-secondary */
    transition: color 0.15s ease-in-out;
}
.quiz-flag-btn.active, .quiz-flag-btn:hover {
    color: #ffc107; /* text-warning */
}

/* --- NEW: Make flag in list right-aligned --- */
.question-link .bi-flag-fill {
    margin-left: auto; /* Pushes flag to the far right */
}


/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}