/* ===========================================================================
   Staff Assessment — UI design system
   ---------------------------------------------------------------------------
   EVERYTHING here is scoped under .sa-ui. Nothing in this file can reach any
   other screen, and no AdminLTE / Bootstrap rule is overridden globally. If a
   rule here ever needs `!important`, raise the .sa-ui specificity instead.

   Colour is NOT invented. The ink, hairline and blue ramp are the validated
   reference data-viz palette, used at its published steps:
     ordinal ramp (light surface) starts no lighter than blue step 250.
   Cards render on #ffffff, which is marginally LIGHTER than the palette's
   #fcfcfb reference surface, so every published contrast floor still holds.
   Status colours are the fixed status palette and always ship with an icon or
   a word — never colour alone.

   Light only, deliberately: the host app has no dark mode, and the skill's
   rule is that dark mode is selected and validated, never an automatic flip.
   =========================================================================== */

.sa-ui {
    /* surfaces + ink */
    --sa-plane:        #f7f7f5;
    --sa-surface:      #ffffff;
    --sa-surface-2:    #faf9f7;
    --sa-bg:           #f1f0ec;   /* the sheet cards sit on — never the same white as a card */
    --sa-ink:          #0b0b0b;
    --sa-ink-2:        #52514e;
    --sa-muted:        #898781;
    --sa-line:         #e1e0d9;
    --sa-ring:         rgba(11, 11, 11, 0.10);

    /* accent — blue ramp */
    --sa-accent:       #2a78d6;  /* 450 */
    --sa-accent-dark:  #1c5cab;  /* 550 */
    --sa-accent-soft:  #eaf2fd;

    /* ordinal ramp, light→dark (250 / 350 / 450 / 550 / 650) */
    --sa-ord-1:        #86b6ef;
    --sa-ord-2:        #5598e7;
    --sa-ord-3:        #2a78d6;
    --sa-ord-4:        #1c5cab;
    --sa-ord-5:        #104281;

    /* status — fixed, never themed */
    --sa-good:         #0ca30c;
    --sa-good-ink:     #006300;
    --sa-good-soft:    #e8f6e8;
    --sa-warn:         #fab219;
    --sa-warn-ink:     #7a5200;
    --sa-warn-soft:    #fdf3dd;
    --sa-crit:         #d03b3b;
    --sa-crit-ink:     #9b2525;
    --sa-crit-soft:    #fbeaea;
    --sa-idle-soft:    #f0efec;

    --sa-radius:       14px;
    --sa-radius-sm:    10px;
    --sa-radius-lg:    18px;   /* the outer sheet */
    --sa-radius-pill:  999px;  /* chips, pills, search field */
    --sa-shadow:       0 1px 2px rgba(11,11,11,.04), 0 2px 8px rgba(11,11,11,.05);

    color: var(--sa-ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* --------------------------------------------------------------- page head */
.sa-ui .sa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sa-ui .sa-head-text { min-width: 0; }
.sa-ui .sa-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sa-muted); margin-bottom: 2px; }
.sa-ui .sa-title { font-size: 21px; font-weight: 650; color: var(--sa-ink); margin: 0; line-height: 1.25; }
.sa-ui .sa-sub { font-size: 13px; color: var(--sa-ink-2); margin-top: 3px; }
.sa-ui .sa-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- cards */
.sa-ui .sa-card { background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important; box-shadow: var(--sa-shadow); margin-bottom: 16px; overflow: hidden; }
.sa-ui .sa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--sa-line); background: var(--sa-surface-2); }
.sa-ui .sa-card-title { font-size: 14px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; }
.sa-ui .sa-card-title i { color: var(--sa-accent); }
.sa-ui .sa-count { font-size: 12px; font-weight: 600; color: var(--sa-ink-2); background: var(--sa-idle-soft); border-radius: 20px !important; padding: 1px 9px; }
.sa-ui .sa-card-body { padding: 18px; }
.sa-ui .sa-card-body.is-flush { padding: 0; }

/* ----------------------------------------------------------------- filters */
.sa-ui .sa-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; align-items: end; }
.sa-ui .sa-field label { display: block; font-size: 12px; font-weight: 600; color: var(--sa-ink-2); margin-bottom: 5px; }
.sa-ui .sa-field .form-control,
.sa-ui .sa-field select,
.sa-ui .sa-field input[type=text] { width: 100%; height: 36px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; padding: 0 11px; font-size: 13px; color: var(--sa-ink); background: var(--sa-surface); box-shadow: none; }
.sa-ui .sa-field select[multiple] { height: auto; min-height: 108px; padding: 7px 9px; }
.sa-ui .sa-field .form-control:focus,
.sa-ui .sa-field select:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 3px var(--sa-accent-soft); }

/* ----------------------------------------------------------------- buttons */
.sa-ui .sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--sa-radius-sm) !important; border: 1px solid var(--sa-ring); background: var(--sa-surface); color: var(--sa-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; text-decoration: none; }
.sa-ui .sa-btn:hover { background: var(--sa-surface-2); border-color: var(--sa-muted); color: var(--sa-ink); text-decoration: none; }
.sa-ui .sa-btn:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }
.sa-ui .sa-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sa-ui .sa-btn-primary { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; }
.sa-ui .sa-btn-primary:hover { background: var(--sa-accent-dark); border-color: var(--sa-accent-dark); color: #fff; }
.sa-ui .sa-btn-danger { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-crit-ink); }
.sa-ui .sa-btn-danger:hover { background: var(--sa-crit-soft); border-color: var(--sa-crit); color: var(--sa-crit-ink); }
.sa-ui .sa-btn-sm { height: 29px; padding: 0 10px; font-size: 12px; border-radius: 6px !important; }
.sa-ui .sa-btn-block { width: 100%; }

/* ------------------------------------------------------------------- chips */
.sa-ui .sa-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 20px !important; white-space: nowrap; }
.sa-ui .sa-chip i { font-size: 10px; }
.sa-ui .sa-chip--good { background: var(--sa-good-soft); color: var(--sa-good-ink); }
.sa-ui .sa-chip--warn { background: var(--sa-warn-soft); color: var(--sa-warn-ink); }
.sa-ui .sa-chip--crit { background: var(--sa-crit-soft); color: var(--sa-crit-ink); }
.sa-ui .sa-chip--info { background: var(--sa-accent-soft); color: var(--sa-accent-dark); }
.sa-ui .sa-chip--idle { background: var(--sa-idle-soft); color: var(--sa-ink-2); }

/* ------------------------------------------------------------------ tables */
.sa-ui .sa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sa-ui .sa-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; color: var(--sa-muted); padding: 10px 14px; border-bottom: 1px solid var(--sa-line); background: var(--sa-surface-2); white-space: nowrap; }
.sa-ui .sa-table td { padding: 11px 14px; border-bottom: 1px solid var(--sa-line); color: var(--sa-ink); vertical-align: middle; }
.sa-ui .sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-ui .sa-table tbody tr:hover td { background: var(--sa-surface-2); }
.sa-ui .sa-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-ui .sa-table .is-mid { text-align: center; }
.sa-ui .sa-strong { font-weight: 650; }
.sa-ui .sa-dim { color: var(--sa-muted); }
.sa-ui .sa-sub-line { font-size: 12px; color: var(--sa-muted); margin-top: 1px; }
.sa-ui .sa-scroll { overflow-x: auto; }

/* ------------------------------------------------------------- stat tiles */
.sa-ui .sa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
.sa-ui .sa-stat { background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius-sm) !important; padding: 13px 15px; }
.sa-ui .sa-stat-v { font-size: 25px; font-weight: 680; line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--sa-ink); }
.sa-ui .sa-stat-l { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); margin-top: 5px; }
.sa-ui .sa-stat--good .sa-stat-v { color: var(--sa-good-ink); }
.sa-ui .sa-stat--warn .sa-stat-v { color: var(--sa-warn-ink); }
.sa-ui .sa-stat--accent .sa-stat-v { color: var(--sa-accent-dark); }

