/* Student-specific CSS for CKEditor usage inside .editor-wrapper */

/* Ensure segmented preformatted spans match normal text sizing while preserving whitespace */
.fib-pre {
    white-space: pre;
    font-family: SFMono-Regular,Consolas,Monaco,Menlo,monospace;
    font-size: 1rem !important;
    line-height: 1.4;
}

/* Editor expansion/collapse styles (student) */
.editor-wrapper {
    transition: all 0.3s ease-in-out;
    /* Allow dropdowns/tooltips to overflow the wrapper so they aren't clipped */
    overflow: visible;
}

.editor-wrapper.collapsed {
    height: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
    /* When collapsed ensure content is fully clipped */
    overflow: hidden !important;
}

/* Ensure CKEditor UI overlays above surrounding content */
/* Dropdown/list/panels that are intended to be absolute-positioned */
.ck .ck-dropdown__panel,
.ck .ck-list-dropdown__panel,
.ck .ck-panel {
    position: absolute;
    z-index: 9999;
}

/* Critical: CKEditor positions balloons/tooltips with fixed positioning.
   Using absolute here breaks placement when editors sit inside scrollable containers
   (like the exam page), causing tooltips to render too low. */
.ck-balloon-panel,
.ck .ck-balloon-panel,
.ck-tooltip,
.ck .ck-tooltip {
    position: fixed !important;
    z-index: 10000; /* Slightly higher to ensure on top of other panels */
}

/* Student editors: full-height with internal scroll to match admin UX */
.editor-wrapper .ck.ck-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.editor-wrapper .ck.ck-editor__main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-wrapper .ck.ck-editor__main > .ck-editor__editable {
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
}

/* Editor section chrome */
.editor-section {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 0.5rem;
}

.editor-section.collapsed {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.editor-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    user-select: none;
}

.editor-toggle:hover {
    color: #495057;
}

.editor-toggle .toggle-icon {
    transition: transform 0.3s ease;
    display: inline-block; /* allow rotation */
}

.editor-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Make images, videos and iframes inside editor-rendered content responsive
   so they never overflow the student's stimulus column. Keep table styles
   as-is to preserve existing table layout behavior. */
.ck-content img,
.ck-content video,
.ck-content iframe,
.ck-content embed,
.ck-content object {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: 0; /* avoid extra offsets */
}

/* Give embedded iframes a sensible aspect ratio so Google Slides and other
   iframe-embeds are tall enough to be usable on student pages. The aspect-ratio
   computes height from the width, which keeps things responsive without
   forcing a fixed pixel height. We also cap the max-height to avoid huge
   embeds on narrow viewports. */
.ck-content iframe,
.ck-content embed,
.ck-content object {
    aspect-ratio: 16/9;
    min-height: 240px; /* ensure a usable minimum */
    max-height: 60vh; /* don't exceed most of the viewport */
}

/* Ensure media figures/embeds don't create horizontal overflow */
.ck-content figure.media,
.ck-content figure.image {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* If an author inserts an image with an inline width style, prefer the
   responsive rule but allow small images to remain centered */
.ck-content img[style] {
    width: auto !important;
    max-width: 100% !important;
}

/* Student view: force checkboxes and radios to use black borders/accents
   - Uses accent-color where supported to colour native controls.
   - Provides a lightweight fallback using appearance:none for consistent
     black borders and indicators across browsers.
   - Scoped in student stylesheet so admin/other views are unaffected. */
input[type="checkbox"],
input[type="radio"] {
    /* preferred modern approach: sets the accent (check/fill) color */
    accent-color: #000;
    /* ensure control is at least reasonably sized and aligned */
    vertical-align: middle;
}

/* Force border color to black where browsers allow it. Avoid removing the
   browser's native focus indicator (box-shadow/outline) so keyboard focus
   remains visible and native. */
input[type="checkbox"], input[type="radio"] {
    border-color: #000 !important;
}

/* Fallback/custom rendering to guarantee a black border on browsers that
   don't fully support accent-color for the unchecked border. Keeps it
   visually simple and accessible. */
/* Fallback/custom rendering for browsers that don't support accent-color.
   Where accent-color is supported we keep native controls (so the browser
   will draw a white, centered check automatically). For other browsers we
   draw a simple black-bordered control and render a white, centered tick/dot
   when checked. */
@supports not (accent-color: #000) {
    input[type="checkbox"], input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        width: 1.15em;
        height: 1.15em;
        margin: 0 .35em 0 0;
        border: 1.5px solid #000;
        background: #fff;
        display: inline-block;
        position: relative;
        cursor: pointer;
    }

    /* Radio should be circular */
    input[type="radio"] {
        border-radius: 50%;
    }

    /* Checked states: fill black so the white tick/dot is visible */
    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background: #000;
    }

    /* White, centred checkmark for checkbox (fallback) */
    input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: translate(-50%,-60%) rotate(45deg);
    }

    /* White, centred inner dot for radio (fallback) */
    input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%,-50%);
    }

    /* Ensure focus outline remains visible for accessibility in fallback.
       Use :focus-visible to preserve the browser's native keyboard focus
       (typically a blue ring) when the user navigates via Tab. For other
       focus causes (mouse/aria script), show a subtle black outline. */
    input[type="checkbox"]:focus:not(:focus-visible), input[type="radio"]:focus:not(:focus-visible) {
        outline: 3px solid #000;
        outline-offset: 2px;
    }
}

/* General focus outline (applies whether native or fallback rendering is used) */
/* When keyboard-focused (Tab), allow the browser to show its native focus
   indicator (usually blue). If you want an additional ring around the
   native indicator, add a subtle box-shadow instead of replacing it. */
/* Do not override :focus-visible so the browser can show its native focus
    indicator (usually a blue ring) when the user navigates with Tab. */