/* Layoff-Exercise — educator backoffice.
 *
 * Rebuilt 26 August 2026. Until then this file held NINE rules and the
 * backoffice was actually styled by layoff-base.css, the PARTICIPANT
 * stylesheet — 1,361 lines of bare `body`, `h1`, `h2`, `h3`, `table`, `th`
 * and `footer` selectors. That is why the educator pages had participant
 * headline sizes, a green primary button and a navy table head while every
 * other tool's backoffice looked like the fleet.
 *
 * The fleet look was already here, in backoffice-canonical.css: 286 rules, of
 * which 228 matched the other seven tools byte for byte. It was loaded by five
 * pages (login, account, users) and by nothing else — which is exactly why
 * those five always looked right and the dashboard did not. That file is now
 * merged in and gone.
 *
 * WHAT LIVES WHERE:
 *   phronon_common/backoffice-core.css   what the fleet agrees on
 *   this file                            what is genuinely Layoff's
 *   layoff-base.css                      participants only — NOT loaded here
 *
 * Nothing here may repeat backoffice-core.css exactly; a test enforces it.
 */

/* ── Legacy names, mapped onto the fleet tokens ──────────────────────────
   These eight were defined in layoff-base.css and rules all over this file
   still reach for them. Dropping that sheet left them undefined, which is not
   a visible error: an unresolved var() falls back to nothing, so `.card`
   simply lost its background and read as a gap in the page.

   They are ALIASES, not new values — each points at the fleet's own --bo-*
   token, so the backoffice takes the FLEET palette rather than the
   participant one. Where the fleet has no equivalent, the original stays.

   The right end state is no legacy names at all, but that is a rename across
   the whole sheet and 900 lines of inline <style>. This block switches the
   palette today without it. */
:root {
  --primary-color:    var(--bo-primary);
  --secondary-color:  var(--bo-accent);
  --text-primary:     var(--bo-text);
  --text-secondary:   var(--bo-muted);
  --bg-primary:       var(--bo-surface);
  --border-color:     var(--bo-border);
  --shadow:           var(--shadow-card, 0 1px 2px rgba(0,0,0,.06));
  --info-color:       #4299e1;
  --bo-code-bg:       #f6f6f6;
  --bo-code-bg-hover: #ededed;
}

/* The content wrapper. NOT in backoffice-core.css, because the fleet does not
   agree: Whiteout, Drawbridge, OrgDesignSim and Moral Mirror say 1320px and
   annotate it "fleet-uniform (29 Jul)"; Controversy Generator, Inequality and
   LSR-profiler say 1360px. 1320 is the annotated decision and the majority, so
   Layoff joins that side; the split is recorded in TO DO rather than settled
   by a silent edit to three other tools. */
/* Whiteout's rule verbatim, including `flex: 1` and `width: 100%`.
   Without width:100% the wrapper is a flex item that shrinks to its
   CONTENT — it measured 793px inside a 1500px window while claiming a
   1320px max-width, which reads as "the box is too narrow" and not at
   all as "the width rule is missing a property". Keeping it identical
   also means it can be shared the day the fleet settles 1320 vs 1360. */
.bo-content { flex: 1; max-width: 1320px; margin: 0 auto; width: 100%; padding: 1.75rem 1.5rem; }


/* ============================================================
   Controversy Generator — backoffice styles
   ============================================================ */