/* ------------------------------------------------------------------ meters */
.sa-ui .sa-meters { display: flex; flex-direction: column; gap: 9px; }
.sa-ui .sa-meter { display: grid; grid-template-columns: minmax(84px, 150px) 1fr auto; align-items: center; gap: 12px; }
.sa-ui .sa-meter-l { font-size: 12.5px; color: var(--sa-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-ui .sa-meter-track { height: 9px; background: var(--sa-idle-soft); border-radius: 5px !important; overflow: hidden; }
.sa-ui .sa-meter-fill { height: 9px; border-radius: 5px !important; background: var(--sa-accent); min-width: 2px; }
.sa-ui .sa-meter-v { font-size: 12.5px; font-weight: 650; color: var(--sa-ink); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.sa-ui .sa-ord-1 { background: var(--sa-ord-1); }
.sa-ui .sa-ord-2 { background: var(--sa-ord-2); }
.sa-ui .sa-ord-3 { background: var(--sa-ord-3); }
.sa-ui .sa-ord-4 { background: var(--sa-ord-4); }
.sa-ui .sa-ord-5 { background: var(--sa-ord-5); }

/* ------------------------------------------------------- assessment cards */
.sa-ui .sa-exam { background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important; padding: 15px 17px; margin-bottom: 11px; transition: border-color .12s, box-shadow .12s; }
.sa-ui .sa-exam:hover { border-color: var(--sa-muted); box-shadow: var(--sa-shadow); }
.sa-ui .sa-exam-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sa-ui .sa-exam-name { font-size: 15.5px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .sa-exam-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 9px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sa-exam-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sa-ui .sa-exam-meta i { color: var(--sa-muted); width: 13px; text-align: center; }
.sa-ui .sa-exam-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--sa-line); }
.sa-ui .sa-score { font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .sa-score b { font-size: 17px; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .sa-locked { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sa-locked i { color: var(--sa-muted); }

/* -------------------------------------------------------------------- tabs */
.sa-ui .sa-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sa-line); margin-bottom: 16px; overflow-x: auto; }
.sa-ui .sa-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--sa-ink-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.sa-ui .sa-tab:hover { color: var(--sa-ink); }
.sa-ui .sa-tab.is-on { color: var(--sa-accent-dark); border-bottom-color: var(--sa-accent); }
.sa-ui .sa-tab-n { font-size: 11px; font-weight: 700; background: var(--sa-idle-soft); color: var(--sa-ink-2); border-radius: 20px !important; padding: 1px 7px; }
.sa-ui .sa-tab.is-on .sa-tab-n { background: var(--sa-accent-soft); color: var(--sa-accent-dark); }

/* ------------------------------------------------------ empty + messages */
.sa-ui .sa-empty { text-align: center; padding: 38px 20px; color: var(--sa-ink-2); }
.sa-ui .sa-empty i { font-size: 30px; color: var(--sa-line); display: block; margin-bottom: 11px; }
.sa-ui .sa-empty-t { font-size: 14.5px; font-weight: 650; color: var(--sa-ink); margin-bottom: 3px; }
.sa-ui .sa-empty-s { font-size: 13px; }
.sa-ui .sa-msg { display: none; align-items: flex-start; gap: 9px; font-size: 13px; padding: 10px 13px; border-radius: var(--sa-radius-sm) !important; margin-bottom: 14px; }
.sa-ui .sa-msg.is-on { display: flex; }
.sa-ui .sa-msg--good { background: var(--sa-good-soft); color: var(--sa-good-ink); }
.sa-ui .sa-msg--bad { background: var(--sa-crit-soft); color: var(--sa-crit-ink); }
.sa-ui .sa-note { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--sa-ink-2); background: var(--sa-accent-soft); border-radius: var(--sa-radius-sm) !important; padding: 10px 13px; }
.sa-ui .sa-note i { color: var(--sa-accent-dark); margin-top: 2px; }

/* ------------------------------------------------------------------ misc */
.sa-ui .sa-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--sa-surface-2); border-bottom: 1px solid var(--sa-line); }
.sa-ui .sa-sel-n { font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sa-sel-n b { color: var(--sa-ink); }
.sa-ui input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--sa-accent); cursor: pointer; vertical-align: middle; }
.sa-ui .sa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media (max-width: 991px) {
    .sa-ui .sa-split { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .sa-ui .sa-head { flex-direction: column; align-items: stretch; }
    .sa-ui .sa-card-body { padding: 14px; }
    .sa-ui .sa-meter { grid-template-columns: 1fr auto; }
    .sa-ui .sa-meter-track { grid-column: 1 / -1; }
    .sa-ui .sa-exam-top { flex-direction: column; }
    .sa-ui .sa-stat-v { font-size: 21px; }
}

@media print {
    .sa-ui .sa-btn, .sa-ui .sa-tabs { display: none; }
    .sa-ui .sa-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ===========================================================================
   ADOPTION LAYER — makes the SHARED AdminLTE grid look like the rest of the
   redesign, but ONLY while it is rendered inside .sa-ui.
   ---------------------------------------------------------------------------
   The paper grid and the question-bank grid are shared views (Enquiry uses the
   same ones). We cannot edit them without changing Enquiry too — so instead we
   restyle the chrome they emit, scoped. Outside .sa-ui not one of these rules
   applies, so Enquiry and the student bank are untouched.
   =========================================================================== */

/* the page itself gets a plane so cards read as cards */
.sa-ui { display: block; background: var(--sa-plane); padding: 18px; border-radius: var(--sa-radius) !important; }

/* AdminLTE boxes -> our card */
.sa-ui .box { background: var(--sa-surface); border: 1px solid var(--sa-ring); border-top: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important; box-shadow: var(--sa-shadow); margin-bottom: 16px; }
.sa-ui .box.box-default, .sa-ui .box.box-primary, .sa-ui .box.box-outline-header { border-top-color: var(--sa-ring); }
.sa-ui .box > .box-header { background: var(--sa-surface-2); border-bottom: 1px solid var(--sa-line); border-radius: var(--sa-radius) var(--sa-radius) 0 0 !important; padding: 12px 18px; }
.sa-ui .box > .box-header .box-title { font-size: 14px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .box > .box-header .box-title i { color: var(--sa-accent); }
.sa-ui .box > .box-body { padding: 16px 18px; }
.sa-ui .btn-box-tool { color: var(--sa-muted); }
.sa-ui .btn-box-tool:hover { color: var(--sa-ink); }

/* grid tables */
.sa-ui table.table { border: 0; margin-bottom: 0; }
.sa-ui table.table > thead > tr > th { background: var(--sa-surface-2); color: var(--sa-muted); font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; border: 0; border-bottom: 1px solid var(--sa-line); padding: 10px 12px; vertical-align: middle; }
.sa-ui table.table > tbody > tr > td { border: 0; border-bottom: 1px solid var(--sa-line); padding: 10px 12px; color: var(--sa-ink); vertical-align: middle; font-size: 13px; }
.sa-ui table.table > tbody > tr:hover > td { background: var(--sa-surface-2); }
.sa-ui table.table-bordered, .sa-ui table.table-bordered > thead > tr > th, .sa-ui table.table-bordered > tbody > tr > td { border-color: var(--sa-line); }
.sa-ui table.table > tbody > tr.jsUseGridAlternateRow > td, .sa-ui table.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }

/* grid toolbar: record count pill, pager, page-size */
.sa-ui .btn.btn-primary, .sa-ui .btn.btn-info, .sa-ui .btn.btn-success, .sa-ui .btn.btn-warning, .sa-ui .btn.btn-danger, .sa-ui .btn.btn-default {
    border-radius: var(--sa-radius-sm) !important; font-size: 12.5px; font-weight: 600; box-shadow: none; border-width: 1px;
}
.sa-ui .btn.btn-primary { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; }
.sa-ui .btn.btn-primary:hover, .sa-ui .btn.btn-primary:focus { background: var(--sa-accent-dark); border-color: var(--sa-accent-dark); }
.sa-ui .btn.btn-default { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-ink); }
.sa-ui .btn.btn-default:hover { background: var(--sa-surface-2); }
.sa-ui .btn.btn-success { background: var(--sa-good); border-color: var(--sa-good); }
.sa-ui .btn.btn-danger  { background: var(--sa-crit); border-color: var(--sa-crit); }
.sa-ui .btn.btn-warning { background: var(--sa-warn); border-color: var(--sa-warn); color: #4a3200; }
.sa-ui .label, .sa-ui .badge { font-weight: 650; border-radius: 20px !important; padding: 3px 9px; font-size: 11px; }

/* form controls inside the shared views */
.sa-ui .form-control, .sa-ui select.form-control { height: 36px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; box-shadow: none; font-size: 13px; color: var(--sa-ink); }
.sa-ui .form-control:focus { border-color: var(--sa-accent); box-shadow: 0 0 0 3px var(--sa-accent-soft); }
.sa-ui label { font-size: 12px; font-weight: 600; color: var(--sa-ink-2); }
.sa-ui .input-group-addon { background: var(--sa-surface-2); border-color: var(--sa-line); color: var(--sa-muted); border-radius: var(--sa-radius-sm) !important; }
.sa-ui .select2-container--default .select2-selection--single { border-color: var(--sa-line); border-radius: var(--sa-radius-sm) !important; }

/* the "Already Asked in" ribbon the question grid prints under each question */
.sa-ui .jsUseGridAlreadyAsked, .sa-ui input[readonly][value^="Already Asked"] { border-color: var(--sa-line); background: var(--sa-surface-2); color: var(--sa-ink-2); border-radius: var(--sa-radius-sm) !important; font-size: 12px; box-shadow: none; }

/* tab strip above the question bank */
.sa-ui .nav-tabs { border-bottom: 1px solid var(--sa-line); }
.sa-ui .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; color: var(--sa-ink-2); font-size: 13px; font-weight: 600; background: transparent; }
.sa-ui .nav-tabs > li.active > a, .sa-ui .nav-tabs > li.active > a:hover, .sa-ui .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--sa-accent); color: var(--sa-accent-dark); background: transparent; }

/* ---------------------------------------------------------------------------
   The MCampusGrid wrapper + row action buttons. These are the last bits of the
   old look: AdminLTE colour classes and a few inline styles. `!important` is
   used ONLY where an inline style has to be beaten, and every selector starts
   at .sa-ui so nothing outside the staff screens is affected.
   --------------------------------------------------------------------------- */

/* record-count pill — ships as .btn-primary.form-control with an inline width */
.sa-ui .TotalRecord_GridBody { background: var(--sa-accent-soft) !important; color: var(--sa-accent-dark) !important;
    border: 1px solid var(--sa-accent-soft) !important; border-radius: 20px !important; font-size: 12px; font-weight: 650;
    height: 30px; line-height: 20px; padding: 4px 14px; width: auto !important; min-width: 140px; box-shadow: none; text-align: center; }

/* page-size select + pager */
.sa-ui .jsUsepageSize { height: 30px; border-radius: var(--sa-radius-sm) !important; border-color: var(--sa-line); font-size: 12.5px; box-shadow: none; }
.sa-ui .GridPager { font-size: 13px !important; color: var(--sa-ink-2); align-items: center; }
.sa-ui .GridPager a { color: var(--sa-muted); font-size: 13px; }
.sa-ui .GridPager a:hover { color: var(--sa-accent); }
.sa-ui .jsUsetextboxPageNo { border: 1px solid var(--sa-line); border-radius: 6px !important; height: 28px; line-height: 26px !important; font-size: 12.5px; text-align: center; }
.sa-ui .jsUsegobutton { background: var(--sa-accent); border-color: var(--sa-accent); border-radius: 6px !important; height: 28px; }
.sa-ui .MCampusGrid_GridWrapper { border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; }

/* row action buttons — Answers / Media / lock all arrive as AdminLTE colour classes */
.sa-ui table .btn { height: 27px; padding: 0 9px; font-size: 11.5px; font-weight: 600; border-radius: 6px !important;
    line-height: 25px; box-shadow: none; display: inline-flex; align-items: center; gap: 5px; }
.sa-ui table .btn.btn-info    { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-accent-dark); }
.sa-ui table .btn.btn-info:hover { background: var(--sa-accent-soft); border-color: var(--sa-accent); }
.sa-ui table .btn.btn-warning { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-warn-ink); }
.sa-ui table .btn.btn-warning:hover { background: var(--sa-warn-soft); border-color: var(--sa-warn); }
.sa-ui table .btn.btn-danger  { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-crit-ink); }
.sa-ui table .btn.btn-danger:hover { background: var(--sa-crit-soft); border-color: var(--sa-crit); }
.sa-ui table .btn.btn-success { background: var(--sa-surface); border-color: var(--sa-ring); color: var(--sa-good-ink); }
.sa-ui table .fa-pencil, .sa-ui table .fa-trash, .sa-ui table .fa-copy, .sa-ui table .fa-files-o { color: var(--sa-muted); }
.sa-ui table .fa-pencil:hover { color: var(--sa-accent); }
.sa-ui table .fa-trash:hover  { color: var(--sa-crit); }

/* the "Already Asked in" ribbon renders as a bordered readonly input */
.sa-ui table input[type=text][readonly], .sa-ui table .form-control[readonly] {
    border: 1px solid var(--sa-line) !important; background: var(--sa-surface-2) !important; color: var(--sa-ink-2) !important;
    border-radius: var(--sa-radius-sm) !important; font-size: 12px; height: 28px; box-shadow: none !important; }

/* tab strip on the staff bank (the host markup carries inline backgrounds) */
.sa-ui #QuestionUL { background: transparent !important; border-bottom: 1px solid var(--sa-line); padding-left: 0; margin-bottom: 14px; }
.sa-ui #QuestionUL > li { background: transparent !important; }
.sa-ui #QuestionUL > li > a { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important;
    color: var(--sa-ink-2); font-size: 13px; font-weight: 600; padding: 9px 14px; }
.sa-ui #QuestionUL > li.active > a { color: var(--sa-accent-dark); border-bottom-color: var(--sa-accent) !important; }

/* show-answer toggle strip */
.sa-ui .btn.bg-yellow, .sa-ui .btn.btn-yellow { background: var(--sa-surface) !important; border: 1px solid var(--sa-ring) !important;
    color: var(--sa-ink-2) !important; border-radius: var(--sa-radius-sm) !important; font-weight: 600; box-shadow: none !important; }

/* ===========================================================================
   STAFF QUESTION BANK — its own screen. No AdminLTE box, no MCampusGrid.
   A question bank reads as a LIST OF QUESTIONS, not a spreadsheet: the question
   text is the hero, everything else is quiet metadata, and the answer options
   stay folded away until asked for.
   =========================================================================== */

/* search bar — big, obvious, the first thing you reach for */
.sa-ui .sqb-searchbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.sa-ui .sqb-search { position: relative; flex: 1; min-width: 0; }
.sa-ui .sqb-search > i.fa-search { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--sa-muted); font-size: 14px; pointer-events: none; }
.sa-ui .sqb-search input { width: 100%; height: 46px; border: 1px solid var(--sa-ring); border-radius: 24px !important; background: var(--sa-surface);
    padding: 0 42px; font-size: 14.5px; color: var(--sa-ink); box-shadow: var(--sa-shadow); }
.sa-ui .sqb-search input::placeholder { color: var(--sa-muted); }
.sa-ui .sqb-search input:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 4px var(--sa-accent-soft); }
.sa-ui .sqb-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0;
    border-radius: 50% !important; background: var(--sa-idle-soft); color: var(--sa-ink-2); cursor: pointer; font-size: 12px; }
