/* Small additions on top of Bootstrap 5. */

html,
body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* ---- Navbar --------------------------------------------------------
   Bootstrap's navbar-dark defaults to rgba(255,255,255,.55) for links,
   which measures 2.36:1 against bg-primary - far below the 4.5:1 needed
   for normal text. Solid white gives 4.5:1 and passes.                  */

.navbar-dark {
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.7);
}

/* Hover can no longer be signalled by brightening, so underline instead. */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* The signed-in name is secondary, but stays fully legible - the step down
   is in size and weight, not in contrast. */
.navbar-user {
    font-size: 0.875rem;
    font-weight: 400;
    color: #fff;
    opacity: 0.92;
}

/* ---- Login screen --------------------------------------------------
   Full-screen photographic background with a translucent panel over it.
   To use your own photo, drop login-bg.jpg into assets/img/ - it is listed
   first below, and the browser falls back to the bundled SVG if it is
   missing. Recolour the whole screen by changing --auth-navy.             */

.auth-page {
    --auth-navy: #17397c;
    --auth-navy-dark: #102a5e;
    --auth-ink: #1c2b45;
    --auth-line: #cdd4dc;

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background-color: #7c8a9c;
    background-image: url("../img/login-bg.jpg"), url("../img/login-bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-panel {
    width: 100%;
    max-width: 430px;
    padding: 2.75rem 2rem 2.25rem;
    border-radius: 6px;
    background: rgba(237, 240, 244, 0.88);
    box-shadow: 0 12px 44px rgba(9, 20, 40, 0.28);
}

@supports (backdrop-filter: blur(2px)) {
    .auth-panel {
        backdrop-filter: blur(2px);
    }
}

/* Brand lockup: wordmark over a spaced-out subtitle. */
.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-brand-mark {
    display: block;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--auth-navy);
}

.auth-brand-sub {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--auth-navy);
}

.auth-title {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--auth-ink);
}

/* Input with an icon sitting inside the field. */
.auth-field {
    position: relative;
    margin-bottom: 0.85rem;
}

.auth-field-icon {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    display: flex;
    transform: translateY(-50%);
    color: #6b7a90;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.7rem;
    font-size: 1rem;
    color: var(--auth-ink);
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 4px;
}

.auth-input::placeholder {
    color: #8a94a6;
}

.auth-input:focus {
    outline: none;
    border-color: var(--auth-navy);
    box-shadow: 0 0 0 3px rgba(23, 57, 124, 0.16);
}

.auth-rule {
    margin: 1.15rem 0 0.9rem;
    border: 0;
    border-top: 1px solid #c6ced8;
    opacity: 1;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: 0.72rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: var(--auth-navy);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.auth-btn:hover,
.auth-btn:focus-visible {
    background: var(--auth-navy-dark);
}

.auth-btn:focus-visible {
    outline: 3px solid rgba(23, 57, 124, 0.4);
    outline-offset: 2px;
}

.auth-foot {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: #4a5568;
}

.auth-foot a {
    color: var(--auth-navy);
    font-weight: 600;
}

.auth-hint {
    margin: -0.75rem 0 1.35rem;
    text-align: center;
    font-size: 0.8rem;
    color: #56617a;
}

/* Alerts inside the panel stay compact so they do not dwarf the form. */
.auth-panel .alert {
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
}

@media (max-width: 400px) {
    .auth-panel {
        padding: 2rem 1.25rem 1.75rem;
    }

    .auth-brand-mark {
        font-size: 2.4rem;
    }
}

/* ---- Registration screen -------------------------------------------
   White card on a soft tinted page, two-column grid, filled inputs with a
   leading icon. Shares --auth-navy with the login screen.                */

.signup-page {
    --auth-navy: #17397c;
    --auth-navy-dark: #102a5e;
    --signup-ink: #2a2f45;
    --signup-fill: #f4f5f9;
    --signup-placeholder: #a2a8b8;

    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: #eef0f7;
}

.signup-card {
    width: 100%;
    max-width: 560px;
    padding: 2.25rem 2rem 2rem;
    background: #fff;
    border: 1px solid #eceef5;
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(23, 35, 80, 0.10);
}

.signup-title {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--signup-ink);
}

.signup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Fields that take the full width of the card. */
.signup-field.is-wide {
    grid-column: 1 / -1;
}

.signup-field {
    position: relative;
}

.signup-field-icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    display: flex;
    transform: translateY(-50%);
    color: #9aa1b4;
    pointer-events: none;
}

.signup-input {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.6rem;
    font-size: 0.95rem;
    color: var(--signup-ink);
    background-color: var(--signup-fill);
    border: 1px solid transparent;
    border-radius: 8px;
}

.signup-input::placeholder {
    color: var(--signup-placeholder);
}

.signup-input:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--auth-navy);
    box-shadow: 0 0 0 3px rgba(23, 57, 124, 0.14);
}

/* Selects get the same treatment plus their own chevron. */
select.signup-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b90a5'%3E%3Cpath d='M3.2 5.6a1 1 0 0 1 1.4 0L8 9l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px;
}

/* An unchosen select shows placeholder-grey, like the empty text inputs. */
select.signup-input:invalid,
select.signup-input.is-empty {
    color: var(--signup-placeholder);
}

/* A few fields carry a visible label (a date input has no usable
   placeholder); the icon shifts down to stay centred on the input. */
