/* ================================
   FORM ELEMENTS
================================ */

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 0.95rem;        /* slightly larger */
    font-weight: 700;          /* true bold */
    margin-bottom: 10px;       /* clearer separation from input */
    color: var(--text);            /* darker, higher contrast */
    letter-spacing: 0.03em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    /* No color was ever declared here, so input text fell back to the
       browser default (black) — invisible on the dark input background.
       Chrome-autofilled fields masked it (the autofill override below sets
       its own fill colour), which is why Username looked right while the
       localStorage-populated School ID stayed black.
       (select/textarea added 2026-07-18 — bare selects in .form-group
       rendered as unstyled native widgets, worst in the admin modals.) */
    color: var(--text);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-faint);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Help text under a field (<small class="muted">) and muted spans in labels */
.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-group .muted {
    color: var(--text-muted);
    font-weight: 400;
}

/* Browser autofill (e.g. a saved username) paints its own hardcoded light
   background via the user-agent stylesheet, ignoring page CSS entirely —
   without this override an autofilled field stays light even in dark mode
   while its sibling fields go dark, exactly the mismatched light/dark
   inputs seen on the login page. The huge inset box-shadow + long
   transition-delay is the standard trick to force the browser's own
   fill colour to match ours instead. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--white) inset;
    box-shadow: 0 0 0px 1000px var(--white) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ================================
   BASE FORM CONTROL
   (inputs, selects, textareas with .form-control)
================================ */
.form-control {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-family: inherit;       /* stops textareas rendering in monospace */
    line-height: 1.45;
    color: var(--text);
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-control::placeholder {
    color: var(--text-faint);
}

textarea.form-control {
    resize: vertical;
    min-height: 4.5rem;
    display: block;
}

/* ================================
   OPTIONS ROW
================================ */

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-size: 0.85rem;
}

.remember-me {
    color: var(--text);
}

.remember-me input {
    margin-right: 6px;
}

/* Guidance, NOT a link — there is no self-service reset endpoint by design
   (nothing to brute-force), resets go through the school admin. It was styled
   primary-blue with a hover underline, so it read as clickable and people
   clicked it expecting a reset flow (Anton, 2026-07-26). Muted, no hover
   affordance, normal cursor: it now looks like the helper text it is. */
.forgot-link {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: default;
}

/* No rule existed for this at all, so the "Contact Support" link fell back
   to the browser's default anchor colours (blue/purple) instead of the
   app palette — most visible in dark mode where that default purple reads
   as an odd, out-of-place accent next to everything else. */
.support-link {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    margin-top: 16px;
}

.support-link a {
    color: var(--primary);
    text-decoration: none;
}

.support-link a:hover {
    text-decoration: underline;
}

/* ================================
   BUTTONS
================================ */

.login-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    background-color: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;
}

.login-submit:hover {
    background-color: var(--primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;

    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;

    border-radius: 8px;
    border: none;
    background-color: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;

    white-space: nowrap;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--primary);
}

/* Primary (explicit alias for .btn default) */
.btn-primary {
    background-color: var(--primary);
}
.btn-primary:hover {
    background-color: var(--primary);
}

/* Secondary buttons */
/* Inverted-surface buttons: the background is a TEXT token, so it flips
   light↔dark with the theme — the text on it must therefore be a SURFACE
   token (--card-bg), never the fixed-white --text-inverse. With fixed
   white, dark mode hovers turned white-on-near-white (--text is #e2e8f0
   there). Same pairing rule applies wherever a background uses --text*. */
.btn-secondary {
    background-color: var(--text-muted);
    color: var(--card-bg);
}
.btn-secondary:hover {
    background-color: var(--text);
    color: var(--card-bg);
}

/* Success / green — used for enabled toggles */
.btn-success {
    background-color: var(--success);
}
.btn-success:hover {
    background-color: var(--success);
}

/* Danger / red — used for destructive actions */
.btn-danger {
    background-color: var(--danger);
}
.btn-danger:hover {
    background-color: var(--danger);
}

/* Full-width button */
.btn-full {
    width: 100%;
}

/* Outline style — for secondary actions like "Copy" */
.btn-outline {
    background-color: transparent;
    border: 1.5px solid var(--color-border, var(--border-color));
    color: var(--color-text, var(--text));
}
.btn-outline:hover {
    background-color: var(--color-bg-subtle, var(--bg));
    border-color: var(--text-faint);
}

/* Subtle secondary button (used for "Back" links etc.). Global so it renders
   on every page — it was previously only defined in assessments.css, so on
   other pages btn-ghost links fell back to looking like plain text. */
.btn-ghost {
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text);
}
.btn-ghost:hover {
    background-color: var(--border);
    border-color: var(--text-faint);
}

/* Disabled. There was no rule for this anywhere, so a disabled button looked
   exactly as live as an enabled one — a teacher clicking "Import" on a marking
   guideline the server had already refused got no press, no error and no
   explanation, which reads as the page being broken. Last in the button block
   because every variant above sets its own background-color, and :hover is
   included so a dead button does not light up under the pointer either. */
.btn:disabled,
.btn:disabled:hover,
.btn[disabled],
.btn[disabled]:hover {
    background-color: var(--bg-subtle);
    border-color: var(--border-color);
    color: var(--text-faint);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Two-column form row ─────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

@media (max-width: 700px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ── Card section heading ────────────────────────────────── */
.card-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* ── Required field marker ───────────────────────────────── */
.required {
    color: var(--danger);
    margin-left: 2px;
}

/* ── Disabled / read-only inputs ─────────────────────────── */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bg-subtle);
    color: var(--text-faint);
    cursor: not-allowed;
    border-color: var(--border);
}

/* ── Field hint text ─────────────────────────────────────── */
.field-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-faint);
}

/* ── Live password requirements checklist ────────────────────
   Each rule starts grey with a hollow marker; .met (set by
   password_checklist.js) turns it green with a tick. */
.pw-checklist {
    list-style: none;
    margin: -0.4rem 0 1rem;
    padding: 0;
    font-size: 0.8rem;
}

.pw-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-faint);
    padding: 0.12rem 0;
    transition: color 0.15s ease;
}

.pw-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pw-check-icon::before {
    content: "";
}

.pw-checklist li.met {
    color: var(--success);
}

.pw-checklist li.met .pw-check-icon {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-inverse);
}

.pw-checklist li.met .pw-check-icon::before {
    content: "\2713";   /* ✓ */
}