/* /ComingSoon.razor.rz.scp.css */
.soon-head[b-o2hckbnm8p] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.soon-head h1[b-o2hckbnm8p] { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink); }
.soon-head .sub[b-o2hckbnm8p] { margin: 0; color: var(--muted); font-size: 13.5px; }
.stage-pill[b-o2hckbnm8p] { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.stage-pill.ready[b-o2hckbnm8p] { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent);
    background: color-mix(in srgb, var(--good) 10%, transparent); }

.soon-card[b-o2hckbnm8p] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 44px 32px; text-align: center; display: flex;
    flex-direction: column; align-items: center; gap: 12px; }
.soon-ic[b-o2hckbnm8p] { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.soon-card h2[b-o2hckbnm8p] { margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); }
.soon-card p[b-o2hckbnm8p] { margin: 0; max-width: 440px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.soon-card code[b-o2hckbnm8p] { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 6px; font-size: 12px; color: var(--ink); }
/* /Components/ActionMenu.razor.rz.scp.css */
/* Shared Action dropdown — the AssignExaminer popup styling, verbatim. The .action-item children are
   rendered by the PARENT page (ChildContent carries the parent's CSS scope attribute, not this
   component's), so their rules must go through ::deep under an element this component owns. */
.action-menu[b-orvwzydx13] { position: relative; }
.action-menu > summary[b-orvwzydx13] { list-style: none; cursor: pointer; user-select: none; }
.action-menu > summary[b-orvwzydx13]::-webkit-details-marker { display: none; }
.action-menu > summary[b-orvwzydx13]::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.action-items[b-orvwzydx13] { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.action-items[b-orvwzydx13]  .action-item { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit;
    white-space: nowrap; }
.action-items[b-orvwzydx13]  .action-item:hover:not(:disabled) { background: var(--surface-2); }
.action-items[b-orvwzydx13]  .action-item:disabled { opacity: .55; cursor: default; }
/* /Components/AnswerSheetDetailsView.razor.rz.scp.css */
/* "Answer Sheet Details" view (legacy UploadedDataView) */
.details-head[b-92fbigyyyf] { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.details-head .section-head[b-92fbigyyyf] { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }

.form.cascade[b-92fbigyyyf] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-92fbigyyyf] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-92fbigyyyf] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form select[b-92fbigyyyf] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-92fbigyyyf] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-92fbigyyyf] { opacity: .6; }
.form .req[b-92fbigyyyf] { color: #c02b3c; }

.details-toolbar[b-92fbigyyyf] { justify-content: space-between; }
.uploaded-count b[b-92fbigyyyf] { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .form.cascade[b-92fbigyyyf] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-92fbigyyyf] { grid-template-columns: 1fr; } }
/* /Components/AppModal.razor.rz.scp.css */
.backdrop[b-r7a4sh9kr5] { position: fixed; inset: 0; background: rgba(15,17,40,.45); z-index: 60; }
.panel[b-r7a4sh9kr5] { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 61;
         width: calc(100vw - 32px); max-height: 90vh; overflow-y: auto;
         background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         box-shadow: var(--shadow); padding: 20px 22px; }
.panel.sm[b-r7a4sh9kr5] { max-width: 420px; }
.panel.md[b-r7a4sh9kr5] { max-width: 560px; }
.panel.lg[b-r7a4sh9kr5] { max-width: 760px; }
.panel.xl[b-r7a4sh9kr5] { max-width: min(1280px, 94vw); }
/* For the wide, table-heavy dialogs — Verify QP renders three question tables side by side and was
   still scrolling inside an xl panel. Takes nearly the whole viewport in both directions. */
.panel.full[b-r7a4sh9kr5] { max-width: min(1680px, 97vw); max-height: 94vh; }
/* Sticky so the X stays reachable in a tall, scrolling panel; the negative top/margin cancel the
   panel's own 20px top padding so the header sits flush before it sticks. */
.head[b-r7a4sh9kr5] { position: sticky; top: -20px; z-index: 2; display: flex; align-items: flex-start; gap: 12px;
        background: var(--surface); padding: 20px 0 10px; margin: -20px 0 0; }
.title[b-r7a4sh9kr5] { margin: 0; flex: 1 1 auto; font-size: 17px; font-weight: 700; color: var(--ink); }
.x[b-r7a4sh9kr5] { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 4px;
     background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--muted, #667085); }
.x:hover[b-r7a4sh9kr5] { color: var(--ink); background: rgba(15,17,40,.06); }
.x:focus-visible[b-r7a4sh9kr5] { outline: 2px solid var(--brand, #2f6cc9); outline-offset: 2px; }
.acts[b-r7a4sh9kr5] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* /Components/AttendanceCandidatesGrid.razor.rz.scp.css */
/* Drill-down view chrome. The grid, card, pager and banner styles come from app.css. */

.drill-actions[b-q529p926ak] { display: flex; align-items: center; gap: 10px; }

/* Legacy PresentViewSubjectNameLbl and friends: bold, medium, ForeColor="Green", centred. */
.subject-name[b-q529p926ak] { margin: 0 0 14px; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--good); }

.table-scroll[b-q529p926ak] { overflow-x: auto; }

.btn.ghost[b-q529p926ak] { background: transparent; }
/* /Components/AttendanceRosterGrid.razor.rz.scp.css */
/* Only what the shared design system does not carry: the in-row attendance select, the inline row-update
   button and the bulk action bar. .grid itself comes from app.css. */

.grid select[b-aohb3rhgz8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 8px; padding: 5px 8px; font-size: 12.5px; min-width: 150px; }
.grid select:disabled[b-aohb3rhgz8] { opacity: .65; cursor: default; background: transparent; border-color: transparent;
                        -webkit-appearance: none; appearance: none; padding-left: 0; }

/* Unified with the page's .btn (AttendanceReport.razor.css) — same padding/font-size on both. */
.btn[b-aohb3rhgz8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-aohb3rhgz8] { background: var(--track); }
.btn.primary[b-aohb3rhgz8] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-aohb3rhgz8] { filter: brightness(1.05); }
.btn.ghost[b-aohb3rhgz8] { background: transparent; }
.btn:disabled[b-aohb3rhgz8] { opacity: .6; cursor: default; }

.bulk-bar[b-aohb3rhgz8] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
.bulk-bar .msg[b-aohb3rhgz8] { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Default-view per-row Edit -> Update/Cancel pair (legacy CommandField). */
.row-update[b-aohb3rhgz8], .row-cancel[b-aohb3rhgz8] { margin-right: 6px; }

.sub[b-aohb3rhgz8] { color: var(--muted); font-size: 12.5px; }
/* /Components/AutoEvalCreditsWidget.razor.rz.scp.css */
/* Component-scoped bits app.css doesn't carry globally. .card and .sub come from app.css and
   reach this component fine (global CSS, unlike Blazor CSS isolation, is not scoped to one
   component) — everything below is markup this widget alone renders, so per Blazor CSS isolation
   it has to live here rather than in app.css or a sibling component's .razor.css. Same shape as
   AutoEvaluationResult.razor.css's .stats/.stat/.btn.small/.error rules (Tasks 13-14), adapted to
   this widget's own <div class="stat"><b>...</b><small>...</small></div> markup. */

.widget-head[b-g5cyy33y7h] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.widget-head h3[b-g5cyy33y7h] { margin: 0; }

.credits-grid[b-g5cyy33y7h] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 12px; }
.credits-grid .stat[b-g5cyy33y7h] { display: flex; flex-direction: column; gap: 4px; }
.credits-grid .stat b[b-g5cyy33y7h] { font-size: 24px; font-weight: 700; color: var(--ink); }
.credits-grid .stat small[b-g5cyy33y7h] { color: var(--faint); font-size: 12px; font-weight: 600; }

/* CreditStatus is a free-text string from the credits-dashboard SP (see
   AutoEvaluationRepository.cs / seed-auth.sql, which only ever seeds "Sufficient" — the SP's full
   value set isn't in this repo). "sufficient" gets the good color; every other status word we can
   anticipate reads as a shortfall and gets the bad color; anything unrecognized still gets the
   base .status treatment rather than no styling at all. */
.status[b-g5cyy33y7h] { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.status.sufficient[b-g5cyy33y7h] { color: var(--good); }
.status.insufficient[b-g5cyy33y7h], .status.low[b-g5cyy33y7h], .status.critical[b-g5cyy33y7h], .status.depleted[b-g5cyy33y7h], .status.shortfall[b-g5cyy33y7h] { color: var(--bad, #c0392b); }

.btn.small[b-g5cyy33y7h] { padding: 5px 10px; font-size: 12px; }

.error[b-g5cyy33y7h] { margin: 10px 0 0; color: var(--bad, #c0392b); font-size: 12.5px; }

/* QA round-8 A: the head now carries two controls (View AI Credit + Download Report). */
.head-actions[b-g5cyy33y7h] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The "flag not activated" state, reframed as a feature the institute can still buy rather than a
   warning about one that is broken. Warning orange across the whole card is what made it look wrong
   on the dashboard; the violet tile tokens are the same pair the dashboard already uses for its
   accent tiles and read as "premium", not "problem". The literal "not activated / ask your
   superadmin" wording now lives only on the .info-dot tooltip and the disabled Download button. */
.upsell[b-g5cyy33y7h] {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--tile-violet-bg); border: 1px solid color-mix(in srgb, var(--tile-violet) 24%, transparent);
}
.upsell-mark[b-g5cyy33y7h] {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    display: grid; place-items: center; font-size: 16px; line-height: 1;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.upsell-copy[b-g5cyy33y7h] { flex: 1 1 auto; min-width: 0; }
.upsell-title[b-g5cyy33y7h] {
    margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ink);
}
.upsell-sub[b-g5cyy33y7h] { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.upsell-badge[b-g5cyy33y7h] {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; color: var(--tile-violet);
    background: color-mix(in srgb, var(--tile-violet) 16%, transparent);
}
/* The message the card used to shout is parked here: hover/focus reveals it via the native tooltip,
   and aria-label carries the same text for screen readers, which never see a title on a <span>. */
.info-dot[b-g5cyy33y7h] {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    display: inline-grid; place-items: center; cursor: help;
    font-size: 10.5px; font-weight: 700; font-style: italic; line-height: 1;
    color: var(--faint); border: 1px solid var(--border); background: var(--surface);
}
.info-dot:hover[b-g5cyy33y7h], .info-dot:focus-visible[b-g5cyy33y7h] { color: var(--accent); border-color: var(--accent); outline: none; }
.upsell .btn.small[b-g5cyy33y7h] { flex: none; }

@media (max-width: 560px) {
    .upsell[b-g5cyy33y7h] { align-items: flex-start; flex-wrap: wrap; }
    .upsell .btn.small[b-g5cyy33y7h] { margin-left: 46px; }
}

/* "Know More" / "View AI Credit" while the flag is off: the pitch, then who to ask for it. */
.upsell-lead[b-g5cyy33y7h] { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }
.upsell-list[b-g5cyy33y7h] { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px;
               font-size: 13px; color: var(--muted); }
.upsell-cta[b-g5cyy33y7h] {
    margin: 0; padding: 10px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--ink);
    background: var(--tile-violet-bg);
    border: 1px solid color-mix(in srgb, var(--tile-violet) 24%, transparent);
}

/* "View AI Credit" breakdown: label/value pairs, values right-aligned and tabular so the figures
   line up down the column. */
.credit-detail[b-g5cyy33y7h] { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; margin: 0; }

/* Compact bar (Auto Evaluation page, QA #2531 round 2 C): title, the four figures inline, actions and
   a chevron on one row; the chevron opens the status + full breakdown in place. */
.credits-widget.compact .widget-head[b-g5cyy33y7h] { margin-bottom: 0; flex-wrap: wrap; }
.credits-inline[b-g5cyy33y7h] { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px;
                  font-size: 12px; font-weight: 600; color: var(--faint); }
.credits-inline b[b-g5cyy33y7h] { margin-right: 6px; font-size: 16px; font-weight: 700; color: var(--ink);
                    font-variant-numeric: tabular-nums; }
.btn.small.toggle[b-g5cyy33y7h] { padding: 5px 7px; }
.credit-panel[b-g5cyy33y7h] { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.credit-panel .credit-detail[b-g5cyy33y7h] { max-width: 460px; }
.credit-detail dt[b-g5cyy33y7h] { color: var(--muted); font-size: 13px; }
.credit-detail dd[b-g5cyy33y7h] { margin: 0; text-align: right; font-weight: 650; font-size: 13.5px;
                    font-variant-numeric: tabular-nums; color: var(--ink); }
/* /Components/BookletWorklist.razor.rz.scp.css */
/* Cascade filter bar. These rules are deliberately identical to AnswerSheetsView.razor.css so the Download
   Answer Sheets filters are visually the same control as the View Answer Sheets ones — same grid, same
   columns, same label/select/required-marker treatment, same breakpoints. Blazor scoped CSS does not reach
   into a child component from the host page, which is why they live here rather than on the page. */
.form.cascade[b-0i512a4p8s] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-0i512a4p8s] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-0i512a4p8s] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.req[b-0i512a4p8s] { color: #dc2626; margin-left: 3px; }
.form select[b-0i512a4p8s] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-0i512a4p8s] { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 900px) { .form.cascade[b-0i512a4p8s] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-0i512a4p8s] { grid-template-columns: 1fr; } }

/* Search is a cell of the same grid, spanning two columns so the input, its icon and the button fit. */
.search-cell[b-0i512a4p8s] { grid-column: span 2; }
@media (max-width: 560px) { .search-cell[b-0i512a4p8s] { grid-column: span 1; } }
.search-cell .search-wrap[b-0i512a4p8s] { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.search-cell .search-ico[b-0i512a4p8s] { position: relative; left: 28px; width: 0; color: var(--faint);
                           display: inline-flex; align-items: center; pointer-events: none; }
.search-cell .search[b-0i512a4p8s] { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--border);
                       background: var(--surface-2); color: var(--ink); border-radius: 9px;
                       padding: 8px 10px 8px 32px; font-size: 13.5px; }
.search-cell .search:focus[b-0i512a4p8s] { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-cell .btn[b-0i512a4p8s] { flex: none; padding: 8px 12px; }

/* Count + Export sit below the grid, matching the View page's action row. */
.toolbar.filter-actions[b-0i512a4p8s] { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.toolbar.filter-actions .export[b-0i512a4p8s] { margin-left: auto; }
.toolbar.filter-actions .count[b-0i512a4p8s] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* QA E1: search leads the filter card, left-aligned, above the cascade. */
.search-row[b-0i512a4p8s] { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.search-row .search-cell[b-0i512a4p8s] { margin: 0; min-width: min(420px, 100%); }
/* /Components/Breadcrumb.razor.rz.scp.css */
/* QA round-5 D: navigation labels sized up — the trail is the page's wayfinding. The last crumb
   IS the page title (pages render no h1 of their own), so it carries heading weight. */
.crumbs[b-speqmigga1] { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.crumbs a[b-speqmigga1] { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; }
.crumbs a:hover[b-speqmigga1] { color: var(--ink); }
.crumbs .home[b-speqmigga1] { color: var(--muted); }
.sep[b-speqmigga1] { color: var(--faint); user-select: none; }
.here[b-speqmigga1] { color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* /Components/DialogHost.razor.rz.scp.css */
[b-kv5hbu5iqq] .lead { margin: 0 0 10px; color: var(--ink); }
[b-kv5hbu5iqq] .lead.error { color: #c02b3c; font-weight: 600; }
[b-kv5hbu5iqq] .lead.success { color: #2f6cc9; font-weight: 600; }
[b-kv5hbu5iqq] .issues { margin: 0; padding-left: 22px; }
[b-kv5hbu5iqq] .issues li { background: rgba(220,38,38,.07); border-radius: 8px; padding: 8px 10px;
                    margin-bottom: 6px; color: var(--ink); }
[b-kv5hbu5iqq] .confirm-body { margin: 0; color: var(--ink); }
[b-kv5hbu5iqq] .confirm-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
[b-kv5hbu5iqq] .confirm-danger:hover { filter: brightness(1.06); background: #dc2626; }

/* Next-step shortcuts inside a success dialog (legacy ResultView button row). */
[b-kv5hbu5iqq] .shortcut-lead { margin: 14px 0 8px; color: var(--muted, #667085); font-size: .86rem; }
[b-kv5hbu5iqq] .shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
[b-kv5hbu5iqq] .shortcuts .shortcut { white-space: nowrap; }
/* /Components/OsmLogo.razor.rz.scp.css */
/* Same tile the "MP" crest used — accent gradient, fixed size, never squashed by a flex parent.
   `color` is the ink the SVG draws its rules and tick outline in; the sheet itself is white. */
.osm-logo[b-8hun1uteu5] {
    display: block;
    flex: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent);
    overflow: hidden;
}
.osm-logo svg[b-8hun1uteu5] { display: block; }
/* /Components/Pager.razor.rz.scp.css */
.pager[b-wpgkmv5rmq] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 2px 2px; }
.size[b-wpgkmv5rmq], .goto[b-wpgkmv5rmq] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.size select[b-wpgkmv5rmq] { padding: 5px 26px 5px 8px; }
.nums[b-wpgkmv5rmq] { display: flex; align-items: center; gap: 4px; }
.num[b-wpgkmv5rmq] { min-width: 34px; padding: 6px 8px; justify-content: center; }
.num.on[b-wpgkmv5rmq] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ellipsis[b-wpgkmv5rmq] { color: var(--faint); padding: 0 2px; user-select: none; }
.goto input[b-wpgkmv5rmq] { width: 56px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
              background: var(--surface); color: var(--ink); font: inherit; text-align: center; }
.goto input:focus[b-wpgkmv5rmq] { outline: 2px solid var(--accent); outline-offset: -1px; }
.goto .total[b-wpgkmv5rmq] { color: var(--faint); }
/* /Components/PlainSelect.razor.rz.scp.css */
.ps[b-mvt85i2eoz] { position: relative; display: block; }

/* Matches the native field it replaces: same border, radius, padding and font. */
.ps-field[b-mvt85i2eoz] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px;
}
.ps-field:focus-visible[b-mvt85i2eoz] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ps-field:disabled[b-mvt85i2eoz] { opacity: .6; cursor: default; }
.ps.open .ps-field[b-mvt85i2eoz] { border-color: var(--accent); }
.ps-text[b-mvt85i2eoz] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-caret[b-mvt85i2eoz] { flex: none; color: var(--muted); font-size: 11px; }

/* Absolutely positioned under the field, so it can never flip above it. */
.ps-list[b-mvt85i2eoz] {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
    margin: 0; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow);
}
/* QA round-6 C: the filter overlays the field's exact rect (combobox style), so typing happens
   in the field itself rather than in a box inside the list frame. Same shape as .ps-field. */
.ps-filter[b-mvt85i2eoz] {
    position: absolute; inset: 0; z-index: 51; box-sizing: border-box; margin: 0;
    border: 1px solid var(--accent); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px;
}
.ps-filter:focus[b-mvt85i2eoz] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ps-filter[b-mvt85i2eoz]::placeholder { color: var(--muted); opacity: .8; }
.ps-opts[b-mvt85i2eoz] { margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.ps-empty[b-mvt85i2eoz] { padding: 7px 10px; font-size: 13px; color: var(--muted); }
.ps-opt[b-mvt85i2eoz] { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.ps-opt:hover[b-mvt85i2eoz] { background: var(--surface-2); }
.ps-opt.sel[b-mvt85i2eoz] { background: var(--surface-2); font-weight: 600; }

/* Sits under the list but over everything else, so an outside click closes it. */
.ps-catch[b-mvt85i2eoz] { position: fixed; inset: 0; z-index: 40; background: transparent; }
/* /Components/RichTextEditor.razor.rz.scp.css */
.rte[b-v5mo6eu7b9] { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }

.rte-toolbar[b-v5mo6eu7b9] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rte-toolbar button[b-v5mo6eu7b9] { border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    cursor: pointer; border-radius: 6px; padding: 3px 8px; font-size: 12.5px; line-height: 1.4; min-width: 28px; }
.rte-toolbar button:hover[b-v5mo6eu7b9] { background: var(--track); }
.rte-toolbar .sep[b-v5mo6eu7b9] { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* Format / Font / Size command menus. */
.rte-menu[b-v5mo6eu7b9] { border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    border-radius: 6px; padding: 3px 4px; font-size: 12.5px; line-height: 1.4; cursor: pointer; max-width: 130px; }

/* Colour wells: the native picker is the control, the swatch is what it looks like. */
.rte-color[b-v5mo6eu7b9] { position: relative; display: inline-flex; cursor: pointer; }
.rte-color input[type="color"][b-v5mo6eu7b9] { position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: 0; padding: 0; cursor: pointer; }
.rte-color .swatch[b-v5mo6eu7b9] { border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
    padding: 3px 8px; font-size: 12.5px; font-weight: 700; line-height: 1.4; min-width: 28px; text-align: center; }
.rte-color:hover .swatch[b-v5mo6eu7b9] { background: var(--track); }
.rte-color .swatch.fg[b-v5mo6eu7b9] { border-bottom: 3px solid #222; }
.rte-color .swatch.bg[b-v5mo6eu7b9] { border-bottom: 3px solid #ffd400; }

.rte-toolbar button.ico[b-v5mo6eu7b9] { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; }
.rte-toolbar button.ico svg path[b-v5mo6eu7b9] { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.rte-toolbar button.source-btn.on[b-v5mo6eu7b9] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Link bar (replaces window.prompt, which dropped the selection it needed). */
.rte-linkbar[b-v5mo6eu7b9] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rte-linkbar input[b-v5mo6eu7b9] { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
    font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.rte-linkbar .link-url[b-v5mo6eu7b9] { flex: 1 1 220px; min-width: 0; }
.rte-linkbar .link-text[b-v5mo6eu7b9] { flex: 1 1 160px; min-width: 0; }
.rte-linkbar button[b-v5mo6eu7b9] { border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
    font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--ink); }
.rte-linkbar button.apply[b-v5mo6eu7b9] { background: var(--accent); border-color: var(--accent); color: #fff; }

.rte-body[b-v5mo6eu7b9] { min-height: 220px; max-height: 460px; overflow-y: auto; padding: 10px 12px;
    font-size: 13.5px; color: var(--ink); line-height: 1.5; outline: none; }
.rte-body:focus[b-v5mo6eu7b9] { box-shadow: inset 0 0 0 2px var(--accent); }
.rte-body:empty[b-v5mo6eu7b9]::before { content: "Write the email body…"; color: var(--muted); }

/* Source view: same footprint as the formatted body so the card does not jump on toggle. */
.rte-source[b-v5mo6eu7b9] { display: block; width: 100%; box-sizing: border-box; min-height: 220px; max-height: 460px;
    padding: 10px 12px; border: 0; outline: none; resize: vertical; background: var(--surface);
    color: var(--ink); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
/* /Components/SearchBox.razor.rz.scp.css */
.search-box[b-5i6557av67] { position: relative; display: inline-flex; align-items: center; }
.search-box .search[b-5i6557av67] { padding-right: 32px; }
.search-box .go[b-5i6557av67] { position: absolute; right: 4px; width: 26px; height: 26px; border: none;
                  background: transparent; color: var(--muted); cursor: pointer;
                  display: grid; place-items: center; border-radius: 7px; }
.search-box .go:hover[b-5i6557av67] { color: var(--accent); background: var(--surface-2); }
/* /Components/SessionMonitor.razor.rz.scp.css */
/* Idle-timeout warning (ePravesh-style). Sits above everything, including the layout's menu backdrop. */

.session-backdrop[b-fj4e5p8eyd] { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1000; }

.session-dialog[b-fj4e5p8eyd] {
    position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
    padding: 28px 28px 24px;
    text-align: center;
}

/* Amber clock badge */
.session-dialog .badge[b-fj4e5p8eyd] {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--warn) 14%, var(--surface));
    color: var(--warn);
}

.session-dialog h2[b-fj4e5p8eyd] { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.session-dialog .sub[b-fj4e5p8eyd] { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }

.session-dialog .rule[b-fj4e5p8eyd] { height: 1px; background: var(--border); margin: 0 -4px 14px; }

.session-dialog .remaining-label[b-fj4e5p8eyd] {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--faint); margin-bottom: 2px;
}

.session-dialog .countdown[b-fj4e5p8eyd] {
    font-size: 56px; font-weight: 700; line-height: 1.15; color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.session-dialog .due[b-fj4e5p8eyd] { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }

/* Soft indigo info box */
.session-dialog .note[b-fj4e5p8eyd] {
    display: flex; align-items: flex-start; gap: 8px; text-align: left;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--ink);
    border-radius: 10px; padding: 10px 12px;
    font-size: 12.5px; line-height: 1.45;
    margin-bottom: 14px;
}
.session-dialog .note svg[b-fj4e5p8eyd] { flex: none; margin-top: 1px; color: var(--accent); }

.session-dialog .refresh-error[b-fj4e5p8eyd] {
    margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; text-align: left;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    border-radius: 10px; padding: 9px 12px;
}

.session-dialog .acts[b-fj4e5p8eyd] { display: flex; gap: 10px; }
.session-dialog .btn[b-fj4e5p8eyd] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    cursor: pointer; border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; }
.session-dialog .btn:hover[b-fj4e5p8eyd] { background: var(--track); }
.session-dialog .btn.primary[b-fj4e5p8eyd] { flex: 1; background: var(--accent); border-color: var(--accent); color: #fff; }
.session-dialog .btn.primary:hover[b-fj4e5p8eyd] { filter: brightness(1.05); }
.session-dialog .btn.ghost[b-fj4e5p8eyd] { background: transparent; }
/* /Components/TopicCriteriaMatrix.razor.rz.scp.css */
.matrix[b-qd0kactzg5] { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.matrix thead th[b-qd0kactzg5] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                    text-transform: uppercase; padding: 6px 10px 10px; border-bottom: 1px solid var(--border); }
.matrix tbody td[b-qd0kactzg5] { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.matrix tbody tr:last-child td[b-qd0kactzg5] { border-bottom: none; }
.ta-c[b-qd0kactzg5] { text-align: center; }

.matrix select[b-qd0kactzg5], .matrix input[b-qd0kactzg5] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 8px; padding: 6px 8px; font-size: 13px; font-family: inherit; }
.matrix input[type="number"][b-qd0kactzg5] { width: 64px; text-align: center; }
.matrix select.row-topic[b-qd0kactzg5], .matrix select.row-qtype[b-qd0kactzg5] { min-width: 160px; }
.matrix select:focus[b-qd0kactzg5], .matrix input:focus[b-qd0kactzg5] { outline: 2px solid var(--accent); outline-offset: -1px; }

.link-btn[b-qd0kactzg5] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); }
.link-btn.del[b-qd0kactzg5] { color: #c02b3c; }
.link-btn:hover[b-qd0kactzg5] { filter: brightness(1.12); }

.pad[b-qd0kactzg5] { padding: 4px 0 0; }
.btn.add-row[b-qd0kactzg5] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
               border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; }
.btn.add-row:hover[b-qd0kactzg5] { background: var(--track); }
/* /DynamicGrid.razor.rz.scp.css */
.dyn-scroll[b-a6cb4jsfyk] { overflow-x:auto; width:100%; }
.dyn-grid[b-a6cb4jsfyk] { border-collapse:collapse; white-space:nowrap; }
.dyn-grid th[b-a6cb4jsfyk], .dyn-grid td[b-a6cb4jsfyk] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.dyn-grid th[b-a6cb4jsfyk] { color:var(--muted); font-weight:600; background:var(--surface); position:sticky; top:0; }
.dyn-grid td:first-child[b-a6cb4jsfyk], .dyn-grid th:first-child[b-a6cb4jsfyk] { font-weight:600; }
/* /Layout/MainLayout.razor.rz.scp.css */
/* Theme tokens live in wwwroot/css/app.css (global, since :root/body are outside this component's render tree) */

.shell[b-zgjr54dedd] { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

/* Sidebar */
.side[b-zgjr54dedd] { background: var(--surface); border-right: 1px solid var(--border);
        display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; }
.brand[b-zgjr54dedd] { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.brand-logo[b-zgjr54dedd] { max-width: 100%; max-height: 46px; object-fit: contain; }
/* The product mark (Components/OsmLogo.razor) draws its own tile; the sidebar only lends it the
   drop shadow the "MP" crest carried. */
.brand[b-zgjr54dedd]  .osm-logo { box-shadow: var(--shadow); }
.brand small[b-zgjr54dedd] { display: block; color: var(--faint); font-size: 11px; letter-spacing: .04em; }
.brand b[b-zgjr54dedd] { font-size: 14px; letter-spacing: -.01em; }
.nav[b-zgjr54dedd] { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

/* NavLink renders its own <a> in a child component, so MainLayout's scope attribute never lands on
   it — ::deep pierces the scope so the nav reset + active/hover states reach those anchors (without
   it they fall back to the browser's default blue-underlined link style). */
.nav[b-zgjr54dedd]  a { position: relative; display: flex; align-items: center; gap: 12px;
                padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none;
                font-size: 14px; font-weight: 500; letter-spacing: -.005em; cursor: pointer;
                transition: background .15s, color .15s; }
.nav[b-zgjr54dedd]  a .ico { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center;
                     justify-content: center; opacity: .8; transition: opacity .15s; }
.nav[b-zgjr54dedd]  a:hover { background: var(--surface-2); color: var(--ink); }
.nav[b-zgjr54dedd]  a:hover .ico { opacity: 1; }
.nav[b-zgjr54dedd]  a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nav[b-zgjr54dedd]  a.active { background: color-mix(in srgb, var(--accent) 12%, transparent);
                       color: var(--accent); font-weight: 650; }
.nav[b-zgjr54dedd]  a.active .ico { opacity: 1; }
/* accent rail on the active item */
.nav[b-zgjr54dedd]  a.active::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px;
                               width: 3px; border-radius: 3px; background: var(--accent); }

/* Collapsed (icon-rail) sidebar — hamburger toggles .collapsed on .shell */
.shell.collapsed[b-zgjr54dedd] { grid-template-columns: 74px 1fr; }
.shell.collapsed .side[b-zgjr54dedd] { padding: 18px 12px; }
.shell.collapsed .brand[b-zgjr54dedd] { justify-content: center; padding: 6px 0 18px; }
.shell.collapsed .brand .brand-txt[b-zgjr54dedd] { display: none; }
.shell.collapsed .brand-logo[b-zgjr54dedd] { max-height: 34px; }
.shell.collapsed .nav[b-zgjr54dedd]  a { justify-content: center; padding: 10px; gap: 0; }
.shell.collapsed .nav[b-zgjr54dedd]  a .lbl { display: none; }
.shell.collapsed .nav[b-zgjr54dedd]  a.active::before { display: none; }

/* Topbar */
.main[b-zgjr54dedd] { min-width: 0; display: flex; flex-direction: column; }
/* QA round-5 D: tighter chrome so grid rows land above the fold. */
.topbar[b-zgjr54dedd] { display: flex; align-items: center; justify-content: space-between;
          padding: 10px 28px; }
.topbar .left[b-zgjr54dedd] { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.hamb[b-zgjr54dedd] { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
        background: var(--surface); display: grid; place-items: center; cursor: pointer;
        color: var(--muted); transition: color .15s, background .15s; }
.hamb:hover[b-zgjr54dedd] { color: var(--ink); background: var(--surface-2); }
.topbar .actions[b-zgjr54dedd] { display: flex; gap: 10px; }
.iconbtn[b-zgjr54dedd] { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
           background: var(--surface); display: grid; place-items: center; cursor: pointer;
           color: var(--muted); font-size: 16px; box-shadow: var(--shadow);
           transition: color .15s, border-color .15s; }
.iconbtn:hover[b-zgjr54dedd] { color: var(--ink); }
.iconbtn.on[b-zgjr54dedd] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
              background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Topbar dropdown menus */
.menu-wrap[b-zgjr54dedd] { position: relative; }
.menu-backdrop[b-zgjr54dedd] { position: fixed; inset: 0; z-index: 40; }
.menu[b-zgjr54dedd] { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 210px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
        animation: menu-pop-b-zgjr54dedd .12s ease-out; }
.menu.wide[b-zgjr54dedd] { min-width: 230px; }
@keyframes menu-pop-b-zgjr54dedd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu[b-zgjr54dedd]  .menu-item, .menu .menu-item[b-zgjr54dedd] {
        display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
        padding: 9px 11px; border-radius: 9px; border: none; background: none; cursor: pointer;
        color: var(--ink); font-size: 13.5px; font-weight: 500; font-family: inherit;
        text-decoration: none; transition: background .13s, color .13s; }
.menu[b-zgjr54dedd]  .menu-item:hover, .menu .menu-item:hover[b-zgjr54dedd] { background: var(--surface-2); color: var(--accent); }
.menu[b-zgjr54dedd]  .menu-item .mi, .menu .menu-item .mi[b-zgjr54dedd] { color: var(--faint); display: inline-flex; }
.menu[b-zgjr54dedd]  .menu-item:hover .mi, .menu .menu-item:hover .mi[b-zgjr54dedd] { color: var(--accent); }
.menu .menu-item.danger:hover[b-zgjr54dedd] { color: #dc2626; background: color-mix(in srgb, #dc2626 8%, transparent); }
.menu .menu-item.danger:hover .mi[b-zgjr54dedd] { color: #dc2626; }

.content[b-zgjr54dedd] { padding: 2px 28px 28px; display: flex; flex-direction: column; gap: 14px; }

/* Footer — margin-top:auto pins it to the bottom of the viewport on short pages, and it simply
   follows the content on long ones (.main is the full-height flex column). */
.foot[b-zgjr54dedd] { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 16px 28px 20px; border-top: 1px solid var(--border);
        font-size: 12.5px; letter-spacing: -.005em; }
.foot a[b-zgjr54dedd] { color: var(--muted); text-decoration: none; transition: color .15s; }
.foot a:hover[b-zgjr54dedd] { color: var(--accent); text-decoration: underline; }
.foot a:focus-visible[b-zgjr54dedd] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.foot .sep[b-zgjr54dedd] { color: var(--faint); }

@media (max-width: 860px) {
  .shell[b-zgjr54dedd] { grid-template-columns: 1fr; }
  .side[b-zgjr54dedd] { display: none; }
}

/* QA A6: an observer with nothing granted gets this instead of the dashboard. */
.no-grants[b-zgjr54dedd] { padding: 28px; text-align: center; }
.no-grants h2[b-zgjr54dedd] { margin: 0 0 8px; font-size: 18px; color: var(--danger, #b91c1c); }
.no-grants p[b-zgjr54dedd] { margin: 0; color: var(--muted); max-width: 46ch; margin-inline: auto; line-height: 1.5; }
/* /Layout/ViewerLayout.razor.rz.scp.css */
/* Full-bleed single column: no sidebar grid, no header row — just the page's own content. */
.viewer-shell[b-8i2ksrand8] { min-height: 100vh; background: var(--bg); color: var(--ink); padding: 18px 22px 32px; }

@media (max-width: 700px) { .viewer-shell[b-8i2ksrand8] { padding: 14px 12px 24px; } }
/* /Pages/AcademicYearMaster.razor.rz.scp.css */
.cand-head[b-mbg0tc5hee] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-mbg0tc5hee] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-mbg0tc5hee] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-mbg0tc5hee] { color: var(--accent); }
.back :global(svg)[b-mbg0tc5hee] { transform: rotate(180deg); }

.card[b-mbg0tc5hee] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-mbg0tc5hee] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-mbg0tc5hee] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-mbg0tc5hee] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-mbg0tc5hee], .form label select[b-mbg0tc5hee], .form label textarea[b-mbg0tc5hee] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-mbg0tc5hee] { color: #dc2626; margin-left: 3px; }
.form input[b-mbg0tc5hee], .form select[b-mbg0tc5hee] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-mbg0tc5hee], .form select:focus[b-mbg0tc5hee] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-mbg0tc5hee] { opacity: .6; cursor: default; }

.actions[b-mbg0tc5hee] { display: flex; gap: 10px; margin-top: 18px; }
.btn[b-mbg0tc5hee] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-mbg0tc5hee] { background: var(--track); }
.btn.primary[b-mbg0tc5hee] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-mbg0tc5hee] { filter: brightness(1.05); }
.btn.ghost[b-mbg0tc5hee] { background: transparent; }
.btn:disabled[b-mbg0tc5hee] { opacity: .6; cursor: default; }

.list-head[b-mbg0tc5hee] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-mbg0tc5hee] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.search-row[b-mbg0tc5hee] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row select[b-mbg0tc5hee] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                      border-radius: 9px; padding: 8px 10px; font-size: 13.5px; max-width: 220px; }
.search-row select:focus[b-mbg0tc5hee] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-mbg0tc5hee] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-mbg0tc5hee] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-mbg0tc5hee] { width: 100%; border-collapse: collapse; }
.grid thead th[b-mbg0tc5hee] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-mbg0tc5hee] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-mbg0tc5hee] { border-bottom: none; }
.grid tbody tr:hover td[b-mbg0tc5hee] { background: var(--surface-2); }
.ta-c[b-mbg0tc5hee] { text-align: center; }

.link-btn[b-mbg0tc5hee] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-mbg0tc5hee] { color: #c02b3c; }
.link-btn:hover[b-mbg0tc5hee] { filter: brightness(1.12); }
.link-btn:disabled[b-mbg0tc5hee] { opacity: .5; cursor: default; }

.pager[b-mbg0tc5hee] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-mbg0tc5hee] { padding: 18px 4px; }
.sub[b-mbg0tc5hee] { color: var(--muted); }
.banner[b-mbg0tc5hee] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-mbg0tc5hee] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-mbg0tc5hee] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-mbg0tc5hee], .search-row select[b-mbg0tc5hee] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-mbg0tc5hee] { min-width: 150px; max-width: 210px; }
.head-actions[b-mbg0tc5hee] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-mbg0tc5hee]::before { content: "+"; margin-right: 3px; font-weight: 700; }

/* -- import drop-card (ported from ImportTimetable.razor.css) -- */
.dropzone[b-mbg0tc5hee] { position: relative; display: grid; place-items: center; min-height: 92px; margin-top: 6px; padding: 14px;
            border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
            text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover[b-mbg0tc5hee] { border-color: var(--accent); }
.dropzone:focus-within[b-mbg0tc5hee] { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-color: var(--accent); }
.dropzone .dz-copy[b-mbg0tc5hee] { display: grid; gap: 5px; }
.dropzone small[b-mbg0tc5hee] { color: var(--muted); font-weight: 400; }
.dropzone:has(input:disabled)[b-mbg0tc5hee] { opacity: .55; cursor: default; }
.file-input[b-mbg0tc5hee] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:disabled[b-mbg0tc5hee] { cursor: default; }
.file-meta[b-mbg0tc5hee] { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* /Pages/AddCampus.razor.rz.scp.css */
.pager[b-rqwm4otb5e] { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; }
.fld[b-rqwm4otb5e] { display: flex; flex-direction: column; gap: 4px; }
.fld > span[b-rqwm4otb5e] { font-size: .78rem; color: var(--muted); }
.fld input[b-rqwm4otb5e] {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
}

.head-actions[b-rqwm4otb5e] { display: flex; align-items: center; gap: 8px; }
.col-sr[b-rqwm4otb5e] { width: 80px; }
.col-id[b-rqwm4otb5e] { width: 110px; }

/* Import modal: template link and file picker. ::deep is required for the InputFile child
   component's <input>, which does not carry this component's scope attribute. */
.link-btn[b-rqwm4otb5e] { border: none; background: transparent; cursor: pointer; padding: 0; margin-bottom: 10px;
            font-weight: 600; font-size: 12.5px; color: var(--accent); }
.link-btn:hover:not(:disabled)[b-rqwm4otb5e] { text-decoration: underline; }
.link-btn:disabled[b-rqwm4otb5e] { color: var(--faint); cursor: default; }

.upload-pick[b-rqwm4otb5e] { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.file-btn[b-rqwm4otb5e] { position: relative; overflow: hidden; cursor: pointer; }
.file-btn[b-rqwm4otb5e]  .file-input { position: absolute; inset: 0; width: 100%; height: 100%;
                               opacity: 0; cursor: pointer; }
/* /Pages/AddRevalQwComment.razor.rz.scp.css */
.cand-head[b-xgskeoqvze] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-xgskeoqvze] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-xgskeoqvze] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-xgskeoqvze] { color: var(--ink); }

.card[b-xgskeoqvze] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-xgskeoqvze] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-xgskeoqvze] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar input[b-xgskeoqvze] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; min-width: 320px; }
.toolbar input:focus[b-xgskeoqvze] { outline: 2px solid var(--accent); outline-offset: -1px; }

.btn[b-xgskeoqvze] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-xgskeoqvze] { background: var(--track); }
.btn.primary[b-xgskeoqvze] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-xgskeoqvze] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-xgskeoqvze] { opacity: .55; cursor: default; }

.header-card[b-xgskeoqvze] { display: flex; gap: 42px; flex-wrap: wrap; }
.header-card .meta[b-xgskeoqvze] { display: flex; flex-direction: column; gap: 3px; }
.header-card .lbl[b-xgskeoqvze] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.header-card .val[b-xgskeoqvze] { color: var(--ink); font-size: 14px; font-weight: 600; }

.subject-head[b-xgskeoqvze] { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; }
.subject-head .subject-name[b-xgskeoqvze] { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.subject-head .meta-line[b-xgskeoqvze] { font-variant-numeric: tabular-nums; }

.table-scroll[b-xgskeoqvze] { overflow-x: auto; }
.grid[b-xgskeoqvze] { width: 100%; border-collapse: collapse; }
.grid thead th[b-xgskeoqvze] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-xgskeoqvze] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.grid tbody tr:last-child td[b-xgskeoqvze] { border-bottom: none; }
.grid tbody tr:hover td[b-xgskeoqvze] { background: var(--surface-2); }
.grid .nm[b-xgskeoqvze] { font-weight: 600; }
.grid .cmt-col[b-xgskeoqvze] { min-width: 320px; }
.grid .cmt[b-xgskeoqvze] { white-space: normal; min-width: 320px; }
.grid .cmt textarea[b-xgskeoqvze] { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.grid .cmt textarea:focus[b-xgskeoqvze] { outline: 2px solid var(--accent); outline-offset: -1px; }
.grid .cmt .charcount[b-xgskeoqvze] { display: block; margin-top: 3px; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.grid .cmt .row-err[b-xgskeoqvze] { margin-top: 4px; color: #c02b3c; font-size: 12px; font-weight: 600; }

.pad[b-xgskeoqvze] { padding: 22px 6px; }
.sub[b-xgskeoqvze] { color: var(--muted); font-size: 13px; }
/* /Pages/AnswerSheetCountReport.razor.rz.scp.css */
.fld[b-4ko8xektwj] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-4ko8xektwj] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.stat-row[b-4ko8xektwj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.stat[b-4ko8xektwj] {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.stat-num[b-4ko8xektwj] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-lbl[b-4ko8xektwj] {
    font-size: .8rem;
    color: var(--muted);
}

.grid-head[b-4ko8xektwj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.grid-head h3[b-4ko8xektwj] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.grid tfoot td[b-4ko8xektwj] {
    font-weight: 700;
    background: var(--track);
    border-top: 2px solid var(--border);
}

.head-actions[b-4ko8xektwj] {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* /Pages/AnswerSheets.razor.rz.scp.css */
.hub-head[b-z8k4tddcgh] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-z8k4tddcgh] { margin: 0; color: var(--muted); font-size: 13.5px; }

.hub-head[b-z8k4tddcgh]  .search-box { position: relative; display: flex; align-items: center; }
.hub-head[b-z8k4tddcgh]  .search-box .search-ico { position: absolute; left: 11px; color: var(--faint); display: inline-flex;
                          align-items: center; pointer-events: none; }
.hub-head[b-z8k4tddcgh]  .search-box .search { width: 260px; max-width: 100%; border: 1px solid var(--border); background: var(--surface-2);
                      color: var(--ink); border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13.5px; }
.hub-head[b-z8k4tddcgh]  .search-box .search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.card[b-z8k4tddcgh] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-z8k4tddcgh] { padding: 22px; }
.sub[b-z8k4tddcgh] { color: var(--faint); font-size: 13px; }

.group .group-head[b-z8k4tddcgh] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-z8k4tddcgh] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-z8k4tddcgh] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-z8k4tddcgh] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-z8k4tddcgh] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-z8k4tddcgh]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-z8k4tddcgh] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-z8k4tddcgh]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-z8k4tddcgh]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-z8k4tddcgh] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-z8k4tddcgh] { font-size: 14px; font-weight: 620; }
.txt small[b-z8k4tddcgh] { color: var(--faint); font-size: 12px; }
.arrow[b-z8k4tddcgh] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-z8k4tddcgh] { color: var(--accent); }

.link-card.soon[b-z8k4tddcgh] { cursor: default; opacity: .55; }
.link-card.soon:hover[b-z8k4tddcgh] { background: none; border-color: transparent; }
.link-card.soon .ic[b-z8k4tddcgh] { filter: grayscale(35%); }
.pill[b-z8k4tddcgh] { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 620px) {
  .hub-head[b-z8k4tddcgh] { flex-direction: column; align-items: stretch; }
  .hub-head[b-z8k4tddcgh]  .search-box .search { width: 100%; }
}

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-z8k4tddcgh] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-z8k4tddcgh] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-z8k4tddcgh]  .search-box { align-self: flex-start; }
.hub-head[b-z8k4tddcgh]  .search-box .search { width: min(420px, 100%); }
/* /Pages/AnswerSheetsView.razor.rz.scp.css */
.cand-head[b-hcvopihp69] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-hcvopihp69] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-hcvopihp69] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-hcvopihp69] { color: var(--ink); }

.card[b-hcvopihp69] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.form.cascade[b-hcvopihp69] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-hcvopihp69] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-hcvopihp69] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.req[b-hcvopihp69] { color: #dc2626; margin-left: 3px; }
.form select[b-hcvopihp69] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-hcvopihp69] { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 900px) { .form.cascade[b-hcvopihp69] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-hcvopihp69] { grid-template-columns: 1fr; } }

.toolbar[b-hcvopihp69] { display: flex; align-items: center; gap: 10px; }
.toolbar.filter-actions[b-hcvopihp69] { margin-top: 14px; flex-wrap: wrap; }
.toolbar.filter-actions .export[b-hcvopihp69] { margin-left: auto; }

/* Compact hint: rides along the counts row rather than claiming a padded block of its own. */
.counts-strip .note[b-hcvopihp69] { font-style: italic; color: var(--faint); font-size: 12px; }

.counts-strip[b-hcvopihp69] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px;
                font-size: 13px; color: var(--muted); padding: 2px 2px 12px; }

.table-scroll[b-hcvopihp69] { overflow-x: auto; }

.btn[b-hcvopihp69] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-hcvopihp69] { background: var(--track); }
.btn.ghost[b-hcvopihp69] { background: transparent; }
.btn:disabled[b-hcvopihp69] { opacity: .6; cursor: default; }

.grid[b-hcvopihp69] { width: 100%; border-collapse: collapse; }
.grid thead th[b-hcvopihp69] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-hcvopihp69] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-hcvopihp69] { border-bottom: none; }
.grid tbody tr:hover td[b-hcvopihp69] { background: var(--surface-2); }
.grid .nm[b-hcvopihp69] { font-weight: 600; }

.link[b-hcvopihp69] { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; }
.link:hover[b-hcvopihp69] { filter: brightness(1.1); }
.na[b-hcvopihp69] { color: var(--faint); font-size: 13px; }

.pad[b-hcvopihp69] { padding: 22px 6px; }
.sub[b-hcvopihp69] { color: var(--muted); }

.pager[b-hcvopihp69] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }
/* /Pages/AssignExam.razor.rz.scp.css */
.cand-head[b-4376q6y00y] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-4376q6y00y] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-4376q6y00y] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.card[b-4376q6y00y] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.form.cascade[b-4376q6y00y] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-4376q6y00y] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-4376q6y00y] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.req[b-4376q6y00y] { color: #dc2626; margin-left: 3px; }
.form select[b-4376q6y00y] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-4376q6y00y] { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 900px) { .form.cascade[b-4376q6y00y] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-4376q6y00y] { grid-template-columns: 1fr; } }

.exam-info .exam-row[b-4376q6y00y] { display: flex; align-items: center; gap: 16px; }
.exam-info .exam-name[b-4376q6y00y] { font-size: 13.5px; color: var(--ink); }
.exam-info .not-created[b-4376q6y00y] { font-size: 13.5px; font-weight: 600; color: #c02b3c; }
.exam-info .filters[b-4376q6y00y] { margin-top: 12px; }
.badge[b-4376q6y00y] { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px;
         font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.badge.credits[b-4376q6y00y] { margin-left: auto; }

.group-head[b-4376q6y00y] { display: flex; align-items: center; justify-content: space-between;
              font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              color: var(--faint); margin-bottom: 10px; }
/* Back button sits inside the (uppercase/letter-spaced) group-head — reset its own type so it
   reads as a normal button, not as part of the section-title styling. */
.back-to-main[b-4376q6y00y] { text-transform: none; letter-spacing: normal; font-size: 13px; }

.batch-panel .batch-form[b-4376q6y00y] { grid-template-columns: 1fr 1fr auto; align-items: end; }
.batch-panel .batch-action[b-4376q6y00y] { display: flex; }
@media (max-width: 900px) { .batch-panel .batch-form[b-4376q6y00y] { grid-template-columns: 1fr; } }

.counts-strip[b-4376q6y00y] { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--muted); margin: 8px 0 14px; }
.counts-strip b[b-4376q6y00y] { color: var(--ink); font-variant-numeric: tabular-nums; }

.table-scroll[b-4376q6y00y] { overflow-x: auto; }

.two-col[b-4376q6y00y] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col .col[b-4376q6y00y] { margin-bottom: 0; }
@media (max-width: 1100px) { .two-col[b-4376q6y00y] { grid-template-columns: 1fr; } }

.toolbar[b-4376q6y00y] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar[b-4376q6y00y]  .search-box { flex: 1; max-width: 420px; }
.toolbar[b-4376q6y00y]  .search-box .search { width: 100%; }
.toolbar .count[b-4376q6y00y] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.subject-context[b-4376q6y00y] { font-size: 13px; color: var(--muted); margin: -4px 0 10px; }
.subject-context b[b-4376q6y00y] { color: var(--ink); font-weight: 600; }

.btn[b-4376q6y00y] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-4376q6y00y] { background: var(--track); }
.btn.primary[b-4376q6y00y] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-4376q6y00y] { filter: brightness(1.05); }
.btn.ghost[b-4376q6y00y] { background: transparent; }
.btn.danger[b-4376q6y00y] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-4376q6y00y] { background: rgba(192,43,60,.08); }
.btn.danger-solid[b-4376q6y00y] { background: #c02b3c; border-color: #c02b3c; color: #fff; }
.btn.danger-solid:hover:not(:disabled)[b-4376q6y00y] { filter: brightness(1.05); }
/* Export ghost — explicit rule (was falling back to the base .btn) so intent is documented. */
.btn.export-assigned[b-4376q6y00y] { background: transparent; }
.btn:disabled[b-4376q6y00y] { opacity: .6; cursor: default; }

.actions-row[b-4376q6y00y] { display: flex; gap: 10px; }

/* Assigned-candidates view rows — same three-band layout as AssignExaminer's assigned view, so the two
   screens read identically: title+filter, a rule-separated actions band, then the counts above the grid. */
.assigned-filter-row[b-4376q6y00y] { margin-bottom: 10px; }
.assigned-filter-row h3[b-4376q6y00y] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.assigned-actions-row[b-4376q6y00y] { padding-top: 10px; border-top: 1px solid var(--border); }
/* The shared .toolbar .count rule pushes a lone count right with margin-left:auto; both counts belong
   together at the start of this row. */
.assigned-count-row[b-4376q6y00y] { margin: 10px 0 12px; gap: 18px; }
.assigned-count-row .count[b-4376q6y00y] { margin-left: 0; }

.grid[b-4376q6y00y] { width: 100%; border-collapse: collapse; }
.grid thead th[b-4376q6y00y] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-4376q6y00y] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-4376q6y00y] { border-bottom: none; }
.grid tbody tr:hover td[b-4376q6y00y] { background: var(--surface-2); }
.grid .nm[b-4376q6y00y] { font-weight: 600; }
.ta-c[b-4376q6y00y] { text-align: center; }

.pad[b-4376q6y00y] { padding: 22px 6px; }
.sub[b-4376q6y00y] { color: var(--muted); }

/* Head actions + Help modal (legacy AssignQPtoBatch HelpLinkBtn parity). */
.head-actions[b-4376q6y00y] { display: flex; align-items: center; gap: 14px; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */

.help-body h5[b-4376q6y00y] { margin: 14px 0 6px; }
.help-body h5:first-child[b-4376q6y00y] { margin-top: 0; }
.help-body p[b-4376q6y00y] { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.help-body ul[b-4376q6y00y] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }

/* /Pages/AssignExaminer.razor.rz.scp.css */
/* Assign Examiner (Manual) — page-specific styles. Shared look & feel (card, grid, toolbar,
   banner, pager, status-card, btn) comes from wwwroot/css/app.css. */

/* Filter grid — label above its control in an auto-fitting column, matching the legacy col-sm-3
   cells and the AssignSubject / Candidates / Attendance / AssignExam pages. */
.form.cascade[b-gk4tpzeeb5] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-gk4tpzeeb5] { margin-bottom: 12px; }
.filters:last-child[b-gk4tpzeeb5] { margin-bottom: 0; }

/* Action sits beside the first filter row, not stacked above it — legacy's own layout. Vertically
   centered against the row rather than stretched to its full height, so it stays a normal-sized button
   instead of a tall block. A fixed flex-basis (not auto) on both .action-menu and .action-spacer (row 2's
   blank stand-in, legacy's own empty col-sm-1) keeps every row's dropdown columns starting at the exact
   same x position. */
.action-and-filters[b-gk4tpzeeb5] { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.action-and-filters .action-menu[b-gk4tpzeeb5], .action-and-filters .action-spacer[b-gk4tpzeeb5] { flex: 0 0 88px; }
.action-and-filters .action-toggle[b-gk4tpzeeb5] { width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; }
.action-and-filters .form.cascade[b-gk4tpzeeb5] { flex: 1; min-width: 0; margin-bottom: 0; }
/* Fixed 4-up columns (not auto-fit) so Stream/Course/Semester/Subject never wrap onto a second line —
   that was stretching Action to double height. Row 2 reuses the same template so its columns line up
   under row 1's, exactly like legacy's fixed col-sm-2/3 grid (unused trailing columns just stay blank
   rather than the 2-3 live controls stretching to fill the row).
   Selector needs .form.cascade repeated — two classes beats the one-class .filters-row1/2 selector,
   so the .form.cascade auto-fit rule above was winning and wrapping Subject onto its own line. */
.form.cascade.filters-row1[b-gk4tpzeeb5], .form.cascade.filters-row2[b-gk4tpzeeb5] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Legacy's red "*" required-field marker (<font color="red">*</font>). */
.req[b-gk4tpzeeb5] { color: #c02b3c; font-weight: 700; }
/* min-width:0 lets a column shrink below the select's intrinsic width, so a long subject name
   cannot push the control out of the card. */
.form label[b-gk4tpzeeb5] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-gk4tpzeeb5], .form label input[b-gk4tpzeeb5] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-gk4tpzeeb5], .form label input:focus[b-gk4tpzeeb5] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-gk4tpzeeb5], .form label input:disabled[b-gk4tpzeeb5] { opacity: .55; cursor: not-allowed; }

/* Legacy TotalStudentsLbl/AssignedStudentLbl/RemainingStudentsLbl were blue (#2f6cc9) and bold. */
.status-card .count[b-gk4tpzeeb5] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-gk4tpzeeb5] { font-weight: 700; }

.toggle-assigned[b-gk4tpzeeb5], .back-unassigned[b-gk4tpzeeb5] { white-space: nowrap; }

/* Action dropdown (legacy "Action" button gathering the page's link-buttons) — same pattern as
   AssignModerator / AssignReval1 / AssignReval2. */
.action-menu[b-gk4tpzeeb5] { position: relative; }
.action-menu > summary[b-gk4tpzeeb5] { list-style: none; cursor: pointer; user-select: none; }
.action-menu > summary[b-gk4tpzeeb5]::-webkit-details-marker { display: none; }
.action-menu > summary[b-gk4tpzeeb5]::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.action-items[b-gk4tpzeeb5] { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.action-item[b-gk4tpzeeb5] { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; }
.action-item:hover[b-gk4tpzeeb5] { background: var(--surface-2); }
.action-item:disabled[b-gk4tpzeeb5] { opacity: .55; cursor: default; }
.action-bar[b-gk4tpzeeb5] { margin-bottom: 14px; }

/* Assigned-candidates view: title/filters row, then a dedicated actions row (Back / Remove / Export)
   below it, instead of nine controls fighting for space in one wrapping row. */
.assigned-filter-row[b-gk4tpzeeb5] { margin-bottom: 10px; }
.assigned-actions-row[b-gk4tpzeeb5] { padding-top: 10px; border-top: 1px solid var(--border); }
/* Total Count + selected, hard left and directly above the grid — same convention as the Timetable
   drill-down toolbars (data-testid="drill-count"). The shared .toolbar .count rule uses
   margin-left:auto to push a lone count to the right, which is wrong here since both counts belong
   together at the start of the row. */
.assigned-count-row[b-gk4tpzeeb5] { margin: 10px 0 12px; gap: 18px; }
.assigned-count-row .count[b-gk4tpzeeb5] { margin-left: 0; }

/* app.css sets .assign-panel to a flex row; this panel stacks its slot row under the selected-note. */
.assign-panel[b-gk4tpzeeb5] { display: block; }
.examiner-slots[b-gk4tpzeeb5] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }

.ac-wrap[b-gk4tpzeeb5] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-gk4tpzeeb5] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* text-overflow/overflow/white-space matter once an examiner is picked: "Name — email@long-domain.com"
   is longer than the box, and an unfocused text input's scroll position after that is browser-dependent —
   some browsers left it parked at the END of the value (the email), hiding the name entirely once focus
   moved elsewhere (e.g. to the evaluation-date field). Truncating with an ellipsis pins the visible text
   to the START (the name) regardless of focus history; the title attribute (below) still surfaces the
   full "Name — email" on hover for the truncated case. */
.ac-input[b-gk4tpzeeb5] { width: 260px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-input:focus[b-gk4tpzeeb5] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-gk4tpzeeb5] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 260px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 260px; overflow-y: auto; }
/* Each match shows the examiner's name and email as two lines, not one squashed "Name — email" string. */
.ac-item[b-gk4tpzeeb5] { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0;
    border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); padding: 8px 10px;
    cursor: pointer; }
.ac-item:last-child[b-gk4tpzeeb5] { border-bottom: 0; }
.ac-item:hover[b-gk4tpzeeb5], .ac-item:focus-visible[b-gk4tpzeeb5] { background: var(--surface-2); }
.ac-item-name[b-gk4tpzeeb5] { font-size: 13px; font-weight: 600; }
.ac-item-email[b-gk4tpzeeb5] { font-size: 12px; color: var(--muted); }
/* Searching… / No examiners found. — same slot the results list occupies, so nothing jumps. */
.ac-status[b-gk4tpzeeb5] { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.ac-hint[b-gk4tpzeeb5] { font-size: 12px; color: #c02b3c; }

/* Help modal (legacy HelpLinkBtn -> HelpDiv) and the head action row. */
.head-actions[b-gk4tpzeeb5] { display: flex; align-items: center; gap: 10px; }
.help-body h5[b-gk4tpzeeb5] { margin: 14px 0 6px; }
.help-body h5:first-child[b-gk4tpzeeb5] { margin-top: 0; }
.help-body p[b-gk4tpzeeb5] { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.help-body ul[b-gk4tpzeeb5] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.help-body ul li[b-gk4tpzeeb5] { padding: 2px 0; }

/* Assign confirmation (legacy AssignExaminerfunction swal). */
.confirm-modal h3[b-gk4tpzeeb5] { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.confirm-modal p[b-gk4tpzeeb5] { margin: 0; font-size: 13px; color: var(--muted); }

/* Assign popup (legacy BatchDiv / BatchModalPopupExtender) — the examiner slots and evaluation date
   belong in a dialog, not stacked under the grid. Legacy stacks each examiner + its end-schedule field
   as its own full-width row (col-sm-12), not a side-by-side grid — a narrow single column leaves the
   autocomplete list room to open without the popup needing an inner scroll to reach it. */
.assign-panel .selected-note[b-gk4tpzeeb5] { margin: 0 0 14px; font-size: 13px; }
.assign-panel .examiner-slots[b-gk4tpzeeb5] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.assign-panel .ac-wrap[b-gk4tpzeeb5] { position: relative; min-width: 0; }
.assign-panel .ac-input[b-gk4tpzeeb5] { width: 100%; box-sizing: border-box; }
/* Evaluation last date reuses .ac-wrap/.ac-label — the same label-above-input row every examiner slot
   uses, so the popup reads as one consistent column instead of the date field looking like an outlier. */
.assign-panel .eval-date-input[b-gk4tpzeeb5] { display: block; width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.assign-panel .eval-date-input:focus[b-gk4tpzeeb5] { outline: 2px solid var(--accent); outline-offset: -1px; }
.assign-panel-divider[b-gk4tpzeeb5] { border: none; border-top: 1px solid var(--border); margin: 18px 0 0; }
/* /Pages/AssignExaminerCountWise.razor.rz.scp.css */
/* Assign Examiner (Count Wise) — legacy AssignExaminerCountWise.aspx.
   Filter grid matches the other evaluation pages: label above its control, auto-fitting columns. */
/* Only Exam Date lives here since the status filter was removed — minmax(200px, 1fr) used to stretch
   it across the whole card width with nothing to share the row with. Capped like a col-sm-4. */
.form.cascade[b-sf312y6pt9] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 12px 16px; }
.filters[b-sf312y6pt9] { margin-bottom: 0; }
.form label[b-sf312y6pt9] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label input[b-sf312y6pt9], .form label select[b-sf312y6pt9] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label input:focus[b-sf312y6pt9], .form label select:focus[b-sf312y6pt9] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form .req[b-sf312y6pt9] { color: #dc2626; margin-left: 3px; }
.filter-action[b-sf312y6pt9] { display: flex; align-items: flex-end; }
.filter-action .btn[b-sf312y6pt9] { width: 100%; }

.table-scroll[b-sf312y6pt9] { overflow-x: auto; }
.grid .nm[b-sf312y6pt9] { font-weight: 600; }
.ta-c[b-sf312y6pt9] { text-align: center; }

/* Status is the SP's own Complete/Pending flag, not a local computation. */
.pill[b-sf312y6pt9] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.ok[b-sf312y6pt9] { background: var(--tile-green-bg); color: var(--good); }
.pill.pending[b-sf312y6pt9] { background: rgba(192, 43, 60, .08); color: #c02b3c; }

.pager[b-sf312y6pt9] { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 12px 14px; }
.pageinfo[b-sf312y6pt9] { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Selection + assign panel (legacy AssignDiv / MainDiv, revealed by VisibleStatus()). */
tr.sel[b-sf312y6pt9] { background: var(--surface-2); }
.assign-bar[b-sf312y6pt9] { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--border); }
.sel-note[b-sf312y6pt9] { font-size: 13px; color: var(--muted); }
.assign-bar .btn[b-sf312y6pt9] { margin-left: auto; }

/* Legacy's Course/Semester/Subject/Exam ID block (EditScheduleLnkbtn_Click) — label + value on a
   single line each, not the boxed, two-line-per-tile stat-card pattern used elsewhere. */
.detail-grid[b-sf312y6pt9] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-bottom: 16px; }
.detail-grid > div[b-sf312y6pt9] { display: flex; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
.detail-grid label[b-sf312y6pt9] { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.detail-grid span[b-sf312y6pt9] { font-size: 13.5px; font-weight: 600; color: var(--ink); word-break: break-word; }

/* QA: the popup read as visually short with just 1-2 examiner rows even though AppModal's own .panel
   has plenty of headroom (caps at 90vh, scrolls past that). A modest min-height plus roomier spacing
   between sections below claims more of that room without leaving a large dead gap above the footer
   for the common one-row case. */
.cw-modal-body[b-sf312y6pt9] { min-height: 40vh; }

/* Total/Assign/Remaining Candidates: legacy colors both the label and the value blue
   (TotalCandidateCountLbl / ExaminerAssignCountLbl / RemaingCandidateLBL). Own row, not the 2-col
   detail-grid above, so all three stay on one line instead of the third wrapping underneath. */
.count-row[b-sf312y6pt9] { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 22px; }
.count-row label[b-sf312y6pt9] { font-size: 13px; font-weight: 600; color: var(--accent); }
.count-row .hl[b-sf312y6pt9] { font-size: 14px; font-weight: 700; color: var(--accent); }

.mode[b-sf312y6pt9] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.mode-label[b-sf312y6pt9] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.radio[b-sf312y6pt9] { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.examiner-rows[b-sf312y6pt9] { display: grid; gap: 20px; }
.ex-row[b-sf312y6pt9] { position: relative; display: grid; grid-template-columns: 2fr 1fr 1.2fr auto; gap: 12px; align-items: start; }
/* Equal Count mode: Count box is not rendered at all, so drop its column instead of leaving a gap. */
.ex-row.equal-mode[b-sf312y6pt9] { grid-template-columns: 2fr 1.2fr auto; }
.remove-examiner[b-sf312y6pt9] { padding: 8px 10px; line-height: 1; color: #c02b3c; align-self: start; margin-top: 22px; }
.remove-examiner:disabled[b-sf312y6pt9] { opacity: .55; cursor: not-allowed; }

/* Examiner autocomplete — same look as /evaluation/assign-examiner's .ac-wrap/.ac-list: label above a
   truncating input, a two-line name/email dropdown anchored to the wrap (not the row), and a status
   line in the same slot the results occupy so "Searching…"/"No examiners found." doesn't cause a jump. */
.ac-wrap[b-sf312y6pt9] { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-label[b-sf312y6pt9] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-sf312y6pt9] { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-input:focus[b-sf312y6pt9] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-input:disabled[b-sf312y6pt9] { opacity: .55; cursor: not-allowed; }
.ac-list[b-sf312y6pt9] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 260px; z-index: 20; margin-top: 2px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 260px; overflow-y: auto; }
.ac-item[b-sf312y6pt9] { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0;
    border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); padding: 8px 10px;
    cursor: pointer; }
.ac-item:last-child[b-sf312y6pt9] { border-bottom: 0; }
.ac-item:hover[b-sf312y6pt9], .ac-item:focus-visible[b-sf312y6pt9] { background: var(--surface-2); }
.ac-item-name[b-sf312y6pt9] { font-size: 13px; font-weight: 600; }
.ac-item-email[b-sf312y6pt9] { font-size: 12px; color: var(--muted); }
.ac-status[b-sf312y6pt9] { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.ac-hint[b-sf312y6pt9] { font-size: 12px; color: #c02b3c; }

.count-label input[b-sf312y6pt9], .expire-input[b-sf312y6pt9] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; box-sizing: border-box; width: 100%; }
.count-label input:focus[b-sf312y6pt9], .expire-input:focus[b-sf312y6pt9] { outline: 2px solid var(--accent); outline-offset: -1px; }
.count-label input:disabled[b-sf312y6pt9], .expire-input:disabled[b-sf312y6pt9] { opacity: .55; cursor: not-allowed; }

.add-examiner[b-sf312y6pt9] { margin-top: 18px; }
.assign-panel-divider[b-sf312y6pt9] { border: none; border-top: 1px solid var(--border); margin: 20px 0 0; }

@media (max-width: 620px) {
    .detail-grid[b-sf312y6pt9] { grid-template-columns: 1fr; }
    .ex-row[b-sf312y6pt9] { grid-template-columns: 1fr; }
    .remove-examiner[b-sf312y6pt9] { margin-top: 0; }
}
/* /Pages/AssignExaminerQuestionWise.razor.rz.scp.css */
/* Assign Examiner (Question Wise) — page-specific styles. Shared look & feel (card, grid, toolbar,
   banner, pager, btn, badge) comes from wwwroot/css/app.css. */

/* Filter grid — label above its control in an auto-fitting column, matching AssignExaminer's
   ".form.cascade.filters" row. A select's native width otherwise tracks its selected option's text,
   so picking a long subject/course name grew the box; width:100% inside a fixed grid column keeps
   every control a stable size regardless of what's selected. */
.form.cascade[b-9x6r7q6stq] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.form label[b-9x6r7q6stq] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-9x6r7q6stq], .form label input[b-9x6r7q6stq] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-9x6r7q6stq], .form label input:focus[b-9x6r7q6stq] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-9x6r7q6stq], .form label input:disabled[b-9x6r7q6stq] { opacity: .55; cursor: not-allowed; }
.filters[b-9x6r7q6stq] { margin-bottom: 10px; }
.filters:last-child[b-9x6r7q6stq] { margin-bottom: 0; }

/* Legacy TotalStudentsLbl-style plain bold counter, same as AssignExaminer's own ".status-card". */
.status-card .count[b-9x6r7q6stq] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-9x6r7q6stq] { font-weight: 700; }

.toggle-assigned[b-9x6r7q6stq], .back-questions[b-9x6r7q6stq] { white-space: nowrap; }
.confirm-msg[b-9x6r7q6stq] { color: var(--muted); font-size: 13px; align-self: center; }

.msub[b-9x6r7q6stq] { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.modal-err[b-9x6r7q6stq] { margin-bottom: 14px; }

/* Examiner slots + evaluation last date (same block as AssignExaminer). */
.examiner-slots[b-9x6r7q6stq] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.ac-wrap[b-9x6r7q6stq] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-9x6r7q6stq] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-9x6r7q6stq] { width: 260px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-9x6r7q6stq] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-9x6r7q6stq] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 260px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-9x6r7q6stq] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-9x6r7q6stq] { background: var(--surface-2); }
.ac-hint[b-9x6r7q6stq] { font-size: 12px; color: #c02b3c; }

.eval-date[b-9x6r7q6stq] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eval-date input[b-9x6r7q6stq] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
/* /Pages/AssignModerator.razor.rz.scp.css */
.cand-head[b-y6zubaceo8] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-y6zubaceo8] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-y6zubaceo8] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-y6zubaceo8] { color: var(--ink); }

.card[b-y6zubaceo8] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-y6zubaceo8] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-y6zubaceo8] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-y6zubaceo8], .toolbar input[type="text"][b-y6zubaceo8] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-y6zubaceo8], .toolbar input:focus[b-y6zubaceo8] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-y6zubaceo8] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-y6zubaceo8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-y6zubaceo8] { background: var(--track); }
.btn.primary[b-y6zubaceo8] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-y6zubaceo8] { filter: brightness(1.06); background: var(--accent); }
.btn.danger[b-y6zubaceo8] { color: #c02b3c; border-color: rgba(192,43,60,.3); }
.btn.danger:hover[b-y6zubaceo8] { background: rgba(192,43,60,.08); }
.btn:disabled[b-y6zubaceo8] { opacity: .55; cursor: default; }

.grid[b-y6zubaceo8] { width: 100%; border-collapse: collapse; }
.grid thead th[b-y6zubaceo8] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-y6zubaceo8] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-y6zubaceo8] { border-bottom: none; }
.grid tbody tr:hover td[b-y6zubaceo8] { background: var(--surface-2); }
.grid .nm[b-y6zubaceo8] { font-weight: 600; }
.ta-c[b-y6zubaceo8] { text-align: center; }

.pad[b-y6zubaceo8] { padding: 22px 6px; }
.sub[b-y6zubaceo8] { color: var(--muted); font-size: 13px; }
.rules-missing[b-y6zubaceo8] { font-weight: 600; color: #c02b3c; }

.banner[b-y6zubaceo8] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-y6zubaceo8] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-y6zubaceo8] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-y6zubaceo8] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-y6zubaceo8] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.filters[b-y6zubaceo8] { margin-bottom: 10px; }
.filters:last-child[b-y6zubaceo8] { margin-bottom: 0; }
.filters select[b-y6zubaceo8] { min-width: 160px; }

.toggle-assigned[b-y6zubaceo8], .assign-remaining[b-y6zubaceo8] { white-space: nowrap; }

/* app.css sets .assign-panel to a flex row; this panel stacks its heading above the picker row. */
.assign-panel[b-y6zubaceo8] { display: block; }
.assign-panel h3[b-y6zubaceo8] { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.moderator-slots[b-y6zubaceo8] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }

.ac-wrap[b-y6zubaceo8] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-y6zubaceo8] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-y6zubaceo8] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-y6zubaceo8] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-y6zubaceo8] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-y6zubaceo8] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-y6zubaceo8] { background: var(--surface-2); }
.ac-hint[b-y6zubaceo8] { font-size: 12px; color: #c02b3c; }

.eval-date[b-y6zubaceo8] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eval-date input[b-y6zubaceo8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

.upload-pick[b-y6zubaceo8] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.file-btn[b-y6zubaceo8] { position: relative; overflow: hidden; }
.file-btn[b-y6zubaceo8]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-y6zubaceo8] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.import-result[b-y6zubaceo8] { margin: 10px 0; }
.errors[b-y6zubaceo8] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-y6zubaceo8] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */

/* Outcome popup (legacy swal). Reuses the banner colour classes for the message text. */
.popup-msg[b-y6zubaceo8] { margin: 0 0 18px; text-align: center; }
/* /Pages/AssignModeratorBucket.razor.rz.scp.css */
.cand-head[b-hqrwnh4gcw] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-hqrwnh4gcw] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-hqrwnh4gcw] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-hqrwnh4gcw] { color: var(--ink); }

.card[b-hqrwnh4gcw] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-hqrwnh4gcw] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-hqrwnh4gcw] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-hqrwnh4gcw], .toolbar input:is([type="date"], [data-osm-date])[b-hqrwnh4gcw], .toolbar input[type="number"][b-hqrwnh4gcw], .toolbar input[type="text"][b-hqrwnh4gcw] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-hqrwnh4gcw], .toolbar input:focus[b-hqrwnh4gcw] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-hqrwnh4gcw] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-hqrwnh4gcw] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-hqrwnh4gcw] { background: var(--track); }
.btn.primary[b-hqrwnh4gcw] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-hqrwnh4gcw] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-hqrwnh4gcw] { opacity: .55; cursor: default; }

.table-scroll[b-hqrwnh4gcw] { overflow-x: auto; }
.grid[b-hqrwnh4gcw] { width: 100%; border-collapse: collapse; }
.grid thead th[b-hqrwnh4gcw] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-hqrwnh4gcw] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-hqrwnh4gcw] { border-bottom: none; }
.grid tbody tr:hover td[b-hqrwnh4gcw] { background: var(--surface-2); }
.grid .nm[b-hqrwnh4gcw] { font-weight: 600; }
.ta-c[b-hqrwnh4gcw] { text-align: center; }

.badge[b-hqrwnh4gcw] { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
         font-size: 11.5px; font-weight: 700; }
.badge.done[b-hqrwnh4gcw] { background: var(--tile-green-bg); color: var(--good); }
.badge.pending[b-hqrwnh4gcw] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pad[b-hqrwnh4gcw] { padding: 22px 6px; }
.sub[b-hqrwnh4gcw] { color: var(--muted); font-size: 13px; }

.banner[b-hqrwnh4gcw] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-hqrwnh4gcw] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-hqrwnh4gcw] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-hqrwnh4gcw] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-hqrwnh4gcw] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
/* /Pages/AssignModeratorQuestionwise.razor.rz.scp.css */
/* Most primitives (.card, .toolbar, .grid, .banner, .assign-panel, .status/.stat, .btn, .search…) are the
   shared design-system classes in wwwroot/css/app.css. This scoped sheet only adds the bits unique to this
   page's layout. */

.grid-title[b-mtlj1llpqn] { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }

.toolbar .warn[b-mtlj1llpqn] { color: var(--faint); font-size: 12px; }

.ta-r[b-mtlj1llpqn] { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th.ta-r[b-mtlj1llpqn] { text-align: right; }

.ta-c[b-mtlj1llpqn] { text-align: center; }
.grid thead th.ta-c[b-mtlj1llpqn] { text-align: center; }

.toolbar.filters[b-mtlj1llpqn] { row-gap: 10px; }
.toolbar.filters label[b-mtlj1llpqn] { flex-direction: column; align-items: flex-start; gap: 4px; }
.toolbar .count[b-mtlj1llpqn] { margin-left: auto; }

.grid-toolbar[b-mtlj1llpqn] { margin-bottom: 14px; }
.grid-toolbar .count[b-mtlj1llpqn] { margin-left: auto; }

/* Moderator autocomplete: the match list overlays the row, so the row anchors it. */
.moderator-picker[b-mtlj1llpqn] { position: relative; }
.moderator-picker .moderator-email[b-mtlj1llpqn] { min-width: 280px; }
.matches[b-mtlj1llpqn] { position: absolute; top: 100%; left: 0; z-index: 20; margin: 4px 0 0; padding: 4px;
           list-style: none; min-width: 320px; max-height: 260px; overflow-y: auto;
           background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.matches li[b-mtlj1llpqn] { display: block; }
.matches .pick-moderator[b-mtlj1llpqn] { width: 100%; justify-content: flex-start; border: none; border-radius: 7px; font-weight: 500; }

.assign-panel .assign-row[b-mtlj1llpqn] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.assign-panel .assign-row + .assign-row[b-mtlj1llpqn] { margin-top: 12px; }
.assign-panel .note[b-mtlj1llpqn] { color: #c02b3c; font-size: 12.5px; font-weight: 600; }

.btn.danger[b-mtlj1llpqn] { background: rgba(192,43,60,.08); border-color: rgba(192,43,60,.25); color: #c02b3c; }
.btn.danger:hover[b-mtlj1llpqn] { background: rgba(192,43,60,.14); }

.pager[b-mtlj1llpqn] { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 14px; }
.pageinfo[b-mtlj1llpqn] { font-variant-numeric: tabular-nums; }

.rules-missing[b-mtlj1llpqn] { color: #c02b3c; font-weight: 600; }
/* /Pages/AssignReval1.razor.rz.scp.css */
.cand-head[b-2d140s2kv0] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-2d140s2kv0] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-2d140s2kv0] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-2d140s2kv0] { color: var(--ink); }
.head-actions[b-2d140s2kv0] { display: flex; align-items: center; gap: 12px; }

.card[b-2d140s2kv0] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-2d140s2kv0] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-2d140s2kv0] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-2d140s2kv0], .toolbar input[type="text"][b-2d140s2kv0] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-2d140s2kv0], .toolbar input:focus[b-2d140s2kv0] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-2d140s2kv0] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-2d140s2kv0] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-2d140s2kv0] { background: var(--track); }
.btn.primary[b-2d140s2kv0] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-2d140s2kv0] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-2d140s2kv0] { opacity: .55; cursor: default; }
/* Global .btn.danger (app.css) ties this page's own .btn on specificity and loses on source order --
   same fix already applied on sibling pages (Candidates, AssignSubject, etc). */
.btn.danger[b-2d140s2kv0] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-2d140s2kv0] { background: rgba(192,43,60,.08); }

.grid[b-2d140s2kv0] { width: 100%; border-collapse: collapse; }
.grid thead th[b-2d140s2kv0] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-2d140s2kv0] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-2d140s2kv0] { border-bottom: none; }
.grid tbody tr:hover td[b-2d140s2kv0] { background: var(--surface-2); }
.grid .nm[b-2d140s2kv0] { font-weight: 600; }
.ta-c[b-2d140s2kv0] { text-align: center; }

.pad[b-2d140s2kv0] { padding: 22px 6px; }
.sub[b-2d140s2kv0] { color: var(--muted); font-size: 13px; }

.banner[b-2d140s2kv0] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-2d140s2kv0] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-2d140s2kv0] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-2d140s2kv0] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-2d140s2kv0] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.filters[b-2d140s2kv0] { margin-bottom: 10px; }
.filters:last-child[b-2d140s2kv0] { margin-bottom: 0; }
/* Fixed width (not min-width) so picking a longer/shorter option doesn't resize the box and shift
   the row layout -- selects otherwise auto-size to their currently selected option's text. */
.filters select[b-2d140s2kv0] { width: 160px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.toggle-assigned[b-2d140s2kv0] { white-space: nowrap; }

/* Legacy TotalStudentsLbl-style plain bold counter, same as AssignExaminer's own ".status-card". */
.status-card .count[b-2d140s2kv0] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-2d140s2kv0] { font-weight: 700; }

/* Assign popup (same convention as AssignExaminer's own "Assign Examiner" modal) — the examiner
   picker and expire date belong in a dialog, not stacked under the grid. app.css sets .assign-panel
   to a flex row; this stacks the examiner + expire-date fields as their own full-width rows instead
   of side-by-side, leaving the autocomplete list room to open without the popup needing an inner scroll. */
.assign-panel[b-2d140s2kv0] { display: block; }
.assign-panel .selected-note[b-2d140s2kv0] { margin: 0 0 14px; font-size: 13px; }
.examiner-slots[b-2d140s2kv0] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.assign-panel .ac-wrap[b-2d140s2kv0] { position: relative; min-width: 0; }
.assign-panel .ac-input[b-2d140s2kv0] { width: 100%; box-sizing: border-box; }
.assign-panel .eval-date input[b-2d140s2kv0] { display: block; width: 100%; box-sizing: border-box; }
.assign-panel-divider[b-2d140s2kv0] { border: none; border-top: 1px solid var(--border); margin: 18px 0 0; }

.ac-wrap[b-2d140s2kv0] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-2d140s2kv0] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-2d140s2kv0] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-2d140s2kv0] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-2d140s2kv0] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-2d140s2kv0] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-2d140s2kv0] { background: var(--surface-2); }
.ac-hint[b-2d140s2kv0] { font-size: 12px; color: #c02b3c; }

.eval-date[b-2d140s2kv0] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eval-date input[b-2d140s2kv0] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Help modal (legacy HelpDiv). */
.help-modal h5[b-2d140s2kv0] { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.help-modal ul[b-2d140s2kv0] { margin: 0 0 8px; padding-left: 20px; }
.help-modal li[b-2d140s2kv0] { color: var(--muted); font-size: 13px; line-height: 1.6; }
.hint[b-2d140s2kv0] { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

.upload-pick[b-2d140s2kv0] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.file-btn[b-2d140s2kv0] { position: relative; overflow: hidden; }
.file-btn[b-2d140s2kv0]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-2d140s2kv0] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.import-result[b-2d140s2kv0] { margin: 10px 0; }
.errors[b-2d140s2kv0] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-2d140s2kv0] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

/* Outcome popup — replaces the inline banner for every success/error message. */
.popup-msg[b-2d140s2kv0] { margin: 0 0 18px; text-align: center; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */
/* /Pages/AssignReval2.razor.rz.scp.css */
.cand-head[b-su02no22mk] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-su02no22mk] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-su02no22mk] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-su02no22mk] { color: var(--ink); }
.head-actions[b-su02no22mk] { display: flex; align-items: center; gap: 12px; }

.card[b-su02no22mk] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-su02no22mk] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-su02no22mk] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-su02no22mk], .toolbar input[type="text"][b-su02no22mk] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-su02no22mk], .toolbar input:focus[b-su02no22mk] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-su02no22mk] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-su02no22mk] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-su02no22mk] { background: var(--track); }
.btn.primary[b-su02no22mk] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-su02no22mk] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-su02no22mk] { opacity: .55; cursor: default; }
/* Global .btn.danger (app.css) ties this page's own .btn on specificity and loses on source order --
   same fix already applied on sibling pages (Candidates, AssignSubject, etc). */
.btn.danger[b-su02no22mk] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-su02no22mk] { background: rgba(192,43,60,.08); }

.grid[b-su02no22mk] { width: 100%; border-collapse: collapse; }
.grid thead th[b-su02no22mk] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-su02no22mk] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-su02no22mk] { border-bottom: none; }
.grid tbody tr:hover td[b-su02no22mk] { background: var(--surface-2); }
.grid .nm[b-su02no22mk] { font-weight: 600; }
.ta-c[b-su02no22mk] { text-align: center; }

.pad[b-su02no22mk] { padding: 22px 6px; }
.sub[b-su02no22mk] { color: var(--muted); font-size: 13px; }

.banner[b-su02no22mk] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-su02no22mk] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-su02no22mk] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-su02no22mk] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-su02no22mk] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.filters[b-su02no22mk] { margin-bottom: 10px; }
.filters:last-child[b-su02no22mk] { margin-bottom: 0; }
/* Fixed width (not min-width) so picking a longer/shorter option doesn't resize the box and shift
   the row layout -- selects otherwise auto-size to their currently selected option's text. */
.filters select[b-su02no22mk] { width: 160px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.toggle-assigned[b-su02no22mk] { white-space: nowrap; }

/* Legacy TotalStudentsLbl-style plain bold counter, same as AssignExaminer's own ".status-card"
   and AssignReval1's own status-card. */
.status-card .count[b-su02no22mk] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-su02no22mk] { font-weight: 700; }

/* Assign popup (same convention as AssignReval1's own popup) — the examiner picker and expire date
   belong in a dialog, not side-by-side on one line. app.css sets .assign-panel to a flex row; this
   stacks the examiner + expire-date fields as their own full-width rows instead, leaving the
   autocomplete list room to open without the popup needing an inner scroll. */
.assign-panel[b-su02no22mk] { display: block; }
.assign-panel .selected-note[b-su02no22mk] { margin: 0 0 14px; font-size: 13px; }
.examiner-slots[b-su02no22mk] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.assign-panel .ac-wrap[b-su02no22mk] { position: relative; min-width: 0; }
.assign-panel .ac-input[b-su02no22mk] { width: 100%; box-sizing: border-box; }
.assign-panel .eval-date input[b-su02no22mk] { display: block; width: 100%; box-sizing: border-box; }
.assign-panel-divider[b-su02no22mk] { border: none; border-top: 1px solid var(--border); margin: 18px 0 0; }

.ac-wrap[b-su02no22mk] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-su02no22mk] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-su02no22mk] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-su02no22mk] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-su02no22mk] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-su02no22mk] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-su02no22mk] { background: var(--surface-2); }
.ac-hint[b-su02no22mk] { font-size: 12px; color: #c02b3c; }

.eval-date[b-su02no22mk] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eval-date input[b-su02no22mk] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Help modal (legacy HelpDiv). */
.help-modal h5[b-su02no22mk] { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.help-modal ul[b-su02no22mk] { margin: 0 0 8px; padding-left: 20px; }
.help-modal li[b-su02no22mk] { color: var(--muted); font-size: 13px; line-height: 1.6; }
.hint[b-su02no22mk] { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

.upload-pick[b-su02no22mk] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.file-btn[b-su02no22mk] { position: relative; overflow: hidden; }
.file-btn[b-su02no22mk]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-su02no22mk] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.import-result[b-su02no22mk] { margin: 10px 0; }
.errors[b-su02no22mk] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-su02no22mk] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */

/* Outcome popup — replaces the inline banner for every success/error message. */
.popup-msg[b-su02no22mk] { margin: 0 0 18px; text-align: center; }
/* /Pages/AssignSubject.razor.rz.scp.css */
.cand-head[b-1fevnozz93] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-1fevnozz93] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-1fevnozz93] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.card[b-1fevnozz93] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.form.cascade[b-1fevnozz93] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
/* min-width:0 lets the grid column shrink below the select's intrinsic content
   width, so a long course name can't push the control out of the card. */
.form label[b-1fevnozz93] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label input[b-1fevnozz93], .form label select[b-1fevnozz93], .form label textarea[b-1fevnozz93] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-1fevnozz93] { color: #dc2626; margin-left: 3px; }
.form select[b-1fevnozz93] { width: 100%; }
.form select[b-1fevnozz93] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-1fevnozz93] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select[b-1fevnozz93] { -webkit-appearance: none; appearance: none; cursor: pointer;
               background-image: var(--sel-chevron); background-repeat: no-repeat;
               background-position: right 11px center; background-size: 15px; padding-right: 34px; }
@media (max-width: 900px) { .form.cascade[b-1fevnozz93] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-1fevnozz93] { grid-template-columns: 1fr; } }

.toolbar[b-1fevnozz93] { display: flex; align-items: center; gap: 10px; }
.toolbar .count[b-1fevnozz93] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-1fevnozz93] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-1fevnozz93] { background: var(--track); }
.btn.primary[b-1fevnozz93] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-1fevnozz93] { filter: brightness(1.05); }
.btn.ghost[b-1fevnozz93] { background: transparent; }
.btn.danger[b-1fevnozz93] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-1fevnozz93] { background: rgba(192,43,60,.08); }
.btn:disabled[b-1fevnozz93] { opacity: .6; cursor: default; }

/* The single toolbar: actions left, counts right (QA -- assign, remove and Total Count on one
   screen). .selected-count is pushed right with the total so the two numbers read together. */
.assign-toolbar[b-1fevnozz93] { flex-wrap: wrap; }
.assign-toolbar .selected-count[b-1fevnozz93] { margin-left: auto; color: var(--muted); font-size: 12.5px;
    font-variant-numeric: tabular-nums; }
.assign-toolbar .selected-count + .count[b-1fevnozz93] { margin-left: 0; padding-left: 14px;
    border-left: 1px solid var(--border); }

.grid[b-1fevnozz93] { width: 100%; border-collapse: collapse; }
.grid thead th[b-1fevnozz93] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-1fevnozz93] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-1fevnozz93] { border-bottom: none; }
.grid tbody tr:hover td[b-1fevnozz93] { background: var(--surface-2); }
.grid .nm[b-1fevnozz93] { font-weight: 600; }
.ta-c[b-1fevnozz93] { text-align: center; }

.pad[b-1fevnozz93] { padding: 22px 6px; }
.sub[b-1fevnozz93] { color: var(--muted); }

.pager[b-1fevnozz93] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }

/* Head actions + Help modal (legacy AssignSubject HelpLinkBtn parity). */
.head-actions[b-1fevnozz93] { display: flex; align-items: center; gap: 14px; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */

.help-body h5[b-1fevnozz93] { margin: 14px 0 6px; }
.help-body p[b-1fevnozz93] { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.help-body ul[b-1fevnozz93] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }

.table-scroll[b-1fevnozz93] { overflow-x: auto; }

/* Assign Candidate to Subject popup (legacy Action -> Assign Candidate to subject / ImportLBtn). QA B4:
   this is now AppModal content, so no separate card chrome is needed here. */
.import-panel .hint[b-1fevnozz93] { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.import-actions[b-1fevnozz93] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-btn[b-1fevnozz93] { position: relative; overflow: hidden; }
.file-btn[b-1fevnozz93]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-1fevnozz93] { font-size: 12.5px; color: var(--muted); }
.import-result[b-1fevnozz93] { margin-top: 14px; }
.errors[b-1fevnozz93] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-1fevnozz93] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

/* Assign-target modal (legacy AssignSubjectddl) — the subject the selected candidates are assigned TO,
   which the legacy page bound independently of the search panel's subject filter. */
.assign-modal .assign-target[b-1fevnozz93] { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ink); }
.assign-modal .assign-target select[b-1fevnozz93] { display: block; width: 100%; margin-top: 6px; }
.assign-modal .req[b-1fevnozz93] { color: #c02b3c; margin-left: 2px; }

/* Update Barcode Details popup (legacy Action -> Update Barcode Details; AssignSubject.aspx:375-388 "Exam
   Date" + CalendarExtender, popup ModalPopupExtender3 :431-435). QA B2: AppModal content, so no separate
   card chrome is needed here — matches the Assign Candidate to Subject popup above. */
.barcode-panel .hint[b-1fevnozz93] { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Two ordered steps rather than one wrapping row of unrelated controls. Each is boxed so the
   date+export pair and the file+import pair read as belonging together. */
.bc-step[b-1fevnozz93] { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 14px;
           background: var(--surface-2); }
.bc-step + .bc-step[b-1fevnozz93] { margin-top: 12px; }
.bc-step-head[b-1fevnozz93] { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink);
                display: flex; align-items: center; gap: 8px; }
.bc-num[b-1fevnozz93] { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
          border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; }

/* align-items:end is what puts the buttons on the same baseline as the input INSIDE its label,
   rather than centred against the label+input pair. */
.bc-row[b-1fevnozz93] { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.bc-field[b-1fevnozz93] { display: flex; flex-direction: column; gap: 5px; }
.bc-label[b-1fevnozz93] { font-size: 12px; font-weight: 600; color: var(--muted); }
.bc-label .req[b-1fevnozz93] { color: #dc2626; margin-left: 2px; }
.bc-date[b-1fevnozz93] { border: 1px solid var(--border); background: var(--surface); color: var(--ink);
           border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit;
           min-width: 190px; box-sizing: border-box; }
.bc-date:focus[b-1fevnozz93] { outline: 2px solid var(--accent); outline-offset: -1px; }

.bc-step .btn[b-1fevnozz93] { white-space: nowrap; }
.bc-choose[b-1fevnozz93] { display: inline-flex; align-items: center; gap: 6px; }
/* The chosen filename sits between the picker and Import, and takes the slack so Import lands right. */
.bc-step .file-meta[b-1fevnozz93] { flex: 1 1 auto; min-width: 120px; font-size: 12.5px; color: var(--muted);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A disabled control says why rather than just going pale. */
.bc-note[b-1fevnozz93] { margin: 8px 0 0; font-size: 12px; color: var(--faint); }
/* /Pages/AssignSubjectMaster.razor.rz.scp.css */
.cand-head[b-zrz2ij2dxj] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-zrz2ij2dxj] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-zrz2ij2dxj] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-zrz2ij2dxj] { color: var(--ink); }

.card[b-zrz2ij2dxj] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-zrz2ij2dxj] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-zrz2ij2dxj] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-zrz2ij2dxj], .toolbar input:is([type="date"], [data-osm-date])[b-zrz2ij2dxj], .toolbar input[type="number"][b-zrz2ij2dxj], .toolbar input[type="text"][b-zrz2ij2dxj] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-zrz2ij2dxj], .toolbar input:focus[b-zrz2ij2dxj] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-zrz2ij2dxj] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-zrz2ij2dxj] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-zrz2ij2dxj] { background: var(--track); }
.btn.primary[b-zrz2ij2dxj] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-zrz2ij2dxj] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-zrz2ij2dxj] { opacity: .55; cursor: default; }

.grid[b-zrz2ij2dxj] { width: 100%; border-collapse: collapse; }
.grid thead th[b-zrz2ij2dxj] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-zrz2ij2dxj] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-zrz2ij2dxj] { border-bottom: none; }
.grid tbody tr:hover td[b-zrz2ij2dxj] { background: var(--surface-2); }
.grid .nm[b-zrz2ij2dxj] { font-weight: 600; }
.ta-c[b-zrz2ij2dxj] { text-align: center; }

.pad[b-zrz2ij2dxj] { padding: 22px 6px; }
.sub[b-zrz2ij2dxj] { color: var(--muted); font-size: 13px; }

/* Pager + assign panel (page uses both; the copied sibling had neither — review finding) */
.pager[b-zrz2ij2dxj] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
.pager .count[b-zrz2ij2dxj] { color: var(--muted); font-size: 13px; }
.assign-panel[b-zrz2ij2dxj] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.assign-panel h3[b-zrz2ij2dxj], .card h3[b-zrz2ij2dxj] { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* Help + Edit Schedule modals (shared recipe with AttendanceReport/CourseWiseBookletStatus) */
.cand-head .head-actions[b-zrz2ij2dxj] { display: flex; align-items: center; gap: 12px; }
.btn.ghost[b-zrz2ij2dxj] { background: transparent; }
h5[b-zrz2ij2dxj] { margin: 14px 0 6px; }
ul[b-zrz2ij2dxj] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.edit-field[b-zrz2ij2dxj] { display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
              font-size: 12.5px; font-weight: 600; color: var(--muted); }
.edit-field input[b-zrz2ij2dxj] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }

/* Sub-view title rows (View Schedule / View Assigned). `.card .view-title` must outrank `.card h3` above:
   its 10px bottom margin made the title taller than Export/Back and knocked the row off-centre. flex: 1
   pushes the actions to the right; the count sits on its own row below. */
.card .view-title[b-zrz2ij2dxj] { font-size: 15px; font-weight: 700; margin: 0; flex: 1; }
.count-row[b-zrz2ij2dxj] { margin-top: 10px; }

/* Assign panel wraps a longer cascade than the ReAssign sibling. */
.assign-panel .toolbar[b-zrz2ij2dxj] { row-gap: 12px; }
.assign-panel .toolbar label[b-zrz2ij2dxj] { flex-direction: column; align-items: flex-start; gap: 4px; }
.assign-panel select[b-zrz2ij2dxj], .assign-panel input[b-zrz2ij2dxj] { min-width: 170px; }
.toolbar[b-zrz2ij2dxj]  .aa-search .search { min-width: 180px; }
/* /Pages/AttendanceReport.razor.rz.scp.css */
.cand-head[b-9tk4mvclck] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-9tk4mvclck] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-9tk4mvclck] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.back:hover[b-9tk4mvclck] { color: var(--ink); }

.card[b-9tk4mvclck] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

/* Attendance / Details by date range / Absentees tabs (house pattern: UserLogs.razor.css). */
.tabs[b-9tk4mvclck] { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.tab[b-9tk4mvclck] { padding: 9px 16px; border: none; background: transparent; color: var(--muted); font: inherit;
       font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover[b-9tk4mvclck] { color: var(--ink); }
.tab.on[b-9tk4mvclck] { color: var(--accent); border-bottom-color: var(--accent); }

.list-head[b-9tk4mvclck] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.list-head h2[b-9tk4mvclck] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.toolbar[b-9tk4mvclck] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.toolbar label[b-9tk4mvclck] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar input:is([type="date"], [data-osm-date])[b-9tk4mvclck], .toolbar input[type="number"][b-9tk4mvclck], .toolbar input[type="text"][b-9tk4mvclck], .toolbar select[b-9tk4mvclck] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.toolbar input:focus[b-9tk4mvclck], .toolbar select:focus[b-9tk4mvclck] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar select[b-9tk4mvclck] { -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px; padding-right: 34px; min-width: 180px; max-width: 240px; }
.toolbar input[type="text"][b-9tk4mvclck] { min-width: 180px; }
/* drop native number spinners for a clean, consistent field look */
.toolbar input[type=number][b-9tk4mvclck]::-webkit-outer-spin-button,
.toolbar input[type=number][b-9tk4mvclck]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.toolbar input[type=number][b-9tk4mvclck] { -moz-appearance: textfield; appearance: textfield; }

.btn[b-9tk4mvclck] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-9tk4mvclck] { background: var(--track); }
.btn.primary[b-9tk4mvclck] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-9tk4mvclck] { filter: brightness(1.05); }
.btn:disabled[b-9tk4mvclck] { opacity: .6; cursor: default; }

.summary[b-9tk4mvclck] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip[b-9tk4mvclck] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted);
        background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.chip strong[b-9tk4mvclck] { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Colour-coded attendance-status chips (side panel). Tones follow the house badge palette
   (Candidates/ExamMaster badges, banner.err); zero-count chips recede so real counts pop. */
.chip.tone-ok[b-9tk4mvclck] { background: var(--tile-green-bg); color: var(--good); border-color: transparent; }
.chip.tone-ok strong[b-9tk4mvclck] { color: var(--good); }
.chip.tone-err[b-9tk4mvclck] { background: rgba(192,43,60,.08); color: #c02b3c; border-color: transparent; }
.chip.tone-err strong[b-9tk4mvclck] { color: #c02b3c; }
.chip.tone-warn[b-9tk4mvclck] { background: rgba(217,119,6,.12); color: #d97706; border-color: transparent; }
.chip.tone-warn strong[b-9tk4mvclck] { color: #d97706; }
.chip.tone-info[b-9tk4mvclck] { background: var(--tile-blue-bg); color: var(--tile-blue); border-color: transparent; }
.chip.tone-info strong[b-9tk4mvclck] { color: var(--tile-blue); }
.chip.tone-violet[b-9tk4mvclck] { background: var(--tile-violet-bg); color: var(--tile-violet); border-color: transparent; }
.chip.tone-violet strong[b-9tk4mvclck] { color: var(--tile-violet); }
.chip.zero[b-9tk4mvclck] { opacity: .55; }

/* Legacy Attendance.aspx:305-357 — ten bordered boxes, five per row, bold blue value. QA C2: counts need
   to be "shown on the frame and highlighted", not muted pill chips. */
.counts-strip.summary[b-9tk4mvclck] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.counts-strip.summary .chip[b-9tk4mvclck] { flex-direction: column; align-items: center; gap: 2px; border: 2px solid var(--border);
    border-radius: 8px; padding: 8px 10px; background: var(--surface); font-size: 12px; font-weight: 600;
    color: var(--muted); text-align: center; }
.counts-strip.summary .chip strong[b-9tk4mvclck] { font-size: 16px; color: var(--tile-blue); }
@media (max-width: 700px) { .counts-strip.summary[b-9tk4mvclck] { grid-template-columns: repeat(2, 1fr); } }

.table-scroll[b-9tk4mvclck] { overflow-x: auto; }
.pad[b-9tk4mvclck] { padding: 16px 4px; }
.sub[b-9tk4mvclck] { color: var(--muted); font-size: 13px; }

/* Empty states — replaces the bare one-line prompts (roster not loaded / no candidates / no details). */
.empty-state[b-9tk4mvclck] { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
               padding: 36px 16px 28px; }
.empty-state.compact[b-9tk4mvclck] { padding: 24px 12px 18px; }
.empty-state .empty-ico[b-9tk4mvclck] { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
                          background: var(--surface-2); border: 1px solid var(--border); color: var(--faint);
                          margin-bottom: 6px; }
.empty-state .empty-title[b-9tk4mvclck] { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.empty-state .sub[b-9tk4mvclck] { margin: 0; max-width: 420px; }

/* Date-range details grid renders its own "No attendance records." — align it with the empty states. */
.card[b-9tk4mvclck]  .empty { display: block; text-align: center; padding: 24px 12px; margin: 0;
                      color: var(--muted); font-size: 13px; }

/* Date-range filters. The dates ride the shared .form.cascade grid (same as the Mark tab and
   AssignExaminer) so they line up with the Action button; .form.cascade only styles <select>, so the
   date inputs need the matching control treatment here. Kept deliberately larger than a stock cascade
   control — the two fields were a cramped fixed 190px before — and held to two of the grid's four
   columns so they don't stretch across an ultrawide card. */
.range-dates.form.cascade[b-9tk4mvclck] { grid-template-columns: repeat(2, minmax(220px, 320px)); }
.form.cascade label .lbl .req[b-9tk4mvclck] { margin-left: 2px; }
.form input:is([type="date"], [data-osm-date])[b-9tk4mvclck] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 11px 14px; font-size: 15px; }
.form input:is([type="date"], [data-osm-date]):focus[b-9tk4mvclck] { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (max-width: 560px) { .range-dates.form.cascade[b-9tk4mvclck] { grid-template-columns: 1fr; } }

.btn.ghost[b-9tk4mvclck] { background: transparent; }
.btn.ghost:hover[b-9tk4mvclck] { background: var(--surface-2); }

/* Head actions + Help modal (legacy Attendance HelpLinkBtn parity). */
.head-actions[b-9tk4mvclck] { display: flex; align-items: center; gap: 14px; }

.help-body h5[b-9tk4mvclck] { margin: 14px 0 6px; }
.help-body ul[b-9tk4mvclck] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }

.banner[b-9tk4mvclck] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-9tk4mvclck] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-9tk4mvclck] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-9tk4mvclck] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
/* Legacy AttendanceDateErrorLbl, shown when the subject's marking window has closed. */
.banner.window-expired[b-9tk4mvclck] { font-weight: 700; margin-top: 12px; }

/* Subject cascade — canonical fixed 4-col grid (Global Constraints; AssignSubject.razor.css:9-14). No
   reflow when Specialization/Exam/Exam Date/Center conditionally appear (QA C1: "UI shown disturbed"). */
.form.cascade[b-9tk4mvclck] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; margin-bottom: 16px; }
/* Flex column with the caption in .lbl and the select pinned to the bottom: when one caption wraps to
   two lines ("Stream | Degree | AYear"), every select in that row still sits on the same baseline. */
.form.cascade label[b-9tk4mvclck] { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form.cascade label .lbl[b-9tk4mvclck] { flex: 1; }
.form.cascade label select[b-9tk4mvclck] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form.cascade select[b-9tk4mvclck] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; -webkit-appearance: none; appearance: none;
    cursor: pointer; background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px; padding-right: 34px; }
.form.cascade select:disabled[b-9tk4mvclck] { opacity: .6; cursor: default; }
/* The date box is a filter for the Subject picker beside it, so it sits on the same grid row rhythm. */
.form.cascade input.paper-date[b-9tk4mvclck] { margin-top: 6px; }
.no-subjects[b-9tk4mvclck] { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #c02b3c; }
@media (max-width: 900px) { .form.cascade[b-9tk4mvclck] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-9tk4mvclck] { grid-template-columns: 1fr; } }
.req[b-9tk4mvclck] { color: #c02b3c; }

.counts-strip[b-9tk4mvclck] { margin-top: 4px; }

.toolbar[b-9tk4mvclck]  .search-box .search { min-width: 240px; }
.count[b-9tk4mvclck] { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.count b[b-9tk4mvclck] { color: var(--ink); font-variant-numeric: tabular-nums; }

.pager[b-9tk4mvclck] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; font-size: 13px; color: var(--muted); }

/* Bulk Excel template export / import panel (legacy Action -> Export Template / Import). */
.import-panel[b-9tk4mvclck] { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
                padding: 16px 18px; margin-top: 14px; }
.import-panel .group-head[b-9tk4mvclck] { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.import-panel .hint[b-9tk4mvclck] { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.import-actions[b-9tk4mvclck] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-btn[b-9tk4mvclck] { position: relative; overflow: hidden; }
.file-btn[b-9tk4mvclck]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-9tk4mvclck] { font-size: 12.5px; color: var(--muted); }
.import-result[b-9tk4mvclck] { margin-top: 14px; }
.errors[b-9tk4mvclck] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-9tk4mvclck] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

/* Exam / Paper Date — a read-only value in the cascade grid, sized like the controls beside it so the
   row keeps one baseline, but visibly not an input (no border, no chevron). */
.exam-date-field[b-9tk4mvclck] { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.exam-date[b-9tk4mvclck] { display: block; margin-top: 6px; padding: 8px 0; font-size: 13.5px; font-weight: 700;
             color: var(--ink); font-variant-numeric: tabular-nums; }
/* /Pages/AttendanceSubjectReport.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions, the required-field
   asterisk, the rows-per-page picker, the drill-down links and the Help modal). Everything else —
   cand-head, card, toolbar, grid, pager, banner — comes from app.css. */

.head-actions[b-7lgwk97u4w] { display: flex; align-items: center; gap: 14px; }

.req[b-7lgwk97u4w] { color: #c02b3c; margin-left: 3px; }

.toolbar select:disabled[b-7lgwk97u4w] { opacity: .6; cursor: default; }

.btn.ghost[b-7lgwk97u4w] { background: transparent; }

.count[b-7lgwk97u4w] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* The Present / Absent / UFM counts are LinkButtons in legacy — underlined, bold, accent-coloured. */
[b-7lgwk97u4w] .subject-report .drill { border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline;
    font-variant-numeric: tabular-nums; }
[b-7lgwk97u4w] .subject-report .drill:hover { filter: brightness(1.1); }
[b-7lgwk97u4w] .subject-report .zero { color: var(--muted); font-variant-numeric: tabular-nums; }
[b-7lgwk97u4w] .subject-report .subj { text-align: left; }

.details-view .list-head[b-7lgwk97u4w] { align-items: center; }

.help-body h5[b-7lgwk97u4w] { margin: 14px 0 6px; }
.help-body ul[b-7lgwk97u4w] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }

.table-scroll[b-7lgwk97u4w] { overflow-x: auto; }
/* /Pages/AutoAssignExaminer.razor.rz.scp.css */
.cand-head[b-i89g35zuyl] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-i89g35zuyl] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-i89g35zuyl] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-i89g35zuyl] { color: var(--ink); }

.card[b-i89g35zuyl] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

/* Legacy cascade filter grid — label above its control, auto-fitting columns, as on the sibling
   evaluation pages (ReassignExaminer / AssignExaminerCountWise). */
.form.cascade[b-i89g35zuyl] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-i89g35zuyl] { margin-bottom: 14px; }
.form label[b-i89g35zuyl] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-i89g35zuyl] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-i89g35zuyl] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-i89g35zuyl] { opacity: .55; cursor: not-allowed; }

.toolbar[b-i89g35zuyl] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-i89g35zuyl] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-i89g35zuyl], .toolbar input[type="text"][b-i89g35zuyl] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-i89g35zuyl], .toolbar input:focus[b-i89g35zuyl] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-i89g35zuyl] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.exam-meta[b-i89g35zuyl] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px;
             padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.exam-meta .exam-name[b-i89g35zuyl] { font-weight: 700; color: var(--ink); }
/* The three counts read as data, so the numbers carry the weight rather than the labels. */
.exam-meta .rules b[b-i89g35zuyl], .exam-meta .examiner-count b[b-i89g35zuyl] { color: var(--ink); font-variant-numeric: tabular-nums; }
.exam-meta .done[b-i89g35zuyl] { color: var(--good); font-weight: 600; }

/* The message banners are gone - every message is a popup now - but the page keeps ONE static
   banner: the persistent "pool examiners are pre-selected" note at the top. Only .info survives
   with it; the ok/err/warn variants went with the messages. */
.banner[b-i89g35zuyl] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.info[b-i89g35zuyl] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.btn[b-i89g35zuyl] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-i89g35zuyl] { background: var(--track); }
.btn.primary[b-i89g35zuyl] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-i89g35zuyl] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-i89g35zuyl] { opacity: .55; cursor: default; }

.grid[b-i89g35zuyl] { width: 100%; border-collapse: collapse; }
.grid thead th[b-i89g35zuyl] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-i89g35zuyl] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-i89g35zuyl] { border-bottom: none; }
.grid tbody tr:hover td[b-i89g35zuyl] { background: var(--surface-2); }
.grid .nm[b-i89g35zuyl] { font-weight: 600; }
.ta-c[b-i89g35zuyl] { text-align: center; }

.pad[b-i89g35zuyl] { padding: 22px 6px; }
.sub[b-i89g35zuyl] { color: var(--muted); font-size: 13px; }


.pager[b-i89g35zuyl] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

/* The assigned-candidates view header: the Back button sits left, the count right, and the row keeps
   its distance from the table underneath instead of resting on it. */
.assigned-toolbar[b-i89g35zuyl] { margin-bottom: 14px; }
.assigned-toolbar .back[b-i89g35zuyl] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Once the distribution has run, the disabled Auto Assign Examiner button is explained rather than
   just dimmed - a disabled control with no reason reads as a fault. */
.assign-done-note[b-i89g35zuyl] { color: var(--muted); font-size: 12.5px; }
/* /Pages/AutoEvaluationResult.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (page head, the filters row
   layout, the stat tile row, and compact button sizing). Everything else — card, grid, pager,
   search-box/search-ico placement, and the base .stat flex layout — comes from app.css. */

.hub-head[b-fh7jc1mw53] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-fh7jc1mw53] { margin: 0; color: var(--muted); font-size: 13.5px; }

/* QA #2531 round 2 B: fixed 3-column grid with full-width selects. It was a flex-wrap row with only a
   min-width, so each select grew to its selected label and shoved its neighbours onto a new line. */
.filters[b-fh7jc1mw53] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; }
.filters label[b-fh7jc1mw53] { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.filters select[b-fh7jc1mw53] {
    width: 100%; min-width: 0; text-overflow: ellipsis;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.filters select:focus[b-fh7jc1mw53] { outline: 2px solid var(--accent); outline-offset: -1px; }
.filters select:disabled[b-fh7jc1mw53] { opacity: .6; cursor: default; }

/* QA #2531 round 2 D: search moved to the head's right, with Search and Clear as separate buttons. */
.search-bar[b-fh7jc1mw53] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-bar[b-fh7jc1mw53]  .search-box input {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 10px; padding: 9px 36px 9px 12px; font-size: 13.5px; width: 320px; max-width: 100%; }
.search-bar[b-fh7jc1mw53]  .search-box input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.stats[b-fh7jc1mw53] { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat b[b-fh7jc1mw53] { font-size: 24px; font-weight: 700; color: var(--ink); }
.stat small[b-fh7jc1mw53] { color: var(--faint); font-size: 12px; font-weight: 600; }

.btn.small[b-fh7jc1mw53] { padding: 5px 10px; font-size: 12px; }

/* Hint shown under a disabled Upload/Reupload button when the Subject filter is "— All —" — that
   state has no reliable per-row categoryId to reupload against (see AutoEvaluationResult.razor). */
.hint[b-fh7jc1mw53] { margin: 4px 0 0; color: var(--faint); font-size: 11px; font-weight: 500; }

/* Keeps Upload/Reupload, View and the ⋮ menu on one baseline (QA 2026-09-09 #3). */
.row-actions[b-fh7jc1mw53] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.error[b-fh7jc1mw53] { margin: 10px 0 0; color: var(--bad, #c0392b); font-size: 12.5px; }

/* File picker button used inside the modal — ::deep reaches the InputFile child component's
   <input>, which does not carry this component's scope attribute. */
.file-btn[b-fh7jc1mw53] { position: relative; overflow: hidden; cursor: pointer; display: inline-flex;
            align-items: center; gap: 6px; }
.file-btn[b-fh7jc1mw53]  .file-input { position: absolute; inset: 0; width: 100%; height: 100%;
                                opacity: 0; cursor: pointer; }

/* Toast notification — this app has no established toast convention yet, so this is deliberately a
   small, simple fixed-position notice rather than a new design system. */
.toast[b-fh7jc1mw53] {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    padding: 12px 18px; border-radius: var(--radius); box-shadow: var(--shadow);
    font-size: 13.5px; font-weight: 600; color: #fff; background: var(--ink);
}
.toast.success[b-fh7jc1mw53] { background: var(--good, #2e7d32); }
.toast.error[b-fh7jc1mw53] { background: var(--bad, #c0392b); }
.toast.warning[b-fh7jc1mw53] { background: #b98900; }
.toast.info[b-fh7jc1mw53] { background: var(--accent); }

/* Result Overview modal (legacy-parity layout, app design tokens). */
.detail-content[b-fh7jc1mw53] { display: flex; flex-direction: column; gap: 0; }

/* Sticky because this is now the modal's only header (AppModal's is suppressed via HideHeader) —
   the panel is 94vh and its body scrolls, so Back and the close have to stay reachable. */
.overview-header[b-fh7jc1mw53] { display: flex; align-items: center; gap: 14px; background: var(--accent); color: #fff;
    margin: -20px -22px 14px; padding: 14px 18px; border-radius: var(--radius) var(--radius) 0 0;
    position: sticky; top: -20px; z-index: 2; }
.overview-header .back-btn[b-fh7jc1mw53] { background: rgba(255,255,255,.15); color: #fff; border: 0; }
.overview-head-info[b-fh7jc1mw53] { flex: 1 1 auto; }
.overview-head-info h2[b-fh7jc1mw53] { margin: 0; font-size: 18px; color: #fff; }
.exam-details[b-fh7jc1mw53] { margin: 4px 0 0; font-size: 12.5px; opacity: .95; }
.exam-details .divider[b-fh7jc1mw53] { margin: 0 8px; opacity: .6; }
.btn-x[b-fh7jc1mw53] { background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; }

.detail-body[b-fh7jc1mw53] { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }

.left-panel[b-fh7jc1mw53] { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
    display: flex; flex-direction: column; height: 76vh; overflow: hidden; }
.left-panel-header[b-fh7jc1mw53] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.document-type-tabs[b-fh7jc1mw53] { display: flex; gap: 4px; }
.doc-tab[b-fh7jc1mw53] { border: 0; background: transparent; color: var(--muted); padding: 8px 14px; font-size: 13px;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.doc-tab.active[b-fh7jc1mw53] { color: var(--accent); border-bottom-color: var(--accent); }
.view-mode-toggle[b-fh7jc1mw53] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.btn-toggle[b-fh7jc1mw53] { border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.btn-toggle.active[b-fh7jc1mw53] { background: var(--accent); border-color: var(--accent); color: #fff; }

.text-content[b-fh7jc1mw53], .pdf-area[b-fh7jc1mw53] { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.pdf-area[b-fh7jc1mw53]  .pdf-viewer-container { height: 100%; overflow: auto; }
.pdf-area[b-fh7jc1mw53]  .pdf-page-header { background: var(--accent); color: #fff; padding: 8px;
    text-align: center; font-weight: 600; font-size: 12.5px; }
.pdf-area[b-fh7jc1mw53]  .pdf-placeholder { display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--faint); font-size: 14px; }
.pdf-area[b-fh7jc1mw53]  canvas { max-width: 100%; height: auto; display: block; margin: 0 auto 10px; }
.pdf-error[b-fh7jc1mw53] { color: var(--bad, #c0392b); font-size: 12.5px; padding: 8px 12px; }

.right-panel[b-fh7jc1mw53] { display: flex; flex-direction: column; gap: 14px; max-height: 76vh; overflow-y: auto; }
.questions-overview[b-fh7jc1mw53], .score-summary[b-fh7jc1mw53] { border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); padding: 12px; }
.panel-title[b-fh7jc1mw53] { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.questions-list[b-fh7jc1mw53] { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.question-item[b-fh7jc1mw53] { display: flex; justify-content: space-between; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; cursor: pointer;
    font-size: 13px; color: var(--ink); background: var(--surface); }
.question-item:hover[b-fh7jc1mw53] { border-color: var(--accent); }
.question-item.active[b-fh7jc1mw53] { background: var(--accent); border-color: var(--accent); color: #fff; }
.question-item.not-attempted[b-fh7jc1mw53] { opacity: .65; }
.question-score[b-fh7jc1mw53] { font-weight: 600; white-space: nowrap; }
.score-item[b-fh7jc1mw53] { display: flex; justify-content: space-between; font-size: 13px; margin-top: 8px; color: var(--ink); }
.score-value.calculated[b-fh7jc1mw53] { color: var(--good); font-weight: 700; }
.score-value.total[b-fh7jc1mw53] { font-weight: 700; }

@media (max-width: 900px) { .detail-body[b-fh7jc1mw53] { grid-template-columns: 1fr; } .right-panel[b-fh7jc1mw53] { max-height: none; } }

@media (max-width: 900px) { .filters[b-fh7jc1mw53] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) {
  .hub-head[b-fh7jc1mw53] { flex-direction: column; align-items: stretch; }
  .filters[b-fh7jc1mw53] { grid-template-columns: 1fr; }
}

/* Task 4: Text-only view — sectioned content with not-attempted messages and collapsible Model Answer */
.section-title[b-fh7jc1mw53] { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.question-section[b-fh7jc1mw53], .answer-section[b-fh7jc1mw53], .feedback-section[b-fh7jc1mw53], .model-answer-section[b-fh7jc1mw53] { margin-bottom: 16px; }
.rendered-content[b-fh7jc1mw53] { font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.rendered-content table[b-fh7jc1mw53] { border-collapse: collapse; }
.rendered-content td[b-fh7jc1mw53], .rendered-content th[b-fh7jc1mw53] { border: 1px solid var(--border); padding: 4px 8px; }
.not-attempted-message[b-fh7jc1mw53] { color: var(--faint); font-style: italic; font-size: 13px; }
.feedback-header[b-fh7jc1mw53] { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lang-select[b-fh7jc1mw53] {
    border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-family: inherit;
}
.lang-select:focus[b-fh7jc1mw53] { outline: 2px solid var(--accent); outline-offset: -1px; }
.lang-select:disabled[b-fh7jc1mw53] { opacity: .6; }
.model-answer-header[b-fh7jc1mw53] { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.model-answer-header .chev[b-fh7jc1mw53] { color: var(--muted); font-size: 11px; }

/* Row-level three-dot menu (Download of the AI-annotated paper). Same details.action-menu pattern
   as AssignExaminer and siblings — osm-action-menu.js closes any open one on an outside click.
   The panel hangs from the RIGHT edge (unlike the toolbar menus): this sits in the last grid
   column, so a left-anchored 200px panel would overflow the card. */
.action-menu[b-fh7jc1mw53] { position: relative; display: inline-block; vertical-align: middle; }
.action-menu > summary[b-fh7jc1mw53] { list-style: none; cursor: pointer; user-select: none; }
.action-menu > summary[b-fh7jc1mw53]::-webkit-details-marker { display: none; }
.row-menu-toggle[b-fh7jc1mw53] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    font-size: 16px; font-weight: 700; line-height: 1; }
.row-menu-toggle:hover[b-fh7jc1mw53] { background: var(--surface); }
.action-items[b-fh7jc1mw53] { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 170px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.action-item[b-fh7jc1mw53] { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; }
.action-item:hover[b-fh7jc1mw53] { background: var(--surface-2); }
.action-item:disabled[b-fh7jc1mw53] { opacity: .55; cursor: default; }
/* /Pages/BlankPageReport.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions, the required-field
   asterisk, the rows-per-page picker and the Help modal). Everything else — cand-head, card, toolbar,
   grid, pager, banner — comes from app.css. */

.head-actions[b-l1k42iusz8] { display: flex; align-items: center; gap: 14px; }

.req[b-l1k42iusz8] { color: #c02b3c; margin-left: 3px; }

.page-size select[b-l1k42iusz8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }

.toolbar select:disabled[b-l1k42iusz8] { opacity: .6; cursor: default; }

.btn.ghost[b-l1k42iusz8] { background: transparent; }

.help-body h5[b-l1k42iusz8] { margin: 14px 0 6px; }
.help-body ul[b-l1k42iusz8] { margin: 0 0 8px; padding-left: 20px; }

.table-scroll[b-l1k42iusz8] { overflow-x: auto; }
/* /Pages/BookletViewer.razor.rz.scp.css */
.cand-head[b-htkg2wgm8x] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-htkg2wgm8x] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-htkg2wgm8x] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.viewer-card[b-htkg2wgm8x] { padding: 16px 12px; }

.btn[b-htkg2wgm8x] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-htkg2wgm8x] { background: var(--track); }
.btn.ghost[b-htkg2wgm8x] { background: transparent; }
.btn.primary[b-htkg2wgm8x] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled[b-htkg2wgm8x] { opacity: .6; cursor: default; }

.pad[b-htkg2wgm8x] { padding: 22px 6px; }
.sub[b-htkg2wgm8x] { color: var(--muted); }

/* Rendered pages. user-select/-webkit-touch-callout remove the casual copy and long-press-save routes;
   see osm-booklet-viewer.js for why this is a deterrent, not a protection. */
.booklet-pages[b-htkg2wgm8x] { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.booklet-pages[b-htkg2wgm8x]  .bk-page { width: 100%; max-width: 1000px; }
.booklet-pages[b-htkg2wgm8x]  .bk-page-no { color: var(--faint); font-size: 11px; font-weight: 700;
                                    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.booklet-pages[b-htkg2wgm8x]  canvas { width: 100%; height: auto; display: block; border: 1px solid var(--border);
                               border-radius: 6px; background: #fff;
                               user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.head-actions[b-htkg2wgm8x] { display: flex; align-items: center; gap: 10px; }

/* Canvas + annotation overlay share one positioned box so the marks land on the page they belong to. */
/* padding-top holds a not-yet-rendered page's height (set inline from the first page's aspect ratio), so the
   scrollbar is correct from the start and pages don't jump as they rasterise. */
.booklet-pages[b-htkg2wgm8x]  .bk-page-stack { position: relative; line-height: 0; height: 0; }
.booklet-pages[b-htkg2wgm8x]  .bk-page-stack:has(canvas) { height: auto; padding-top: 0 !important; }
.booklet-pages[b-htkg2wgm8x]  .bk-annotations { position: absolute; inset: 0; width: 100%; height: 100%;
                                        pointer-events: none; }

/* The awarded-mark box. Legacy tags it "rectangle btn-clr-ant btn-anotn btn btn-circle zeroantation"
   (Answersheet.css); .zeroantation's !important overrides beat .btn-circle, so despite the class name the
   result is a 37x25 ROUNDED RECTANGLE, not a circle. Values below are that computed result verbatim:
     .btn-anotn    background #56b48c, margin 5px 0
     .btn-clr-ant  color white
     .btn-circle   border none, overflow hidden, padding 0
     .zeroantation bold 17px, border 1px solid #459875, 37x25, radius 6px, centred, margin-top 2px
   line-height is set here because the viewer's page container zeroes it for the canvas. */
.booklet-pages[b-htkg2wgm8x]  .bk-mark {
    background-color: #56b48c; color: #fff; border: 1px solid #459875;
    width: 37px; height: 25px; border-radius: 6px; padding: 0;
    font-weight: bold; font-size: 17px; line-height: 23px; text-align: center;
    margin-top: 2px; overflow: hidden; box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

/* foreignObject children inherit the zeroed line-height otherwise, collapsing the question number. */
.booklet-pages[b-htkg2wgm8x]  foreignObject div { line-height: 1.15; }

/* Printing is blocked in the plain View mode only: nothing of the booklet reaches the printed page, which
   is what makes Ctrl+P useless even though a keydown handler can be bypassed. The annotated (download) mode
   is exempt — legacy showed a Print control on exactly that branch. */
@media print {
    .viewer-card:not(.annotated) .booklet-pages[b-htkg2wgm8x],
    .viewer-card:not(.annotated) .booklet-pages *[b-htkg2wgm8x] { display: none !important; }
    .viewer-card:not(.annotated)[b-htkg2wgm8x]::after { content: "Printing answer sheets is not permitted.";
                  display: flex; align-items: center; justify-content: center; padding: 40px 0;
                  font: 600 16px/1.4 system-ui, sans-serif; color: #000; }
    .head-actions[b-htkg2wgm8x] { display: none !important; }
}

.error-popup h2[b-htkg2wgm8x] { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--ink);
                  display: flex; align-items: center; gap: 8px; }
.error-popup .reason[b-htkg2wgm8x] { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* QA D2: booklet identity as labelled pairs, so a barcode booklet is unambiguous. */
.booklet-meta[b-htkg2wgm8x] { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 2px; }
.booklet-meta > div[b-htkg2wgm8x] { display: flex; flex-direction: column; }
.booklet-meta dt[b-htkg2wgm8x] { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.booklet-meta dd[b-htkg2wgm8x] { margin: 0; font-weight: 600; }

/* The paper's identity, on one bold line as legacy DownloadBooklet.aspx had it. Wraps rather than
   truncating: a long subject name must not push the total score off the edge. */
.paper-line[b-htkg2wgm8x] { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 0; font-size: 14px; }
.paper-line strong[b-htkg2wgm8x] { font-weight: 700; }

/* Question palette: question columns across, marks underneath, in blocks of ten. */
.palette-card[b-htkg2wgm8x] { padding: 14px 16px; }
.palette-block + .palette-block[b-htkg2wgm8x] { margin-top: 12px; }
.palette[b-htkg2wgm8x] { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.palette th[b-htkg2wgm8x], .palette td[b-htkg2wgm8x] { border: 1px solid var(--border); padding: 6px 4px; text-align: center;
                           overflow-wrap: anywhere; }
.palette thead th[b-htkg2wgm8x] { background: var(--track); font-weight: 700; }
.palette tbody td[b-htkg2wgm8x] { font-variant-numeric: tabular-nums; }

/* A block of ten "12) Q3.b (5.00)" headings needs the width; let it scroll on its own rather than
   forcing the whole page sideways on a narrow screen. */
@media (max-width: 900px) {
    .palette-block[b-htkg2wgm8x] { overflow-x: auto; }
    .palette[b-htkg2wgm8x] { min-width: 760px; }
}

/* Download progress. The stamping happens server-side and the browser shows nothing meanwhile, so a
   disabled button alone reads as a dead click. */
.download-veil[b-htkg2wgm8x] { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
                 background: rgba(15, 23, 42, .45); backdrop-filter: blur(1px); }
.download-note[b-htkg2wgm8x] { background: var(--surface); color: var(--ink); border: 1px solid var(--border);
                 border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 26px;
                 max-width: 380px; text-align: center; }
.download-note .title[b-htkg2wgm8x] { margin: 12px 0 6px; font-weight: 700; font-size: 15px; }
.download-note .detail[b-htkg2wgm8x] { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.download-note .spinner[b-htkg2wgm8x] { display: inline-block; width: 26px; height: 26px; border-radius: 50%;
                          border: 3px solid var(--border); border-top-color: var(--accent);
                          animation: bk-spin-b-htkg2wgm8x .8s linear infinite; }

@keyframes bk-spin-b-htkg2wgm8x { to { transform: rotate(360deg); } }

/* Respects a reduced-motion preference: the veil and its message still do the job without spinning. */
@media (prefers-reduced-motion: reduce) {
    .download-note .spinner[b-htkg2wgm8x] { animation-duration: 2.4s; }
}
/* /Pages/CandidateMarks.razor.rz.scp.css */
.cand-head[b-gx2qwzwpp2] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-gx2qwzwpp2] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-gx2qwzwpp2] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-gx2qwzwpp2] { transform:rotate(180deg); }
.card[b-gx2qwzwpp2] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-gx2qwzwpp2] { display:flex; align-items:center; gap:10px; }
.toolbar[b-gx2qwzwpp2]  .search-box { flex:0 0 260px; }
.toolbar[b-gx2qwzwpp2]  .search-box .search { width:100%; }
.count[b-gx2qwzwpp2] { margin-left:auto; color:var(--muted); font-size:13px; }
.status-card[b-gx2qwzwpp2] { display:flex; gap:32px; }
.stat[b-gx2qwzwpp2] { display:flex; flex-direction:column; }
.stat .lbl[b-gx2qwzwpp2] { color:var(--muted); font-size:12px; }
.stat .val[b-gx2qwzwpp2] { font-size:22px; font-weight:700; }
.assign-panel h3[b-gx2qwzwpp2], .card h3[b-gx2qwzwpp2] { font-size:15px; font-weight:700; margin-bottom:10px; }
.assign-row[b-gx2qwzwpp2] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.slot-select[b-gx2qwzwpp2] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.note[b-gx2qwzwpp2] { color:var(--muted); font-size:13px; }
.grid[b-gx2qwzwpp2] { width:100%; border-collapse:collapse; }
.grid th[b-gx2qwzwpp2], .grid td[b-gx2qwzwpp2] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-gx2qwzwpp2] { color:var(--muted); font-weight:600; }
.grid .nm[b-gx2qwzwpp2] { font-weight:600; }
.pad[b-gx2qwzwpp2] { padding:14px; }
.sub[b-gx2qwzwpp2] { color:var(--muted); font-size:13px; }
.btn[b-gx2qwzwpp2] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-gx2qwzwpp2] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-gx2qwzwpp2] { background:transparent; }
.btn:disabled[b-gx2qwzwpp2] { opacity:.5; cursor:default; }
.table-scroll[b-gx2qwzwpp2] { overflow-x:auto; }
.toolbar-wrap[b-gx2qwzwpp2] { flex-wrap:wrap; }
.crs[b-gx2qwzwpp2] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; max-width:220px; }
.pager[b-gx2qwzwpp2] { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pager .pageinfo[b-gx2qwzwpp2] { color:var(--muted); font-size:13px; }
/* Evaluators modal renders in AppModal's "full" tier (QA 2026-09-15: full-mode view of all evaluators). */
.wide .toolbar[b-gx2qwzwpp2] { margin:10px 0; }
.head-actions[b-gx2qwzwpp2] { display:flex; align-items:center; gap:10px; }
/* /Pages/Candidates.razor.rz.scp.css */
.cand-head[b-9j1a4tblcu] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-9j1a4tblcu] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-9j1a4tblcu] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.back:hover[b-9j1a4tblcu] { color: var(--ink); }

.card[b-9j1a4tblcu] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-9j1a4tblcu] { display: flex; align-items: center; gap: 10px; }
.toolbar[b-9j1a4tblcu]  .search-box { flex: 1; max-width: 420px; }
.toolbar[b-9j1a4tblcu]  .search-box .search { width: 100%; }
.toolbar .count[b-9j1a4tblcu] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* The deactivated toolbar lost its search box to the page header, so the count leads the row and Back
   keeps the right edge. */
.toolbar .count.count-left[b-9j1a4tblcu] { margin-left: 0; margin-right: auto; }

.btn[b-9j1a4tblcu] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-9j1a4tblcu] { background: var(--track); }
.btn.primary[b-9j1a4tblcu] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-9j1a4tblcu] { filter: brightness(1.05); }
.btn.ghost[b-9j1a4tblcu] { background: transparent; }
.btn.sm[b-9j1a4tblcu] { padding: 5px 10px; font-size: 12px; }
.btn.danger[b-9j1a4tblcu] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-9j1a4tblcu] { background: rgba(192,43,60,.08); }
.btn:disabled[b-9j1a4tblcu] { opacity: .6; cursor: default; }

.form.cascade[b-9j1a4tblcu] { grid-template-columns: repeat(4, 1fr); align-items: stretch; row-gap: 14px; }

/* QA 1 & 2: keep every filter's control on the same line as its neighbours'. The labels are unequal
   lengths - "Stream | Degree | A.Year *" wraps to two lines in a quarter-width column where "Course *"
   does not - and the cascade grows a Specialization and/or Semester control as the operator drills
   down, so a plain grid parked each <select> wherever its own label happened to end and the row looked
   ragged (worse after a subject was picked, when the row had reflowed). Making each label a flex column
   and pushing its control to the bottom of the cell aligns the controls across the row however the text
   above them wraps. */
.form.cascade label[b-9j1a4tblcu] { display: flex; flex-direction: column; gap: 6px; }
.form.cascade label > select[b-9j1a4tblcu] { margin-top: auto; }
.form select[b-9j1a4tblcu] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form select:focus[b-9j1a4tblcu] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-9j1a4tblcu] { opacity: .6; cursor: default; }
.form .req[b-9j1a4tblcu] { color: #dc2626; margin-left: 3px; }

.table-scroll[b-9j1a4tblcu] { overflow-x: auto; }
.ta-c[b-9j1a4tblcu] { text-align: center; }

.badge[b-9j1a4tblcu] { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge.good[b-9j1a4tblcu] { background: var(--tile-green-bg); color: var(--good); }
.badge.warn[b-9j1a4tblcu] { background: rgba(217,119,6,.12); color: #d97706; }

.grid[b-9j1a4tblcu] { width: 100%; border-collapse: collapse; }
.grid thead th[b-9j1a4tblcu] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-9j1a4tblcu] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-9j1a4tblcu] { border-bottom: none; }
.grid tbody tr:hover td[b-9j1a4tblcu] { background: var(--surface-2); }
.grid .nm[b-9j1a4tblcu] { font-weight: 600; }
.ta-r[b-9j1a4tblcu] { text-align: right; }

.pager[b-9j1a4tblcu] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-9j1a4tblcu] { padding: 22px 6px; }
.sub[b-9j1a4tblcu] { color: var(--muted); }

.banner[b-9j1a4tblcu] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-9j1a4tblcu] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-9j1a4tblcu] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

.form[b-9j1a4tblcu] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form label[b-9j1a4tblcu] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label input[b-9j1a4tblcu], .form label select[b-9j1a4tblcu], .form label textarea[b-9j1a4tblcu] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form input[b-9j1a4tblcu] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-9j1a4tblcu] { outline: 2px solid var(--accent); outline-offset: -1px; }
/* QA round-7 E: the popups' read-only echo of the page's Stream/Course selection. */
.form input.ctx-readonly[b-9j1a4tblcu] { opacity: .75; cursor: default; text-overflow: ellipsis; }
.form.popup-context[b-9j1a4tblcu] { margin-bottom: 12px; }

@media (max-width: 900px) { .form.cascade[b-9j1a4tblcu] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form[b-9j1a4tblcu], .form.cascade[b-9j1a4tblcu] { grid-template-columns: 1fr; } }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */
.head-actions[b-9j1a4tblcu] { display: flex; align-items: center; gap: 10px; }

/* -- bulk select bar -- */
.bulk-bar[b-9j1a4tblcu] { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
/* QA 3: the hint under the Booklet Name field in the Add Candidate form. */
.form label .field-hint[b-9j1a4tblcu] { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.35; }
.btn.danger-solid[b-9j1a4tblcu] { background: #c02b3c; border-color: #c02b3c; color: #fff; }
.btn.danger-solid:hover:not(:disabled)[b-9j1a4tblcu] { filter: brightness(1.05); }
.grid input[type="checkbox"][b-9j1a4tblcu] { cursor: pointer; }

.section-title[b-9j1a4tblcu] { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* -- import / template modals -- */
.popup-note[b-9j1a4tblcu] { margin: -6px 0 16px; font-size: 12.5px; line-height: 1.5; }
.popup-note code[b-9j1a4tblcu] { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.template-mode-hint[b-9j1a4tblcu] { margin-left: 6px; font-size: 12px; font-weight: 400; }
.import-actions[b-9j1a4tblcu] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.file-btn[b-9j1a4tblcu] { position: relative; overflow: hidden; }
.file-input[b-9j1a4tblcu] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-9j1a4tblcu] { font-size: 12.5px; color: var(--muted); }
.errors[b-9j1a4tblcu] { margin: 14px 0 0; padding-left: 20px; color: #c02b3c; font-size: 12.5px; line-height: 1.6;
          max-height: 220px; overflow-y: auto; }

/* -- Template Configuration mapping table (legacy TemplateFieldMappingDiv) -------------------- */
/* Shown for modes 2/3 only: the operator confirms which sheet column feeds which field before the
   import runs. The Default Template matches column names exactly and never renders this. */
.tpl-map[b-9j1a4tblcu] { margin-top: 14px; }
.tpl-map-tbl[b-9j1a4tblcu] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
               border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tpl-map-tbl thead th[b-9j1a4tblcu] { background: var(--surface-2); color: var(--faint); font-size: 11px; font-weight: 700;
                        letter-spacing: .04em; text-transform: uppercase; text-align: left;
                        padding: 7px 10px; border-bottom: 1px solid var(--border); }
.tpl-map-tbl tbody td[b-9j1a4tblcu] { padding: 5px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tpl-map-tbl tbody tr:last-child td[b-9j1a4tblcu] { border-bottom: none; }
.tpl-map-tbl .tpl-field[b-9j1a4tblcu] { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tpl-map-tbl select[b-9j1a4tblcu], .tpl-map-tbl input[b-9j1a4tblcu] { width: 100%; box-sizing: border-box; font-family: inherit;
                                          font-size: 12px; padding: 5px 7px; border-radius: 7px;
                                          border: 1px solid var(--border); background: var(--surface-2);
                                          color: var(--ink); }
.tpl-map-tbl select:disabled[b-9j1a4tblcu], .tpl-map-tbl input:disabled[b-9j1a4tblcu] { opacity: .55; cursor: not-allowed; }
.tpl-map-tbl .btn.sm[b-9j1a4tblcu] { padding: 3px 9px; font-size: 11px; }
.tpl-map-tbl .btn.sm.danger[b-9j1a4tblcu] { color: #c02b3c; }
.tpl-map .tpl-map-note[b-9j1a4tblcu] { margin: 0 0 8px; font-size: 11.5px; line-height: 1.45; }
/* /Pages/CandidatesHub.razor.rz.scp.css */
.hub-head[b-77anbmogyo] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-77anbmogyo] { margin: 0; color: var(--muted); font-size: 13.5px; }

.hub-head[b-77anbmogyo]  .search-box { position: relative; display: flex; align-items: center; }
.hub-head[b-77anbmogyo]  .search-box .search-ico { position: absolute; left: 11px; color: var(--faint); display: inline-flex;
                          align-items: center; pointer-events: none; }
.hub-head[b-77anbmogyo]  .search-box .search { width: 260px; max-width: 100%; border: 1px solid var(--border); background: var(--surface-2);
                      color: var(--ink); border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13.5px; }
.hub-head[b-77anbmogyo]  .search-box .search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.card[b-77anbmogyo] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-77anbmogyo] { padding: 22px; }
.sub[b-77anbmogyo] { color: var(--faint); font-size: 13px; }

.group .group-head[b-77anbmogyo] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-77anbmogyo] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-77anbmogyo] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-77anbmogyo] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-77anbmogyo] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-77anbmogyo]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-77anbmogyo] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-77anbmogyo]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-77anbmogyo]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-77anbmogyo] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-77anbmogyo] { font-size: 14px; font-weight: 620; }
.txt small[b-77anbmogyo] { color: var(--faint); font-size: 12px; }
.arrow[b-77anbmogyo] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-77anbmogyo] { color: var(--accent); }

@media (max-width: 620px) {
  .hub-head[b-77anbmogyo] { flex-direction: column; align-items: stretch; }
  .hub-head[b-77anbmogyo]  .search-box .search { width: 100%; }
}

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-77anbmogyo] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-77anbmogyo] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-77anbmogyo]  .search-box { align-self: flex-start; }
.hub-head[b-77anbmogyo]  .search-box .search { width: min(420px, 100%); }
/* /Pages/CertificateAppointment.razor.rz.scp.css */
/* Examiner appointment letter. This is an official document an examiner prints, so it is laid out as a
   sheet of paper rather than as an admin screen: serif body, generous measure, and a print stylesheet
   that drops the chrome instead of legacy's hide-a-dozen-divs-by-id JavaScript. */

.state[b-3mtx0zishc] { padding: 48px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.state.error h1[b-3mtx0zishc] { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--ink); }
.state.error p[b-3mtx0zishc] { margin: 0 auto; max-width: 460px; font-size: 13.5px; line-height: 1.55; }

.sheet[b-3mtx0zishc] { max-width: 860px; margin: 0 auto; padding: 24px 20px 56px; }

.toolbar[b-3mtx0zishc] { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.print-btn[b-3mtx0zishc] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; }
.print-btn:hover[b-3mtx0zishc] { background: var(--track); }

.letter[b-3mtx0zishc] { background: #fff; color: #111; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 40px 48px 48px;
    font-family: Georgia, "Times New Roman", serif; font-size: 15.5px; line-height: 1.7; }

/* The institute's certificate banners are wide, short artwork. Constrain by width and let the height
   follow, rather than legacy's fixed 1000x150 which distorted anything not that exact ratio. */
.banner[b-3mtx0zishc] { display: block; width: 100%; max-height: 150px; object-fit: contain; margin: 0 0 22px; }
.banner.footer[b-3mtx0zishc] { margin: 32px 0 0; }

.issued[b-3mtx0zishc] { text-align: right; margin: 0 0 26px; }
.to[b-3mtx0zishc] { margin: 0 0 22px; }
.subject[b-3mtx0zishc] { margin: 0 0 22px; }
.letter p[b-3mtx0zishc] { margin: 0 0 18px; }
.letter p:last-child[b-3mtx0zishc] { margin-bottom: 0; }

@media (max-width: 640px) {
    .sheet[b-3mtx0zishc] { padding: 16px 12px 40px; }
    .letter[b-3mtx0zishc] { padding: 24px 20px 28px; font-size: 14.5px; }
}

/* Paper: no toolbar, no card chrome, black on white edge to edge. */
@media print {
    @page { margin: 12mm; }
    .sheet[b-3mtx0zishc] { max-width: none; margin: 0; padding: 0; }
    .toolbar[b-3mtx0zishc] { display: none; }
    .letter[b-3mtx0zishc] { border: none; border-radius: 0; box-shadow: none; padding: 0;
              background: #fff; color: #000; font-size: 12.5pt; }
    .banner[b-3mtx0zishc] { max-height: 30mm; }
}
/* /Pages/ConfigToggle.razor.rz.scp.css */
.cfg-row[b-m16pin64gx] {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--border); min-height: 46px; cursor: pointer;
}
.cfg-lbl[b-m16pin64gx] { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* Switch: hidden native checkbox drives an accent-filled track + sliding knob. */
.switch[b-m16pin64gx] { position: relative; flex: none; display: inline-block; width: 42px; height: 24px;
    border-radius: 999px; background: var(--track); border: 1px solid var(--border);
    transition: background .16s, border-color .16s; }
.switch input[b-m16pin64gx] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch .knob[b-m16pin64gx] { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15,17,40,.28); transition: transform .16s; }
.switch.on[b-m16pin64gx] { background: var(--accent); border-color: var(--accent); }
.switch.on .knob[b-m16pin64gx] { transform: translateX(18px); }

/* Read-only switch (legacy disabled="disabled"): visibly inert, cursor says "not clickable". */
.switch.disabled[b-m16pin64gx] { opacity: .55; }
.switch.disabled input[b-m16pin64gx] { cursor: not-allowed; }
/* /Pages/ConsolidatedActivityTracker.razor.rz.scp.css */
.cand-head[b-g5tdz35ypp] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-g5tdz35ypp] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-g5tdz35ypp] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.head-actions[b-g5tdz35ypp] { display: flex; align-items: center; gap: 14px; }

.card[b-g5tdz35ypp] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-g5tdz35ypp] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar select.crs[b-g5tdz35ypp], .toolbar select.ssn[b-g5tdz35ypp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                     border-radius: 9px; padding: 7px 10px; font-size: 13.5px; min-width: 160px; }
.toolbar input:is([type="date"], [data-osm-date])[b-g5tdz35ypp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                               border-radius: 9px; padding: 7px 10px; font-size: 13.5px; }
.toolbar .count[b-g5tdz35ypp] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-g5tdz35ypp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-g5tdz35ypp] { background: var(--track); }
.btn.primary[b-g5tdz35ypp] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-g5tdz35ypp] { filter: brightness(1.05); }
.btn.ghost[b-g5tdz35ypp] { background: transparent; }
.btn:disabled[b-g5tdz35ypp] { opacity: .6; cursor: default; }

.grid[b-g5tdz35ypp] { width: 100%; border-collapse: collapse; }
.grid thead th[b-g5tdz35ypp] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-g5tdz35ypp] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-g5tdz35ypp] { border-bottom: none; }
.grid tbody tr:hover td[b-g5tdz35ypp] { background: var(--surface-2); }
.grid .nm[b-g5tdz35ypp] { font-weight: 600; }

.table-scroll[b-g5tdz35ypp] { overflow-x: auto; }

.pad[b-g5tdz35ypp] { padding: 22px 6px; }
.sub[b-g5tdz35ypp] { color: var(--muted); }

.pager[b-g5tdz35ypp] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }

.err-banner[b-g5tdz35ypp] {
    margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
    background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b);
}

button.link[b-g5tdz35ypp] {
    background: transparent; border: none; padding: 0; margin: 0;
    color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .12s;
}
button.link:hover[b-g5tdz35ypp] { text-decoration-color: var(--accent); }
button.link:disabled[b-g5tdz35ypp] { color: var(--muted); cursor: default; }
button.link:disabled:hover[b-g5tdz35ypp] { text-decoration-color: transparent; }

.detail-head[b-g5tdz35ypp] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.detail-head h3[b-g5tdz35ypp] { margin: 0 0 4px; }
.detail-head .sub[b-g5tdz35ypp] { margin: 0; }
/* /Pages/CopyModerationRules.razor.rz.scp.css */
.cand-head[b-9oved3t0w3] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-9oved3t0w3] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-9oved3t0w3] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-9oved3t0w3] { color: var(--ink); }

.card[b-9oved3t0w3] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.group-head[b-9oved3t0w3] { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              color: var(--faint); margin-bottom: 12px; }

.toolbar[b-9oved3t0w3] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-9oved3t0w3] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select:focus[b-9oved3t0w3] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-9oved3t0w3] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Picker rows: label above control, every control a FIXED width, and the row bottom-aligned.

   Two bugs this fixes. The selects previously had only a min-width, so picking a long
   "Stream | Degree | AYear" widened the box and pushed every control after it along - the row
   re-laid itself out on each selection. And with the label sitting BESIDE its select, the action
   button centred itself against the pair rather than lining up with the select, which is what made
   "Add course" look adrift. align-items:end puts every control on one baseline. */
.picker-row[b-9oved3t0w3] { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.picker-row .field[b-9oved3t0w3] { display: flex; flex-direction: column; gap: 6px; }
.picker-row .field > label[b-9oved3t0w3] { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* width ONLY - never flex-basis. `.field` is a COLUMN flex container, so flex-basis there is the
   main axis, i.e. the HEIGHT: `flex: 0 0 232px` rendered every select as a 232px-tall box. */
.picker-row select[b-9oved3t0w3] {
    width: 232px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.picker-row select:focus[b-9oved3t0w3] { outline: 2px solid var(--accent); outline-offset: -1px; }
.picker-row select:disabled[b-9oved3t0w3] { opacity: .55; cursor: default; }
.picker-row .btn[b-9oved3t0w3] { padding: 8px 16px; }
/* Beside the button it belongs to, not shoved to the far edge of the panel where it reads as an
   unrelated stat. */
.picker-row .count[b-9oved3t0w3] { color: var(--faint); font-size: 12.5px;
                     font-variant-numeric: tabular-nums; padding-bottom: 9px; }

/* Inside the popup the two panels are stacked, so the second heading needs air above it. */
.copy-modal .group-head.copy-head[b-9oved3t0w3] { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.copy-modal .table-scroll[b-9oved3t0w3] { margin-top: 2px; }

.btn[b-9oved3t0w3] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-9oved3t0w3] { background: var(--track); }
.btn.primary[b-9oved3t0w3] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-9oved3t0w3] { filter: brightness(1.06); background: var(--accent); }
.btn.ghost[b-9oved3t0w3] { background: transparent; }
.btn:disabled[b-9oved3t0w3] { opacity: .55; cursor: default; }

.staged[b-9oved3t0w3] { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.staged li[b-9oved3t0w3] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px;
             padding: 8px 12px; font-size: 13px; color: var(--ink); }
.staged .nm[b-9oved3t0w3] { font-weight: 600; }

.form-actions[b-9oved3t0w3] { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.table-scroll[b-9oved3t0w3] { overflow-x: auto; }
.grid[b-9oved3t0w3] { width: 100%; border-collapse: collapse; }
.grid thead th[b-9oved3t0w3] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-9oved3t0w3] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-9oved3t0w3] { border-bottom: none; }
.grid tbody tr:hover td[b-9oved3t0w3] { background: var(--surface-2); }
.grid .nm[b-9oved3t0w3] { font-weight: 600; }

.pad[b-9oved3t0w3] { padding: 22px 6px; }
.sub[b-9oved3t0w3] { color: var(--muted); font-size: 13px; }

/* Both grids now carry legacy's full column sets, so they scroll sideways rather than widening the
   page. Rule cells are centred as on main. */
.table-scroll[b-9oved3t0w3] { overflow-x: auto; }
.grid th.ta-c[b-9oved3t0w3], .grid td.ta-c[b-9oved3t0w3] { text-align: center; white-space: nowrap; }
/* "Rule 1 From" over two lines - the sixteen single-line headers were what forced the preview grid
   into a sideways scroll. The break is explicit markup (<span class="ln">), not a wrap, so every
   header breaks in the same place and the columns line up. */
.grid th .ln[b-9oved3t0w3] { display: block; line-height: 1.35; }
.grid th.rule-col[b-9oved3t0w3] { min-width: 62px; }
.req[b-9oved3t0w3] { color: #c02b3c; font-weight: 700; margin-right: 2px; }

/* Copy outcome popup (legacy ModalPopupExtender2 + ErrormsgLbl). */
.popup-msg[b-9oved3t0w3] { margin: 0; font-size: 14px; font-weight: 600; text-align: center; }
.popup-msg.ok[b-9oved3t0w3] { color: var(--good); }
.popup-msg.err[b-9oved3t0w3] { color: #c02b3c; }
/* /Pages/CopyQuestionPaper.razor.rz.scp.css */
.cand-head[b-0dje7doje6] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-0dje7doje6] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-0dje7doje6] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-0dje7doje6] { color: var(--accent); }
.back :global(svg)[b-0dje7doje6] { transform: rotate(180deg); }

.card[b-0dje7doje6] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.card h2[b-0dje7doje6] { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }


.two-col[b-0dje7doje6] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.two-col > .panel[b-0dje7doje6] { display: flex; flex-direction: column; margin-bottom: 0; }

.panel-head[b-0dje7doje6] { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 16px;
              border-bottom: 1px solid var(--border); }
.panel-head h2[b-0dje7doje6] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.step-sub[b-0dje7doje6] { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.step-no[b-0dje7doje6] { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%;
           background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; }

.panel-grid[b-0dje7doje6] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.panel-grid > label[b-0dje7doje6] { margin-bottom: 0; }
.panel-grid .span-2[b-0dje7doje6] { grid-column: 1 / -1; }
.new-exam[b-0dje7doje6] { margin-top: 14px; }

.panel label[b-0dje7doje6] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.panel label input[b-0dje7doje6], .panel label select[b-0dje7doje6], .panel label textarea[b-0dje7doje6] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.panel .req[b-0dje7doje6] { color: #dc2626; margin-left: 3px; }
.panel select[b-0dje7doje6], .panel input[type=text][b-0dje7doje6] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 10px; font-size: 13.5px; width: 100%; }
.panel select:focus[b-0dje7doje6], .panel input:focus[b-0dje7doje6] { outline: 2px solid var(--accent); outline-offset: -1px; }
.panel select:disabled[b-0dje7doje6] { opacity: .6; cursor: default; }

.actions[b-0dje7doje6] { display: flex; gap: 10px; margin-top: 16px; }

.popup-title[b-0dje7doje6] { margin: 0 0 6px; font-size: 16px; }
.popup-title.success[b-0dje7doje6] { color: var(--good); }
.popup-sub[b-0dje7doje6] { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.btn[b-0dje7doje6] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-0dje7doje6] { background: var(--track); }
.btn.primary[b-0dje7doje6] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-0dje7doje6] { filter: brightness(1.05); }
.btn:disabled[b-0dje7doje6] { opacity: .6; cursor: default; }

.info[b-0dje7doje6] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
        margin-top: 18px; background: var(--border); border: 1px solid var(--border);
        border-radius: 10px; overflow: hidden; }
.info-row[b-0dje7doje6] { display: flex; flex-direction: column; gap: 4px; background: var(--surface); padding: 10px 12px; }
.info-row .k[b-0dje7doje6] { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em;
               text-transform: uppercase; }
.info-row .v[b-0dje7doje6] { color: var(--ink); font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }

.pad[b-0dje7doje6] { padding: 10px 4px; }
.sub[b-0dje7doje6] { color: var(--muted); }
.banner[b-0dje7doje6] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-0dje7doje6] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-0dje7doje6] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

@media (max-width: 980px) { .two-col[b-0dje7doje6] { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .panel-grid[b-0dje7doje6] { grid-template-columns: 1fr; } }
/* /Pages/CourseMaster.razor.rz.scp.css */
.cand-head[b-6yn4r7ocux] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-6yn4r7ocux] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-6yn4r7ocux] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-6yn4r7ocux] { color: var(--accent); }
.back :global(svg)[b-6yn4r7ocux] { transform: rotate(180deg); }

.card[b-6yn4r7ocux] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-6yn4r7ocux] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-6yn4r7ocux] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-6yn4r7ocux] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-6yn4r7ocux], .form label select[b-6yn4r7ocux], .form label textarea[b-6yn4r7ocux] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-6yn4r7ocux] { color: #dc2626; margin-left: 3px; }
.form input[b-6yn4r7ocux], .form select[b-6yn4r7ocux] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-6yn4r7ocux], .form select:focus[b-6yn4r7ocux] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-6yn4r7ocux] { opacity: .6; cursor: default; }

.actions[b-6yn4r7ocux] { display: flex; gap: 10px; margin-top: 18px; }
.btn[b-6yn4r7ocux] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-6yn4r7ocux] { background: var(--track); }
.btn.primary[b-6yn4r7ocux] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-6yn4r7ocux] { filter: brightness(1.05); }
.btn.ghost[b-6yn4r7ocux] { background: transparent; }
.btn:disabled[b-6yn4r7ocux] { opacity: .6; cursor: default; }

.list-head[b-6yn4r7ocux] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-6yn4r7ocux] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.search-row[b-6yn4r7ocux] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row select[b-6yn4r7ocux] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                      border-radius: 9px; padding: 8px 10px; font-size: 13.5px; max-width: 220px; }
.search-row select:focus[b-6yn4r7ocux] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-6yn4r7ocux] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-6yn4r7ocux] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-6yn4r7ocux] { width: 100%; border-collapse: collapse; }
.grid thead th[b-6yn4r7ocux] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-6yn4r7ocux] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-6yn4r7ocux] { border-bottom: none; }
.grid tbody tr:hover td[b-6yn4r7ocux] { background: var(--surface-2); }
.ta-c[b-6yn4r7ocux] { text-align: center; }

.link-btn[b-6yn4r7ocux] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-6yn4r7ocux] { color: #c02b3c; }
.link-btn:hover[b-6yn4r7ocux] { filter: brightness(1.12); }
.link-btn:disabled[b-6yn4r7ocux] { opacity: .5; cursor: default; }

.pager[b-6yn4r7ocux] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-6yn4r7ocux] { padding: 18px 4px; }
.sub[b-6yn4r7ocux] { color: var(--muted); }
.banner[b-6yn4r7ocux] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-6yn4r7ocux] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-6yn4r7ocux] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-6yn4r7ocux], .search-row select[b-6yn4r7ocux] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-6yn4r7ocux] { min-width: 150px; max-width: 210px; }
.head-actions[b-6yn4r7ocux] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-6yn4r7ocux]::before { content: "+"; margin-right: 3px; font-weight: 700; }

/* -- import drop-card (ported from ImportTimetable.razor.css) -- */
.dropzone[b-6yn4r7ocux] { position: relative; display: grid; place-items: center; min-height: 92px; margin-top: 6px; padding: 14px;
            border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
            text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover[b-6yn4r7ocux] { border-color: var(--accent); }
.dropzone:focus-within[b-6yn4r7ocux] { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-color: var(--accent); }
.dropzone .dz-copy[b-6yn4r7ocux] { display: grid; gap: 5px; }
.dropzone small[b-6yn4r7ocux] { color: var(--muted); font-weight: 400; }
.dropzone:has(input:disabled)[b-6yn4r7ocux] { opacity: .55; cursor: default; }
.file-input[b-6yn4r7ocux] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:disabled[b-6yn4r7ocux] { cursor: default; }
.file-meta[b-6yn4r7ocux] { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* /Pages/CourseWiseBookletStatus.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions, the KPI tile rows, the
   filter block and the Help modal). Everything else — cand-head, card, toolbar, search, fld, grid, pager,
   banner, stat — comes from app.css. */

.head-actions[b-02iu3ryiug] { display: flex; align-items: center; gap: 14px; }

/* QA round-8 F: both KPI rows were bare label/value stacks flush-left inside one flat card, so the
   figures ran together and nothing separated one metric from the next. Each is now a bordered cell
   of its own with its label and value centred, and both rows share the one recipe so the two bands
   read as one block. */
.tiles[b-02iu3ryiug], .totals-row[b-02iu3ryiug] { display: grid; gap: 16px; }
.tiles[b-02iu3ryiug] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.totals-row[b-02iu3ryiug] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.tiles .stat[b-02iu3ryiug], .totals-row .tot[b-02iu3ryiug] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 14px; text-align: center;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.tiles .lbl[b-02iu3ryiug], .totals-row .lbl[b-02iu3ryiug] { color: var(--muted); font-size: 12px; font-weight: 600;
                                text-align: center; text-wrap: balance; }
.tiles .val[b-02iu3ryiug], .totals-row .val[b-02iu3ryiug] { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.tiles .val[b-02iu3ryiug] { font-size: 26px; }
.totals-row .val[b-02iu3ryiug] { font-size: 22px; }

.filters[b-02iu3ryiug] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.filters .fld[b-02iu3ryiug] { display: flex; flex-direction: column; align-items: stretch; gap: 6px;
                font-size: 12.5px; font-weight: 600; color: var(--muted); }
.filters .fld select[b-02iu3ryiug], .filters .fld input[b-02iu3ryiug] { width: 100%; }
/* Matches the asterisk-align recipe used by every other required-field page. */
.filters .fld.req[b-02iu3ryiug]::before { content: "*"; color: #c02b3c; position: absolute; margin-left: -9px; }
.filters .fld.req[b-02iu3ryiug] { position: relative; }

.btn.link[b-02iu3ryiug] { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline;
            font-size: 13px; font-weight: 600; cursor: pointer; }
.btn.link:hover[b-02iu3ryiug] { filter: brightness(1.15); }
.btn.link:disabled[b-02iu3ryiug] { opacity: .5; cursor: default; }
/* /Pages/CourseWiseDetail.razor.rz.scp.css */
.view-toggle[b-366uumcj1s] {
    display: flex;
    gap: 8px;
}

/* Same look as app.css's `.toolbar label` — a <div>, because the SearchBox inside
   is itself a <label> and labels must not nest. */
.toolbar .search-fld[b-366uumcj1s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

/* /Pages/CourseWiseResult.razor.rz.scp.css */
.head-actions[b-rvbt45exjj] {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* /Pages/CoWiseAwardSet.razor.rz.scp.css */
.cand-head[b-ewy1us9329] { display:flex; align-items: center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.cand-head .sub[b-ewy1us9329] { color:var(--muted); font-size:13px; margin-top:2px; }
.head-actions[b-ewy1us9329] { display:flex; align-items:center; gap:10px; }
.card[b-ewy1us9329] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }

/* Cascade filter row — same grid and control styling as AssignExam.razor.css, so the CO Award Set
   dropdowns read identically to the rest of the app. .action-and-filters is global (app.css) and
   places the Action menu before the filters. */
.form.cascade[b-ewy1us9329] { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 16px; align-items:end; }
.form label[b-ewy1us9329] { display:block; font-size:12px; font-weight:600; color:var(--muted); }
.form label select[b-ewy1us9329] { display:block; width:100%; box-sizing:border-box; margin-top:6px; }
.req[b-ewy1us9329] { color:#dc2626; margin-left:3px; }
.form select[b-ewy1us9329] { border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
               border-radius:9px; padding:8px 10px; font-size:13.5px; }
.form select:focus[b-ewy1us9329] { outline:2px solid var(--accent); outline-offset:-1px; }
.form .count[b-ewy1us9329] { align-self:center; color:var(--muted); font-size:13px; }
@media (max-width: 900px) { .form.cascade[b-ewy1us9329] { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-ewy1us9329] { grid-template-columns:1fr; } }

.card h3[b-ewy1us9329] { font-size:15px; font-weight:700; margin-bottom:10px; }
.grid[b-ewy1us9329] { width:100%; border-collapse:collapse; }
.grid th[b-ewy1us9329], .grid td[b-ewy1us9329] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-ewy1us9329] { color:var(--muted); font-weight:600; }
.grid .nm[b-ewy1us9329] { font-weight:600; }
.table-scroll[b-ewy1us9329] { overflow-x:auto; }
.help-body h5[b-ewy1us9329] { font-size:14px; font-weight:700; margin:10px 0 4px; }
.help-body ul[b-ewy1us9329] { margin:0 0 8px 18px; }
.help-body li[b-ewy1us9329] { font-size:13px; color:var(--muted); }
.pad[b-ewy1us9329] { padding:14px; }
.sub[b-ewy1us9329] { color:var(--muted); font-size:13px; }
.btn[b-ewy1us9329] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-ewy1us9329] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-ewy1us9329] { background:transparent; }
.btn:disabled[b-ewy1us9329] { opacity:.5; cursor:default; }

/* View tabs — same treatment as AttendanceReport.razor.css, so the two date-range views match. */
.tabs[b-ewy1us9329] { display:flex; gap:4px; margin:4px 0 16px; border-bottom:1px solid var(--border); }
.tab[b-ewy1us9329] { padding:9px 16px; border:none; background:transparent; color:var(--muted); font:inherit;
       font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover[b-ewy1us9329] { color:var(--ink); }
.tab.on[b-ewy1us9329] { color:var(--accent); border-bottom-color:var(--accent); }

/* Date inputs reuse the cascade's control styling so they sit level with the selects. */
.form input:is([type="date"], [data-osm-date])[b-ewy1us9329] { display:block; width:100%; box-sizing:border-box; margin-top:6px;
                           border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
                           border-radius:9px; padding:8px 10px; font-size:13.5px; }
.form input:is([type="date"], [data-osm-date]):focus[b-ewy1us9329] { outline:2px solid var(--accent); outline-offset:-1px; }
.form .bulk-download[b-ewy1us9329] { justify-self:start; align-self:end; }
/* /Pages/DailyDashboard.razor.rz.scp.css */
.fld[b-eqg3pv8l08] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-eqg3pv8l08] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.count[b-eqg3pv8l08] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
}

.detail[b-eqg3pv8l08] {
    margin-top: 1rem;
}

.detail .toolbar[b-eqg3pv8l08] {
    flex-wrap: wrap;
    gap: .75rem;
}

.detail[b-eqg3pv8l08]  .search-box .search {
    min-width: 220px;
}

.pager[b-eqg3pv8l08] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px 2px;
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* Welcome banner */
.welcome[b-lc74mvmvmx] { position: relative; overflow: hidden; border-radius: var(--radius); color: #fff;
           padding: 30px 34px; background: linear-gradient(105deg, #5b4be6 0%, #7c3aed 60%, #8b5cf6 100%);
           box-shadow: var(--shadow); margin-bottom: 22px; }
.welcome[b-lc74mvmvmx]::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
                  border-radius: 50%; background: rgba(255,255,255,.10); }
.welcome h1[b-lc74mvmvmx] { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 750;
              letter-spacing: -.02em; text-wrap: balance; max-width: 30ch; }
.welcome p[b-lc74mvmvmx] { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.9); max-width: 60ch; }
.welcome p b[b-lc74mvmvmx] { color: #ffe08a; }

/* Two-column dashboard shell */
.dash-cols[b-lc74mvmvmx] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.col-main[b-lc74mvmvmx], .col-side[b-lc74mvmvmx] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.card[b-lc74mvmvmx] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 22px; box-shadow: var(--shadow); }

/* KPI cards */
.kpis[b-lc74mvmvmx] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* QA round-8 B: the KPI tiles are <a> now. They must not read as body links (underline, link
   color) and they need a pointer affordance, since "these look clickable but do nothing" was the
   report. */
.stat[b-lc74mvmvmx] { display: flex; flex-direction: column; gap: 14px; min-height: 138px;
        color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .1s; }
a.stat:hover[b-lc74mvmvmx] { border-color: color-mix(in srgb, var(--accent) 45%, transparent);
               box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-1px); }
a.stat:focus-visible[b-lc74mvmvmx] { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile[b-lc74mvmvmx] { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.tile.blue[b-lc74mvmvmx] { background: var(--tile-blue-bg); color: var(--tile-blue); }
.tile.green[b-lc74mvmvmx] { background: var(--tile-green-bg); color: var(--tile-green); }
.tile.violet[b-lc74mvmvmx] { background: var(--tile-violet-bg); color: var(--tile-violet); }
.stat .num[b-lc74mvmvmx] { font-size: 34px; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat .lbl[b-lc74mvmvmx] { color: var(--muted); font-size: 13.5px; font-weight: 550; }

/* Faculty progress panel */
.panel .phead[b-lc74mvmvmx] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.panel h2[b-lc74mvmvmx] { font-size: 17px; font-weight: 720; letter-spacing: -.01em; margin: 0; }
.panel .pactions[b-lc74mvmvmx] { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
/* QA round-8 C: the picker was free to grow to its widest option - a "Stream | Degree | AYear |
   Course" string - which is what pushed it past the card edge. It is capped here and ellipsised, so
   the field stays inside the panel whatever the course is called. (The dropdown PANEL is clamped to
   the viewport in js/osm-select.js, which is the other half of the same report.) */
.panel .phead select[b-lc74mvmvmx] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                        border-radius: 9px; padding: 6px 10px; font-size: 13px;
                        max-width: 260px; min-width: 0; flex: 0 1 auto;
                        text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.panel .refresh[b-lc74mvmvmx] { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
                  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
                  border-radius: 9px; cursor: pointer; transition: color .15s, border-color .15s; }
.panel .refresh:hover:not(:disabled)[b-lc74mvmvmx] { color: var(--accent);
                  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.panel .refresh:disabled[b-lc74mvmvmx] { opacity: .55; cursor: default; }
.flist[b-lc74mvmvmx] { display: flex; flex-direction: column; }
.pad[b-lc74mvmvmx] { padding: 14px 4px; }
.sub[b-lc74mvmvmx] { color: var(--faint); font-size: 12px; }
.frow[b-lc74mvmvmx] { display: grid; grid-template-columns: 200px 1fr 96px; align-items: center; gap: 16px;
        padding: 14px 4px; border-top: 1px solid var(--border); }
.frow:first-child[b-lc74mvmvmx] { border-top: none; }
.who[b-lc74mvmvmx] { display: flex; align-items: center; gap: 11px; min-width: 0; }
.av[b-lc74mvmvmx] { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
      font-size: 12.5px; font-weight: 700; color: #fff; }
.who .nm[b-lc74mvmvmx] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .sub[b-lc74mvmvmx] { color: var(--faint); font-size: 12px; }
.bar[b-lc74mvmvmx] { height: 9px; border-radius: 6px; background: var(--track); overflow: hidden; }
.bar span[b-lc74mvmvmx] { display: block; height: 100%; border-radius: 6px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.pct[b-lc74mvmvmx] { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.pct.low[b-lc74mvmvmx] { color: var(--warn); } .pct.done[b-lc74mvmvmx] { color: var(--good); }

/* Evaluation progress (donut) */
.eval .ehead[b-lc74mvmvmx] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
               padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.eval h2[b-lc74mvmvmx] { font-size: 18px; font-weight: 720; margin: 0 0 2px; }
.eval .toggle[b-lc74mvmvmx] { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.eval .toggle button[b-lc74mvmvmx] { border: none; background: transparent; color: var(--muted); cursor: pointer;
                       font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: all .12s; }
.eval .toggle button.on[b-lc74mvmvmx] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.etop[b-lc74mvmvmx] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.ecol[b-lc74mvmvmx] { text-align: center; }
.ebig[b-lc74mvmvmx] { font-size: 26px; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ebig.good[b-lc74mvmvmx] { color: var(--good); }
.donut-wrap[b-lc74mvmvmx] { position: relative; width: 200px; height: 200px; margin: 0 auto 24px; }
.donut circle:last-of-type[b-lc74mvmvmx] { transition: stroke-dashoffset .5s ease; }
.donut-mid[b-lc74mvmvmx] { position: absolute; inset: 0; display: flex; flex-direction: column;
             align-items: center; justify-content: center; }
.dpct[b-lc74mvmvmx] { font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.donut-mid .sub[b-lc74mvmvmx] { font-size: 13px; color: var(--muted); font-weight: 500; }
.erows[b-lc74mvmvmx] { display: flex; flex-direction: column; gap: 12px; }
.erows > div[b-lc74mvmvmx] { display: flex; align-items: center; justify-content: space-between; }
.erows b[b-lc74mvmvmx] { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.erows .sub[b-lc74mvmvmx] { font-size: 13px; }

/* Calendar */
.cal[b-lc74mvmvmx] { --exam-day: #f59e0b; }
.cal .head[b-lc74mvmvmx] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal .title[b-lc74mvmvmx] { font-weight: 700; font-size: 17px; }
.cal .month[b-lc74mvmvmx] { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.cal .nav-btn[b-lc74mvmvmx] { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
                background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.cal table[b-lc74mvmvmx] { width: 100%; border-collapse: collapse; text-align: center; }
.cal th[b-lc74mvmvmx] { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding-bottom: 8px; }
.cal td[b-lc74mvmvmx] { font-size: 12.5px; padding: 4px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal td.muted[b-lc74mvmvmx] { color: var(--faint); }
.cal td .d[b-lc74mvmvmx] { width: 28px; height: 28px; line-height: 28px; border-radius: 50%; display: inline-block;
             color: inherit; text-decoration: none; }
/* QA round-8 D: an exam day is a link into the Timetable Report for that date; every other day is
   inert, so only this one gets the pointer and the hover fill. */
.cal td a.d[b-lc74mvmvmx] { cursor: pointer; }
.cal td a.d:hover[b-lc74mvmvmx] { background: color-mix(in srgb, var(--exam-day) 18%, transparent); }
.cal td a.d:focus-visible[b-lc74mvmvmx] { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal td.today .d[b-lc74mvmvmx] { background: var(--accent); color: #fff; font-weight: 700; }
/* Exam days are orange to match the legend dot; today stays accent. */
.cal td.exam .d[b-lc74mvmvmx] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--exam-day) 55%, transparent);
                  color: var(--exam-day); font-weight: 650; }
.cal .legend[b-lc74mvmvmx] { display: flex; gap: 18px; justify-content: center; margin-top: 14px;
               color: var(--muted); font-size: 12px; font-weight: 500; }
.cal .legend span[b-lc74mvmvmx] { display: inline-flex; align-items: center; gap: 6px; }
.cal .legend .dot[b-lc74mvmvmx] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal .legend .dot.exam[b-lc74mvmvmx] { background: var(--exam-day); }
.cal .legend .dot.today[b-lc74mvmvmx] { background: var(--accent); }

/* Quick Links */
.qlinks h2[b-lc74mvmvmx] { font-size: 17px; font-weight: 720; margin: 0 0 2px; }
.qlinks > .sub[b-lc74mvmvmx] { font-size: 13px; margin-bottom: 14px; display: block; }
.qlist[b-lc74mvmvmx] { display: flex; flex-direction: column; gap: 12px; }
.ql[b-lc74mvmvmx] { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px;
      border: 1px solid var(--border); text-decoration: none; color: var(--ink);
      transition: border-color .15s, box-shadow .15s, transform .1s; }
.ql:hover[b-lc74mvmvmx] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow); }
.ql.orange[b-lc74mvmvmx] { background: linear-gradient(100deg, color-mix(in srgb, #f59e0b 12%, var(--surface)), var(--surface)); }
.ql.blue[b-lc74mvmvmx]   { background: linear-gradient(100deg, color-mix(in srgb, #3b82f6 10%, var(--surface)), var(--surface)); }
.ql.grey[b-lc74mvmvmx]   { background: linear-gradient(100deg, color-mix(in srgb, #6b7280 10%, var(--surface)), var(--surface)); }
.ql.red[b-lc74mvmvmx]    { background: linear-gradient(100deg, color-mix(in srgb, #ef4444 12%, var(--surface)), var(--surface)); }
.qic[b-lc74mvmvmx] { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center;
       color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.qic.orange[b-lc74mvmvmx] { background: linear-gradient(135deg, #fb923c, #ea580c); }
.qic.blue[b-lc74mvmvmx]   { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.qic.grey[b-lc74mvmvmx]   { background: linear-gradient(135deg, #9ca3af, #4b5563); }
.qic.red[b-lc74mvmvmx]    { background: linear-gradient(135deg, #f87171, #dc2626); }
.qtext[b-lc74mvmvmx] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qtext b[b-lc74mvmvmx] { font-size: 14px; font-weight: 620; }
.qtext small[b-lc74mvmvmx] { color: var(--faint); font-size: 12px; }
.qarrow[b-lc74mvmvmx] { color: var(--faint); display: inline-flex; }
.badge[b-lc74mvmvmx] { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
         font-variant-numeric: tabular-nums; }
.badge.blue[b-lc74mvmvmx] { background: #3b82f6; }
.badge.red[b-lc74mvmvmx] { background: #ef4444; }

@media (max-width: 1080px) {
  .dash-cols[b-lc74mvmvmx] { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .kpis[b-lc74mvmvmx] { grid-template-columns: 1fr; }
  .frow[b-lc74mvmvmx] { grid-template-columns: 1fr 70px; }
  .frow .bar[b-lc74mvmvmx] { grid-column: 1 / -1; order: 3; }
}

/* An exam day now opens the timetable for that date, so it has to look like it does something.
   Legacy's calendar allows selection on exam days only; the rest stay inert. */
/* /Pages/DegreeMaster.razor.rz.scp.css */
.cand-head[b-sed7edbohp] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-sed7edbohp] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-sed7edbohp] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-sed7edbohp] { color: var(--accent); }
.back :global(svg)[b-sed7edbohp] { transform: rotate(180deg); }

.card[b-sed7edbohp] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-sed7edbohp] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-sed7edbohp] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-sed7edbohp] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-sed7edbohp], .form label select[b-sed7edbohp], .form label textarea[b-sed7edbohp] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-sed7edbohp] { color: #dc2626; margin-left: 3px; }
.form input[b-sed7edbohp], .form select[b-sed7edbohp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-sed7edbohp], .form select:focus[b-sed7edbohp] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-sed7edbohp] { opacity: .6; cursor: default; }

.actions[b-sed7edbohp] { display: flex; gap: 10px; margin-top: 18px; }
.btn[b-sed7edbohp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-sed7edbohp] { background: var(--track); }
.btn.primary[b-sed7edbohp] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-sed7edbohp] { filter: brightness(1.05); }
.btn.ghost[b-sed7edbohp] { background: transparent; }
.btn:disabled[b-sed7edbohp] { opacity: .6; cursor: default; }

.list-head[b-sed7edbohp] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-sed7edbohp] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.search-row[b-sed7edbohp] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row select[b-sed7edbohp] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                      border-radius: 9px; padding: 8px 10px; font-size: 13.5px; max-width: 220px; }
.search-row select:focus[b-sed7edbohp] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-sed7edbohp] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-sed7edbohp] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-sed7edbohp] { width: 100%; border-collapse: collapse; }
.grid thead th[b-sed7edbohp] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-sed7edbohp] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-sed7edbohp] { border-bottom: none; }
.grid tbody tr:hover td[b-sed7edbohp] { background: var(--surface-2); }
.ta-c[b-sed7edbohp] { text-align: center; }

.link-btn[b-sed7edbohp] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-sed7edbohp] { color: #c02b3c; }
.link-btn:hover[b-sed7edbohp] { filter: brightness(1.12); }
.link-btn:disabled[b-sed7edbohp] { opacity: .5; cursor: default; }

.pager[b-sed7edbohp] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-sed7edbohp] { padding: 18px 4px; }
.sub[b-sed7edbohp] { color: var(--muted); }
.banner[b-sed7edbohp] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-sed7edbohp] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-sed7edbohp] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-sed7edbohp], .search-row select[b-sed7edbohp] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-sed7edbohp] { min-width: 150px; max-width: 210px; }
.head-actions[b-sed7edbohp] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-sed7edbohp]::before { content: "+"; margin-right: 3px; font-weight: 700; }

/* -- import drop-card (ported from ImportTimetable.razor.css) -- */
.dropzone[b-sed7edbohp] { position: relative; display: grid; place-items: center; min-height: 92px; margin-top: 6px; padding: 14px;
            border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
            text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover[b-sed7edbohp] { border-color: var(--accent); }
.dropzone:focus-within[b-sed7edbohp] { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-color: var(--accent); }
.dropzone .dz-copy[b-sed7edbohp] { display: grid; gap: 5px; }
.dropzone small[b-sed7edbohp] { color: var(--muted); font-weight: 400; }
.dropzone:has(input:disabled)[b-sed7edbohp] { opacity: .55; cursor: default; }
.file-input[b-sed7edbohp] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:disabled[b-sed7edbohp] { cursor: default; }
.file-meta[b-sed7edbohp] { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* /Pages/DownloadedHistory.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally.
   Everything else — cand-head, card, toolbar, search, fld, count, grid, pager, banner — comes from app.css. */

.head-actions[b-k8hmt13383] { display: flex; align-items: center; gap: 14px; }
/* /Pages/EmailSendingStatus.razor.rz.scp.css */
.limit-label[b-4v2l8efrlo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.limit[b-4v2l8efrlo] {
    min-width: 72px;
}

.badge[b-4v2l8efrlo] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.badge.ok[b-4v2l8efrlo] {
    background: color-mix(in srgb, var(--good) 16%, transparent);
    color: var(--good);
}

.badge.warn[b-4v2l8efrlo] {
    background: color-mix(in srgb, var(--bad) 16%, transparent);
    color: var(--bad);
}

.badge.neutral[b-4v2l8efrlo] {
    background: color-mix(in srgb, var(--muted) 16%, transparent);
    color: var(--muted);
}
/* /Pages/EmailTemplate.razor.rz.scp.css */
.cand-head[b-1hubzi931k] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cand-head .sub[b-1hubzi931k] { margin: 0; color: var(--muted); font-size: 13.5px; }
.head-actions[b-1hubzi931k] { display: flex; align-items: center; gap: 8px; }

/* Help ("Email Template Page Description") body text, inside the shared AppModal. */
.help-body p[b-1hubzi931k] { margin: 0 0 8px; font-size: 13px; color: var(--muted); }

.card[b-1hubzi931k] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 12px; }

/* Two controls, two columns: the four-column grid this used to share with the wider pages left
   half the card empty (QA round-9 A, "unnecessary white space"). */
.form.cascade[b-1hubzi931k] { display: grid; grid-template-columns: repeat(2, minmax(180px, 300px)); gap: 10px 16px; }
/* .fld-lbl, not <label>: see the comment in the page markup. */
.form.cascade .fld-lbl[b-1hubzi931k] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form.cascade .fld-lbl > span[b-1hubzi931k] { display: block; }
.form.cascade .fld-lbl input[b-1hubzi931k] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
/* The dropdowns are PlainSelect components now; ::deep reaches their markup, which carries its own
   field styling. Only the spacing the native selects got from this rule is still needed here. */
.form.cascade .fld-lbl[b-1hubzi931k]  .ps { margin-top: 6px; }
/* The card must not clip the open list. */
.form.cascade[b-1hubzi931k] { overflow: visible; }
.req[b-1hubzi931k] { color: var(--bad, #c02b3c); margin-left: 3px; }
@media (max-width: 900px) { .form.cascade[b-1hubzi931k] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .form.cascade[b-1hubzi931k] { grid-template-columns: 1fr; } }

.form[b-1hubzi931k] { display: flex; flex-direction: column; gap: 11px; padding: 12px; max-width: 720px; }
.fld[b-1hubzi931k] { display: flex; flex-direction: column; gap: 4px; }
.fld > span[b-1hubzi931k] { font-size: .78rem; color: var(--muted); }
.fld input[b-1hubzi931k], .fld textarea[b-1hubzi931k] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.fld textarea[b-1hubzi931k] { resize: vertical; }
/* Server-owned values (From, SMS): visible and copyable, clearly not an editing surface. */
.fld input[readonly][b-1hubzi931k], .fld textarea[readonly][b-1hubzi931k] { background: var(--surface-2); color: var(--muted); cursor: default; }
.fld .hint[b-1hubzi931k] { font-size: .72rem; color: var(--faint); }
.actions[b-1hubzi931k] { display: flex; justify-content: flex-end; }

.btn[b-1hubzi931k] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-1hubzi931k] { background: var(--track); }
.btn.primary[b-1hubzi931k] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-1hubzi931k] { filter: brightness(1.05); }
.btn:disabled[b-1hubzi931k] { opacity: .6; cursor: default; }
.btn.ghost[b-1hubzi931k] { background: transparent; }

.banner[b-1hubzi931k] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-1hubzi931k] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-1hubzi931k] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

.pad[b-1hubzi931k] { padding: 12px 4px; }
.sub[b-1hubzi931k] { color: var(--muted); }

.note[b-1hubzi931k] { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }

/* Body form on the left, merge-field reference on the right (stacks on narrow screens). */
.tpl-grid[b-1hubzi931k] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tpl-grid .form[b-1hubzi931k] { max-width: none; padding: 0; }
@media (max-width: 900px) { .tpl-grid[b-1hubzi931k] { grid-template-columns: 1fr; } }

.merge[b-1hubzi931k] { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.merge-head[b-1hubzi931k] { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.merge-head strong[b-1hubzi931k] { font-size: 13px; color: var(--ink); }
.merge-head .sub[b-1hubzi931k] { font-size: 11.5px; }
.merge-tbl[b-1hubzi931k] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.merge-tbl th[b-1hubzi931k] { text-align: left; padding: 5px 10px; color: var(--muted); font-weight: 600; background: var(--surface); }
.merge-tbl td[b-1hubzi931k] { padding: 5px 10px; border-top: 1px solid var(--border); color: var(--ink); }
.merge-tbl code[b-1hubzi931k] { font-size: 12px; color: var(--accent); }
.merge-row[b-1hubzi931k] { cursor: pointer; }
.merge-row:hover td[b-1hubzi931k] { background: var(--track); }
.actions[b-1hubzi931k] { display: flex; justify-content: flex-end; gap: 8px; }

/* Per-row Copy: puts the bare @Token on the clipboard, so a paste carries no cell, border or
   highlight with it. stopPropagation on the button keeps the row's insert-at-cursor click separate. */
.merge-tbl .copy-cell[b-1hubzi931k] { width: 1%; padding-left: 0; text-align: right; white-space: nowrap; }
.merge-tbl .copy[b-1hubzi931k] {
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.merge-row:hover .copy[b-1hubzi931k] { border-color: var(--accent); color: var(--accent); }
.merge-tbl .copy:hover[b-1hubzi931k] { background: var(--track); color: var(--ink); }
/* /Pages/EnableInprogressPaper.razor.rz.scp.css */
.cand-head[b-jlr1tuj8nu] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-jlr1tuj8nu] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-jlr1tuj8nu] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-jlr1tuj8nu] { color: var(--ink); }

.card[b-jlr1tuj8nu] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-jlr1tuj8nu] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar select[b-jlr1tuj8nu], .toolbar input:is([type="date"], [data-osm-date])[b-jlr1tuj8nu], .toolbar input[type="number"][b-jlr1tuj8nu], .toolbar input[type="text"][b-jlr1tuj8nu] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-jlr1tuj8nu], .toolbar input:focus[b-jlr1tuj8nu] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-jlr1tuj8nu] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Action bar above the grid, same as AssignExaminer's: heading left, "N selected" + Enable pushed
   right by the .count rule above. The h3 needs its own size/margin reset — the global .toolbar rule
   does not touch headings. */
.toolbar h3[b-jlr1tuj8nu] { font-size: 15px; font-weight: 700; margin: 0; }
.grid-toolbar[b-jlr1tuj8nu] { margin-bottom: 12px; }

/* Filter grid — label above its control, same layout as AssignExaminer / AssignSubject / Candidates /
   Attendance / AssignExam's ".form.cascade" (legacy's col-sm-3 cells). min-width:0 lets a column
   shrink below the select's intrinsic width so a long option name cannot push the control out of the
   card. */
.form.cascade[b-jlr1tuj8nu] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-jlr1tuj8nu] { margin-bottom: 0; }
.form label[b-jlr1tuj8nu] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-jlr1tuj8nu], .form label input[b-jlr1tuj8nu] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-jlr1tuj8nu], .form label input:focus[b-jlr1tuj8nu] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-jlr1tuj8nu], .form label input:disabled[b-jlr1tuj8nu] { opacity: .55; cursor: not-allowed; }

/* Legacy puts Stream|Course|Specialization|Subject|Role on one row and Center alone on the next, so
   the column count is fixed (not auto-fit) — same trick AssignExaminer uses to stop the last filter
   wrapping under the others. Two classes in the selector so it beats the one-class .form.cascade rule
   above. Below ~1100px the fixed track gets too narrow to read, so fall back to flowing columns. */
.form.cascade.filters-row1[b-jlr1tuj8nu], .form.cascade.filters-row2[b-jlr1tuj8nu] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form.cascade.filters-row2[b-jlr1tuj8nu] { margin-top: 12px; }
@media (max-width: 1100px) {
    .form.cascade.filters-row1[b-jlr1tuj8nu], .form.cascade.filters-row2[b-jlr1tuj8nu] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* Legacy marks its required filters with a red asterisk before the label text. */
.req[b-jlr1tuj8nu] { color: #c02b3c; font-weight: 700; }

/* Legacy-style plain bold counter — same as AssignExaminer's / SubjectWiseSchedule's status-card. */
.status-card[b-jlr1tuj8nu] { padding: 10px 18px; }
.status-card .count[b-jlr1tuj8nu] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-jlr1tuj8nu] { font-weight: 700; }

.btn[b-jlr1tuj8nu] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-jlr1tuj8nu] { background: var(--track); }
.btn.primary[b-jlr1tuj8nu] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-jlr1tuj8nu] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-jlr1tuj8nu] { opacity: .55; cursor: default; }

.grid[b-jlr1tuj8nu] { width: 100%; border-collapse: collapse; }
.grid thead th[b-jlr1tuj8nu] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-jlr1tuj8nu] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-jlr1tuj8nu] { border-bottom: none; }
.grid tbody tr:hover td[b-jlr1tuj8nu] { background: var(--surface-2); }
.grid .nm[b-jlr1tuj8nu] { font-weight: 600; }
.ta-c[b-jlr1tuj8nu] { text-align: center; }

.pad[b-jlr1tuj8nu] { padding: 22px 6px; }
.sub[b-jlr1tuj8nu] { color: var(--muted); font-size: 13px; }

.banner[b-jlr1tuj8nu] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-jlr1tuj8nu] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-jlr1tuj8nu] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-jlr1tuj8nu] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-jlr1tuj8nu] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
/* /Pages/EnableRecheckCount.razor.rz.scp.css */
.cand-head[b-yv8x4wmyid] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-yv8x4wmyid] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-yv8x4wmyid] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-yv8x4wmyid] { color: var(--ink); }

.card[b-yv8x4wmyid] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-yv8x4wmyid] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-yv8x4wmyid] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-yv8x4wmyid], .toolbar input:is([type="date"], [data-osm-date])[b-yv8x4wmyid], .toolbar input[type="number"][b-yv8x4wmyid], .toolbar input[type="text"][b-yv8x4wmyid] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-yv8x4wmyid], .toolbar input:focus[b-yv8x4wmyid] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-yv8x4wmyid] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Filter grid — label above its control, same layout as AssignExaminer / AssignSubject / Candidates /
   Attendance / AssignExam's ".form.cascade" (legacy's col-sm-3 cells). min-width:0 lets a column
   shrink below the select's intrinsic width so a long option name cannot push the control out of the
   card. */
.form.cascade[b-yv8x4wmyid] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-yv8x4wmyid] { margin-bottom: 0; }
.form label[b-yv8x4wmyid] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-yv8x4wmyid], .form label input[b-yv8x4wmyid] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-yv8x4wmyid], .form label input:focus[b-yv8x4wmyid] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-yv8x4wmyid], .form label input:disabled[b-yv8x4wmyid] { opacity: .55; cursor: not-allowed; }

/* Legacy-style plain bold counter — same as AssignExaminer's / EnableInprogressPaper's status-card,
   but this one also carries the "N selected" tally and the Enable trigger on the same row: the
   button is shunted to the right edge with margin-left:auto. */
.status-card[b-yv8x4wmyid] { display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.status-card .count[b-yv8x4wmyid] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-yv8x4wmyid] { font-weight: 700; }
.status-card .count.selected[b-yv8x4wmyid] { color: var(--faint); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.status-card .enable[b-yv8x4wmyid] { margin-left: auto; }

.btn[b-yv8x4wmyid] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-yv8x4wmyid] { background: var(--track); }
.btn.primary[b-yv8x4wmyid] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-yv8x4wmyid] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-yv8x4wmyid] { opacity: .55; cursor: default; }

.grid[b-yv8x4wmyid] { width: 100%; border-collapse: collapse; }
.grid thead th[b-yv8x4wmyid] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-yv8x4wmyid] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-yv8x4wmyid] { border-bottom: none; }
.grid tbody tr:hover td[b-yv8x4wmyid] { background: var(--surface-2); }
.grid .nm[b-yv8x4wmyid] { font-weight: 600; }
.ta-c[b-yv8x4wmyid] { text-align: center; }

.pad[b-yv8x4wmyid] { padding: 22px 6px; }
.sub[b-yv8x4wmyid] { color: var(--muted); font-size: 13px; }

.banner[b-yv8x4wmyid] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-yv8x4wmyid] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-yv8x4wmyid] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-yv8x4wmyid] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.modal-backdrop[b-yv8x4wmyid] { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); }
.msg-backdrop[b-yv8x4wmyid] { z-index: 70; }
.msg-modal[b-yv8x4wmyid] { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(460px, 92vw); background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.msg-modal .modal-msg[b-yv8x4wmyid] { margin: 0 0 18px; text-align: center; }
.msg-modal .modal-actions[b-yv8x4wmyid] { display: flex; justify-content: center; }
/* /Pages/EvaluatedBooklets.razor.rz.scp.css */
.cand-head[b-gr5nki7ujb] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-gr5nki7ujb] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-gr5nki7ujb] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-gr5nki7ujb] { color: var(--ink); }

.card[b-gr5nki7ujb] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-gr5nki7ujb] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-gr5nki7ujb] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-gr5nki7ujb], .toolbar input[type="number"][b-gr5nki7ujb], .toolbar input[type="text"][b-gr5nki7ujb] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-gr5nki7ujb], .toolbar input:focus[b-gr5nki7ujb] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-gr5nki7ujb] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-gr5nki7ujb] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-gr5nki7ujb] { background: var(--track); }
.btn.primary[b-gr5nki7ujb] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-gr5nki7ujb] { filter: brightness(1.06); background: var(--accent); }
.btn.danger[b-gr5nki7ujb] { background: #c02b3c; border-color: #c02b3c; color: #fff; }
.btn.danger:hover[b-gr5nki7ujb] { filter: brightness(1.06); background: #c02b3c; }
.btn:disabled[b-gr5nki7ujb] { opacity: .55; cursor: default; }

.grid[b-gr5nki7ujb] { width: 100%; border-collapse: collapse; }
.grid thead th[b-gr5nki7ujb] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-gr5nki7ujb] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-gr5nki7ujb] { border-bottom: none; }
.grid tbody tr:hover td[b-gr5nki7ujb] { background: var(--surface-2); }
.grid .nm[b-gr5nki7ujb] { font-weight: 600; }
.ta-c[b-gr5nki7ujb] { text-align: center; }

.pad[b-gr5nki7ujb] { padding: 22px 6px; }
.sub[b-gr5nki7ujb] { color: var(--muted); font-size: 13px; }

.banner[b-gr5nki7ujb] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-gr5nki7ujb] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-gr5nki7ujb] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-gr5nki7ujb] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.card.confirm[b-gr5nki7ujb] { border-color: rgba(192,43,60,.35); }
.confirm-head b[b-gr5nki7ujb] { display: block; font-size: 14px; color: #c02b3c; margin-bottom: 4px; }
.confirm-head .sub[b-gr5nki7ujb] { margin: 0 0 12px; }
.flags[b-gr5nki7ujb] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.flags label[b-gr5nki7ujb] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); font-weight: 500; }
/* /Pages/Evaluation.razor.rz.scp.css */
.hub-head[b-so3bajqvwd] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-so3bajqvwd] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-so3bajqvwd] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-so3bajqvwd] { padding: 22px; }
.sub[b-so3bajqvwd] { color: var(--faint); font-size: 13px; }

.group .group-head[b-so3bajqvwd] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-so3bajqvwd] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-so3bajqvwd] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-so3bajqvwd] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-so3bajqvwd] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-so3bajqvwd]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-so3bajqvwd] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-so3bajqvwd]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-so3bajqvwd]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-so3bajqvwd] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-so3bajqvwd] { font-size: 14px; font-weight: 620; }
.txt small[b-so3bajqvwd] { color: var(--faint); font-size: 12px; }
.arrow[b-so3bajqvwd] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-so3bajqvwd] { color: var(--accent); }

.link-card.soon[b-so3bajqvwd] { cursor: default; opacity: .55; }
.link-card.soon:hover[b-so3bajqvwd] { background: none; border-color: transparent; }
.link-card.soon .ic[b-so3bajqvwd] { filter: grayscale(35%); }
.pill[b-so3bajqvwd] { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 620px) {
  .hub-head[b-so3bajqvwd] { flex-direction: column; align-items: stretch; }
  .hub-head[b-so3bajqvwd]  .search-box .search { width: 100%; }
}

.coming-soon .group-head[b-so3bajqvwd] { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); }

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-so3bajqvwd] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-so3bajqvwd] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-so3bajqvwd]  .search-box { align-self: flex-start; }
.hub-head[b-so3bajqvwd]  .search-box .search { width: min(420px, 100%); }
/* /Pages/EvaluatorAnalysis.razor.rz.scp.css */
.cand-head[b-dmmba0o0zr] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-dmmba0o0zr] { color:var(--muted); font-size:13px; margin-top:2px; }
.head-actions[b-dmmba0o0zr] { display:flex; align-items:center; gap:10px; }
.back[b-dmmba0o0zr] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-dmmba0o0zr] { transform:rotate(180deg); }
.card[b-dmmba0o0zr] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-dmmba0o0zr] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar label[b-dmmba0o0zr] { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.toolbar .session-select[b-dmmba0o0zr],
.toolbar .course-select[b-dmmba0o0zr] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; min-width:220px; }
.toolbar .marks-var input[b-dmmba0o0zr] { width:70px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.count[b-dmmba0o0zr] { margin-left:auto; color:var(--muted); font-size:13px; }
.grid[b-dmmba0o0zr] { width:100%; border-collapse:collapse; }
.grid th[b-dmmba0o0zr], .grid td[b-dmmba0o0zr] { text-align:center; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-dmmba0o0zr] { color:var(--muted); font-weight:600; }
.grid td.nm[b-dmmba0o0zr] { font-weight:600; text-align:left; }
.grid tr.outlier td:nth-child(7)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(8)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(9)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(10)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(11)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(12)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(13)[b-dmmba0o0zr],
.grid tr.outlier td:nth-child(14)[b-dmmba0o0zr] { background-color:#FFD7D7; }
.pad[b-dmmba0o0zr] { padding:14px; }
.sub[b-dmmba0o0zr] { color:var(--muted); font-size:13px; }
.btn[b-dmmba0o0zr] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; display:inline-flex; align-items:center; gap:6px; }
.btn.primary[b-dmmba0o0zr] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-dmmba0o0zr] { background:transparent; }
.btn:disabled[b-dmmba0o0zr] { opacity:.5; cursor:default; }
.table-scroll[b-dmmba0o0zr] { overflow-x:auto; }
.pager[b-dmmba0o0zr] { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pager .pageinfo[b-dmmba0o0zr] { color:var(--muted); font-size:13px; }
/* /Pages/EvaluatorDetails.razor.rz.scp.css */
.cand-head[b-dazqyvki5e] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-dazqyvki5e] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-dazqyvki5e] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-dazqyvki5e] { transform:rotate(180deg); }
.card[b-dazqyvki5e] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-dazqyvki5e] { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.toolbar label[b-dazqyvki5e] { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.toolbar select[b-dazqyvki5e] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; min-width:170px; }
.count[b-dazqyvki5e] { margin-left:auto; color:var(--muted); font-size:13px; align-self:center; }
.card h3[b-dazqyvki5e] { font-size:15px; font-weight:700; margin-bottom:10px; }
.grid[b-dazqyvki5e] { width:100%; border-collapse:collapse; }
.grid th[b-dazqyvki5e], .grid td[b-dazqyvki5e] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-dazqyvki5e] { color:var(--muted); font-weight:600; }
.grid .nm[b-dazqyvki5e] { font-weight:600; }
.table-scroll[b-dazqyvki5e] { overflow-x:auto; }
.pad[b-dazqyvki5e] { padding:14px; }
.sub[b-dazqyvki5e] { color:var(--muted); font-size:13px; }
.btn[b-dazqyvki5e] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; display:inline-flex; align-items:center; gap:6px; }
.btn.primary[b-dazqyvki5e] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-dazqyvki5e] { background:transparent; }
.btn:disabled[b-dazqyvki5e] { opacity:.5; cursor:default; }
.pager[b-dazqyvki5e] { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pager .pageinfo[b-dazqyvki5e] { color:var(--muted); font-size:13px; }
.pager .fl[b-dazqyvki5e] { color:var(--muted); font-size:12px; }
.pager .page-size[b-dazqyvki5e] { border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:transparent; color:inherit; }

/* Legacy QPReportGridView colour semantics (aspx.cs:1738-1798; literal legacy colours). The classes
   are applied by DynamicGrid, so ::deep pierces the scope. The OrangeRed diff colour must win over
   the band backgrounds' text colour. */
.card[b-dazqyvki5e]  tr.qw-band-a td { background:lightblue; color:#1f2430; }
.card[b-dazqyvki5e]  tr.qw-band-b td { background:lightskyblue; color:#1f2430; }
.card[b-dazqyvki5e]  td.qw-diff { color:orangered; font-weight:600; } /* evaluators differ on this cell */
/* /Pages/ExaminerAnalytics.razor.rz.scp.css */
.cand-head[b-la43wt6j8h] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-la43wt6j8h] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-la43wt6j8h] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-la43wt6j8h] { transform:rotate(180deg); }
.card[b-la43wt6j8h] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-la43wt6j8h] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.count[b-la43wt6j8h] { margin-left:auto; color:var(--muted); font-size:13px; }
.grid[b-la43wt6j8h] { width:100%; border-collapse:collapse; }
.grid th[b-la43wt6j8h], .grid td[b-la43wt6j8h] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-la43wt6j8h] { color:var(--muted); font-weight:600; }
.grid .nm[b-la43wt6j8h] { font-weight:600; }
.pad[b-la43wt6j8h] { padding:14px; }
.sub[b-la43wt6j8h] { color:var(--muted); font-size:13px; }
.btn[b-la43wt6j8h] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-la43wt6j8h] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:disabled[b-la43wt6j8h] { opacity:.5; cursor:default; }

.table-scroll[b-la43wt6j8h] { overflow-x:auto; }
.course-select[b-la43wt6j8h], .role[b-la43wt6j8h], .semester[b-la43wt6j8h], .status[b-la43wt6j8h], .campus[b-la43wt6j8h] {
    border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent;
    color:inherit; width:100%; min-width:0; }

/* The legacy filter bar: seven controls plus the actions, on a grid so they line up in rows of four
   instead of wrapping wherever they happen to fall. */
.filters[b-la43wt6j8h] { padding:14px 16px; }
/* QA: the Action menu sits above the filter bar, the shared .action-and-filters row. */
.action-and-filters[b-la43wt6j8h] { margin-bottom:12px; }
.count .sel[b-la43wt6j8h] { color:var(--accent); font-weight:600; margin-left:6px; }

/* Selection column: narrow, centred, and visibly inert on a completed row. */
.sel-col[b-la43wt6j8h] { width:34px; text-align:center; }
.sel-col input[type=checkbox][b-la43wt6j8h] { cursor:pointer; accent-color:var(--accent); }
.sel-col input[type=checkbox]:disabled[b-la43wt6j8h] { cursor:default; opacity:.35; }
.filter-grid[b-la43wt6j8h] { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px 14px; align-items:end; }
.filter-grid > label[b-la43wt6j8h] { display:flex; flex-direction:column; gap:6px; min-width:0;
                       font-size:12px; font-weight:600; color:var(--muted); }
.filter-grid .lbl[b-la43wt6j8h] { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter-grid input:is([type="date"], [data-osm-date])[b-la43wt6j8h] { border:1px solid var(--border); border-radius:8px; padding:8px 10px;
                                background:transparent; color:inherit; width:100%; min-width:0; }
.filter-grid select:disabled[b-la43wt6j8h] { opacity:.55; cursor:default; }
.filter-actions[b-la43wt6j8h] { display:flex; gap:10px; min-width:0; }
.filter-actions .btn[b-la43wt6j8h] { flex:1 1 0; justify-content:center; }
.filters .count[b-la43wt6j8h] { display:block; margin-top:12px; margin-left:0; }

@media (max-width: 1100px) {
    .filter-grid[b-la43wt6j8h] { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.pager[b-la43wt6j8h] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
/* /Pages/ExaminerEmail.razor.rz.scp.css */
.cand-head[b-szz5iv5w0x] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-szz5iv5w0x] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-szz5iv5w0x] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-szz5iv5w0x] { display: flex; align-items: center; gap: 10px; }
.toolbar .count[b-szz5iv5w0x] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-szz5iv5w0x] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-szz5iv5w0x] { background: var(--track); }
.btn.ghost[b-szz5iv5w0x] { background: transparent; }
.btn.sm[b-szz5iv5w0x] { padding: 5px 10px; font-size: 12px; }
.btn.primary[b-szz5iv5w0x] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-szz5iv5w0x] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-szz5iv5w0x] { opacity: .55; cursor: default; }

.grid[b-szz5iv5w0x] { width: 100%; border-collapse: collapse; }
.grid thead th[b-szz5iv5w0x] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-szz5iv5w0x] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-szz5iv5w0x] { border-bottom: none; }
.grid tbody tr:hover td[b-szz5iv5w0x] { background: var(--surface-2); }
.grid .nm[b-szz5iv5w0x] { font-weight: 600; }
.ta-r[b-szz5iv5w0x] { text-align: right; }

.pad[b-szz5iv5w0x] { padding: 22px 6px; }
.sub[b-szz5iv5w0x] { color: var(--muted); font-size: 13px; }

.banner[b-szz5iv5w0x] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-szz5iv5w0x] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-szz5iv5w0x] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-szz5iv5w0x] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-szz5iv5w0x] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.form-grid[b-szz5iv5w0x] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label[b-szz5iv5w0x] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.form-grid input[b-szz5iv5w0x] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 13.5px; font-family: inherit; }
.form-grid input:focus[b-szz5iv5w0x] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form-grid input:read-only[b-szz5iv5w0x] { opacity: .65; }

@media (max-width: 560px) { .form-grid[b-szz5iv5w0x] { grid-template-columns: 1fr; } }

.cand-head[b-szz5iv5w0x] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.head-actions[b-szz5iv5w0x] { display: flex; align-items: center; gap: 8px; }

/* Help ("Edit Examiner Email Page Description") body, inside the shared AppModal. */
.help-body h3[b-szz5iv5w0x] { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.help-body p[b-szz5iv5w0x] { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.help-body ul[b-szz5iv5w0x] { margin: 0; padding-left: 20px; }
.help-body li[b-szz5iv5w0x] { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Row picker + Sr.No. (QA round-10 B). Both columns are as narrow as their content allows so the
   name/email columns keep the width they had before the grid grew two columns. */
.col-pick[b-szz5iv5w0x] { width: 34px; }
.col-pick input[b-szz5iv5w0x] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.col-sr[b-szz5iv5w0x] { width: 62px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The ticked row stays visible after the pointer moves to the toolbar button. */
.grid tbody tr.picked td[b-szz5iv5w0x] { background: var(--surface-2); }

/* Header label for the picker column: present for screen readers, absent visually. */
.vh[b-szz5iv5w0x] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* /Pages/ExaminerPool.razor.rz.scp.css */
/* Create Examiner Pool — page-specific styles. Shared look & feel (card, grid, toolbar,
   banner, pager, status-card, btn) comes from wwwroot/css/app.css. */

.filters[b-1788a9pvg4] { margin-bottom: 0; }
.filters select[b-1788a9pvg4] { min-width: 170px; }

.status-card[b-1788a9pvg4] { align-items: center; }
.status-card .count[b-1788a9pvg4] { margin-left: 0; }
.status-card .exam-name[b-1788a9pvg4] { margin-left: auto; }

.manual-note[b-1788a9pvg4] { color: #c02b3c; font-weight: 600; }

/* Create/Update Examiner Pool bodies, inside the shared AppModal. */
.msub[b-1788a9pvg4] { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.modal-err[b-1788a9pvg4] { margin-bottom: 14px; }

/* Create-modal staging row. */
.add-row[b-1788a9pvg4] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.add-row .field[b-1788a9pvg4] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.add-row .field select[b-1788a9pvg4], .add-row .field input[b-1788a9pvg4] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.add-row .field select:focus[b-1788a9pvg4], .add-row .field input:focus[b-1788a9pvg4] { outline: 2px solid var(--accent); outline-offset: -1px; }

.stage-grid[b-1788a9pvg4] { margin-top: 4px; }

/* Examiner autocomplete (same block as AssignExaminer). */
.ac-wrap[b-1788a9pvg4] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-1788a9pvg4] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-1788a9pvg4] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-1788a9pvg4] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-1788a9pvg4] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-1788a9pvg4] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-1788a9pvg4] { background: var(--surface-2); }
.ac-hint[b-1788a9pvg4] { font-size: 12px; color: #c02b3c; }

/* Update-modal in-row editor. */
.update-modal .examiner-no[b-1788a9pvg4] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 8px; padding: 6px 8px; font-size: 13px; }
/* /Pages/ExaminerScheduleStatus.razor.rz.scp.css */
.cand-head[b-2u9bso30e9] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-2u9bso30e9] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-2u9bso30e9] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-2u9bso30e9] { color: var(--ink); }
.cand-head .head-actions[b-2u9bso30e9] { display: inline-flex; align-items: center; gap: 10px; }

.btn.ghost[b-2u9bso30e9] { background: transparent; border-color: transparent; }
.btn.ghost:hover[b-2u9bso30e9] { background: var(--surface-2); }

.card[b-2u9bso30e9] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-2u9bso30e9] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-2u9bso30e9] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-2u9bso30e9], .toolbar input[b-2u9bso30e9] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-2u9bso30e9], .toolbar input:focus[b-2u9bso30e9] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .subject[b-2u9bso30e9] { max-width: 260px; }
.toolbar .count[b-2u9bso30e9] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-2u9bso30e9] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-2u9bso30e9] { background: var(--track); }
.btn.primary[b-2u9bso30e9] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-2u9bso30e9] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-2u9bso30e9] { opacity: .55; cursor: default; }

.table-scroll[b-2u9bso30e9] { overflow-x: auto; }
.grid[b-2u9bso30e9] { width: 100%; border-collapse: collapse; }
.grid thead th[b-2u9bso30e9] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-2u9bso30e9] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child td[b-2u9bso30e9] { border-bottom: none; }
.grid tbody tr:hover td[b-2u9bso30e9] { background: var(--surface-2); }
.grid .nm[b-2u9bso30e9] { font-weight: 600; }
.ta-r[b-2u9bso30e9] { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th.ta-r[b-2u9bso30e9] { text-align: right; }

.status[b-2u9bso30e9] { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
          font-size: 11.5px; font-weight: 700; }
.status.created[b-2u9bso30e9] { background: var(--tile-green-bg); color: var(--good); }
.status.updated[b-2u9bso30e9] { background: rgba(59,113,202,.12); color: var(--accent); }

.pad[b-2u9bso30e9] { padding: 22px 6px; }
.sub[b-2u9bso30e9] { color: var(--muted); font-size: 13px; }

.pager[b-2u9bso30e9] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
/* /Pages/ExamMaster.razor.rz.scp.css */
.cand-head[b-u3n4b4wmmo] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-u3n4b4wmmo] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-u3n4b4wmmo] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-u3n4b4wmmo] { color: var(--accent); }
.back :global(svg)[b-u3n4b4wmmo] { transform: rotate(180deg); }

.card[b-u3n4b4wmmo] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

.count[b-u3n4b4wmmo] { margin: 3px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Filter panel: a self-fitting grid of the six legacy filters. A grid keeps
   every label locked to its own control — a wrapping flex row split them across lines. */
.filters[b-u3n4b4wmmo] { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
           padding: 14px 16px; margin-bottom: 16px; }

.filter-grid[b-u3n4b4wmmo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; }
.fld[b-u3n4b4wmmo] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld.wide[b-u3n4b4wmmo] { grid-column: span 2; }
.fld > span[b-u3n4b4wmmo] { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
              color: var(--faint); }
.fld select[b-u3n4b4wmmo], .fld input[b-u3n4b4wmmo] { width: 100%; min-width: 0; height: 36px; border: 1px solid var(--border);
                          background: var(--surface); color: var(--ink); border-radius: 9px;
                          padding: 0 10px; font-size: 13.5px; font-family: inherit; }
.fld select:focus[b-u3n4b4wmmo], .fld input:focus[b-u3n4b4wmmo] { outline: 2px solid var(--accent); outline-offset: -1px; }
.fld select[b-u3n4b4wmmo] { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
              background-image: var(--sel-chevron); background-repeat: no-repeat;
              background-position: right 11px center; background-size: 15px; }
.fld select:disabled[b-u3n4b4wmmo] { opacity: .55; cursor: not-allowed; }

.filter-foot[b-u3n4b4wmmo] { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px;
               border-top: 1px solid var(--border); }
.chip[b-u3n4b4wmmo] { font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--surface);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }

.empty[b-u3n4b4wmmo] { text-align: center; padding: 40px 20px; }
.empty-title[b-u3n4b4wmmo] { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.empty .sub[b-u3n4b4wmmo] { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.empty .btn[b-u3n4b4wmmo] { display: inline-flex; }

@media (max-width: 720px) {
    .fld.wide[b-u3n4b4wmmo] { grid-column: span 1; }
}

.grid[b-u3n4b4wmmo] { width: 100%; border-collapse: collapse; }
.grid thead th[b-u3n4b4wmmo] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-u3n4b4wmmo] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-u3n4b4wmmo] { border-bottom: none; }
.grid tbody tr:hover td[b-u3n4b4wmmo] { background: var(--surface-2); }
.ta-c[b-u3n4b4wmmo] { text-align: center; }

.badge[b-u3n4b4wmmo] { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge.good[b-u3n4b4wmmo] { background: var(--tile-green-bg); color: var(--good); }
.badge.warn[b-u3n4b4wmmo] { background: rgba(217,119,6,.12); color: #d97706; }
/* Read-only "No" — Examiner Assigned. Not `warn`: an exam with no examiner yet is the normal
   state early in a cycle, not a problem, and colouring it amber would cry wolf on a fresh grid. */
.badge.neutral[b-u3n4b4wmmo] { background: var(--track); color: var(--muted); }

/* "Is QP Created" cell, when it's a clickable button rather than a static badge. */
button.badge.warn[b-u3n4b4wmmo] { border: none; cursor: pointer; font-family: inherit; }
button.badge.warn:hover[b-u3n4b4wmmo] { filter: brightness(1.08); }

.link-btn[b-u3n4b4wmmo] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; text-decoration: none; }
.link-btn.del[b-u3n4b4wmmo] { color: #c02b3c; }
.link-btn:hover[b-u3n4b4wmmo] { filter: brightness(1.12); }
.link-btn:disabled[b-u3n4b4wmmo] { opacity: .5; cursor: default; }

.btn[b-u3n4b4wmmo] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover[b-u3n4b4wmmo] { background: var(--track); }
.btn.primary[b-u3n4b4wmmo] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-u3n4b4wmmo] { filter: brightness(1.05); }

.pad[b-u3n4b4wmmo] { padding: 18px 4px; }
.sub[b-u3n4b4wmmo] { color: var(--muted); }

.pager[b-u3n4b4wmmo] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
         margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
         font-size: 13px; color: var(--muted); }
.pager .range[b-u3n4b4wmmo] { font-variant-numeric: tabular-nums; }
.pager-btns[b-u3n4b4wmmo] { display: flex; align-items: center; gap: 10px; }
.pager-btns .btn[b-u3n4b4wmmo] { gap: 5px; padding: 7px 12px; }
.pager-btns .btn:disabled[b-u3n4b4wmmo] { opacity: .45; cursor: not-allowed; }
.pager .page-of[b-u3n4b4wmmo] { font-variant-numeric: tabular-nums; }
.btn.ghost[b-u3n4b4wmmo] { background: transparent; }

/* Two destructive treatments, because this page has two destructive buttons in two different
   bars and they are not the same weight.

   Solid: the bulk bar, where Delete acts on every ticked exam and should carry weight. */
.btn.danger[b-u3n4b4wmmo] { background: #c02b3c; border-color: #c02b3c; color: #fff; }
.btn.danger:hover[b-u3n4b4wmmo] { filter: brightness(1.05); }

/* Ghost: the single-exam bar, where Delete QP sits among five other `btn ghost` buttons and only
   its colour sets it apart. It needs its own selector rather than relying on `ghost` — the two
   were tied on specificity (0,2,0) and `.btn.danger` won on source order, painting the button a
   solid red block. `.action-bar .actions .btn.danger` (0,4,0) then set the LABEL to var(--danger),
   which resolves to #c02b3c in the light theme: the identical value as that background. Red text
   on red fill, contrast 1:1, and the trash icon inherits currentColor so it vanished too. */
.btn.ghost.danger[b-u3n4b4wmmo] { background: transparent; color: var(--danger);
                    border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.btn.ghost.danger:hover[b-u3n4b4wmmo] { background: color-mix(in srgb, var(--danger) 10%, transparent);
                          border-color: color-mix(in srgb, var(--danger) 55%, transparent);
                          filter: none; }

/* -- Task B7: multi-select bulk toolbar (legacy AddExam.aspx select-all + SelectChkBox rows) -- */
.bulk-toolbar[b-u3n4b4wmmo] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
                background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
                font-size: 13px; color: var(--muted); }
.bulk-toolbar .btn[b-u3n4b4wmmo] { padding: 6px 14px; }

/* -- Edit Schedule modal (legacy AddExam.aspx EditScheduleDiv), inside the shared AppModal -- */
.form[b-u3n4b4wmmo] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form.toggles[b-u3n4b4wmmo] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; }
.form label[b-u3n4b4wmmo] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label.chk[b-u3n4b4wmmo] { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.form input[b-u3n4b4wmmo], .form select[b-u3n4b4wmmo] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form input[type="checkbox"][b-u3n4b4wmmo] { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); cursor: pointer; }
.form input:focus[b-u3n4b4wmmo], .form select:focus[b-u3n4b4wmmo] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form input:disabled[b-u3n4b4wmmo], .form select:disabled[b-u3n4b4wmmo] { opacity: .55; cursor: not-allowed; }

@media (max-width: 620px) { .form[b-u3n4b4wmmo] { grid-template-columns: 1fr; } }

/* -- Import QP modal (legacy AddExam.aspx QPUploadView) -- */
.qp-info[b-u3n4b4wmmo] { display: flex; flex-wrap: wrap; gap: 8px 24px; background: var(--surface-2);
           border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px;
           margin-bottom: 14px; font-size: 13px; color: var(--ink); }
.qp-form[b-u3n4b4wmmo] { margin-bottom: 10px; }
.qp-uploads[b-u3n4b4wmmo] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              gap: 12px 16px; margin-top: 10px; }
.qp-uploads .fld[b-u3n4b4wmmo] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600;
                    color: var(--muted); }
/* QA B10: the same two uploads, now the first thing in the Edit Exam Schedule modal. Ruled off so
   they read as their own section rather than as two stray fields above the schedule grid. */
.qp-uploads.lead[b-u3n4b4wmmo] { margin-top: 0; margin-bottom: 14px; padding-bottom: 14px;
                   border-bottom: 1px solid var(--border); }

.req[b-u3n4b4wmmo] { color: #c02b3c; margin-right: 3px; }
.file-meta[b-u3n4b4wmmo] { font-size: 12px; color: var(--muted); }

@media (max-width: 620px) { .qp-uploads[b-u3n4b4wmmo] { grid-template-columns: 1fr; } }

/* -- Subject cell arrow (QA: opens the same View Paper Details modal as the row action) -- */
td .subject-arrow[b-u3n4b4wmmo] { display: inline-flex; vertical-align: middle; margin-left: 4px; padding: 3px; }

/* -- View Paper Details modal (legacy AddExam.aspx ViewExamLbtn_Click1) -- */
.detail-grid[b-u3n4b4wmmo] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-grid > div[b-u3n4b4wmmo] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-grid label[b-u3n4b4wmmo] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.detail-grid span[b-u3n4b4wmmo] { font-size: 13.5px; color: var(--ink); word-break: break-word; }

@media (max-width: 900px) { .detail-grid[b-u3n4b4wmmo] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .detail-grid[b-u3n4b4wmmo] { grid-template-columns: 1fr; } }

/* -- QP Details modal (legacy AddExam.aspx ActualQuesGrid) -- */
.qp-details-grid input[type="text"][b-u3n4b4wmmo] { width: 70px; }
.qp-details-grid input[type="number"][b-u3n4b4wmmo] { width: 90px; }
.qp-details-grid input[b-u3n4b4wmmo] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                          border-radius: 7px; padding: 6px 8px; font-size: 13px; font-family: inherit; }
.qp-details-grid input:focus[b-u3n4b4wmmo] { outline: 2px solid var(--accent); outline-offset: -1px; }
.qp-details-grid td.q[b-u3n4b4wmmo] { max-width: 360px; }

/* -- Edit Question (per-row) modal ---------------------------------------------------------- */
/* .form label stacks its children, so the caption and its asterisk have to travel as ONE child
   or the '*' lands on its own line under the label. */
.form label > .cap[b-u3n4b4wmmo] { display: block; }
.form label > .cap .req[b-u3n4b4wmmo] { margin-left: 2px; margin-right: 0; }
/* The Question textarea spans both of .form's columns rather than sharing a row with a second field. */
.form label.full[b-u3n4b4wmmo] { grid-column: 1 / -1; }
.form textarea[b-u3n4b4wmmo] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                 border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; resize: vertical; }
.form textarea:focus[b-u3n4b4wmmo] { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Image preview + re-upload picker: still a read-only-styled block (the picture itself isn't a form
   field), with the picker and its validation message living inside it. */
.qp-readonly[b-u3n4b4wmmo] { margin-top: 14px; }
.qp-readonly .cap[b-u3n4b4wmmo] { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
                    text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.qp-readonly p[b-u3n4b4wmmo] { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
                 background: var(--surface-2); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.qp-readonly label.cap[b-u3n4b4wmmo] { margin-top: 10px; font-weight: 600; text-transform: none; letter-spacing: normal;
                          color: var(--muted); cursor: pointer; }
.qp-row-edit-image[b-u3n4b4wmmo] { display: block; max-width: 220px; max-height: 160px; border-radius: 8px;
                      border: 1px solid var(--border); object-fit: contain; }
.qp-readonly .err[b-u3n4b4wmmo] { margin: 6px 0 0; color: #c02b3c; font-size: 12.5px; }

/* QP Details "Actual Question" grid's image column -- same thumbnail treatment as Verify QP
   (ExamMasterVerify.razor.css .q-image), so the port shows the picture rather than its file name. */
.q-image img[b-u3n4b4wmmo] { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
               border: 1px solid var(--border); margin: 0 auto; }

.qp-note[b-u3n4b4wmmo] { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }


/* Verify-QP modal header (legacy VerifyExamNameLbl & friends): bold label, normal value, full-strength
   ink — not the muted .sub treatment, which washed the bold out. */
.verify-head[b-u3n4b4wmmo] { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px;
    font-size: 13.5px; color: var(--ink); }
.verify-head b[b-u3n4b4wmmo] { font-weight: 700; }


/* QA B2: count sits above the grid, left-aligned with it. */
.grid-toolbar[b-u3n4b4wmmo] { display: flex; align-items: center; gap: 14px; padding: 10px 2px 8px; }
.grid-toolbar .count[b-u3n4b4wmmo] { font-size: 13px; color: var(--muted); }

/* QA B11: the three legacy Verify-QP levels, each under its own heading. */
.qp-section[b-u3n4b4wmmo] { margin: 16px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qp-section:first-of-type[b-u3n4b4wmmo] { margin-top: 4px; }

/* QA B4/B5/B6: the seven legacy actions as one horizontal bar above the grid, so no row needs a
   sideways scroll to be acted on. Wraps rather than scrolling on a narrow window. */
.action-bar[b-u3n4b4wmmo] { display: flex; align-items: center; justify-content: space-between; gap: 14px;
              flex-wrap: wrap; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.action-bar .hint[b-u3n4b4wmmo] { font-size: 13px; color: var(--muted); font-weight: 600; }
.action-bar .actions[b-u3n4b4wmmo] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-bar .actions .btn[b-u3n4b4wmmo] { display: inline-flex; align-items: center; gap: 6px; }
.action-bar .actions .btn[disabled][b-u3n4b4wmmo] { opacity: .45; cursor: not-allowed; }
/* No .btn.danger colour override here. It used to force `color: var(--danger)` on BOTH danger
   buttons in this bar regardless of what they were sitting on, which is what made the fill and
   the label the same colour. The two variants above own their own colours now. */
/* /Pages/ExamMasterCreate.razor.rz.scp.css */
.cand-head[b-zi5z51uc0y] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-zi5z51uc0y] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-zi5z51uc0y] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-zi5z51uc0y] { color: var(--accent); }
.back :global(svg)[b-zi5z51uc0y] { transform: rotate(180deg); }

.card[b-zi5z51uc0y] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-zi5z51uc0y] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-zi5z51uc0y] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-zi5z51uc0y] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-zi5z51uc0y], .form label select[b-zi5z51uc0y], .form label textarea[b-zi5z51uc0y] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-zi5z51uc0y] { color: #dc2626; margin-left: 3px; }
.form input[b-zi5z51uc0y], .form select[b-zi5z51uc0y], .form textarea[b-zi5z51uc0y] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form input:focus[b-zi5z51uc0y], .form select:focus[b-zi5z51uc0y], .form textarea:focus[b-zi5z51uc0y] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form textarea[b-zi5z51uc0y] { min-height: 64px; resize: vertical; }
.form label.chk[b-zi5z51uc0y] { display: flex; flex-direction: row; align-items: center; gap: 8px; max-width: none; }
.form label.chk input[b-zi5z51uc0y] { display: inline; width: auto; margin-top: 0; }
.form label.chk input[type="checkbox"][b-zi5z51uc0y] { width: auto; }

.hint[b-zi5z51uc0y] { color: var(--faint); font-size: 12px; font-weight: 500; margin: -6px 0 12px; }

.actions[b-zi5z51uc0y] { display: flex; gap: 10px; }
.btn[b-zi5z51uc0y] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover[b-zi5z51uc0y] { background: var(--track); }
.btn.primary[b-zi5z51uc0y] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-zi5z51uc0y] { filter: brightness(1.05); }
.btn.ghost[b-zi5z51uc0y] { background: transparent; }
.btn:disabled[b-zi5z51uc0y] { opacity: .6; cursor: default; }
/* /Pages/ExamMasterEdit.razor.rz.scp.css */
.cand-head[b-5uc0ys2a25] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-5uc0ys2a25] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-5uc0ys2a25] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-5uc0ys2a25] { color: var(--accent); }
.back :global(svg)[b-5uc0ys2a25] { transform: rotate(180deg); }

.card[b-5uc0ys2a25] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-5uc0ys2a25] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-5uc0ys2a25] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-5uc0ys2a25] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-5uc0ys2a25], .form label select[b-5uc0ys2a25], .form label textarea[b-5uc0ys2a25] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-5uc0ys2a25] { color: #dc2626; margin-left: 3px; }
.form input[b-5uc0ys2a25], .form select[b-5uc0ys2a25], .form textarea[b-5uc0ys2a25] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form input:focus[b-5uc0ys2a25], .form select:focus[b-5uc0ys2a25], .form textarea:focus[b-5uc0ys2a25] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form textarea[b-5uc0ys2a25] { min-height: 64px; resize: vertical; }
.form label.chk[b-5uc0ys2a25] { display: flex; flex-direction: row; align-items: center; gap: 8px; max-width: none; }
.form label.chk input[b-5uc0ys2a25] { display: inline; width: auto; margin-top: 0; }
.form label.chk input[type="checkbox"][b-5uc0ys2a25] { width: auto; }

.hint[b-5uc0ys2a25] { color: var(--faint); font-size: 12px; font-weight: 500; margin: -6px 0 12px; }

.actions[b-5uc0ys2a25] { display: flex; gap: 10px; }
.btn[b-5uc0ys2a25] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover[b-5uc0ys2a25] { background: var(--track); }
.btn.primary[b-5uc0ys2a25] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-5uc0ys2a25] { filter: brightness(1.05); }
.btn.ghost[b-5uc0ys2a25] { background: transparent; }
.btn:disabled[b-5uc0ys2a25] { opacity: .6; cursor: default; }

.pad[b-5uc0ys2a25] { padding: 18px 4px; }
.sub[b-5uc0ys2a25] { color: var(--muted); }
.banner[b-5uc0ys2a25] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.err[b-5uc0ys2a25] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
/* /Pages/ExamMasterVerify.razor.rz.scp.css */
.cand-head[b-dfdajhzp19] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-dfdajhzp19] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-dfdajhzp19] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-dfdajhzp19] { color: var(--accent); }
.back :global(svg)[b-dfdajhzp19] { transform: rotate(180deg); }

.card[b-dfdajhzp19] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

.panel-head[b-dfdajhzp19] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
              padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.panel-head h2[b-dfdajhzp19] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.step-sub[b-dfdajhzp19] { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.filter[b-dfdajhzp19] { font-size: 12.5px; font-weight: 600; color: var(--muted); display: grid; gap: 6px; }
.filter select[b-dfdajhzp19] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                 border-radius: 9px; padding: 8px 10px; font-size: 13.5px; min-width: 180px; }
.filter select:focus[b-dfdajhzp19] { outline: 2px solid var(--accent); outline-offset: -1px; }

/* The question text can be long, so the table scrolls inside the card rather than the page. */
.table-wrap[b-dfdajhzp19] { overflow-x: auto; }
.grid[b-dfdajhzp19] { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th[b-dfdajhzp19] { text-align: left; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em;
           text-transform: uppercase; padding: 0 10px 10px; white-space: nowrap; }
.grid td[b-dfdajhzp19] { padding: 9px 10px; border-top: 1px solid var(--border); color: var(--ink); vertical-align: top; }
.grid .num[b-dfdajhzp19] { text-align: right; }
.grid .q[b-dfdajhzp19] { min-width: 280px; max-width: 620px; overflow-wrap: anywhere; }
.tag[b-dfdajhzp19] { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
       background: var(--surface-2); color: var(--muted); white-space: nowrap; }
/* Main questions anchor the structure, so they are weighted; sub-questions sit visually beneath them.
   Each level also carries its own colour so the paper's shape is readable at a glance — the flat grid
   made a long paper hard to scan. Tints are alpha over the surface, so both themes stay legible. */
.grid thead th[b-dfdajhzp19] { background: var(--surface-2); border-bottom: 1px solid var(--border);
                 padding-top: 9px; padding-bottom: 9px; }
.grid tbody tr:hover td[b-dfdajhzp19] { background: var(--surface-2); }

.row-main td[b-dfdajhzp19] { font-weight: 650; background: rgba(47, 108, 201, .07); }
.row-main td:first-child[b-dfdajhzp19] { box-shadow: inset 3px 0 0 var(--accent); }
.row-main .tag[b-dfdajhzp19] { background: rgba(47, 108, 201, .15); color: var(--accent); }

.row-sub td:first-child[b-dfdajhzp19] { padding-left: 20px; box-shadow: inset 3px 0 0 rgba(47, 108, 201, .35); }
.row-sub td[b-dfdajhzp19] { background: rgba(47, 108, 201, .03); }
.row-sub .tag[b-dfdajhzp19] { background: rgba(47, 108, 201, .10); color: var(--accent); }

/* "Actual question" rows are the ones that carry marks into evaluation — flagged green. */
.row-actual td:first-child[b-dfdajhzp19] { padding-left: 32px; box-shadow: inset 3px 0 0 rgba(31, 143, 90, .45); }
.row-actual .tag[b-dfdajhzp19] { background: var(--tile-green-bg); color: var(--good); }

.grid .num[b-dfdajhzp19] { font-variant-numeric: tabular-nums; font-weight: 600; }

.actions[b-dfdajhzp19] { display: flex; gap: 10px; margin-top: 18px; }
.btn[b-dfdajhzp19] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; text-decoration: none;
       display: inline-flex; align-items: center; }
.btn:hover[b-dfdajhzp19] { background: var(--track); }
.btn.primary[b-dfdajhzp19] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled[b-dfdajhzp19] { opacity: .6; cursor: default; }

.pad[b-dfdajhzp19] { padding: 10px 4px; }
.sub[b-dfdajhzp19] { color: var(--muted); }
.banner[b-dfdajhzp19] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.err[b-dfdajhzp19] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

.popup-title[b-dfdajhzp19] { margin: 0 0 6px; font-size: 16px; }
.popup-title.success[b-dfdajhzp19] { color: var(--good); }
.popup-title.error[b-dfdajhzp19] { color: #c02b3c; }
.popup-sub[b-dfdajhzp19] { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 720px) { .panel-head[b-dfdajhzp19] { flex-direction: column; align-items: stretch; } }

/* Question Type picker + host actions on one row (matches main's single control row). */
.head-row[b-dfdajhzp19] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.head-row .filter[b-dfdajhzp19] { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* Question image thumbnail (legacy ActualQuestionGridView's imgPicture) — click opens the full
   presigned URL in a new tab rather than the legacy in-page lightbox. */
.q-image img[b-dfdajhzp19] { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
               border: 1px solid var(--border); }
/* /Pages/FacultySubjectMapping.razor.rz.scp.css */
.cand-head[b-vrnhc0h5zt] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-vrnhc0h5zt] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-vrnhc0h5zt] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-vrnhc0h5zt] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-vrnhc0h5zt] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-vrnhc0h5zt], .toolbar input[b-vrnhc0h5zt] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-vrnhc0h5zt], .toolbar input:focus[b-vrnhc0h5zt] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .expire-date[b-vrnhc0h5zt] { width: 110px; }
.toolbar .count[b-vrnhc0h5zt] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.counts[b-vrnhc0h5zt] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pill[b-vrnhc0h5zt] { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--muted); }
.pill b[b-vrnhc0h5zt] { color: var(--ink); font-variant-numeric: tabular-nums; }

.btn[b-vrnhc0h5zt] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-vrnhc0h5zt] { background: var(--track); }
.btn.primary[b-vrnhc0h5zt] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-vrnhc0h5zt] { filter: brightness(1.06); background: var(--accent); }
.btn.danger[b-vrnhc0h5zt] { background: rgba(192,43,60,.08); border-color: rgba(192,43,60,.25); color: #c02b3c; }
.btn.danger:hover[b-vrnhc0h5zt] { background: rgba(192,43,60,.14); }
.btn:disabled[b-vrnhc0h5zt] { opacity: .55; cursor: default; }

.table-scroll[b-vrnhc0h5zt] { overflow-x: auto; }
.grid[b-vrnhc0h5zt] { width: 100%; border-collapse: collapse; }
.grid thead th[b-vrnhc0h5zt] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-vrnhc0h5zt] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-vrnhc0h5zt] { border-bottom: none; }
.grid tbody tr:hover td[b-vrnhc0h5zt] { background: var(--surface-2); }
.grid .nm[b-vrnhc0h5zt] { font-weight: 600; }
.ta-c[b-vrnhc0h5zt] { text-align: center; }

.badge[b-vrnhc0h5zt] { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; }
.badge.yes[b-vrnhc0h5zt] { background: var(--tile-green-bg); color: var(--good); }
.badge.no[b-vrnhc0h5zt] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.actions[b-vrnhc0h5zt] { white-space: nowrap; }
.actions .btn[b-vrnhc0h5zt] { margin: 0 3px; }
.confirm-txt[b-vrnhc0h5zt] { color: #c02b3c; font-size: 12.5px; font-weight: 600; margin-right: 6px; }

.pad[b-vrnhc0h5zt] { padding: 22px 6px; }
.sub[b-vrnhc0h5zt] { color: var(--muted); font-size: 13px; }

.pager[b-vrnhc0h5zt] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.grid .sr[b-vrnhc0h5zt] { color: var(--muted); font-variant-numeric: tabular-nums; }
.grid thead th input[type=checkbox][b-vrnhc0h5zt],
.grid tbody td input[type=checkbox][b-vrnhc0h5zt] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.grid tbody td input[type=checkbox]:disabled[b-vrnhc0h5zt] { cursor: default; opacity: .45; }

.import-panel .panel-head[b-vrnhc0h5zt] { font-size: 13px; font-weight: 700; color: var(--ink); padding: 14px 2px 10px; }
.import-panel .err-head[b-vrnhc0h5zt] { color: #c02b3c; padding-top: 16px; }
.upload-pick[b-vrnhc0h5zt] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 4px; }
.file-btn[b-vrnhc0h5zt] { position: relative; overflow: hidden; }
/* ::deep is required: the <input> lives inside the InputFile child component, so the scoped
   attribute is never stamped on it. Without this the native control overflows its label and
   overlaps the neighbouring button. */
.upload-pick[b-vrnhc0h5zt]  .file-input { position: absolute; inset: 0; width: 100%; height: 100%;
                                  opacity: 0; cursor: pointer; }
.file-meta[b-vrnhc0h5zt] { color: var(--muted); font-size: 12.5px; }
.hint[b-vrnhc0h5zt] { color: #c02b3c; font-size: 12.5px; padding: 8px 2px 2px; }
.pick-hint[b-vrnhc0h5zt] { padding: 8px 2px 2px; }
.errors[b-vrnhc0h5zt] { margin: 0; padding: 0 2px 0 20px; color: #c02b3c; font-size: 12.5px; }
.errors li[b-vrnhc0h5zt] { padding: 2px 0; }

/* Import errors are reported on the page (legacy MessageLbl), not inside the popup. */
.import-errors[b-vrnhc0h5zt] { white-space: normal; }
.import-errors .err-head[b-vrnhc0h5zt] { font-weight: 700; padding-bottom: 6px; }
.import-errors .errors[b-vrnhc0h5zt] { max-height: 220px; overflow-y: auto; }

/* "Action" dropdown holding Import and Export = shared <ActionMenu> (legacy dropdown-items). */

/* Legacy EditDiv: the "Add to Pool" link, revealed only once a row is ticked. */
.edit-bar[b-vrnhc0h5zt] { padding: 2px 2px 12px; }
.link-btn[b-vrnhc0h5zt] { background: none; border: none; cursor: pointer; font-family: inherit;
            font-size: 13.5px; font-weight: 700; color: var(--accent); padding: 4px 2px; }
.link-btn:hover:not(:disabled)[b-vrnhc0h5zt] { text-decoration: underline; }
.link-btn:disabled[b-vrnhc0h5zt] { opacity: .55; cursor: default; }

/* Legacy DivExaminer1: replaces the grid and asks for the evaluation last date. */
.pool-date[b-vrnhc0h5zt] { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; max-width: 380px; }
.pool-date-lbl[b-vrnhc0h5zt] { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.pool-date .expire-date[b-vrnhc0h5zt] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                          border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.pool-date .sub[b-vrnhc0h5zt] { margin: 10px 0 0; }
.pool-date-actions[b-vrnhc0h5zt] { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 14px; }
/* /Pages/GenerateBookletUrl.razor.rz.scp.css */
.cand-head[b-461bgdu09b] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-461bgdu09b] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-461bgdu09b] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-461bgdu09b] { color: var(--ink); }

.card[b-461bgdu09b] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-461bgdu09b] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.btn[b-461bgdu09b] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-461bgdu09b] { background: var(--track); }
.btn.primary[b-461bgdu09b] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-461bgdu09b] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-461bgdu09b] { opacity: .55; cursor: default; }

/* File picker: the native input is stretched invisibly over the styled label-button. */
.upload-pick[b-461bgdu09b] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-btn[b-461bgdu09b] { position: relative; overflow: hidden; }
.file-btn[b-461bgdu09b]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-461bgdu09b] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.hint[b-461bgdu09b] { margin: 12px 2px 0; color: #c02b3c; font-size: 12.5px; font-weight: 600; }
.pick-hint[b-461bgdu09b] { margin: 12px 2px 0; }
.sub[b-461bgdu09b] { color: var(--muted); font-size: 13px; }

.panel-head[b-461bgdu09b] { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; font-weight: 700;
              letter-spacing: .05em; text-transform: uppercase; padding: 0 2px 12px; }
.panel-head .count[b-461bgdu09b] { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12.5px;
                      margin-left: auto; }

.table-scroll[b-461bgdu09b] { overflow-x: auto; }
.grid[b-461bgdu09b] { width: 100%; border-collapse: collapse; }
.grid thead th[b-461bgdu09b] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-461bgdu09b] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-461bgdu09b] { border-bottom: none; }
.grid tbody tr:hover td[b-461bgdu09b] { background: var(--surface-2); }

/* Link/path cells wrap long storage paths and URLs instead of forcing horizontal scroll. */
.path-cell[b-461bgdu09b] { font-family: var(--mono, monospace); word-break: break-all; color: var(--muted); }
.link-cell[b-461bgdu09b] { word-break: break-all; }
.link-cell a[b-461bgdu09b] { color: var(--accent); text-decoration: none; }
.link-cell a:hover[b-461bgdu09b] { text-decoration: underline; }
.not-found[b-461bgdu09b] { color: #c02b3c; font-weight: 600; }

/* QA G2/G3: two numbered steps on a fixed grid, so every control shares a left edge and the order is
   obvious. The action column is a fixed width, which is what stops the two rows' buttons drifting. */
.steps[b-461bgdu09b] { display: flex; flex-direction: column; gap: 18px; }
.step[b-461bgdu09b] { display: grid; grid-template-columns: 28px minmax(260px, max-content) 1fr; gap: 14px; align-items: start; }
.step-no[b-461bgdu09b] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
           border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
           font-size: 12px; font-weight: 700; color: var(--muted); }
.step-action[b-461bgdu09b] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-note[b-461bgdu09b] { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.step-note b[b-461bgdu09b] { font-size: 13px; }
.step-note .sub[b-461bgdu09b], .step-note .hint[b-461bgdu09b], .step-note .file-meta[b-461bgdu09b] { font-size: 12px; }
@media (max-width: 720px) {
    .step[b-461bgdu09b] { grid-template-columns: 28px 1fr; }
    .step-note[b-461bgdu09b] { grid-column: 2; }
}
/* /Pages/GenerateInward.razor.rz.scp.css */
.cand-head[b-vx8z4hvm13] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cand-head .sub[b-vx8z4hvm13] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-vx8z4hvm13] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.back:hover[b-vx8z4hvm13] { color: var(--accent); }

/* Legacy filter bar, on a 4-column grid so fields line up instead of wrapping ad hoc:
   row 1 = Exam Date + the wide combined subject dropdown, row 2 = the four narrow filters. */
/* QA A5: 12px between frames rather than 16-18. */
.filters[b-vx8z4hvm13] { padding: 14px 18px; margin-bottom: 12px; }
.filter-grid[b-vx8z4hvm13] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.filter-grid .span3[b-vx8z4hvm13] { grid-column: span 3; }
.filter-grid > label[b-vx8z4hvm13] { display: flex; flex-direction: column; gap: 6px; min-width: 0;
                       font-size: 12px; font-weight: 600; color: var(--muted);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-grid select[b-vx8z4hvm13], .filter-grid input[b-vx8z4hvm13] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; width: 100%; min-width: 0; }
.filter-grid select:focus[b-vx8z4hvm13], .filter-grid input:focus[b-vx8z4hvm13] { outline: 2px solid var(--accent); outline-offset: -1px; }
.filter-grid select[b-vx8z4hvm13] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer; }
/* QA A1: a grid cell now, not a row of its own. align-items:end on .filter-grid drops it onto the same
   baseline as the Progress Filter select beside it. */
.filter-actions[b-vx8z4hvm13] { display: flex; gap: 10px; min-width: 0; }
.filter-actions .btn[b-vx8z4hvm13] { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }

/* QA A3: the already-scanned floor, said in the field rather than only on rejection. */
.count-hint[b-vx8z4hvm13] { font-weight: 600; font-size: 11.5px; color: var(--muted); }

@media (max-width: 1100px) {
    .filter-grid[b-vx8z4hvm13] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-grid .span3[b-vx8z4hvm13] { grid-column: span 2; }
    .filter-actions[b-vx8z4hvm13] { grid-column: span 2; justify-content: flex-end; }
    .filter-actions .btn[b-vx8z4hvm13] { flex: 0 0 auto; }
}

.kpis[b-vx8z4hvm13] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.card[b-vx8z4hvm13] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 12px; }
/* flex-direction is explicit: app.css sets a global `.stat { flex-direction: column }`. */
.stat[b-vx8z4hvm13] { display: flex; flex-direction: row; align-items: center; gap: 9px; margin-bottom: 0; padding: 12px 16px; }
.tile[b-vx8z4hvm13] { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.tile.blue[b-vx8z4hvm13] { background: var(--tile-blue-bg); color: var(--tile-blue); }
.tile.green[b-vx8z4hvm13] { background: var(--tile-green-bg); color: var(--tile-green); }
.tile.violet[b-vx8z4hvm13] { background: var(--tile-violet-bg); color: var(--tile-violet); }
.stat .lbl[b-vx8z4hvm13] { color: var(--muted); font-size: 13px; font-weight: 600; min-width: 0;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sep[b-vx8z4hvm13] { color: var(--faint); flex: none; }
.stat .num[b-vx8z4hvm13] { font-size: 16px; font-weight: 700; color: var(--ink);
             font-variant-numeric: tabular-nums; flex: none; }

/* The entry form is a full-width panel above the grid now, not a side column. Its inner layout is the
   legacy one: subject caption, a 3-across field row, then the detail-mode radios and the upload. */
.subject-line[b-vx8z4hvm13] { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.subject-line b[b-vx8z4hvm13] { color: var(--ink); font-weight: 700; }

.form-grid[b-vx8z4hvm13] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.form label[b-vx8z4hvm13] { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.form select[b-vx8z4hvm13], .form input[type=text][b-vx8z4hvm13], .form input[type=number][b-vx8z4hvm13] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 10px; font-size: 13.5px; width: 100%; min-width: 0; }
.form select[b-vx8z4hvm13] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer; }
.form select:disabled[b-vx8z4hvm13] { opacity: .6; cursor: default; }
.form select:focus[b-vx8z4hvm13], .form input:focus[b-vx8z4hvm13] { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Radios and the upload sit on their own rows, label first, exactly as the legacy form read. */
.detail-mode[b-vx8z4hvm13], .upload-row[b-vx8z4hvm13] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.mode-label[b-vx8z4hvm13] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.form label.radio[b-vx8z4hvm13] { flex-direction: row; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; cursor: pointer; }
.form label.radio input[type=radio][b-vx8z4hvm13] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.upload-row input[type=file][b-vx8z4hvm13] { font-size: 12.5px; color: var(--ink); max-width: 100%; }

.actions[b-vx8z4hvm13] { display: flex; gap: 10px; margin-top: 18px; }
.err-list[b-vx8z4hvm13] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 860px) { .form-grid[b-vx8z4hvm13] { grid-template-columns: 1fr; } }

.btn[b-vx8z4hvm13] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-vx8z4hvm13] { background: var(--track); }
.btn:disabled[b-vx8z4hvm13] { opacity: .55; cursor: default; }
.btn.primary[b-vx8z4hvm13] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-vx8z4hvm13] { filter: brightness(1.05); }

.banner[b-vx8z4hvm13] { margin-top: 14px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; }
.banner.ok[b-vx8z4hvm13] { background: var(--tile-green-bg); color: #1a7f4b; }
.banner.err[b-vx8z4hvm13] { background: #fbe6e8; color: #c02b3c; }

.list-head[b-vx8z4hvm13] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-vx8z4hvm13] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.head-actions[b-vx8z4hvm13] { display: flex; align-items: center; gap: 12px; }

.pager[b-vx8z4hvm13] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.pager .spacer[b-vx8z4hvm13] { flex: 1; }
.pager .page-size[b-vx8z4hvm13] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.pager .page-size select[b-vx8z4hvm13] {
    -webkit-appearance: none; appearance: none;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 8px center; background-size: 14px;
    border-radius: 8px; padding: 5px 26px 5px 9px; font-size: 12.5px; cursor: pointer; }
.pager .page-size select:focus[b-vx8z4hvm13] { outline: 2px solid var(--accent); outline-offset: -1px; }
.new-btn[b-vx8z4hvm13]::before { content: "+"; margin-right: 3px; font-weight: 700; }
.count[b-vx8z4hvm13] { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.count b[b-vx8z4hvm13] { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 16 legacy columns: scroll inside the card so the page body never scrolls sideways. */
.table-scroll[b-vx8z4hvm13] { overflow-x: auto; }
.grid[b-vx8z4hvm13] { width: 100%; border-collapse: collapse; }
.grid thead th[b-vx8z4hvm13] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 10px 10px; border-bottom: 1px solid var(--border);
                 white-space: nowrap; }
.grid tbody td[b-vx8z4hvm13] { padding: 10px; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child td[b-vx8z4hvm13] { border-bottom: none; }
.grid tbody tr:hover td[b-vx8z4hvm13] { background: var(--surface-2); }
.grid .nm[b-vx8z4hvm13] { font-weight: 600; }
/* Legacy tinted whole rows by completeness; a left edge marker reads the same without fighting the theme. */
.grid tbody tr.complete td:first-child[b-vx8z4hvm13] { box-shadow: inset 3px 0 0 var(--tile-green); }
.grid tbody tr.incomplete td:first-child[b-vx8z4hvm13] { box-shadow: inset 3px 0 0 #c9922b; }
.ta-c[b-vx8z4hvm13] { text-align: center; }
.mono[b-vx8z4hvm13] { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; }

.pad[b-vx8z4hvm13] { padding: 18px 4px; }
.sub[b-vx8z4hvm13] { color: var(--muted); }

@media (max-width: 980px) { .kpis[b-vx8z4hvm13] { grid-template-columns: 1fr; } }


.req[b-vx8z4hvm13] { color: #dc2626; margin-left: 3px; }
.mode-hint[b-vx8z4hvm13] { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; font-weight: 500; }

/* Legacy CategoryGridView_RowDataBound tints, verbatim: #C7FFCA when scanned matches inwarded,
   #FFD7D7 when it falls short, and LightGreen (#90EE90) once the bunch has gone outward. */
.grid tbody tr.complete td[b-vx8z4hvm13] { background: #C7FFCA; }
.grid tbody tr.incomplete td[b-vx8z4hvm13] { background: #FFD7D7; }
.grid tbody tr.outwarded td[b-vx8z4hvm13] { background: #90EE90; }
.grid tbody tr.complete td[b-vx8z4hvm13], .grid tbody tr.incomplete td[b-vx8z4hvm13], .grid tbody tr.outwarded td[b-vx8z4hvm13] { color: #14281a; }
.grid tbody tr.complete:hover td[b-vx8z4hvm13] { background: #b7f5bb; }
.grid tbody tr.incomplete:hover td[b-vx8z4hvm13] { background: #ffc7c7; }
.grid tbody tr.outwarded:hover td[b-vx8z4hvm13] { background: #82e082; }


/* The label caption and its asterisk are one span. Both label grids are column flex containers, so a bare
   text node plus a sibling <span class="req"> became two stacked flex items and the * dropped onto its own
   line under the caption. */
.filter-grid > label > .lbl[b-vx8z4hvm13],
.form-grid > label > .lbl[b-vx8z4hvm13] { display: block; line-height: 1.25; }
.filter-grid .req[b-vx8z4hvm13], .form-grid .req[b-vx8z4hvm13], .detail-mode .req[b-vx8z4hvm13] { color: #dc2626; margin-left: 3px; white-space: nowrap; }

/* Outward column is the send-outward trigger again (legacy OutwardLtn1); once sent it is plain text.
   These read as real controls rather than bare blue text: the row tints behind them are strong colours, so
   an unstyled link had almost no contrast against the green and pink rows. */
.grid .cell-btn[b-vx8z4hvm13] {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    border: 1px solid rgba(20, 40, 26, .28); background: rgba(255, 255, 255, .82); color: #16324f;
    border-radius: 8px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .12s, border-color .12s, transform .06s;
}
.grid .cell-btn:hover[b-vx8z4hvm13] { background: #fff; border-color: rgba(20, 40, 26, .5); }
.grid .cell-btn:active[b-vx8z4hvm13] { transform: translateY(1px); }
.grid .cell-btn:disabled[b-vx8z4hvm13] { opacity: .55; cursor: default; transform: none; }
.grid .cell-btn.outward-link[b-vx8z4hvm13] { color: #8a4b00; border-color: rgba(138, 75, 0, .35); }
.grid .cell-btn.outward-link:hover[b-vx8z4hvm13] { background: #fff7ec; }
.outward-done[b-vx8z4hvm13] {
    display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700;
    background: rgba(20, 90, 45, .16); color: #14532d; border: 1px solid rgba(20, 90, 45, .3);
}

/* Untinted rows sit on the dark surface, where the light chip would glare. */
.grid tbody tr:not(.complete):not(.incomplete):not(.outwarded) .cell-btn[b-vx8z4hvm13] {
    background: var(--surface-2); border-color: var(--border); color: var(--ink);
}
.grid tbody tr:not(.complete):not(.incomplete):not(.outwarded) .cell-btn:hover[b-vx8z4hvm13] { background: var(--track); }
.grid tbody tr:not(.complete):not(.incomplete):not(.outwarded) .outward-done[b-vx8z4hvm13] {
    background: var(--surface-2); border-color: var(--border); color: var(--muted);
}

/* Row action icons get the same treatment so the whole row reads as one control set. */
.grid .row-actions[b-vx8z4hvm13] { display: inline-flex; align-items: center; gap: 6px; }
.grid .row-actions .icon-btn[b-vx8z4hvm13] {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 1px solid rgba(20, 40, 26, .28); background: rgba(255, 255, 255, .82); color: #16324f;
    border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s;
}
.grid .row-actions .icon-btn:hover[b-vx8z4hvm13] { background: #fff; border-color: rgba(20, 40, 26, .5); }
.grid .row-actions .icon-btn.danger[b-vx8z4hvm13] { color: #b3261e; border-color: rgba(179, 38, 30, .35); }
.grid .row-actions .icon-btn.danger:hover[b-vx8z4hvm13] { background: #fff1f0; }
.grid .row-actions .icon-btn:disabled[b-vx8z4hvm13] { opacity: .5; cursor: default; }
.grid tbody tr:not(.complete):not(.incomplete):not(.outwarded) .row-actions .icon-btn[b-vx8z4hvm13] {
    background: var(--surface-2); border-color: var(--border); color: var(--ink);
}
.grid tbody tr:not(.complete):not(.incomplete):not(.outwarded) .row-actions .icon-btn:hover[b-vx8z4hvm13] { background: var(--track); }

.outward-modal p[b-vx8z4hvm13], .created-modal p[b-vx8z4hvm13] { margin: 0 0 8px; font-size: 14px; }
.outward-modal .sub[b-vx8z4hvm13], .created-modal .sub[b-vx8z4hvm13] { color: var(--muted); font-size: 12.5px; }

/* --- InwardWithDetails (LIST) — legacy lnkwithdetailinward + AssignStudentView --- */
.with-detail-link[b-vx8z4hvm13] { white-space: nowrap; }
.with-detail-modal .popup-head[b-vx8z4hvm13] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                                 margin-bottom: 14px; }
.with-detail-modal .popup-head h2[b-vx8z4hvm13] { margin: 0; }
.with-detail-modal .icon-btn.close[b-vx8z4hvm13] { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
                                     border-radius: 8px; padding: 5px; cursor: pointer; display: inline-flex; }
.with-detail-modal .icon-btn.close:hover[b-vx8z4hvm13] { background: var(--track); color: var(--ink); }

/* --- Mark As Outward popup (legacy TemplateModalPopupExtender) --- */
.outward-modal .popup-head[b-vx8z4hvm13] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                             margin-bottom: 4px; }
.outward-modal .popup-head h2[b-vx8z4hvm13] { margin: 0; }
.outward-modal .icon-btn.close[b-vx8z4hvm13] { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
                                 border-radius: 8px; padding: 5px; cursor: pointer; display: inline-flex; }
.outward-modal .icon-btn.close:hover[b-vx8z4hvm13] { background: var(--track); color: var(--ink); }

/* Legacy's compulsory-fields note, kept above the fields where it sat. */
.outward-modal .note[b-vx8z4hvm13] { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }

/* Two columns, not the entry form's three: only five fields, and the last spans the row. */
.outward-modal .form-grid[b-vx8z4hvm13] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.outward-modal .form-grid > label.wide[b-vx8z4hvm13] { grid-column: 1 / -1; }
.outward-modal .form-grid > label[b-vx8z4hvm13] { display: flex; flex-direction: column; gap: 5px;
                                    font-size: 12.5px; font-weight: 600; color: var(--muted); }
.outward-modal .form-grid input[b-vx8z4hvm13] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                                  border-radius: 9px; padding: 9px 10px; font-size: 13.5px; width: 100%; }
.outward-modal .form-grid input:focus[b-vx8z4hvm13] { outline: 2px solid var(--accent); outline-offset: -1px; }
/* The three read-only fields are display only — legacy rendered them as Labels, not inputs. */
.outward-modal .form-grid input[readonly][b-vx8z4hvm13] { background: var(--track); color: var(--muted); cursor: default; }
/* QA: the created dialog gained a close cross, styled like the other two dialogs on this page. */
.created-modal .popup-head[b-vx8z4hvm13] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                             margin-bottom: 14px; }
.created-modal .popup-head h2[b-vx8z4hvm13] { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.created-modal .icon-btn.close[b-vx8z4hvm13] { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
                                 border-radius: 8px; padding: 5px; cursor: pointer; display: inline-flex; }
.created-modal .icon-btn.close:hover[b-vx8z4hvm13] { background: var(--track); color: var(--ink); }

.created-line[b-vx8z4hvm13] { font-size: 15px; }
.created-line b[b-vx8z4hvm13] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.created-actions[b-vx8z4hvm13] { flex-wrap: wrap; }
/* /Pages/GenerateInwardDetails.razor.rz.scp.css */
.cand-head[b-tw90kogy8b] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cand-head .sub[b-tw90kogy8b] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-tw90kogy8b] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.back:hover[b-tw90kogy8b] { color: var(--accent); }

/* QA B6: the page is a scanning screen - operators want the counts, the entry row and the grid all
   in view at once. The cards were padded and spaced like a settings form, which pushed the grid off
   the fold. Tighter padding and gaps throughout, and the last card carries no trailing margin. */
.card[b-tw90kogy8b] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 10px; }
.card:last-of-type[b-tw90kogy8b] { margin-bottom: 0; }
/* The lookup card is a single field; it needs no vertical padding to speak of. */
.lookup.card[b-tw90kogy8b] { padding: 10px 16px; }

.lookup[b-tw90kogy8b] { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.lookup label[b-tw90kogy8b] { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); flex: 1; min-width: 260px; }
.lookup input[type=text][b-tw90kogy8b] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                           border-radius: 9px; padding: 9px 10px; font-size: 13.5px; width: 100%; }
.lookup input:focus[b-tw90kogy8b] { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Bunch header: subject / course / campus lines, then the three counts. */
.hdr-line[b-tw90kogy8b] { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.hdr-line b[b-tw90kogy8b] { color: var(--ink); font-weight: 650; }
.counts[b-tw90kogy8b] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.counts .cnt[b-tw90kogy8b] { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
               padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.counts .cnt b[b-tw90kogy8b] { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 2px; }

/* New-inward entry fields, inline above the grid. */
.entry-row[b-tw90kogy8b] { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.entry-row label[b-tw90kogy8b] { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.entry-row input[b-tw90kogy8b], .entry-row select[b-tw90kogy8b] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 10px; font-size: 13.5px; }
.entry-row input[type=text][b-tw90kogy8b] { min-width: 260px; }
.entry-row input[type=number][b-tw90kogy8b] { width: 130px; }
.entry-row select[b-tw90kogy8b] { min-width: 90px; }
.entry-row input:focus[b-tw90kogy8b], .entry-row select:focus[b-tw90kogy8b] { outline: 2px solid var(--accent); outline-offset: -1px; }
.entry-row input:disabled[b-tw90kogy8b], .entry-row select:disabled[b-tw90kogy8b] { opacity: .55; cursor: default; }
.matched[b-tw90kogy8b] { color: #1a7f4b; font-size: 13px; font-weight: 650; margin: 10px 0 0; }

.actions[b-tw90kogy8b] { display: flex; gap: 10px; margin-top: 4px; }

.btn[b-tw90kogy8b] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-tw90kogy8b] { background: var(--track); }
.btn:disabled[b-tw90kogy8b] { opacity: .55; cursor: default; }
.btn.primary[b-tw90kogy8b] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-tw90kogy8b] { filter: brightness(1.05); }

.banner[b-tw90kogy8b] { margin-top: 14px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; }
.banner.ok[b-tw90kogy8b] { background: var(--tile-green-bg); color: #1a7f4b; }
.banner.err[b-tw90kogy8b] { background: #fbe6e8; color: #c02b3c; }

.list-head[b-tw90kogy8b] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-tw90kogy8b] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.count[b-tw90kogy8b] { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.count b[b-tw90kogy8b] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-tw90kogy8b] { width: 100%; border-collapse: collapse; }
.grid thead th[b-tw90kogy8b] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-tw90kogy8b] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-tw90kogy8b] { border-bottom: none; }
.grid tbody tr:hover td[b-tw90kogy8b] { background: var(--surface-2); }
.ta-c[b-tw90kogy8b] { text-align: center; }
.mono[b-tw90kogy8b] { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }

/* Supplement Count cell: a link only when there is something to drill into. */
.link-btn[b-tw90kogy8b] { border: none; background: transparent; cursor: pointer; color: var(--accent); font-weight: 700;
            font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: underline; }
.link-btn:hover[b-tw90kogy8b] { filter: brightness(1.1); }
.link-btn:disabled[b-tw90kogy8b] { opacity: .5; cursor: default; text-decoration: none; }

.icon-btn[b-tw90kogy8b] { border: none; background: transparent; cursor: pointer; color: var(--muted);
            display: inline-flex; align-items: center; padding: 4px; border-radius: 7px; }
.icon-btn:hover[b-tw90kogy8b] { background: var(--track); }
.icon-btn.danger[b-tw90kogy8b] { color: #c02b3c; }
.icon-btn:disabled[b-tw90kogy8b] { opacity: .45; cursor: default; }
.sr-only[b-tw90kogy8b] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Supplement drill-down. */
.popup-head[b-tw90kogy8b] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.popup-head h2[b-tw90kogy8b] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.pad[b-tw90kogy8b] { padding: 18px 4px; }
.sub[b-tw90kogy8b] { color: var(--muted); }
/* /Pages/GenerateSupplementBarcode.razor.rz.scp.css */
.cand-head[b-sw8oobc9kv] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-sw8oobc9kv] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-sw8oobc9kv] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.back:hover[b-sw8oobc9kv] { color: var(--accent); }

.card[b-sw8oobc9kv] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

/* Filter row. QA: Exam Date had no label while Subject did, so the two controls sat at different
   heights. Every filter is a labelled column now, and the row aligns them on one baseline. */
.search-row[b-sw8oobc9kv] { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.search-row > label[b-sw8oobc9kv] { display: flex; flex-direction: column; gap: 6px;
                      font-size: 12px; font-weight: 600; color: var(--muted); }
.search-row > label > input[b-sw8oobc9kv], .search-row > label > select[b-sw8oobc9kv] { margin: 0; }
.search-row input[b-sw8oobc9kv], .search-row select[b-sw8oobc9kv] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.search-row input:focus[b-sw8oobc9kv], .search-row select:focus[b-sw8oobc9kv] { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-row input[type=text][b-sw8oobc9kv] { flex: 1; min-width: 200px; max-width: 320px; }
.search-row select[b-sw8oobc9kv] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer; min-width: 150px; max-width: 210px; }

.actions[b-sw8oobc9kv] { display: flex; gap: 10px; margin-top: 4px; }
/* QA: the Generate / Print buttons sit centred under the details they act on. */
.actions.centered[b-sw8oobc9kv] { justify-content: center; margin-top: 14px; }

.btn[b-sw8oobc9kv] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-sw8oobc9kv] { background: var(--track); }
.btn:disabled[b-sw8oobc9kv] { opacity: .55; cursor: default; }
.btn.primary[b-sw8oobc9kv] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-sw8oobc9kv] { filter: brightness(1.05); }

.banner[b-sw8oobc9kv] { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-top: 14px; }
.banner.ok[b-sw8oobc9kv] { background: var(--tile-green-bg); color: #1a7f4b; }
.banner.err[b-sw8oobc9kv] { background: #fbe6e8; color: #c02b3c; }
.banner a[b-sw8oobc9kv] { color: inherit; text-decoration: underline; }

.info[b-sw8oobc9kv] { display: grid; gap: 10px; margin-bottom: 8px; }
.info-row[b-sw8oobc9kv] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
            border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.info-row:last-child[b-sw8oobc9kv] { border-bottom: none; }
.info-row .k[b-sw8oobc9kv] { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.info-row .v[b-sw8oobc9kv] { color: var(--ink); font-size: 14px; font-weight: 650; }

.mono[b-sw8oobc9kv] { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }

.sup-grid[b-sw8oobc9kv] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
/* The chip stays white in both themes: a scanner reads dark bars on a light ground, so the barcode
   must not invert with the page. */
.sup-chip[b-sw8oobc9kv] { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fff;
            display: flex; align-items: center; justify-content: center; }
.sup-chip .bc[b-sw8oobc9kv] { display: block; max-width: 100%; height: auto; }
.hint[b-sw8oobc9kv] { color: var(--muted); font-size: 12.5px; margin-top: 12px; }

.pad[b-sw8oobc9kv] { padding: 18px 4px; }
.sub[b-sw8oobc9kv] { color: var(--muted); }
/* /Pages/ImportExaminer.razor.rz.scp.css */
.cand-head[b-u7scgugun2] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-u7scgugun2] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-u7scgugun2] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-u7scgugun2] { color: var(--ink); }

.card[b-u7scgugun2] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-u7scgugun2] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.mode[b-u7scgugun2] { display: inline-flex; align-items: center; gap: 14px; }
.mode-label[b-u7scgugun2] { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.bucketing-note[b-u7scgugun2] { font-weight: 500; }
.radio[b-u7scgugun2] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink);
         font-weight: 600; cursor: pointer; }
.radio input[b-u7scgugun2] { accent-color: var(--accent); cursor: pointer; }
.mode.locked[b-u7scgugun2] { opacity: .55; }
.mode.locked .radio[b-u7scgugun2], .mode.locked .radio input[b-u7scgugun2] { cursor: default; }

.btn[b-u7scgugun2] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-u7scgugun2] { background: var(--track); }
.btn.primary[b-u7scgugun2] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-u7scgugun2] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-u7scgugun2] { opacity: .55; cursor: default; }

/* File picker: the native input is stretched invisibly over the styled label-button. */
.upload-pick[b-u7scgugun2] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-btn[b-u7scgugun2] { position: relative; overflow: hidden; }
.file-btn[b-u7scgugun2]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn.disabled[b-u7scgugun2] { opacity: .55; cursor: default; pointer-events: none; }
.file-meta[b-u7scgugun2] { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.clear-file[b-u7scgugun2] { padding: 5px 10px; font-size: 12px; }

.hint[b-u7scgugun2] { margin: 12px 2px 0; color: #c02b3c; font-size: 12.5px; font-weight: 600; }
.pick-hint[b-u7scgugun2] { margin: 12px 2px 0; }

.panel-head[b-u7scgugun2] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; padding: 0 2px 10px; }
.err-head[b-u7scgugun2] { color: #c02b3c; }
.warn-head[b-u7scgugun2] { color: #a06a00; }
.notice-head[b-u7scgugun2] { color: var(--good); }

.errors[b-u7scgugun2] { margin: 0; padding: 0 2px 2px 20px; }
.errors li[b-u7scgugun2] { color: #c02b3c; font-size: 13px; padding: 3px 0; }

.warnings[b-u7scgugun2] { margin: 0; padding: 0 2px 2px 20px; }
.warnings li[b-u7scgugun2] { color: #a06a00; font-size: 13px; padding: 3px 0; }

/* Positive outcomes (e.g. "Sent notification email/SMS…") — kept visually apart from the amber
   warnings above so a caution and a confirmation never read as the same thing. */
.notices[b-u7scgugun2] { margin: 0; padding: 0 2px 2px 20px; }
.notices li[b-u7scgugun2] { color: var(--good); font-size: 13px; padding: 3px 0; }

.pad[b-u7scgugun2] { padding: 22px 6px; }
.sub[b-u7scgugun2] { color: var(--muted); font-size: 13px; }

.banner[b-u7scgugun2] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-u7scgugun2] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-u7scgugun2] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-u7scgugun2] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Import result modal — legacy showed this in ModalPopupExtender2 rather than inline. */
.result-modal .popup-title.success[b-u7scgugun2] { color: var(--good); }
.result-modal .popup-title.error[b-u7scgugun2] { color: #c02b3c; }
.result-body[b-u7scgugun2] { font-size: 13px; line-height: 1.6; }
.result-body.ok[b-u7scgugun2] { color: var(--ink); }
.result-body.err[b-u7scgugun2] { color: #c02b3c; }
/* /Pages/ImportTimetable.razor.rz.scp.css */
.workflow[b-b912ax67c3]{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.workflow-step[b-b912ax67c3]{padding:0 0 20px;overflow:hidden}.workflow-step header[b-b912ax67c3]{display:flex;gap:14px;align-items:flex-start;padding:20px;border-bottom:1px solid var(--border,#e2e8f0);margin-bottom:18px}.workflow-step h2[b-b912ax67c3],.success-summary h2[b-b912ax67c3]{margin:0 0 5px;font-size:18px}.workflow-step header p[b-b912ax67c3]{margin:0;color:var(--muted,#64748b);font-size:13px}.step-no[b-b912ax67c3]{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700}.filter-grid[b-b912ax67c3]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 20px 18px}.filter-grid label[b-b912ax67c3]{display:grid;gap:6px;color:var(--muted,#475569);font-size:12px;font-weight:600}.filter-grid select[b-b912ax67c3]{width:100%;min-height:38px;border:1px solid var(--border,#cbd5e1);border-radius:6px;background:var(--surface-2);padding:0 10px;color:var(--ink)}.filter-grid select:focus-visible[b-b912ax67c3],.btn:focus-visible[b-b912ax67c3]{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}.download[b-b912ax67c3]{margin-left:20px}.upload-row[b-b912ax67c3]{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 20px}.dropzone[b-b912ax67c3]{position:relative;display:grid;place-items:center;flex:1 1 260px;min-height:112px;padding:18px;border:2px dashed var(--border);border-radius:10px;background:var(--surface-2);color:var(--ink);text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.dropzone:hover[b-b912ax67c3]{border-color:var(--accent)}.dropzone:focus-within[b-b912ax67c3]{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:3px;border-color:var(--accent)}.dropzone span[b-b912ax67c3]{display:grid;gap:5px}.dropzone small[b-b912ax67c3]{color:var(--muted);font-weight:400}.dropzone:has(input:disabled)[b-b912ax67c3]{opacity:.55;cursor:default}.file-input[b-b912ax67c3]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-input:disabled[b-b912ax67c3]{cursor:default}.file-meta[b-b912ax67c3]{font-size:13px;color:var(--muted,#475569)}.hint[b-b912ax67c3]{margin:12px 20px 0}.error-hint[b-b912ax67c3]{color:var(--danger,#b42318)}.retry-options[b-b912ax67c3]{margin-left:10px;padding:5px 10px;background:var(--surface);color:var(--ink)}.result-panel[b-b912ax67c3]{margin-top:18px}.panel-head[b-b912ax67c3]{color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 2px 10px}.err-head[b-b912ax67c3]{color:#c02b3c}.errors[b-b912ax67c3]{margin:0;padding:16px 38px}.popup-title.error[b-b912ax67c3]{color:#c02b3c}.popup-title.success[b-b912ax67c3]{color:var(--good)}.popup-sub[b-b912ax67c3]{margin:0 0 12px;color:var(--muted);font-size:13px}.popup-summary[b-b912ax67c3]{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border,#e2e8f0);margin:0}.popup-summary div[b-b912ax67c3]{background:var(--surface);padding:14px}.popup-summary dt[b-b912ax67c3]{color:var(--muted,#64748b);font-size:12px}.popup-summary dd[b-b912ax67c3]{margin:4px 0 0;font-size:24px;font-weight:700}.popup-errors[b-b912ax67c3]{max-height:min(46vh,380px);overflow-y:auto;margin:0;padding:0 0 0 20px;display:grid;gap:6px}.success-summary[b-b912ax67c3]{padding:20px}.success-summary dl[b-b912ax67c3]{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border,#e2e8f0);margin:16px 0 0}.success-summary dl div[b-b912ax67c3]{background:var(--surface);padding:14px}.success-summary dt[b-b912ax67c3]{color:var(--muted,#64748b);font-size:12px}.success-summary dd[b-b912ax67c3]{margin:4px 0 0;font-size:24px;font-weight:700}@media(max-width:850px){.workflow[b-b912ax67c3]{grid-template-columns:1fr}}@media(max-width:520px){.filter-grid[b-b912ax67c3]{grid-template-columns:1fr}.upload-row .btn[b-b912ax67c3]{width:100%;justify-content:center}.success-summary dl[b-b912ax67c3]{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.workflow-step *[b-b912ax67c3]{scroll-behavior:auto!important;transition:none!important}}
/* /Pages/InstituteEvalStatus.razor.rz.scp.css */
.cand-head[b-cxn6emutpu] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-cxn6emutpu] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-cxn6emutpu] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-cxn6emutpu] { color: var(--ink); }
.head-actions[b-cxn6emutpu] { display: flex; align-items: center; gap: 14px; }

.card[b-cxn6emutpu] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-cxn6emutpu] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-cxn6emutpu] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-cxn6emutpu], .toolbar input[b-cxn6emutpu] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-cxn6emutpu], .toolbar input:focus[b-cxn6emutpu] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .search-ico[b-cxn6emutpu] { position: relative; left: 30px; width: 0; color: var(--faint); display: inline-flex; align-items: center; pointer-events: none; }
.toolbar .search[b-cxn6emutpu] { flex: 1 1 220px; max-width: 300px; border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13.5px; }
.toolbar .count[b-cxn6emutpu] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-cxn6emutpu] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-cxn6emutpu] { background: var(--track); }
.btn.primary[b-cxn6emutpu] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-cxn6emutpu] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-cxn6emutpu] { opacity: .55; cursor: default; }

.table-scroll[b-cxn6emutpu] { overflow-x: auto; }
.grid[b-cxn6emutpu] { width: 100%; border-collapse: collapse; }
.grid thead th[b-cxn6emutpu] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-cxn6emutpu] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child td[b-cxn6emutpu] { border-bottom: none; }
.grid tbody tr:hover td[b-cxn6emutpu] { background: var(--surface-2); }
.grid .nm[b-cxn6emutpu] { font-weight: 600; }
.ta-r[b-cxn6emutpu] { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th.ta-r[b-cxn6emutpu] { text-align: right; }

.pad[b-cxn6emutpu] { padding: 22px 6px; }
.sub[b-cxn6emutpu] { color: var(--muted); font-size: 13px; }

.pager[b-cxn6emutpu] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

h4[b-cxn6emutpu] { margin: 0 0 8px; font-size: 14px; }
ul[b-cxn6emutpu] { margin: 0; padding-left: 20px; }
li[b-cxn6emutpu] { line-height: 1.5; font-size: 13px; color: var(--muted); }
/* /Pages/InstituteImageSlot.razor.rz.scp.css */
.img-slot[b-9i9mvjssl1] { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
            background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.img-slot-title[b-9i9mvjssl1] { font-size: 12.5px; font-weight: 700; color: var(--ink); }

/* Checkerboard, not the card colour: the institute logos are transparent PNGs and a white-on-
   transparent logo was indistinguishable from an empty slot. */
.img-preview[b-9i9mvjssl1] { display: flex; align-items: center; justify-content: center; min-height: 150px;
               border: 1px dashed var(--border); border-radius: 10px;
               background-color: #fff;
               background-image: linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%),
                                 linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%);
               background-size: 16px 16px; background-position: 0 0, 8px 8px;
               overflow: hidden; padding: 8px; }
.img-preview img[b-9i9mvjssl1] { max-width: 100%; max-height: 170px; object-fit: contain; }
.img-preview.clickable[b-9i9mvjssl1] { cursor: zoom-in; }
.img-empty[b-9i9mvjssl1] { font-size: 12px; color: #6b7280; }

.file-btn[b-9i9mvjssl1] { position: relative; overflow: hidden; align-self: flex-start; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px; }
.file-btn.busy[b-9i9mvjssl1] { opacity: .6; cursor: default; }
/* ::deep is required: the <input> is rendered by the InputFile CHILD component, so it does not carry
   this component's scope attribute and a plain .file-input rule never matches it. Without this the
   native file input keeps its full intrinsic size and overlaps the neighbouring slot. */
.file-btn[b-9i9mvjssl1]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer;
                               width: 100%; height: 100%; }

.img-links[b-9i9mvjssl1] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.img-open[b-9i9mvjssl1] { font-size: 11.5px; font-weight: 600; color: var(--accent); text-decoration: none;
            border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.img-open:hover[b-9i9mvjssl1] { text-decoration: underline; }
/* /Pages/InstitutePaperCheck.razor.rz.scp.css */
.head-actions[b-9mtj5mk5wb] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.err[b-9mtj5mk5wb] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(192, 43, 60, .08);
    color: #c02b3c;
    border: 1px solid rgba(192, 43, 60, .2);
}

.fld[b-9mtj5mk5wb] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-9mtj5mk5wb] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
/* /Pages/InstituteProfile.razor.rz.scp.css */
.cand-head[b-rnackjzhsm] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-rnackjzhsm] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-rnackjzhsm] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.pad[b-rnackjzhsm] { padding: 22px 6px; }
.sub[b-rnackjzhsm] { color: var(--muted); font-size: 13px; }

.detail-sub[b-rnackjzhsm] { margin: 2px 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.detail-grid[b-rnackjzhsm] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.detail-grid > div[b-rnackjzhsm] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-grid .wide2[b-rnackjzhsm] { grid-column: span 2; }
.detail-grid label[b-rnackjzhsm] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.detail-grid span[b-rnackjzhsm] { font-size: 14px; color: var(--ink); word-break: break-word; }
.detail-grid a[b-rnackjzhsm] { color: var(--accent); text-decoration: none; }
.detail-grid a:hover[b-rnackjzhsm] { text-decoration: underline; }

@media (max-width: 900px) { .detail-grid[b-rnackjzhsm] { grid-template-columns: 1fr 1fr; } .detail-grid .wide2[b-rnackjzhsm] { grid-column: span 2; } }

/* --- Configurations card + edit modals (legacy Admin/Evaluator config editor) --- */
.cfg-head[b-rnackjzhsm] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cfg-head-actions[b-rnackjzhsm] { display: flex; gap: 10px; flex-wrap: wrap; }

.btn[b-rnackjzhsm] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 13px; font-size: 12.5px; font-weight: 600;
       display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s; }
.btn:hover:not(:disabled)[b-rnackjzhsm] { background: var(--track); }
.btn:disabled[b-rnackjzhsm] { opacity: .5; cursor: default; }
.btn.ghost[b-rnackjzhsm] { background: transparent; }
.btn.primary[b-rnackjzhsm] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled)[b-rnackjzhsm] { filter: brightness(1.06); }

/* Config modal: fixed header + scrollable body. Max-height must fit INSIDE AppModal's .panel
   or the panel grows its own second scrollbar. The panel is border-box, so its cap
   includes everything: 40px padding + 2px border + the Save/Cancel footer row (.acts:
   18px margin + ~36px button) ≈ 96px of non-body chrome. 110px leaves slack.
   94vh, not 90vh: this modal now uses AppModal's "full" panel (QA round-10 C, maximised by default),
   whose own cap is 94vh. */
.cfg-modal[b-rnackjzhsm] { max-height: calc(94vh - 110px); display: flex; flex-direction: column; overflow: hidden; }
/* A flex child will not shrink below its content unless min-height is cleared -- without this the
   body pushes past the cap instead of scrolling. */
.cfg-modal > .cfg-modal-head[b-rnackjzhsm] { flex: none; }
.cfg-modal > .cfg-modal-body[b-rnackjzhsm] { flex: 1 1 auto; min-height: 0; }
.cfg-modal-head[b-rnackjzhsm] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.cfg-modal-head h2[b-rnackjzhsm] { margin: 0 0 3px; font-size: 19px; font-weight: 700; color: var(--ink); }
.msub[b-rnackjzhsm] { margin: 0; color: var(--muted); font-size: 13px; }
.icon-x[b-rnackjzhsm] { border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px;
    padding: 5px; display: inline-flex; flex: none; transition: background .12s, color .12s; }
.icon-x:hover[b-rnackjzhsm] { background: var(--surface-2); color: var(--ink); }
.cfg-modal-body[b-rnackjzhsm] { overflow-y: auto; padding: 8px 0 12px; }
.req[b-rnackjzhsm] { color: #c02b3c; }

.cfg-section[b-rnackjzhsm] { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--accent); margin: 18px 0 2px; }
.cfg-section:first-child[b-rnackjzhsm] { margin-top: 8px; }

.cfg-grid[b-rnackjzhsm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0 28px; }
/* Non-toggle rows (inputs/selects/date). Toggle rows are styled inside ConfigToggle. */
.cfg-row[b-rnackjzhsm] { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--border); min-height: 46px; }
.cfg-lbl[b-rnackjzhsm] { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cfg-inp[b-rnackjzhsm] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; max-width: 190px; }
.cfg-inp:focus[b-rnackjzhsm] { outline: 2px solid var(--accent); outline-offset: -1px; }
.cfg-textarea[b-rnackjzhsm] { display: block; width: 100%; box-sizing: border-box; max-width: none; margin-top: 6px; resize: vertical; }

.cfg-docs[b-rnackjzhsm] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cfg-docs-grid[b-rnackjzhsm] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.cfg-chk[b-rnackjzhsm] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); font-weight: 500; }

@media (max-width: 620px) { .cfg-grid[b-rnackjzhsm], .cfg-docs-grid[b-rnackjzhsm] { grid-template-columns: 1fr; } }

/* dd/MM/yyyy echo beside the native date picker, whose own display follows the browser locale. */
.cfg-hint[b-rnackjzhsm] { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--faint); }

/* Institute image slots side by side, stacking on narrow screens. */
.img-grid[b-rnackjzhsm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
/* Only the logo remains, so cap it rather than letting one slot span the whole card. */
.img-grid.one[b-rnackjzhsm] { grid-template-columns: minmax(240px, 420px); }

/* Full view of the logo. The checkerboard is what makes a transparent PNG readable -- against a flat
   card a white-on-transparent logo looks like an empty box, which is how it read to QA. */
.logo-full[b-rnackjzhsm] { display: flex; align-items: center; justify-content: center; min-height: 220px;
    max-height: 62vh; padding: 18px; border: 1px solid var(--border); border-radius: 12px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%),
                      linear-gradient(45deg, #e9edf5 25%, transparent 25%, transparent 75%, #e9edf5 75%);
    background-size: 18px 18px; background-position: 0 0, 9px 9px; }
.logo-full img[b-rnackjzhsm] { max-width: 100%; max-height: 58vh; object-fit: contain; }
.logo-full-src[b-rnackjzhsm] { margin: 10px 0 0; font-size: 11.5px; word-break: break-all; }

.head-actions[b-rnackjzhsm] { display: flex; align-items: center; gap: 8px; }

/* Validation message under the subscription date box. */
.cfg-err[b-rnackjzhsm] { color: var(--bad, #c02b3c); font-size: 12px; margin: 4px 0 0; }

/* Help ("Institute Profile Page Description") — legacy showed it in a scrollable 70%-wide panel. */
/* Same constraints as .cfg-modal so the long description scrolls inside the body instead of
   overflowing the viewport: bounded height, flex column, and the body scrolls. */
/* Same budget as .cfg-modal — the help AppModal also renders a footer (Close button). */
.help-modal[b-rnackjzhsm] { max-height: calc(90vh - 110px); display: flex; flex-direction: column; overflow: hidden; }
/* A flex child will not shrink below its content unless min-height is cleared, which is what lets
   the body actually scroll rather than pushing the modal past the viewport. */
.help-modal .cfg-modal-head[b-rnackjzhsm] { flex: none; }
.help-modal .cfg-modal-body[b-rnackjzhsm] { flex: 1 1 auto; min-height: 0; }
.help-body h3[b-rnackjzhsm] { margin: 16px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.help-body h3:first-child[b-rnackjzhsm] { margin-top: 0; }
.help-body ul[b-rnackjzhsm] { margin: 0; padding-left: 20px; }
.help-body li[b-rnackjzhsm] { font-size: 13px; color: var(--muted); margin-bottom: 6px; line-height: 1.45; }
/* /Pages/InstituteUsers.razor.rz.scp.css */
/* QA #2416 G — the header reads left-to-right: search, help, then the action buttons, all of them
   the same height so the row does not look ragged. `.left` drops the space-between that used to
   push this page's five buttons against the right edge (and made them wrap). */
.cand-head[b-w5xdz5rlq2] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head.left[b-w5xdz5rlq2] { justify-content: flex-start; }
.head-actions[b-w5xdz5rlq2] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-actions .btn[b-w5xdz5rlq2] { height: 38px; box-sizing: border-box; }
/* app.css pins .head-actions .search-box .search to 230px, which clips the watermark QA asked
   for ("Search by Name, Email, Mobile Number"). Widened here for this page only. */
.head-actions[b-w5xdz5rlq2]  .search-box .search { width: 320px; }
.cand-head .sub[b-w5xdz5rlq2] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-w5xdz5rlq2] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-w5xdz5rlq2] { display: flex; align-items: center; gap: 10px; }
.toolbar .search-ico[b-w5xdz5rlq2] { position: relative; left: 30px; width: 0; color: var(--faint); display: inline-flex; align-items: center; pointer-events: none; }
.toolbar .search[b-w5xdz5rlq2] { flex: 1; max-width: 420px; border: 1px solid var(--border); background: var(--surface-2);
                   color: var(--ink); border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13.5px; }
.toolbar .search:focus[b-w5xdz5rlq2] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-w5xdz5rlq2] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* The role filter now heads the grid card (QA #2416 G removed the card it used to have to
   itself), so it needs the separator the two cards used to provide. */
.card > .toolbar:first-child[b-w5xdz5rlq2] { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* Bulk-selection bar: a count and the two bulk actions — the role picker itself moved into a
   popup (QA #2416 C), so nothing here competes with the grid's own controls. */
.selection-bar[b-w5xdz5rlq2] { padding: 10px 0 12px; gap: 12px; }
.selection-bar .count.sel[b-w5xdz5rlq2] { margin-left: 0; color: var(--ink); font-weight: 600; }

.toolbar .role-filter[b-w5xdz5rlq2] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar .role-filter select[b-w5xdz5rlq2] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar .role-filter select:focus[b-w5xdz5rlq2] { outline: 2px solid var(--accent); outline-offset: -1px; }

.btn[b-w5xdz5rlq2] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-w5xdz5rlq2] { background: var(--track); }
.btn.ghost[b-w5xdz5rlq2] { background: transparent; }
.btn.danger[b-w5xdz5rlq2] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-w5xdz5rlq2] { background: rgba(192,43,60,.08); }
.btn:disabled[b-w5xdz5rlq2] { opacity: .55; cursor: default; }

.actions-row[b-w5xdz5rlq2] { display: flex; gap: 8px; justify-content: center; }

/* Row ⋮ actions menu — keeps the Actions column aligned instead of overflowing inline buttons. */
.row-menu[b-w5xdz5rlq2] { position: relative; display: inline-flex; }
.icon-btn[b-w5xdz5rlq2] { border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
            border-radius: 8px; padding: 5px; display: inline-flex; align-items: center; justify-content: center;
            transition: background .12s, color .12s, border-color .12s; }
.icon-btn:hover[b-w5xdz5rlq2] { background: var(--track); color: var(--ink); border-color: var(--border); }
/* Sits above the click-catcher; anchored to the right edge of the Actions cell.
   QA #2416 D: it opens ABOVE the row. A downward menu was clipped by the card on the last rows and
   therefore sat in a different place there than on a searched or filtered row; anchoring to
   `bottom` makes every row behave identically. osm-row-menu.js adds `.down` for the one case where
   upward would leave the top of the viewport. */
.menu-pop[b-w5xdz5rlq2] { position: absolute; bottom: calc(100% + 4px); right: 0; z-index: 40; min-width: 172px;
            background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
            box-shadow: 0 12px 30px rgba(15,17,40,.16); display: flex; flex-direction: column; gap: 2px; }
.menu-pop.down[b-w5xdz5rlq2] { bottom: auto; top: calc(100% + 4px); }
.menu-pop button[b-w5xdz5rlq2] { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
                   border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink);
                   display: inline-flex; align-items: center; gap: 8px; }
.menu-pop button:hover[b-w5xdz5rlq2] { background: var(--surface-2); }
.menu-pop button.danger[b-w5xdz5rlq2] { color: #c02b3c; }
.menu-pop button.danger:hover[b-w5xdz5rlq2] { background: rgba(192,43,60,.08); }
/* Full-viewport transparent catcher: click anywhere outside the popover to close it. */
.menu-catch[b-w5xdz5rlq2] { position: fixed; inset: 0; z-index: 30; background: transparent; }

.grid[b-w5xdz5rlq2] { width: 100%; border-collapse: collapse; }
.grid thead th[b-w5xdz5rlq2] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-w5xdz5rlq2] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-w5xdz5rlq2] { border-bottom: none; }
.grid tbody tr:hover td[b-w5xdz5rlq2] { background: var(--surface-2); }
.grid .nm[b-w5xdz5rlq2] { font-weight: 600; }
.ta-c[b-w5xdz5rlq2] { text-align: center; }

.pill[b-w5xdz5rlq2] { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.pill.on[b-w5xdz5rlq2] { color: var(--good); background: var(--tile-green-bg); }
.pill.off[b-w5xdz5rlq2] { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }

.pad[b-w5xdz5rlq2] { padding: 22px 6px; }
.sub[b-w5xdz5rlq2] { color: var(--muted); font-size: 13px; }

.banner[b-w5xdz5rlq2] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-w5xdz5rlq2] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-w5xdz5rlq2] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-w5xdz5rlq2] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-w5xdz5rlq2] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.detail-head[b-w5xdz5rlq2] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.detail-head h2[b-w5xdz5rlq2] { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); }
.detail-sub[b-w5xdz5rlq2] { margin: 18px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.detail-grid[b-w5xdz5rlq2] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.detail-grid > div[b-w5xdz5rlq2] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-grid .wide[b-w5xdz5rlq2] { grid-column: span 4; }
.detail-grid label[b-w5xdz5rlq2] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.detail-grid span[b-w5xdz5rlq2] { font-size: 13.5px; color: var(--ink); word-break: break-word; }

@media (max-width: 900px) { .detail-grid[b-w5xdz5rlq2] { grid-template-columns: 1fr 1fr; } .detail-grid .wide[b-w5xdz5rlq2] { grid-column: span 2; } }

.btn.primary[b-w5xdz5rlq2] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-w5xdz5rlq2] { filter: brightness(1.06); background: var(--accent); }

.msub[b-w5xdz5rlq2] { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.form-grid[b-w5xdz5rlq2] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label[b-w5xdz5rlq2] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form-grid label input[b-w5xdz5rlq2], .form-grid label select[b-w5xdz5rlq2] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form-grid label.chk[b-w5xdz5rlq2] { display: flex; }
.form-grid .wide[b-w5xdz5rlq2] { grid-column: span 2; }
.form-grid input[b-w5xdz5rlq2], .form-grid select[b-w5xdz5rlq2] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 13.5px; font-family: inherit; }
.form-grid input:focus[b-w5xdz5rlq2], .form-grid select:focus[b-w5xdz5rlq2] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form-grid input:disabled[b-w5xdz5rlq2] { opacity: .55; }
.form-grid .chk[b-w5xdz5rlq2] { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.form-grid .chk input[b-w5xdz5rlq2] { width: auto; }
.req[b-w5xdz5rlq2] { color: #c02b3c; margin-left: 3px; }

/* QA #2416 E — the evaluator's current password. Masked by default in both places; the eye button
   reveals it. Monospace so a masked run and the real value occupy the same visual width. */
.detail-grid .pwd[b-w5xdz5rlq2] { display: inline-flex; align-items: center; gap: 6px; }
.detail-grid .pwd-val[b-w5xdz5rlq2] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; letter-spacing: .06em; word-break: break-all; }
.pwd-field[b-w5xdz5rlq2] { position: relative; display: block; }
.pwd-field input[b-w5xdz5rlq2] { padding-right: 40px !important; }
.pwd-field .icon-btn[b-w5xdz5rlq2] { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.hint[b-w5xdz5rlq2] { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.section-toggle[b-w5xdz5rlq2] { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 560px) { .form-grid[b-w5xdz5rlq2] { grid-template-columns: 1fr; } .form-grid .wide[b-w5xdz5rlq2] { grid-column: span 1; } }

.help-body h3[b-w5xdz5rlq2] { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent); }
.help-body ul[b-w5xdz5rlq2] { margin: 0; padding-left: 18px; }
.help-body li[b-w5xdz5rlq2] { font-size: 13.5px; color: var(--ink); margin: 4px 0; line-height: 1.45; }
.help-body strong[b-w5xdz5rlq2] { font-weight: 600; }

/* Upload file-picker (Photocopy Mapping + Import modals) — mirrors ObjectiveMarks scoped styles. */
.upload-pick[b-w5xdz5rlq2] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file-btn[b-w5xdz5rlq2] { position: relative; overflow: hidden; }
.file-btn[b-w5xdz5rlq2]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-w5xdz5rlq2] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* Import modal — added-subjects removable list. */
.subject-pick-list[b-w5xdz5rlq2] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subject-pick-list li[b-w5xdz5rlq2] { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
    font-size: 13px; color: var(--ink); }
.subject-pick-list li button[b-w5xdz5rlq2] { background: none; border: none; color: #c02b3c; cursor: pointer; font-weight: 700;
    line-height: 1; padding: 2px 4px; }

/* "Sample Template Download" link in the Import Users modal (legacy DownloadTemplateLBtn). */
.link-btn[b-w5xdz5rlq2] { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
            cursor: pointer; padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 12.5px;
            color: var(--accent); }
.link-btn:hover:not(:disabled)[b-w5xdz5rlq2] { filter: brightness(1.12); text-decoration: underline; }
.link-btn:disabled[b-w5xdz5rlq2] { color: var(--faint); cursor: default; }
/* /Pages/InternalMarksView.razor.rz.scp.css */
.cand-head[b-ynhtjbqzbo] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-ynhtjbqzbo] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-ynhtjbqzbo] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-ynhtjbqzbo] { color: var(--ink); }

.card[b-ynhtjbqzbo] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-ynhtjbqzbo] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-ynhtjbqzbo] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-ynhtjbqzbo], .toolbar input:is([type="date"], [data-osm-date])[b-ynhtjbqzbo], .toolbar input[type="number"][b-ynhtjbqzbo], .toolbar input[type="text"][b-ynhtjbqzbo] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-ynhtjbqzbo], .toolbar input:focus[b-ynhtjbqzbo] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-ynhtjbqzbo] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-ynhtjbqzbo] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-ynhtjbqzbo] { background: var(--track); }
.btn.primary[b-ynhtjbqzbo] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-ynhtjbqzbo] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-ynhtjbqzbo] { opacity: .55; cursor: default; }

.grid[b-ynhtjbqzbo] { width: 100%; border-collapse: collapse; }
.grid thead th[b-ynhtjbqzbo] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-ynhtjbqzbo] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-ynhtjbqzbo] { border-bottom: none; }
.grid tbody tr:hover td[b-ynhtjbqzbo] { background: var(--surface-2); }
.grid .nm[b-ynhtjbqzbo] { font-weight: 600; }
.ta-c[b-ynhtjbqzbo] { text-align: center; }

.pad[b-ynhtjbqzbo] { padding: 22px 6px; }
.sub[b-ynhtjbqzbo] { color: var(--muted); font-size: 13px; }

.pager[b-ynhtjbqzbo] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Head actions + Help modal (legacy HelpLinkBtn / HelpDiv ModalPopupExtender parity). */
.cand-head .head-actions[b-ynhtjbqzbo] { display: flex; align-items: center; gap: 12px; }
.btn.ghost[b-ynhtjbqzbo] { background: var(--surface-2); }
h5[b-ynhtjbqzbo] { margin: 14px 0 6px; }
ul[b-ynhtjbqzbo] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
/* /Pages/InternalObjective.razor.rz.scp.css */
.hub-head[b-1vj5525sc4] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-1vj5525sc4] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-1vj5525sc4] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-1vj5525sc4] { padding: 22px; }
.sub[b-1vj5525sc4] { color: var(--faint); font-size: 13px; }

.group .group-head[b-1vj5525sc4] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-1vj5525sc4] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-1vj5525sc4] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-1vj5525sc4] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-1vj5525sc4] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-1vj5525sc4]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-1vj5525sc4] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-1vj5525sc4]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-1vj5525sc4]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-1vj5525sc4] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-1vj5525sc4] { font-size: 14px; font-weight: 620; }
.txt small[b-1vj5525sc4] { color: var(--faint); font-size: 12px; }
.arrow[b-1vj5525sc4] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-1vj5525sc4] { color: var(--accent); }

.link-card.soon[b-1vj5525sc4] { cursor: default; opacity: .55; }
.link-card.soon:hover[b-1vj5525sc4] { background: none; border-color: transparent; }
.link-card.soon .ic[b-1vj5525sc4] { filter: grayscale(35%); }
.pill[b-1vj5525sc4] { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 620px) {
  .hub-head[b-1vj5525sc4] { flex-direction: column; align-items: stretch; }
  .hub-head[b-1vj5525sc4]  .search-box .search { width: 100%; }
}

.coming-soon .group-head[b-1vj5525sc4] { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); }

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-1vj5525sc4] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-1vj5525sc4] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-1vj5525sc4]  .search-box { align-self: flex-start; }
.hub-head[b-1vj5525sc4]  .search-box .search { width: min(420px, 100%); }
/* /Pages/InwardBarcodeDashboard.razor.rz.scp.css */
.cand-head[b-wm2485jmkn] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-wm2485jmkn] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-wm2485jmkn] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.back:hover[b-wm2485jmkn] { color: var(--accent); }

.kpis[b-wm2485jmkn] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.card[b-wm2485jmkn] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
/* One row per stat: [icon] Label : Count.
   flex-direction must be stated explicitly — app.css has a global `.stat { flex-direction: column }`
   that this rule's higher specificity does NOT displace for properties it leaves undeclared. */
.stat[b-wm2485jmkn] { display: flex; flex-direction: row; align-items: center; gap: 9px; margin-bottom: 0; padding: 12px 16px; }
.tile[b-wm2485jmkn] { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.tile.blue[b-wm2485jmkn] { background: var(--tile-blue-bg); color: var(--tile-blue); }
.tile.green[b-wm2485jmkn] { background: var(--tile-green-bg); color: var(--tile-green); }
.tile.violet[b-wm2485jmkn] { background: var(--tile-violet-bg); color: var(--tile-violet); }
/* min-width:0 lets the label ellipsize rather than force the card wider than its grid column. */
.stat .lbl[b-wm2485jmkn] { color: var(--muted); font-size: 13px; font-weight: 600; min-width: 0;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sep[b-wm2485jmkn] { color: var(--faint); flex: none; }
.stat .num[b-wm2485jmkn] { font-size: 16px; font-weight: 700; color: var(--ink);
             font-variant-numeric: tabular-nums; flex: none; }

.filter[b-wm2485jmkn] { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.filter label[b-wm2485jmkn] { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.filter input:is([type="date"], [data-osm-date])[b-wm2485jmkn] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                           border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.filter input:is([type="date"], [data-osm-date]):focus[b-wm2485jmkn] { outline: 2px solid var(--accent); outline-offset: -1px; }
.detail-title[b-wm2485jmkn] { font-size: 13.5px; color: var(--muted); }
.detail-title b[b-wm2485jmkn] { color: var(--ink); }
.err-inline[b-wm2485jmkn] { color: #c02b3c; font-size: 12.5px; font-weight: 600; }

.btn[b-wm2485jmkn] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-wm2485jmkn] { background: var(--track); }
.btn.primary[b-wm2485jmkn] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-wm2485jmkn] { filter: brightness(1.05); }
.btn.ghost[b-wm2485jmkn] { background: transparent; }
.btn:disabled[b-wm2485jmkn] { opacity: .55; cursor: default; }
/* Keeps Back and Export adjacent as a pair, independent of the .filter row's wider gap. */
.btn-row[b-wm2485jmkn] { display: flex; align-items: center; gap: 8px; }

.count[b-wm2485jmkn] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-wm2485jmkn] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-wm2485jmkn] { width: 100%; border-collapse: collapse; }
.grid thead th[b-wm2485jmkn] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-wm2485jmkn] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-wm2485jmkn] { border-bottom: none; }
.grid tbody tr:hover td[b-wm2485jmkn] { background: var(--surface-2); }
.grid .nm[b-wm2485jmkn] { font-weight: 600; }
.ta-c[b-wm2485jmkn] { text-align: center; }
.mono[b-wm2485jmkn] { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }

.link-btn[b-wm2485jmkn] { border: none; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer;
            font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: underline; }
.link-btn:hover[b-wm2485jmkn] { filter: brightness(1.1); }

.pad[b-wm2485jmkn] { padding: 18px 4px; }
.sub[b-wm2485jmkn] { color: var(--muted); }

@media (max-width: 860px) { .kpis[b-wm2485jmkn] { grid-template-columns: 1fr; } }

/* Legacy paged both grids with CustomPagingAdvanced. */
.pager[b-wm2485jmkn] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }
.pager .pageinfo[b-wm2485jmkn] { color: var(--muted); font-size: 12.5px; font-weight: 600; }
/* /Pages/InwardConfiguration.razor.rz.scp.css */
.cand-head[b-i20pe16ryb] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-i20pe16ryb] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-i20pe16ryb] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-i20pe16ryb] { color: var(--accent); }
.back :global(svg)[b-i20pe16ryb] { transform: rotate(180deg); }

.card[b-i20pe16ryb] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

/* Two fixed columns rather than auto-fit: these labels are long, and letting the browser choose the column
   count wrapped their text and stranded the asterisk on a line of its own. align-items:start keeps the row
   with the "Auto = …" hint from stretching its neighbour. */
.form[b-i20pe16ryb] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.form label[b-i20pe16ryb] { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.form label.wide[b-i20pe16ryb] { grid-column: 1 / -1; }
/* The label text and its asterisk travel together, so the marker can never wrap away from the wording. */
.form .lbl[b-i20pe16ryb] { display: block; min-height: 2.4em; line-height: 1.2; }
.form label input[b-i20pe16ryb], .form label select[b-i20pe16ryb] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-i20pe16ryb] { color: #dc2626; margin-left: 3px; white-space: nowrap; }
.form input[b-i20pe16ryb]::placeholder { color: var(--faint); font-weight: 500; }

@media (max-width: 620px) {
    .form[b-i20pe16ryb] { grid-template-columns: minmax(0, 1fr); }
    .form .lbl[b-i20pe16ryb] { min-height: 0; }
}
.form input[b-i20pe16ryb], .form select[b-i20pe16ryb] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                            border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-i20pe16ryb], .form select:focus[b-i20pe16ryb] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select[b-i20pe16ryb] { -webkit-appearance: none; appearance: none; cursor: pointer;
               background-image: var(--sel-chevron); background-repeat: no-repeat;
               background-position: right 11px center; background-size: 15px; padding-right: 34px; }
/* drop native number spinners for a clean, consistent field look */
.form input[type=number][b-i20pe16ryb]::-webkit-outer-spin-button,
.form input[type=number][b-i20pe16ryb]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form input[type=number][b-i20pe16ryb] { -moz-appearance: textfield; appearance: textfield; }
.form input:disabled[b-i20pe16ryb], .form select:disabled[b-i20pe16ryb] { opacity: .7; cursor: not-allowed; }
.form .hint[b-i20pe16ryb] { display: block; margin-top: 5px; color: var(--faint); font-size: 11px; font-weight: 500; }

.pad .new-btn[b-i20pe16ryb]::before { content: "+"; margin-right: 3px; font-weight: 700; }

.btn[b-i20pe16ryb] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-i20pe16ryb] { background: var(--track); }
.btn.primary[b-i20pe16ryb] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-i20pe16ryb] { filter: brightness(1.05); }
.btn.ghost[b-i20pe16ryb] { background: transparent; }
.btn:disabled[b-i20pe16ryb] { opacity: .6; cursor: default; }

.count[b-i20pe16ryb] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-i20pe16ryb] { color: var(--ink); font-variant-numeric: tabular-nums; }

.card:has(> table.grid)[b-i20pe16ryb] { overflow-x: auto; }
.grid[b-i20pe16ryb] { width: 100%; border-collapse: collapse; }
.grid thead th[b-i20pe16ryb] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-i20pe16ryb] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-i20pe16ryb] { border-bottom: none; }
.grid tbody tr:hover td[b-i20pe16ryb] { background: var(--surface-2); }
.ta-c[b-i20pe16ryb] { text-align: center; }

.pad[b-i20pe16ryb] { padding: 18px 4px; }
.sub[b-i20pe16ryb] { color: var(--muted); }
/* /Pages/InwardOutwardScanning.razor.rz.scp.css */
.hub-head[b-l3qgw3tglp] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-l3qgw3tglp] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-l3qgw3tglp] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-l3qgw3tglp] { padding: 22px; }
.sub[b-l3qgw3tglp] { color: var(--faint); font-size: 13px; }

.group .group-head[b-l3qgw3tglp] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-l3qgw3tglp] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-l3qgw3tglp] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-l3qgw3tglp] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-l3qgw3tglp] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-l3qgw3tglp]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-l3qgw3tglp] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-l3qgw3tglp]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-l3qgw3tglp]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-l3qgw3tglp] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-l3qgw3tglp] { font-size: 14px; font-weight: 620; }
.txt small[b-l3qgw3tglp] { color: var(--faint); font-size: 12px; }
.arrow[b-l3qgw3tglp] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-l3qgw3tglp] { color: var(--accent); }

@media (max-width: 620px) {
  .hub-head[b-l3qgw3tglp] { flex-direction: column; align-items: stretch; }
  .hub-head[b-l3qgw3tglp]  .search-box .search { width: 100%; }
}

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-l3qgw3tglp] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-l3qgw3tglp] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-l3qgw3tglp]  .search-box { align-self: flex-start; }
.hub-head[b-l3qgw3tglp]  .search-box .search { width: min(420px, 100%); }
/* /Pages/IpConfig.razor.rz.scp.css */
.cand-head[b-rxihdjv43u] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-rxihdjv43u] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-rxihdjv43u] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.card-title[b-rxihdjv43u] { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }

.banner[b-rxihdjv43u] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.err[b-rxihdjv43u] { background: rgba(192,43,60,.08); color: var(--bad, #c02b3c); border: 1px solid rgba(192,43,60,.2); }

.setting-row[b-rxihdjv43u] { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 4px; border-bottom: 1px solid var(--border); }
.setting-row:last-child[b-rxihdjv43u] { border-bottom: none; }
.setting-title[b-rxihdjv43u] { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.setting-sub[b-rxihdjv43u] { font-size: 12px; color: var(--muted); margin-top: 2px; }
.setting-ctrl[b-rxihdjv43u] { display: flex; align-items: center; gap: 10px; }
.setting-ctrl input[type="checkbox"][b-rxihdjv43u] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

/* "Send OTP to email" only applies to the SMS OTP switch above it, so it is indented under it and
   marked with a connector rather than sitting as an equal peer in the list. */
.setting-row.nested[b-rxihdjv43u] { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--border);
    border-bottom-left-radius: 0; }
.setting-row.nested .setting-title[b-rxihdjv43u] { font-weight: 600; }
.setting-row.nested[b-rxihdjv43u]::before { content: ""; }

.saved[b-rxihdjv43u] { font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--tile-green-bg);
    border-radius: 999px; padding: 3px 10px; }

/* Wide grids (8 columns + inline IP editor) scroll inside the card instead of clipping. */
.tbl-wrap[b-rxihdjv43u] { overflow-x: auto; }

.tbl[b-rxihdjv43u], .grid[b-rxihdjv43u] { width: 100%; border-collapse: collapse; }
.tbl input[type="checkbox"][b-rxihdjv43u] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.tbl input[type="checkbox"]:disabled[b-rxihdjv43u] { cursor: default; }
.tbl thead th[b-rxihdjv43u], .grid thead th[b-rxihdjv43u] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.tbl tbody td[b-rxihdjv43u], .grid tbody td[b-rxihdjv43u] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td[b-rxihdjv43u], .grid tbody tr:last-child td[b-rxihdjv43u] { border-bottom: none; }
.tbl tbody tr:hover td[b-rxihdjv43u], .grid tbody tr:hover td[b-rxihdjv43u] { background: var(--surface-2); }
.ta-c[b-rxihdjv43u] { text-align: center; }

.pad[b-rxihdjv43u] { padding: 22px 6px; }
.sub[b-rxihdjv43u] { color: var(--muted); font-size: 13px; }

.btn[b-rxihdjv43u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-rxihdjv43u] { background: var(--track); }
.btn.danger[b-rxihdjv43u] { color: var(--bad, #c02b3c); border-color: transparent; background: transparent; }
.btn.danger:hover[b-rxihdjv43u] { background: rgba(192,43,60,.08); }
.btn.primary[b-rxihdjv43u] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-rxihdjv43u] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-rxihdjv43u] { opacity: .55; cursor: default; }
/* A disabled primary at 55% opacity still reads as clickable purple — grey it out instead. */
.btn.primary:disabled[b-rxihdjv43u] { background: var(--surface-2); border-color: var(--border); color: var(--muted); filter: none; }

.add-row[b-rxihdjv43u] { display: flex; align-items: flex-end; gap: 12px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.add-row label[b-rxihdjv43u] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.add-row input[b-rxihdjv43u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; min-width: 180px; }
.add-row input:focus[b-rxihdjv43u] { outline: 2px solid var(--accent); outline-offset: -1px; }

.banner.ok[b-rxihdjv43u] { background: var(--tile-green-bg); color: var(--good); border: 1px solid rgba(31,150,105,.22); }

.head-actions[b-rxihdjv43u] { display: flex; align-items: center; gap: 8px; }

.toolbar[b-rxihdjv43u] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .card-title[b-rxihdjv43u] { margin: 0; }
.toolbar .search-ico[b-rxihdjv43u] { position: relative; left: 30px; width: 0; color: var(--faint);
                       display: inline-flex; align-items: center; pointer-events: none; }
.toolbar .search[b-rxihdjv43u] { flex: 1; max-width: 420px; border: 1px solid var(--border); background: var(--surface-2);
                   color: var(--ink); border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13.5px; font-family: inherit; }
.toolbar .search:focus[b-rxihdjv43u] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-rxihdjv43u] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.toolbar .role-filter[b-rxihdjv43u] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar .role-filter select[b-rxihdjv43u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar .role-filter select:focus[b-rxihdjv43u] { outline: 2px solid var(--accent); outline-offset: -1px; }

.pager[b-rxihdjv43u] { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 12px; }

.msub[b-rxihdjv43u] { margin: 0 0 16px; color: var(--muted); font-size: 13px; }

/* "Action" dropdown holding Export = shared <ActionMenu> (legacy dropdown-item ExportUsersBtn /
   ExportUserButton), first in the toolbar per QA feedback A. */

/* Legacy TotalCountLbl / TotalCountLable: bold, medium, brand blue, above the grid. */
.total-count[b-rxihdjv43u] { font-weight: 700; font-size: 14px; color: #2f6cc9; }

/* Role chips: the SP returns one row per role; the grid shows one row per user instead. */
.chip[b-rxihdjv43u] { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-2);
        border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--ink);
        margin: 1px 4px 1px 0; white-space: nowrap; }

/* Per-row Add/Update IP cell (legacy IPAddTxt + AddIPBtn inside the grid row). */
.ip-cell[b-rxihdjv43u] { white-space: nowrap; }
.ip-cell .saved[b-rxihdjv43u] { margin-left: 6px; }
.ip-cell .ip-input[b-rxihdjv43u] { width: 130px; border: 1px solid var(--border); background: var(--surface-2);
                     color: var(--ink); border-radius: 8px; padding: 6px 9px; font-size: 13px;
                     font-family: inherit; margin-right: 6px; }
.ip-cell .ip-input:focus[b-rxihdjv43u] { outline: 2px solid var(--accent); outline-offset: -1px; }

/* --- grid and toolbar polish --- */

/* The card header is one line: title, the view button, its filter, then the count pushed right.
   The count's margin-left:auto above does the pushing, so nothing needs a fixed width. */
.toolbar .card-title[b-rxihdjv43u] { margin-right: 4px; white-space: nowrap; }
.toolbar .back-btn[b-rxihdjv43u] { margin-right: 2px; }

/* Zebra striping plus a quieter hover: eight columns of mostly-text rows are hard to track across
   without one, and the hover alone was doing all the work. */
.tbl tbody tr:nth-child(even) td[b-rxihdjv43u] { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tbl tbody tr:hover td[b-rxihdjv43u] { background: var(--surface-2); }

/* Emails and names must not wrap mid-row: the card scrolls sideways instead (.tbl-wrap). */
.tbl thead th[b-rxihdjv43u] { white-space: nowrap; }
.tbl tbody td[b-rxihdjv43u] { white-space: nowrap; }

/* Yes/No reads better as a status pill than as bare text in a column of names and addresses. */
.tbl tbody td .flag[b-rxihdjv43u] { display: inline-block; min-width: 34px; text-align: center; padding: 2px 9px;
    border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.flag.yes[b-rxihdjv43u] { background: var(--tile-green-bg); color: var(--good); }
.flag.no[b-rxihdjv43u] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Totals stay aligned when a page mixes 3- and 4-digit counts. */
.total-count[b-rxihdjv43u] { font-variant-numeric: tabular-nums; }
/* /Pages/Login.razor.rz.scp.css */
/* =====================================================================
   Sign-in card — QA ticket #2413 A (alignment).
   ---------------------------------------------------------------------
   One shape for every control on this page:

       caption line   (12px/18px, 6px gap)      <span class="cap">
       control box    (48px, icon inside)       <span class="ctl">

   The caption metrics are the app-wide tokens from wwwroot/css/ui-standards.css,
   so this card reads as part of the same system; only the box is taller (48px,
   the sign-in proportion) than the 38px data-grid control.

   The control is a child of `.ctl`, never a direct child of the <label>. That is
   load-bearing: ui-standards.css keys on `label:has(> select)` /
   `label:has(> input…)` and, being the last sheet loaded and more specific than
   any scoped rule, it was imposing the 38px grid metrics here — 12px left padding
   under a 42px-inset icon, and a 6px top margin that dropped the control away
   from its absolutely-positioned icon. Nesting the control takes this card out of
   those selectors entirely instead of fighting them with !important.
   ===================================================================== */

.auth-bg[b-7rmeuafbbt] {
    min-height: 100vh; width: 100%; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(124,108,240,.55), transparent 60%),
        radial-gradient(1000px 700px at 100% 110%, rgba(37,99,235,.45), transparent 55%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, #312e81, #1e3a8a 55%, #1e40af);
}

.auth-card[b-7rmeuafbbt] {
    width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: 34px 32px 30px;
    box-shadow: 0 24px 60px rgba(15,17,40,.35), 0 4px 12px rgba(15,17,40,.2);
}

/* ---- QA #2413 A/B: keep Login above the fold ----------------------------
   Four stacked 48px fields plus their captions ran the card past ~720px, so on a
   laptop viewport the submit button fell below the fold and every sign-in began
   with a scroll. Widening the card and pairing the two credentials fixes that
   without dropping anything:

       [ Welcome back! + subtitle             ]      .auth-head
       [ User Type, full width                ]      .auth-field.wide
       [ Username ]                [ Password ]      .auth-grid
       [ Security Check, full width           ]      .auth-field.wide
       [ Login                                ]

   Round 3 moved User Type out of the heading's row and gave it a full-width row of
   its own. Sharing the title's row made it the one field whose caption did not start
   at the card's left edge and whose box lined up with no other box — read as a
   control bolted onto the heading rather than as the first field of the form. As its
   own row it still comes first (it scopes which roles and which database everything
   below signs in against) and now sits on the same left rule as every other caption.

   The wider card is tied to the presence of the grid rather than set outright: the
   2FA branch renders one PIN field and no grid, and should stay narrow.
   ----------------------------------------------------------------------- */
.auth-card:has(.auth-grid)[b-7rmeuafbbt] { max-width: 620px; }

.auth-grid[b-7rmeuafbbt] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }

/* The two full-width fields span the pair's track, so every control on the card
   shares the same left and right rules. */
.auth-field.wide[b-7rmeuafbbt] { grid-column: 1 / -1; }

/* One column again when two would squeeze the controls: below this width the
   halves are narrower than the 48px control's own padding budget. */
@media (max-width: 640px) {
    .auth-card:has(.auth-grid)[b-7rmeuafbbt] { max-width: 420px; }
    .auth-grid[b-7rmeuafbbt] { grid-template-columns: 1fr; }
}

/* Short viewports (laptop screens with browser chrome, the case QA reported) get
   the same card with its outer breathing room trimmed rather than a different
   layout. */
@media (max-height: 760px) {
    .auth-bg[b-7rmeuafbbt] { padding: 12px; }
    .auth-card[b-7rmeuafbbt] { padding: 22px 28px 20px; }
    .auth-brand[b-7rmeuafbbt] { margin-bottom: 14px; }
    .lead[b-7rmeuafbbt] { margin-bottom: 14px; }
    .auth-field[b-7rmeuafbbt] { margin-bottom: 12px; }
    .auth-btn[b-7rmeuafbbt] { margin-top: 14px; }
}

/* Shorter still (a small laptop with a toolbar-heavy browser). The sign-in card's
   subtitle is the only thing here that carries no instruction, so it is what goes
   when the choice is between dropping it and making the user scroll to reach Login.
   Keyed on the grid so it stays put in the 2FA branch, whose .lead is the sentence
   telling the user where to find their PIN. */
@media (max-height: 560px) {
    .auth-card[b-7rmeuafbbt] { padding: 16px 24px 16px; }
    .auth-card:has(.auth-grid) .lead[b-7rmeuafbbt] { display: none; }
    .auth-brand[b-7rmeuafbbt] { margin-bottom: 10px; }
    .auth-field[b-7rmeuafbbt] { margin-bottom: 10px; }
    .auth-notice[b-7rmeuafbbt] { margin-bottom: 12px; }
    .auth-btn[b-7rmeuafbbt] { margin-top: 10px; }
}

/* ---- brand row + database menu ---- */
.auth-brand[b-7rmeuafbbt] { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand-txt[b-7rmeuafbbt] { min-width: 0; }
.auth-brand b[b-7rmeuafbbt] { display: block; font-size: 15px; color: var(--ink); line-height: 1.25; }
.auth-brand small[b-7rmeuafbbt] { display: block; color: var(--faint); font-size: 11px; letter-spacing: .04em; }

/* The ⋮ toggle sits at the end of the brand row and is the same 36px hit target the topbar
   icon buttons use, so it lines up with the rest of the product's icon buttons. */
.conn-menu[b-7rmeuafbbt] { position: relative; margin-left: auto; flex: none; }
.conn-toggle[b-7rmeuafbbt] {
    list-style: none; cursor: pointer; user-select: none;
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--muted);
    display: grid; place-items: center;
}
.conn-toggle[b-7rmeuafbbt]::-webkit-details-marker { display: none; }
.conn-toggle:hover[b-7rmeuafbbt] { color: var(--ink); border-color: var(--accent); }
.conn-menu[open] > .conn-toggle[b-7rmeuafbbt] { color: var(--ink); border-color: var(--accent); }

/* The dropdown panel. Same object as the shared ActionMenu's (that component's rules are scoped to
   itself, so the class contract is reused rather than the stylesheet), but right-anchored: the
   toggle sits at the card's right edge, so a left-anchored panel would hang off it. */
.conn-items[b-7rmeuafbbt] {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: auto; right: 0;
    min-width: 268px; display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow);
}
.conn-head[b-7rmeuafbbt] {
    padding: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--faint);
}
.conn-items .action-item[b-7rmeuafbbt] {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit;
}
.conn-items .action-item:hover[b-7rmeuafbbt] { background: var(--surface-2); }
.conn-items .action-item.on[b-7rmeuafbbt] { background: var(--surface-2); }
.conn-items .action-item .conn-name[b-7rmeuafbbt] { flex: 1; min-width: 0; white-space: normal; }
.conn-items .action-item .conn-tick[b-7rmeuafbbt] { color: var(--accent); display: inline-flex; flex: none; }
.conn-items .action-item .mi[b-7rmeuafbbt] { display: inline-flex; color: var(--faint); flex: none; }

/* Which archive this sign-in will read — legacy's connectionLbl. */
.conn-chip[b-7rmeuafbbt] {
    display: inline-flex; align-items: center; gap: 6px; margin: -12px 0 18px;
    padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.auth-card h1[b-7rmeuafbbt] { margin: 0 0 4px; font-size: 23px; font-weight: 720; color: var(--ink); }
.lead[b-7rmeuafbbt] { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---- one field shape ---- */
.auth-field[b-7rmeuafbbt] { display: block; margin-bottom: 14px; }

.auth-field > .cap[b-7rmeuafbbt] {
    display: block;
    font-size: var(--fld-label-fs, 12px);
    line-height: var(--fld-label-lh, 18px);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: var(--fld-label-gap, 6px);
}

/* A caption that carries an action on its right. The action sits on the caption's own
   line rather than inside the control frame so the answer box stays the same clean
   48px box as Username and Password, and so the button can say what it does instead
   of being an unlabelled glyph the user has to hover to identify. Both halves centre
   on the caption's 18px line, which is what lines the refresh glyph up with the
   question text beside it. */
.auth-field > .cap.cap-row[b-7rmeuafbbt] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.auth-field > .cap.cap-row > span[b-7rmeuafbbt] { min-width: 0; }

.cap-action[b-7rmeuafbbt] {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 18px;
    color: var(--accent); border-radius: 6px;
}
.cap-action:hover[b-7rmeuafbbt] { text-decoration: underline; }
.cap-action:focus-visible[b-7rmeuafbbt] {
    outline: 2px solid var(--accent); outline-offset: 2px; text-decoration: none;
}
/* Icon.razor renders its own svg, so it carries that component's scope id, not this
   one's — ::deep is the only way to reach it from here. */
.cap-action[b-7rmeuafbbt]  svg { flex: none; }

.auth-field > .ctl[b-7rmeuafbbt] { position: relative; display: block; }

/* Icon centred on the CONTROL, not on the label block — that is what "the symbol and label are
   consistently aligned" asks for, and it holds whatever height the caption takes. */
.auth-field > .ctl > .fico[b-7rmeuafbbt] {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--faint); display: inline-flex; align-items: center;
    pointer-events: none; z-index: 1;
}

.auth-field > .ctl > input[b-7rmeuafbbt],
.auth-field > .ctl > select[b-7rmeuafbbt] {
    display: block; width: 100%; box-sizing: border-box; margin: 0;
    height: 48px; min-height: 48px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 12px;
    padding: 0 14px 0 44px;
    font-size: 14.5px; font-family: inherit; line-height: 48px;
    appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
/* A control with a trailing button keeps clear of it. */
.auth-field > .ctl:has(> .peek) > input[b-7rmeuafbbt] { padding-right: 46px; }
.auth-field > .ctl > select[b-7rmeuafbbt] { cursor: pointer; padding-right: 38px; }

/* Native select caret, drawn so the closed control matches the text inputs' right inset. */
.auth-field > .ctl > select[b-7rmeuafbbt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.auth-field > .ctl > input:focus[b-7rmeuafbbt],
.auth-field > .ctl > select:focus[b-7rmeuafbbt] {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-field > .ctl > input[b-7rmeuafbbt]::placeholder { color: var(--faint); }

/* Trailing button (show password / new security question) — centred on the control, inside its
   frame, so its tooltip points at the control it belongs to. */
.auth-field > .ctl > .peek[b-7rmeuafbbt] {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; background: none; color: var(--faint);
    display: grid; place-items: center; cursor: pointer; border-radius: 8px; z-index: 1;
}
.auth-field > .ctl > .peek:hover[b-7rmeuafbbt] { color: var(--ink); background: var(--surface); }

.auth-btn[b-7rmeuafbbt] {
    display: block; width: 100%; height: 48px; margin-top: 20px;
    border: none; border-radius: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-size: 15px; font-weight: 650; letter-spacing: .01em; font-family: inherit;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: transform .12s, box-shadow .15s, opacity .15s;
}
.auth-btn:hover:not(:disabled)[b-7rmeuafbbt] { transform: translateY(-1px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 48%, transparent); }
.auth-btn:active:not(:disabled)[b-7rmeuafbbt] { transform: translateY(0); }
.auth-btn:disabled[b-7rmeuafbbt] { opacity: .65; cursor: default; }

.auth-link[b-7rmeuafbbt] { width: 100%; margin-top: 12px; border: none; background: none; color: var(--muted);
    font-size: 13px; cursor: pointer; padding: 6px; border-radius: 8px; font-family: inherit; }
.auth-link:hover[b-7rmeuafbbt] { color: var(--accent); }

.auth-alert[b-7rmeuafbbt] { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c;
    border: 1px solid color-mix(in srgb, #dc2626 30%, transparent); border-radius: 10px;
    padding: 10px 13px; font-size: 13px; margin-bottom: 16px; }

/* Why the user is back at the login page (idle timeout / expired token) — informational, not an error.

   QA #2413 C: it clears itself after 6s. Done as an animation rather than a C# timer on purpose —
   there is no renderer callback to race against disposal, and the existing component tests, which
   assert on .auth-notice the moment it renders, keep passing untouched. Every box property collapses
   with the opacity so the card reclaims the space instead of leaving a 56px hole above the fields. */
.auth-notice[b-7rmeuafbbt] { background: color-mix(in srgb, #0ea5e9 12%, transparent); color: #0369a1;
    border: 1px solid color-mix(in srgb, #0ea5e9 30%, transparent); border-radius: 10px;
    padding: 10px 13px; font-size: 13px; margin-bottom: 16px;
    overflow: hidden; max-height: 120px;
    animation: auth-notice-dismiss-b-7rmeuafbbt .45s ease-in 6s forwards; }

@keyframes auth-notice-dismiss-b-7rmeuafbbt {
    to { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
         border-top-width: 0; border-bottom-width: 0; visibility: hidden; }
}

.qr-wrap[b-7rmeuafbbt] { display: grid; place-items: center; margin: 4px 0 14px; }
.qr-wrap img[b-7rmeuafbbt] { width: 184px; height: 184px; border: 1px solid var(--border); border-radius: 12px;
    background: #fff; padding: 6px; }
.manual[b-7rmeuafbbt] { font-size: 12px; color: var(--muted); text-align: center; margin: 0 0 16px; }
.manual code[b-7rmeuafbbt] { color: var(--ink); background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 3px 7px; font-size: 12px; word-break: break-all; }

@media (prefers-color-scheme: dark) {
    .auth-alert[b-7rmeuafbbt] { color: #fca5a5; }
    .auth-notice[b-7rmeuafbbt] { color: #7dd3fc; }
}
:root[data-theme="dark"] .auth-alert[b-7rmeuafbbt] { color: #fca5a5; }
:root[data-theme="dark"] .auth-notice[b-7rmeuafbbt] { color: #7dd3fc; }
/* /Pages/MarksFoil.razor.rz.scp.css */
.err-banner[b-jnhdwd4440] {
    margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
    background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b);
}

.head-actions[b-jnhdwd4440] { display: flex; align-items: center; gap: 10px; }

/* Cascade pickers stack their label above the control so five of them wrap cleanly. */
.toolbar label[b-jnhdwd4440] { flex-direction: column; align-items: flex-start; gap: 4px; }
.toolbar .session-select[b-jnhdwd4440],
.toolbar .course-select[b-jnhdwd4440] {
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
    background: transparent; color: inherit; min-width: 200px;
}
.toolbar .search[b-jnhdwd4440] { flex: 0 0 260px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: transparent; color: inherit; }
.toolbar .count[b-jnhdwd4440] { margin-left: auto; }

.card h3[b-jnhdwd4440] { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.grid td.nm[b-jnhdwd4440] { font-weight: 600; text-align: left; }

h5[b-jnhdwd4440] { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
ul[b-jnhdwd4440] { margin: 0 0 12px 18px; }
li[b-jnhdwd4440] { font-size: 13px; margin-bottom: 6px; }
/* /Pages/ModerationRules.razor.rz.scp.css */
.cand-head[b-lctv13omo3] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-lctv13omo3] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-lctv13omo3] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-lctv13omo3] { color: var(--ink); }

.card[b-lctv13omo3] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.group-head[b-lctv13omo3] { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              color: var(--faint); margin-bottom: 12px; }

.toolbar[b-lctv13omo3] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-lctv13omo3] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-lctv13omo3] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                  border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; min-width: 160px; }
.toolbar select:focus[b-lctv13omo3] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-lctv13omo3] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-lctv13omo3] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-lctv13omo3] { background: var(--track); }
.btn.primary[b-lctv13omo3] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-lctv13omo3] { filter: brightness(1.06); background: var(--accent); }
.btn.ghost[b-lctv13omo3] { background: transparent; }
.btn:disabled[b-lctv13omo3] { opacity: .55; cursor: default; }

.staged[b-lctv13omo3] { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.staged li[b-lctv13omo3] { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px;
             padding: 8px 12px; font-size: 13px; color: var(--ink); }
.staged .nm[b-lctv13omo3] { font-weight: 600; }

.form-actions[b-lctv13omo3] { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.confirm-msg[b-lctv13omo3] { color: #c02b3c; font-size: 12.5px; font-weight: 600; }

/* The grid now carries legacy's 12 rule columns (+ Total Marks), so it scrolls sideways rather than
   letting the page body scroll. Rule cells are centred as on main. */
.table-scroll[b-lctv13omo3] { overflow-x: auto; }
.grid th.ta-c[b-lctv13omo3], .grid td.ta-c[b-lctv13omo3] { text-align: center; white-space: nowrap; }
.grid th.ta-r[b-lctv13omo3], .grid td.ta-r[b-lctv13omo3] { text-align: right; white-space: nowrap; }
.grid[b-lctv13omo3] { width: 100%; border-collapse: collapse; }
.grid thead th[b-lctv13omo3] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-lctv13omo3] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-lctv13omo3] { border-bottom: none; }
.grid tbody tr:hover td[b-lctv13omo3] { background: var(--surface-2); }
.grid .nm[b-lctv13omo3] { font-weight: 600; }

.pad[b-lctv13omo3] { padding: 22px 6px; }
.sub[b-lctv13omo3] { color: var(--muted); font-size: 13px; }

.banner[b-lctv13omo3] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-lctv13omo3] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-lctv13omo3] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-lctv13omo3] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* --- Moderation Rules specifics --- */

/* Mode radio (legacy rblAssignOption): the two rule modes are mutually exclusive lists, not a filter. */
.mode-row[b-lctv13omo3] { display: flex; align-items: center; gap: 24px; padding: 4px 6px 2px; }
.mode-opt[b-lctv13omo3] { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mode-opt input[b-lctv13omo3] { accent-color: var(--accent); }

.rule-form[b-lctv13omo3] { display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 2px; }
.rule-form .field[b-lctv13omo3] { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
/* Legacy renders Stream|Degree|AYear and Course as two col-sm-6 halves on one row; they stack on
   narrow screens the way col-xs-12 does. */
.rule-form .field-row[b-lctv13omo3] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 18px; align-items: end; max-width: 860px; }
.rule-form .field-row .field[b-lctv13omo3] { max-width: none; }
.rule-form .field > label[b-lctv13omo3] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rule-form .field.check[b-lctv13omo3] { max-width: none; }
.rule-form .field.check > label[b-lctv13omo3] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.rule-form select[b-lctv13omo3], .rule-form input.search[b-lctv13omo3] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.rule-form select:focus[b-lctv13omo3], .rule-form input.search:focus[b-lctv13omo3] { outline: 2px solid var(--accent); outline-offset: -1px; }
.rule-form select:disabled[b-lctv13omo3] { opacity: .55; cursor: default; }

/* Required-field asterisk: reserve the glyph's width so labels stay optically aligned. */
.req[b-lctv13omo3] { color: #c02b3c; font-weight: 700; margin-left: 2px; }

/* Fields the update SP cannot change (course / mode / marks while editing) read as values, not inputs. */
.fixed-val[b-lctv13omo3] { margin: 0; padding: 7px 0; font-size: 13px; font-weight: 600; color: var(--ink); }

/* The band editor inside the Add/Update popup. Five columns: Sr. No., the rule label (which is where
   the required/optional distinction is stated), then From / To / Papers. Rules 1-2 are tinted and
   3-4 are left plain, so which rows must be filled is visible before reading a single asterisk. */
.bands[b-lctv13omo3] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Fixed columns for the three value boxes. They hold at most "99.99", so sizing them like text
   fields is what pushed the row past the panel and put a horizontal scrollbar under the popup.
   The label column takes the slack and is allowed to shrink (minmax(0,...)) so nothing overflows. */
.band-head[b-lctv13omo3], .band-row[b-lctv13omo3] {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 96px 96px 64px;
    gap: 12px; align-items: center; }
.band-head[b-lctv13omo3] { padding: 0 10px 2px; }
.band-head span:nth-child(n+3)[b-lctv13omo3] { text-align: right; }
.band-head span[b-lctv13omo3] { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.band-no[b-lctv13omo3] { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.band-row[b-lctv13omo3] { padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; }
.band-row.required[b-lctv13omo3] { background: color-mix(in srgb, var(--accent) 5%, transparent);
                     border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.band-row.optional[b-lctv13omo3] { background: var(--surface-2); }

/* A row states its own faults the moment it has any, so the overlap and ordering rules are learnable
   from the form instead of from the dialog that used to be the only place they appeared. */
.band-row.invalid[b-lctv13omo3] { background: color-mix(in srgb, var(--danger, #d92d20) 7%, transparent);
                    border-color: color-mix(in srgb, var(--danger, #d92d20) 40%, transparent); }
.band-row.invalid input.search.num[b-lctv13omo3] { border-color: color-mix(in srgb, var(--danger, #d92d20) 55%, transparent); }

/* The read-back line spans the whole row, under the boxes it describes. */
.band-say[b-lctv13omo3] { grid-column: 1 / -1; margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px;
            font-size: 12px; line-height: 1.4; }
.band-say:empty[b-lctv13omo3] { display: none; }
.band-ok[b-lctv13omo3] { color: var(--muted); }
.band-err[b-lctv13omo3] { color: var(--danger, #d92d20); font-weight: 600; }

.band-clear[b-lctv13omo3] { display: flex; justify-content: flex-end; }
.btn.ghost.clear-band[b-lctv13omo3] { padding: 3px 8px; font-size: 11.5px; line-height: 1.4; }

.band-tag[b-lctv13omo3] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.band-tag .opt[b-lctv13omo3] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--faint); background: var(--track); border-radius: 999px; padding: 2px 7px; }

/* Numeric bands read as data: right-aligned, tabular, and never wider than the value can be. */
.rule-form input.search.num[b-lctv13omo3] { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }

.form-intro[b-lctv13omo3] { margin: 0 0 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.band-note[b-lctv13omo3] { margin: 2px 0 0; font-size: 12px; color: var(--faint); }

/* The mode is fixed for the life of the form, so it reads as a chip rather than pretending to be
   an editable value sitting in the same column as the pickers above it. */
.mode-chip[b-lctv13omo3] { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px;
             font-weight: 700; color: var(--accent);
             background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Tighter rhythm inside the popup: the inline form could afford 14px everywhere, a dialog cannot. */
.rule-form[b-lctv13omo3] { gap: 12px; padding: 2px 2px 0; }
.rule-form .field[b-lctv13omo3] { max-width: none; }
.rule-form .field-row[b-lctv13omo3] { max-width: none; gap: 12px 18px; }
.rule-form .fixed-val[b-lctv13omo3] { padding: 2px 0; }

.grid-toolbar[b-lctv13omo3] { margin-bottom: 14px; }
.grid-toolbar input.search[b-lctv13omo3] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; min-width: 220px; }
.grid-toolbar input.search:focus[b-lctv13omo3] { outline: 2px solid var(--accent); outline-offset: -1px; }

.pager[b-lctv13omo3] { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 14px; }
.pageinfo[b-lctv13omo3] { font-variant-numeric: tabular-nums; }

.ta-r[b-lctv13omo3] { text-align: right; }

/* Action dropdown = shared <ActionMenu> (legacy MainView "Action" button holding New + Export). */

/* QA: "Increase the size of the add moderator rule popup; it still shows scrolling."
   The panel is now xl (1280px vs 760px), which lets the cascade fields sit on one row and gives the
   band columns their full width. The rest of the scrolling was vertical padding: the band rows, the
   read-back lines and the gaps between them each cost height four times over, so they are tightened
   here rather than the popup simply being made wider. */
.rule-form[b-lctv13omo3] { gap: 10px; }
.rule-form .form-intro[b-lctv13omo3] { margin-bottom: 0; }
.bands[b-lctv13omo3] { gap: 4px; }
.band-row[b-lctv13omo3] { padding: 6px 10px; }
.band-say[b-lctv13omo3] { margin-top: 2px; }
.band-note[b-lctv13omo3] { margin-top: 0; }

/* With the extra width the whole cascade fits on one line instead of wrapping to three. */
.rule-form .field-row[b-lctv13omo3] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* /Pages/ModeratorPaperCount.razor.rz.scp.css */
.head-actions[b-76qiyrmgxm] { display: flex; align-items: center; gap: 10px; }

/* Course picker stacks its label above the control, matching the other report toolbars. */
.toolbar label[b-76qiyrmgxm] { flex-direction: column; align-items: flex-start; gap: 4px; }
.toolbar .crs[b-76qiyrmgxm] {
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
    background: transparent; color: inherit; min-width: 240px;
}
.toolbar .search[b-76qiyrmgxm] { flex: 0 0 280px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: transparent; color: inherit; }
.toolbar .count[b-76qiyrmgxm] { margin-left: auto; }

.grid td.nm[b-76qiyrmgxm] { font-weight: 600; text-align: left; }

h5[b-76qiyrmgxm] { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
ul[b-76qiyrmgxm] { margin: 0 0 12px 18px; }
li[b-76qiyrmgxm] { font-size: 13px; margin-bottom: 6px; }
/* /Pages/MonthwiseBooklet.razor.rz.scp.css */
.fld[b-t1z6w40vny] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-t1z6w40vny] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.head-actions[b-t1z6w40vny] {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* /Pages/ObjectiveMarks.razor.rz.scp.css */
.cand-head[b-xun59s9rcq] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-xun59s9rcq] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-xun59s9rcq] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-xun59s9rcq] { color: var(--ink); }

.card[b-xun59s9rcq] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-xun59s9rcq] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-xun59s9rcq] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-xun59s9rcq] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-xun59s9rcq] { outline: 2px solid var(--accent); outline-offset: -1px; }

.btn[b-xun59s9rcq] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-xun59s9rcq] { background: var(--track); }
.btn.primary[b-xun59s9rcq] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-xun59s9rcq] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-xun59s9rcq] { opacity: .55; cursor: default; }

/* File picker: the native input is stretched invisibly over the styled label-button. */
.file-btn[b-xun59s9rcq] { position: relative; overflow: hidden; }
.file-btn[b-xun59s9rcq]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-xun59s9rcq] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.hint[b-xun59s9rcq] { margin: 12px 2px 0; color: #c02b3c; font-size: 12.5px; font-weight: 600; }
.pick-hint[b-xun59s9rcq] { margin: 12px 2px 0; }

.panel-head[b-xun59s9rcq] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; padding: 0 2px 10px; }

.grid[b-xun59s9rcq] { width: 100%; border-collapse: collapse; }
.grid thead th[b-xun59s9rcq] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-xun59s9rcq] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-xun59s9rcq] { border-bottom: none; }
.grid tbody tr:hover td[b-xun59s9rcq] { background: var(--surface-2); }
.grid .nm[b-xun59s9rcq] { font-weight: 600; }
.grid .ok[b-xun59s9rcq] { color: var(--good); font-weight: 600; }
.grid .err[b-xun59s9rcq] { color: #c02b3c; font-weight: 600; }

/* Candidate grid toolbar (search + page size + export + Total Count), matching the roster pages. */
.grid-toolbar[b-xun59s9rcq] { gap: 10px; }
.grid-toolbar .search-ico[b-xun59s9rcq] { display: inline-flex; color: var(--faint); }
.grid-toolbar .search[b-xun59s9rcq] { flex: 1 1 240px; min-width: 200px; border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.grid-toolbar .search:focus[b-xun59s9rcq] { outline: 2px solid var(--accent); outline-offset: -1px; }
.grid-toolbar .count[b-xun59s9rcq] { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.grid-toolbar .count b[b-xun59s9rcq] { color: var(--ink); }
.page-size select[b-xun59s9rcq] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.btn.ghost[b-xun59s9rcq] { background: transparent; }

.table-scroll[b-xun59s9rcq] { overflow-x: auto; }
.grid .ta-c[b-xun59s9rcq] { text-align: center; }
.grid thead th.ta-c[b-xun59s9rcq] { text-align: center; }

.pager[b-xun59s9rcq] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }
.pager span[b-xun59s9rcq] { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.pad[b-xun59s9rcq] { padding: 22px 6px; }
.sub[b-xun59s9rcq] { color: var(--muted); font-size: 13px; }

.banner[b-xun59s9rcq] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-xun59s9rcq] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-xun59s9rcq] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-xun59s9rcq] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Help modal (legacy HelpDiv) — mirrors the InternalMarksView / AssignSubjectMaster treatment. */
.cand-head .head-actions[b-xun59s9rcq] { display: flex; align-items: center; gap: 12px; }
.btn.ghost[b-xun59s9rcq] { background: var(--surface-2); }
h5[b-xun59s9rcq] { margin: 14px 0 6px; }
ul[b-xun59s9rcq] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }

/* The filter row now carries a 6-level cascade — stack each label so it wraps cleanly. */
.toolbar label[b-xun59s9rcq] { flex-direction: column; align-items: flex-start; gap: 4px; }
.toolbar select[b-xun59s9rcq] { min-width: 150px; }
.grid-toolbar[b-xun59s9rcq] { flex-direction: row; align-items: center; }
.grid-toolbar label[b-xun59s9rcq] { flex-direction: row; align-items: center; gap: 6px; }
/* /Pages/ObserverPermissions.razor.rz.scp.css */
.filter-bar[b-83x9nvqs1x] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
}
.fld[b-83x9nvqs1x] { display: flex; flex-direction: column; gap: 4px; }
.fld.grow[b-83x9nvqs1x] { flex: 1 1 220px; }
.fld > span[b-83x9nvqs1x] { font-size: .78rem; color: var(--muted); }
.fld select[b-83x9nvqs1x], .fld input[b-83x9nvqs1x] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
.col-access[b-83x9nvqs1x] { width: 120px; text-align: center; }
.col-menu[b-83x9nvqs1x] { width: 34%; color: var(--muted); font-weight: 600; }
.err-banner[b-83x9nvqs1x] {
    margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
    background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b);
}

.cand-head[b-83x9nvqs1x] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.head-actions[b-83x9nvqs1x] { display: flex; align-items: center; gap: 8px; }

.btn[b-83x9nvqs1x] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
       display: inline-flex; align-items: center; gap: 5px; transition: background .12s; }
.btn:hover[b-83x9nvqs1x] { background: var(--track); }
.btn.primary[b-83x9nvqs1x] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-83x9nvqs1x] { filter: brightness(1.06); }

/* Help ("Observer Persmission Page Description") — legacy used a scrollable panel, so the body
   scrolls inside a bounded height rather than pushing the dialog past the viewport. */
.help-modal[b-83x9nvqs1x] { max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.help-head[b-83x9nvqs1x] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none;
             padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.help-head h2[b-83x9nvqs1x] { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.icon-x[b-83x9nvqs1x] { border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px;
          padding: 5px; display: inline-flex; flex: none; }
.icon-x:hover[b-83x9nvqs1x] { background: var(--surface-2); color: var(--ink); }
.help-body[b-83x9nvqs1x] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 0; }
.help-body h3[b-83x9nvqs1x] { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.help-body ul[b-83x9nvqs1x] { margin: 0; padding-left: 20px; }
.help-body li[b-83x9nvqs1x] { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* QA A3/A4: serial column plus left-aligned totals above the grid. */
.grid-toolbar[b-83x9nvqs1x] { display: flex; justify-content: flex-start; gap: 18px; margin-bottom: 10px; }
.grid-toolbar .count[b-83x9nvqs1x] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.grid-toolbar .count b[b-83x9nvqs1x] { color: var(--ink); }
.col-sr[b-83x9nvqs1x] { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

/* Legacy "Show Permitted Pages" toggle, sitting inline with the observer picker and search. */
.permitted-toggle[b-83x9nvqs1x] { flex: none; }
.permitted-toggle .toggle-row[b-83x9nvqs1x] { display: inline-flex; align-items: center; gap: 8px; height: 38px; }
.permitted-toggle .toggle-row label[b-83x9nvqs1x] { font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
.permitted-toggle input[type="checkbox"][b-83x9nvqs1x] { width: 16px; height: 16px; cursor: pointer; }

/* Save confirmation. QA A1 follow-up: this began as a bottom-right toast (the style the
   Auto-Evaluation Result page uses) and was reported as too easy to miss — the admin is looking at
   the checkbox they just clicked, in the middle of the grid, not at the corner of the screen. It is
   now centred over the page like a confirmation dialog.

   Deliberately NOT a real modal: no backdrop and pointer-events:none, so it never blocks the next
   click. Ticking five pages in a row must stay five clicks, which a dismissable dialog would turn
   into ten. It still clears itself after two seconds. */
.toast-layer[b-83x9nvqs1x] {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.toast[b-83x9nvqs1x] {
    padding: 18px 28px; border-radius: var(--radius); box-shadow: var(--shadow);
    font-size: 15px; font-weight: 600; color: #fff; background: var(--ink);
    text-align: center; max-width: 460px;
}
.toast.success[b-83x9nvqs1x] { background: var(--good, #2e7d32); }
/* /Pages/PhotocopyView.razor.rz.scp.css */
/* The candidate's photocopy view. Deliberately a near-copy of BookletViewer.razor.css: the booklet must
   look identical to what staff see, and Blazor's scoped CSS does not cross component boundaries, so the
   annotation rules have to be restated here rather than inherited. Two differences, both intentional:
   there is no Download control, and printing is blocked unconditionally (the admin viewer exempts its
   annotated mode because legacy showed a Print button there; a candidate never had one). */

.cand-head[b-htzjxobnf6] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cand-head .sub[b-htzjxobnf6] { margin: 0; color: var(--muted); font-size: 13.5px; }

.validity[b-htzjxobnf6] { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }

.card[b-htzjxobnf6] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.viewer-card[b-htzjxobnf6] { padding: 16px 12px; }

.pad[b-htzjxobnf6] { padding: 22px 6px; }
.sub[b-htzjxobnf6] { color: var(--muted); }

.err-head[b-htzjxobnf6] { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink);
            display: flex; align-items: center; gap: 8px; }

/* Rendered pages. user-select/-webkit-touch-callout remove the casual copy and long-press-save routes;
   see osm-booklet-viewer.js for why this is a deterrent, not a protection. */
.booklet-pages[b-htzjxobnf6] { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.booklet-pages[b-htzjxobnf6]  .bk-page { width: 100%; max-width: 1000px; }
.booklet-pages[b-htzjxobnf6]  .bk-page-no { color: var(--faint); font-size: 11px; font-weight: 700;
                                    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.booklet-pages[b-htzjxobnf6]  canvas { width: 100%; height: auto; display: block; border: 1px solid var(--border);
                               border-radius: 6px; background: #fff;
                               user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Canvas + annotation overlay share one positioned box so the marks land on the page they belong to.
   padding-top holds a not-yet-rendered page's height (set inline from the first page's aspect ratio), so
   the scrollbar is correct from the start and pages don't jump as they rasterise. */
.booklet-pages[b-htzjxobnf6]  .bk-page-stack { position: relative; line-height: 0; height: 0; }
.booklet-pages[b-htzjxobnf6]  .bk-page-stack:has(canvas) { height: auto; padding-top: 0 !important; }
.booklet-pages[b-htzjxobnf6]  .bk-annotations { position: absolute; inset: 0; width: 100%; height: 100%;
                                        pointer-events: none; }

/* The awarded-mark box — the computed result of legacy's
   "rectangle btn-clr-ant btn-anotn btn btn-circle zeroantation" (Answersheet.css), where .zeroantation's
   !important rules beat .btn-circle and yield a 37x25 rounded rectangle, not a circle. */
.booklet-pages[b-htzjxobnf6]  .bk-mark {
    background-color: #56b48c; color: #fff; border: 1px solid #459875;
    width: 37px; height: 25px; border-radius: 6px; padding: 0;
    font-weight: bold; font-size: 17px; line-height: 23px; text-align: center;
    margin-top: 2px; overflow: hidden; box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

/* foreignObject children inherit the zeroed line-height otherwise, collapsing the question number. */
.booklet-pages[b-htzjxobnf6]  foreignObject div { line-height: 1.15; }

/* Nothing of the booklet reaches the printed page, which is what makes Ctrl+P useless even though a
   keydown handler can be bypassed. */
@media print {
    .viewer-card .booklet-pages[b-htzjxobnf6],
    .viewer-card .booklet-pages *[b-htzjxobnf6] { display: none !important; }
    .viewer-card[b-htzjxobnf6]::after { content: "Printing answer sheets is not permitted.";
                  display: flex; align-items: center; justify-content: center; padding: 40px 0;
                  font: 600 16px/1.4 system-ui, sans-serif; color: #000; }
}
/* /Pages/QpManagement.razor.rz.scp.css */
.hub-head[b-ifayvi7xq1] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-ifayvi7xq1] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-ifayvi7xq1] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-ifayvi7xq1] { padding: 22px; }
.sub[b-ifayvi7xq1] { color: var(--faint); font-size: 13px; }

.group .group-head[b-ifayvi7xq1] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-ifayvi7xq1] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-ifayvi7xq1] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-ifayvi7xq1] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-ifayvi7xq1] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-ifayvi7xq1]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-ifayvi7xq1] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-ifayvi7xq1]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-ifayvi7xq1]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-ifayvi7xq1] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-ifayvi7xq1] { font-size: 14px; font-weight: 620; }
.txt small[b-ifayvi7xq1] { color: var(--faint); font-size: 12px; }
.arrow[b-ifayvi7xq1] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-ifayvi7xq1] { color: var(--accent); }

@media (max-width: 620px) {
  .hub-head[b-ifayvi7xq1] { flex-direction: column; align-items: stretch; }
  .hub-head[b-ifayvi7xq1]  .search-box .search { width: 100%; }
}

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-ifayvi7xq1] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-ifayvi7xq1] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-ifayvi7xq1]  .search-box { align-self: flex-start; }
.hub-head[b-ifayvi7xq1]  .search-box .search { width: min(420px, 100%); }
/* /Pages/QuestionWiseDetails.razor.rz.scp.css */
.cand-head[b-izwp7ql3me] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-izwp7ql3me] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-izwp7ql3me] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-izwp7ql3me] { transform:rotate(180deg); }
.card[b-izwp7ql3me] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-izwp7ql3me] { display:flex; align-items:center; gap:10px; }
/* Main cascade picker card (Stream|Degree|AYear -> Course -> Semester -> Subject [-> Exam]).
   Scoped to .picker so the bulk panel's own filter row is untouched. */
.toolbar-wrap[b-izwp7ql3me] { flex-wrap:wrap; }
.picker .crs[b-izwp7ql3me] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; max-width:220px; }
.picker .crs:disabled[b-izwp7ql3me] { opacity:.5; cursor:default; }
.toolbar .search[b-izwp7ql3me] { flex:0 0 260px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.search-ico[b-izwp7ql3me] { color:var(--muted); }
.count[b-izwp7ql3me] { margin-left:auto; color:var(--muted); font-size:13px; }
.filters[b-izwp7ql3me] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filters .fl[b-izwp7ql3me] { color:var(--muted); font-size:13px; }
.filters .change[b-izwp7ql3me] { margin-left:auto; }
.slot-select[b-izwp7ql3me] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.search-txt[b-izwp7ql3me] { flex:0 0 220px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.card h3[b-izwp7ql3me] { font-size:15px; font-weight:700; margin-bottom:10px; }
.grid[b-izwp7ql3me] { width:100%; border-collapse:collapse; }
.grid th[b-izwp7ql3me], .grid td[b-izwp7ql3me] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-izwp7ql3me] { color:var(--muted); font-weight:600; }
.grid .nm[b-izwp7ql3me] { font-weight:600; }
.pad[b-izwp7ql3me] { padding:14px; }
.sub[b-izwp7ql3me] { color:var(--muted); font-size:13px; }
.btn[b-izwp7ql3me] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-izwp7ql3me] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-izwp7ql3me] { background:transparent; }
.btn:disabled[b-izwp7ql3me] { opacity:.5; cursor:default; }
/* Bulk panel: this bar sits below the shared Pager and carries the export action row (export
   button pushed to the right). It is not a pager itself — no prev/next, just count + action. */
.export-bar[b-izwp7ql3me] { display:flex; align-items:center; gap:10px; margin-top:10px; }
.export-bar .bulk-export[b-izwp7ql3me] { margin-left:auto; }
.export-bar .count[b-izwp7ql3me] { margin-left:auto; }
.export-bar .count + .bulk-export[b-izwp7ql3me] { margin-left:16px; }
.grid input[type="checkbox"][b-izwp7ql3me] { width:15px; height:15px; accent-color:var(--accent); }

/* Legacy QPReportGridView colour semantics (literal legacy colours; Help modal aspx:289-327).
   The classes are applied by DynamicGrid, so ::deep pierces the scope. Order matters: the
   OrangeRed diff colour must win over band/comment backgrounds' text colour. */
.card[b-izwp7ql3me]  tr.qw-band-a td { background:lightblue; color:#1f2430; }
.card[b-izwp7ql3me]  tr.qw-band-b td { background:lightskyblue; color:#1f2430; }
.card[b-izwp7ql3me]  td.qw-invalid { background:#FFE4E1; color:#1f2430; } /* ultra light pink = Invalid Comment */
.card[b-izwp7ql3me]  td.qw-valid { background:#D8FFD8; color:#1f2430; }   /* light green = Valid Comment */
.card[b-izwp7ql3me]  td.qw-diff { color:orangered; font-weight:600; }     /* evaluators differ on this mark */

/* Help legend card. */
.help-card .legend[b-izwp7ql3me] { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.help-card .swatch[b-izwp7ql3me] { display:inline-block; width:26px; height:14px; border:1px solid var(--border); border-radius:3px; vertical-align:middle; margin-right:6px; }
.help-card .swatch-band[b-izwp7ql3me] { background:lightblue; }
.help-card .swatch-diff[b-izwp7ql3me] { color:orangered; font-weight:700; width:auto; height:auto; border:none; background:transparent; }
.help-card .swatch-invalid[b-izwp7ql3me] { background:#FFE4E1; }
.help-card .swatch-valid[b-izwp7ql3me] { background:#D8FFD8; }
/* /Pages/ReassignExaminer.razor.rz.scp.css */

/* Legacy cascade filters — label above its control, matching the sibling evaluation pages. */
.form.cascade[b-kprxgaxgsm] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.form label[b-kprxgaxgsm] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-kprxgaxgsm] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-kprxgaxgsm] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-kprxgaxgsm] { opacity: .55; cursor: not-allowed; }

/* Reassign popup — the new-examiner controls belong in a dialog, not stacked under the grid
   (matching Assign Examiner (Manual)). */
.assign-bar[b-kprxgaxgsm] { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.assign-bar .sel-note[b-kprxgaxgsm] { font-size: 13px; color: var(--muted); }
.assign-bar .btn[b-kprxgaxgsm] { margin-left: auto; }
/* app.css sets .assign-panel to a flex row (align-items: flex-end); left un-overridden, the "N
   paper(s) selected." line and the assign-row/hr below it laid out side by side instead of stacked,
   with the short paragraph sinking to the bottom of its taller sibling. Stack them like Assign
   Examiner (Manual) does. */
.assign-panel[b-kprxgaxgsm] { display: block; }
.assign-panel .sub[b-kprxgaxgsm] { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

/* Dialog form. These controls previously sat in an inline card and had no styling of their own —
   inside the modal that left them unstyled and jumbled, so the layout is defined explicitly here. */
.assign-row[b-kprxgaxgsm] { display: grid; gap: 14px; }
.field[b-kprxgaxgsm] { min-width: 0; }
.field label[b-kprxgaxgsm] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input[b-kprxgaxgsm], .field select[b-kprxgaxgsm] { width: 100%; box-sizing: border-box;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.field input:focus[b-kprxgaxgsm], .field select:focus[b-kprxgaxgsm] { outline: 2px solid var(--accent); outline-offset: -1px; }
.field input:disabled[b-kprxgaxgsm], .field select:disabled[b-kprxgaxgsm] { opacity: .55; cursor: not-allowed; }

/* New-examiner autocomplete — same ac-wrap/ac-input/ac-list pattern as Assign Examiner (Manual), so
   the two pages' examiner pickers read as one control instead of two different UIs. No Find button:
   typing alone searches (debounced), matching Assign Examiner (Manual). */
.ac-wrap[b-kprxgaxgsm] { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-label[b-kprxgaxgsm] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-kprxgaxgsm] { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-input:focus[b-kprxgaxgsm] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-kprxgaxgsm] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 260px; z-index: 20; margin-top: 2px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 260px; overflow-y: auto; }
/* Each match shows the examiner's name and email as two lines, not one squashed "Name — email" string. */
.ac-item[b-kprxgaxgsm] { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0;
    border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); padding: 8px 10px;
    cursor: pointer; }
.ac-item:last-child[b-kprxgaxgsm] { border-bottom: 0; }
.ac-item:hover[b-kprxgaxgsm], .ac-item:focus-visible[b-kprxgaxgsm] { background: var(--surface-2); }
.ac-item-name[b-kprxgaxgsm] { font-size: 13px; font-weight: 600; }
.ac-item-email[b-kprxgaxgsm] { font-size: 12px; color: var(--muted); }
/* Searching… / No examiners found. — same slot the results list occupies, so nothing jumps. */
.ac-status[b-kprxgaxgsm] { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.ac-hint[b-kprxgaxgsm] { font-size: 12px; color: #c02b3c; }

/* Divider above the footer buttons, matching Assign Examiner (Manual)'s popup chrome. */
.assign-panel-divider[b-kprxgaxgsm] { border: none; border-top: 1px solid var(--border); margin: 18px 0 0; }
/* /Pages/ReassignModerator.razor.rz.scp.css */
.cand-head[b-cj48gf1q1p] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-cj48gf1q1p] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-cj48gf1q1p] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-cj48gf1q1p] { color: var(--ink); }

.card[b-cj48gf1q1p] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-cj48gf1q1p] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-cj48gf1q1p] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-cj48gf1q1p], .toolbar input[b-cj48gf1q1p] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-cj48gf1q1p], .toolbar input:focus[b-cj48gf1q1p] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .subject[b-cj48gf1q1p], .toolbar .source-moderator[b-cj48gf1q1p], .toolbar .eval-last-date[b-cj48gf1q1p] { max-width: 260px; }
.toolbar .count[b-cj48gf1q1p] { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.toolbar .filter-note[b-cj48gf1q1p] { color: var(--faint); font-size: 12.5px; }
.toolbar .warn[b-cj48gf1q1p] { color: var(--faint); font-size: 12px; }
.grid-toolbar[b-cj48gf1q1p] { margin-bottom: 12px; }
.toolbar .search[b-cj48gf1q1p] { min-width: 240px; }

.btn[b-cj48gf1q1p] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-cj48gf1q1p] { background: var(--track); }
.btn.primary[b-cj48gf1q1p] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-cj48gf1q1p] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-cj48gf1q1p] { opacity: .55; cursor: default; }

.grid-title[b-cj48gf1q1p] { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }

.table-scroll[b-cj48gf1q1p] { overflow-x: auto; }
.grid[b-cj48gf1q1p] { width: 100%; border-collapse: collapse; }
.grid thead th[b-cj48gf1q1p] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-cj48gf1q1p] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child td[b-cj48gf1q1p] { border-bottom: none; }
.grid tbody tr:hover td[b-cj48gf1q1p] { background: var(--surface-2); }
.grid .nm[b-cj48gf1q1p] { font-weight: 600; }
.ta-r[b-cj48gf1q1p] { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th.ta-r[b-cj48gf1q1p] { text-align: right; }
.row-check[b-cj48gf1q1p] { cursor: pointer; }

.pad[b-cj48gf1q1p] { padding: 22px 6px; }
.sub[b-cj48gf1q1p] { color: var(--muted); font-size: 13px; }

.banner[b-cj48gf1q1p] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-cj48gf1q1p] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-cj48gf1q1p] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-cj48gf1q1p] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-cj48gf1q1p] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
.pager .pageinfo[b-cj48gf1q1p] { font-variant-numeric: tabular-nums; }

/* Action bar above the grid — legacy's ReassignDiv, revealed by VisibleStatus() once a row is
   ticked. Same shape as the Reassign Examiner page's .assign-bar. */
.assign-bar[b-cj48gf1q1p] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
              background: color-mix(in srgb, var(--accent) 8%, transparent);
              border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.assign-bar .sel-note[b-cj48gf1q1p] { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: auto; }

/* The tick column carries legacy's "Select" header above the select-all box. */
.grid thead th.sel-col[b-cj48gf1q1p] { text-align: center; line-height: 1.5; }
.grid thead th.sel-col input[b-cj48gf1q1p] { margin-top: 2px; }

/* Inside the reassign popup the picker owns the panel width rather than a fixed 280px. */
.assign-panel[b-cj48gf1q1p] { display: flex; flex-direction: column; gap: 14px; }
.assign-panel .ac-input[b-cj48gf1q1p], .assign-panel .ac-list[b-cj48gf1q1p] { width: 100%; min-width: 0; }
.assign-panel .expiry-note[b-cj48gf1q1p] { margin: 0; font-size: 12.5px; color: var(--muted); }
.req[b-cj48gf1q1p] { color: #c02b3c; margin-right: 3px; }

.assign-panel .assign-row[b-cj48gf1q1p] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.assign-panel label[b-cj48gf1q1p] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.assign-panel select[b-cj48gf1q1p] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; max-width: 260px; }
.assign-panel select:focus[b-cj48gf1q1p] { outline: 2px solid var(--accent); outline-offset: -1px; }
.hint[b-cj48gf1q1p] { margin: 10px 0 0; color: #c02b3c; font-size: 12.5px; }

.toolbar.filters[b-cj48gf1q1p] { row-gap: 10px; }
.toolbar.filters label[b-cj48gf1q1p] { flex-direction: column; align-items: flex-start; gap: 4px; }

.assigned-card .assigned-grid[b-cj48gf1q1p] { width: 100%; }
.worklist-count[b-cj48gf1q1p] { padding: 12px 6px 2px; }

/* Target moderator autocomplete (legacy GetInstituteModeratorForAutocomplete). */
.ac-wrap[b-cj48gf1q1p] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-cj48gf1q1p] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-cj48gf1q1p] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-cj48gf1q1p] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-cj48gf1q1p] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-cj48gf1q1p] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-cj48gf1q1p] { background: var(--surface-2); }
.ac-hint[b-cj48gf1q1p] { font-size: 12px; color: #c02b3c; }
/* /Pages/ReassignReval.razor.rz.scp.css */
.cand-head[b-gkpxjttk1a] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-gkpxjttk1a] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-gkpxjttk1a] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-gkpxjttk1a] { color: var(--ink); }
.head-actions[b-gkpxjttk1a] { display: flex; align-items: center; gap: 12px; }

/* Help modal (legacy HelpDiv). */
.help-modal h5[b-gkpxjttk1a] { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.help-modal ul[b-gkpxjttk1a] { margin: 0 0 8px; padding-left: 20px; }
.help-modal li[b-gkpxjttk1a] { color: var(--muted); font-size: 13px; line-height: 1.6; }

.card[b-gkpxjttk1a] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-gkpxjttk1a] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar h3[b-gkpxjttk1a] { font-size: 15px; font-weight: 700; margin: 0; }
.toolbar label[b-gkpxjttk1a] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-gkpxjttk1a], .toolbar input[type="text"][b-gkpxjttk1a] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-gkpxjttk1a], .toolbar input:focus[b-gkpxjttk1a] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-gkpxjttk1a] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-gkpxjttk1a] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-gkpxjttk1a] { background: var(--track); }
.btn.primary[b-gkpxjttk1a] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-gkpxjttk1a] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-gkpxjttk1a] { opacity: .55; cursor: default; }

.grid[b-gkpxjttk1a] { width: 100%; border-collapse: collapse; }
.grid thead th[b-gkpxjttk1a] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-gkpxjttk1a] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-gkpxjttk1a] { border-bottom: none; }
.grid tbody tr:hover td[b-gkpxjttk1a] { background: var(--surface-2); }
.grid .nm[b-gkpxjttk1a] { font-weight: 600; }
.ta-c[b-gkpxjttk1a] { text-align: center; }

.pad[b-gkpxjttk1a] { padding: 22px 6px; }
.sub[b-gkpxjttk1a] { color: var(--muted); font-size: 13px; }

.banner[b-gkpxjttk1a] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-gkpxjttk1a] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-gkpxjttk1a] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-gkpxjttk1a] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-gkpxjttk1a] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.filters[b-gkpxjttk1a] { margin-bottom: 10px; }
.filters:last-child[b-gkpxjttk1a] { margin-bottom: 0; }
/* Fixed width (not min-width) so picking a longer/shorter option doesn't resize the box and shift
   the row layout -- selects otherwise auto-size to their currently selected option's text (same fix
   already applied on AssignReval1/AssignReval2). */
.filters select[b-gkpxjttk1a] { width: 160px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.filters .search[b-gkpxjttk1a] { flex: 0 0 220px; }

/* Legacy TotalStudentsLbl-style plain bold counter, same as AssignExaminer's/AssignReval1's/
   AssignReval2's own status-card. */
.status-card .count[b-gkpxjttk1a] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-gkpxjttk1a] { font-weight: 700; }

/* Reassign popup (same convention as AssignReval1/AssignReval2's own popup) — the new-examiner picker
   and expiry belong in a dialog, not stacked under the grid. app.css sets .assign-panel to a flex row;
   this stacks the examiner + expiry fields as their own full-width rows instead, leaving the
   autocomplete list room to open without the popup needing an inner scroll. */
.assign-panel[b-gkpxjttk1a] { display: block; }
.assign-panel .selected-note[b-gkpxjttk1a] { margin: 0 0 14px; font-size: 13px; }
.examiner-slots[b-gkpxjttk1a] { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.assign-panel .ac-wrap[b-gkpxjttk1a] { position: relative; min-width: 0; }
.assign-panel .ac-input[b-gkpxjttk1a] { width: 100%; box-sizing: border-box; }
.assign-panel .eval-date input[b-gkpxjttk1a] { display: block; width: 100%; box-sizing: border-box; }
.assign-panel-divider[b-gkpxjttk1a] { border: none; border-top: 1px solid var(--border); margin: 18px 0 0; }

.ac-wrap[b-gkpxjttk1a] { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-label[b-gkpxjttk1a] { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ac-input[b-gkpxjttk1a] { width: 280px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ac-input:focus[b-gkpxjttk1a] { outline: 2px solid var(--accent); outline-offset: -1px; }
.ac-list[b-gkpxjttk1a] { position: absolute; top: 100%; left: 0; width: 100%; min-width: 280px; z-index: 20; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); max-height: 220px; overflow-y: auto; }
.ac-item[b-gkpxjttk1a] { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); padding: 8px 10px; font-size: 13px; cursor: pointer; }
.ac-item:hover[b-gkpxjttk1a] { background: var(--surface-2); }
.ac-hint[b-gkpxjttk1a] { font-size: 12px; color: #c02b3c; }

.eval-date[b-gkpxjttk1a] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.eval-date input[b-gkpxjttk1a] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Outcome popup — replaces the inline banner for every success/error message. */
.popup-msg[b-gkpxjttk1a] { margin: 0 0 18px; text-align: center; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */
/* /Pages/ReassignSubjectMaster.razor.rz.scp.css */
.cand-head[b-wwy0pf3whf] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-wwy0pf3whf] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-wwy0pf3whf] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-wwy0pf3whf] { color: var(--ink); }

.card[b-wwy0pf3whf] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-wwy0pf3whf] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-wwy0pf3whf] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-wwy0pf3whf], .toolbar input:is([type="date"], [data-osm-date])[b-wwy0pf3whf], .toolbar input[type="number"][b-wwy0pf3whf], .toolbar input[type="text"][b-wwy0pf3whf] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-wwy0pf3whf], .toolbar input:focus[b-wwy0pf3whf] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-wwy0pf3whf] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-wwy0pf3whf] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-wwy0pf3whf] { background: var(--track); }
.btn.primary[b-wwy0pf3whf] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-wwy0pf3whf] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-wwy0pf3whf] { opacity: .55; cursor: default; }

.grid[b-wwy0pf3whf] { width: 100%; border-collapse: collapse; }
.grid thead th[b-wwy0pf3whf] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-wwy0pf3whf] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-wwy0pf3whf] { border-bottom: none; }
.grid tbody tr:hover td[b-wwy0pf3whf] { background: var(--surface-2); }
.grid .nm[b-wwy0pf3whf] { font-weight: 600; }
.ta-c[b-wwy0pf3whf] { text-align: center; }

.pad[b-wwy0pf3whf] { padding: 22px 6px; }
.sub[b-wwy0pf3whf] { color: var(--muted); font-size: 13px; }

/* Pager + assign panel (page uses both; the copied sibling had neither — review finding) */
.pager[b-wwy0pf3whf] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }
.pager .count[b-wwy0pf3whf] { color: var(--muted); font-size: 13px; }
.assign-panel[b-wwy0pf3whf] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.assign-panel h3[b-wwy0pf3whf], .card h3[b-wwy0pf3whf] { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* Help + Edit Schedule modals (shared recipe with AttendanceReport/CourseWiseBookletStatus) */
.cand-head .head-actions[b-wwy0pf3whf] { display: flex; align-items: center; gap: 12px; }
.btn.ghost[b-wwy0pf3whf] { background: transparent; }
h5[b-wwy0pf3whf] { margin: 14px 0 6px; }
ul[b-wwy0pf3whf] { margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.edit-field[b-wwy0pf3whf] { display: flex; flex-direction: column; gap: 6px; margin-top: 14px;
              font-size: 12.5px; font-weight: 600; color: var(--muted); }
.edit-field input[b-wwy0pf3whf] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                    border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }

/* Sub-view title rows (View Schedule / View Assigned). `.card .view-title` must outrank `.card h3` above:
   its 10px bottom margin made the title taller than Export/Back and knocked the row off-centre. flex: 1
   pushes the actions to the right; the count sits on its own row below. */
.card .view-title[b-wwy0pf3whf] { font-size: 15px; font-weight: 700; margin: 0; flex: 1; }
.count-row[b-wwy0pf3whf] { margin-top: 10px; }

/* The reassign panel and the "View Assigned Subject Master" filter row both now carry the legacy
   4-level cascade — stack each label so the row wraps cleanly (same recipe as AssignSubjectMaster). */
.assign-panel .toolbar[b-wwy0pf3whf] { row-gap: 12px; }
.assign-panel .toolbar label[b-wwy0pf3whf] { flex-direction: column; align-items: flex-start; gap: 4px; }
.assign-panel select[b-wwy0pf3whf], .assign-panel input[b-wwy0pf3whf] { min-width: 170px; }
.toolbar .aa-search[b-wwy0pf3whf], .toolbar .search[b-wwy0pf3whf] { min-width: 180px; }
/* /Pages/ReEvaluation.razor.rz.scp.css */
.cand-head[b-n8g33hph9e] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-n8g33hph9e] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-n8g33hph9e] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-n8g33hph9e] { transform:rotate(180deg); }
.card[b-n8g33hph9e] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-n8g33hph9e] { display:flex; align-items:flex-end; gap:10px; }
.toolbar .search[b-n8g33hph9e] { width:260px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.search-ico[b-n8g33hph9e] { color:var(--muted); }
.count[b-n8g33hph9e] { margin-left:auto; color:var(--muted); font-size:13px; }
.status-card[b-n8g33hph9e] { display:flex; gap:32px; }
.stat[b-n8g33hph9e] { display:flex; flex-direction:column; }
.stat .lbl[b-n8g33hph9e] { color:var(--muted); font-size:12px; }
.stat .val[b-n8g33hph9e] { font-size:22px; font-weight:700; }
.assign-panel h3[b-n8g33hph9e], .card h3[b-n8g33hph9e] { font-size:15px; font-weight:700; margin-bottom:10px; }
.assign-row[b-n8g33hph9e] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.slot-select[b-n8g33hph9e] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.note[b-n8g33hph9e] { color:var(--muted); font-size:13px; }
.grid[b-n8g33hph9e] { width:100%; border-collapse:collapse; }
.grid th[b-n8g33hph9e], .grid td[b-n8g33hph9e] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-n8g33hph9e] { color:var(--muted); font-weight:600; }
.grid .nm[b-n8g33hph9e] { font-weight:600; }
.pad[b-n8g33hph9e] { padding:14px; }
.sub[b-n8g33hph9e] { color:var(--muted); font-size:13px; }
.btn[b-n8g33hph9e] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-n8g33hph9e] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-n8g33hph9e] { background:transparent; }
.btn:disabled[b-n8g33hph9e] { opacity:.5; cursor:default; }
.table-scroll[b-n8g33hph9e] { overflow-x:auto; }
.pager[b-n8g33hph9e] { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pager .pageinfo[b-n8g33hph9e] { color:var(--muted); font-size:13px; }
.round-select[b-n8g33hph9e] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.req[b-n8g33hph9e] { color:#dc2626; margin-left:2px; }
.banner[b-n8g33hph9e] { border-radius:10px; padding:10px 14px; font-size:13px; margin-top:12px; font-weight:500; }
.banner.err[b-n8g33hph9e] { background:rgba(192,43,60,.08); color:#c02b3c; border:1px solid rgba(192,43,60,.2); }
.banner.info[b-n8g33hph9e] { background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.filters label[b-n8g33hph9e] { flex-direction:column; align-items:flex-start; gap:4px; }
/* /Pages/RejectedReport.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions, the Help modal and the
   in-grid link button). Everything else — cand-head, card, toolbar, search, grid, pager, banner — comes
   from app.css. */

.head-actions[b-z7u7dd2zsy] { display: flex; align-items: center; gap: 14px; }

.btn.link[b-z7u7dd2zsy] { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline;
            font-size: 13px; font-weight: 600; cursor: pointer; }
.btn.link:hover[b-z7u7dd2zsy] { filter: brightness(1.15); }

h5[b-z7u7dd2zsy] { margin: 14px 0 6px; }
ul[b-z7u7dd2zsy] { margin: 0 0 8px; padding-left: 20px; }
/* /Pages/RemunerationCourseWise.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions and the Help modal).
   Everything else — cand-head, card, toolbar, count, grid, pager, banner — comes from app.css. */

.head-actions[b-g31gg0hcia] { display: flex; align-items: center; gap: 14px; }

h5[b-g31gg0hcia] { margin: 14px 0 6px; }
ul[b-g31gg0hcia] { margin: 0 0 8px; padding-left: 20px; }
ol[b-g31gg0hcia] { margin: 6px 0 0; padding-left: 20px; }

.stream[b-g31gg0hcia],
.course[b-g31gg0hcia] {
    min-width: 200px;
}

.role[b-g31gg0hcia] {
    min-width: 120px;
}

.amt[b-g31gg0hcia] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Pages/RemunerationDetail.razor.rz.scp.css */
.hdr[b-62f30zltda] {
    padding: 16px;
}

.hdr-grid[b-62f30zltda] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 24px;
}

.lbl[b-62f30zltda] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.val[b-62f30zltda] {
    font-weight: 600;
}

.hdr-actions[b-62f30zltda] {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.amt[b-62f30zltda] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.totals td[b-62f30zltda] {
    font-weight: 700;
    border-top: 2px solid var(--border);
}
/* /Pages/RemunerationReport.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions and the Help modal).
   Everything else — cand-head, card, toolbar, search, count, grid, pager, banner — comes from app.css. */

.head-actions[b-cil4ocbws5] { display: flex; align-items: center; gap: 14px; }

h5[b-cil4ocbws5] { margin: 14px 0 6px; }
ul[b-cil4ocbws5] { margin: 0 0 8px; padding-left: 20px; }
ol[b-cil4ocbws5] { margin: 6px 0 0; padding-left: 20px; }

.fld[b-cil4ocbws5] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-cil4ocbws5] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.badge[b-cil4ocbws5] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.badge.good[b-cil4ocbws5] {
    background: color-mix(in srgb, var(--good) 18%, transparent);
    color: var(--good);
}

.badge.warn[b-cil4ocbws5] {
    background: color-mix(in srgb, var(--bad) 16%, transparent);
    color: var(--bad);
}

.amt[b-cil4ocbws5] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.row-actions[b-cil4ocbws5] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.view-report[b-cil4ocbws5] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.view-report:hover[b-cil4ocbws5] {
    text-decoration: underline;
}
/* /Pages/Report.razor.rz.scp.css */
.hub-head[b-1csxi8hese] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-1csxi8hese] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-1csxi8hese] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-1csxi8hese] { padding: 22px; }
.sub[b-1csxi8hese] { color: var(--faint); font-size: 13px; }

.group .group-head[b-1csxi8hese] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-1csxi8hese] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-1csxi8hese] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-1csxi8hese] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-1csxi8hese] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-1csxi8hese]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-1csxi8hese] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-1csxi8hese]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-1csxi8hese]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-1csxi8hese] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-1csxi8hese] { font-size: 14px; font-weight: 620; }
.txt small[b-1csxi8hese] { color: var(--faint); font-size: 12px; }
.arrow[b-1csxi8hese] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-1csxi8hese] { color: var(--accent); }

.link-card.soon[b-1csxi8hese] { cursor: default; opacity: .55; }
.link-card.soon:hover[b-1csxi8hese] { background: none; border-color: transparent; }
.link-card.soon .ic[b-1csxi8hese] { filter: grayscale(35%); }
.pill[b-1csxi8hese] { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 620px) {
  .hub-head[b-1csxi8hese] { flex-direction: column; align-items: stretch; }
  .hub-head[b-1csxi8hese]  .search-box .search { width: 100%; }
}

.coming-soon .group-head[b-1csxi8hese] { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); }

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-1csxi8hese] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-1csxi8hese] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-1csxi8hese]  .search-box { align-self: flex-start; }
.hub-head[b-1csxi8hese]  .search-box .search { width: min(420px, 100%); }
/* /Pages/Result.razor.rz.scp.css */
.hub-head[b-d7x4ly1xef] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hub-head .sub[b-d7x4ly1xef] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-d7x4ly1xef] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 0; overflow: hidden; }
.pad[b-d7x4ly1xef] { padding: 22px; }
.sub[b-d7x4ly1xef] { color: var(--faint); font-size: 13px; }

.group .group-head[b-d7x4ly1xef] { padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--accent);
                     background: color-mix(in srgb, var(--accent) 9%, transparent);
                     border-bottom: 1px solid var(--border); }
.links[b-d7x4ly1xef] { display: flex; flex-direction: column; padding: 10px; gap: 8px; }

.link-card[b-d7x4ly1xef] { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
             border: 1px solid transparent; text-decoration: none; color: var(--ink);
             transition: background .14s, border-color .14s; }
.link-card:hover[b-d7x4ly1xef] { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ic[b-d7x4ly1xef] { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
      color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.ic.info[b-d7x4ly1xef]  { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.ic.green[b-d7x4ly1xef] { background: linear-gradient(135deg, #34d399, #059669); }
.ic.blue[b-d7x4ly1xef]  { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ic.red[b-d7x4ly1xef]   { background: linear-gradient(135deg, #f87171, #dc2626); }
.txt[b-d7x4ly1xef] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b[b-d7x4ly1xef] { font-size: 14px; font-weight: 620; }
.txt small[b-d7x4ly1xef] { color: var(--faint); font-size: 12px; }
.arrow[b-d7x4ly1xef] { color: var(--faint); display: inline-flex; }
.link-card:hover .arrow[b-d7x4ly1xef] { color: var(--accent); }

.link-card.soon[b-d7x4ly1xef] { cursor: default; opacity: .55; }
.link-card.soon:hover[b-d7x4ly1xef] { background: none; border-color: transparent; }
.link-card.soon .ic[b-d7x4ly1xef] { filter: grayscale(35%); }
.pill[b-d7x4ly1xef] { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2);
        border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 620px) {
  .hub-head[b-d7x4ly1xef] { flex-direction: column; align-items: stretch; }
  .hub-head[b-d7x4ly1xef]  .search-box .search { width: 100%; }
}

.coming-soon .group-head[b-d7x4ly1xef] { color: var(--muted); background: color-mix(in srgb, var(--muted) 8%, transparent); }

/* QA: the header was one space-between row of [title | search | back], which on a wide screen left
   the search floating in the middle with gaps either side. Title and back link share the top row;
   search leads its own row on the left, like the other pages QA asked to align. */
.hub-head[b-d7x4ly1xef] { flex-direction: column; align-items: stretch; gap: 14px; }
.hub-head-top[b-d7x4ly1xef] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hub-head[b-d7x4ly1xef]  .search-box { align-self: flex-start; }
.hub-head[b-d7x4ly1xef]  .search-box .search { width: min(420px, 100%); }
/* /Pages/RevalQwCommentReport.razor.rz.scp.css */
.cand-head[b-2xoxuhlk6c] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-2xoxuhlk6c] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-2xoxuhlk6c] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-2xoxuhlk6c] { color: var(--ink); }

.card[b-2xoxuhlk6c] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-2xoxuhlk6c] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-2xoxuhlk6c] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-2xoxuhlk6c], .toolbar input[b-2xoxuhlk6c] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-2xoxuhlk6c], .toolbar input:focus[b-2xoxuhlk6c] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-2xoxuhlk6c] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-2xoxuhlk6c] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-2xoxuhlk6c] { background: var(--track); }
.btn.primary[b-2xoxuhlk6c] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-2xoxuhlk6c] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-2xoxuhlk6c] { opacity: .55; cursor: default; }

.table-scroll[b-2xoxuhlk6c] { overflow-x: auto; }
.grid[b-2xoxuhlk6c] { width: 100%; border-collapse: collapse; }
.grid thead th[b-2xoxuhlk6c] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-2xoxuhlk6c] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.grid tbody tr:last-child td[b-2xoxuhlk6c] { border-bottom: none; }
.grid tbody tr:hover td[b-2xoxuhlk6c] { background: var(--surface-2); }
.grid .nm[b-2xoxuhlk6c] { font-weight: 600; }
.grid .rem[b-2xoxuhlk6c] { white-space: normal; min-width: 180px; max-width: 320px; }

.pad[b-2xoxuhlk6c] { padding: 22px 6px; }
.sub[b-2xoxuhlk6c] { color: var(--muted); font-size: 13px; }

.pager[b-2xoxuhlk6c] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.head-actions[b-2xoxuhlk6c] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.help-text p[b-2xoxuhlk6c] {
    line-height: 1.5;
    margin: 0;
}
/* /Pages/ScannerSubjectStatus.razor.rz.scp.css */
/* Page-specific additions on top of the shared design system in app.css
   (.cand-head, .card, .toolbar, .grid, .btn, .banner, .pager are global). */

.head-actions[b-ap72yehpl8] { display: flex; align-items: center; gap: 14px; }

.tabs[b-ap72yehpl8] { display: flex; gap: 6px; margin-bottom: 16px; }
.tab[b-ap72yehpl8] { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; font-family: inherit;
       transition: background .12s, color .12s, border-color .12s; }
.tab:hover[b-ap72yehpl8] { background: var(--track); color: var(--ink); }
.tab.on[b-ap72yehpl8] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Second filter row sits under the date/progress row inside the same card. */
.toolbar.row-2[b-ap72yehpl8] { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.subject-note[b-ap72yehpl8] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.toolbar label[b-ap72yehpl8] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.ta-r[b-ap72yehpl8] { text-align: right; font-variant-numeric: tabular-nums; }
.grid thead th.ta-r[b-ap72yehpl8] { text-align: right; }

/* Legacy RowDataBound colouring: ExtraLightGreen #C7FFCA when mapped == actual, ExtraLightPink #FFD7D7
   otherwise. Kept as a soft tint so it survives the dark theme, with a left rule doing the real work
   for anyone who cannot separate the two hues. */
.grid tbody tr.ok-row td:first-child[b-ap72yehpl8] { box-shadow: inset 3px 0 0 var(--good, #2e7d32); }
.grid tbody tr.bad-row td:first-child[b-ap72yehpl8] { box-shadow: inset 3px 0 0 #c02b3c; }
.grid tbody tr.ok-row td[b-ap72yehpl8] { background: rgba(46, 125, 50, .07); }
.grid tbody tr.bad-row td[b-ap72yehpl8] { background: rgba(192, 43, 60, .07); }
.grid tbody tr.ok-row:hover td[b-ap72yehpl8] { background: rgba(46, 125, 50, .13); }
.grid tbody tr.bad-row:hover td[b-ap72yehpl8] { background: rgba(192, 43, 60, .13); }

h4[b-ap72yehpl8] { margin: 14px 0 8px; font-size: 14px; }
h4:first-of-type[b-ap72yehpl8] { margin-top: 0; }
ul[b-ap72yehpl8] { margin: 0; padding-left: 20px; }
li[b-ap72yehpl8] { line-height: 1.5; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

/* Drill links on the count cells (legacy: darkblue, underlined) and the View AnswerSheet link. */
button.link[b-ap72yehpl8] { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent);
              cursor: pointer; text-decoration: underline; font-variant-numeric: tabular-nums; }
button.link:hover[b-ap72yehpl8] { text-decoration-thickness: 2px; }
.drill-grid td.path[b-ap72yehpl8] { word-break: break-all; min-width: 160px; color: var(--muted); font-size: 12px; }
/* /Pages/SemesterCheckingStatus.razor.rz.scp.css */
.head-actions[b-q68debk0ig] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.help-text p[b-q68debk0ig] {
    line-height: 1.5;
    margin: 0;
}
/* /Pages/SendEmail.razor.rz.scp.css */
/* Send Email (bulk) — audience cascade, recipient grid, template review, queue result. */

/* Label sits inline with its control, at the shared size and weight -- the .toolbar convention in
   app.css that every other page follows. This page previously stacked the label above the control in
   a smaller, lighter font, which read as misaligned next to the rest of the app. Only the widths are
   set locally; everything else is inherited so the pages stay consistent. */
.toolbar.filters[b-frjto6u809] { row-gap: 10px; }
.toolbar.filters select[b-frjto6u809] { min-width: 180px; }
.toolbar.filters .audience[b-frjto6u809] { min-width: 260px; }
.req[b-frjto6u809] { color: var(--bad, #c0392b); }

.selection-bar[b-frjto6u809] { gap: 8px; flex-wrap: wrap; }
/* Clear on the left, the review/send action on the right edge of the bar. */
.selection-bar .review[b-frjto6u809] { margin-left: auto; }
.count[b-frjto6u809] { font-size: .82rem; color: var(--muted); }

.table-scroll[b-frjto6u809] { overflow-x: auto; }
.grid[b-frjto6u809] { width: 100%; border-collapse: collapse; }
.grid th[b-frjto6u809], .grid td[b-frjto6u809] { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.grid th[b-frjto6u809] { font-size: .76rem; color: var(--muted); font-weight: 600; }
.ta-c[b-frjto6u809] { text-align: center; }
.nm[b-frjto6u809] { font-weight: 600; }

/* Rows the legacy grid also left unselectable (Upload Count <> Present Count). */
.grid tr.locked[b-frjto6u809] { opacity: .6; }

.pager[b-frjto6u809] { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.pageinfo[b-frjto6u809] { font-size: .82rem; color: var(--muted); }

/* Review popup body (AppModal ChildContent still carries this page's CSS scope). */
.preview[b-frjto6u809] { padding: 0; }
.preview-subject[b-frjto6u809] { margin-bottom: 10px; font-weight: 600; }
.preview-subject .l[b-frjto6u809] { display: block; font-size: .76rem; font-weight: 400; color: var(--muted); }
.preview-body[b-frjto6u809] {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    /* The panel is capped at 90vh and scrolls itself; budget the title, subject, summary and the
       footer buttons so only ONE of the two ever shows a scrollbar. */
    max-height: max(160px, min(420px, 90vh - 280px));
    overflow: auto;
}
.preview-body :global(table)[b-frjto6u809] { border-collapse: collapse; }
.preview-body :global(td)[b-frjto6u809], .preview-body :global(th)[b-frjto6u809] { border: 1px solid var(--border); padding: 4px 6px; }

.confirm-summary[b-frjto6u809] { font-weight: 600; padding: 12px 0 0; }

.result-counts[b-frjto6u809] { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 16px; }
.rc[b-frjto6u809] {
    display: flex; flex-direction: column; align-items: center;
    min-width: 96px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.rc .n[b-frjto6u809] { font-size: 1.5rem; font-weight: 700; }
.rc .l[b-frjto6u809] { font-size: .76rem; color: var(--muted); }

.banner[b-frjto6u809] { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); }
.banner.err[b-frjto6u809] { background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b); }
.banner.warn[b-frjto6u809] { background: rgba(255, 193, 7, .16); color: var(--ink); }
.configure-link[b-frjto6u809] { margin-left: 10px; text-decoration: underline; }

.pad[b-frjto6u809] { padding: 12px 16px; }

/* Narrow screens: one filter per row, and the label stacks so the control still gets full width. */
@media (max-width: 720px) {
    .toolbar.filters select[b-frjto6u809], .toolbar.filters input[b-frjto6u809] { min-width: 100%; }
    .toolbar.filters label[b-frjto6u809] { width: 100%; align-items: flex-start; flex-direction: column; gap: 4px; }
}
/* /Pages/SendPhotocopyBulk.razor.rz.scp.css */
.cand-head[b-lf7f9p50ck] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-lf7f9p50ck] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-lf7f9p50ck] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.card[b-lf7f9p50ck] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

/* Legacy stacked these in one bordered panel: template link on top, then the file picker, then the
   Import / Cancel / Export row. Same order, same grouping. */
.import-card[b-lf7f9p50ck] { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }

.tmpl[b-lf7f9p50ck] { width: 100%; }
.btn.link[b-lf7f9p50ck] { background: none; border: none; color: var(--accent); font-weight: 700; padding: 0;
            text-decoration: underline; }
.btn.link:hover[b-lf7f9p50ck] { background: none; filter: brightness(1.15); }

.upload[b-lf7f9p50ck] { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.upload .lbl[b-lf7f9p50ck] { font-weight: 700; color: var(--accent); font-size: 13.5px; }
.upload .file[b-lf7f9p50ck] { font-size: 13px; color: var(--ink); }
.fld-err[b-lf7f9p50ck] { margin: 0; color: #c02b3c; font-size: 12.5px; font-weight: 600; }

.actions[b-lf7f9p50ck] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.btn[b-lf7f9p50ck] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-lf7f9p50ck] { background: var(--track); }
.btn.primary[b-lf7f9p50ck] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-lf7f9p50ck] { filter: brightness(1.05); }
.btn.ghost[b-lf7f9p50ck] { background: transparent; }
.btn.danger[b-lf7f9p50ck] { background: #f86262; border-color: #f86262; color: #fff; }   /* legacy's Cancel colour */
.btn.danger:hover[b-lf7f9p50ck] { filter: brightness(1.05); }
.btn:disabled[b-lf7f9p50ck] { opacity: .6; cursor: default; }

/* Outcome panel — replaces legacy's modal, which said the same thing behind an OK button. Import
   failures pop a DialogService popup instead, so this panel is reached only on success. */
.result[b-lf7f9p50ck] { border-left: 3px solid var(--border); }
.result.ok[b-lf7f9p50ck] { border-left-color: #2ea043; }
.result-head[b-lf7f9p50ck] { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.result .counts[b-lf7f9p50ck] { margin: 8px 0 0; font-size: 12.5px; }
.sub[b-lf7f9p50ck] { color: var(--muted); }
/* /Pages/SpecializationMaster.razor.rz.scp.css */
.cand-head[b-rgkw1xe73n] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-rgkw1xe73n] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-rgkw1xe73n] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-rgkw1xe73n] { color: var(--accent); }
.back :global(svg)[b-rgkw1xe73n] { transform: rotate(180deg); }

.card[b-rgkw1xe73n] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.form-card h2[b-rgkw1xe73n] { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }

.form[b-rgkw1xe73n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-rgkw1xe73n] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-rgkw1xe73n], .form label select[b-rgkw1xe73n], .form label textarea[b-rgkw1xe73n] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-rgkw1xe73n] { color: #dc2626; margin-left: 3px; }
.form input[b-rgkw1xe73n], .form select[b-rgkw1xe73n] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-rgkw1xe73n], .form select:focus[b-rgkw1xe73n] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-rgkw1xe73n] { opacity: .6; cursor: default; }

.actions[b-rgkw1xe73n] { display: flex; gap: 10px; margin-top: 18px; }
.btn[b-rgkw1xe73n] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-rgkw1xe73n] { background: var(--track); }
.btn.primary[b-rgkw1xe73n] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-rgkw1xe73n] { filter: brightness(1.05); }
.btn.ghost[b-rgkw1xe73n] { background: transparent; }
.btn:disabled[b-rgkw1xe73n] { opacity: .6; cursor: default; }

.list-head[b-rgkw1xe73n] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-rgkw1xe73n] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.search-row[b-rgkw1xe73n] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row input[b-rgkw1xe73n] { flex: 1; max-width: 320px; border: 1px solid var(--border); background: var(--surface-2);
                     color: var(--ink); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.search-row input:focus[b-rgkw1xe73n] { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-row select[b-rgkw1xe73n] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                      border-radius: 9px; padding: 8px 10px; font-size: 13.5px; max-width: 220px; }
.search-row select:focus[b-rgkw1xe73n] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-rgkw1xe73n] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-rgkw1xe73n] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-rgkw1xe73n] { width: 100%; border-collapse: collapse; }
.grid thead th[b-rgkw1xe73n] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-rgkw1xe73n] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-rgkw1xe73n] { border-bottom: none; }
.grid tbody tr:hover td[b-rgkw1xe73n] { background: var(--surface-2); }
.ta-c[b-rgkw1xe73n] { text-align: center; }

.link-btn[b-rgkw1xe73n] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-rgkw1xe73n] { color: #c02b3c; }
.link-btn:hover[b-rgkw1xe73n] { filter: brightness(1.12); }
.link-btn:disabled[b-rgkw1xe73n] { opacity: .5; cursor: default; }

.pager[b-rgkw1xe73n] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-rgkw1xe73n] { padding: 18px 4px; }
.sub[b-rgkw1xe73n] { color: var(--muted); }
.banner[b-rgkw1xe73n] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-rgkw1xe73n] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-rgkw1xe73n] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-rgkw1xe73n], .search-row select[b-rgkw1xe73n] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-rgkw1xe73n] { min-width: 150px; max-width: 210px; }
.head-actions[b-rgkw1xe73n] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-rgkw1xe73n]::before { content: "+"; margin-right: 3px; font-weight: 700; }

/* -- import drop-card (ported from ImportTimetable.razor.css) -- */
.dropzone[b-rgkw1xe73n] { position: relative; display: grid; place-items: center; min-height: 92px; margin-top: 6px; padding: 14px;
            border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
            text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover[b-rgkw1xe73n] { border-color: var(--accent); }
.dropzone:focus-within[b-rgkw1xe73n] { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-color: var(--accent); }
.dropzone .dz-copy[b-rgkw1xe73n] { display: grid; gap: 5px; }
.dropzone small[b-rgkw1xe73n] { color: var(--muted); font-weight: 400; }
.dropzone:has(input:disabled)[b-rgkw1xe73n] { opacity: .55; cursor: default; }
.file-input[b-rgkw1xe73n] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:disabled[b-rgkw1xe73n] { cursor: default; }
.file-meta[b-rgkw1xe73n] { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* /Pages/StreamMaster.razor.rz.scp.css */
.cand-head[b-awpth6q82h] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-awpth6q82h] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-awpth6q82h] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-awpth6q82h] { color: var(--accent); }
.back :global(svg)[b-awpth6q82h] { transform: rotate(180deg); }

.card[b-awpth6q82h] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

.form[b-awpth6q82h] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-awpth6q82h] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-awpth6q82h], .form label select[b-awpth6q82h], .form label textarea[b-awpth6q82h] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-awpth6q82h] { color: #dc2626; margin-left: 3px; }
.form input[b-awpth6q82h] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-awpth6q82h] { outline: 2px solid var(--accent); outline-offset: -1px; }

.btn[b-awpth6q82h] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-awpth6q82h] { background: var(--track); }
.btn.primary[b-awpth6q82h] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-awpth6q82h] { filter: brightness(1.05); }
.btn.ghost[b-awpth6q82h] { background: transparent; }
.btn:disabled[b-awpth6q82h] { opacity: .6; cursor: default; }

.list-head[b-awpth6q82h] { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.list-head h2[b-awpth6q82h] { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }

.search-row[b-awpth6q82h] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row input[b-awpth6q82h] { flex: 1; max-width: 320px; border: 1px solid var(--border); background: var(--surface-2);
                     color: var(--ink); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.search-row input:focus[b-awpth6q82h] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-awpth6q82h] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-awpth6q82h] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-awpth6q82h] { width: 100%; border-collapse: collapse; }
.grid thead th[b-awpth6q82h] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-awpth6q82h] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-awpth6q82h] { border-bottom: none; }
.grid tbody tr:hover td[b-awpth6q82h] { background: var(--surface-2); }
.ta-c[b-awpth6q82h] { text-align: center; }

.link-btn[b-awpth6q82h] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-awpth6q82h] { color: #c02b3c; }
.link-btn:hover[b-awpth6q82h] { filter: brightness(1.12); }
.link-btn:disabled[b-awpth6q82h] { opacity: .5; cursor: default; }

.pager[b-awpth6q82h] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-awpth6q82h] { padding: 18px 4px; }
.sub[b-awpth6q82h] { color: var(--muted); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-awpth6q82h], .search-row select[b-awpth6q82h] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-awpth6q82h] { min-width: 150px; max-width: 210px; }
.head-actions[b-awpth6q82h] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-awpth6q82h]::before { content: "+"; margin-right: 3px; font-weight: 700; }
/* /Pages/SubjectHeadMapping.razor.rz.scp.css */
.cand-head[b-3ht5iqa9nl] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-3ht5iqa9nl] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-3ht5iqa9nl] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-3ht5iqa9nl] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-3ht5iqa9nl] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-3ht5iqa9nl], .toolbar input[b-3ht5iqa9nl] { border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-3ht5iqa9nl], .toolbar input:focus[b-3ht5iqa9nl] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .exam-date[b-3ht5iqa9nl] { width: 110px; }
.toolbar .count[b-3ht5iqa9nl] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.toolbar .count b[b-3ht5iqa9nl] { color: var(--ink); }

.btn[b-3ht5iqa9nl] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-3ht5iqa9nl] { background: var(--track); }
.btn.primary[b-3ht5iqa9nl] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-3ht5iqa9nl] { filter: brightness(1.06); background: var(--accent); }
.btn.danger[b-3ht5iqa9nl] { background: rgba(192,43,60,.08); border-color: rgba(192,43,60,.25); color: #c02b3c; }
.btn.danger:hover[b-3ht5iqa9nl] { background: rgba(192,43,60,.14); }
.btn:disabled[b-3ht5iqa9nl] { opacity: .55; cursor: default; }

.table-scroll[b-3ht5iqa9nl] { overflow-x: auto; }
.grid[b-3ht5iqa9nl] { width: 100%; border-collapse: collapse; }
.grid thead th[b-3ht5iqa9nl] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-3ht5iqa9nl] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-3ht5iqa9nl] { border-bottom: none; }
.grid tbody tr:hover td[b-3ht5iqa9nl] { background: var(--surface-2); }
.grid .nm[b-3ht5iqa9nl] { font-weight: 600; }
.ta-c[b-3ht5iqa9nl] { text-align: center; }

.actions[b-3ht5iqa9nl] { white-space: nowrap; }
.actions .btn[b-3ht5iqa9nl] { margin: 0 3px; }
.confirm-txt[b-3ht5iqa9nl] { color: #c02b3c; font-size: 12.5px; font-weight: 600; margin-right: 6px; }

.pad[b-3ht5iqa9nl] { padding: 22px 6px; }
.sub[b-3ht5iqa9nl] { color: var(--muted); font-size: 13px; }

.pager[b-3ht5iqa9nl] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

.head-actions[b-3ht5iqa9nl] { display: flex; align-items: center; gap: 8px; }

.grid .sr[b-3ht5iqa9nl] { color: var(--muted); font-variant-numeric: tabular-nums; }

.help-list[b-3ht5iqa9nl] { margin: 0; padding-left: 20px; color: var(--ink); font-size: 13px; line-height: 1.65; }
.help-list ul[b-3ht5iqa9nl] { margin: 4px 0 8px; padding-left: 18px; color: var(--muted); }

.import-panel .panel-head[b-3ht5iqa9nl] { font-size: 13px; font-weight: 700; color: var(--ink); padding: 14px 2px 10px; }
.import-panel .err-head[b-3ht5iqa9nl] { color: #c02b3c; padding-top: 16px; }
.upload-pick[b-3ht5iqa9nl] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 4px; }
.file-btn[b-3ht5iqa9nl] { position: relative; overflow: hidden; }
.file-input[b-3ht5iqa9nl] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-meta[b-3ht5iqa9nl] { color: var(--muted); font-size: 12.5px; }
.hint[b-3ht5iqa9nl] { color: #c02b3c; font-size: 12.5px; padding: 8px 2px 2px; }
.pick-hint[b-3ht5iqa9nl] { padding: 8px 2px 2px; }
.errors[b-3ht5iqa9nl] { margin: 0; padding: 0 2px 8px 20px; color: #c02b3c; font-size: 12.5px; }
.errors li[b-3ht5iqa9nl] { padding: 2px 0; }
/* /Pages/SubjectMaster.razor.rz.scp.css */
.cand-head[b-e2xw9tv31u] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-e2xw9tv31u] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-e2xw9tv31u] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none;
        font-size: 12.5px; font-weight: 600; }
.back:hover[b-e2xw9tv31u] { color: var(--accent); }
.back :global(svg)[b-e2xw9tv31u] { transform: rotate(180deg); }

.card[b-e2xw9tv31u] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }

.form[b-e2xw9tv31u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form label[b-e2xw9tv31u] { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 420px; }
.form label input[b-e2xw9tv31u], .form label select[b-e2xw9tv31u], .form label textarea[b-e2xw9tv31u] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form .req[b-e2xw9tv31u] { color: #dc2626; margin-left: 3px; }
.form input[b-e2xw9tv31u], .form select[b-e2xw9tv31u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
              border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form input:focus[b-e2xw9tv31u], .form select:focus[b-e2xw9tv31u] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-e2xw9tv31u] { opacity: .6; cursor: default; }

.btn[b-e2xw9tv31u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background .12s; }
.btn:hover[b-e2xw9tv31u] { background: var(--track); }
.btn.primary[b-e2xw9tv31u] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-e2xw9tv31u] { filter: brightness(1.05); }
.btn.ghost[b-e2xw9tv31u] { background: transparent; }
.btn:disabled[b-e2xw9tv31u] { opacity: .6; cursor: default; }

.list-head[b-e2xw9tv31u] { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 12px; }

.filters[b-e2xw9tv31u] { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; align-items: end; }

/* Each filter now carries a label + red asterisk above its select, as legacy's do. The label
   stacks so the controls stay on one row at the widths they were already using. */
.filters .fld[b-e2xw9tv31u] { display: flex; flex-direction: column; gap: 4px; }
.filters .fld > span[b-e2xw9tv31u] { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

/* The import dialog's file picker spans the whole dialog instead of sharing a narrow grid column
   with the dropdowns, where the drop-zone copy and the file button overlapped. */
.full-row[b-e2xw9tv31u] { grid-column: 1 / -1; }
.filters select[b-e2xw9tv31u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                   border-radius: 9px; padding: 8px 10px; font-size: 13.5px; min-width: 150px; max-width: 220px; }
.filters select:focus[b-e2xw9tv31u] { outline: 2px solid var(--accent); outline-offset: -1px; }

.search-row[b-e2xw9tv31u] { display: flex; gap: 10px; margin-bottom: 14px; }
.search-row input[b-e2xw9tv31u] { flex: 1; max-width: 320px; border: 1px solid var(--border); background: var(--surface-2);
                     color: var(--ink); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.search-row input:focus[b-e2xw9tv31u] { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-row select[b-e2xw9tv31u] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                      border-radius: 9px; padding: 8px 10px; font-size: 13.5px; max-width: 220px; }
.search-row select:focus[b-e2xw9tv31u] { outline: 2px solid var(--accent); outline-offset: -1px; }

.count[b-e2xw9tv31u] { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.count b[b-e2xw9tv31u] { color: var(--ink); font-variant-numeric: tabular-nums; }

.grid[b-e2xw9tv31u] { width: 100%; border-collapse: collapse; }
.grid thead th[b-e2xw9tv31u] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-e2xw9tv31u] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 font-variant-numeric: tabular-nums; }
.grid tbody tr:last-child td[b-e2xw9tv31u] { border-bottom: none; }
.grid tbody tr:hover td[b-e2xw9tv31u] { background: var(--surface-2); }
.ta-c[b-e2xw9tv31u] { text-align: center; }

.link-btn[b-e2xw9tv31u] { border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px;
            color: var(--accent); margin-right: 10px; }
.link-btn.del[b-e2xw9tv31u] { color: #c02b3c; }
.link-btn:hover[b-e2xw9tv31u] { filter: brightness(1.12); }
.link-btn:disabled[b-e2xw9tv31u] { opacity: .5; cursor: default; }

.pager[b-e2xw9tv31u] { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

.pad[b-e2xw9tv31u] { padding: 18px 4px; }
.sub[b-e2xw9tv31u] { color: var(--muted); }
.banner[b-e2xw9tv31u] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-e2xw9tv31u] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-e2xw9tv31u] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }

/* -- polished dropdown + grouped list-head actions -- */
.form select[b-e2xw9tv31u], .search-row select[b-e2xw9tv31u], .filters select[b-e2xw9tv31u] {
    -webkit-appearance: none; appearance: none;
    background-image: var(--sel-chevron); background-repeat: no-repeat;
    background-position: right 11px center; background-size: 15px;
    padding-right: 34px; cursor: pointer;
}
.search-row select[b-e2xw9tv31u] { min-width: 150px; max-width: 210px; }
.head-actions[b-e2xw9tv31u] { display: flex; align-items: center; gap: 10px; }
.new-btn[b-e2xw9tv31u]::before { content: "+"; margin-right: 3px; font-weight: 700; }

/* -- import drop-card (ported from ImportTimetable.razor.css) -- */
.dropzone[b-e2xw9tv31u] { position: relative; display: grid; place-items: center; min-height: 92px; margin-top: 6px; padding: 14px;
            border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
            text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover[b-e2xw9tv31u] { border-color: var(--accent); }
.dropzone:focus-within[b-e2xw9tv31u] { outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent); outline-offset: 3px; border-color: var(--accent); }
.dropzone .dz-copy[b-e2xw9tv31u] { display: grid; gap: 5px; }
.dropzone small[b-e2xw9tv31u] { color: var(--muted); font-weight: 400; }
.dropzone:has(input:disabled)[b-e2xw9tv31u] { opacity: .55; cursor: default; }
.file-input[b-e2xw9tv31u] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input:disabled[b-e2xw9tv31u] { cursor: default; }
.file-meta[b-e2xw9tv31u] { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* QA A9: search and Help sit together at the top right of the page header. */
.cand-head[b-e2xw9tv31u] { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-actions[b-e2xw9tv31u] { display: flex; align-items: center; gap: 10px; }
.head-actions[b-e2xw9tv31u]  .search-box .search { min-width: 260px; }
/* /Pages/SubjectPaperCheck.razor.rz.scp.css */
.head-actions[b-am6brm913k] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.err[b-am6brm913k] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(192, 43, 60, .08);
    color: #c02b3c;
    border: 1px solid rgba(192, 43, 60, .2);
}

.card[b-am6brm913k] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.toolbar[b-am6brm913k] { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.toolbar label[b-am6brm913k] { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-am6brm913k] { border: 1px solid var(--border); background: var(--surface-2); min-width: 180px; max-width: 260px;
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-am6brm913k] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-am6brm913k] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* /Pages/SubjectTimeAnalysis.razor.rz.scp.css */
.head-actions[b-9upfbt6t5i] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.err[b-9upfbt6t5i] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(192, 43, 60, .08);
    color: #c02b3c;
    border: 1px solid rgba(192, 43, 60, .2);
}

.subject-note[b-9upfbt6t5i] {
    color: var(--faint);
    font-size: 12.5px;
}

.fld[b-9upfbt6t5i] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--muted);
}

.fld input[b-9upfbt6t5i] {
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

/* Per-row "Details" drill-in trigger — the legacy ⓘ link. */
.details[b-9upfbt6t5i] {
    padding: .2rem .55rem;
    font-size: .8rem;
    white-space: nowrap;
}

.card[b-9upfbt6t5i] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.toolbar[b-9upfbt6t5i] { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.toolbar label:not(.fld)[b-9upfbt6t5i] { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.toolbar select[b-9upfbt6t5i] { border: 1px solid var(--border); background: var(--surface-2); min-width: 180px; max-width: 260px;
    color: var(--ink); border-radius: 9px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.toolbar select:focus[b-9upfbt6t5i] { outline: 2px solid var(--accent); outline-offset: -1px; }
.toolbar .count[b-9upfbt6t5i] { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Drill-in "Images" column + slider (legacy ImageSlider.aspx). */
.img-btn[b-9upfbt6t5i] { padding: .15rem .5rem; font-size: 1rem; line-height: 1; }
.img-empty[b-9upfbt6t5i] { color: #c02b3c; font-weight: 600; text-align: center; padding: 24px 0; }
.slider[b-9upfbt6t5i] { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; }
.slide[b-9upfbt6t5i] { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.nav[b-9upfbt6t5i] { position: absolute; top: 50%; transform: translateY(-50%); border: 0; border-radius: 6px;
       background: rgba(255, 255, 255, .75); color: #222; padding: 8px 6px; cursor: pointer; display: flex; }
.nav.prev[b-9upfbt6t5i] { left: 10px; }
.nav.next[b-9upfbt6t5i] { right: 10px; }
.dots[b-9upfbt6t5i] { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dot[b-9upfbt6t5i] { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; }
.dot.on[b-9upfbt6t5i] { background: var(--muted); }
.thumbs[b-9upfbt6t5i] { display: flex; gap: 6px; overflow-x: auto; }
.thumb[b-9upfbt6t5i] { height: 72px; flex: 0 0 auto; border-radius: 4px; cursor: pointer; opacity: .6; border: 2px solid transparent; }
.thumb.on[b-9upfbt6t5i] { opacity: 1; border-color: var(--accent); }
/* /Pages/SubjectWise.razor.rz.scp.css */
.cand-head[b-2mzku3swj5] { display:flex; align-items: center; justify-content:space-between; margin-bottom:16px; }
.cand-head .sub[b-2mzku3swj5] { color:var(--muted); font-size:13px; margin-top:2px; }
.back[b-2mzku3swj5] { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; text-decoration:none; }
.back :first-child[b-2mzku3swj5] { transform:rotate(180deg); }
.card[b-2mzku3swj5] { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
.toolbar[b-2mzku3swj5] { display:flex; align-items:center; gap:10px; }
.toolbar .search[b-2mzku3swj5] { flex:0 0 260px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.search-ico[b-2mzku3swj5] { color:var(--muted); }
.count[b-2mzku3swj5] { margin-left:auto; color:var(--muted); font-size:13px; }
.status-card[b-2mzku3swj5] { display:flex; gap:32px; }
.stat[b-2mzku3swj5] { display:flex; flex-direction:column; }
.stat .lbl[b-2mzku3swj5] { color:var(--muted); font-size:12px; }
.stat .val[b-2mzku3swj5] { font-size:22px; font-weight:700; }
.assign-panel h3[b-2mzku3swj5], .card h3[b-2mzku3swj5] { font-size:15px; font-weight:700; margin-bottom:10px; }
.assign-row[b-2mzku3swj5] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.slot-select[b-2mzku3swj5] { border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:transparent; color:inherit; }
.note[b-2mzku3swj5] { color:var(--muted); font-size:13px; }
.grid[b-2mzku3swj5] { width:100%; border-collapse:collapse; }
.grid th[b-2mzku3swj5], .grid td[b-2mzku3swj5] { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.grid th[b-2mzku3swj5] { color:var(--muted); font-weight:600; }
.grid .nm[b-2mzku3swj5] { font-weight:600; }
.pad[b-2mzku3swj5] { padding:14px; }
.sub[b-2mzku3swj5] { color:var(--muted); font-size:13px; }
.btn[b-2mzku3swj5] { border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; background:transparent; color:inherit; }
.btn.primary[b-2mzku3swj5] { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost[b-2mzku3swj5] { background:transparent; }
.btn:disabled[b-2mzku3swj5] { opacity:.5; cursor:default; }
.table-scroll[b-2mzku3swj5] { overflow-x:auto; }
.pager[b-2mzku3swj5] { display:flex; align-items:center; gap:12px; margin-top:12px; }
.pager .pageinfo[b-2mzku3swj5] { color:var(--muted); font-size:13px; }

/* Action dropdown = shared <ActionMenu>, laid out by the global .action-and-filters row (app.css). */
.head-actions[b-2mzku3swj5] { display:flex; align-items:center; gap:10px; }

/* -- Grace Marks column + bulk button -- */
.grace-input[b-2mzku3swj5] { width:4.5rem; border:1px solid var(--border); border-radius:8px; padding:6px 8px;
               background:transparent; color:inherit; font-size:13px; }
.grace-input:disabled[b-2mzku3swj5] { opacity:.5; cursor:default; }
.grid-actions[b-2mzku3swj5] { display:flex; justify-content:flex-end; margin-top:12px; }

/* -- import modal -- */
.popup-note[b-2mzku3swj5] { margin:-6px 0 16px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.popup-note code[b-2mzku3swj5] { background:var(--surface-2); border-radius:4px; padding:1px 5px; font-size:12px; }
.import-actions[b-2mzku3swj5] { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.file-btn[b-2mzku3swj5] { position:relative; overflow:hidden; }
.file-input[b-2mzku3swj5] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-meta[b-2mzku3swj5] { color:var(--muted); font-size:13px; }
.errors[b-2mzku3swj5] { margin:12px 0 0; padding-left:18px; color:#c02b3c; font-size:13px; display:flex; flex-direction:column; gap:4px; }
.count[b-2mzku3swj5] { color:var(--muted); font-size:13px; }
.count .total[b-2mzku3swj5] { color:var(--ink); }
/* /Pages/SubjectWiseSchedule.razor.rz.scp.css */
.cand-head[b-zw3pyzk5t1] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-zw3pyzk5t1] { margin: 0; color: var(--muted); font-size: 13.5px; }

.card[b-zw3pyzk5t1] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

/* Legacy-style plain bold counter (Countlbl) — same as AssignExaminer's / UpdateEndSchedule's status-card. */
.status-card[b-zw3pyzk5t1] { padding: 10px 18px; }
.status-card .count[b-zw3pyzk5t1] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-zw3pyzk5t1] { font-weight: 700; }

/* Filter grid — label above its control, same layout as AssignExaminer / AssignSubject / Candidates /
   Attendance / AssignExam's ".form.cascade" (legacy's col-sm-3 cells). min-width:0 lets a column
   shrink below the select's intrinsic width so a long option name cannot push the control out of the
   card. */
.form.cascade[b-zw3pyzk5t1] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-zw3pyzk5t1] { margin-bottom: 0; }
.form label[b-zw3pyzk5t1] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-zw3pyzk5t1], .form label input[b-zw3pyzk5t1] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-zw3pyzk5t1], .form label input:focus[b-zw3pyzk5t1] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-zw3pyzk5t1], .form label input:disabled[b-zw3pyzk5t1] { opacity: .55; cursor: not-allowed; }

/* Action + filter-grid placement and the Action dropdown itself come from the shared <ActionMenu>
   component and its global app.css rules (.action-and-filters, .action-menu, .action-items,
   ::deep .action-item) — no page-local copy needed. */

.btn[b-zw3pyzk5t1] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-zw3pyzk5t1] { background: var(--track); }
.btn.primary[b-zw3pyzk5t1] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-zw3pyzk5t1] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-zw3pyzk5t1] { opacity: .55; cursor: default; }

.grid[b-zw3pyzk5t1] { width: 100%; border-collapse: collapse; }
.grid thead th[b-zw3pyzk5t1] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-zw3pyzk5t1] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-zw3pyzk5t1] { border-bottom: none; }
.grid tbody tr:hover td[b-zw3pyzk5t1] { background: var(--surface-2); }
.grid .nm[b-zw3pyzk5t1] { font-weight: 600; }
.ta-c[b-zw3pyzk5t1] { text-align: center; }

.pad[b-zw3pyzk5t1] { padding: 22px 6px; }
.sub[b-zw3pyzk5t1] { color: var(--muted); font-size: 13px; }

.banner[b-zw3pyzk5t1] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-zw3pyzk5t1] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-zw3pyzk5t1] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-zw3pyzk5t1] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-zw3pyzk5t1] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

/* Trigger bar above the grid. Global app.css has ".toolbar .count { margin-left: auto }" for the
   filter row's own Total count (pushes it to the right, away from left-aligned filters) — that rule
   is unscoped, so it also matches this bar's "N selected" span and shoved the whole "N selected /
   Update Evaluation Last Date" cluster to the right of the card. Override it back to left-aligned
   here, same as UpdateEndSchedule / UpdateEndScheduleBulk's identical trigger bar. */
.update-bar .toolbar[b-zw3pyzk5t1] { display: flex; align-items: center; gap: 14px; }
.update-bar .count[b-zw3pyzk5t1] { margin-left: 0; }

/* AppModal renders .panel/.body/.acts, not a raw .date-panel div — unscoped here (Blazor CSS
   isolation already prevents leaking to other components) so they apply directly inside the modal's
   .body, same as the other evaluation-schedule pages' popups. */
.date-field[b-zw3pyzk5t1] { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); margin-top: 10px; }
.date-field input[b-zw3pyzk5t1] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
.date-field input:focus[b-zw3pyzk5t1] { outline: 2px solid var(--accent); outline-offset: -1px; }
.hint[b-zw3pyzk5t1] { margin: 6px 0 0; font-size: 12px; }
/* /Pages/ThirdEvaluation.razor.rz.scp.css */
.err-banner[b-mvsakiujwn] {
    margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
    background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b);
}

.head-actions[b-mvsakiujwn] { display: flex; align-items: center; gap: 10px; }

/* Cascade pickers stack their label above the control so four of them wrap cleanly. */
.toolbar label[b-mvsakiujwn] { flex-direction: column; align-items: flex-start; gap: 4px; }
.toolbar .session-select[b-mvsakiujwn],
.toolbar .course-select[b-mvsakiujwn] {
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
    background: transparent; color: inherit; min-width: 200px;
}
.toolbar .count[b-mvsakiujwn] { margin-left: auto; }

.card h3[b-mvsakiujwn] { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.grid td.nm[b-mvsakiujwn] { font-weight: 600; text-align: left; }

h5[b-mvsakiujwn] { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
ul[b-mvsakiujwn] { margin: 0 0 12px 18px; }
li[b-mvsakiujwn] { font-size: 13px; margin-bottom: 6px; }

.badge[b-mvsakiujwn] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.badge.warn[b-mvsakiujwn] {
    background: color-mix(in srgb, var(--bad) 16%, transparent);
    color: var(--bad);
}
/* /Pages/Timetable.razor.rz.scp.css */
/* HEADERS NEVER WRAP. word-break: break-word applied to <th> is what shattered "ACADEMIC YEAR"
   into "ACA DEM IC YEA R" and "TOTAL" into a vertical column of letters: with 25 narrow columns it
   broke mid-WORD rather than between words. Headers set the column width they need and keep it. */
.timetable-grid th[b-fvmjg4jq70] {
    white-space: nowrap;
    padding: 8px 10px;
    vertical-align: bottom;
}

/* Body cells wrap only between words -- overflow-wrap breaks inside a word solely when that single
   word cannot fit, which is what a long subject code needs and what a header never wants. */
.timetable-grid td[b-fvmjg4jq70] {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    padding: 8px 10px;
    vertical-align: middle;
}

/* Only the genuinely long text columns wrap; everything else is short enough to sit on one line,
   and letting them wrap is what made the rows tall and ragged. */
.timetable-grid td:nth-child(2)[b-fvmjg4jq70],
.timetable-grid td:nth-child(6)[b-fvmjg4jq70],
.timetable-grid td:nth-child(8)[b-fvmjg4jq70] {
    white-space: nowrap;
}

.timetable-grid td:nth-child(3)[b-fvmjg4jq70],
.timetable-grid td:nth-child(5)[b-fvmjg4jq70],
.timetable-grid td:nth-child(7)[b-fvmjg4jq70] {
    min-width: 150px;
    max-width: 240px;
}

.timetable-grid td.clickable[b-fvmjg4jq70] {
    cursor: pointer;
    color: var(--primary);
    text-decoration: underline;
}

/* Removed: this darkened a cell under the pointer, which is a hover colour change on a tinted row
   and exactly what was asked to stop. The cursor and the underline already say it is clickable. */

.timetable-grid td.zero-cell[b-fvmjg4jq70] {
    color: #888;
    cursor: default;
    text-decoration: none;
}

/* Superseded: partially-matched rows are tinted whole, so this per-cell pink is what produced the
   part-pink/part-dark rows. Kept as a no-op marker because the markup still tags the offending
   cells and a future design may want to mark them some other way. */
.timetable-grid td.highlight-pink[b-fvmjg4jq70] { background-color: inherit; }

/* ONE tint per row, applied to every cell of it. Two things were making this look striped:
   the colour sat on the <tr>, where each <td>'s own background painted over it; and
   partially-matched rows tinted only their offending CELLS, so a single row came out part pink and
   part dark. Both gone -- a row is entirely green or entirely red.

   Green is matched. Red is everything that is not matched: mismatched AND partially matched. They
   are no longer told apart by colour, deliberately, because half-tinting a row is what produced the
   patchwork; the Status column at the end of the row still names which it is.

   Text colour is set here too. These tints are fixed light pastels while --ink follows the theme,
   so in dark mode a tinted row was near-white text on pale green and could not be read. */
/* Tint and hover-tint declared TOGETHER, so hovering cannot repaint a row. The previous attempt
   used background-color: inherit to neutralise the shared .grid hover rule, and inherit takes the
   value from the PARENT <tr> -- which has no background of its own, so a hovered row fell through
   to the dark card behind it. That is the row going black. Stating the colour explicitly for both
   states leaves nothing to fall through to. */
/* The !important here is not decoration, it is the only thing that works. app.css carries
       .grid tbody tr:hover td { background: var(--track) !important; }
   a deliberate global rule so hover reads on top of the zebra striping (app.css:164, and the
   comment above it explains the intent). An !important declaration cannot be outranked by a normal
   one at ANY specificity, so every earlier attempt here lost and the hovered row took var(--track)
   -- dark in this theme, which is the row "going black". Matching important with important puts
   specificity back in charge, and these selectors outrank that one. */
.timetable-grid tr.matched > td[b-fvmjg4jq70],
.timetable-grid tr.matched:hover > td[b-fvmjg4jq70] {
    background-color: #C7FFCA !important;
    color: #14321a;
}

.timetable-grid tr.mismatched > td[b-fvmjg4jq70],
.timetable-grid tr.mismatched:hover > td[b-fvmjg4jq70],
.timetable-grid tr.partially-matched > td[b-fvmjg4jq70],
.timetable-grid tr.partially-matched:hover > td[b-fvmjg4jq70] {
    background-color: #FFD7D7 !important;
    color: #3d1418;
}

/* Same for a row carrying no tint (RowClass always assigns one today, so this is a safety net):
   it should show the card it sits on, hovered or not. */
.timetable-grid tbody tr:hover > td[b-fvmjg4jq70] {
    background-color: transparent !important;
}

/* The clickable counts. These were unreadable for the same inherit mistake: colour: inherit takes
   the <tr>'s colour, which is the THEME's light ink, so the links came out pale pink on pink. A
   stated dark blue reads as a link on both pastels and holds its contrast. */
.timetable-grid tr.matched > td.clickable[b-fvmjg4jq70],
.timetable-grid tr.mismatched > td.clickable[b-fvmjg4jq70],
.timetable-grid tr.partially-matched > td.clickable[b-fvmjg4jq70],
.timetable-grid tr.matched:hover > td.clickable[b-fvmjg4jq70],
.timetable-grid tr.mismatched:hover > td.clickable[b-fvmjg4jq70],
.timetable-grid tr.partially-matched:hover > td.clickable[b-fvmjg4jq70] {
    color: #0b3ea8;
    font-weight: 600;
    text-decoration: underline;
}

/* A zero count is not a link -- legible, but plainly quieter than the ones worth clicking. */
.timetable-grid tr.matched > td.zero-cell[b-fvmjg4jq70],
.timetable-grid tr.mismatched > td.zero-cell[b-fvmjg4jq70],
.timetable-grid tr.partially-matched > td.zero-cell[b-fvmjg4jq70] {
    color: #5a4a4a;
    text-decoration: none;
}

.btn.link[b-fvmjg4jq70] {
    background: none;
    border: none;
    color: var(--primary);
    text-decoration: underline;
    padding: 0;
    margin-right: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn.link:hover[b-fvmjg4jq70] {
    color: var(--primary-dark);
}

/* QA C2: the per-row Sync sits under the Subject ID, as legacy has it. Reads as a button rather than
   a link so it is not mistaken for the drill-down counts elsewhere in the grid. */
.btn.link.sync[b-fvmjg4jq70] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

/* The Sync pill sits inside the Subject ID cell, so on a highlighted row it inherits that cell's
   dark ink -- give it a matching border and background rather than the theme's. */
.timetable-grid tr.matched .btn.link.sync[b-fvmjg4jq70],
.timetable-grid tr.mismatched .btn.link.sync[b-fvmjg4jq70] {
    color: inherit;
    border-color: rgba(0, 0, 0, .28);
    background: rgba(255, 255, 255, .45);
}

.btn.link.sync:disabled[b-fvmjg4jq70] {
    opacity: .55;
    cursor: default;
}

/* Eligible For Moderation: the count and its refresh icon share the cell, so centre them on one
   baseline and drop the link underline -- an underlined icon reads as a broken glyph. */
.mod-count[b-fvmjg4jq70] {
    margin-right: 0.35rem;
}

.btn.link.mod-refresh[b-fvmjg4jq70] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0;
    text-decoration: none;
}

.help-text ul[b-fvmjg4jq70] {
    margin: 0;
    padding-left: 1.25rem;
}

.help-text li[b-fvmjg4jq70] {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.swatch[b-fvmjg4jq70] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

.swatch.matched[b-fvmjg4jq70] {
    background-color: #C7FFCA;
}

.swatch.mismatched[b-fvmjg4jq70] {
    background-color: #FFD7D7;
}

.swatch.partially-matched[b-fvmjg4jq70] {
    background-color: #fff;
}

/* Drill-down toolbar: count hard left, search + Export hard right. The shared .toolbar .count rule
   uses margin-left:auto to push the count to the RIGHT, which is correct on the main grid but the
   opposite of what is wanted here — so the count is reset to the left and the action pair takes the
   auto margin instead. */
.drill-toolbar .count[b-fvmjg4jq70] { margin-left: 0; margin-right: 0; }
.drill-toolbar .drill-actions[b-fvmjg4jq70] { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 720px) {
    .drill-toolbar .drill-actions[b-fvmjg4jq70] { margin-left: 0; width: 100%; }
}

/* QA "table borders are missing". The shared .grid draws a single bottom rule per row and nothing
   between columns (app.css:157-159), which is fine for a six-column list and unreadable across this
   grid's twenty-four — the eye has nothing to track a row against. Legacy's GridView renders full
   gridlines, so they are restored here, scoped to this page so every other grid keeps the lighter
   treatment.

   The colour is stated for tinted rows too: those cells set their background with !important, and a
   border in the theme's faint --border all but vanishes against the green and pink pastels. */
.timetable-grid th[b-fvmjg4jq70],
.timetable-grid td[b-fvmjg4jq70] {
    border: 1px solid var(--border);
}

.timetable-grid tr.matched > td[b-fvmjg4jq70],
.timetable-grid tr.mismatched > td[b-fvmjg4jq70],
.timetable-grid tr.partially-matched > td[b-fvmjg4jq70] {
    border-color: rgba(0, 0, 0, .18);
}
/* /Pages/UfmReport.razor.rz.scp.css */
/* Page-scoped bits the shared design system does not carry globally (head actions, the Help modal and the
   in-grid link button). Everything else — cand-head, card, toolbar, search, fld, grid, pager, banner — comes
   from app.css. */

.head-actions[b-zuw5o2qpwg] { display: flex; align-items: center; gap: 14px; }

.btn.link[b-zuw5o2qpwg] { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline;
            font-size: 13px; font-weight: 600; cursor: pointer; }
.btn.link:hover[b-zuw5o2qpwg] { filter: brightness(1.15); }

h5[b-zuw5o2qpwg] { margin: 14px 0 6px; }
ul[b-zuw5o2qpwg] { margin: 0 0 8px; padding-left: 20px; }
/* /Pages/UpdateEndSchedule.razor.rz.scp.css */
.cand-head[b-blratizjgg] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-blratizjgg] { margin: 0; color: var(--muted); font-size: 13.5px; }
.cand-head .back[b-blratizjgg] { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cand-head .back:hover[b-blratizjgg] { color: var(--ink); }

.card[b-blratizjgg] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-blratizjgg] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar .count[b-blratizjgg] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Legacy-style plain bold counter (TotalStudentsLbl et al.) — same as AssignExaminer's status-card. */
.status-card .count[b-blratizjgg] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-blratizjgg] { font-weight: 700; }

/* Filter grid — label above its control, same layout as AssignExaminer / AssignSubject / Candidates /
   Attendance / AssignExam's ".form.cascade" (legacy's col-sm-3 cells), instead of the inline
   label-beside-select row this page used before. min-width:0 lets a column shrink below the select's
   intrinsic width so a long option name cannot push the control out of the card. */
.form.cascade[b-blratizjgg] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-blratizjgg] { margin-bottom: 0; }
.form label[b-blratizjgg] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-blratizjgg], .form label input[b-blratizjgg] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-blratizjgg], .form label input:focus[b-blratizjgg] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-blratizjgg], .form label input:disabled[b-blratizjgg] { opacity: .55; cursor: not-allowed; }

/* Action + filter-grid placement (.action-and-filters, .action-menu/.action-toggle sizing) and the
   Action dropdown itself (.action-menu/.action-items/.action-item) come from the shared <ActionMenu>
   component's global rules in wwwroot/css/app.css — no page-local copy needed. The link variant of
   .action-item (the Bulk-page entry below) needs its own text-decoration reset since anchors default
   to underlined, which the button-only global rule doesn't cover. */
.action-item[b-blratizjgg] { text-decoration: none; }

.btn[b-blratizjgg] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-blratizjgg] { background: var(--track); }
.btn.primary[b-blratizjgg] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-blratizjgg] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-blratizjgg] { opacity: .55; cursor: default; }

.grid[b-blratizjgg] { width: 100%; border-collapse: collapse; }
.grid thead th[b-blratizjgg] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-blratizjgg] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-blratizjgg] { border-bottom: none; }
.grid tbody tr:hover td[b-blratizjgg] { background: var(--surface-2); }
.grid .nm[b-blratizjgg] { font-weight: 600; }
.ta-c[b-blratizjgg] { text-align: center; }

.pad[b-blratizjgg] { padding: 22px 6px; }
.sub[b-blratizjgg] { color: var(--muted); font-size: 13px; }

.banner[b-blratizjgg] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-blratizjgg] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-blratizjgg] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-blratizjgg] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-blratizjgg] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

/* Trigger bar above the grid + the new-schedule-date panel it opens. */
.update-bar .toolbar[b-blratizjgg] { display: flex; align-items: center; gap: 14px; }
.update-bar .count[b-blratizjgg] { margin-left: 0; }

/* The date panel is an <AppModal> (renders .panel.{width}/.body/.acts), not a raw .date-panel div --
   these rules used to target a DOM structure that predates the move to AppModal and never matched
   anything, so the date input rendered with zero custom styling. Unscoped here (Blazor CSS isolation
   already prevents leaking to other components) so they apply directly inside the modal's .body. */
.date-field[b-blratizjgg] { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); margin-top: 6px; }
.date-field input[b-blratizjgg] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
.date-field input:focus[b-blratizjgg] { outline: 2px solid var(--accent); outline-offset: -1px; }
/* /Pages/UpdateEndScheduleBulk.razor.rz.scp.css */
.cand-head[b-wwds4gklkw] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-wwds4gklkw] { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
/* Back + description on one row, vertically centred. The pill itself is app.css's .btn.back-btn --
   only the anchor's underline needs clearing, since app.css has no global text-decoration reset. */
.head-back[b-wwds4gklkw] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.head-back .btn.back-btn[b-wwds4gklkw] { text-decoration: none; }
.head-back .sub[b-wwds4gklkw] { margin: 0; }

.card[b-wwds4gklkw] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-wwds4gklkw] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar .count[b-wwds4gklkw] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Legacy-style plain bold counter (BulkCountlbl et al.) — same as AssignExaminer's status-card and
   Flow A's own Total Count. */
.status-card .count[b-wwds4gklkw] { color: #2f6cc9; font-size: 14px; font-weight: 700; }
.status-card .count b[b-wwds4gklkw] { font-weight: 700; }

/* Filter grid — label above its control, same layout as Flow A / AssignExaminer / AssignSubject /
   Candidates / Attendance / AssignExam's ".form.cascade" (legacy's col-sm-3 cells). min-width:0 lets a
   column shrink below the select's intrinsic width so a long option name cannot push the control out
   of the card. */
.form.cascade[b-wwds4gklkw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.filters[b-wwds4gklkw] { margin-bottom: 0; }
.form label[b-wwds4gklkw] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.form label select[b-wwds4gklkw], .form label input[b-wwds4gklkw] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.form label select:focus[b-wwds4gklkw], .form label input:focus[b-wwds4gklkw] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form label select:disabled[b-wwds4gklkw], .form label input:disabled[b-wwds4gklkw] { opacity: .55; cursor: not-allowed; }

/* Action + filter-grid placement and the Action dropdown itself come from the shared <ActionMenu>
   component and its global app.css rules (.action-and-filters, .action-menu, .action-items,
   ::deep .action-item) — no page-local copy needed. */

.btn[b-wwds4gklkw] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 5px; }
.btn:hover[b-wwds4gklkw] { background: var(--track); }
.btn.primary[b-wwds4gklkw] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-wwds4gklkw] { filter: brightness(1.06); background: var(--accent); }
.btn:disabled[b-wwds4gklkw] { opacity: .55; cursor: default; }

.grid[b-wwds4gklkw] { width: 100%; border-collapse: collapse; }
.grid thead th[b-wwds4gklkw] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-wwds4gklkw] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td[b-wwds4gklkw] { border-bottom: none; }
.grid tbody tr:hover td[b-wwds4gklkw] { background: var(--surface-2); }
.grid .nm[b-wwds4gklkw] { font-weight: 600; }
.ta-c[b-wwds4gklkw] { text-align: center; }

.pad[b-wwds4gklkw] { padding: 22px 6px; }
.sub[b-wwds4gklkw] { color: var(--muted); font-size: 13px; }

.banner[b-wwds4gklkw] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-wwds4gklkw] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-wwds4gklkw] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-wwds4gklkw] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-wwds4gklkw] { display: flex; align-items: center; gap: 12px; padding: 14px 2px 2px; }

/* Trigger bar above the grid + the new-schedule-date panel it opens. */
.update-bar .toolbar[b-wwds4gklkw] { display: flex; align-items: center; gap: 14px; }
.update-bar .count[b-wwds4gklkw] { margin-left: 0; }

/* AppModal renders .panel/.body/.acts, not a raw .date-panel div -- unscoped here (Blazor CSS
   isolation already prevents leaking to other components) so they apply directly inside the modal's
   .body, same as Flow A's own popup. */
.date-field[b-wwds4gklkw] { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--muted); margin-top: 6px; }
.date-field input[b-wwds4gklkw] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; width: 100%; box-sizing: border-box; }
.date-field input:focus[b-wwds4gklkw] { outline: 2px solid var(--accent); outline-offset: -1px; }
/* /Pages/UploadAnswerSheets.razor.rz.scp.css */
.count-val[b-0c48k0b1mv] { font-weight: 700; color: var(--ink); margin-right: 6px; }

.icon-btn[b-0c48k0b1mv] { border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
    border-radius: 8px; padding: 5px; display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s, border-color .12s; }
.icon-btn:hover[b-0c48k0b1mv] { background: var(--track); color: var(--ink); border-color: var(--border); }
.icon-btn:disabled[b-0c48k0b1mv] { opacity: .5; cursor: default; }

.pad[b-0c48k0b1mv] { padding: 22px 6px; }
.sub[b-0c48k0b1mv] { color: var(--muted); font-size: 13px; }

.banner[b-0c48k0b1mv] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-0c48k0b1mv] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-0c48k0b1mv] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-0c48k0b1mv] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.banner.warn[b-0c48k0b1mv] { background: rgba(217,155,17,.10); color: #a9720f; border: 1px solid rgba(217,155,17,.28); }

.msub[b-0c48k0b1mv] { margin: 0 0 18px; color: var(--muted); font-size: 13px; }

.detail-grid[b-0c48k0b1mv] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.detail-grid > div[b-0c48k0b1mv] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-grid label[b-0c48k0b1mv] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.detail-grid span[b-0c48k0b1mv] { font-size: 13.5px; color: var(--ink); word-break: break-word; }

.summary-row[b-0c48k0b1mv] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.stat-grid[b-0c48k0b1mv] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.stat-grid .stat[b-0c48k0b1mv] { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.stat-grid .stat label[b-0c48k0b1mv] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.stat-grid .stat span[b-0c48k0b1mv] { font-size: 18px; font-weight: 700; color: var(--ink); }

.upload-pick[b-0c48k0b1mv] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.file-btn[b-0c48k0b1mv] { position: relative; overflow: hidden; }
.file-btn[b-0c48k0b1mv]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.grid tbody td.ok[b-0c48k0b1mv] { color: var(--good); font-weight: 600; }
.grid tbody td.err[b-0c48k0b1mv] { color: #c02b3c; font-weight: 600; }
.grid tbody td.warn[b-0c48k0b1mv] { color: #a9720f; font-weight: 600; }

@media (max-width: 720px) {
    .detail-grid[b-0c48k0b1mv] { grid-template-columns: 1fr 1fr; }
    .stat-grid[b-0c48k0b1mv] { grid-template-columns: repeat(2, 1fr); }
}

/* QA: the subject total sat as plain grey text at the end of the toolbar and was routinely missed.
   Rendered as a pill so the number reads at a glance. */
.count.highlight[b-0c48k0b1mv] {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-soft, #eef2ff);
    color: var(--accent, #4338ca);
    border: 1px solid var(--accent-border, #c7d2fe);
    font-size: .85rem;
    white-space: nowrap;
}
.count.highlight b[b-0c48k0b1mv] { font-weight: 700; font-size: .95rem; }
/* /Pages/UploadExcelAnswerSheets.razor.rz.scp.css */
.form.cascade[b-ygz8edbkjk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-ygz8edbkjk] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-ygz8edbkjk] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.form select[b-ygz8edbkjk] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-ygz8edbkjk] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-ygz8edbkjk] { opacity: .55; }
.req[b-ygz8edbkjk] { color: #c02b3c; margin-left: 3px; }

@media (max-width: 900px) {
    .form.cascade[b-ygz8edbkjk] { grid-template-columns: repeat(2, 1fr); }
}

.section-head[b-ygz8edbkjk] { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }

.pad[b-ygz8edbkjk] { padding: 22px 6px; }
.sub[b-ygz8edbkjk] { color: var(--muted); font-size: 13px; }

.banner[b-ygz8edbkjk] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.err[b-ygz8edbkjk] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.warn[b-ygz8edbkjk] { background: rgba(217,155,17,.10); color: #a9720f; border: 1px solid rgba(217,155,17,.28); }

.stat-grid[b-ygz8edbkjk] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.stat-grid .stat[b-ygz8edbkjk] { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.stat-grid .stat label[b-ygz8edbkjk] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.stat-grid .stat span[b-ygz8edbkjk] { font-size: 18px; font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
    .stat-grid[b-ygz8edbkjk] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .stat-grid[b-ygz8edbkjk] { grid-template-columns: repeat(2, 1fr); }
}

.upload-pick[b-ygz8edbkjk] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.file-btn[b-ygz8edbkjk] { position: relative; overflow: hidden; }
.file-btn[b-ygz8edbkjk]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.grid tbody td.ok[b-ygz8edbkjk] { color: var(--good); font-weight: 600; }
.grid tbody td.err[b-ygz8edbkjk] { color: #c02b3c; font-weight: 600; }

.toolbar .count[b-ygz8edbkjk] { color: var(--muted); font-size: 13px; margin-right: auto; }
/* /Pages/UploadMultipleAnswerSheets.razor.rz.scp.css */
.cand-head[b-ojbwdqqxs0] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-ojbwdqqxs0] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-ojbwdqqxs0] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.card[b-ojbwdqqxs0] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.form.cascade[b-ojbwdqqxs0] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.form label[b-ojbwdqqxs0] { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.form label select[b-ojbwdqqxs0] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.req[b-ojbwdqqxs0] { color: #dc2626; margin-left: 3px; }
.form select[b-ojbwdqqxs0] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
               border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.form select:focus[b-ojbwdqqxs0] { outline: 2px solid var(--accent); outline-offset: -1px; }
.form select:disabled[b-ojbwdqqxs0] { opacity: .6; }
@media (max-width: 900px) { .form.cascade[b-ojbwdqqxs0] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .form.cascade[b-ojbwdqqxs0] { grid-template-columns: 1fr; } }

.group-head[b-ojbwdqqxs0] { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              color: var(--faint); margin-bottom: 10px; }

.stat-grid[b-ojbwdqqxs0] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.stat-grid .stat[b-ojbwdqqxs0] { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.stat-grid .stat label[b-ojbwdqqxs0] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.stat-grid .stat span[b-ojbwdqqxs0] { font-size: 18px; font-weight: 700; color: var(--ink); }
@media (max-width: 1000px) { .stat-grid[b-ojbwdqqxs0] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stat-grid[b-ojbwdqqxs0] { grid-template-columns: repeat(2, 1fr); } }

.upload-pick[b-ojbwdqqxs0] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.file-btn[b-ojbwdqqxs0] { position: relative; overflow: hidden; }
.file-btn[b-ojbwdqqxs0]  .file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.summary-line[b-ojbwdqqxs0] { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.summary-line b[b-ojbwdqqxs0] { color: var(--ink); font-variant-numeric: tabular-nums; }

.table-scroll[b-ojbwdqqxs0] { overflow-x: auto; }
.grid[b-ojbwdqqxs0] { width: 100%; border-collapse: collapse; }
.grid thead th[b-ojbwdqqxs0] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-ojbwdqqxs0] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-ojbwdqqxs0] { border-bottom: none; }
.grid tbody tr:hover td[b-ojbwdqqxs0] { background: var(--surface-2); }
.grid .nm[b-ojbwdqqxs0] { font-weight: 600; }
.grid tbody td.ok[b-ojbwdqqxs0] { color: var(--good); font-weight: 600; }
.grid tbody td.err[b-ojbwdqqxs0] { color: #c02b3c; font-weight: 600; }
.ta-c[b-ojbwdqqxs0] { text-align: center; }

.toolbar[b-ojbwdqqxs0] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .filter-select[b-ojbwdqqxs0] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 7px 10px; font-size: 13px; }
.toolbar .count[b-ojbwdqqxs0] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-ojbwdqqxs0] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-ojbwdqqxs0] { background: var(--track); }
.btn.primary[b-ojbwdqqxs0] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-ojbwdqqxs0] { filter: brightness(1.05); }
.btn.ghost[b-ojbwdqqxs0] { background: transparent; }
.btn.danger[b-ojbwdqqxs0] { color: #c02b3c; border-color: transparent; background: transparent; }
.btn.danger:hover[b-ojbwdqqxs0] { background: rgba(192,43,60,.08); }
.btn:disabled[b-ojbwdqqxs0] { opacity: .6; cursor: default; }

.pad[b-ojbwdqqxs0] { padding: 22px 6px; }
.sub[b-ojbwdqqxs0] { color: var(--muted); }

.banner[b-ojbwdqqxs0] { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.banner.ok[b-ojbwdqqxs0] { background: var(--tile-green-bg); color: var(--good); border: 1px solid transparent; }
.banner.err[b-ojbwdqqxs0] { background: rgba(192,43,60,.08); color: #c02b3c; border: 1px solid rgba(192,43,60,.2); }
.banner.info[b-ojbwdqqxs0] { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.pager[b-ojbwdqqxs0] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }
/* /Pages/UserLogs.razor.rz.scp.css */
/* QA #2417 A — the search bar is the first thing on the page, top-left, with the Help (?) icon
   immediately beside it; the page caption drops underneath so neither control is pushed right. */
.cand-head[b-jihr2arkq2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.head-search[b-jihr2arkq2] { display: flex; align-items: center; gap: 8px; }
.head-search[b-jihr2arkq2]  .search-box { min-width: 320px; }
.head-search[b-jihr2arkq2]  .search-box .search { width: 100%; }
.cand-head .sub[b-jihr2arkq2] { margin: 0; }

/* QA #2417 B — Log Type | From Date | To Date | Apply on one line. The row is a `.form.cascade`,
   so the column rhythm and the 38px control box come from ui-standards.css; only the Apply cell
   is stated here. The button no longer stretches to a whole 220px column — that is what made it
   look oversized — and keeps the controls' baseline. */
.logs-filters[b-jihr2arkq2] { padding: 16px; margin: 0; }

/* ui-standards.css lays `.form.cascade` out as a grid of `minmax(220px, 1fr)` columns, which puts
   Apply in a full-width column of its own and wraps it onto a second row as soon as the content
   area is under ~900px. QA asked for one line, so this row is a flex strip instead: the fields keep
   the standard 220px basis (a two-field row still matches a four-field one) but may shrink to 160px
   before anything wraps, and Apply only takes the width it needs. Beats the standard's `!important`
   on specificity — three classes plus the scope attribute against two classes. */
.form.cascade.logs-filters[b-jihr2arkq2] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end !important;
    grid-template-columns: none !important;
}
.logs-filters > label[b-jihr2arkq2] { flex: 0 1 var(--fld-col); min-width: 160px; }
.apply-cell[b-jihr2arkq2] { display: flex; align-items: flex-end; flex: 0 0 auto; }
.btn.apply[b-jihr2arkq2] {
    height: 36px;
    min-width: 92px;
    padding: 0 20px;
    justify-content: center;
}

/* QA #2417 D — Export, the count label and the count value share one line, and the count is
   highlighted so the operator can read the total at a glance. */
.logs-summary[b-jihr2arkq2] { padding: 12px 16px; gap: 14px; align-items: center; }
.count-chip[b-jihr2arkq2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.count-chip b[b-jihr2arkq2] { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

.col-sr[b-jihr2arkq2] { width: 74px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Help ("User Logs Page Description"), same shape as the other pages' Help dialogs: bounded height
   with only the body scrolling, so the header and Close stay put. */
.help-body[b-jihr2arkq2] { max-height: 60vh; overflow-y: auto; padding: 14px 0; }
.help-body h3[b-jihr2arkq2] { margin: 10px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.help-body h3:first-child[b-jihr2arkq2] { margin-top: 0; }
.help-body ul[b-jihr2arkq2] { margin: 0; padding-left: 20px; }
.help-body li[b-jihr2arkq2] { font-size: 13px; color: var(--muted); line-height: 1.6; }

.tabs[b-jihr2arkq2] { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.tab[b-jihr2arkq2] {
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tab:hover[b-jihr2arkq2] { color: var(--ink); }
.tab.on[b-jihr2arkq2] { color: var(--primary, #2f6cc9); border-bottom-color: var(--primary, #2f6cc9); }

.table-scroll[b-jihr2arkq2] { overflow-x: auto; }
.err-inline[b-jihr2arkq2] { color: var(--danger, #c0392b); font-size: .85rem; }

/* The archive viewer is an external, self-contained (dark) page, so it gets a plain framed block
   rather than admin-panel chrome. Sized to fill the working area without a nested scrollbar race. */
.archive-note[b-jihr2arkq2] { padding-bottom: 0; }
.archive-frame[b-jihr2arkq2] {
    display: block;
    width: 100%;
    height: min(78vh, 900px);
    min-height: 460px;
    border: 0;
    border-radius: var(--radius);
}

@media (max-width: 560px) {
    .head-search[b-jihr2arkq2] { width: 100%; }
    .head-search[b-jihr2arkq2]  .search-box { min-width: 0; flex: 1; }
    .logs-filters > label[b-jihr2arkq2] { flex: 1 1 100%; }
}
/* /Pages/VerificationStatus.razor.rz.scp.css */
.cand-head[b-t3bk2i8f5a] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-t3bk2i8f5a] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-t3bk2i8f5a] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.card[b-t3bk2i8f5a] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.view-toggle[b-t3bk2i8f5a] { display: flex; gap: 8px; }

.toolbar[b-t3bk2i8f5a] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar label[b-t3bk2i8f5a] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.toolbar input:is([type="date"], [data-osm-date])[b-t3bk2i8f5a] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                               border-radius: 9px; padding: 7px 10px; font-size: 13.5px; }
.count[b-t3bk2i8f5a] { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.btn[b-t3bk2i8f5a] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-t3bk2i8f5a] { background: var(--track); }
.btn.primary[b-t3bk2i8f5a] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-t3bk2i8f5a] { filter: brightness(1.05); }
.btn.ghost[b-t3bk2i8f5a] { background: transparent; }
.btn:disabled[b-t3bk2i8f5a] { opacity: .6; cursor: default; }

.grid[b-t3bk2i8f5a] { width: 100%; border-collapse: collapse; }
.grid thead th[b-t3bk2i8f5a] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.grid tbody td[b-t3bk2i8f5a] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-t3bk2i8f5a] { border-bottom: none; }
.grid tbody tr:hover td[b-t3bk2i8f5a] { background: var(--surface-2); }
.grid .nm[b-t3bk2i8f5a] { font-weight: 600; }

.pad[b-t3bk2i8f5a] { padding: 22px 6px; }
.sub[b-t3bk2i8f5a] { color: var(--muted); }

.pager[b-t3bk2i8f5a] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }

.head-actions[b-t3bk2i8f5a] { display: flex; align-items: center; gap: 14px; }

.err-banner[b-t3bk2i8f5a] {
    margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
    background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b);
}

h5[b-t3bk2i8f5a] { margin: 14px 0 6px; }
ul[b-t3bk2i8f5a] { margin: 0 0 8px; padding-left: 20px; }


/* QA J1-J3: filters as stacked rows — search, then the controls, then the total. Every control is a
   labelled cell so the inputs share a baseline; .btn-cell gets an empty label so its button lines up
   with the date inputs rather than riding a label's height higher. The total is left-aligned. */
.filters[b-t3bk2i8f5a] { display: flex; flex-direction: column; gap: 12px; }
.filters .search-row[b-t3bk2i8f5a] { display: flex; justify-content: flex-start; }
.filters .search-row[b-t3bk2i8f5a]  .search-box { min-width: min(420px, 100%); }
.filters .search-row[b-t3bk2i8f5a]  .search-box .search { flex: 1; width: 100%; }
.filters .toolbar[b-t3bk2i8f5a] { align-items: end; }
.filters .btn-cell[b-t3bk2i8f5a] { display: flex; flex-direction: column; gap: 5px; }
.filters .lbl-spacer[b-t3bk2i8f5a] { display: block; height: 12px; }
.filters .count-row[b-t3bk2i8f5a] { display: flex; justify-content: flex-start; }
/* /Pages/VerifyAnswerSheets.razor.rz.scp.css */
.cand-head[b-do5k9aajbq] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cand-head .sub[b-do5k9aajbq] { margin: 0; color: var(--muted); font-size: 13.5px; }
.back[b-do5k9aajbq] { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.head-actions[b-do5k9aajbq] { display: flex; align-items: center; gap: 14px; }

.card[b-do5k9aajbq] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }

.toolbar[b-do5k9aajbq] { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.toolbar .fld[b-do5k9aajbq] { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.toolbar .fld.grow[b-do5k9aajbq] { flex: 1; min-width: 240px; }
.toolbar input:is([type="date"], [data-osm-date])[b-do5k9aajbq],
.toolbar select[b-do5k9aajbq] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
                   border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.toolbar select[b-do5k9aajbq] { width: 100%; }

.btn[b-do5k9aajbq] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; transition: background .12s, border-color .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-do5k9aajbq] { background: var(--track); }
.btn.primary[b-do5k9aajbq] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-do5k9aajbq] { filter: brightness(1.05); }
.btn.ghost[b-do5k9aajbq] { background: transparent; }
.btn:disabled[b-do5k9aajbq] { opacity: .6; cursor: default; }

.counts[b-do5k9aajbq] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.counts .stat[b-do5k9aajbq] { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.counts .k[b-do5k9aajbq] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.counts .v[b-do5k9aajbq] { color: var(--ink); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.table-scroll[b-do5k9aajbq] { overflow-x: auto; }
.grid[b-do5k9aajbq] { width: 100%; border-collapse: collapse; }
.grid thead th[b-do5k9aajbq] { text-align: left; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em;
                 text-transform: uppercase; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid tbody td[b-do5k9aajbq] { padding: 11px 12px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border);
                 vertical-align: middle; }
.grid tbody tr:last-child td[b-do5k9aajbq] { border-bottom: none; }
.grid tbody tr:hover td[b-do5k9aajbq] { background: var(--surface-2); }
.grid .nm[b-do5k9aajbq] { font-weight: 600; }

.pad[b-do5k9aajbq] { padding: 22px 6px; }
.sub[b-do5k9aajbq] { color: var(--muted); }

.pager[b-do5k9aajbq] { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }

.help-list[b-do5k9aajbq] { margin: 0 0 8px; padding-left: 20px; }
.help-list li[b-do5k9aajbq] { margin-bottom: 8px; }
/* /Pages/VerifyBooklet.razor.rz.scp.css */
/* Legacy BookletVerification.aspx put the scan in a col-sm-7 and the verification controls in a col-sm-5.
   Same split here, with the details column pinned so it stays usable while the booklet scrolls. */
.verify-shell[b-985hn1qv80] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
    gap: 16px;
    align-items: start;
    padding: 16px;
}

.pane[b-985hn1qv80] {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 18px;
}

.pane.booklet[b-985hn1qv80] { min-width: 0; }
.pane.details[b-985hn1qv80] { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }

.details h1[b-985hn1qv80] { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }

/* QA G review: Help now sits beside the h1, like the head-actions row on its sibling pages. */
.details-head[b-985hn1qv80] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

/* Same page layout as the standalone viewer — the renderer emits the same .bk-page / .bk-page-stack nodes,
   and scoped CSS does not cross component boundaries, so it is restated here rather than shared. */
.booklet-pages[b-985hn1qv80] { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.booklet-pages[b-985hn1qv80]  .bk-page { width: 100%; max-width: 1000px; }
.booklet-pages[b-985hn1qv80]  .bk-page-no { color: var(--faint); font-size: 11px; font-weight: 700;
                                    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.booklet-pages[b-985hn1qv80]  .bk-page-stack { position: relative; line-height: 0; height: 0; }
.booklet-pages[b-985hn1qv80]  .bk-page-stack:has(canvas) { height: auto; padding-top: 0 !important; }
.booklet-pages[b-985hn1qv80]  canvas { width: 100%; height: auto; display: block; border: 1px solid var(--border);
                               border-radius: 6px; background: #fff;
                               user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.pane.booklet .toolbar[b-985hn1qv80] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pane.booklet .toolbar .hint[b-985hn1qv80] { color: var(--muted); font-size: 12px; }

.facts[b-985hn1qv80] { margin: 0 0 16px; display: grid; gap: 10px; }
.facts dt[b-985hn1qv80] { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.facts dd[b-985hn1qv80] { margin: 2px 0 0; font-size: 14px; color: var(--ink); }
.facts dd.nm[b-985hn1qv80] { font-weight: 600; }

.counts[b-985hn1qv80] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.counts .stat[b-985hn1qv80] { display: flex; flex-direction: column; gap: 4px; background: var(--surface-2);
                border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.counts .k[b-985hn1qv80] { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.counts .v[b-985hn1qv80] { color: var(--ink); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.pagecounts[b-985hn1qv80] { list-style: none; margin: 0 0 16px; padding: 10px 12px; font-size: 12.5px; color: var(--muted);
              background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 4px; }
.pagecounts b[b-985hn1qv80] { color: var(--ink); font-variant-numeric: tabular-nums; }
.pagecounts .mismatch[b-985hn1qv80], .pagecounts .mismatch b[b-985hn1qv80] { color: var(--bad, #c0392b); font-weight: 700; }

.rollno[b-985hn1qv80] { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600;
          color: var(--muted); margin-bottom: 14px; }
.rollno-input[b-985hn1qv80], .reason-input[b-985hn1qv80] {
    border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
    border-radius: 9px; padding: 9px 11px; font-size: 14px; width: 100%;
}

.actions[b-985hn1qv80] { display: flex; flex-wrap: wrap; gap: 10px; }

.btn[b-985hn1qv80] { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer;
       border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600;
       transition: background .12s, border-color .12s, filter .12s;
       display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-985hn1qv80] { background: var(--track); }
.btn.primary[b-985hn1qv80] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover[b-985hn1qv80] { filter: brightness(1.05); }
.btn.ghost[b-985hn1qv80] { background: transparent; }
.btn:disabled[b-985hn1qv80] { opacity: .6; cursor: default; }

/* Legacy's .gb / .rb button colours: Approve green, Reject red. */
.btn.approve[b-985hn1qv80] { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.btn.approve:hover[b-985hn1qv80] { filter: brightness(1.08); }
.btn.reject[b-985hn1qv80] { background: #c0504d; border-color: #c0504d; color: #fff; }
.btn.reject:hover[b-985hn1qv80] { filter: brightness(1.08); }

.btn.magnifier.on[b-985hn1qv80] { border-color: var(--accent); color: var(--accent); }

.pad[b-985hn1qv80] { padding: 22px 6px; }
.sub[b-985hn1qv80] { color: var(--muted); }

.err-banner[b-985hn1qv80] { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
              background: rgba(220, 53, 69, .12); color: var(--bad, #c0392b); }

.err-text[b-985hn1qv80] { margin: 0 0 6px; color: var(--bad, #c0392b); font-size: 14px; }
.err-text.validator[b-985hn1qv80] { margin-top: 6px; font-size: 13px; }
.reason[b-985hn1qv80] { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink); }
.reason .req[b-985hn1qv80] { color: var(--bad, #c0392b); }

/* Legacy tinted the confirmation panel lightgreen on approve and lightpink on reject. */
.decision-text[b-985hn1qv80] { margin: 0; font-size: 15px; font-weight: 600; text-align: center; }
.decision-outcome[b-985hn1qv80] { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.decision-outcome.verified[b-985hn1qv80] { border-color: #1f8a4c; background: rgba(31, 138, 76, .12); }
.decision-outcome.rejected[b-985hn1qv80] { border-color: #c0504d; background: rgba(192, 80, 77, .12); }

@media (max-width: 1000px) {
    .verify-shell[b-985hn1qv80] { grid-template-columns: minmax(0, 1fr); }
    .pane.details[b-985hn1qv80] { position: static; max-height: none; }
}
