/* ===== Base ===== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
}

#main-content {
    flex: 1;
}

/* ===== Navbar ===== */
.qm-navbar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.qm-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: #4361ee;
    text-decoration: none;
}

.qm-brand:hover {
    color: #3a0ca3;
}

.qm-navbar .nav-link {
    color: #495057;
    font-weight: 500;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.qm-navbar .nav-link:hover,
.qm-navbar .nav-link:focus {
    color: #4361ee;
}

/* ===== Hero ===== */
.qm-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #fafafa 100%);
    border-bottom: 1px solid #e9ecef;
}

.qm-hero__headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a2e;
}

.qm-hero__sub {
    font-size: 1.1rem;
    max-width: 44ch;
}

.qm-hero__preview {
    max-height: 420px;
    object-fit: cover;
    border: 1px solid #dee2e6;
}

.qm-cta {
    background: #4361ee;
    border-color: #4361ee;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
}

.qm-cta:hover,
.qm-cta:focus {
    background: #3a0ca3;
    border-color: #3a0ca3;
}

/* ===== How it works ===== */
.qm-accent {
    color: #4361ee;
}

.qm-step-icon {
    font-size: 2.5rem;
    color: #4361ee;
    display: block;
}

/* ===== Features tease ===== */
.qm-feature-icon {
    font-size: 1.75rem;
    color: #4361ee;
    line-height: 1;
}

/* ===== Bottom CTA ===== */
.qm-bottom-cta {
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    color: #fff;
}

.qm-bottom-cta h2,
.qm-bottom-cta .text-muted {
    color: rgba(255,255,255,0.9) !important;
}

.qm-bottom-cta .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #4361ee;
    font-weight: 600;
}

.qm-bottom-cta .btn-primary:hover {
    background: #f0f4ff;
    border-color: #f0f4ff;
}

/* ===== Footer ===== */
.qm-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
}

.qm-footer-link {
    color: #6c757d;
    text-decoration: none;
}

.qm-footer-link:hover {
    color: #4361ee;
    text-decoration: underline;
}

/* ===== Focus / Accessibility ===== */
:focus-visible {
    outline: 3px solid #4361ee;
    outline-offset: 2px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 767.98px) {
    .qm-hero__headline {
        font-size: 1.9rem;
    }

    .qm-hero__preview {
        max-height: 260px;
    }
}

/* ===== Quill rich-text editor (question body) ===== */
.qm-quill-editor .ql-toolbar {
    border-radius: 0.375rem 0.375rem 0 0;
    border-color: #dee2e6;
    background: #f8f9fa;
}

.qm-quill-editor .ql-container {
    border-radius: 0 0 0.375rem 0.375rem;
    border-color: #dee2e6;
    min-height: 90px;
    font-size: 1rem;
    font-family: inherit;
}

.qm-quill-editor .ql-editor {
    min-height: 80px;
}

/* Fallback textarea shown when Quill fails to load or is unavailable */
.qm-quill-fallback {
    min-height: 90px;
}

.qm-quill-fallback.d-none {
    display: none !important;
}

/* ===== Question dialog: constrain height for the scrollable lower section =====
   The question-type selector (with its Choices.js dropdown) lives outside this
   wrapper so its dropdown is never clipped by overflow: an overflow-auto
   ancestor clips out-of-flow descendants regardless of their positioning
   context, so the dropdown must not be a DOM descendant of the scroll area.
   padding-right keeps the scrollbar from obscuring right-edge controls
   (e.g. the CaseSensitive checkbox). */
.qm-question-dialog-body {
    max-height: calc(100dvh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    /* This wrapper carries Bootstrap's .row class for gutter spacing, but it must
       NOT be a flex row: as a flex container its col-12 children were stretched to
       the flex-line height, and the Quill editor's content (label + toolbar +
       container) then overflowed its own column and rendered on top of the
       following section (Fill-in-the-Blanks / Free-text AI), making those inputs
       unreachable. All children here are full-width col-12 that simply stack, so a
       normal block scroll container lays them out correctly with no overlap.
       The col gutter margins still apply because they are class-based. */
    display: block;
}

/* Prevent option-row text inputs from blowing out their flex container */
#qOptionsList .input-group {
    flex-wrap: nowrap;
}

#qOptionsList .input-group .form-control {
    min-width: 0;
}

/* ===== Choices.js question-type selector ===== */
.choices__list--dropdown {
    z-index: 1100 !important;
}

.choices__inner {
    border-color: #dee2e6;
    border-radius: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    background-color: #fff;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0.375rem;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 1rem;
}

/* ===== Quiz editor drag-and-drop ===== */
.page-items {
    min-height: 3rem;
}

.page-items.can-drop {
    background-color: rgba(13, 110, 253, 0.03);
    border-radius: 4px;
    outline: 1px dashed rgba(13, 110, 253, 0.25);
}

.qm-drop-target {
    outline: 2px dashed #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
    min-height: 2.5rem;
}

