/* Independent Exam Engine - Frontend Styles
   Matches the visual language of quiz-frontend.css (same palette/spacing)
   so the self-hosted exam doesn't look bolted-on next to the rest of the plugin. */

.pdf-mcq-own-exam {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.pdf-mcq-own-exam h2 {
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #e1e1e1;
    color: #333;
}

.pdf-mcq-own-field {
    margin-bottom: 20px;
}

.pdf-mcq-own-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.pdf-mcq-own-field input[type="text"],
.pdf-mcq-own-field input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.pdf-mcq-own-field input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.pdf-mcq-own-field input[readonly] {
    background: #f1f1f1;
    color: #666;
}

.pdf-mcq-own-error {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.pdf-mcq-own-share-form {
    max-width: 480px;
}

.pdf-mcq-own-question {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
}

.pdf-mcq-own-question h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
}

.pdf-mcq-own-question p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #444;
}

.pdf-mcq-own-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 12px;
    background: white;
    border: 2px solid #e1e1e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdf-mcq-own-option:hover {
    border-color: #0073aa;
    background: #f0f8ff;
}

.pdf-mcq-own-option input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
}

.pdf-mcq-own-option span {
    font-size: 15px;
    line-height: 1.4;
}

.pdf-mcq-own-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #0073aa;
    color: white;
    display: inline-block;
    width: 100%;
}

.pdf-mcq-own-submit:hover {
    background: #005a87;
}

.pdf-mcq-own-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Results panel (shown after submit) */
#pdf-mcq-own-exam-result {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    margin-top: 30px;
}

#pdf-mcq-own-exam-result h3 {
    margin-top: 0;
    font-size: 24px;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 6px;
    border: 2px solid #4CAF50;
    color: #4CAF50;
}

.pdf-mcq-own-question.correct,
#pdf-mcq-own-exam-result .pdf-mcq-own-question.correct {
    background: white;
    border-left: 4px solid #4CAF50;
}

.pdf-mcq-own-question.incorrect,
#pdf-mcq-own-exam-result .pdf-mcq-own-question.incorrect {
    background: white;
    border-left: 4px solid #f44336;
}

/* Report page */
.pdf-mcq-own-report {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.pdf-mcq-own-report h2 {
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #e1e1e1;
    color: #333;
}

.pdf-mcq-own-report-table {
    width: 100%;
    border-collapse: collapse;
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
}

.pdf-mcq-own-report-table th {
    text-align: left;
    padding: 12px;
    background: #0073aa;
    color: white;
    font-size: 14px;
}

.pdf-mcq-own-report-table td {
    padding: 12px;
    border-top: 1px solid #e1e1e1;
    background: white;
    font-size: 14px;
    color: #444;
}

.pdf-mcq-own-report-table tr:hover td {
    background: #f0f8ff;
}

/* Fallback styling for report elements that aren't defined elsewhere in
   the plugin's CSS (cst_score-badge, cst_date-badge, etc. exist as class
   names in the matrix/report markup but have no rules of their own -
   these keep the report readable if the active theme doesn't style them). */
.cst_score-badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 13px;
}

.cst_date-badge {
    display: inline-block;
    background: #eceff1;
    color: #455a64;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.cst_chart-container {
    margin: 20px 0 30px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow-x: auto;
}

.cst_report-box {
    margin-top: 30px;
}

.cst_main-title {
    color: #333;
}

