/* SPU PURC site customisations, layered on stock Bootstrap 5.3.
 *
 * The same structure as the ABU CUC site's cuc.css: the brand colour, the
 * dark navigation bar, button colours, copy protection and print rules.
 * css/exam.css and admin/admin.css read the --spu-brand variables, so the
 * colour is changed here and nowhere else.
 */

:root {
    --spu-brand:       #1f4e79;   /* brand */
    --spu-brand-rgb:   31, 78, 121;
    --spu-brand-dark:  #133250;   /* navbar bottom edge, pressed buttons */
    --spu-brand-hover: #2a6399;
    --spu-brand-tint:  #e7eef6;   /* hover wash for outline buttons */
    --spu-brand-light: #96c4f0;   /* progress fill / focus ring on the dark bar */

    /* Bootstrap 5.3 reads these for links and utilities. */
    --bs-link-color: var(--spu-brand);
    --bs-link-hover-color: var(--spu-brand-hover);
    --bs-link-color-rgb: 31, 78, 121;
    --bs-link-hover-color-rgb: 42, 99, 153;
}

body { background-color: #fff; }

h1, h2, h3, h4, h5, h6 { font-weight: 300; }

/* Buttons take the brand colour.  BS5 buttons are compiled, so the per-variant
   variables are set rather than --bs-primary. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--spu-brand);
    --bs-btn-border-color: var(--spu-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--spu-brand-hover);
    --bs-btn-hover-border-color: var(--spu-brand-hover);
    --bs-btn-focus-shadow-rgb: 31, 78, 121;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--spu-brand-dark);
    --bs-btn-active-border-color: var(--spu-brand-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--spu-brand);
    --bs-btn-disabled-border-color: var(--spu-brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--spu-brand);
    --bs-btn-border-color: var(--spu-brand);
    --bs-btn-hover-color: var(--spu-brand-dark);
    --bs-btn-hover-bg: var(--spu-brand-tint);
    --bs-btn-hover-border-color: var(--spu-brand-dark);
    --bs-btn-focus-shadow-rgb: 31, 78, 121;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--spu-brand);
    --bs-btn-active-border-color: var(--spu-brand);
    --bs-btn-disabled-color: var(--spu-brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--spu-brand);
}

/* Navigation bars: the brand colour with white text. */
.navbar.spu-navbar {
    background: var(--spu-brand);
    border-bottom: 4px solid var(--spu-brand-dark);
    --bs-navbar-color: rgba(255, 255, 255, .9);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}
.navbar.spu-navbar .navbar-brand,
.navbar.spu-navbar .nav-link {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.modal-header, .modal-footer { background-color: #f9f9f9; }

/* Copy protection on question text. */
.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ---- The exam list ------------------------------------------------------ */
.welcome { align-items: center; margin: .5rem 0 1.5rem; }
.welcome .logo { max-width: 100%; height: auto; }
.exam-card .card-header {
    background: var(--spu-brand-tint);
    border-bottom: 1px solid rgba(var(--spu-brand-rgb), .25);
    border-left: 4px solid var(--spu-brand);
}
.exam-card .card-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--spu-brand);
}
.exam-card .card-header .text-muted { color: var(--spu-brand-dark) !important; }
.mode-cell { padding: .9rem 1rem; }
.mode-cell .mode-icon { color: var(--spu-brand); margin-right: .35rem; vertical-align: -.125em; }
.mode-cell + .mode-cell { border-top: 1px solid #dee2e6; }
@media (min-width: 768px) {
    .mode-cell + .mode-cell { border-top: 0; border-left: 1px solid #dee2e6; }
}
.mode-cell .progress { height: .5rem; }
.mode-cell .progress-bar { background-color: var(--spu-brand); }
.mode-cell .progress-bar.bg-success { background-color: #198754 !important; }
.mode-cell .btn { min-width: 7rem; }

/* Content pages (disclosures, CME requirements) and the reference tables. */
.content-page { max-width: 860px; margin: 0 auto; line-height: 1.6; }
.content-page img[align="left"] { float: left; margin: 0 1rem .5rem 0; max-width: 40%; height: auto; }
.content-page::after { content: ""; display: block; clear: both; }

/* ---- Results, report and answer sheet ----------------------------------- */
.end-card { max-width: 640px; margin: 1rem auto; }
.end-card .end-icon { font-size: 2.5rem; line-height: 1; margin-bottom: .5rem; }
.end-summary { max-width: 420px; }
.end-options .list-group-item { display: flex; align-items: center; gap: .75rem; }
.report-table { font-size: .9rem; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table .group-row th { background: #f3f5f8; }
.sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: .25rem 1rem;
    font-variant-numeric: tabular-nums;
}
.sheet-grid .is-wrong { color: #b02a37; }
.sheet-grid .is-right { color: #146c43; }

@media print {
    .navbar { display: none; }
    body { padding: 0 !important; }
    .table td, .table th { background-color: #fff !important; }
}