/* The rules every page shares (base.html). The per-user theme variables they use (--bg-color, --btn-bg, ...) come from
   the theme stylesheet that base.html links after this file (exams/templates/exams/theme.css). Kept as a file, not an inline
   <style>, so the edge Content-Security-Policy needs no 'unsafe-inline' (audit SEC-03). */
html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

a, button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}


button {
    cursor: pointer;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 10px 15px;
}

button:hover {
    opacity: 0.9;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

main {
    flex: 1;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.messages {
    margin-bottom: 20px;
}

html.hwa-loading main { pointer-events: none; }

/* Multi-column grids on the instructor pages stack into one column on a narrow screen (audit A11Y-14). */
@media (max-width: 700px) {
    .stack-narrow { grid-template-columns: minmax(0, 1fr) !important; }
    .stack-narrow > * { min-width: 0; }
    /* a row of controls that does not fit wraps onto the next line instead of pushing the page sideways, and no control is wider than the screen */
    [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; }
    select, input, textarea { max-width: 100%; box-sizing: border-box; }
}

.message {
    padding: 15px;
    border: 3px solid var(--border-color);
    font-weight: bold;
    margin-bottom: 10px;
}

/* Text colours reach at least 4.5:1 on their own backgrounds (WCAG 1.4.3). They are the same in every
   theme because each level sets both colours. Without a level class (debug) a message follows the theme. */
.message.error { background-color: #ffeaea; border-color: #a30000; color: #a30000; }
.message.success { background-color: #e8f5e9; border-color: #006400; color: #006400; }
.message.warning { background-color: #fff3cd; border-color: #856404; color: #533f03; }
.message.info { background-color: #d1ecf1; border-color: #0c5460; color: #0c5460; }

/* Screen Reader Only Utility Class (Needed for alerts) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip Link Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--focus-color);
    color: var(--on-focus);
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* The message area under the page title (was a style= attribute in base.html). */
#messages-region {
    max-width: 1000px;
    margin: 20px auto 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}