.qm-drop-over {
    outline: 2px solid #0d6efd;
    background-color: rgba(13, 110, 253, 0.08) !important;
}

/* CodeMirror editor sizing (Code questions in Take/Embed/Edit/EditQuestion) */
.qm-code-editor {
    font-size: 0.9rem;
}
.qm-code-editor .CodeMirror {
    min-height: 220px;
    height: auto;
    border-radius: 0.375rem;
}
.qm-code-editor .CodeMirror-scroll {
    min-height: 220px;
}

/* CodeMirror read-only viewer sizing (submitted code answers, SubmissionResult.cshtml) */
.qm-code-result-editor {
    font-size: 0.9rem;
}
.qm-code-result-editor .CodeMirror {
    min-height: 120px;
    height: auto;
    border-radius: 0.375rem;
}
.qm-code-result-editor .CodeMirror-scroll {
    min-height: 120px;
}
.qm-code-result-editor .CodeMirror-cursors {
    display: none;
}

/* Quiz-taking page (Take.cshtml) — moved off inline style="" attributes, which CSP
   style-src silently drops in production (no 'unsafe-inline' outside
   Development/Testing, see Program.cs). */
.qm-take-container {
    max-width: 780px;
}
.qm-thankyou-container {
    max-width: 600px;
}
.qm-question-image {
    max-height: 320px;
}
.qm-picture-choice-label {
    cursor: pointer;
}
.qm-picture-option-image {
    max-height: 120px;
}
.qm-blank-input {
    width: 130px;
    vertical-align: middle;
}
/* Caps the width of the per-blank answer list shown under a FillInTheBlanks question on the
   submission result page (issue #508). Kept in CSS rather than an inline style="" attribute,
   which the production CSP style-src silently drops. */
.qm-fitb-answers {
    max-width: 400px;
}
/* Text alignment authored via the Quill toolbar (issue #506). Quill's own snow.css defines these
   inside the editor, but taker/result pages render the sanitized body without that stylesheet, so
   the alignment classes are declared here too. Left is the default (no class emitted). */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }
/* Applied to answer fields on a page whose per-page timer has expired — locks
   further interaction without the disabled attribute, which would exclude the
   field (and its already-entered answer) from the eventual form submission. */
.qm-locked {
    pointer-events: none;
    opacity: .65;
}
/* Issue #470: "Allow print" quiz setting, applied to <body> by quiz-take.js when
   the quiz owner has disabled printing. The browser's print dialog itself can't be
   cancelled from JS, so this hides the quiz content from the print output instead. */
@media print {
    body.qm-print-disabled .qm-take-container {
        display: none !important;
    }
    body.qm-print-disabled::after {
        content: "Printing is disabled for this quiz.";
        display: block;
        text-align: center;
        margin-top: 2rem;
        font-size: 1.2rem;
    }
}

/* Export-pending page (ExportPending.cshtml) — same reason as above. */
.qm-export-pending-card {
    max-width: 480px;
}

/* Quiz-import preview table body-text column (quiz-import.js). */
.qm-import-body-cell {
    max-width: 300px;
}

/* Generic drag-handle affordance (Dashboard quiz rows, Analyze column-config list). */
.qm-draggable {
    cursor: grab;
}

/* Generic pre-wrapped/pre-line text blocks for server-rendered long-form text
   (free-text answers, AI rationale, error messages). */
.qm-pre-line {
    white-space: pre-line;
}
.qm-pre-wrap {
    white-space: pre-wrap;
}

/* Dashboard/Index.cshtml */
.qm-search {
    max-width: 220px;
}
.qm-admin-search {
    max-width: 220px;
}
.qm-owner-select {
    max-width: 200px;
}
.qm-sort-select {
    max-width: 170px;
}

/* FlexiQuizConnection/Index.cshtml */
.qm-flexiquiz-connection-container {
    max-width: 680px;
}

/* FlexiQuizImport/BatchStatus.cshtml */
.qm-batch-status-container {
    max-width: 800px;
}
/* Bootstrap-look styling for the native <progress> element used instead of a
   div-based progress bar — see the comment in BatchStatus.cshtml for why. */
.qm-batch-status-progress {
    width: 100%;
    height: 1.2rem;
    margin-bottom: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: .375rem;
    overflow: hidden;
}
.qm-batch-status-progress::-webkit-progress-bar {
    background-color: #e9ecef;
}
.qm-batch-status-progress::-webkit-progress-value {
    background-color: #0d6efd;
    transition: width .3s ease;
}
.qm-batch-status-progress::-moz-progress-bar {
    background-color: #0d6efd;
}
.qm-w-8rem {
    width: 8rem;
}

/* FlexiQuizImport/EditorPreview.cshtml */
.qm-editor-preview-container {
    max-width: 960px;
}
.qm-w-2rem {
    width: 2rem;
}
.qm-w-5rem {
    width: 5rem;
}
.qm-w-4rem {
    width: 4rem;
}
.qm-editor-preview-question-cell {
    max-width: 350px;
}

