/* =============================================================
   E-Exam theme (Bootstrap 5.3)
   Brand colours are set in application/config/brand.php: every page
   prints the --ee-* brand variables from there (brand_style_tag()).
   The values below are only the fallback defaults.
   ============================================================= */

:root {
    --ee-primary: #e5840a;
    --ee-primary-rgb: 229, 132, 10;
    --ee-primary-light: #fd9818;
    --ee-primary-dark: #c46d05;
    --ee-primary-gradient: linear-gradient(250deg, #e5840a 19%, #fd9818 100%);
    --ee-primary-tint: #fffaf3;   /* very light wash of the brand colour (selected rows, hover) */
    --ee-primary-tint-soft: #fcfaf7;
    --ee-on-primary: #ffffff;     /* text on brand-coloured buttons and the menu bar */
    --ee-link: #b35c00;           /* darker orange: readable on white (WCAG AA) */
    --ee-link-rgb: 179, 92, 0;
    --ee-accent: #102b3e;
    --ee-accent-rgb: 16, 43, 62;
    --ee-info: #0b70e1;
    --ee-heading: #101010;
    --ee-text: #454545;
    --ee-sidebar-bg: #102b3e;
    --ee-sidebar-text: #c3cfd9;
    --ee-sidebar-active: #ffffff;
    --ee-body-bg: #f5f6f8;
    --ee-border: #e4e7ec;
    --ee-header-h: 84px;
    --ee-menubar-h: 54px;

    --bs-primary: var(--ee-primary);
    --bs-primary-rgb: var(--ee-primary-rgb);
    --bs-link-color: var(--ee-link);
    --bs-link-color-rgb: var(--ee-link-rgb);
    --bs-link-hover-color: var(--ee-accent);
    --bs-link-hover-color-rgb: var(--ee-accent-rgb);
    --bs-body-color: var(--ee-text);
    --bs-emphasis-color: var(--ee-heading);
    --bs-heading-color: var(--ee-heading);
    --bs-body-font-family: "Livvic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-border-color: var(--ee-border);
    --bs-focus-ring-color: rgba(var(--ee-primary-rgb), .25);
}

body { background: var(--ee-body-bg); }

/* ---------- Bootstrap components re-coloured to the brand ---------- */
.form-check-input:checked { background-color: var(--ee-primary); border-color: var(--ee-primary); }
.form-check-input:focus { border-color: rgba(var(--ee-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--ee-primary-rgb), .2); }
.pagination {
    --bs-pagination-color: var(--ee-accent);
    --bs-pagination-hover-color: var(--ee-accent);
    --bs-pagination-focus-color: var(--ee-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--ee-primary-rgb), .25);
    --bs-pagination-active-bg: var(--ee-primary);
    --bs-pagination-active-border-color: var(--ee-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--ee-primary); }
.nav-link { --bs-nav-link-color: var(--ee-accent); --bs-nav-link-hover-color: var(--ee-link); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--ee-accent); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ee-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ee-primary); }
.list-group { --bs-list-group-active-bg: var(--ee-primary); --bs-list-group-active-border-color: var(--ee-primary); }
.text-primary { color: var(--ee-link) !important; }

/* ---------- Buttons ---------- */
/* pill buttons, as on macroweb.in (not inside input groups) */
.btn { --bs-btn-border-radius: 2rem; --bs-btn-padding-x: 1.15rem; --bs-btn-font-weight: 600; }
.btn-sm { --bs-btn-padding-x: .8rem; }
.btn-lg { --bs-btn-padding-x: 1.75rem; }
.input-group > .btn, .dataTables_wrapper .btn, .ui-dialog .btn-group .btn { --bs-btn-border-radius: var(--bs-border-radius); }
.btn-primary {
    --bs-btn-color: var(--ee-on-primary);
    --bs-btn-bg: var(--ee-primary);
    --bs-btn-border-color: var(--ee-primary);
    --bs-btn-hover-color: var(--ee-on-primary);
    --bs-btn-hover-bg: var(--ee-primary-dark);
    --bs-btn-hover-border-color: var(--ee-primary-dark);
    --bs-btn-active-color: var(--ee-on-primary);
    --bs-btn-active-bg: var(--ee-primary-dark);
    --bs-btn-active-border-color: var(--ee-primary-dark);
    --bs-btn-disabled-color: var(--ee-on-primary);
    --bs-btn-disabled-bg: var(--ee-primary);
    --bs-btn-disabled-border-color: var(--ee-primary);
    --bs-btn-focus-shadow-rgb: var(--ee-primary-rgb);
    background-image: var(--ee-primary-gradient);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:active { background-image: none; }
.btn-outline-primary {
    --bs-btn-color: var(--ee-link);
    --bs-btn-border-color: var(--ee-primary);
    --bs-btn-hover-color: var(--ee-on-primary);
    --bs-btn-hover-bg: var(--ee-primary);
    --bs-btn-hover-border-color: var(--ee-primary);
    --bs-btn-active-color: var(--ee-on-primary);
    --bs-btn-active-bg: var(--ee-primary-dark);
    --bs-btn-active-border-color: var(--ee-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--ee-primary-rgb);
}
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ee-accent);
    --bs-btn-border-color: var(--ee-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b1f2d;
    --bs-btn-hover-border-color: #0b1f2d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #07151f;
    --bs-btn-active-border-color: #07151f;
    --bs-btn-focus-shadow-rgb: var(--ee-accent-rgb);
    font-weight: 600;
}
.text-accent { color: var(--ee-accent) !important; }
.bg-accent { background-color: var(--ee-accent) !important; }

/* ---------- App shell: brand header (white, logo) ---------- */
.app-header {
    background: #fff;
    border-bottom: 1px solid var(--ee-border);
}
.app-header .container-xxl {
    min-height: var(--ee-header-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.app-header .brand img { height: 40px; width: auto; display: block; }
@media (max-width: 575.98px) { .app-header .brand img { height: 32px; } }
.app-header .meta-item { display: flex; align-items: center; gap: .65rem; }
.app-header .meta-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ee-primary-rgb), .1);
    color: var(--ee-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.app-header .meta-label { font-size: .75rem; color: #7a8594; line-height: 1.1; }
.app-header .meta-value { font-weight: 600; color: var(--ee-heading); line-height: 1.25; font-variant-numeric: tabular-nums; }

/* ---------- App shell: brand-coloured menu bar ---------- */
.app-menubar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--ee-primary-light);
    background-image: linear-gradient(90deg, var(--ee-primary-light) 10%, var(--ee-primary-light) 100%);
    box-shadow: 0 4px 14px rgba(var(--ee-primary-rgb), .25);
}
.app-menubar .navbar { --bs-navbar-padding-y: 0; min-height: var(--ee-menubar-h); }
.app-menubar .navbar-nav .nav-link {
    color: var(--ee-on-primary);
    font-weight: 600;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}
.app-menubar .navbar-nav .nav-link .fa { opacity: .9; }
.app-menubar .navbar-nav .nav-link:hover { color: var(--ee-on-primary); background: rgba(255, 255, 255, .12); }
.app-menubar .navbar-nav .nav-link.active { color: var(--ee-on-primary); background: rgba(0, 0, 0, .1); }
.app-menubar .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #fff;
}
.app-menubar .navbar-toggler { border-color: rgba(255, 255, 255, .6); color: var(--ee-on-primary); padding: .35rem .6rem; }
.app-menubar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35); }
.app-menubar .menu-note { color: var(--ee-on-primary); font-weight: 600; display: flex; align-items: center; gap: .5rem; padding: .5rem 0; }
.app-menubar .menu-note strong { background: rgba(0, 0, 0, .12); padding: .15rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.app-menubar .btn-logout {
    --bs-btn-color: var(--ee-on-primary);
    --bs-btn-border-color: rgba(255, 255, 255, .75);
    --bs-btn-hover-color: var(--ee-primary-dark);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--ee-on-primary);
    --bs-btn-active-color: var(--ee-primary-dark);
    --bs-btn-active-bg: #fff;
    border-radius: 2rem;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (max-width: 991.98px) {
    .app-menubar .navbar-nav .nav-link { padding: .75rem .25rem; }
    .app-menubar .navbar-nav .nav-link.active::after { display: none; }
    .app-menubar .navbar-collapse { padding-bottom: .75rem; }
}

/* ---------- App shell: content ---------- */
.app-main { min-height: 100vh; display: flex; flex-direction: column; }
.app-content { padding-top: 2rem; padding-bottom: 2.5rem; flex: 1 0 auto; }
@media (max-width: 575.98px) { .app-content { padding-top: 1.25rem; } }
.app-footer {
    background: #fff;
    border-top: 1px solid var(--ee-border);
    color: #7a8594;
    font-size: .8125rem;
}
.app-footer .container-xxl { padding-top: 1rem; padding-bottom: 1rem; }
.app-footer .brand-mini { height: 20px; width: auto; }

/* ---------- Page header (bold title + orange line-with-dot, as on macroweb.in) ---------- */
.page-header { margin-bottom: 1.75rem; }
.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ee-heading);
    margin: 0 0 .55rem;
    padding-bottom: .7rem;
    position: relative;
}
.page-title::before,
.page-title::after { content: ""; position: absolute; bottom: 0; }
.page-title::before {
    left: 0;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background: rgba(var(--ee-primary-rgb), .35);
}
.page-title::after {
    left: 14px;
    width: 10px;
    height: 10px;
    margin-bottom: -3px;
    border-radius: 50%;
    background: var(--ee-primary);
}
.page-header .breadcrumb { font-size: .8125rem; margin: 0; }
.page-header .breadcrumb .fa { margin-right: .25rem; }
.page-header .breadcrumb-item.active { color: #7a8594; }

/* ---------- Cards ---------- */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: .85rem;
    --bs-card-inner-border-radius: .85rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
}
.card.shadow-sm { box-shadow: 0 0 30px rgba(0, 0, 0, .05) !important; }
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--ee-border);
    font-weight: 700;
    color: var(--ee-heading);
    padding: 1rem 1.35rem;
}
.card-body { padding: 1.35rem; }
.stat-card .card-body { padding: 1.25rem 1.35rem; }
.stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
}
.stat-card .stat-icon.bg-primary { background-image: var(--ee-primary-gradient); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ee-heading); }
.stat-card .stat-label { color: #7a8594; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Tables / DataTables ---------- */
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th {
    background: #f7f9fc;
    color: #44536b;
    font-weight: 600;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
table.dataTable td .fa { color: var(--ee-primary); font-size: 1.05rem; }
table.dataTable td a + a, table.dataTable td .fa + .fa { margin-left: .35rem; }
div.dataTables_wrapper div.dataTables_processing { z-index: 5; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; position: relative; }
.form-label, .form-group > label { font-weight: 500; margin-bottom: .35rem; }
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--ee-primary-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--ee-primary-rgb), .15);
}

