.navbar-inverse .efyp-theme-toggle,
.dropdown-menu .efyp-theme-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:calc(100% - 20px);
    color:#334155;
    font-size:13px;
    min-height:36px;
    margin:4px 10px;
    padding:6px 10px;
    border:1px solid #cbd5e1;
    border-radius:4px;
    text-decoration:none;
    white-space:nowrap;
    background:transparent;
}
.navbar-inverse .efyp-theme-toggle:hover,
.navbar-inverse .efyp-theme-toggle:focus,
.dropdown-menu .efyp-theme-toggle:hover,
.dropdown-menu .efyp-theme-toggle:focus {
    color:#1d4ed8;
    background:#eff6ff;
    text-decoration:none;
}
.efyp-theme-switch {
    position:relative;
    display:inline-block;
    width:36px;
    height:20px;
    margin-left:12px;
    border-radius:20px;
    background:#94a3b8;
    vertical-align:middle;
    transition:background-color .18s ease;
}
.efyp-theme-switch::after {
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.25);
    transition:transform .18s ease;
}
.efyp-theme-toggle.is-on .efyp-theme-switch { background:#2563eb !important; }
.efyp-theme-toggle.is-on .efyp-theme-switch::after { transform:translateX(16px); }
.efyp-theme-toggle:focus-visible { outline:2px solid #fcd34d; outline-offset:2px; }

.lecturer-report-list .report-table-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:4px 0 12px;
    padding:10px 12px;
    border:1px solid #d9e2ec;
    border-radius:6px;
    background:#f8fafc;
}
.lecturer-report-list .report-table-toolbar__hint {
    color:#526173;
    font-size:13px;
}
@media (max-width:600px) {
    .lecturer-report-list .report-table-toolbar { align-items:flex-start; flex-direction:column; }
}

/* Screen-only tokens leave the existing print stylesheet unchanged. */
@media screen {
    /* A cool, slightly blue-grey family rather than flat neutral grey: the page
       reads as a lit surface instead of switched-off pixels, and each layer
       (page < card < raised) is a visible step without a hard edge. Text is
       #e4e9ef rather than pure white so long pages do not glare. */
    html[data-efyp-theme="dark"] {
        color-scheme:dark;
        --clr-surface:#151b22;
        --clr-card:#1a2129;
        --clr-border:#38434f;
        --clr-text:#e4e9ef;
        --clr-text-body:#e4e9ef;
        --clr-muted:#a3b1c0;
        --clr-navy-900:#e4e9ef;
        --clr-blue-600:#8ec1ff;
        --clr-blue-500:#5aa2f7;
        --clr-blue-50:#1e2b3a;
    }
    /* Switching theme, and hovering, should settle rather than snap. Limited to
       containers - animating every element makes tables feel laggy. */
    body, .navbar-inverse, .panel, .portal-card, .portal-stat-card, .well,
    .form-control, .table > tbody > tr {
        transition:background-color .18s ease, border-color .18s ease, color .18s ease;
    }
    html[data-efyp-theme="dark"] body {
        background:#10151b !important;
        color:#e4e9ef;
    }
    html[data-efyp-theme="dark"] .portal-bg-layer { background:none; }
    html[data-efyp-theme="dark"] .navbar-inverse { background:#141b22; border-color:#232d38; }
    html[data-efyp-theme="dark"] .dropdown-menu .efyp-theme-toggle { color:#e4e9ef; border-color:#3a4653; }
    html[data-efyp-theme="dark"] .dropdown-menu .efyp-theme-toggle:hover,
    html[data-efyp-theme="dark"] .dropdown-menu .efyp-theme-toggle:focus { color:#fff; background:#26313d; }
    html[data-efyp-theme="dark"] .lecturer-report-list .report-table-toolbar {
        background:#212a34;
        border-color:#38434f;
    }
    html[data-efyp-theme="dark"] .lecturer-report-list .report-table-toolbar__hint { color:#a3b1c0; }
    html[data-efyp-theme="dark"] :is(
        .wrap > .container, .portal-card, .portal-panel, .portal-stat-card,
        .portal-login-panel--form, .panel, .well, .modal-content, .dropdown-menu,
        .popover, .list-group-item, .csv-column-menu
    ) {
        background:#1a2129 !important;
        color:#e4e9ef;
        border-color:#38434f;
    }
    html[data-efyp-theme="dark"] :is(.panel-heading, .panel-footer, .modal-header, .modal-footer) {
        background:#212a34;
        color:#e4e9ef;
        border-color:#38434f;
    }
    html[data-efyp-theme="dark"] :is(
        .portal-card h3, .portal-panel h2, .portal-panel h3, .portal-page-heading,
        .portal-login-panel--form h2, .control-label, .report-student-name,
        .lecturer-report-list .report-filters label
    ) { color:#e4e9ef !important; }
    html[data-efyp-theme="dark"] :is(
        .text-muted, .help-block, .portal-subtle, .portal-checklist, .summary,
        .report-student-id, .breadcrumb > .active, .footer
    ) { color:#a3b1c0 !important; }
    html[data-efyp-theme="dark"] a:not(.btn):not(.label):not(.portal-menu-card) { color:#8ec1ff; }
    html[data-efyp-theme="dark"] a:not(.btn):not(.label):not(.portal-menu-card):hover { color:#b9d8ff; }
    html[data-efyp-theme="dark"] .navbar-inverse .navbar-nav > li > a { color:#fff; }
    html[data-efyp-theme="dark"] .dropdown-menu > li > a { color:#e4e9ef; }
    html[data-efyp-theme="dark"] :is(.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus) {
        background:#26313d;
        color:#fff;
    }
    html[data-efyp-theme="dark"] .dropdown-menu .divider { background:#38434f; }
    html[data-efyp-theme="dark"] :is(.form-control, .input-group-addon, .select2-selection, .select2-dropdown, .datepicker, .datepicker-dropdown) {
        background:#141a21 !important;
        color:#e4e9ef !important;
        border-color:#5f6c7a !important;
    }
    html[data-efyp-theme="dark"] .form-control::placeholder { color:#9aa8b6; opacity:1; }
    html[data-efyp-theme="dark"] .form-control:focus {
        background:#182029 !important;
        border-color:#5aa2f7 !important;
        box-shadow:0 0 0 3px rgba(90,162,247,.22) !important;
    }
    html[data-efyp-theme="dark"] .form-control:disabled,
    html[data-efyp-theme="dark"] .form-control[readonly] { background:#232b34 !important; color:#a3b1c0 !important; }
    html[data-efyp-theme="dark"] .has-error .form-control { border-color:#e98b8b !important; }
    html[data-efyp-theme="dark"] .has-error :is(.help-block, .control-label) { color:#f6c3c0 !important; }
    html[data-efyp-theme="dark"] .has-success .form-control { border-color:#7fce9b !important; }
    html[data-efyp-theme="dark"] .select2-selection__rendered { color:#e4e9ef !important; }
    html[data-efyp-theme="dark"] .select2-results__option[aria-selected="true"] { background:#26313d; }
    html[data-efyp-theme="dark"] .table { background:#1a2129; color:#e4e9ef; }
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        border-color:#2c3642 !important;
    }
    html[data-efyp-theme="dark"] .table > thead > tr > th,
    html[data-efyp-theme="dark"] .detail-view > tbody > tr > th {
        background:#232d38 !important;
        color:#e4e9ef !important;
    }
    html[data-efyp-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
    html[data-efyp-theme="dark"] .lecturer-report-list .report-table tbody tr:nth-child(even) {
        background:#1d242c;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr:hover,
    html[data-efyp-theme="dark"] .lecturer-report-list .report-table tbody tr:hover {
        background:#26313d !important;
    }
    html[data-efyp-theme="dark"] .report-table-scroll { border-color:#38434f; }
    /* Bootstrap's contextual row states are pale fills (.active #f5f5f5,
       .success #dff0d8, .info #d9edf7, .warning #fcf8e3, .danger #f2dede).
       Untouched they became light rows carrying light text - which is what the
       "Total (Part 1)" row looked like, since it is <tr class="active">. */
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr.active > :is(td, th),
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(td, th).active {
        background-color:#2b3644 !important; color:#e4e9ef;
    }
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr.success > :is(td, th),
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(td, th).success {
        background-color:#1c3524 !important; color:#e4e9ef;
    }
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr.info > :is(td, th),
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(td, th).info {
        background-color:#1b2c3a !important; color:#e4e9ef;
    }
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr.warning > :is(td, th),
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(td, th).warning {
        background-color:#322715 !important; color:#f2d68d;
    }
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr.danger > :is(td, th),
    html[data-efyp-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(td, th).danger {
        background-color:#34211f !important; color:#f6c3c0;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr.active:hover > :is(td, th) {
        background-color:#33404f !important;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr.success:hover > :is(td, th) {
        background-color:#23422d !important;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr.info:hover > :is(td, th) {
        background-color:#223749 !important;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr.warning:hover > :is(td, th) {
        background-color:#3d301a !important;
    }
    html[data-efyp-theme="dark"] .table-hover > tbody > tr.danger:hover > :is(td, th) {
        background-color:#412926 !important;
    }
    html[data-efyp-theme="dark"] .lecturer-report-list .report-action a:hover { background:#1e2b3a; }
    html[data-efyp-theme="dark"] :is(.pagination > li > a, .pagination > li > span, .nav-tabs > li.active > a) {
        background:#212a34;
        color:#e4e9ef;
        border-color:#38434f;
    }
    html[data-efyp-theme="dark"] .pagination > .active > :is(a, span) {
        background:#24405f; color:#dbeafe; border-color:#3a4653;
    }
    html[data-efyp-theme="dark"] .pagination > .disabled > :is(a, span) { color:#8c98a6; }
    html[data-efyp-theme="dark"] .nav-tabs { border-color:#38434f; }
    html[data-efyp-theme="dark"] .nav > li > a:hover,
    html[data-efyp-theme="dark"] .nav > li > a:focus { background:#26313d; }
    html[data-efyp-theme="dark"] .close { color:#e4e9ef; text-shadow:none; opacity:.85; }
    html[data-efyp-theme="dark"] :is(.portal-note, .alert-info) { background:#1b2c3a; color:#cfe7fb; border-color:#33526b; }
    html[data-efyp-theme="dark"] .alert-success { background:#16301f; color:#b7e9c6; border-color:#2f6b45; }
    html[data-efyp-theme="dark"] .alert-warning { background:#322715; color:#f2d68d; border-color:#6d5726; }
    html[data-efyp-theme="dark"] .alert-danger  { background:#34211f; color:#f6c3c0; border-color:#7a4340; }
    /* Bootstrap's pills carry white text on mid-tone fills; on a dark page they
       need deeper fills to keep that text legible. */
    html[data-efyp-theme="dark"] .label-default { background:#4a5563; }
    html[data-efyp-theme="dark"] .label-success { background:#2f7d45; }
    html[data-efyp-theme="dark"] .label-warning { background:#8a6218; color:#fff; }
    html[data-efyp-theme="dark"] .label-danger  { background:#8f3a3a; }
    html[data-efyp-theme="dark"] .label-info    { background:#2b6382; }
    html[data-efyp-theme="dark"] :is(pre, code) { background:#212a34; color:#e0c087; border-color:#2c3642; }
    html[data-efyp-theme="dark"] hr { border-color:#38434f; }
    html[data-efyp-theme="dark"] * { scrollbar-color:#4a5563 #151b22; }

    /* ── Dashboard function cards ─────────────────────────────────────
       Light mode gives each card a full-width pastel icon band (lavender admin,
       mint coordinator, peach lecturer). On a dark page those read as glaring
       stripes. But the icons range from bright to near-black line art
       (report.png is effectively #000), so simply darkening the band would make
       several vanish. Instead the band goes dark and role-tinted, and the icon
       sits on a tile coloured EXACTLY as the light-mode band was - so every icon
       keeps precisely the contrast it was drawn for, and the pale area shrinks
       from a stripe to a small tile. */
    html[data-efyp-theme="dark"] {
        --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 8px 20px -6px rgba(0,0,0,.55);
        --shadow-hover:0 12px 30px -8px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);
    }
    html[data-efyp-theme="dark"] .portal-menu-card { background:#1a2129; border-color:#38434f; }
    html[data-efyp-theme="dark"] .portal-menu-card__icon::after {
        background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card__icon img {
        box-sizing:content-box;
        padding:10px;
        border-radius:16px;
        box-shadow:0 2px 6px rgba(0,0,0,.35);
        filter:none;
    }
    html[data-efyp-theme="dark"] .portal-menu-card--admin .portal-menu-card__icon {
        background:linear-gradient(135deg, #251e3f 0%, #342a62 60%, #41337a 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--admin .portal-menu-card__icon img {
        background:linear-gradient(135deg, #ede9fe 0%, #ddd6fe 55%, #c4b5fd 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--coord .portal-menu-card__icon {
        background:linear-gradient(135deg, #10302c 0%, #174540 60%, #1d5750 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--coord .portal-menu-card__icon img {
        background:linear-gradient(135deg, #dff7f4 0%, #c7f2ec 55%, #99e7dc 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--lecturer .portal-menu-card__icon {
        background:linear-gradient(135deg, #30230f 0%, #45321a 60%, #58401f 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--lecturer .portal-menu-card__icon img {
        background:linear-gradient(135deg, #fff1df 0%, #ffe3bf 55%, #ffd08d 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--student .portal-menu-card__icon {
        background:linear-gradient(135deg, #0b1524 0%, #0f1f35 60%, #142845 100%);
    }
    html[data-efyp-theme="dark"] .portal-menu-card--student .portal-menu-card__icon img {
        background:linear-gradient(135deg, #1e3a5f 0%, #2563eb 60%, #3b82f6 100%);
    }
    /* A thin divider in the role's own hue separates the band from the label
       area - structure that does not depend on the band being bright, which the
       student band cannot be without swallowing its blue tile. */
    html[data-efyp-theme="dark"] .portal-menu-card--admin    .portal-menu-card__icon { box-shadow:inset 0 -2px 0 rgba(167,139,250,.55); }
    html[data-efyp-theme="dark"] .portal-menu-card--coord    .portal-menu-card__icon { box-shadow:inset 0 -2px 0 rgba(45,212,191,.50); }
    html[data-efyp-theme="dark"] .portal-menu-card--lecturer .portal-menu-card__icon { box-shadow:inset 0 -2px 0 rgba(251,191,36,.50); }
    html[data-efyp-theme="dark"] .portal-menu-card--student  .portal-menu-card__icon { box-shadow:inset 0 -2px 0 rgba(96,165,250,.60); }
    /* Hover rings: the light-mode hues are a touch dim against dark cards. */
    html[data-efyp-theme="dark"] .portal-menu-card--admin:hover    { border-color:#a78bfa; box-shadow:var(--shadow-hover), 0 0 0 1px #a78bfa; }
    html[data-efyp-theme="dark"] .portal-menu-card--coord:hover    { border-color:#2dd4bf; box-shadow:var(--shadow-hover), 0 0 0 1px #2dd4bf; }
    html[data-efyp-theme="dark"] .portal-menu-card--lecturer:hover { border-color:#fbbf24; box-shadow:var(--shadow-hover), 0 0 0 1px #fbbf24; }
    html[data-efyp-theme="dark"] .portal-menu-card--student:hover  { border-color:#60a5fa; box-shadow:var(--shadow-hover), 0 0 0 1px #60a5fa; }
    html[data-efyp-theme="dark"] .portal-menu-card:focus-visible   { outline:2px solid #8ec1ff; outline-offset:3px; }
    @media (max-width:767px) {
        html[data-efyp-theme="dark"] .portal-menu-card__icon img { padding:8px; border-radius:13px; }
    }

    /* ── Marking module ──────────────────────────────────────────────
       These live in the module's own inline styles as pale tints, so in dark
       mode they were light blocks carrying light text - the worst contrast on
       the page. Same meaning, same at-a-glance column cue, dark values. */
    html[data-efyp-theme="dark"] .mk-col-supervisor     { background:#1c2a20 !important; }
    html[data-efyp-theme="dark"] .mk-col-examiner       { background:#2c2419 !important; }
    html[data-efyp-theme="dark"] .mk-col-cosupervisor   { background:#182830 !important; }
    html[data-efyp-theme="dark"] th.mk-col-supervisor   { background:#24382a !important; }
    html[data-efyp-theme="dark"] th.mk-col-examiner     { background:#3a2f1d !important; }
    html[data-efyp-theme="dark"] th.mk-col-cosupervisor { background:#1f3540 !important; }
    html[data-efyp-theme="dark"] .mk-readonly       { color:#a3b1c0; }
    /* The Feedback panel greys out a cell the role does not comment on with an
       inline background:#f2f2f2. Inline styles outrank a stylesheet, so this is
       the one place !important is the only way to reach it. */
    html[data-efyp-theme="dark"] #mk-feedback td[style*="background"] {
        background:#232b34 !important;
    }
    html[data-efyp-theme="dark"] .mk-sheet-scroll   { border-color:#38434f; }
    html[data-efyp-theme="dark"] .mk-remark-shown   { color:#a3b1c0; border-left-color:#3a4653; }
    html[data-efyp-theme="dark"] .mk-submit-msg     { color:#f6a9a5 !important; }
    html[data-efyp-theme="dark"] .mk-scale:focus {
        border-color:#7cb85f !important;
        box-shadow:0 0 0 3px rgba(124,184,95,.28) !important;
    }
    html[data-efyp-theme="dark"] #mk-flash { box-shadow:0 6px 20px rgba(0,0,0,.55); }
    /* The 0-5 picker is a floating panel over the sheet: it needs to read as
       raised, which on dark means a lighter fill, not a heavier shadow. */
    html[data-efyp-theme="dark"] .mk-picker {
        background:#212a34; border-color:#3a4653; box-shadow:0 8px 22px rgba(0,0,0,.55);
    }
    html[data-efyp-theme="dark"] .mk-picker button {
        background:#283341; border-color:#3a4653; color:#e4e9ef;
    }
    html[data-efyp-theme="dark"] .mk-picker button:hover {
        background:#3f7a35; border-color:#4d8f40; color:#fff;
    }
    html[data-efyp-theme="dark"] .mk-picker-clear { color:#f19a96 !important; }
    html[data-efyp-theme="dark"] .mk-picker-clear:hover {
        background:#8f3a3a !important; border-color:#a34444 !important; color:#fff !important;
    }
    /* Coordinator listings: the toolbar and table headers are set inline on
       .marking-workspace, which no global rule reached. */
    html[data-efyp-theme="dark"] .marking-workspace { --mk-border:#38434f; --mk-ink:#e4e9ef; }
    html[data-efyp-theme="dark"] .marking-workspace .mk-toolbar {
        background:#212a34; border-color:#38434f;
    }
    html[data-efyp-theme="dark"] .marking-workspace .table > thead > tr > th {
        background:#232d38 !important; color:#e4e9ef; border-bottom-color:#3a4653;
    }
    html[data-efyp-theme="dark"] .marking-workspace .table-striped > tbody > tr:nth-of-type(odd) {
        background:#1d242c;
    }
    html[data-efyp-theme="dark"] .marking-workspace .table > tbody > tr:hover { background:#26313d; }
    html[data-efyp-theme="dark"] .marking-workspace .mk-rownum      { color:#9aa8b6; }
    html[data-efyp-theme="dark"] .marking-workspace .mk-result-count { color:#a3b1c0; }
    html[data-efyp-theme="dark"] .marking-workspace .mk-status-filters [aria-current="true"] {
        outline-color:#8ec1ff;
    }
    html[data-efyp-theme="dark"] .marking-workspace :is(a,button,select,input):focus-visible {
        outline-color:#8ec1ff;
    }
}
@media print {
    .efyp-theme-item { display:none !important; }
}