.sa-ui .sqb-clear:hover { background: var(--sa-line); }
.sa-ui #sqbToggleFilters { height: 46px; border-radius: 24px !important; padding: 0 18px; }
.sa-ui #sqbToggleFilters.is-on { background: var(--sa-accent-soft); border-color: var(--sa-accent); color: var(--sa-accent-dark); }

.sa-ui .sqb-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
    background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important; padding: 16px; margin-bottom: 14px; box-shadow: var(--sa-shadow); }

/* summary strip */
.sa-ui .sqb-summary { display: flex; align-items: baseline; gap: 22px; padding: 0 4px 12px; }
.sa-ui .sqb-sum { display: flex; align-items: baseline; gap: 6px; }
.sa-ui .sqb-sum-v { font-size: 19px; font-weight: 680; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .sqb-sum-l { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); }
.sa-ui .sqb-sum-spacer { flex: 1; }
.sa-ui .sqb-sum-showing { font-size: 12.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }

/* The canvas. Cards only read as cards when the page behind them is not the same white, so the
   whole bank sits on a tinted sheet. */
.sa-ui.sqb { background: var(--sa-bg); padding: 18px; border-radius: 12px !important; border: 1px solid var(--sa-ring); }

/* the question list */
.sa-ui .sqb-list { display: flex; flex-direction: column; gap: 10px; }
.sa-ui .sqb-q { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start;
    background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important;
    padding: 16px 18px; transition: border-color .12s, box-shadow .12s; }
.sa-ui .sqb-q:hover { border-color: var(--sa-accent); box-shadow: 0 1px 2px rgba(42,120,214,.06), 0 4px 14px rgba(42,120,214,.08); }
.sa-ui .sqb-q.is-off { background: var(--sa-surface-2); }
.sa-ui .sqb-q.is-off .sqb-q-text { color: var(--sa-ink-2); }

.sa-ui .sqb-q-no { width: 32px; height: 32px; border-radius: 9px !important; background: var(--sa-accent-soft); color: var(--sa-accent-dark);
    font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.sa-ui .sqb-q-main { min-width: 0; }
.sa-ui .sqb-q-text { font-size: 15px; line-height: 1.55; color: var(--sa-ink); word-break: break-word; }
.sa-ui .sqb-q-text p { margin: 0 0 6px; }
.sa-ui .sqb-q-text p:last-child { margin-bottom: 0; }

.sa-ui .sqb-q-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sa-ui .sqb-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--sa-ink-2);
    background: var(--sa-surface-2); border: 1px solid var(--sa-line); border-radius: 20px !important; padding: 2px 10px; }
.sa-ui .sqb-tag i { color: var(--sa-muted); font-size: 10px; }
.sa-ui .sqb-tag--type { background: var(--sa-accent-soft); border-color: var(--sa-accent-soft); color: var(--sa-accent-dark); }

/* folded answer */
.sa-ui .sqb-expand { appearance: none; background: none; border: 0; padding: 8px 0 0; margin: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--sa-accent-dark); display: inline-flex; align-items: center; gap: 6px; }
.sa-ui .sqb-expand i { transition: transform .15s; }
.sa-ui .sqb-q.is-open .sqb-expand i { transform: rotate(180deg); }
.sa-ui .sqb-q-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--sa-line); }
.sa-ui .sqb-q.is-open .sqb-q-detail { display: block; }

.sa-ui .sqb-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-ui .sqb-opt { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--sa-ink-2);
    background: var(--sa-surface-2); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; padding: 8px 12px; }