:root {
  --bo-bg:          #efefef;
  --bo-surface:     #ffffff;
  --bo-border:      #d4d4d4;
  --bo-text:        #171717;
  --bo-muted:       #666666;
  --bo-primary:     #232323;
  --bo-primary-h:   #0f0f0f;
  --bo-accent:      #4a4a4a;
  --bo-danger:      #c0392b;
  --bo-danger-bg:   #fdecea;
  --bo-warning:     #4f4f4f;
  --bo-warning-bg:  #f1f1f1;
  --bo-success:     #3f3f3f;
  --bo-success-bg:  #ededed;

  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 6px rgba(0,0,0,.07);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body { font-family: var(--font); color: var(--bo-text); background: var(--bo-bg); line-height: 1.5; }

/* ── Shared ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem 1.1rem;
  border: none; border-radius: var(--radius-sm);
  font: 600 .875rem/1 var(--font);
  cursor: pointer; text-decoration: none;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}

.btn-primary:hover { background: var(--bo-primary-h); }

.btn-secondary { background: transparent; color: var(--bo-primary); border: 1.5px solid var(--bo-primary); }

.btn-secondary:hover { background: #f0f0f0; }

.btn-danger:hover { background: #a93226; }

.btn-warning   { background: var(--bo-warning-bg); color: var(--bo-warning); border: 1.5px solid var(--bo-warning); }

.btn-sm        { padding: .35rem .8rem; font-size: .8rem; }

.btn-link      { background: none; border: none; color: var(--bo-muted); font: inherit; cursor: pointer; padding: 0; }

.alert {
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: .875rem;
}

.alert-error   { background: var(--bo-danger-bg);  color: var(--bo-danger);  border-left: 3px solid var(--bo-danger); }

.alert-success { background: var(--bo-success-bg); color: var(--bo-success); border-left: 3px solid var(--bo-success); }

.field label { display: block; font-weight: 600; font-size: .825rem; color: var(--bo-muted); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .03em; }

.field-row .field { flex: 1 1 200px; }

/* Match the secondary action buttons (Send reset / Set) so password
   controls look consistent in both the add-user form and the table rows. */
.pw-toggle, .pw-generate {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bo-primary); background: transparent;
  border-radius: var(--radius-sm); padding: .35rem .8rem;
  font-size: .8rem; font-weight: 600; color: var(--bo-primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1.5px solid var(--bo-border);
  border-radius: var(--radius-sm);
  font: .9rem/1.4 var(--font);
  background: var(--bo-surface);
  color: var(--bo-text);
  transition: border-color .15s;
  /* Match select to input height across browsers (Safari especially)
     by stripping native chrome and rendering a custom arrow. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="file"] { -webkit-appearance: auto; appearance: auto; padding: .35rem .5rem; }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23666' d='M0 1.5l6 5 6-5L10.5 0 6 4 1.5 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bo-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

textarea { resize: vertical; min-height: 70px; }

.section-heading { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--bo-primary); }

/* ── Nav ── *//* ── Layout ── */
.bo-body { background: var(--bo-bg); min-height: 100dvh; }

/* ── Login ── */
.bo-login-card {
  background: var(--bo-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 400px;
}

/* ── Page header ── */
.bo-page-header {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.5rem;
}

.bo-page-header h1 { font-size: 1.4rem; font-weight: 700; flex: 1; }

.back-link { color: var(--bo-muted); text-decoration: none; font-size: .875rem; flex: 1 1 100%; }

/* ── Table ── */
.bo-table-wrap { overflow-x: visible; }

.bo-table th {
  padding: .65rem .9rem;
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bo-muted);
  border-bottom: 1.5px solid var(--bo-border);
}

.bo-table tr:hover td { background: #f6f6f6; }

code, .code-chip {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: .82rem;
  background: #f1f1f1;
  color: #2f2f2f;
  padding: .15rem .45rem;
  border-radius: 4px;
}

.state-badge--open   { background: var(--bo-success-bg); color: var(--bo-success); }

.state-badge--closed { background: #f0f1f4; color: var(--bo-muted); }

.role-badge { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; }

.role-badge--admin    { background: #f0f4fb; color: var(--bo-primary); }

.role-badge--educator { background: #f0faf4; color: var(--bo-success); }

/* ── Forms (backoffice) ── */
.bo-form-card {
  background: var(--bo-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.bo-form-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--bo-primary); }

.factor-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr);
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: .65rem;
}

@media (max-width: 640px) {
}

/* ── Tabs ── */
.tabs { margin-top: 1rem; }

#wordcloud-canvas { width: 100%; height: 360px; display: block; }

@media print {
  body { background: #fff; }
}

/* ============================================================
   Backoffice footer
   ============================================================ */
.bo-footer {
  margin-top: 2.5rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--bo-border, #e2ddd5);
  text-align: center;
  font-size: .78rem;
  color: var(--bo-muted, #6b6560);
}

.bo-footer nav {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .35rem .55rem;
  margin-bottom: .35rem;
}

.bo-footer a {
  color: var(--bo-muted, #6b6560);
  text-decoration: none;
}

.bo-footer a:hover { color: var(--bo-primary, #2c4a7c); text-decoration: underline; }

.table-search {
  width: 100%;
  max-width: 360px;
}

.table-page-size-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--bo-muted); white-space: nowrap;
}

.table-page-size {
  padding: .2rem .4rem; font-size: .85rem;
  border: 1px solid var(--bo-border); border-radius: 4px; background: #fff;
}

th.sortable-col {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.4rem !important;
}

th.sortable-col:hover { color: var(--bo-primary); background: #f0f0f0; }

th.sortable-col::after {
  content: "⇅";
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8rem;
  opacity: .35;
}

th.sortable-col.is-sorted-asc::after  { content: "↑"; opacity: 1; color: var(--bo-primary); }

th.sortable-col.is-sorted-desc::after { content: "↓"; opacity: 1; color: var(--bo-primary); }

.table-empty-msg {
  margin-top: 1rem;
  padding: 1rem;
  color: var(--bo-muted);
  background: #f6f6f6;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: .9rem;
}

/* ============================================================
   Bulk select
   ============================================================ */
.col-check {
  width: 2.5rem;
  padding-left: .75rem !important;
  padding-right: .5rem !important;
}

.col-check input[type="checkbox"] { cursor: pointer; accent-color: var(--bo-primary); }

.bulk-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.1rem;
  background: var(--bo-primary);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  z-index: 200;
  white-space: nowrap;
  flex-wrap: wrap;
}

.bulk-deselect { background: none; border: none; color: rgba(255,255,255,.6); font-size: .8rem; cursor: pointer; padding: 0 .25rem; }

/* ============================================================
   Presentation overlay (snapshot/static-image approach).
   Built lazily by charts.js on the first click of "Present".
   ============================================================ */

#presentation-overlay {
  position: fixed;
  inset: 0;
  background: #f4f4f4;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}

#presentation-overlay[hidden] { display: none; }

#po-close {
  background: none;
  border: none;
  color: #f5f5f5;
  font-size: 1.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}

#po-close:hover { background: rgba(255,255,255,.12); }

/* ============================================================
   Tab (a) "This class" — two-chart row: bar chart + certainty doughnut
   ============================================================ */
/* The certainty doughnut now lives in its own tab (c). The chart-wrap
   gets a sensible height so Chart.js's responsive layout can compute it. */
.chart-wrap--doughnut {
  height: 360px;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 760px) {
}

@media (max-width: 700px) {}

.cc-grid--3col { grid-template-columns: 165px 1fr 155px; }

.btn-regen { height: 2.35rem; padding: 0 .65rem; border: 1.5px solid var(--bo-border); border-radius: var(--radius-sm); background: #f5f5f5; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background .15s; flex-shrink: 0; }

.btn-regen:hover { background: #e0e0e0; }

@media (max-width: 640px) {
}


/* ── Chart cards on the results pages ────────────────────────────────────
   Lifted from layoff-base.css on 26 August 2026 so the backoffice no longer
   has to load the participant stylesheet to render its charts. .chart-header
   alone appears 39 times across the results templates. */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* The page banner. The fleet backoffice has no coloured banner at all — a
   .bo-page-header is a heading on the page background — so this is now a
   plain surface with ordinary text instead of a navy gradient with white
   text on it. The rule stays (three templates still use .header) rather than
   being deleted out from under them. */
header, .header, .academic-header {
    background: transparent;
    color: var(--bo-text);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

header h1, .header h1, .academic-header h1 { 
    color: white; 
    margin-bottom: 1rem;
}

/* Card system */
.card, .form-section, .info-card {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.metric-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow);
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Form elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}


.btn-success:hover, .btn-danger:hover, .btn-warning:hover, 

/* Download buttons */
/* The fleet marks a download as a QUIET action — `btn btn-ghost btn-sm`, an
   outline, not a fill (Whiteout, Drawbridge). This was a solid blue
   --info-color, and there are forty of them on the results pages, which made
   the loudest thing on a page of charts the buttons rather than the charts.
   Matched to .btn-ghost here rather than renamed, because the export walkers
   select on .download-btn. */
.download-btn {
    background: transparent;
    color: var(--bo-text);
    border: 1px solid var(--bo-border);
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.download-btn:hover {
    background: #f1f1f1;
}

.kept, .status-kept { 
    background-color: rgba(72, 187, 120, 0.1); 
}

.laid-off, .status-layoff { 
    background-color: rgba(245, 101, 101, 0.1); 
}

/* Grid systems */
.metrics-summary, .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.charts-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Chart containers */
.chart-container {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 400px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    color: var(--primary-color);
}

.employee-item .drag-handle {
    /* The arrow buttons are appended by rank-a11y.js at runtime, so DOM
       order alone cannot put the handle outboard of them. order:1 sends it
       to the trailing edge — the thumb zone on a phone. Safe for a11y: the
       handle is aria-hidden and not focusable, so nothing's focus or reading
       order diverges from what is seen. */
    order: 1;
    flex-shrink: 0;
    width: 24px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Muted, not border-grey: this is the drag affordance, and at
       --border-color it sat near 1.2:1 against the card. */
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.employee-item.sortable-chosen .drag-handle { cursor: grabbing; }

/* Loading states */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(30, 60, 114, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

/* Confirmation modal */
.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
}

.confirm-overlay.visible {
    display: -webkit-flex;
    display: flex;
}

.confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    text-align: center;
    animation: confirmPop 0.2s ease;
}

.confirm-box h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--text-primary, #2d3748);
}

.confirm-box p {
    margin: 0 0 1.5rem;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.confirm-box .confirm-actions {
    display: -webkit-flex;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-box .confirm-actions button {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.confirm-box .btn-confirm-yes {
    background: var(--bo-primary);
    color: #fff;
}

.confirm-box .btn-confirm-yes:hover {
    background: var(--bo-primary-h);
}

.confirm-box .btn-confirm-cancel {
    background: #e2e8f0;
    color: #4a5568;
}

.confirm-box .btn-confirm-cancel:hover {
    background: #cbd5e0;
}

.chart-loading .loading {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

[lang="ar"] .container {
    direction: rtl;
}

[lang="ar"] .form-group label {
    text-align: right;
}

[lang="ar"] /* RTL-specific button alignments */
[lang="ar"] .chart-header {
    direction: rtl;
}

/* -2.0 to -1.2 */
.heatmap-container .moderate-negative { background-color: #fd7f7f; color: #000; }

/* -0.7 to -0.2 */
.heatmap-container .neutral           { background-color: #ffffff; color: #000; }

/* +0.2 to +0.7 */
.heatmap-container .moderate-positive { background-color: #90ee90; color: #000; }

/* Legend rows: keep color sample and text on the same line */
.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;  /* keep on one line */
}

.legend-row .legend-text { display: inline-block; }

/* ===== Tab Navigation ===== */
/* ── Tabs, matched to the fleet component (26 August 2026) ───────────────
   Whiteout's .tabs-row / .tabs / .tab is the reference: a hairline rule under
   the row, muted labels, and the ACTIVE one marked by a 3px underline in the
   nav colour — no pill, no tinted background, no gradient.

   Layoff had its own navy pills with a translucent wash and a hardcoded
   #1e3c72, which is the participant palette rather than the backoffice one.
   The class NAMES stay .results-tabs / .results-tab because the tab
   scripts on comprehensive_results.html and aggregate.html select on them;
   only the appearance changed. Making it one shared .tab component across
   the fleet is the obvious next step and is recorded in TO DO. */
.results-tabs {
    display: flex;
    align-items: flex-end;
    gap: .15rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--bo-border);
}

.results-tab {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: .55rem .95rem;
    margin-bottom: -1px;
    font: 600 .92rem/1.2 inherit;
    color: var(--bo-muted);
    cursor: pointer;
    white-space: nowrap;
}

.results-tab:hover { color: var(--bo-text); }

.results-tab.active {
    color: var(--bo-text);
    border-bottom-color: var(--bo-nav-bg);
}

.results-tab:focus-visible {
    outline: 2px solid var(--bo-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .results-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .results-tab { padding: .5rem .7rem; font-size: .85rem; }
}

.presentation-mode-btn {
    margin-left: auto;
    padding: 0.5rem 1rem;
    background: var(--bo-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none !important;
    /* inline-flex + align-items keeps <a> and <button> visually identical;
       baseline-based alignment differs between the two element types and
       causes a 1–2px vertical offset even with matching padding/line-height. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.presentation-mode-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
    color: white;
    text-decoration: none !important;
}

.presentation-mode-btn:visited,
.presentation-mode-btn:active,
.presentation-mode-btn:focus {
    color: white;
    text-decoration: none !important;
}

/* Was #48bb78 green, lifted with the rest of the chart chrome from the
   participant sheet. A download is an ordinary backoffice action, so it takes
   the fleet's own button colour like every other one. */
.download-tab-btn {
    padding: 0.5rem 1rem;
    background: var(--bo-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    font-family: inherit;
    white-space: nowrap;
    /* Match .presentation-mode-btn — inline-flex avoids the <a> vs <button>
       baseline-rendering discrepancy that causes a tiny vertical mis-alignment. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.download-tab-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

/* RTL support for tabs and presentation */
[dir="rtl"] .results-tabs {
    direction: rtl;
}

[dir="rtl"] .presentation-mode-btn {
    margin-left: 0.5rem;
    margin-right: auto;
}

[dir="rtl"] .download-tab-btn {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .pres-nav-prev {
    left: auto;
    right: 1.5rem;
}

[dir="rtl"] .pres-nav-next {
    right: auto;
    left: 1.5rem;
}

/* Page header row inside admin pages (title + primary action) */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.page-header h1 { margin: 0; font-size: 1.5rem; color: var(--text-primary); }

/* ==========================================================================
   Bulk-select + action bar  (C8)
   ========================================================================== */
.bulk-cb-all,
.bulk-cb { cursor: pointer; width: 15px; height: 15px; }

.bulk-bar__clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: .82rem;
    padding: .2rem .4rem;
}

.bulk-bar__clear:hover { color: #333; }

table.dataTable thead th.no-sort { cursor: default; }

table.dataTable > thead th.no-sort::before,
table.dataTable > thead th.no-sort::after { content: '' !important; display: none !important; }


/* ── The retention table and the export buttons ──────────────────────────
   Moved out of comprehensive_results.html's inline <style> on 26 August 2026.
   They were only ever defined on that ONE page, while aggregate.html uses the
   same classes — its retention table was being held together by the bare
   `table`/`th` rules in the PARTICIPANT stylesheet, and lost them the moment
   the backoffice stopped loading it. In a sheet, both pages get them and they
   can be compared with the rest of the fleet. (FL-029: 900-odd more lines of
   inline <style> remain.) */
.table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0;
    }

.retention-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }

.retention-table th,
    .retention-table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

/* The fleet's data-table head is a light band with dark text (.bo-table
   thead), not a navy bar with white text — that navy was the PARTICIPANT
   --primary-color. Note the explicit `color`: layoff-base.css carries a bare
   `th { color: white }`, and the last time a table head here inherited it the
   result was white on near-white and invisible (owner, 25 August 2026). */
.retention-table th {
        background: #f3f3f3;
        color: var(--bo-text);
        font-weight: 600;
    }

/* Was #6366f1 indigo — a colour that appears nowhere else in the fleet. */
.download-all-btn {
        background: var(--bo-primary);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        cursor: pointer;
        margin-top: 8px;
    }

.download-all-btn:hover {
        filter: brightness(0.95);
    }

/* The note under the archived list explaining what Unarchive and Delete do.
   A definition list rather than prose: an educator scanning it wants the one
   line about the button they are hovering over, not a paragraph. */
/* .bo-note & friends moved to phronon_common/backoffice-core.css on
   26 August 2026 (FL-030): four more tools grew the same note under their
   archived-classes table, and this file may not repeat a rule the shared
   sheet already states. */