/* FormValidation 0.6 (Bootstrap 3 adapter) compatibility */
.help-block { display: block; margin-top: .25rem; font-size: .8125rem; }
.has-error .form-control, .has-error .form-select { border-color: var(--bs-danger); }
.has-error .help-block, .has-error .form-label, .has-error > label { color: var(--bs-danger); }
.has-success .form-control, .has-success .form-select { border-color: var(--bs-success); }
.form-control-feedback {
    position: absolute;
    right: .75rem;
    top: 2.35rem;
    pointer-events: none;
    font-size: .9rem;
}
.has-error .form-control-feedback { color: var(--bs-danger); }
.has-success .form-control-feedback { color: var(--bs-success); }
.input-group .form-control-feedback { top: .7rem; z-index: 5; right: 3.25rem; }

/* bootstrap-datetimepicker (smalot) under BS5 */
.datetimepicker.dropdown-menu { padding: .5rem; font-size: .875rem; }
.datetimepicker table th, .datetimepicker table td { padding: .25rem .4rem; }
.input-group .input-group-addon { cursor: pointer; }

/* ---------- jQuery UI dialog styled like a BS5 modal ---------- */
.ui-widget { font-family: inherit; font-size: inherit; }
.ui-widget-overlay { background: var(--ee-accent); opacity: .45; }
.ui-dialog.ui-widget-content {
    border: 0;
    border-radius: .6rem;
    padding: 0;
    box-shadow: 0 1rem 3rem rgba(var(--ee-accent-rgb), .25);
    max-width: calc(100vw - 2rem);
}
.ui-dialog .ui-dialog-titlebar {
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--ee-border);
    border-radius: .6rem .6rem 0 0;
    padding: .85rem 1.25rem;
    font-weight: 600;
    color: var(--ee-heading);
}
.ui-dialog .ui-dialog-content { padding: 1.25rem; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--ee-border); padding: .75rem 1.25rem; margin: 0; }
.ui-dialog .ui-dialog-titlebar-close { right: 1rem; }

/* ---------- Alerts (flash messages) ---------- */
.alert .icon { margin-right: .4rem; }