.signup-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7288;
}

.signup-field.has-label .signup-field-icon {
    top: auto;
    bottom: 0.78rem;
    transform: none;
}

/* Empty date inputs show their own grey format hint, so match the others. */
input[type="date"].signup-input:not(:focus):invalid,
input[type="date"].signup-input.is-empty {
    color: var(--signup-placeholder);
}

/* The browser draws its own calendar glyph, which would sit beside ours.
   Make it invisible but stretch it over the field, so the duplicate icon
   goes away and clicking anywhere in the field still opens the picker. */
input[type="date"].signup-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* ---- Passport photo picker ---- */
.signup-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    background-color: var(--signup-fill);
    border: 1px dashed #ccd2e0;
    border-radius: 8px;
    cursor: pointer;
}

.signup-file:hover {
    border-color: var(--auth-navy);
}

/* The real input is invisible but still focusable, so keyboard users get a
   focus ring on the box they can actually see. */
.signup-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.signup-file:focus-within {
    background-color: #fff;
    border-style: solid;
    border-color: var(--auth-navy);
    box-shadow: 0 0 0 3px rgba(23, 57, 124, 0.14);
}

.signup-file-preview {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #9aa1b4;
    background-color: #e6e9f1;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
}

.signup-file-preview.has-image svg {
    display: none;
}

.signup-file-body {
    flex: 1 1 auto;
    min-width: 0;
}

.signup-file-title {
    display: block;
    font-size: 0.9rem;
    color: var(--signup-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signup-file-note {
    display: block;
    font-size: 0.75rem;
    color: var(--signup-placeholder);
}

.signup-file-btn {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--auth-navy);
    background: #fff;
    border: 1px solid #d5dae6;
    border-radius: 6px;
}

.signup-file-again {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: #a3522a;
}

.signup-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.4rem 0 0.2rem;
    font-size: 0.85rem;
    color: #5a6178;
}

.signup-check input {
    margin-top: 0.15rem;
    accent-color: var(--auth-navy);
}

.signup-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.78rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--auth-navy);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.signup-btn:hover,
.signup-btn:focus-visible {
    background: var(--auth-navy-dark);
}

.signup-btn:focus-visible {
    outline: 3px solid rgba(23, 57, 124, 0.4);
    outline-offset: 2px;
}

.signup-foot {
    margin: 1.15rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: #5a6178;
}

.signup-foot a {
    color: var(--auth-navy);
    font-weight: 600;
}

.signup-card .alert {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
}

@media (max-width: 520px) {
    .signup-grid {
        grid-template-columns: 1fr;
    }

    .signup-card {
        padding: 1.75rem 1.25rem 1.5rem;
    }
}

/* ---- Exam screen --------------------------------------------------- */

/* The countdown sticks to the top of the viewport while scrolling. */
.exam-timer-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

#countdown {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Under two minutes left. */
.exam-timer-bar.time-low {
    animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
    50% {
        opacity: 0.6;
    }
}

/* ---- Exam security ------------------------------------------------- */

/* Questions cannot be selected; the answer options stay clickable. */
.exam-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.exam-protected .form-check-label,
.exam-protected input {
    -webkit-user-select: none;
    user-select: none;
}

/* Applied while the window is not focused, so a capture taken after
   switching away shows very little. */
.exam-obscured {
    filter: blur(10px);
    transition: filter 0.1s ease-in;
    pointer-events: none;
}

/* Printing the paper is blocked; the browser gets an empty page. */
@media print {
    body * {
        display: none !important;
    }

    body::after {
        content: "Printing is not permitted during an examination.";
        display: block !important;
        font: 16px system-ui, sans-serif;
        padding: 2rem;
    }
}

.question-card .form-check {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    border-radius: 0.375rem;
}

.question-card .form-check:hover {
    background-color: var(--bs-tertiary-bg);
}

@media (max-width: 575.98px) {
    .exam-timer-bar .exam-timer-meta {
        display: none;
    }
}

/* Candidate photo in the navbar. */
.navbar-avatar {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Candidate photo on the student's own dashboard. */
.profile-photo {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 10px;
    background: #e9ecf2;
}

.profile-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem 1.5rem;
}

.profile-facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.profile-facts dd {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
}

/* Candidate photo thumbnail in the students table. */
.student-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: #e9ecf2;
}

/* ---- Tables -------------------------------------------------------- */
.table td,
.table th {
    vertical-align: middle;
}

/* ---- Pie chart ----------------------------------------------------- */
.viz-pie-svg {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}

/* Labels wear text ink, never the colour of the slice they describe. */
.viz-pie-label {
    fill: #52514e;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.viz-pie-svg path,
.viz-pie-svg circle {
    transition: opacity 0.15s ease-in-out;
}

.viz-pie-svg:hover path:not(:hover),
.viz-pie-svg:hover circle:not(:hover) {
    opacity: 0.72;
}

.viz-pie-table {
    max-width: 320px;
    margin: 0.75rem auto 0;
    font-variant-numeric: tabular-nums;
}

.viz-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    margin-right: 0.4rem;
    vertical-align: -0.05rem;
}

/* Pass/fail split bar used in the per-class and per-gender tables. */
.split-bar {
    display: flex;
    gap: 2px; /* the surface gap between the two fills */
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    min-width: 90px;
}

.split-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
}