/* FlexiQuizImport/Index.cshtml */
.qm-flexiquiz-import-container {
    max-width: 960px;
}
.qm-w-7rem {
    width: 7rem;
}
.qm-w-10rem {
    width: 10rem;
}
.qm-w-6rem {
    width: 6rem;
}

/* Pricing/Index.cshtml */
.qm-pricing-featured-card {
    border-width: 2px !important;
}

/* Quiz/Edit.cshtml */
.qm-icon-sm {
    font-size: .85rem;
}
.qm-embed-snippet-textarea {
    border: none;
    border-radius: 8px;
}
.qm-qr-code-image {
    width: 180px;
    height: 180px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}
.qm-diagram-ref-preview-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
/* Editor thumbnail for an author-inserted question image (issue #506). */
.qm-question-image-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
}
.qm-rich-text-min-height {
    min-height: 140px;
}
.qm-tm-image-preview {
    max-height: 180px;
}

/* Quiz/EditQuestion.cshtml */
.qm-edit-question-container {
    max-width: 820px;
}

/* Quiz/Preview.cshtml */
.qm-preview-text-media-image {
    max-height: 120px;
}
.qm-preview-picture-choice-image {
    max-height: 80px;
}

/* Quiz/SubmissionResult.cshtml */
.qm-submission-result-container {
    max-width: 780px;
}
.qm-submission-result-icon-circle {
    width: 72px;
    height: 72px;
}

/* Reports/Grade.cshtml */
.qm-grade-container {
    max-width: 900px;
}

/* highlight.js code blocks (Take/Embed/SubmissionResult via _HighlightJsAssets.cshtml).
   Unscoped: .hljs only ever marks a highlight.js-processed block, so no container
   qualifier is needed to avoid matching unrelated code elsewhere. */
pre code.hljs {
    border-radius: 0.375rem;
    padding: 1rem;
}

/* Picture Choice cards */
.qm-pic-card {
    transition: border-color 0.15s;
    cursor: pointer;
}
.qm-pic-card:hover {
    border-color: #0d6efd;
}
input[type="radio"]:checked + .qm-pic-card,
input[type="radio"]:checked ~ .qm-pic-card {
    border-color: #0d6efd;
    border-width: 2px;
}
/* The radio input itself is visually hidden, so give the card a visible focus
   ring when it's reached via keyboard (Tab) rather than only on click/hover. */
input[type="radio"]:focus-visible + .qm-pic-card,
input[type="radio"]:focus-visible ~ .qm-pic-card {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Admin/Quizzes.cshtml — CSP style-src has no 'unsafe-inline' outside Development/Testing
   (Program.cs), so these can't be inline style="..." attributes. */
.qm-quiz-title-cell {
    max-width: 280px;
}
.qm-select-auto-width {
    width: auto;
}

/* ── Fullscreen image lightbox (Text or media images in Take/Preview) ───────── */
.qm-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.92);
    padding: 1rem;
    cursor: zoom-out;
}

.qm-image-lightbox img {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
    border-radius: 0.375rem;
    cursor: default;
}

.qm-image-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.qm-image-lightbox-close:hover,
.qm-image-lightbox-close:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.qm-image-lightbox-close:focus:not(:focus-visible) {
    outline: none;
}

/* Full-screen centered spinner shown while Next/Submit is processing a slow
   per-page answer-reveal check (issue #481). Lighter/dimmer than the image
   lightbox above since this sits over live quiz content, not a photo viewer. */
.qm-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1065;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.75);
}

.qm-loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Quiz paywall purchase page (issue #480) — narrower than the default container so the
   price/description card doesn't stretch full-width on desktop. */
.qm-paywall-container {
    max-width: 560px;
}

.qm-image-lightbox-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .qm-image-lightbox {
        padding: 0.5rem;
    }

    .qm-image-lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

.qm-text-media-image {
    cursor: zoom-in;
}

/* Analytics page rich text (issue #538). Question bodies and submitted answers are authored
   rich text / Markdown, so they are rendered rather than stripped. These rules keep that
   rendered markup from breaking the analytics layout:
   - the trailing margin of the last block would otherwise add dead space inside every list row;
   - a long unbroken token (an uploaded file URL, a pipe-joined list of option ids) would
     otherwise stretch its table row past the viewport instead of wrapping;
   - a Markdown table inside a submission row scrolls within its own cell rather than widening
     the surrounding table. */
.qm-analyze-rich-text > :last-child {
    margin-bottom: 0;
}

.qm-analyze-rich-text {
    overflow-wrap: anywhere;
}

.qm-analyze-rich-text .qm-md-table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/* A submitted answer is plain text (the taker types into a <textarea>, never a rich-text
   editor) and is rendered HTML-encoded, so the taker's own line breaks only survive with
   pre-wrap. Same wrapping guarantee as above so a long pasted URL can't widen the table. */
.qm-analyze-answer {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}