.pdf-mcq-own-resend-box {
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.pdf-mcq-own-resend-box h3 {
    margin-top: 0;
}

/* The shared .cst_matrix rule in style.css sets min-width:1000px, which
   forces the table to stay 1000px wide no matter how narrow the columns
   are - that's the actual reason narrowing the columns alone didn't make
   the table itself narrower. Removing that floor for our report only.
   Also switching border-collapse from the shared rule's "collapse" to
   "separate" - position:sticky on table cells is known to render
   unreliably (including a ghost/duplicate header row while scrolling,
   which is exactly the symptom reported) when combined with
   border-collapse:collapse. border-spacing:0 keeps cells visually
   adjacent so this doesn't introduce gaps.

   table-layout is "auto" here, not "fixed": fixed layout treats declared
   widths as a strict budget that MUST sum to the table's own width, so a
   flexible (%) question column and rigid (px) student columns compete for
   the same 100% and the browser squeezes whichever one is flexible - that
   was the bug that crushed the first column. With "auto" layout and only
   min-width (no width) on the columns below, each column can never shrink
   below its floor; "min-width: 100%" on the table lets it stretch to fill
   the container when there's slack, but nothing stops it growing past
   100% once the columns' minimums no longer fit - at that point extra
   student columns simply extend the table to the right and
   .cst_table_container's overflow-x:auto (below) provides the scrollbar,
   without ever touching the first column's width. */
.pdf-mcq-own-report .cst_matrix {
    width: auto;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.pdf-mcq-own-report .col-question {
    min-width: 220px;
    word-break: break-word;
}

.pdf-mcq-own-report .col-student {
    min-width: 65px;
}

/* The expandable per-question breakdown (.cst_inner_table) is a SEPARATE
   nested table from the outer .cst_matrix, so under table-layout:auto it
   sizes its own "question" column purely from its own content (the
   answer-option text) with nothing capping how wide that can grow - a
   long option can stretch it well past the outer matrix's question
   column, which is exactly the "options flow over with much larger
   width" bug. Going back to table-layout:fixed here (safe now, since -
   unlike the earlier squeeze bug - none of this inner table's columns
   are rigid pixel widths fighting a flexible one) hard-caps the question
   column at a percentage of its own container width, forcing long option
   text to wrap instead of stretching the column. */
.pdf-mcq-own-report .cst_inner_table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
}

.pdf-mcq-own-report .cst_inner_table .col-question {
    width: 26%;
    word-break: break-word;
}

.pdf-mcq-own-report .cst_inner_table .col-student {
    width: auto;
}

/* Frozen option-text column in the expanded breakdown, matching the
   outer matrix's frozen question column. This is a separate rule from
   the outer matrix's sticky-first-column rule (which deliberately
   excludes .cst_answer_row, since that row's own first cell is just the
   full-width colspan wrapper) - it targets the INNER table's own first
   column instead, which is the actual option-text cell that needs to
   stay visible while scrolling horizontally. */
.pdf-mcq-own-report .cst_inner_table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
}

/* Tilted student-name headers: rotating the label lets each column be
   much narrower than the name's normal horizontal width, so several more
   students fit on screen (especially on a phone) without wrapping names
   onto multiple lines.
   NOTE: this cell must stay position:sticky (inherited from the broader
   ".cst_matrix > thead > tr > th" rule above) for the frozen header row
   to work - position:sticky already works as an anchor for the
   absolutely-positioned label below (sticky establishes a containing
   block the same way relative does), so adding position:relative here
   is unnecessary. Doing that previously silently overrode the sticky
   rule due to selector specificity and broke the frozen header row -
   that regression is why it's called out explicitly here. */
.pdf-mcq-own-report .cst_matrix > thead > tr > th.col-student {
    height: 90px;
    vertical-align: bottom;
    overflow: visible;
}

/* Anchored with position:absolute + left:50%, with the rotation pivot
   (transform-origin) at that same left-bottom point - so the label
   "starts" exactly above the column's horizontal center, where the
   ✔/✖ icon sits below it, instead of starting at the cell's left edge
   (which put the first letter well to the left of the icon). */
.pdf-mcq-own-report .cst_student_head_label {
    position: absolute;
    left: 50%;
    bottom: 8px;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: left bottom;
}

/* Darker separator between each question in the matrix - applied to the
   question header row only, so it does NOT appear between the individual
   answer-option rows inside the expanded breakdown beneath it. */
.pdf-mcq-own-report .cst_question_row td {
    border-bottom: 2px solid #999 !important;
}

/* Tighten up the very spaced-out default padding on the expanded
   answer-breakdown rows (these values come from the plugin's shared
   style.css and are quite generous - 15px/25px - which reads as "too
   spaced out" once there are more than a couple of students). */
.pdf-mcq-own-report .cst_inner_table td.col-student {
    padding: 6px 0;
}

.pdf-mcq-own-report .cst_inner_table tr td.col-student + td.col-student {
    padding-left: 10px;
}