/* ---------- Login / auth pages (split layout) ---------- */
.auth-page { background: #fff; min-height: 100vh; }
.auth-split { display: flex; min-height: 100vh; }

/* Left: form side */
.auth-form-side {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: #fff;
}
.auth-form { width: 100%; max-width: 432px; }
.auth-form .auth-logo { height: 48px; width: auto; margin-bottom: 2.25rem; }
.auth-eyebrow {
    display: inline-block;
    color: var(--ee-link);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.auth-title {
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ee-heading);
    margin-bottom: .4rem;
}
.auth-subtitle { color: #6b7684; margin-bottom: 2.25rem; }
.auth-form .form-label { font-weight: 600; color: var(--ee-heading); margin-bottom: .5rem; }
.auth-form .input-icon { position: relative; }
.auth-form .input-icon > .fa {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa4b2;
    pointer-events: none;
}
.auth-form .input-icon .form-control { padding-left: 2.75rem; }
.auth-form .form-control {
    height: 54px;
    padding: .75rem 1rem;
    border-radius: .75rem;
    border-color: #dde2e9;
    background-color: #fafbfc;
    font-size: 1rem;
}
.auth-form .form-control::placeholder { color: #a3adba; }
.auth-form .form-control:focus {
    background-color: #fff;
    border-color: var(--ee-primary);
    box-shadow: 0 0 0 .22rem rgba(var(--ee-primary-rgb), .16);
}
.auth-form .input-icon .form-control:focus ~ .fa,
.auth-form .input-icon:focus-within > .fa { color: var(--ee-primary); }
.auth-password .form-control { padding-right: 3rem; }
.auth-password .toggle-password {
    position: absolute;
    top: 50%;
    right: .55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #7a8594;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
}
.auth-password .toggle-password:hover { color: var(--ee-primary); background: rgba(var(--ee-primary-rgb), .08); }
.auth-form .form-check-input { width: 1.1em; height: 1.1em; border-color: #c3cbd8; }
.auth-form .btn-signin {
    height: 54px;
    font-size: 1.0625rem;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px rgba(var(--ee-primary-rgb), .3);
}
.auth-form .btn-signin:hover { box-shadow: 0 12px 26px rgba(var(--ee-primary-rgb), .38); }
.auth-help { color: #7a8594; font-size: .875rem; text-align: center; margin-top: 2rem; }
.auth-form .alert { border-radius: .75rem; }
.auth-legal { color: #7a8594; font-size: .8125rem; text-align: center; }

/* Right: brand side (macroweb.in orange, white logo) */
.auth-brand-side {
    flex: 1 1 50%;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 2.5rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    background-color: var(--ee-primary);
    background-image:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 10% 95%, rgba(var(--ee-accent-rgb), .22) 0, rgba(var(--ee-accent-rgb), 0) 45%),
        linear-gradient(250deg, var(--ee-primary) 10%, var(--ee-primary-light) 100%);
}
.auth-brand-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
.auth-brand-side > * { position: relative; }
@media (min-width: 992px) { .auth-brand-side { display: flex; } }
.auth-brand-side .brand-logo { height: 64px; width: auto; align-self: flex-start; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .12)); }
.auth-brand-side .brand-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 460px;
    padding: 2.5rem 0;
}
.preview-card {
    background: #fff;
    color: var(--ee-text);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 18px 40px rgba(102, 52, 0, .22);
}
.preview-card .pc-label { color: #6b7684; font-size: .875rem; }
.preview-card .pc-value { font-size: 1.85rem; font-weight: 700; color: var(--ee-heading); letter-spacing: -.01em; }
.preview-card .pc-chip {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(var(--ee-primary-rgb), .14);
    color: var(--ee-link);
}
.preview-card .pc-chip.ok { background: rgba(25, 135, 84, .1); color: #146c43; }
.preview-palette { display: grid; grid-template-columns: repeat(10, 1fr); gap: .35rem; margin-top: 1rem; }
.preview-palette span { aspect-ratio: 1; border-radius: .35rem; background: #edf0f5; }
.preview-palette span.done { background: var(--ee-primary); }
.preview-palette span.review { background: var(--ee-accent); }
.preview-card .progress { height: .45rem; background: #edf0f5; }
.auth-tagline { font-size: 1.6rem; text-wrap: balance; font-weight: 700; letter-spacing: -.015em; color: #fff; text-align: center; margin: 2.5rem 0 .5rem; }
.auth-tagline-sub { color: rgba(255, 255, 255, .88); text-align: center; margin: 0; }
.auth-brand-side .auth-legal { color: rgba(255, 255, 255, .85); }

/* ---------- Legacy Bootstrap 3 safety net (do not use in new markup) ---------- */
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.img-responsive { max-width: 100%; height: auto; }
.input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* Stat tile icon colours from the macroweb.in palette */
.stat-card .stat-icon.text-bg-info { background: var(--ee-info) !important; color: #fff !important; }

/* ---------- Student dashboard: start card + countdown ---------- */
.start-card { border-top: 4px solid var(--ee-primary) !important; }
.start-card .card-body { padding: 1.75rem; }
@media (max-width: 575.98px) { .start-card .card-body { padding: 1.25rem; } }
.start-heading { font-size: 1.6rem; font-weight: 700; color: var(--ee-heading); margin-bottom: .4rem; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cd-box {
    background: rgba(var(--ee-primary-rgb), .08);
    border: 1px solid rgba(var(--ee-primary-rgb), .18);
    border-radius: .85rem;
    padding: .9rem .25rem .7rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.cd-num {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 700;
    color: var(--ee-heading);
    font-variant-numeric: tabular-nums;
}
.cd-unit { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ee-link); }
.countdown.is-live .cd-box { background: rgba(25, 135, 84, .08); border-color: rgba(25, 135, 84, .25); }
.countdown.is-live .cd-unit { color: #146c43; }
@media (max-width: 575.98px) {
    .start-heading { font-size: 1.3rem; }
    .countdown { gap: .45rem; }
    .cd-box { padding: .7rem .1rem .55rem; border-radius: .65rem; }
    .cd-num { font-size: 1.65rem; }
    .cd-unit { font-size: .6rem; letter-spacing: .04em; }
}
.instructions-body img { max-width: 100%; height: auto; }
.instructions-body table { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- Page header on one line: "Title | Home / Section" ---------- */
.page-header { margin-bottom: 1.25rem; }
.page-header .page-title {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 1rem 0 0;
}
.page-header .page-title + nav {
    display: inline-block;
    vertical-align: baseline;
    padding-left: 1rem;
    border-left: 1px solid #d5dbe3;
    line-height: 1.2;
}
.page-header .page-title + nav .breadcrumb { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.page-header .btn { white-space: nowrap; }
.page-header > .d-flex, .page-header > div > .d-flex { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .page-header .page-title { font-size: 1.45rem; margin-right: .6rem; }
    /* on phones the breadcrumb may wrap under the title, so drop the divider */
    .page-header .page-title + nav { padding-left: 0; border-left: 0; }
    .page-header .page-title + nav .breadcrumb { flex-wrap: wrap; white-space: normal; }
}

/* ---------- Student result page ---------- */
.result-hero { border-top: 4px solid var(--q-pass, #198754) !important; }
.result-hero.is-fail { --q-pass: #d63939; }
.result-hero .card-body { padding: 1.75rem; }
.result-ring {
    --ring: #198754;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    margin: 0 auto;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #eef1f5 0);
}
.result-hero.is-fail .result-ring { --ring: #d63939; }
.result-ring-inner {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.result-pct { font-size: 1.6rem; font-weight: 700; color: var(--ee-heading); }
.result-pct-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #7a8594; }
.result-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: .85rem;
    background: rgba(25, 135, 84, .12);
    color: #146c43;
}
.result-hero.is-fail .result-badge { background: rgba(214, 57, 57, .12); color: #b42318; }
.result-exam { font-size: 1.45rem; font-weight: 700; color: var(--ee-heading); margin: .6rem 0 .25rem; word-break: break-word; }
.result-score { font-size: 1rem; margin-bottom: .75rem; }
.result-score strong { font-size: 1.25rem; color: var(--ee-heading); }
.result-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; font-size: .875rem; }
.result-meta dt { font-weight: 600; color: #7a8594; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.result-meta dd { margin: 0; color: var(--ee-heading); }
.result-meta .result-comment { flex-basis: 100%; }
.result-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ee-border);
}
.result-stat { background: #f6f7f9; border-radius: .75rem; padding: .75rem .5rem; text-align: center; display: flex; flex-direction: column; }
.result-stat .rs-num { font-size: 1.5rem; font-weight: 700; color: var(--ee-heading); line-height: 1.1; }
.result-stat .rs-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7a8594; }
.result-stat.rs-correct .rs-num { color: #198754; }
.result-stat.rs-wrong .rs-num { color: #d63939; }

/* tabs scroll sideways instead of wrapping on phones */
.result-tabs-header { padding-top: .75rem; padding-bottom: .75rem; }
.result-tabs { flex-wrap: nowrap; overflow-x: auto; gap: .35rem; scrollbar-width: none; }
.result-tabs::-webkit-scrollbar { display: none; }
.result-tabs .nav-link { white-space: nowrap; border-radius: 2rem; font-weight: 600; }

/* subject cards (below lg) */
.subject-cards, .answer-cards { display: grid; gap: .85rem; }
.subject-card, .answer-card { border: 1px solid var(--ee-border); border-radius: .85rem; padding: 1rem; background: #fff; }
.subject-card-head, .answer-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.subject-card-score { margin-bottom: .75rem; font-size: .925rem; }
.subject-card-score strong { font-size: 1.15rem; color: var(--ee-heading); }
.kv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.kv-grid > div { background: #f6f7f9; border-radius: .55rem; padding: .45rem .55rem; }
.kv-grid dt { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #7a8594; }
.kv-grid dd { margin: 0; font-weight: 700; color: var(--ee-heading); }

/* answer cards (below md) */
.answer-totals { display: flex; justify-content: space-between; font-size: .875rem; color: #6b7684; padding: 0 .15rem; }
.answer-qno { font-weight: 700; color: #fff; background-image: var(--ee-primary-gradient); border-radius: 2rem; padding: .1rem .6rem; font-size: .8rem; }
.answer-subject { flex: 1 1 auto; font-size: .78rem; color: #7a8594; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-status { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.answer-question { color: var(--ee-heading); font-weight: 500; margin: .35rem 0 .65rem; word-break: break-word; }
.answer-question img, .answer-kv img { max-width: 100%; height: auto; }
.answer-kv { margin: 0; display: grid; gap: .35rem; font-size: .875rem; }
.answer-kv > div { display: flex; gap: .5rem; }
.answer-kv dt { flex: 0 0 7.5rem; font-weight: 600; color: #7a8594; }
.answer-kv dd { margin: 0; flex: 1 1 auto; min-width: 0; word-break: break-word; color: var(--ee-heading); }

.chart-scroll { overflow-x: auto; }

@media (max-width: 767.98px) {
    .result-hero .card-body { padding: 1.25rem; }
    .result-hero .row { text-align: center; }
    .result-meta { justify-content: center; text-align: center; }
    .result-ring { width: 128px; height: 128px; }
    .result-ring-inner { width: 100px; height: 100px; }
    .result-pct { font-size: 1.4rem; }
    .result-exam { font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
    .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .answer-kv dt { flex-basis: 6.5rem; }
}
@media (max-width: 575.98px) {
    /* three equal tabs so "Mark Graph" is never hidden off-screen */
    .result-tabs { overflow: visible; gap: .25rem; }
    .result-tabs .nav-item { flex: 1 1 0; }
    .result-tabs .nav-link { width: 100%; text-align: center; padding: .45rem .25rem; font-size: .82rem; }
    .result-tabs .nav-link .fa { display: none; }
}

/* =============================================================
   Admin dashboard
   ============================================================= */
.dash-updated { font-size: .8rem; color: #7a8594; }

/* live & upcoming */
.upcoming-list { list-style: none; margin: 0; padding: 0; }
.upcoming-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.35rem;
    border-bottom: 1px solid var(--ee-border);
}
.upcoming-item:last-child { border-bottom: 0; }
.upcoming-item.is-live { background: rgba(var(--ee-primary-rgb), .05); }
.upcoming-when { display: flex; flex-direction: column; line-height: 1.2; }
.upcoming-day { font-weight: 700; color: var(--ee-heading); font-size: .85rem; }
.upcoming-time { color: #7a8594; font-size: .8rem; }
.upcoming-name { font-weight: 700; color: var(--ee-heading); word-break: break-word; }
.upcoming-meta { color: #6b7684; font-size: .825rem; margin-top: .15rem; }
.upcoming-empty { padding: 1.5rem 1.35rem; }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .55rem;
    border-radius: 2rem;
}
.status-pill.is-live { background: rgba(12, 163, 12, .12); color: #006300; }
.status-pill.is-live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #0ca30c; }
.status-pill.is-scheduled { background: #eef1f5; color: #4b5563; }
@media (max-width: 575.98px) {
    .upcoming-item { grid-template-columns: minmax(0, 1fr) auto; padding: .85rem 1rem; }
    .upcoming-when { grid-column: 1 / -1; flex-direction: row; gap: .5rem; }
}

/* at a glance */
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.glance {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem .9rem;
    border-radius: .75rem;
    background: #f6f7f9;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s, transform .15s;
}
.glance:hover, .glance:focus-visible { background: rgba(var(--ee-primary-rgb), .1); transform: translateY(-1px); }
.glance-icon { color: var(--ee-primary); font-size: 1rem; }
.glance-value { font-size: 1.45rem; font-weight: 700; color: var(--ee-heading); line-height: 1.15; }
.glance-label { font-size: .75rem; color: #6b7684; font-weight: 600; }

/* period filter row */
.dash-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0 0 1rem; }
.dash-filter-label { font-weight: 700; color: var(--ee-heading); }
.dash-filter .btn-group .btn { --bs-btn-border-radius: 2rem; }
.dash-filter .btn-group > .btn:not(:first-child) { margin-left: -1px; }
.dash-filter .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dash-filter .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dash-filter .btn.active { --bs-btn-active-bg: var(--ee-primary); --bs-btn-active-border-color: var(--ee-primary); --bs-btn-active-color: #fff; }
@media (max-width: 575.98px) {
    .dash-filter .btn-group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: .4rem; }
    .dash-filter .btn-group > .btn { border-radius: 2rem !important; margin-left: 0 !important; }
}
#periodScope { transition: opacity .2s; }
#periodScope.is-loading { opacity: .5; pointer-events: none; }

/* KPI tiles */
.kpi .card-body { padding: 1.1rem 1.25rem; }
.kpi-label { font-size: .8rem; font-weight: 600; color: #6b7684; }
.kpi-value { font-size: 2rem; font-weight: 700; color: var(--ee-heading); line-height: 1.15; margin: .2rem 0 .35rem; }
.kpi-note { font-size: .75rem; color: #8a94a3; }
@media (max-width: 575.98px) { .kpi-value { font-size: 1.6rem; } .kpi .card-body { padding: .9rem 1rem; } }

/* meter: brand fill on a lighter step of the same hue */
.meter { height: .4rem; border-radius: 1rem; background: rgba(var(--ee-primary-rgb), .16); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 1rem; background: var(--ee-primary); transition: width .4s ease; }

/* chart cards */
.chart-sub { font-size: .75rem; font-weight: 500; color: #7a8594; }
.chart-holder { width: 100%; min-height: 200px; }
.chart-holder svg { display: block; width: 100%; height: auto; overflow: visible; }
.view-toggle .btn { --bs-btn-border-radius: .5rem; --bs-btn-padding-x: .55rem; }
.bank-alert {
    font-size: .8rem;
    color: #7a4b00;
    background: #fff4d6;
    border-radius: .5rem;
    padding: .45rem .7rem;
    margin-bottom: .75rem;
}

/* SVG marks (ee-charts.js) */
.ee-grid { stroke: #ebedf0; stroke-width: 1; shape-rendering: crispEdges; }
.ee-axis { stroke: #c9ced6; stroke-width: 1; shape-rendering: crispEdges; }
.ee-tick { fill: #8a94a3; font-size: 11px; font-variant-numeric: tabular-nums; }
.ee-cat { fill: #4b5563; font-size: 12px; font-weight: 600; }
.ee-cat.is-empty { fill: #9aa4b2; font-weight: 500; }
.ee-value { fill: var(--ee-heading); font-size: 11px; font-weight: 700; }
.ee-value.is-empty { fill: #b45309; font-weight: 600; }
.ee-mark { fill: var(--ee-primary); transition: fill .12s; }
.ee-zero { stroke: #d5dbe3; stroke-width: 2; }
.ee-hit { fill: transparent; }
.ee-mark-group { cursor: default; outline: none; }
.ee-mark-group:hover .ee-mark, .ee-mark.is-hover { fill: var(--ee-primary-dark); }
.ee-mark-group:focus-visible .ee-hit { fill: rgba(var(--ee-primary-rgb), .08); }
.ee-tip {
    position: absolute;
    z-index: 2000;
    display: none;
    pointer-events: none;
    background: #fff;
    border: 1px solid var(--ee-border);
    border-radius: .55rem;
    box-shadow: 0 8px 24px rgba(var(--ee-accent-rgb), .14);
    padding: .5rem .7rem;
    font-size: .8rem;
    min-width: 8rem;
}
.ee-tip-title { font-weight: 700; color: var(--ee-heading); margin-bottom: .2rem; }
.ee-tip-row { color: #6b7684; }
.ee-tip-row strong { color: var(--ee-heading); font-variant-numeric: tabular-nums; }
.ee-table td, .ee-table th { font-variant-numeric: tabular-nums; }

/* recent tests */
.recent-table th:first-child, .recent-table td:first-child { padding-left: 1.35rem; }
.recent-name { font-weight: 700; color: var(--ee-heading); word-break: break-word; }
.recent-date { font-size: .78rem; color: #7a8594; }
.recent-table td { font-variant-numeric: tabular-nums; }
.rate-cell { display: flex; align-items: center; gap: .55rem; min-width: 8.5rem; }
.rate-cell .meter { flex: 1 1 auto; }
.rate-value { font-weight: 700; color: var(--ee-heading); font-size: .85rem; min-width: 3.2rem; text-align: right; }
.view-toggle .btn.active { --bs-btn-active-bg: rgba(var(--ee-primary-rgb), .14); --bs-btn-active-border-color: rgba(var(--ee-primary-rgb), .45); --bs-btn-active-color: var(--ee-link); }
.status-pill.is-overdue { background: #fff4d6; color: #7a4b00; }
/* keep absolutely-positioned bits (e.g. visually-hidden labels) inside table scrollers */
.table-responsive { position: relative; }
@media (max-width: 575.98px) {
    .recent-table th, .recent-table td { padding-left: .5rem; padding-right: .5rem; font-size: .85rem; }
    .recent-table th:first-child, .recent-table td:first-child { padding-left: 1rem; }
    .rate-cell { min-width: 0; gap: .35rem; }
    .rate-cell .meter { min-width: 2rem; }
    .rate-value { min-width: 0; }
}
/* recent tests: stacked rows on phones */
@media (max-width: 575.98px) {
    .recent-table thead { display: none; }
    .recent-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr auto;
        align-items: end;
        gap: .25rem .75rem;
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--ee-border);
    }
    .recent-table tbody td { display: block; border: 0; padding: 0 !important; text-align: left !important; font-size: .9rem; }
    .recent-table tbody td:first-child { grid-column: 1 / -1; margin-bottom: .3rem; }
    .recent-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #8a94a3;
        margin-bottom: .1rem;
    }
    .recent-table tbody td:last-child { align-self: center; }
}

/* =============================================================
   Student list
   ============================================================= */
.min-w-0 { min-width: 0; }
.list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem 1rem; align-items: center; }
.list-search { position: relative; }
.list-search .fa { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9aa4b2; pointer-events: none; }
.list-search .form-control { height: 46px; padding-left: 2.6rem; border-radius: 2rem; background: #fafbfc; }
.list-search .form-control:focus { background: #fff; }
.list-controls { display: flex; gap: .5rem; }
.list-controls .form-select { border-radius: 2rem; min-width: 9rem; }
.filter-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--ee-border);
    background: #fff;
    color: #4b5563;
    border-radius: 2rem;
    padding: .35rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: rgba(var(--ee-primary-rgb), .5); }
.chip.active { background: rgba(var(--ee-primary-rgb), .12); border-color: rgba(var(--ee-primary-rgb), .55); color: var(--ee-link); }
.chip-count { font-weight: 700; color: var(--ee-heading); background: #f1f3f6; border-radius: 2rem; padding: 0 .45rem; font-size: .75rem; }
.chip.active .chip-count { background: #fff; }
.chip-dot { width: .5rem; height: .5rem; border-radius: 50%; }
.chip-dot.is-live { background: #0ca30c; }
.chip-dot.is-upcoming { background: var(--ee-info); }
.chip-dot.is-never { background: #b6bec9; }
@media (max-width: 767.98px) {
    .list-toolbar { grid-template-columns: 1fr; }
    .list-controls .form-select { flex: 1 1 0; min-width: 0; }
}

#studentListWrap { transition: opacity .2s; }
#studentListWrap.is-loading { opacity: .5; }
.student-table th:first-child, .student-table td:first-child { padding-left: 1.35rem; }
.student-table th:last-child, .student-table td:last-child { padding-right: 1.1rem; }
.student-table td { border-bottom-color: var(--ee-border); }
.student-table tbody tr:hover { background: var(--ee-primary-tint-soft); }
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    color: var(--ee-link);
    background: rgba(var(--ee-primary-rgb), .14);
}
.avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }
.student-name {
    border: 0;
    background: none;
    padding: 0;
    font-weight: 700;
    color: var(--ee-heading);
    text-align: left;
    word-break: break-word;
}
.student-name:hover, .student-name:focus-visible { color: var(--ee-link); text-decoration: underline; }
.student-roll { font-size: .8rem; color: #7a8594; font-variant-numeric: tabular-nums; }
.cell-contact { max-width: 260px; font-size: .875rem; }
.cell-tests strong { font-size: 1.05rem; color: var(--ee-heading); }
.cell-actions { white-space: nowrap; }
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    color: #6b7684;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover, .btn-icon:focus-visible { background: rgba(var(--ee-primary-rgb), .12); color: var(--ee-link); }
.btn-icon.is-danger:hover, .btn-icon.is-danger:focus-visible { background: rgba(214, 57, 57, .1); color: #b42318; }
.status-pill.is-upcoming { background: rgba(11, 112, 225, .1); color: #0a58b0; }
.status-pill.is-never { background: #f1f3f6; color: #6b7684; }
.status-pill.is-pass { background: rgba(25, 135, 84, .12); color: #146c43; }
.status-pill.is-fail { background: rgba(214, 57, 57, .12); color: #b42318; }
.list-empty { padding: 2rem 1.35rem !important; color: #6b7684; text-align: center; }
.list-footer {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.35rem;
}
.list-range { font-size: .85rem; color: #6b7684; }
.list-footer .page-link { border-radius: .5rem !important; margin: 0 .1rem; min-width: 2.1rem; text-align: center; }

/* phones & tablets: each student becomes a card */
@media (max-width: 991.98px) {
    .student-table thead { display: none; }
    .student-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .55rem .75rem;
        padding: .9rem 1rem;
        border-bottom: 1px solid var(--ee-border);
    }
    .student-table tbody td { display: block; border: 0; padding: 0 !important; text-align: left !important; }
    .student-table td.cell-student { grid-column: 1 / -1; }
    .student-table td.cell-contact { grid-column: 1 / -1; max-width: none; padding-left: 3.25rem !important; }
    .student-table td.cell-tests { padding-left: 3.25rem !important; }
    .student-table td.cell-tests div { display: inline; margin-left: .35rem; }
    .student-table td.cell-actions { grid-column: 1 / -1; display: flex; gap: .25rem; padding-left: 3rem !important; }
    .student-table td.list-empty { grid-column: 1 / -1; }
}

/* detail panel */
.student-panel { --bs-offcanvas-width: 460px; }
.student-panel .offcanvas-header { border-bottom: 1px solid var(--ee-border); }
.sp-contact { display: grid; gap: .6rem; margin: 0 0 1.1rem; }
.sp-contact dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a94a3; }
.sp-contact dt .fa { width: 1rem; color: var(--ee-primary); }
.sp-contact dd { margin: 0; color: var(--ee-heading); word-break: break-word; }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.1rem; }
.sp-stats > div { background: #f6f7f9; border-radius: .7rem; padding: .65rem .5rem; text-align: center; font-size: .72rem; font-weight: 600; color: #6b7684; }
.sp-stats span { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ee-heading); }
.sp-heading { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a94a3; margin-bottom: .6rem; }
.sp-history { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.sp-test { border: 1px solid var(--ee-border); border-radius: .75rem; padding: .8rem .9rem; }
.sp-test-name { font-weight: 700; color: var(--ee-heading); word-break: break-word; }
.sp-test-date { font-size: .8rem; color: #7a8594; }
.sp-test-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .45rem; font-size: .85rem; font-weight: 600; color: var(--ee-heading); }
.sp-breakdown { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ee-border); display: grid; gap: .5rem; font-size: .875rem; }
@media (min-width: 576px) and (max-width: 991.98px) {
    /* tablets: name and contact side by side inside the card */
    .student-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .student-table td.cell-student { grid-column: 1; }
    .student-table td.cell-contact { grid-column: 2; padding-left: 0 !important; }
    .student-table td.cell-tests { grid-column: 1; }
    .student-table td.cell-actions { grid-column: 3; grid-row: 1; padding-left: 0 !important; }
}

/* =============================================================
   Question bank list
   ============================================================= */
@media (min-width: 768px) { .list-controls .form-select { min-width: 12.5rem; } }
.chip-dot.is-hard { background: #d03b3b; }
.answers-toggle { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #4b5563; padding-left: 2.6em; }
.answers-toggle .form-check-input { cursor: pointer; }
#qListWrap { transition: opacity .2s; }
#qListWrap.is-loading { opacity: .5; }
.q-list { display: grid; gap: .9rem; margin-bottom: 1rem; }
.q-card .card-body { padding: 1.15rem 1.35rem; }
.q-card.is-inactive { background: #fbfbfc; }
.q-card.is-inactive .q-text, .q-card.is-inactive .q-options { opacity: .75; }
.q-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.q-id { font-weight: 700; color: #7a8594; font-size: .8rem; font-variant-numeric: tabular-nums; }
.q-tag { font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 2rem; background: rgba(var(--ee-primary-rgb), .12); color: var(--ee-link); }
.q-tag.is-muted { background: #f1f3f6; color: #4b5563; font-weight: 600; }
.q-actions { margin-left: auto; display: flex; gap: .15rem; }
.q-direction {
    font-size: .875rem;
    color: #4b5563;
    background: #f8f9fb;
    border-left: 3px solid rgba(var(--ee-primary-rgb), .45);
    border-radius: .4rem;
    padding: .5rem .75rem;
    margin-bottom: .6rem;
}
.q-text { font-size: 1.05rem; font-weight: 600; color: var(--ee-heading); line-height: 1.5; margin-bottom: .8rem; word-break: break-word; }
.q-text p, .q-direction p, .q-option-text p { margin: 0; }
.q-text img, .q-option-text img { max-width: 100%; height: auto; }
.q-options { list-style: none; padding: 0; margin: 0 0 .85rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.q-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid var(--ee-border);
    border-radius: .65rem;
    padding: .5rem .7rem;
    font-size: .9rem;
    color: var(--ee-heading);
    min-width: 0;
}
.q-option-key {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    background: #f1f3f6;
    color: #4b5563;
}
.q-option-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.q-option.is-correct { border-color: rgba(12, 163, 12, .45); background: rgba(12, 163, 12, .06); }
.q-option.is-correct .q-option-key { background: #0ca30c; color: #fff; }
.q-correct-mark { color: #006300; font-size: .85rem; }
.q-compact-answer { display: none; font-size: .875rem; color: #6b7684; margin-bottom: .7rem; }
.q-compact-answer strong { color: #006300; }
.hide-options .q-options { display: none; }
.hide-options .q-compact-answer { display: block; }
.q-difficulty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ee-border);
    font-size: .82rem;
    color: #6b7684;
}
.q-meter { width: 7rem; }
.q-rate { font-weight: 700; color: var(--ee-heading); }
.q-level { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .5rem; border-radius: 2rem; }
.q-level.is-easy { background: rgba(12, 163, 12, .12); color: #006300; }
.q-level.is-medium { background: #fff4d6; color: #7a4b00; }
.q-level.is-hard { background: rgba(208, 59, 59, .12); color: #b42318; }
.q-level.is-unknown { background: #f1f3f6; color: #6b7684; text-transform: none; letter-spacing: 0; font-weight: 600; }
.q-footer { background: #fff; border-radius: .85rem; box-shadow: 0 0 30px rgba(0, 0, 0, .05); margin-bottom: 1.5rem; }
.q-footer .form-select { width: auto; border-radius: 2rem; }
@media (max-width: 575.98px) {
    .q-options { grid-template-columns: 1fr; }
    .q-card .card-body { padding: 1rem; }
    .q-text { font-size: 1rem; }
    .answers-toggle { margin-left: 0 !important; width: 100%; }
    .q-footer { flex-direction: column; align-items: stretch; }
    .q-footer > div { justify-content: space-between; flex-wrap: wrap; }
}

/* =============================================================
   Test list
   ============================================================= */
.chip-dot.is-done { background: var(--ee-accent); }
.status-pill.is-done { background: #e8edf2; color: var(--ee-accent); }
#tListWrap { transition: opacity .2s; }
#tListWrap.is-loading { opacity: .5; }
.t-list { display: grid; gap: .8rem; margin-bottom: 1rem; }
.t-card.is-live { box-shadow: 0 0 0 2px rgba(12, 163, 12, .35), 0 0 30px rgba(0, 0, 0, .05); }
.t-card.is-cancelled { background: #fbfbfc; }
.t-card.is-cancelled .t-name { color: #6b7684; text-decoration: line-through; text-decoration-color: rgba(107, 118, 132, .5); }
.t-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 190px auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.25rem;
}
.t-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: rgba(var(--ee-primary-rgb), .1);
    padding: .5rem .25rem;
    line-height: 1.1;
}
.t-card.is-completed .t-date, .t-card.is-cancelled .t-date { background: #f1f3f6; }
.t-date-day { font-size: 1.5rem; font-weight: 700; color: var(--ee-heading); }
.t-date-month { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--ee-link); }
.t-card.is-completed .t-date-month, .t-card.is-cancelled .t-date-month { color: #6b7684; }
.t-date-time { font-size: .72rem; color: #7a8594; margin-top: .15rem; }
.t-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.t-name { font-size: 1.02rem; }
.t-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .82rem; color: #6b7684; margin-bottom: .45rem; }
.t-overdue { color: #7a4b00; font-weight: 600; }
.t-subjects { display: flex; flex-wrap: wrap; gap: .35rem; }
.t-cancel-reason { font-size: .82rem; color: #6b7684; margin-top: .45rem; font-style: italic; }
.t-people { font-size: .85rem; color: #6b7684; display: grid; gap: .3rem; }
.t-people-main strong { font-size: 1.15rem; color: var(--ee-heading); }
.t-people-note { font-size: .78rem; color: #7a8594; }
.t-warn { font-size: .78rem; font-weight: 700; color: #7a4b00; background: #fff4d6; border-radius: .4rem; padding: .2rem .5rem; justify-self: start; }
.t-people .rate-cell { min-width: 0; }
.t-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.t-actions > .btn { min-width: 9.5rem; }
.t-more { display: flex; gap: .15rem; }
@media (max-width: 1199.98px) {
    .t-row { grid-template-columns: 64px minmax(0, 1fr) 170px; }
    .t-actions { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
    .t-actions > .btn { min-width: 0; }
    .t-more { margin-left: auto; }
}
@media (max-width: 767.98px) {
    .t-row { grid-template-columns: 56px minmax(0, 1fr); gap: .75rem 1rem; padding: .9rem 1rem; }
    .t-people { grid-column: 2; }
    .t-actions { grid-column: 1 / -1; }
    .t-date-day { font-size: 1.25rem; }
}

/* detail panel */
.test-panel .offcanvas-title { word-break: break-word; font-weight: 700; color: var(--ee-heading); }
.tp-cancel { background: #f1f3f6; border-radius: .6rem; padding: .6rem .8rem; font-size: .875rem; color: #4b5563; margin-bottom: 1rem; }
.tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1.25rem; }
.tp-facts > div { background: #f6f7f9; border-radius: .6rem; padding: .5rem .65rem; }
.tp-facts dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a94a3; }
.tp-facts dd { margin: 0; font-weight: 600; color: var(--ee-heading); font-size: .9rem; }
.tp-subjects, .tp-students { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.tp-subjects li { display: flex; flex-direction: column; border: 1px solid var(--ee-border); border-radius: .6rem; padding: .5rem .7rem; font-size: .85rem; color: #6b7684; }
.tp-subjects strong { color: var(--ee-heading); font-size: .92rem; }
.tp-student { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--ee-border); padding: .45rem 0; }
.tp-student:last-child { border-bottom: 0; }
.tp-student-name { font-weight: 700; color: var(--ee-heading); font-size: .9rem; word-break: break-word; }
.tp-student-right { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }

/* =============================================================
   Add student / bulk upload / review
   ============================================================= */
.req { color: #b42318; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ee-border); }
.info-card { background: var(--ee-primary-tint); border: 1px solid rgba(var(--ee-primary-rgb), .2) !important; box-shadow: none !important; }
.info-title { font-size: 1rem; font-weight: 700; color: var(--ee-heading); margin-bottom: .6rem; }
.info-title .fa { color: var(--ee-primary); }
.info-list { padding-left: 1.1rem; margin: 0; display: grid; gap: .35rem; font-size: .9rem; color: #4b5563; }
code.pw { font-size: .9em; color: var(--ee-heading); background: #fff; border: 1px solid rgba(var(--ee-primary-rgb), .3); border-radius: .35rem; padding: .05rem .4rem; }

/* steps */
.steps { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.step { display: flex; align-items: center; gap: .55rem; color: #8a94a3; font-weight: 600; font-size: .9rem; }
.step + .step::before { content: ""; width: 2rem; height: 2px; background: var(--ee-border); margin-right: .35rem; }
.step-num { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef1f5; color: #6b7684; font-size: .85rem; font-weight: 700; }
.step.is-current { color: var(--ee-heading); }
.step.is-current .step-num { background-image: var(--ee-primary-gradient); color: #fff; }
.step.is-done { color: #146c43; }
.step.is-done .step-num { background: rgba(25, 135, 84, .14); color: #146c43; }
@media (max-width: 575.98px) { .step + .step::before { display: none; } .step-text { font-size: .8rem; } }

/* drop zone */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-align: center;
    padding: 2rem 1rem;
    border: 2px dashed rgba(var(--ee-primary-rgb), .45);
    border-radius: 1rem;
    background: var(--ee-primary-tint);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone:hover, .dropzone.is-dragover { background: rgba(var(--ee-primary-rgb), .1); border-color: var(--ee-primary); }
.dropzone:focus-within { box-shadow: 0 0 0 .2rem rgba(var(--ee-primary-rgb), .25); }
.dropzone.has-file { border-style: solid; border-color: rgba(25, 135, 84, .55); background: rgba(25, 135, 84, .05); }
.dropzone.is-invalid { border-color: #d63939; background: rgba(214, 57, 57, .04); }
.dropzone-icon { font-size: 2rem; color: var(--ee-primary); }
.dropzone.has-file .dropzone-icon { color: #198754; }
.dropzone-title { font-weight: 700; color: var(--ee-heading); word-break: break-all; }
.dropzone-hint { font-size: .82rem; color: #6b7684; }
.template-table { font-size: .82rem; background: #fff; border-radius: .5rem; overflow: hidden; }
.template-table th { text-align: center; }
.recent-uploads { list-style: none; margin: 0; padding: 0; }
.recent-uploads li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--ee-border); }
.recent-uploads li:last-child { border-bottom: 0; }
.ru-name { font-weight: 700; color: var(--ee-heading); }
.ru-meta { font-size: .78rem; color: #7a8594; }

/* review */
.review-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.review-batch { font-weight: 700; font-size: 1.1rem; color: var(--ee-heading); }
.review-meta { font-size: .82rem; color: #7a8594; }
.review-counts { display: flex; gap: .6rem; }
.review-counts > div { min-width: 6rem; text-align: center; background: #f6f7f9; border-radius: .7rem; padding: .5rem .75rem; font-size: .72rem; font-weight: 600; color: #6b7684; text-transform: uppercase; letter-spacing: .04em; }
.review-counts span { display: block; font-size: 1.4rem; font-weight: 700; color: var(--ee-heading); text-transform: none; letter-spacing: 0; }
.review-counts .is-ready span { color: #198754; }
.review-counts .is-fix span { color: #b42318; }
#reviewWrap { transition: opacity .2s; }
#reviewWrap.is-loading { opacity: .5; }
.review-table td, .review-table th { white-space: nowrap; }
.review-table th:first-child, .review-table td:first-child { padding-left: 1.25rem; }
.review-table td.cell-status { white-space: normal; min-width: 14rem; }
.review-table .cell-idx { color: #8a94a3; font-size: .8rem; }
.review-table tr.needs-fix td:first-child { box-shadow: inset 3px 0 0 #d63939; }
.review-table tr.is-ready td:first-child { box-shadow: inset 3px 0 0 #198754; }
.review-table td.is-bad { color: #b42318; font-weight: 700; background: rgba(214, 57, 57, .05); }
.review-table td .form-control { min-width: 8rem; }
.row-problems { margin: 0; padding-left: 1rem; font-size: .8rem; color: #b42318; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 991.98px) {
    .review-table thead { display: none; }
    .review-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; padding: .85rem 1rem; border-bottom: 1px solid var(--ee-border); }
    .review-table tbody td { display: block; border: 0; padding: 0 !important; white-space: normal; box-shadow: none !important; }
    .review-table tbody td[data-label]::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a94a3; }
    .review-table td.cell-idx { display: none; }
    .review-table td.cell-status, .review-table td.cell-actions, .review-table td.list-empty { grid-column: 1 / -1; min-width: 0; }
    .review-table tr.needs-fix { border-left: 3px solid #d63939; }
    .review-table tr.is-ready { border-left: 3px solid #198754; }
    .review-table td.cell-actions { text-align: left !important; display: flex; gap: .25rem; }
    .review-table td .form-control { min-width: 0; width: 100%; }
    .review-counts > div { min-width: 0; flex: 1 1 0; }
    .review-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* =============================================================
   Add / edit question, question bulk review
   ============================================================= */
.option-block { border: 1px solid var(--ee-border); border-radius: .75rem; padding: .7rem .8rem .8rem; margin-bottom: .7rem; transition: border-color .15s, background-color .15s; }
.option-block.is-correct { border-color: rgba(12, 163, 12, .5); background: rgba(12, 163, 12, .04); }
.option-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.option-letter { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #f1f3f6; color: #4b5563; }
.option-block.is-correct .option-letter { background: #0ca30c; color: #fff; }
.option-head .form-check-label { font-size: .85rem; font-weight: 600; color: #4b5563; }
.option-block.is-correct .option-head .form-check-label { color: #006300; }
.option-head .form-check-input:checked { background-color: #0ca30c; border-color: #0ca30c; }
.editor-wrap { border-radius: .5rem; }
.editor-wrap.is-invalid { box-shadow: 0 0 0 2px rgba(214, 57, 57, .55); }
.editor-wrap .cke_chrome { border-color: var(--ee-border) !important; border-radius: .5rem; overflow: hidden; box-shadow: none !important; }
.editor-wrap .cke_top { background: #f8f9fb !important; border-bottom-color: var(--ee-border) !important; padding: 3px 4px !important; }
.editor-wrap .cke_bottom { display: none; }
.preview-sticky { position: sticky; top: calc(var(--ee-menubar-h) + 1rem); }
.preview-card-q .q-option.is-correct { border-color: rgba(12, 163, 12, .45); background: rgba(12, 163, 12, .06); }
.preview-card-q .q-option.is-correct .q-option-key { background: #0ca30c; color: #fff; }
.preview-card-q .q-options { grid-template-columns: 1fr; }
.subject-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.qr-list { display: grid; gap: .8rem; transition: opacity .2s; }
.qr-list.is-loading { opacity: .5; }
.qr-card.needs-fix { box-shadow: inset 4px 0 0 #d63939, 0 0 30px rgba(0, 0, 0, .05) !important; }
.qr-card.is-ready { box-shadow: inset 4px 0 0 #198754, 0 0 30px rgba(0, 0, 0, .05) !important; }
.qr-card .q-tag.is-bad, .qr-card .q-option.is-bad { background: rgba(214, 57, 57, .1); color: #b42318; border-color: rgba(214, 57, 57, .45); }
.qr-card .q-text.is-bad { color: #b42318; }
.qr-problems { margin-top: .4rem; }
.qr-card .q-actions .btn-outline-secondary { --bs-btn-padding-y: .2rem; }
@media (max-width: 1199.98px) { .preview-sticky { position: static; } }

/* =============================================================
   Create test
   ============================================================= */
.end-preview { font-size: .875rem; color: #4b5563; background: #f6f7f9; border-radius: .6rem; padding: .55rem .8rem; }
.end-preview:empty { display: none; }
.end-preview .fa { color: var(--ee-primary); }
.subject-builder { display: grid; grid-template-columns: minmax(10rem, 2fr) repeat(4, minmax(6.5rem, 1fr)) 7rem; gap: .75rem; align-items: end; background: #fafbfc; border: 1px solid var(--ee-border); border-radius: .75rem; padding: .85rem; }
.sb-hint { font-size: .82rem; color: #4b5563; margin-top: .5rem; }
.sb-hint .fa { color: var(--ee-primary); }
.sb-hint:empty { display: none; }
.sb-table thead th { white-space: nowrap; }
.create-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--ee-border);
    border-radius: .85rem;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
    padding: .75rem 1.1rem;
    margin-bottom: 1.5rem;
}
.create-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; color: #6b7684; font-size: .9rem; }
.create-summary strong { color: var(--ee-heading); font-size: 1.1rem; }
@media (max-width: 991.98px) {
    .subject-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-subject, .sb-add { grid-column: 1 / -1; }
}

/* ---------- Add students to test ---------- */
.empty-panel { text-align: center; padding: 3rem 1rem; }
.empty-panel h2 { font-size: 1.2rem; color: var(--ee-heading); margin: .75rem 0 .35rem; }
.empty-panel p { color: #6b7684; }
.empty-panel-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ee-link); background: rgba(var(--ee-primary-rgb), .12); }
.enrol-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.enrol-facts > div { background: #f6f7f9; border-radius: .6rem; padding: .5rem .7rem; min-width: 0; }
.enrol-facts dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a94a3; }
.enrol-facts dd { margin: 0; font-weight: 600; color: var(--ee-heading); font-size: .9rem; }
.fact-note { font-weight: 600; color: #7a4b00; font-size: .8rem; }
.paste-panel { background: #fafbfc; border: 1px dashed var(--ee-border); border-radius: .75rem; padding: .85rem; margin-bottom: 1rem; }
.from-select { width: auto; max-width: min(100%, 17rem); border-radius: 2rem; font-weight: 600; font-size: .85rem; color: #4b5563; }
.from-select.active { background-color: rgba(var(--ee-primary-rgb), .12); border-color: rgba(var(--ee-primary-rgb), .55); color: var(--ee-link); }
.pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .55rem .25rem; border-bottom: 1px solid var(--ee-border); font-size: .875rem; }
.pick-count { color: #6b7684; margin-right: auto; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow-y: auto; transition: opacity .15s; }
.pick-list.is-loading { opacity: .5; }
.pick-item { border-bottom: 1px solid var(--ee-border); }
.pick-item.is-selected { background: var(--ee-primary-tint); }
.pick-label { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; cursor: pointer; margin: 0; }
.pick-label:hover { background: var(--ee-primary-tint-soft); }
.pick-label .form-check-input { margin: 0; flex-shrink: 0; width: 1.15em; height: 1.15em; }
.pick-label .avatar { width: 34px; height: 34px; font-size: .75rem; }
.pick-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pick-name { font-weight: 700; color: var(--ee-heading); word-break: break-word; }
.pick-meta { font-size: .8rem; color: #7a8594; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-empty { padding: 1.5rem .5rem; text-align: center; color: #6b7684; }
.sel-chips { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 16rem; overflow-y: auto; }
.sel-chip { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; background: rgba(var(--ee-primary-rgb), .1); color: var(--ee-heading); border-radius: 2rem; padding: .2rem .25rem .2rem .7rem; font-size: .82rem; font-weight: 600; }
.sel-x { border: 0; background: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #7a8594; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sel-x:hover, .sel-x:focus-visible { background: rgba(214, 57, 57, .12); color: #b42318; }
.sel-more { font-size: .82rem; color: #6b7684; align-self: center; }
.ready-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; background: #fff4d6; color: #7a4b00; border-radius: .6rem; padding: .55rem .75rem; font-size: .85rem; margin-bottom: .75rem; }
.ready-note.is-ok { background: rgba(25, 135, 84, .1); color: #146c43; }
.in-search .form-control { height: 38px; }
.in-list { max-height: 26rem; overflow-y: auto; }
@media (max-width: 991.98px) {
    .enrol-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pick-list { max-height: none; }
}

/* ---------- Popups (SweetAlert 1) in the app's look ---------- */
.sweet-overlay { background-color: rgba(var(--ee-accent-rgb), .45) !important; backdrop-filter: blur(2px); }
.sweet-alert {
    font-family: inherit;
    border-radius: 1rem;
    padding: 1.75rem 1.75rem 1.4rem;
    box-shadow: 0 24px 60px rgba(var(--ee-accent-rgb), .25);
}
@media (min-width: 541px) {
    .sweet-alert { width: 420px; margin-left: -210px; }
}
.sweet-alert h2 { font-size: 1.3rem; font-weight: 700; color: var(--ee-heading); margin: .6rem 0 .5rem; line-height: 1.3; }
.sweet-alert p { font-size: .95rem; font-weight: 400; color: #4b5563; line-height: 1.55; white-space: pre-line; }
.sweet-alert fieldset input, .sweet-alert input {
    font-family: inherit;
    font-size: .95rem;
    height: 44px;
    border: 1px solid var(--ee-border);
    border-radius: .6rem;
    box-shadow: none;
    margin-top: 1rem;
}
.sweet-alert input:focus { border-color: rgba(var(--ee-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--ee-primary-rgb), .2); }
.sweet-alert .sa-error-container { background: #fdecec; border-radius: .5rem; }
.sweet-alert .sa-error-container p { color: #b42318; }
.sweet-alert .sa-button-container { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.sweet-alert button {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    border-radius: 2rem;
    padding: .65rem 1.5rem;
    margin: 0;
    min-width: 7.5rem;
}
.sweet-alert .sa-confirm-button-container { margin: 0; }
.sweet-alert button.cancel { background-color: #fff !important; color: #4b5563; border: 1px solid var(--ee-border); }
.sweet-alert button.cancel:hover { background-color: #f6f7f9 !important; color: var(--ee-heading); }
.sweet-alert button.cancel:focus { box-shadow: 0 0 0 .2rem rgba(var(--ee-accent-rgb), .12) !important; }
/* icons: smaller, in the theme's status colours */
.sweet-alert .sa-icon { margin: .25rem auto .75rem; }
.sweet-alert .sa-icon.sa-warning { border-color: var(--ee-primary); }
.sweet-alert .sa-icon.sa-warning .sa-body, .sweet-alert .sa-icon.sa-warning .sa-dot { background-color: var(--ee-primary); }
.sweet-alert .pulseWarning, .sweet-alert .pulseWarningIns { animation: none; }
.sweet-alert .sa-icon.sa-error { border-color: #d63939; }
.sweet-alert .sa-icon.sa-error .sa-line { background-color: #d63939; }
.sweet-alert .sa-icon.sa-info { border-color: #0b70e1; }
.sweet-alert .sa-icon.sa-info::before, .sweet-alert .sa-icon.sa-info::after { background-color: #0b70e1; }
.sweet-alert .sa-icon.sa-success { border-color: #198754; }
.sweet-alert .sa-icon.sa-success .sa-line { background-color: #198754; }
.sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: rgba(25, 135, 84, .2); }
.sweet-alert[data-has-confirm-button="false"][data-has-cancel-button="false"] .sa-button-container { display: none; }

/* ---------- Edit student / change password ---------- */
.reset-box { background: #fafbfc; border: 1px solid var(--ee-border); border-radius: .75rem; padding: .75rem .9rem; }
.enrol-facts.enrol-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-group .pw-toggle { border-color: var(--bs-border-color); color: #6b7684; background: #fff; }
.pw-group .pw-toggle:hover, .pw-group .pw-toggle:focus-visible { color: var(--ee-link); background: var(--ee-primary-tint); }
.pw-group .form-control.is-invalid ~ .pw-toggle { border-color: var(--bs-form-invalid-border-color); }
.pw-rules { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem .75rem; font-size: .82rem; color: #6b7684; }
.pw-rules li { display: flex; align-items: center; gap: .4rem; }
.pw-rules li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #c9d1db; flex-shrink: 0; }
.pw-rules li.is-met { color: #146c43; }
.pw-rules li.is-met::before { background: #198754; }

/* ---------- Live monitor ---------- */
.mon-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mon-updated { font-size: .82rem; color: #6b7684; min-width: 8rem; text-align: right; }
.mon-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.mon-name { font-size: 1.15rem; font-weight: 700; color: var(--ee-heading); margin: 0; word-break: break-word; }
.mon-window { color: #6b7684; font-size: .9rem; }
.mon-countdown { text-align: right; }
.mon-countdown-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a94a3; }
.mon-countdown-value { font-size: 1.7rem; font-weight: 700; color: var(--ee-heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mon-bar { display: flex; height: 6px; background: #eef1f5; border-radius: 0 0 .85rem .85rem; overflow: hidden; }
.mon-seg { display: block; height: 100%; }
.mon-seg + .mon-seg { box-shadow: inset 2px 0 0 #fff; }
.mon-seg.is-live { background: #0ca30c; }
.mon-seg.is-overdue { background: #f0a020; }
.mon-seg.is-fail { background: #d63939; }
.mon-seg.is-scheduled { background: #b6bec9; }
.mon-seg.is-done { background: var(--ee-accent); }
.mon-seg.is-never { background: #dde2e8; }
.mon-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.mon-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; background: #fff; border: 1px solid var(--ee-border); border-left: 4px solid #c9d1db; border-radius: .75rem; padding: .7rem .9rem; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.mon-tile:hover { box-shadow: 0 4px 14px rgba(var(--ee-accent-rgb), .08); }
.mon-tile.active { background: var(--ee-primary-tint); border-color: rgba(var(--ee-primary-rgb), .55); border-left-color: var(--ee-primary); box-shadow: 0 0 0 .15rem rgba(var(--ee-primary-rgb), .15); }
.mon-tile.is-zero { opacity: .6; }
.mon-tile.is-live { border-left-color: #0ca30c; }
.mon-tile.is-overdue { border-left-color: #f0a020; }
.mon-tile.is-fail { border-left-color: #d63939; }
.mon-tile.is-done { border-left-color: var(--ee-accent); }
.mon-tile.is-fail:not(.is-zero) .mon-tile-value { color: #b42318; }
.mon-tile-value { font-size: 1.6rem; font-weight: 700; color: var(--ee-heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mon-tile-label { font-size: .82rem; font-weight: 600; color: #6b7684; }
.mon-table thead th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #8a94a3; }
.mon-table td { border-bottom-color: var(--ee-border); }
.mon-row.is-offline { background: rgba(214, 57, 57, .04); }
.mon-row.is-idle, .mon-row.is-timeUp { background: rgba(240, 160, 32, .05); }
.mon-progress { min-width: 10rem; }
.mon-progress .meter { max-width: 12rem; }
.mon-sub { font-size: .78rem; color: #7a8594; margin-top: .25rem; }
.mon-idle { font-variant-numeric: tabular-nums; font-weight: 600; color: #4b5563; }
.mon-idle.is-mid { color: #7a4b00; }
.mon-idle.is-high { color: #b42318; }
.mon-left { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ee-heading); }
.mon-left.is-low { color: #b42318; }
.mon-legend { font-size: .8rem; color: #7a8594; margin: 1rem 0 0; }
.mon-table .status-pill .fa { font-size: .75rem; }
@media (max-width: 575.98px) {
    .mon-countdown { text-align: left; }
    .mon-updated { text-align: left; min-width: 0; }
}

/* window-change limit */
.mon-switch { font-variant-numeric: tabular-nums; font-weight: 600; color: #4b5563; }
.mon-switch.is-mid { color: #7a4b00; }
.mon-switch.is-high, .mon-switch.is-over { color: #b42318; font-weight: 700; }
.mon-row.is-terminated { background: rgba(214, 57, 57, .06); }
.mon-seg.is-fail + .mon-seg.is-fail { box-shadow: inset 2px 0 0 #fff; }
.tp-terminated { font-size: .78rem; font-weight: 700; color: #b42318; }

/* ---------- Proctoring: camera check (student dashboard) ---------- */
.cam-check-preview { position: relative; aspect-ratio: 4 / 3; border-radius: .75rem; overflow: hidden; background: #111827; }
.cam-check-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.cam-check-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #6b7684; }
.cam-check-empty[hidden] { display: none; }
.cam-check-mic { display: flex; align-items: center; gap: .75rem; }
.cam-check-mic[hidden] { display: none; }
.cam-check-mic .meter { flex: 1 1 auto; max-width: 16rem; }
.cam-check-mic .meter > span { transition: width .08s linear; }

/* ---------- Proctoring: camera grid (live monitor) ---------- */
.mon-toolbar-wrap .list-controls { align-items: center; }
.mon-toolbar-wrap .list-controls .form-select { width: auto; }
@media (max-width: 991.98px) { .mon-toolbar-wrap .list-controls { flex-wrap: wrap; } .mon-toolbar-wrap .list-controls .form-select { flex: 1 1 9rem; } }
.list-controls .btn-group .btn { border-radius: 2rem; }
.list-controls .btn-group .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.list-controls .btn-group .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mon-lost { color: #b42318; font-weight: 700; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem; }
.cam-grid[hidden] { display: none; }
.cam-tile { display: flex; flex-direction: column; text-align: left; padding: 0; background: #fff; border: 1px solid var(--ee-border); border-radius: .85rem; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.cam-tile:hover, .cam-tile:focus-visible { box-shadow: 0 6px 18px rgba(var(--ee-accent-rgb), .12); border-color: rgba(var(--ee-primary-rgb), .5); }
.cam-tile.is-active { border-top: 3px solid #0ca30c; }
.cam-tile.is-idle, .cam-tile.is-timeUp { border-top: 3px solid #f0a020; }
.cam-tile.is-offline, .cam-tile.is-terminated { border-top: 3px solid #d63939; }
.cam-tile.is-lost { border: 2px solid #d63939; box-shadow: 0 0 0 .2rem rgba(214, 57, 57, .15); }
.cam-shot { position: relative; aspect-ratio: 4 / 3; background: #111827; }
.cam-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-shot-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: #8a94a3; font-size: .8rem; }
.cam-shot-empty .fa { font-size: 1.6rem; }
.cam-shot-empty[hidden] { display: none; }
.cam-alert { position: absolute; left: .5rem; top: .5rem; right: .5rem; padding: .2rem .5rem; border-radius: .4rem; background: #d63939; color: #fff; font-size: .75rem; font-weight: 700; }
.cam-age { position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .45rem; border-radius: 1rem; background: rgba(17, 24, 39, .7); color: #fff; font-size: .7rem; }
.cam-age.is-stale { background: #f0a020; color: #3b2600; }
.cam-meta { padding: .6rem .75rem .7rem; }
.cam-name-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cam-name { font-weight: 700; color: var(--ee-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cam-name-row .status-pill { flex: 0 0 auto; font-size: .7rem; }
.cam-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.cam-badge { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .45rem; border-radius: 1rem; background: #f1f3f6; color: #4b5563; font-size: .72rem; font-weight: 600; }
.cam-badge.is-ok { background: rgba(12, 163, 12, .1); color: #146c43; }
.cam-badge.is-warn { background: #fff4d6; color: #7a4b00; }
.cam-badge.is-bad { background: #fde4e4; color: #b42318; }
.cam-dialog { width: min(42rem, calc(100vw - 2rem)); padding: 1rem; border: 0; border-radius: 1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.cam-dialog::backdrop { background: rgba(17, 24, 39, .6); }
.cam-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.cam-dialog-body { position: relative; aspect-ratio: 4 / 3; background: #111827; border-radius: .6rem; overflow: hidden; }
.cam-dialog-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-dialog-body img[hidden] { display: none; }
@media (max-width: 575.98px) { .cam-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; } }
/* screen picture with the camera inset */
.cam-shot .cam-pip, .cam-dialog-body .cam-pip { position: absolute; right: .5rem; top: .5rem; width: 34%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); background: #111827; }
.cam-tile.is-lost .cam-pip { top: 2.1rem; }
.cam-dialog-body .cam-pip { width: 26%; }
.cam-dialog-body .cam-pip[hidden] { display: none; }
.cam-shot img.is-screen { object-fit: contain; }

/* ---------- Proctoring: live view in the monitor dialog ---------- */
.cam-dialog-body .live-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111827; }
.cam-dialog-body .live-main.is-screen { object-fit: contain; }
.cam-dialog-body .live-main[hidden], .cam-dialog-body .live-pip[hidden] { display: none; }
.cam-dialog-body .live-pip { z-index: 2; }
.cam-dialog-body.is-actual { overflow: auto; }
.cam-dialog-body.is-actual .live-main.is-screen { position: static; width: auto; height: auto; max-width: none; object-fit: none; }
.live-tag { position: absolute; left: .6rem; top: .6rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 1rem; background: #d63939; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.live-tag .exam-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: mon-live-pulse 1.4s ease-in-out infinite; }
@keyframes mon-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-tag .exam-live-dot { animation: none; } }
.live-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; min-height: 2rem; }
.live-status { font-size: .85rem; font-weight: 600; color: #4b5563; }
.live-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Proctoring: warning, end test, activity log (monitor dialog) ---------- */
.proctor-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--ee-border); }
.proctor-actions[hidden] { display: none; }
.warn-form { flex: 1 1 22rem; min-width: 0; }
.proctor-log { margin-top: .9rem; }
.proctor-log summary { font-weight: 700; font-size: .9rem; cursor: pointer; }
.proctor-log-list { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 12rem; overflow-y: auto; font-size: .82rem; }
.proctor-log-list li { display: flex; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid #eef1f5; }
.proctor-log-list .log-time { flex: 0 0 auto; color: #6b7684; font-variant-numeric: tabular-nums; }
.proctor-log-list .log-by { color: #6b7684; }
.proctor-log-list .log-read { color: #7a4b00; font-weight: 600; }
.proctor-log-list .log-read.is-read { color: #146c43; }
.proctor-log-list li.is-terminated, .proctor-log-list li.is-second_monitor, .proctor-log-list li[class$="_lost"] { color: #b42318; }
.proctor-log-list li.is-warning { color: #7a4b00; }

/* ---------- Proctoring: result page (summary, activity, pictures) ---------- */
.proctor-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
.proctor-summary > div { display: flex; flex-direction: column; padding: .6rem .8rem; border: 1px solid var(--ee-border); border-radius: .6rem; background: #fafbfc; }
.proctor-summary span { font-size: .75rem; color: #6b7684; }
.proctor-summary strong { font-size: 1.15rem; color: var(--ee-heading); }
.proctor-h { font-size: 1rem; font-weight: 700; color: var(--ee-heading); }
.proctor-log-full { max-height: 20rem; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.frame { display: flex; flex-direction: column; padding: 0; text-align: left; border: 1px solid var(--ee-border); border-radius: .6rem; overflow: hidden; background: #fff; }
.frame[hidden] { display: none; }
.frame:hover, .frame:focus-visible { border-color: rgba(var(--ee-primary-rgb), .6); }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #111827; display: block; }
.frame-cap { padding: .3rem .5rem; font-size: .72rem; color: #4b5563; line-height: 1.35; }
.frame.is-event { border-color: #f0a020; box-shadow: 0 0 0 1px #f0a020; }
.frame.is-event .frame-cap strong { color: #b42318; }
.cam-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ---------- Unsupported browser page ---------- */
.browser-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ee-border); border-radius: .85rem; overflow: hidden; }
.browser-list li { display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem; }
.browser-list li + li { border-top: 1px solid var(--ee-border); }
.browser-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(var(--ee-primary-rgb), .12); color: var(--ee-primary); font-weight: 700; }
.browser-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.browser-text strong { color: var(--ee-heading); }
.browser-text span { font-size: .8125rem; color: #6b7684; }
.browser-ok { color: #198754; }
.browser-note { display: flex; gap: .75rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: .85rem; background: #f4f6f9; color: #4b5563; font-size: .9rem; }
.browser-note > .fa { margin-top: .2rem; color: var(--ee-link); }
.browser-copy { display: flex; gap: .5rem; }
.browser-copy .form-control { min-width: 0; height: 48px !important; font-size: .9rem !important; }
.browser-copy .btn { flex: 0 0 auto; height: 48px; border-radius: .75rem; white-space: nowrap; }