body {
    font-family: 'Public Sans', sans-serif;
}

/* Inline preformatted span segments for Fill in the Blank */
.fib-pre {
    white-space: pre; /* preserve whitespace and newlines */
    font-family: SFMono-Regular,Consolas,Monaco,Menlo,monospace;
    font-size: 1rem !important; /* match surrounding text size (override legacy inline 13px) */
    line-height: 1.4; /* improve readability for code-like segments */
    display: inline; /* remain inline so surrounding punctuation flows */
}

.navbar-custom {
    background-color: #082464 !important;
}

/* Admin sidebar tweaks to reduce squashed nav items */
.sidebar .nav-link {
    padding: 0.6rem 0.75rem;
}
.sidebar .nav-item > .btn {
    margin-left: 0.25rem;
}


/* Content styles for CKEditor-rendered HTML */
.ck-content p { margin: 0.5rem 0; }
.ck-content table { margin: 1rem 0; }
.ck-content table + p { margin-top: 1rem; }
.ck-content hr { margin: 1rem 0; }

/* Make preformatted/code blocks use a transparent background everywhere in the app
   so Preformatted blocks don't show the default grey panel in CKEditor or run view. */
.ck-content pre,
.ck-editor__editable pre,
.ck-content code,
pre,
pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Ensure pre blocks still use a monospace font but otherwise inherit surrounding text styles */
.ck-content pre,
pre {
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap; /* keep wrapping behaviour consistent with other content */
}

/* Student editor UI and expansion styles live in styles.student.css */

/* Editor UI and layout rules have been moved to admin/student specific stylesheets.
    See styles.admin.css and styles.student.css for editor-related styling. */

/* Base styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

/* Prevent scrolling only on exam question page */
body:has(#sql-question-page) {
    overflow: hidden;
}
/* Allow scroll when single-column layout (no stimulus) */
body:has(#sql-question-page[data-layout='single']) {
    overflow: auto;
}

/* Main container layout */
body:has(#sql-question-page) main.container {
    height: calc(100vh - 56px); /* Viewport minus navbar */
    overflow: hidden;
}
body:has(#sql-question-page[data-layout='single']) main.container {
    height: auto;
    min-height: calc(100vh - 56px);
    overflow: visible;
}

/* Student view layout tweaks */
#sql-question-page {
    --question-number-width: 4rem;
    --question-text-indent: 0.75rem;
    --left-column-width: 33.33%;  /* Default value */
    --right-column-width: 66.67%; /* Default value */
    height: 100%;
    padding: 0rem 0.8rem 1rem 0.8rem;
}

.content-wrapper {
    height: calc(100vh - 56px - 1.5rem); /* Adjusted for new top padding */
    background: white;
}
body:has(#sql-question-page[data-layout='single']) .content-wrapper {
    height: auto;
    min-height: calc(100vh - 56px - 1.5rem);
}

#sql-question-page .row {
    height: 100%;
}

.column-container {
    height: 100%;
    padding: 0.75rem;
    background: white;
}

#sql-question-page .col-stimulus {
    height: 100%;
    width: var(--left-column-width) !important;
    flex-basis: var(--left-column-width) !important;
    max-width: var(--left-column-width) !important;
}

#sql-question-page .col-answer {
    height: 100%;
    width: var(--right-column-width) !important;
    flex-basis: var(--right-column-width) !important;
    max-width: var(--right-column-width) !important;
}

#sql-question-page .overflow-auto {
    height: 100%;
    overflow-y: auto;
}

/* Ensure stimulus (student-facing) content uses a solid black text color
   rather than the site's muted/dark-gray defaults. We target the stimulus
   column and common CKEditor-rendered markup so authors' styling still
   applies but the base text color is clearly black for readability. */
#sql-question-page .col-stimulus,
#sql-question-page .col-stimulus .ck-content {
    color: #000 !important;
}

/* Question formatting */
.question-display {
    font-size: 1rem;
    line-height: 1.5;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    margin-left: 0rem;
}

/* Greater gap between parts in the student run view */
.col-answer .question-display + .question-display,
.col-answer .question-display + .mb-3,
.col-answer .mb-3 {
    margin-top: 1.25rem; /* increase vertical gap between parts */
}

/* Multi-part collapse/expand toggle for student view */
.part-container {
    border: 1px solid rgba(0,0,0,0.06);
    padding: 0.6rem;
    border-radius: 6px;
    background: #fafafa;
}

.part-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* top align so toggle sits near first line of text */
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Place the inline toggle directly after the question-number so it aligns with the first line */
.question-display .part-toggle {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    background: none;
    border: none;
    color: #6c757d;
    padding: 0;
    vertical-align: baseline;
}

.question-display .part-toggle .chev {
    margin-right: 0.25rem;
}

/* When the toggle is placed in the header as a right-side control, nudge it down
   so it sits a bit lower than the top of the question text. Adjust if needed. */
.part-header > .part-toggle {
    margin-top: 1.1rem;
}

/* Uses real Bootstrap button styling (matches other exam buttons like Previous
   question) with the padding shrunk back down to the original compact toggle size. */
.part-toggle {
    --bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 76px;
}
.part-toggle .chev {
    transition: transform 0.2s ease;
}
.part-toggle.collapsed .chev {
    transform: rotate(-90deg);
}

.part-body.collapsed {
    display: none;
}

.question-number {
    font-weight: 700 !important;
    text-align: left;
    min-width: 3rem;
}

/* Specific question number format classes */
.question-number.single-digit {
    min-width: 2rem;
}

.question-number.double-digit {
    min-width: 2.5rem;
}

.question-number.with-part {
    min-width: 3.5rem;
}

.question-text {
    width: 100%;
}

.question-text > p:last-child {
    margin-bottom: 0;
}


/* Navbar always has same side padding */
nav.navbar .container-fluid {
    padding-left: 1.5rem;  
    padding-right: 1.5rem;
}

/* Only change main.container when #sql-question-page exists */
body:has(#sql-question-page) main.container {
    max-width: 100% !important;
    padding: 0;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Fallback fullscreen mode for code runner when Fullscreen API can't be used */
.pseudo-fullscreen {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 200000 !important;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.pseudo-fullscreen .code-pane,
.pseudo-fullscreen .output-pane,
.pseudo-fullscreen .code-editor {
    height: 100% !important;
}

/* Ensure SQL editor pseudo-fullscreen expands editor and result panes */
.pseudo-fullscreen [id^="editor-"] { height: calc(100% - 56px) !important; }
.pseudo-fullscreen [id^="result-"] { height: 56px; max-height: calc(100% - 56px) !important; overflow:auto; }

/* Top bar shown inside fullscreen code-runner with controls */
.fullscreen-topbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 200001;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #ffffff; /* solid white for fullscreen topbar */
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
}

.fullscreen-topbar .btn {
    height: 30px;
    line-height: 1;
}

/* When the code-runner is in pseudo-fullscreen, ensure the content avoids topbar overlap */