.pdf-mcq-own-report .cst_icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
}

/* --- Frozen header row + frozen first column ---
   Rather than relying on position:sticky against page scroll (which is
   what the position depends on, so it breaks whenever a theme header,
   admin bar, or page layout changes height - this was the cause of the
   header "sometimes" freezing and losing stickiness while scrolling),
   the matrix gets its own bounded, independently-scrolling viewport.
   Sticky then works reliably against *this* container instead of the
   whole page, regardless of what's above it. */
.pdf-mcq-own-report .cst_report-box .cst_table_container {
    max-height: 65vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.pdf-mcq-own-report .cst_matrix > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f2f2f2;
    box-shadow: inset 0 -1px 0 #ccc;
}

/* Scoped with direct-child combinators (> tbody > tr > td) so this only
   freezes the outer matrix's first column, not the first column of the
   nested .cst_inner_table (the expandable per-option breakdown) sitting
   inside each question row - a plain descendant selector would have
   caught that nested table too. */
.pdf-mcq-own-report .cst_matrix > thead > tr > th:first-child,
.pdf-mcq-own-report .cst_matrix > tbody > tr:not(.cst_answer_row) > td:first-child {
    position: sticky;
    left: 0;
    z-index: 15;
    background: #f2f2f2;
    background-clip: padding-box;
}

/* The top-left corner cell scrolls in both directions, so it needs to sit
   above both the frozen row and the frozen column. */
.pdf-mcq-own-report .cst_matrix > thead > tr > th:first-child {
    z-index: 25;
}

/* Responsive */
@media (max-width: 768px) {
    .pdf-mcq-own-exam,
    .pdf-mcq-own-report {
        padding: 15px;
    }

    .pdf-mcq-own-question {
        padding: 20px;
    }

    .pdf-mcq-own-report-table,
    .pdf-mcq-own-report-table thead,
    .pdf-mcq-own-report-table tbody,
    .pdf-mcq-own-report-table th,
    .pdf-mcq-own-report-table td,
    .pdf-mcq-own-report-table tr {
        display: block;
    }

    .pdf-mcq-own-report-table thead {
        display: none;
    }

    .pdf-mcq-own-report-table tr {
        margin-bottom: 15px;
        border: 1px solid #e1e1e1;
        border-radius: 6px;
        overflow: hidden;
    }

    .pdf-mcq-own-report-table td {
        border-top: none;
        border-bottom: 1px solid #eee;
    }

    /* Chart: keep it within the phone's screen width instead of the
       desktop multi-bar-group scaling, which on a narrow screen produced
       a canvas many times wider than the viewport (the JS also caps this
       at render time - see own-exam-frontend.js / the report's inline
       script - this is the CSS side of the same fix). */
    .cst_chart-container {
        padding: 10px;
        margin: 15px 0 20px;
    }

    /* Matrix: smaller text, tighter columns, shorter frozen viewport so
       it doesn't dominate the whole screen on a phone. */
    .pdf-mcq-own-report .cst_report-box .cst_table_container {
        max-height: 55vh;
    }

    .pdf-mcq-own-report .cst_matrix th,
    .pdf-mcq-own-report .cst_matrix td {
        font-size: 10px !important;
        padding: 3px !important;
    }

    .pdf-mcq-own-report .col-question {
        min-width: 100px;
    }

    .pdf-mcq-own-report .col-student {
        min-width: 42px;
    }

    .pdf-mcq-own-report .cst_inner_table .col-question {
        width: 32%;
    }

    .pdf-mcq-own-report .cst_matrix > thead > tr > th.col-student {
        height: 75px;
    }

    .pdf-mcq-own-report .cst_student_head_label {
        bottom: 6px;
    }

    .pdf-mcq-own-report .cst_icon {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .pdf-mcq-own-report .cst_toggle {
        width: 7px;
        height: 7px;
        margin-right: 6px;
    }

    .pdf-mcq-own-report .cst_inner_table td.col-student {
        padding: 4px 0;
    }

    .pdf-mcq-own-report .cst_inner_table tr td.col-student + td.col-student {
        padding-left: 4px;
    }
}