.sa-ui .sqb-opt.is-right { background: var(--sa-good-soft); border-color: #bfe4bf; color: var(--sa-good-ink); font-weight: 600; }
.sa-ui .sqb-opt-k { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px !important; background: var(--sa-surface); border: 1px solid var(--sa-line);
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--sa-ink-2); }
.sa-ui .sqb-opt.is-right .sqb-opt-k { background: var(--sa-good); border-color: var(--sa-good); color: #fff; }
.sa-ui .sqb-opt-t { flex: 1; min-width: 0; word-break: break-word; }
.sa-ui .sqb-opt-tick { color: var(--sa-good); font-size: 14px; margin-top: 2px; }
.sa-ui .sqb-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sa-ui .sqb-file { font-size: 12px; color: var(--sa-ink-2); background: var(--sa-surface-2); border: 1px solid var(--sa-line);
    border-radius: 20px !important; padding: 2px 10px; display: inline-flex; align-items: center; gap: 6px; }
.sa-ui .sqb-file i { color: var(--sa-muted); }

/* Row actions. Each verb carries its own colour so a row is scannable at rest: a wall of grey icons
   makes the reader hover every one to find out what it does. */
.sa-ui .sqb-q-acts { display: flex; gap: 6px; align-items: flex-start; }
.sa-ui .sqb-act { width: 34px; height: 34px; border-radius: 9px !important; display: inline-flex !important; align-items: center; justify-content: center;
    text-decoration: none; font-size: 14px; border: 1px solid transparent; transition: transform .1s, box-shadow .12s, background .12s, color .12s; }
.sa-ui .sqb-act:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(11,11,11,.12); }
.sa-ui .sqb-act:active { transform: none; box-shadow: none; }
.sa-ui .sqb-act--edit  { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #cfe1fa; }
.sa-ui .sqb-act--edit:hover  { background: var(--sa-accent); color: #fff; border-color: var(--sa-accent); }
.sa-ui .sqb-act--ans   { background: var(--sa-good-soft); color: var(--sa-good-ink); border-color: #c6e7c6; }
.sa-ui .sqb-act--ans:hover   { background: var(--sa-good); color: #fff; border-color: var(--sa-good); }
.sa-ui .sqb-act--media { background: #f1ecfb; color: #553a9b; border-color: #ded2f6; }
.sa-ui .sqb-act--media:hover { background: #6a4ab8; color: #fff; border-color: #6a4ab8; }
.sa-ui .sqb-act--del   { background: var(--sa-crit-soft); color: var(--sa-crit-ink); border-color: #f2cfcf; }
.sa-ui .sqb-act--del:hover   { background: var(--sa-crit); color: #fff; border-color: var(--sa-crit); }
/* a locked question already sits in a paper: a state, not a button, so it never lifts on hover */
.sa-ui .sqb-act--lock { background: var(--sa-warn-soft); color: var(--sa-warn-ink); border-color: #f2e0b4; cursor: help; }
.sa-ui .sqb-act--lock:hover { transform: none; box-shadow: none; }

/* pager + loading */
.sa-ui .sqb-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 18px 0 2px; }
.sa-ui .sqb-pager-n { font-size: 12.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
/* numbered pages: with 600 questions, prev/next alone is 30 clicks to reach the end */
.sa-ui .sqb-page { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px !important; border: 1px solid var(--sa-ring);
    background: var(--sa-surface); color: var(--sa-ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
    font-variant-numeric: tabular-nums; transition: background .12s, color .12s, border-color .12s; }
.sa-ui .sqb-page:hover:not(:disabled):not(.is-current) { border-color: var(--sa-accent); color: var(--sa-accent-dark); background: var(--sa-accent-soft); }
.sa-ui .sqb-page.is-current { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; cursor: default; }
.sa-ui .sqb-page:disabled { opacity: .4; cursor: not-allowed; }
.sa-ui .sqb-gap { padding: 0 2px; color: var(--sa-muted); align-self: center; }
/* page size sits on the summary line, where the reader is already counting */
.sa-ui .sqb-size { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sqb-size select { height: 30px; border-radius: 8px !important; border: 1px solid var(--sa-ring); background: var(--sa-surface);
    color: var(--sa-ink); font-size: 12.5px; padding: 0 8px; }
.sa-ui .sqb-loading { text-align: center; padding: 48px 0; color: var(--sa-line); font-size: 26px; }

@media (max-width: 767px) {
    .sa-ui .sqb-searchbar { flex-direction: column; align-items: stretch; }
    .sa-ui #sqbToggleFilters { width: 100%; }
    .sa-ui .sqb-q { grid-template-columns: 32px 1fr; }
    .sa-ui.sqb { padding: 12px 10px 16px; }
    .sa-ui .sqb-q-acts { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px dashed var(--sa-line); padding-top: 8px; }
    .sa-ui .sqb-summary { flex-wrap: wrap; gap: 14px; }
}


/* ===========================================================================
   STAFF ASSESSMENT CONFIGURATION - its own screen, like the question bank.
   An assessment is read by its WINDOW and its STATE, not by a row of columns,
   so each paper is a card led by its name, its approval state and its dates.
   Shares the sqb search bar, filter panel and pager.
   =========================================================================== */

.sa-ui.sae { background: var(--sa-bg); padding: 18px; border-radius: 12px !important; border: 1px solid var(--sa-ring); }

/* summary strip */
.sa-ui .sae-summary { display: flex; align-items: baseline; gap: 22px; padding: 0 4px 12px; flex-wrap: wrap; }
.sa-ui .sae-sum { display: flex; align-items: baseline; gap: 6px; }
.sa-ui .sae-sum-v { font-size: 19px; font-weight: 680; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .sae-sum-l { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); }
.sa-ui .sae-sum-spacer { flex: 1; }
.sa-ui .sae-sum-showing { font-size: 12.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .sae-size { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sae-size select { height: 30px; border-radius: 8px !important; border: 1px solid var(--sa-ring); background: var(--sa-surface);
    color: var(--sa-ink); font-size: 12.5px; padding: 0 8px; }

/* the cards */
.sa-ui .sae-list { display: flex; flex-direction: column; gap: 10px; }
.sa-ui .sae-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    background: var(--sa-surface); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius) !important;
    padding: 15px 17px; transition: border-color .12s, box-shadow .12s; }
.sa-ui .sae-card:hover { border-color: var(--sa-accent); box-shadow: 0 1px 2px rgba(42,120,214,.06), 0 4px 14px rgba(42,120,214,.08); }
.sa-ui .sae-card.is-off { background: var(--sa-surface-2); }
.sa-ui .sae-card-main { min-width: 0; }

.sa-ui .sae-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sa-ui .sae-name { font-size: 15.5px; font-weight: 650; color: var(--sa-ink); margin: 0; line-height: 1.3; word-break: break-word; }

/* state chips always ship icon + label, never colour alone */
.sa-ui .sae-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650;
    border-radius: 20px !important; padding: 2px 10px; border: 1px solid transparent; white-space: nowrap; }
.sa-ui .sae-state i { font-size: 10px; }
.sa-ui .sae-state--good { background: var(--sa-good-soft); color: var(--sa-good-ink); border-color: #c6e7c6; }
.sa-ui .sae-state--warn { background: var(--sa-warn-soft); color: var(--sa-warn-ink); border-color: #f2e0b4; }
.sa-ui .sae-state--crit { background: var(--sa-crit-soft); color: var(--sa-crit-ink); border-color: #f2cfcf; }
.sa-ui .sae-state--idle { background: var(--sa-idle-soft); color: var(--sa-ink-2); border-color: var(--sa-line); }
.sa-ui .sae-state--live { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #cfe1fa; }
.sa-ui .sae-state--live i { font-size: 7px; }

/* the visibility window is what decides whether a teacher can start, so it leads */
.sa-ui .sae-window { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 13px;
    color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .sae-window i { color: var(--sa-muted); font-size: 12px; }

.sa-ui .sae-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.sa-ui .sae-fact { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--sa-ink-2);
    background: var(--sa-surface-2); border: 1px solid var(--sa-line); border-radius: 20px !important; padding: 2px 10px; }
.sa-ui .sae-fact b { font-size: 12.5px; font-weight: 700; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .sae-fact--mode i { color: var(--sa-muted); font-size: 10px; margin-right: 1px; }

/* actions - each verb its own colour, legible at rest */
.sa-ui .sae-card-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sa-ui .sae-act { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    height: 34px; min-width: 34px; padding: 0 11px; border-radius: 9px !important; border: 1px solid transparent;
    font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: transform .1s, box-shadow .12s, background .12s, color .12s; }
.sa-ui .sae-act:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(11,11,11,.12); }
.sa-ui .sae-act:active { transform: none; box-shadow: none; }
.sa-ui .sae-act--paper { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #cfe1fa; }
.sa-ui .sae-act--paper:hover { background: var(--sa-accent); color: #fff; border-color: var(--sa-accent); }
.sa-ui .sae-act--edit  { background: var(--sa-good-soft); color: var(--sa-good-ink); border-color: #c6e7c6; }
.sa-ui .sae-act--edit:hover  { background: var(--sa-good); color: #fff; border-color: var(--sa-good); }
.sa-ui .sae-act--del   { background: var(--sa-crit-soft); color: var(--sa-crit-ink); border-color: #f2cfcf; }
.sa-ui .sae-act--del:hover   { background: var(--sa-crit); color: #fff; border-color: var(--sa-crit); }
.sa-ui .sae-act--auto  { background: var(--sa-warn-soft); color: var(--sa-warn-ink); border-color: #f2e0b4; cursor: pointer; }
.sa-ui .sae-act--auto:hover  { background: var(--sa-warn); color: #4a3100; border-color: var(--sa-warn); }
.sa-ui .sae-act--auto.is-busy { opacity: .55; pointer-events: none; }
.sa-ui .sae-act--send  { background: #e6f4f1; color: #0f6b5c; border-color: #bfe3dc; }
.sa-ui .sae-act--send:hover  { background: #0f8f78; color: #fff; border-color: #0f8f78; }
/* Every card action carries a WORD as well as its glyph: four identical coloured squares meant
   hovering each one to find out what it did. \00a0 is the gap between glyph and label. */
.sa-ui .sae-act--send:before { content: "\f1d8\00a0"; font-family: FontAwesome; }
.sa-ui .sae-act--view  { background: #f1eefc; color: #4b3a99; border-color: #dcd5f5; }
.sa-ui .sae-act--view:hover  { background: #5b47b8; color: #fff; border-color: #5b47b8; }
.sa-ui .sae-act--view:before { content: "\f06e\00a0"; font-family: FontAwesome; }
.sa-ui .sae-act--edit:before { content: "\f040\00a0"; font-family: FontAwesome; }
.sa-ui .sae-act--del:before  { content: "\f014\00a0"; font-family: FontAwesome; }

/* Six actions need ~640px beside the details. With the ~230px left menu that no longer fits below
   ~1200px of screen, and the name column was crushed to one letter per line - so stack them earlier. */
@media (max-width: 1199px) {
    .sa-ui .sae-card { grid-template-columns: 1fr; }
    .sa-ui .sae-card-acts { justify-content: flex-start; border-top: 1px dashed var(--sa-line); padding-top: 10px; }
}
@media (max-width: 767px) {
    .sa-ui.sae { padding: 12px 10px 16px; }
    .sa-ui .sae-summary { gap: 14px; }
}


/* ===========================================================================
   ROUNDING - enforced last, and with !important on purpose.
   AdminLTE ships `.form-control { border-radius: 0 !important }`, so every
   input and select inside this UI renders square however specific our own
   rule is: !important is the only thing that outranks it. Everything here is
   scoped to .sa-ui, so no screen outside Staff Assessment is affected.
   =========================================================================== */

/* outer sheets */
.sa-ui.sqb,
.sa-ui.sae                      { border-radius: var(--sa-radius-lg) !important; }

/* cards and panels */
.sa-ui .sa-card,
.sa-ui .sa-exam,
.sa-ui .sqb-q,
.sa-ui .sae-card,
.sa-ui .sqb-filters,
.sa-ui .sa-stat,
.sa-ui .box,
.sa-ui .modal-content           { border-radius: var(--sa-radius) !important; }

/* a card head sits flush inside a rounded card, so only its top corners round */
.sa-ui .sa-card-head,
.sa-ui .box > .box-header       { border-radius: var(--sa-radius) var(--sa-radius) 0 0 !important; }

/* controls - these are the ones AdminLTE was squaring off */
.sa-ui input[type=text],
.sa-ui input[type=number],
.sa-ui input[type=password],
.sa-ui textarea,
.sa-ui select,
.sa-ui .form-control,
.sa-ui .sa-field input,
.sa-ui .sa-field select,
.sa-ui .sqb-size select,
.sa-ui .sae-size select         { border-radius: var(--sa-radius-sm) !important; }

/* the search field stays a pill - it is the one control that should read as round */
.sa-ui .sqb-search input        { border-radius: var(--sa-radius-pill) !important; }
.sa-ui .sqb-clear               { border-radius: 50% !important; }
.sa-ui #sqbToggleFilters,
.sa-ui #saeToggleFilters        { border-radius: var(--sa-radius-pill) !important; }

/* buttons and row actions */
.sa-ui .sa-btn,
.sa-ui .btn,
.sa-ui .sqb-page,
.sa-ui .sqb-act,
.sa-ui .sae-act                 { border-radius: var(--sa-radius-sm) !important; }

/* chips, tags and pills stay fully round */
.sa-ui .sa-chip,
.sa-ui .sqb-tag,
.sa-ui .sqb-file,
.sa-ui .sae-state,
.sa-ui .sae-fact                { border-radius: var(--sa-radius-pill) !important; }

/* small squares keep a softer corner rather than a pill */
.sa-ui .sqb-q-no,
.sa-ui .sqb-opt-k               { border-radius: 9px !important; }
.sa-ui .sqb-opt                 { border-radius: var(--sa-radius-sm) !important; }

/* the sidebar panel we build in sqbPanel / saePanel */
.control-sidebar .sa-ui .sa-card,
#aside-div-containerAjaxCRUDForm .sa-ui .box,
#aside-div-containerAjaxCRUDForm .sa-ui .sa-card { border-radius: var(--sa-radius) !important; }


/* ===========================================================================
   STAFF ASSESSMENT HUB - the one screen that holds all four parts as tabs.
   The inner screens keep their own sheet (.sqb / .sae), so the hub itself
   stays flat and only owns the header and the tab strip.
   =========================================================================== */

/* The hub is a PANEL, the same way Logbook Entry is: the page gets a gutter, and everything
   sits on one white card with its own padding. Without this the content ran to the very edge
   of the content area with no margin at all. */
.sa-ui.sah { padding: 15px; background: transparent; border: 0; }
.sa-ui .sah-panel { background: var(--sa-surface); border: 1px solid var(--sa-ring);
    border-radius: var(--sa-radius) !important; box-shadow: var(--sa-shadow); padding: 18px 20px 22px; }
.sa-ui .sah-head { margin-bottom: 14px; }
.sa-ui .sah-head-text { min-width: 0; }

/* tab strip - a segmented control, not browser tabs: no folder tabs, no borders
   joining a panel, just the selected pill carrying the accent. */
.sa-ui .sah-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 5px;
    background: var(--sa-bg); border: 1px solid var(--sa-ring); border-radius: var(--sa-radius-pill) !important;
    margin-bottom: 16px; }
.sa-ui .sah-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
    border: 0; background: transparent; color: var(--sa-ink-2); font-size: 13.5px; font-weight: 600;
    cursor: pointer; border-radius: var(--sa-radius-pill) !important; white-space: nowrap;
    transition: background .12s, color .12s, box-shadow .12s; }
.sa-ui .sah-tab i { font-size: 13px; opacity: .75; }
.sa-ui .sah-tab:hover { background: var(--sa-surface); color: var(--sa-ink); }
.sa-ui .sah-tab.is-active { background: var(--sa-accent); color: #fff;
    box-shadow: 0 1px 2px rgba(42,120,214,.25), 0 3px 10px rgba(42,120,214,.22); }
.sa-ui .sah-tab.is-active i { opacity: 1; }

/* panes - only the active one is in flow, but all stay in the DOM so a tab
   you have already opened comes back instantly with its state intact. */
.sa-ui .sah-pane { display: none; }
.sa-ui .sah-pane.is-active { display: block; }
/* An inner screen renders its own <section class="content sa-ui sqb|sae"> sheet. Inside a pane
   that becomes a box within a box, so flatten it and let the hub panel provide the surface. */
.sa-ui .sah-pane > .content { padding: 0; }
.sa-ui .sah-pane > .content.sqb,
.sa-ui .sah-pane > .content.sae { background: transparent; border: 0; padding: 0; border-radius: 0 !important; }

@media (max-width: 767px) {
    .sa-ui .sah-tabs { border-radius: var(--sa-radius) !important; }
    .sa-ui .sah-tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
    .sa-ui .sah-tab span { display: none; }
    .sa-ui .sah-tab i { font-size: 15px; }
}

/* Scoped dispatch banner: dispatch opened from ONE assessment, so the screen names it. */
.sa-ui .sae-scope { display: flex; align-items: center; gap: 11px; padding: 12px 16px; margin-bottom: 14px;
    background: var(--sa-accent-soft); border: 1px solid #cfe1fa; border-radius: var(--sa-radius) !important; }
.sa-ui .sae-scope > i { font-size: 17px; color: var(--sa-accent-dark); }
.sa-ui .sae-scope-l { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sa-accent-dark); opacity: .85; }
.sa-ui .sae-scope b { font-size: 15px; color: var(--sa-ink); }
/* the exam is already decided here, so the control reads as a label, not a choice */
.sa-ui select.sae-locked { pointer-events: none; background: var(--sa-surface-2); color: var(--sa-ink); font-weight: 600; }

/* Dispatch opens inside the control sidebar, where a page gutter would just be wasted space. */
.sa-ui.sae-dispatch { padding: 0; background: transparent; border: 0; }
.sa-ui.sae-dispatch .sah-panel { padding: 16px 18px 20px; }
.sa-ui.sae-dispatch .sa-card:last-child { margin-bottom: 0; }

/* Scoped dispatch has nothing to choose, so the card is just a count and the send button. */
.sa-ui .sae-send { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sa-ui .sae-send-n { font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .sae-send-n b { font-size: 16px; color: var(--sa-ink); font-variant-numeric: tabular-nums; }

/* Toolbar above a long table: filter on the left, page size + range on the right.
   Paging hides rows rather than removing them, so ticked checkboxes survive page changes. */
.sa-ui .sa-tbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--sa-line); background: var(--sa-surface-2); }
.sa-ui .sa-tbar-find { position: relative; flex: 1 1 240px; min-width: 0; max-width: 360px; }
.sa-ui .sa-tbar-find > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--sa-muted); font-size: 12px; pointer-events: none; }
.sa-ui .sa-tbar-find input { width: 100%; height: 34px; padding: 0 12px 0 32px; font-size: 13px;
    border: 1px solid var(--sa-ring); background: var(--sa-surface); color: var(--sa-ink);
    border-radius: var(--sa-radius-pill) !important; }
.sa-ui .sa-tbar-find input:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 3px var(--sa-accent-soft); }
.sa-ui .sa-tbar-right { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sa-tbar-right select { height: 30px; padding: 0 8px; font-size: 12.5px; border: 1px solid var(--sa-ring);
    background: var(--sa-surface); color: var(--sa-ink); border-radius: var(--sa-radius-sm) !important; }
.sa-ui .sa-tbar-n { font-variant-numeric: tabular-nums; }
.sa-ui tr.sa-row-hidden { display: none; }

/* ===========================================================================
   MY ASSESSMENTS - the teacher's own screen. Same panel and same segmented
   tabs as the admin hub, so the two halves of the feature feel like one thing.
   =========================================================================== */
.sa-ui.smya { padding: 15px; background: transparent; border: 0; }
.sa-ui.smya .sah-panel { padding: 18px 20px 22px; }

/* the count that rides inside a tab */
.sa-ui .sah-tab-n { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1;
    min-width: 20px; padding: 3px 6px; border-radius: var(--sa-radius-pill) !important;
    background: var(--sa-idle-soft); color: var(--sa-ink-2); }
.sa-ui .sah-tab.is-active .sah-tab-n { background: rgba(255,255,255,.26); color: #fff; }

/* A state edge on each exam card: at a glance you can see what still needs doing
   without reading every status chip. The chip stays - colour is never the only signal. */
.sa-ui .sa-exam { position: relative; padding-left: 20px; }
.sa-ui .sa-exam:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: var(--sa-radius) 0 0 var(--sa-radius) !important; background: var(--sa-line); }
.sa-ui .sa-exam--todo:before { background: var(--sa-accent); }
.sa-ui .sa-exam--live:before { background: var(--sa-warn); }
.sa-ui .sa-exam--done:before { background: var(--sa-good); }
.sa-ui .sa-exam--shut:before { background: var(--sa-line); }
/* a closed paper is history, so it recedes rather than competing with what is actionable */
.sa-ui .sa-exam--shut { background: var(--sa-surface-2); }

@media (max-width: 767px) {
    .sa-ui.smya { padding: 10px; }
    .sa-ui.smya .sah-panel { padding: 14px 12px 18px; }
}

/* ===========================================================================
   AUTO FILL PREVIEW - what would go on the paper, before anything is written.
   The tally is the headline: marks reached vs the target, with a word for the
   state so the colour is never carrying the meaning on its own.
   =========================================================================== */
.sa-ui.saf { padding: 2px; }
.sa-ui .saf-tally { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 14px; border-radius: var(--sa-radius) !important; border: 1px solid transparent; }
.sa-ui .saf-tally.is-ok    { background: var(--sa-good-soft); border-color: #c6e7c6; }
.sa-ui .saf-tally.is-short { background: var(--sa-warn-soft); border-color: #f2e0b4; }
.sa-ui .saf-tally.is-none  { background: var(--sa-idle-soft); border-color: var(--sa-line); }
.sa-ui .saf-tally-n b { font-size: 26px; font-weight: 680; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .saf-tally-n span { font-size: 13px; color: var(--sa-ink-2); margin-left: 6px; }
.sa-ui .saf-tally-t { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sa-ui .saf-tally.is-ok    .saf-tally-t { color: var(--sa-good-ink); }
.sa-ui .saf-tally.is-short .saf-tally-t { color: var(--sa-warn-ink); }
.sa-ui .saf-tally.is-none  .saf-tally-t { color: var(--sa-ink-2); }

.sa-ui .saf-note { margin-bottom: 14px; }
.sa-ui .saf-warn { margin-bottom: 14px; background: var(--sa-crit-soft); border-color: #f2cfcf; color: var(--sa-crit-ink); }
.sa-ui .saf-q { font-size: 13px; line-height: 1.45; color: var(--sa-ink); }
.sa-ui .saf-q p { margin: 0; }
.sa-ui .saf-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
/* Auto Fill step 1: question-type picker, all inside ONE box (head / body / unavailable strip / actions).
   Usable types are tiles; empty types collapse into a muted chip strip at the foot of the box. */
.sa-ui .saf-box { margin: 4px 0 8px; background: var(--sa-surface); border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius) !important; box-shadow: var(--sa-shadow); overflow: hidden; }
.sa-ui .saf-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid var(--sa-line); background: var(--sa-surface-2); }
.sa-ui .saf-box-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50% !important;
    background: var(--sa-accent); color: #fff; font-size: 12px; font-weight: 700; }
.sa-ui .saf-box-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.sa-ui .saf-box-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 20px;
    border-top: 1px solid var(--sa-line); background: var(--sa-surface-2); }

/* Summary: target vs what the selection holds, with a state pill. */
.sa-ui .saf-pick { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: 14px 18px;
    background: var(--sa-plane); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; }
.sa-ui .saf-pick-cell { padding: 0 24px; }
.sa-ui .saf-pick-cell:first-child { padding-left: 0; border-right: 1px solid var(--sa-line); }
.sa-ui .saf-pick-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sa-muted); }
.sa-ui .saf-pick-n { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .saf-pick-line { margin-top: 4px; font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .saf-pick-line b { font-size: 20px; font-weight: 700; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-ui .saf-dot { margin: 0 6px; color: var(--sa-muted); }
.sa-ui .saf-pill { margin-left: auto; padding: 5px 14px; border-radius: var(--sa-radius-pill) !important; font-size: 12px; font-weight: 600; }
.sa-ui .saf-pill.is-ok    { background: var(--sa-good-soft); color: var(--sa-good-ink); }
.sa-ui .saf-pill.is-short { background: var(--sa-warn-soft); color: var(--sa-warn-ink); }
.sa-ui .saf-pill.is-none  { background: var(--sa-idle-soft); color: var(--sa-ink-2); }

.sa-ui .saf-tiles-links { display: inline-flex; align-items: center; gap: 16px; }
.sa-ui .saf-tiles-links a { color: var(--sa-accent); font-size: 13px; font-weight: 600; }

/* Avoid repeats: a real switch, not a bare checkbox. */
.sa-ui .saf-avoid { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; cursor: pointer; font-weight: normal;
    background: var(--sa-warn-soft); border: 1px solid #f2e0b4; border-radius: var(--sa-radius-sm) !important; }
.sa-ui .saf-avoid input { position: absolute; opacity: 0; pointer-events: none; }
.sa-ui .saf-switch { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px !important; background: #cfcdc6; transition: background-color .15s; }
.sa-ui .saf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50% !important;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.sa-ui .saf-avoid input:checked + .saf-switch { background: var(--sa-accent); }
.sa-ui .saf-avoid input:checked + .saf-switch::after { transform: translateX(16px); }
.sa-ui .saf-avoid input:focus-visible + .saf-switch { outline: 2px solid var(--sa-accent); outline-offset: 2px; }
.sa-ui .saf-avoid-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--sa-warn-ink); }
.sa-ui .saf-avoid-text b { font-size: 13px; color: var(--sa-ink); }

/* Tiles: check | name + counts | Choose questions, on one row so nothing wraps awkwardly. */
.sa-ui .saf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sa-ui .saf-tile { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; cursor: pointer;
    font-weight: normal; background: var(--sa-surface); border: 1.5px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important;
    transition: border-color .15s, background-color .15s, box-shadow .15s; }
.sa-ui .saf-tile:hover { border-color: var(--sa-ord-1); }
.sa-ui .saf-tile input { position: absolute; opacity: 0; pointer-events: none; }
.sa-ui .saf-tile-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px !important; border: 1.5px solid var(--sa-muted);
    display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; background: var(--sa-surface); }
.sa-ui .saf-tile-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-ui .saf-tile-name { font-size: 15px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-tile-meta { font-size: 12px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-ui .saf-tile.is-on { border-color: var(--sa-accent); background: var(--sa-accent-soft); box-shadow: 0 0 0 3px rgba(42,120,214,.10); }
.sa-ui .saf-tile.is-on .saf-tile-check { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; }
.sa-ui .saf-tile input:focus-visible + .saf-tile-check { outline: 2px solid var(--sa-accent); outline-offset: 2px; }
.sa-ui .saf-tile-pick { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    font-size: 12px; font-weight: 600; color: var(--sa-accent); background: var(--sa-surface); border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-pill) !important; cursor: pointer; white-space: nowrap; }
.sa-ui .saf-tile-pick:hover { border-color: var(--sa-accent); }
.sa-ui .saf-tile.is-custom .saf-tile-meta { color: var(--sa-accent-dark); font-weight: 600; }
.sa-ui .saf-tile.is-open { border-color: var(--sa-accent-dark); }
.sa-ui .saf-tile.is-open .saf-tile-pick { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; }

/* Repeat tracking: what a question was already used in. */
.sa-ui .saf-tile-used { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sa-warn-ink); }
.sa-ui .saf-used, .sa-ui .saf-fresh { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 2px 9px;
    border-radius: var(--sa-radius-pill) !important; font-size: 11px; font-weight: 600; }
.sa-ui .saf-used  { background: var(--sa-warn-soft); color: var(--sa-warn-ink); }
.sa-ui .saf-fresh { background: var(--sa-good-soft); color: var(--sa-good-ink); }
.sa-ui .saf-row-used .saf-q { color: var(--sa-ink-2); }

/* Hand-pick panel: sits in the box body under the tiles. */
.sa-ui .saf-qpanel { background: var(--sa-surface); border: 1px solid var(--sa-accent); border-radius: var(--sa-radius-sm) !important; overflow: hidden; }
.sa-ui .saf-qpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
    background: var(--sa-accent-soft); border-bottom: 1px solid var(--sa-line); }
.sa-ui .saf-qpanel-title { font-size: 14px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-qpanel-sub { font-size: 12px; color: var(--sa-ink-2); margin-top: 2px; }
.sa-ui .saf-qpanel-body { max-height: 360px; overflow-y: auto; }
.sa-ui .saf-qpanel .sa-table td, .sa-ui .saf-qpanel .sa-table th { padding-left: 16px; padding-right: 16px; vertical-align: middle; }

/* Unavailable types: a muted strip at the foot of the box. */
.sa-ui .saf-unavail { padding: 14px 20px; border-top: 1px dashed var(--sa-line); background: var(--sa-surface-2); }
.sa-ui .saf-unavail-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sa-ink-2); }
.sa-ui .saf-unavail-head .fa { color: var(--sa-muted); }
.sa-ui .saf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.sa-ui .saf-chip { padding: 3px 10px; border-radius: var(--sa-radius-pill) !important; background: var(--sa-idle-soft); color: var(--sa-muted); font-size: 12px; }
.sa-ui .saf-unavail-hint { font-size: 12px; color: var(--sa-muted); }

/* Auto Fill step 2 (review): chosen types in the box head, tally, proposed list, "Add more questions". */
.sa-ui .saf-box-head .saf-types { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .saf-box-head .saf-types a { margin-left: 6px; font-weight: 600; color: var(--sa-accent); }
.sa-ui .saf-box-body .saf-tally, .sa-ui .saf-box-body .saf-note, .sa-ui .saf-box-body .saf-warn { margin: 0; }
.sa-ui .saf-tally.is-over { background: var(--sa-crit-soft); border-color: #f2cfcf; }
.sa-ui .saf-tally.is-over .saf-tally-t { color: var(--sa-crit-ink); }
.sa-ui .saf-list { border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; overflow: hidden; background: var(--sa-surface); }
.sa-ui .saf-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px;
    background: var(--sa-surface-2); border-bottom: 1px solid var(--sa-line); }
.sa-ui .saf-list-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-list-title .fa { color: var(--sa-accent); }
.sa-ui .saf-list .sa-table td, .sa-ui .saf-list .sa-table th { padding-left: 16px; padding-right: 16px; vertical-align: middle; }
.sa-ui .saf-list-body.is-scroll { max-height: 360px; overflow-y: auto; }
.sa-ui .saf-more { border-style: dashed; border-color: var(--sa-ord-1); }
.sa-ui .saf-more .saf-list-head { cursor: pointer; background: var(--sa-accent-soft); }
.sa-ui .saf-more-caret { color: var(--sa-accent); transition: transform .15s; }
.sa-ui .saf-more.is-collapsed .saf-more-caret { transform: rotate(-90deg); }
.sa-ui .saf-more.is-collapsed .saf-more-body { display: none; }
.sa-ui .saf-more.is-collapsed .saf-list-head { border-bottom: 0; }
.sa-ui .saf-more-added { padding: 2px 9px; border-radius: var(--sa-radius-pill) !important; background: var(--sa-accent); color: #fff; font-size: 11px; font-weight: 700; }
.sa-ui .saf-more-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--sa-line); }
.sa-ui .saf-search { position: relative; flex: 1 1 260px; }
.sa-ui .saf-search .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sa-muted); }
.sa-ui .saf-search input { width: 100%; height: 34px; padding: 0 12px 0 34px; font-size: 13px; color: var(--sa-ink);
    background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-pill) !important; outline: none; }
.sa-ui .saf-search input:focus { border-color: var(--sa-accent); box-shadow: 0 0 0 3px rgba(42,120,214,.12); }
.sa-ui .saf-more-hint { font-size: 12px; color: var(--sa-muted); }
.sa-ui .saf-more tr.is-added td { background: var(--sa-accent-soft); }
.sa-ui .saf-more-none td { padding: 18px 16px; text-align: center; color: var(--sa-muted); font-size: 13px; }

/* View Paper: read-only paper with options; answers can be hidden for a clean print. */
.sa-ui .svp-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-ui .svp-window { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12px; color: var(--sa-ink-2); }
.sa-ui .svp-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--sa-ink-2); cursor: pointer; }
.sa-ui .svp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sa-ui .svp-q { padding: 14px 16px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; background: var(--sa-surface); page-break-inside: avoid; }
.sa-ui .svp-q-head { display: flex; align-items: flex-start; gap: 12px; }
.sa-ui .svp-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px;
    border-radius: 8px !important; background: var(--sa-accent-soft); color: var(--sa-accent-dark); font-size: 13px; font-weight: 700; }
.sa-ui .svp-q-text { flex: 1 1 auto; min-width: 0; padding-top: 4px; font-size: 14px; }
.sa-ui .svp-q-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sa-ui .svp-marks { font-size: 12px; font-weight: 700; color: var(--sa-ink); white-space: nowrap; }
.sa-ui .svp-opts { list-style: none; margin: 12px 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sa-ui .svp-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--sa-ink);
    border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; background: var(--sa-surface-2); }
.sa-ui .svp-opt-text p { margin: 0; }
.sa-ui .svp-letter { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--sa-ink-2); background: var(--sa-idle-soft); }
.sa-ui .svp-opt.is-correct { border-color: #b9dfb9; background: var(--sa-good-soft); }
.sa-ui .svp-opt.is-correct .svp-letter { background: var(--sa-good); color: #fff; }
.sa-ui .svp-correct { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--sa-good-ink); }
.sa-ui .is-hide-answers .svp-opt.is-correct { border-color: var(--sa-line); background: var(--sa-surface-2); }
.sa-ui .is-hide-answers .svp-opt.is-correct .svp-letter { background: var(--sa-idle-soft); color: var(--sa-ink-2); }
.sa-ui .is-hide-answers .svp-correct { display: none; }
.sa-ui .svp-foot { align-items: center; }
/* Approval strip: the state that decides whether staff can see the paper at all. */
.sa-ui .svp-approval { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; }
.sa-ui .svp-approval > .fa { font-size: 18px; margin-top: 1px; }
.sa-ui .svp-approval-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.sa-ui .svp-approval-text b { font-size: 14px; }
.sa-ui .svp-approval-note { margin-top: 4px; padding: 6px 10px; border-radius: 8px !important; background: rgba(255,255,255,.6); color: var(--sa-ink); }
.sa-ui .svp-approval.is-approved { background: var(--sa-good-soft); border-color: #b9dfb9; color: var(--sa-good-ink); }
.sa-ui .svp-approval.is-pending  { background: var(--sa-warn-soft); border-color: #f2e0b4; color: var(--sa-warn-ink); }
.sa-ui .svp-approval.is-sentback { background: var(--sa-crit-soft); border-color: #f2cfcf; color: var(--sa-crit-ink); }
.sa-ui .svp-approval.is-none     { background: var(--sa-idle-soft); color: var(--sa-ink-2); }
.sa-ui .svp-sendback { display: flex; flex-direction: column; gap: 6px; }
.sa-ui .svp-sendback label { margin: 0; font-size: 13px; font-weight: 600; color: var(--sa-ink); }
.sa-ui .svp-sendback textarea { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; resize: vertical; }
.sa-ui .svp-sendback textarea:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 3px rgba(42,120,214,.12); }
.sa-ui .svp-btn-approve { background: var(--sa-good); border-color: var(--sa-good); color: #fff; }
.sa-ui .svp-btn-approve:hover { background: var(--sa-good-ink); border-color: var(--sa-good-ink); color: #fff; }
.sa-ui .svp-btn-back { background: var(--sa-crit-soft); border-color: #f2cfcf; color: var(--sa-crit-ink); }
.sa-ui .svp-total { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sa-ui .svp-total.is-ok { color: var(--sa-good-ink); }
.sa-ui .svp-total.is-short { color: var(--sa-warn-ink); }

@media (max-width: 600px) {
    .sa-ui .svp-opts { margin-left: 0; grid-template-columns: 1fr; }
    .sa-ui .svp-q-head { flex-wrap: wrap; }
    .sa-ui .saf-box-body { padding: 14px; }
    .sa-ui .saf-box-head, .sa-ui .saf-box-actions, .sa-ui .saf-unavail { padding-left: 14px; padding-right: 14px; }
    .sa-ui .saf-tiles { grid-template-columns: 1fr; }
    .sa-ui .saf-tile { flex-wrap: wrap; }
    .sa-ui .saf-pill { margin: 10px 0 0; }
}
.sa-ui .saf-types { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .saf-types b { color: var(--sa-ink); }
.sa-ui .saf-types a { margin-left: auto; font-weight: 600; }

/* ---- Question health: "not ready" questions (StaffQuestionHealth) ---------------------------- */
.sa-ui button.sqb-sum--fix { appearance: none; border: 1px solid #f2cfcf; background: var(--sa-crit-soft); border-radius: 20px !important; padding: 3px 12px; cursor: pointer; font: inherit; }
.sa-ui button.sqb-sum--fix .sqb-sum-v,
.sa-ui button.sqb-sum--fix .sqb-sum-l { color: var(--sa-crit-ink); }
.sa-ui button.sqb-sum--fix:hover { border-color: var(--sa-crit); }
.sa-ui .sqb-q.is-bad { border-left: 3px solid var(--sa-crit); }
.sa-ui .sa-chip--crit { white-space: normal; }
.sa-ui .saf-note--crit { background: var(--sa-crit-soft); color: var(--sa-crit-ink); }
.sa-ui .saf-note--crit i { color: var(--sa-crit); }
.sa-ui .svp-fix { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin-top: 10px; border: 1px solid #f2cfcf; border-radius: var(--sa-radius-sm) !important; background: var(--sa-crit-soft); color: var(--sa-crit-ink); }
.sa-ui .svp-fix > .fa { font-size: 18px; margin-top: 1px; }
.sa-ui .svp-fix > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.sa-ui .svp-fix b { font-size: 14px; }
.sa-ui .svp-q.is-bad { border-color: #f2cfcf; border-left: 3px solid var(--sa-crit); }
.sa-ui .svp-q-problem { display: flex; align-items: center; gap: 7px; margin: 8px 0 0 40px; font-size: 12.5px; font-weight: 600; color: var(--sa-crit-ink); }
.sa-ui .sa-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Guided flow on each assessment card: 1 Add questions -> 2 Approve -> 3 Send to staff -------- */
.sa-ui .sae-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--sa-line); }
.sa-ui .sae-step { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--sa-muted); padding: 2px 9px; border-radius: 20px !important; background: var(--sa-idle-soft); }
.sa-ui .sae-step.is-done { color: var(--sa-good-ink); background: var(--sa-good-soft); }
.sa-ui .sae-step i { font-size: 10px; }
.sa-ui .sae-next { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: #fff; background: var(--sa-accent); border-radius: 20px !important; padding: 4px 13px; cursor: pointer; text-decoration: none; }
.sa-ui .sae-next:hover, .sa-ui .sae-next:focus { background: var(--sa-accent-dark); color: #fff; text-decoration: none; }
.sa-ui .sae-next.is-done { background: none; color: var(--sa-good-ink); cursor: default; padding: 4px 0; }
@media (max-width: 600px) {
    .sa-ui .sae-next { margin-left: 0; }
    .sa-ui .svp-q-problem { margin-left: 0; }
}

/* ---- Topic-wise Auto Fill: topic filter, topic chips, coverage line ------------------------------ */
.sa-ui .saf-topics { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm) !important; background: var(--sa-surface); }
.sa-ui .saf-topics-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.sa-ui .saf-topics-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 680; color: var(--sa-ink); }
.sa-ui .saf-topics-sub { flex: 1 1 260px; font-size: 12px; color: var(--sa-muted); }
.sa-ui .saf-topic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-ui .saf-topic { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 10px; border: 1px solid var(--sa-line); border-radius: 20px !important; font-size: 12.5px; font-weight: 600; color: var(--sa-ink-2); background: var(--sa-plane); cursor: pointer; }
.sa-ui .saf-topic input { margin: 0; }
.sa-ui .saf-topic.is-on { border-color: var(--sa-accent); background: var(--sa-accent-soft); color: var(--sa-accent-dark); }
.sa-ui .saf-topic.is-untagged .saf-topic-name { font-style: italic; }
.sa-ui .saf-topic-n { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 20px !important; background: rgba(11,11,11,.06); }
.sa-ui .saf-topic-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; margin-right: 6px; font-size: 11.5px; font-weight: 600; color: var(--sa-accent-dark); background: var(--sa-accent-soft); padding: 1px 8px; border-radius: 20px !important; }
.sa-ui .saf-topic-chip i { font-size: 10px; }
.sa-ui .svp-q-text .saf-topic-chip { display: flex; width: fit-content; margin-top: 6px; }
.sa-ui .saf-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0; font-size: 12.5px; }
.sa-ui .saf-cover-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 680; color: var(--sa-ink-2); }
.sa-ui .saf-cover-item { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 20px !important; background: var(--sa-idle-soft); color: var(--sa-ink-2); }
.sa-ui .saf-cover-item b { color: var(--sa-ink); }

/* ---- Staff bank: Import MCQs from Excel ------------------------------------------------------------- */
.sa-ui .sqi-cols th, .sa-ui .sqi-cols td { font-size: 12px; white-space: nowrap; }
.sa-ui .sqi-hint { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .sqi-hint i { color: var(--sa-accent-dark); margin-top: 2px; }
.sa-ui .sqi-row { display: flex; flex-wrap: wrap; gap: 14px; }
.sa-ui .sqi-row .sa-field { flex: 1 1 220px; min-width: 0; }
.sa-ui .sqi-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sa-ui .sqi-preview { margin-top: 14px; }
.sa-ui .sqi-list .svp-q.is-dup { opacity: .6; }
.sa-ui .sqi-foot-note { margin-right: auto; font-size: 12px; color: var(--sa-muted); }

/* ---- Assessments as a tile grid (2026-10-29): date badge, status strip, stats, 3-step bar, icon tools ---- */
.sa-ui .sae-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.sa-ui .sae-tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 14px;
    background: var(--sa-surface); border: 1px solid var(--sa-line); border-radius: 16px !important; overflow: hidden;
    box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 6px 18px rgba(11,11,11,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sa-ui .sae-tile:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sa-line); }
.sa-ui .sae-tile.is-approved:before { background: linear-gradient(90deg, #22b35e, #0ca30c); }
.sa-ui .sae-tile.is-pending:before  { background: linear-gradient(90deg, #fab219, #f59e0b); }
.sa-ui .sae-tile.is-back:before     { background: linear-gradient(90deg, #e05656, #d03b3b); }
.sa-ui .sae-tile.is-draft:before    { background: linear-gradient(90deg, #b9c3d0, #9aa6b5); }
.sa-ui .sae-tile:hover { transform: translateY(-2px); border-color: #cfe1fa; box-shadow: 0 2px 4px rgba(42,120,214,.06), 0 12px 28px rgba(42,120,214,.12); }
.sa-ui .sae-tile.is-off { background: var(--sa-surface-2); opacity: .85; }
.sa-ui .sae-tile.is-live { border-color: #b8d3f5; }

.sa-ui .sae-tile-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sa-ui .sae-date { flex: 0 0 auto; width: 56px; display: flex; flex-direction: column; align-items: center; overflow: hidden;
    border: 1px solid var(--sa-line); border-radius: 12px !important; background: var(--sa-surface); text-align: center; }
.sa-ui .sae-date-m { display: block; width: 100%; padding: 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff; background: var(--sa-accent); }
.sa-ui .sae-date-d { font-size: 22px; font-weight: 750; line-height: 1.1; color: var(--sa-ink); padding-top: 3px; font-variant-numeric: tabular-nums; }
.sa-ui .sae-date-w { font-size: 10.5px; font-weight: 650; color: var(--sa-muted); padding-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.sa-ui .sae-date.is-none { height: 64px; justify-content: center; color: var(--sa-muted); font-size: 18px; }
.sa-ui .sae-tile-title { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.sa-ui .sae-tile .sae-name { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-ui .sae-when { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .sae-when i { color: var(--sa-muted); font-size: 12px; }

.sa-ui .sae-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-ui .sae-mode { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--sa-muted); }
.sa-ui .sae-mode i { font-size: 10px; }

.sa-ui .sae-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--sa-line); border-radius: 12px !important; background: var(--sa-plane); overflow: hidden; }
.sa-ui .sae-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; min-width: 0; }
.sa-ui .sae-stat + .sae-stat { border-left: 1px solid var(--sa-line); }
.sa-ui .sae-stat b { font-size: 16px; font-weight: 750; color: var(--sa-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sa-ui .sae-stat span { font-size: 10.5px; font-weight: 650; color: var(--sa-muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

.sa-ui .sae-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sa-ui .sae-seg i { display: block; height: 6px; border-radius: 6px !important; background: var(--sa-idle-soft); }
.sa-ui .sae-seg.is-done i { background: var(--sa-good); }
.sa-ui .sae-seg span { display: block; margin-top: 5px; font-size: 11px; font-weight: 650; color: var(--sa-muted); }
.sa-ui .sae-seg.is-done span { color: var(--sa-good-ink); }
.sa-ui .sae-seg.is-done span:before { content: "\f00c\00a0"; font-family: FontAwesome; font-size: 9px; }

.sa-ui .sae-tile-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sa-line); }
.sa-ui .sae-tile .sae-next { margin-left: 0; justify-content: center; padding: 8px 14px; font-size: 13px; border-radius: 10px !important; }
.sa-ui .sae-tile .sae-next.is-done { padding: 8px 12px; background: var(--sa-good-soft); color: var(--sa-good-ink); border-radius: 10px !important; }
.sa-ui .sae-tools { display: flex; gap: 5px; justify-content: space-between; }
/* Icon-only tools: the label stays in the markup (and in the title tooltip), only the icon shows. */
.sa-ui .sae-tools .sae-act { width: 32px; height: 32px; padding: 0 !important; gap: 0; font-size: 0 !important; border-radius: 10px !important; }
.sa-ui .sae-tools .sae-act:before { font-size: 14px; margin: 0; }
.sa-ui .sae-tools .sae-act > i { font-size: 14px; }
.sa-ui .sae-tools .sae-act > span { display: none; }
.sa-ui .sae-tools .sae-act--auto:before { content: "\f0d0"; font-family: FontAwesome; }
.sa-ui .sae-tools .sae-act--send:before { content: "\f1d8"; }
.sa-ui .sae-tools .sae-act--view:before { content: "\f06e"; }
.sa-ui .sae-tools .sae-act--edit:before { content: "\f040"; }
.sa-ui .sae-tools .sae-act--del:before  { content: "\f014"; }
@media (max-width: 480px) {
    .sa-ui .sae-grid { grid-template-columns: 1fr; }
}

/* Tiles are white + one blue accent (restyle 2026-10-30; the all-green approved wash made a fully approved page a wall of
   green). Approved is the NORMAL state so it is the quietest: status lives only in the chip and a thin 3px top line. */
.sa-ui .sae-tile:before { height: 3px; }
.sa-ui .sae-tile.is-approved:before { background: #5cc489; }
.sa-ui .sae-tile.is-pending:before  { background: #f2b53a; }
.sa-ui .sae-tile.is-back:before     { background: #e06a6a; }
.sa-ui .sae-tile.is-draft:before    { background: #c3cbd6; }
.sa-ui .sae-tile .sae-date-m { background: var(--sa-accent); }
.sa-ui .sae-tile.is-live { border-color: #9cc3f2; box-shadow: 0 0 0 3px var(--sa-accent-soft), 0 1px 2px rgba(11,11,11,.04); }
.sa-ui .sae-tile .sae-seg.is-done i { background: var(--sa-ord-2); }
.sa-ui .sae-tile .sae-seg.is-done span { color: var(--sa-ink-2); }
.sa-ui .sae-tile .sae-next.is-done { background: var(--sa-plane); color: var(--sa-ink-2); border: 1px solid var(--sa-line); }
.sa-ui .sae-tile .sae-next.is-done i { color: var(--sa-good); }

/* Card tools: grey outline at rest, blue on hover, red only for Delete. Send stays the one blue action. */
.sa-ui .sae-tools .sae-act { background: var(--sa-surface); color: var(--sa-ink-2); border-color: var(--sa-line); box-shadow: none; }
.sa-ui .sae-tools .sae-act:hover { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #b8d3f5; box-shadow: none; transform: none; }
.sa-ui .sae-tools .sae-act--send { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #b8d3f5; }
.sa-ui .sae-tools .sae-act--send:hover { background: var(--sa-accent); color: #fff; border-color: var(--sa-accent); }
.sa-ui .sae-tools .sae-act--del:hover { background: var(--sa-crit-soft); color: var(--sa-crit-ink); border-color: #f2cfcf; }

/* ---- Auto Fill step 1, v2 (owner redesign 2026-10-29): marks meter, numbered steps, plain rows, one footer ---- */
.sa-ui .saf-v2 { padding: 0; overflow: hidden; }
.sa-ui .saf-v2 .saf-meter { padding: 18px 20px 16px; border-bottom: 1px solid var(--sa-line); background: var(--sa-surface); }
.sa-ui .saf-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-ui .saf-meter-title { font-size: 17px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-meter-n { font-size: 13px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .saf-meter-n b { font-size: 22px; font-weight: 700; color: var(--sa-ink); margin-right: 2px; }
.sa-ui .saf-meter-q { margin-left: 6px; color: var(--sa-muted); }
.sa-ui .saf-meter-track { height: 8px; margin-top: 10px; border-radius: 8px !important; background: #eef0f3; overflow: hidden; }
.sa-ui .saf-meter-track i { display: block; height: 100%; width: 0; border-radius: 8px !important; background: #c0c6cf; transition: width .25s ease, background-color .2s; }
.sa-ui .saf-meter.is-short .saf-meter-track i { background: #f2a51a; }
.sa-ui .saf-meter.is-ok .saf-meter-track i { background: #3bb36a; }
.sa-ui .saf-meter-msg { margin-top: 8px; font-size: 13px; color: var(--sa-ink-2); min-height: 18px; }
.sa-ui .saf-meter-state { display: none; }
.sa-ui .saf-meter.is-ok .saf-meter-state { display: inline; color: #1d7a3a; }
.sa-ui .saf-meter.is-ok .saf-meter-state:before { content: "\f058\00a0"; font-family: FontAwesome; }
.sa-ui .saf-meter.is-short #safTypeWarn { color: #9a5b00; }
.sa-ui .saf-meter.is-short #safTypeWarn:before,
.sa-ui .saf-meter.is-none #safTypeWarn:before { content: "\f071\00a0"; font-family: FontAwesome; }
.sa-ui .saf-meter.is-none #safTypeWarn { color: var(--sa-ink-2); }
.sa-ui .saf-v2-note { display: flex; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--sa-ink-2); }

.sa-ui .saf-v2-step { display: block; padding: 16px 20px; border-bottom: 1px solid var(--sa-line); margin: 0; font-weight: normal; }
.sa-ui .saf-v2-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sa-ui .saf-v2-switch .saf-v2-step-head { margin-bottom: 0; }
.sa-ui .saf-v2-no { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50% !important; background: var(--sa-accent-soft); color: var(--sa-accent-dark); font-size: 12px; font-weight: 700; }
.sa-ui .saf-v2-step-title { font-size: 14.5px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-v2-step-sub { display: block; font-size: 12.5px; color: var(--sa-ink-2); margin-top: 1px; }
.sa-ui .saf-v2-opt { font-size: 12px; color: var(--sa-muted); }
.sa-ui .saf-v2-step-head .saf-tiles-links { margin-left: auto; font-size: 12.5px; }

.sa-ui .saf-v2-list { border: 1px solid var(--sa-line); border-radius: 10px !important; overflow: hidden; background: var(--sa-surface); }
.sa-ui .saf-v2 .saf-tile.saf-v2-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 0; border-radius: 0 !important;
    box-shadow: none; background: transparent; cursor: pointer; font-weight: normal; }
.sa-ui .saf-v2 .saf-tile.saf-v2-row + .saf-v2-row,
.sa-ui .saf-v2 .saf-qpanel + .saf-v2-row { border-top: 1px solid var(--sa-line); }
.sa-ui .saf-v2 .saf-tile.saf-v2-row:hover { background: #f8fafc; }
.sa-ui .saf-v2 .saf-tile.saf-v2-row.is-on { background: #f3f8fe; box-shadow: none; }
.sa-ui .saf-v2 .saf-tile.saf-v2-row input { position: static; opacity: 1; pointer-events: auto; width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--sa-accent); }
.sa-ui .saf-v2-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-ui .saf-v2-row-name { font-size: 14px; font-weight: 650; color: var(--sa-ink); }
.sa-ui .saf-v2-row-meta { font-size: 12.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .saf-v2-row-sub { font-size: 12px; color: var(--sa-muted); }
.sa-ui .saf-v2 .saf-v2-row:not(.is-on) .saf-v2-row-main { opacity: .55; }
.sa-ui .saf-v2 .saf-v2-row:not(.is-on):hover .saf-v2-row-main { opacity: .8; }
.sa-ui .saf-v2-pick { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
    color: var(--sa-ink); background: var(--sa-surface); border: 1px solid #d0d5dd; border-radius: 8px !important; cursor: pointer; }
.sa-ui .saf-v2-pick:hover { border-color: var(--sa-accent); color: var(--sa-accent-dark); }
.sa-ui .saf-v2-row.is-open .saf-v2-pick { border-color: var(--sa-accent); color: var(--sa-accent-dark); background: var(--sa-accent-soft); }
.sa-ui .saf-v2 .saf-qpanel { margin: 0; border: 0; border-top: 1px solid var(--sa-line); border-radius: 0 !important; background: #fafbfc; }
.sa-ui .saf-v2-hint { margin-top: 8px; font-size: 12px; color: var(--sa-muted); cursor: help; }

.sa-ui .saf-v2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-ui .saf-v2-chips .saf-topic { cursor: pointer; }
.sa-ui .saf-v2-chips .saf-topic input { position: absolute; opacity: 0; pointer-events: none; }
.sa-ui .saf-v2-chips .saf-topic.is-on:before { content: "\f00c"; font-family: FontAwesome; font-size: 10px; }

.sa-ui .saf-v2-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.sa-ui .saf-v2-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sa-ui .saf-v2-switch input:checked + .saf-switch { background: var(--sa-accent); }
.sa-ui .saf-v2-switch input:checked + .saf-switch::after { transform: translateX(16px); }
.sa-ui .saf-v2-switch input:focus-visible + .saf-switch { outline: 2px solid var(--sa-accent); outline-offset: 2px; }

.sa-ui .saf-v2-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #fafbfc; }
.sa-ui .saf-v2-foot-note { flex: 1 1 auto; font-size: 12.5px; color: var(--sa-ink-2); }
.sa-ui .saf-v2-foot-note i { margin-right: 6px; color: var(--sa-muted); }
.sa-ui .saf-v2-foot #safGenerate i { margin-left: 6px; }
@media (max-width: 600px) {
    .sa-ui .saf-v2 .saf-tile.saf-v2-row { flex-wrap: wrap; }
    .sa-ui .saf-v2-pick { margin-left: 29px; }
    .sa-ui .saf-v2-foot { flex-wrap: wrap; }
    .sa-ui .saf-v2-foot-note { flex-basis: 100%; }
}

/* STAFF box on a tile is a button: opens who it is assigned to (2026-10-29). */
.sa-ui .sae-stats button.sae-stat--link { appearance: none; border: 0; border-left: 1px solid var(--sa-line); background: transparent; font: inherit; cursor: pointer; transition: background-color .15s; }
.sa-ui .sae-stats button.sae-stat--link:hover { background: var(--sa-accent-soft); }
.sa-ui .sae-stats button.sae-stat--link b { color: var(--sa-accent-dark); }
.sa-ui .sae-stats button.sae-stat--link span { color: var(--sa-accent-dark); }
.sa-ui .sae-stats button.sae-stat--link span i { font-size: 10px; }

/* "Assigned to" row on each tile (2026-10-29): initials badges + names + assigned/submitted/pending. */
.sa-ui .sae-assigned { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; text-align: left; font: inherit;
    background: #ffffff; border: 1px solid var(--sa-line); border-radius: 12px !important; cursor: pointer; transition: border-color .15s, background-color .15s; }
.sa-ui button.sae-assigned:hover { border-color: var(--sa-accent); background: var(--sa-accent-soft); }
.sa-ui .sae-assigned.is-empty { cursor: default; gap: 8px; font-size: 12.5px; color: var(--sa-muted); background: transparent; border-style: dashed; }
.sa-ui .sae-avatars { display: flex; flex: 0 0 auto; }
.sa-ui .sae-avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700;
    border-radius: 50% !important; border: 2px solid #ffffff; letter-spacing: .02em; }
.sa-ui .sae-avatar + .sae-avatar { margin-left: -8px; }
.sa-ui .sae-avatar.is-done { background: #dcf3e2; color: #1d7a3a; }
.sa-ui .sae-avatar.is-pending { background: #fdf0d5; color: #9a5b00; }
.sa-ui .sae-assigned-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-ui .sae-assigned-names { font-size: 13px; font-weight: 650; color: var(--sa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-ui .sae-assigned-sum { font-size: 11.5px; color: var(--sa-ink-2); font-variant-numeric: tabular-nums; }
.sa-ui .sae-assigned-go { flex: 0 0 auto; color: var(--sa-muted); }

/* ---- Staff Assessment Report v2 (2026-10-29): summary + ring, 4 numbers, tabbed staff table ----------------- */
.sa-ui .sar-pick { display: flex; align-items: flex-end; gap: 14px; padding: 16px 18px; margin-bottom: 16px; background: #ffffff;
    border: 1px solid var(--sa-line); border-radius: 14px !important; box-shadow: 0 1px 2px rgba(11,11,11,.04); }
.sa-ui .sar-pick-ico { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px !important; background: var(--sa-accent-soft); color: var(--sa-accent-dark); font-size: 17px; }
.sa-ui .sar-pick-field { flex: 1 1 auto; min-width: 0; }
.sa-ui .sar-pick-field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--sa-ink-2); }
.sa-ui .sar-pick-field select { width: 100%; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--sa-ink);
    border: 1px solid #d0d5dd; border-radius: 10px !important; background: #ffffff; }
.sa-ui .sar-pick-btn { flex: 0 0 auto; height: 40px; }

.sa-ui .sar-hero { display: flex; align-items: center; gap: 20px; padding: 20px 22px; margin-bottom: 14px; background: #ffffff;
    border: 1px solid var(--sa-line); border-radius: 16px !important; box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 6px 18px rgba(11,11,11,.04); }
.sa-ui .sar-hero.is-done { background: #f1faf3; border-color: #cdebd4; }
.sa-ui .sar-hero-main { flex: 1 1 auto; min-width: 0; }
.sa-ui .sar-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-muted); }
.sa-ui .sar-title { margin: 4px 0 8px; font-size: 20px; font-weight: 700; color: var(--sa-ink); line-height: 1.3; }
.sa-ui .sar-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--sa-ink-2); }
.sa-ui .sar-meta i { margin-right: 6px; color: var(--sa-muted); }
.sa-ui .sar-ring { --p: 0; flex: 0 0 auto; width: 112px; height: 112px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#3bb36a calc(var(--p) * 1%), #eef0f3 0); }
.sa-ui .sar-ring-in { width: 88px; height: 88px; border-radius: 50% !important; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sa-ui .sar-ring-in b { font-size: 22px; font-weight: 750; color: var(--sa-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sa-ui .sar-ring-in span { font-size: 10.5px; color: var(--sa-ink-2); margin-top: 2px; padding: 0 6px; }

.sa-ui .sar-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sa-ui .sar-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 60px; min-height: 76px; background: #ffffff;
    border: 1px solid var(--sa-line); border-radius: 14px !important; }
.sa-ui .sar-kpi > i { position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px !important; background: #f2f4f7; color: #475467; font-size: 14px; }
.sa-ui .sar-kpi b { font-size: 24px; font-weight: 750; color: var(--sa-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sa-ui .sar-kpi span { font-size: 12px; font-weight: 600; color: var(--sa-ink-2); }
.sa-ui .sar-kpi em { font-style: normal; font-size: 11.5px; color: var(--sa-muted); }
.sa-ui .sar-kpi.is-good > i { background: #dcf3e2; color: #1d7a3a; }
.sa-ui .sar-kpi.is-good b { color: #1d7a3a; }
.sa-ui .sar-kpi.is-warn > i { background: #fdf0d5; color: #9a5b00; }
.sa-ui .sar-kpi.is-warn b { color: #9a5b00; }
.sa-ui .sar-kpi.is-accent > i { background: var(--sa-accent-soft); color: var(--sa-accent-dark); }
.sa-ui .sar-kpi.is-accent b { color: var(--sa-accent-dark); }

.sa-ui .sar-table-card { padding: 0; overflow: hidden; }
.sa-ui .sar-tbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--sa-line); }
.sa-ui .sar-tabs { display: inline-flex; gap: 2px; padding: 3px; background: #f2f4f7; border-radius: 10px !important; }
.sa-ui .sar-tab { appearance: none; border: 0; background: transparent; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sa-ink-2);
    border-radius: 8px !important; cursor: pointer; }
.sa-ui .sar-tab span { margin-left: 4px; font-size: 11px; color: var(--sa-muted); }
.sa-ui .sar-tab.is-on { background: #ffffff; color: var(--sa-ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.sa-ui .sar-tbar .sa-tbar-find { flex: 1 1 220px; }
.sa-ui .sar-tbar .sa-tbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.sa-ui table.sar-table, .sa-ui table.sar-table th, .sa-ui table.sar-table td { border: 0 !important; }
.sa-ui table.sar-table { width: 100%; border-collapse: collapse; }
.sa-ui table.sar-table thead th { padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sa-muted);
    background: #fafbfc; border-bottom: 1px solid var(--sa-line) !important; text-align: left; }
.sa-ui table.sar-table tbody td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid #f0f1f3 !important; font-size: 13px; }
.sa-ui table.sar-table tbody tr:hover td { background: #f8fafc; }
.sa-ui .sar-person { display: flex; align-items: center; gap: 10px; }
.sa-ui .sar-person .sa-sub-line { display: block; }
.sa-ui .sar-avatar { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    border-radius: 50% !important; }
.sa-ui .sar-avatar.is-done { background: #dcf3e2; color: #1d7a3a; }
.sa-ui .sar-avatar.is-pending { background: #fdf0d5; color: #9a5b00; }
.sa-ui .sar-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; border-radius: 999px !important; white-space: nowrap; }
.sa-ui .sar-pill.is-done { background: #ecfdf3; color: #067647; }
.sa-ui .sar-pill.is-pending { background: #fffaeb; color: #b54708; }
.sa-ui .sar-score { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.sa-ui .sar-score b { font-size: 14px; color: var(--sa-ink); }
.sa-ui .sar-score span { font-size: 12px; color: var(--sa-muted); }
.sa-ui .sar-score em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--sa-ink-2); }
.sa-ui .sar-bar { height: 5px; margin-top: 5px; border-radius: 5px !important; background: #eef0f3; overflow: hidden; }
.sa-ui .sar-bar i { display: block; height: 100%; border-radius: 5px !important; background: #3bb36a; }
.sa-ui .sar-none { padding: 26px; text-align: center; font-size: 13px; color: var(--sa-muted); }
.sa-ui .sar-table-card .sqb-pager { padding: 10px 14px; }
@media (max-width: 900px) {
    .sa-ui .sar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sa-ui .sar-pick { flex-wrap: wrap; }
    .sa-ui .sar-pick-btn { width: 100%; }
    .sa-ui .sar-hero { flex-direction: column; align-items: flex-start; }
}

/* ---- Auto Fill step 1: guard against the app theme's global <label> rules (2026-10-30) ----
   The v2 rows and the switch are <label>s. A theme-level label rule (uppercase, letter-spacing, block/inline-block)
   was winning over their layout, which stacked the checkbox, text and button and shouted every caption. Reset the
   inherited text styling and pin the layout so no outer `label` rule can change it. */
.sa-ui .saf-v2 label,
.sa-ui .saf-v2 label * { text-transform: none !important; letter-spacing: normal !important; }
.sa-ui .saf-v2 .saf-tile.saf-v2-row { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100%; }
.sa-ui .saf-v2 .saf-v2-row-main { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-width: 0; }
.sa-ui .saf-v2 .saf-v2-switch { display: flex !important; flex-direction: row !important; align-items: center !important; }
.sa-ui .saf-v2 .saf-v2-step { font-size: 14px; }
.sa-ui .saf-v2 .saf-v2-row-name { font-size: 14px; font-weight: 650; }
.sa-ui .saf-v2 .saf-v2-row-meta { font-size: 12.5px; font-weight: 500; }
.sa-ui .saf-v2 .saf-v2-row-sub { font-size: 12px; font-weight: 400; }

/* ---- Staff Question Bank cleanup (2026-10-30) ----
   Row icons: grey outline at rest, blue on hover, red only for Delete (same rule as the assessment cards - five colours per
   row read as noise). Locked is a chip in the tag line now, "Show answer" shares that line, rows are tighter. */
.sa-ui .sqb-q-acts .sqb-act { background: var(--sa-surface); color: var(--sa-ink-2); border-color: var(--sa-line); box-shadow: none; }
.sa-ui .sqb-q-acts .sqb-act:hover { background: var(--sa-accent-soft); color: var(--sa-accent-dark); border-color: #b8d3f5; box-shadow: none; transform: none; }
.sa-ui .sqb-q-acts .sqb-act--del:hover { background: var(--sa-crit-soft); color: var(--sa-crit-ink); border-color: #f2cfcf; }
.sa-ui .sqb-q { padding: 12px 16px; gap: 12px; }
.sa-ui .sqb-list { gap: 8px; }
.sa-ui .sqb-q-tags { align-items: center; margin-top: 8px; }
.sa-ui .sqb-q-tags .sqb-expand { padding: 0; margin-left: 4px; }
.sa-ui .sqb-types { margin-top: 4px; }