body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f4f5f7;
  margin: 0;
  color: #1a1a1a;
}

#view-login {
  max-width: 380px;
  margin: 80px auto;
  background: white;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  text-align: center;
}

#view-login form {
  text-align: left;
}

header {
  background: #1a2b4c;
  color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  height: 40px;
  width: auto;
  border-radius: 4px;
}

.login-logo {
  display: block;
  height: 72px;
  width: auto;
  margin: 0 auto 16px;
  border-radius: 4px;
}

.login-subtitle {
  font-size: 0.72em;
  white-space: nowrap;
}

header h1 { font-size: 1.2rem; margin: 0; }

nav button {
  margin-left: 8px;
}

.panel {
  max-width: 640px;
  margin: 24px auto;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

form label {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

form input, form select, form textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}

form label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  margin-top: 12px;
}

form label.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 0;
}

button {
  background: #1a2b4c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}

button:hover { background: #28406e; }

/* Disabled buttons must still be READABLE. The old rule set a #999 background
   and left the text colour alone, which on a light-text button gave roughly
   1.4:1 contrast -- illegible. #667085 with white text is about 4.9:1, so it
   still reads as unavailable without becoming a grey smear. */
button:disabled {
  background: #667085;
  color: #fff;
  border-color: #667085;
  cursor: not-allowed;
  opacity: 1;
}

.error { color: #b00020; margin-top: 8px; }
.result { color: #146c2e; margin-top: 8px; }
/* A .result box carries success green. When the same box has to show a failure,
   add .is-error so it reads red instead -- an error printed in green is read as
   "it worked." */
.result.is-error { color: #b00020; }

#log-form button { margin-top: 16px; }

.pending-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.pending-card .meta {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 8px;
}

.pending-card select, .pending-card input {
  margin-bottom: 8px;
}

.pending-card .actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.pending-card .actions button.confirm {
  background: #146c2e;
}
.pending-card .actions button.confirm:hover {
  background: #1c8a3c;
}
.pending-card .actions button.es-delete,
.actions button.es-delete {
  background: #b00020;
}
.pending-card .actions button.es-delete:hover,
.actions button.es-delete:hover {
  background: #d21a3a;
}

.calendar-panel {
  max-width: 900px;
}

.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-nav button {
  padding: 4px 10px;
  font-size: 0.85rem;
}

/* First Day / Today / Last Day sit ABOVE Prev/Next and are centered over them,
   so the whole block still reads as one navigation control on the right. */
.calendar-navwrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.calendar-jump {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.calendar-jump button {
  padding: 4px 10px;
  font-size: 0.85rem;
}

/* ⚠ button.secondary and button.secondary:hover are declared far below
   button:disabled and out-rank it, so a dead First/Last Day button would look
   live -- and would light up on hover. Both selectors below outrank both of
   them. Its title says why the button is dead. */
.calendar-jump button:disabled,
.calendar-jump button:disabled:hover {
  background: #667085;
  color: #fff;
  cursor: not-allowed;
}

#cal-month-label {
  font-weight: 600;
  min-width: 140px;
  text-align: center;
}

.calendar-legend {
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #555;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  margin-left: 12px;
}
.legend-dot:first-child { margin-left: 0; }
.legend-dot.confirmed { background: #146c2e; }
.legend-dot.provisional { background: #c98a12; }
.legend-dot.requested { background: #3a6ea5; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-header {
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  padding: 4px 0;
  color: #555;
}

.cal-day-cell {
  min-height: 90px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px;
  background: #fafafa;
  font-size: 0.75rem;
  overflow-y: auto;
}

.cal-day-cell.empty {
  background: transparent;
  border: none;
}

.cal-day-number {
  font-weight: 600;
  margin-bottom: 2px;
}

.cal-session-entry {
  border-radius: 3px;
  padding: 2px 4px;
  margin-bottom: 2px;
  color: white;
  font-size: 0.7rem;
  line-height: 1.2;
}

.cal-session-entry.confirmed { background: #146c2e; }
.cal-session-entry.provisional { background: #c98a12; }
/* Pending self-select requests: steel blue with a dashed edge, so they read as
   "requested, not yet on the schedule". */
.cal-session-entry.requested {
  background: #3a6ea5;
  border: 1px dashed #cfe0f2;
}

/* No Class (cancellation) days: greyed cell with a diagonal hatch and a chip,
   so they read as unavailable at a glance. Instructors also cannot select them
   to teach (enforced server-side). */
.cal-day-cell.cal-no-class {
  background-image:
    repeating-linear-gradient(45deg, #e2e2e2 0, #e2e2e2 6px, #f2f2f2 6px, #f2f2f2 12px);
  background-color: #ededed;
  color: #777;
}
.cal-no-class-chip {
  display: inline-block;
  background: #6b6b6b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
}

#managecourses-search {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}

.course-row {
  border-bottom: 1px solid #eee;
  padding: 6px 0;
}

.course-row-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.course-row-code {
  font-weight: 600;
  min-width: 60px;
}

.course-row-title {
  flex: 1;
}

.course-row-hours {
  color: #555;
  min-width: 36px;
  text-align: right;
}

.course-row-summary button.edit-toggle {
  padding: 2px 10px;
  font-size: 0.8rem;
}

.course-row-edit {
  margin-top: 8px;
  padding: 12px;
  background: #f7f7f7;
  border-radius: 4px;
}

.pt-entry-row {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}

.pt-entry-date {
  font-weight: 600;
}

.pt-entry-categories {
  font-size: 0.85rem;
  color: #555;
}

.pt-entry-description {
  font-size: 0.85rem;
  margin-top: 4px;
  color: #333;
}

.pt-entry-miles {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2b4c;
}

/* Memos module */
.memo-identity {
  background: #f0f3f9;
  border: 1px solid #d5deef;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.memo-alerts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* Divider on the Staff Dashboard: everything above is visible to all staff;
   everything below is Director-only. */
.staff-role-divider {
  width: 100%;
  margin: 6px 0 18px;
  padding-top: 14px;
  border-top: 2px solid #d8dce3;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.memo-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #f4f5f7;
  border-radius: 8px;
  cursor: pointer;
  width: 240px;
  min-height: 100px;
  box-sizing: border-box;
  text-align: center;
}
.memo-alert-active {
  /* Neutral on purpose: staff asked that every dashboard alert button stay the
     same color. The count number still shows how many items are pending. */
  background: #f4f5f7;
}
/* Director-only counters get a small badge + accent border so the Director can
   tell at a glance which items other staff cannot see. */
.director-card {
  position: relative;
  border: 2px solid #1a2b4c !important;
  padding-top: 20px !important;
}
.director-card::after {
  content: 'Director only';
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: #1a2b4c;
  padding: 1px 7px;
  border-radius: 8px;
}
.memo-alert-active .memo-alert-count { color: #1a2b4c; }
.memo-alert-active .memo-alert-label { color: #555; }
.memo-alert-count {
  font-size: 2rem;
  font-weight: 700;
  color: #1a2b4c;
}
.memo-alert-label {
  font-size: 0.85rem;
  color: #555;
  margin-top: 4px;
  text-align: center;
}
.memo-list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.memo-list-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.memo-message {
  margin-top: 6px;
  color: #333;
  white-space: pre-wrap;
}
.rule-chunks {
  margin: 6px 0 4px;
}
.rule-chunks-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2b4c;
  margin-bottom: 6px;
}
.rule-chunk {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafbfc;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}
.rule-chunk input {
  margin-top: 3px;
  flex-shrink: 0;
  width: auto;
  min-width: 0;
}
.rule-chunk span {
  flex: 1;
}

.miles-banner {
  background: #f0f3f9;
  border: 1px solid #d5deef;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.miles-banner-club {
  background: #eaf6ee;
  border-color: #bfe3c9;
  color: #146c2e;
}

.miles-bar {
  height: 10px;
  background: #d5deef;
  border-radius: 5px;
  overflow: hidden;
  margin: 6px 0;
}

.miles-bar-fill {
  height: 100%;
  background: #1a2b4c;
  border-radius: 5px;
}

.category-hint {
  font-size: 0.8rem;
  color: #666;
  margin: 2px 0 4px 24px;
}

.internship-category-fields {
  border-left: 3px solid #e0e0e0;
  padding-left: 12px;
  margin-top: 8px;
}

.duration-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2b4c;
  margin: 4px 0 0 24px;
}

.resubmit-banner {
  background: #fff4e0;
  border: 1px solid #e0b060;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resubmit-banner button {
  background: #8a5a12;
  padding: 4px 12px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.resubmit-banner button:hover {
  background: #a56c17;
}

.resubmit-btn {
  margin-top: 6px;
  background: #8a5a12;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.resubmit-btn:hover {
  background: #a56c17;
}

.internship-summary-row {
  padding: 4px 0;
  font-size: 0.95rem;
}

.internship-summary-overall {
  margin-top: 8px;
  font-weight: 600;
}

.internship-entry-row {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.internship-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.internship-entry-category {
  font-weight: 600;
}

.internship-entry-meta {
  font-size: 0.85rem;
  color: #555;
  margin-top: 2px;
}

.internship-entry-rejection {
  font-size: 0.85rem;
  color: #b00020;
  margin-top: 4px;
}

.status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.status-badge.status-pending { background: #c98a12; }
.status-badge.status-verified { background: #146c2e; }
.status-badge.status-rejected { background: #b00020; }
.status-badge.status-denied { background: #b00020; }

.status-badge-obj {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.status-active-obj { background: #146c2e; }
.status-scheduled-obj { background: #1a6fa8; }
.status-removal-obj { background: #c98a12; }
.status-archived-obj { background: #777; }

.submitted-answer-block {
  margin: 28px 0;
}

.ro-label {
  display: block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.9rem;
}

.ro-points-short {
  display: block;
  width: 70px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}

.ro-showing {
  margin: 4px 0 12px;
  color: #555;
  font-size: 0.9rem;
}

.ro-bulk-result {
  margin: 0 0 12px;
  font-weight: 600;
}

.ro-bulk-result.error { color: #b00020; }

#reviewobjectives-approve-all { margin-left: auto; background: #146c2e; }
#reviewobjectives-approve-all:hover { background: #1c8a3c; }
#reviewobjectives-approve-all[disabled],
#reviewobjectives-approve-all[disabled]:hover { background: #146c2e; opacity: 0.45; cursor: default; }

.ro-reason-full {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
}

.dashboard-panel {
  max-width: 900px;
}

/* Objectives Due Dates table is much wider than a standard panel -- give this
   card room, and let anything extra scroll inside it rather than spill past it. */
#panel-classduedates {
  max-width: 1400px;
}
#classduedates-list {
  overflow-x: auto;
}

/* Time Missed / Made Up needs room for the wide summary + nested detail tables. */
#panel-stafftime {
  max-width: 1300px;
}
#panel-stafftime .data-table {
  max-width: 100% !important;
  width: 100%;
}

/* Grade Summary has eight columns (incl. per-test and course-grade lists) and
   needs more room than a standard panel; overflow scrolls inside the card. */
#panel-gradesummary {
  max-width: 1300px;
}
#gs-list {
  overflow-x: auto;
}

/* CLEE Contracts table is wide (holder, type, officers, totals, dates, status);
   give the card room and let it scroll if it overflows. */
#panel-managecontracts {
  max-width: 1150px;
}
#contracts-list {
  overflow-x: auto;
}

/* Manage CLEE Classes: the row carries a date range, course, instructor, POST
   control #, status, and Edit/Duplicate/Delete buttons -- give the card room so
   the buttons sit inside it, and let anything extra scroll within the card. */
#panel-managecleeclasses {
  max-width: 1300px;
}
#managecleeclasses-list {
  overflow-x: auto;
}

/* Exams to Schedule and Being Taken Now both carry a row that reads as a
   sentence -- class, exam, the sub-block it follows, the date, how late it is.
   At the standard 640px panel every one of those wrapped onto two lines and the
   table became a wall. Give both cards room, stop the cells wrapping, and let
   anything still too wide scroll inside the card rather than spill past it. */
#panel-toschedule {
  max-width: 1300px;
}
#panel-inprogress {
  max-width: 1100px;
}
#ts-list,
#ip-list {
  overflow-x: auto;
}
#ts-list .sa-qb-table,
#ip-list .sa-qb-table {
  font-size: .88rem;
}
#ts-list .sa-qb-table th,
#ts-list .sa-qb-table td,
#ip-list .sa-qb-table th,
#ip-list .sa-qb-table td {
  padding: 9px 16px;
  white-space: nowrap;
  vertical-align: middle;
}
/* The exam and sub-block names are the long ones and the only cells worth
   letting breathe; a minimum width keeps them off two lines without forcing
   the whole table wider than it needs to be. */
#ts-list .sa-qb-table td:nth-child(2),
#ts-list .sa-qb-table td:nth-child(4) {
  min-width: 15rem;
}
#ip-list .sa-qb-table td:nth-child(3) {
  min-width: 18rem;
}

/* Submitted Practice carries recruit, class, quiz name, attempt, score, target
   and timestamp -- at the standard width the quiz name wrapped into a four-line
   paragraph and the rows stopped being scannable. Same treatment as the other
   two: room to breathe, no wrapping, scroll inside the card if it overflows. */
#panel-submittedpractice {
  max-width: 1300px;
}
#sp-list,
#sp-detail,
#sp-mm-box {
  overflow-x: auto;
}
#sp-list .sa-qb-table,
#sp-detail .sa-qb-table,
#sp-mm-box .sa-qb-table {
  font-size: .88rem;
}
#sp-list .sa-qb-table th,
#sp-list .sa-qb-table td,
#sp-mm-box .sa-qb-table th,
#sp-mm-box .sa-qb-table td {
  padding: 9px 16px;
  white-space: nowrap;
  vertical-align: middle;
}
/* The quiz name is the long one. */
#sp-list .sa-qb-table td:nth-child(3) {
  min-width: 22rem;
}
/* The per-attempt view is the exception: its Question column is a whole
   sentence and must be allowed to wrap, or the table runs off the page. */
#sp-detail .sa-qb-table th,
#sp-detail .sa-qb-table td {
  padding: 9px 14px;
  vertical-align: top;
}
#sp-detail .sa-qb-table td:nth-child(2) {
  min-width: 26rem;
  white-space: normal;
}
/* The most-missed report is the same shape: a stem that has to wrap. */
#sp-mm-box .sa-qb-table td:nth-child(3) {
  min-width: 30rem;
  white-space: normal;
}

/* One recruit's practice record: a table per block, with full quiz names. */
#panel-recruitpractice {
  max-width: 1200px;
}
#rp-body {
  overflow-x: auto;
}
#rp-body .sa-qb-table {
  font-size: .88rem;
  margin-bottom: 18px;
}
#rp-body .sa-qb-table th,
#rp-body .sa-qb-table td {
  padding: 9px 16px;
  white-space: nowrap;
  vertical-align: middle;
}
#rp-body .sa-qb-table td:nth-child(2) {
  min-width: 22rem;
}
#rp-body h4 {
  margin: 22px 0 4px;
}

/* Online Tests is ordered by block; the block column keeps that legible. */
.ot-blk {
  font-weight: 600;
  color: #1a2b4c;
  white-space: nowrap;
}

/* Schedule a Class: give the course dropdown + button room on one line. */
#panel-requestinstruction {
  max-width: 900px;
}

/* CLEE Students: last-name letter groups (collapsed by default). */
.cs-letter-group {
  border-bottom: 1px solid #e4e7ec;
}
.cs-letter-group > summary {
  cursor: pointer;
  font-size: 1.05rem;
  padding: 8px 4px;
  list-style-position: inside;
}
/* Training-history detail: keep the class Date on one line. */
#cs-transcript table td:first-child,
#cs-transcript table th:first-child {
  white-space: nowrap;
}

/* Edit CLEE Class: wide card so the attendee list has room for Name, Agency,
   Phone, Email, POST # and the row buttons without them colliding. */
#panel-editcleeclass {
  max-width: 1280px;
}
#ccl-attendees {
  /* Last resort on a narrow screen: scroll rather than overlap. */
  overflow-x: auto;
}
#ccl-attendees table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}
#ccl-attendees table th,
#ccl-attendees table td {
  padding: 6px 10px;
  vertical-align: top;
}

/* Column widths are addressed BY CLASS, not by :nth-child.
   The previous rules were positional and were written for the old five-column
   table; adding the Agency column shifted every one of them, which is what made
   Agency (nowrap, 15%) spill over Phone and squeezed Email into 11%. Classes are
   set in renderCleeAttendees, so inserting a column cannot silently break this
   again. Widths total 100%. */
/* Names wrap rather than nowrap: a hyphenated surname on nowrap overflowed into
   the Agency column, which is the exact failure this rewrite exists to remove.
   Short names still sit on one line at this width. */
#ccl-attendees table .att-name    { width: 18%; overflow-wrap: anywhere; }
#ccl-attendees table .att-agency  { width: 21%; }
#ccl-attendees table .att-phone   { width: 13%; white-space: nowrap; }
#ccl-attendees table .att-email   { width: 23%; overflow-wrap: anywhere; word-break: break-word; }
#ccl-attendees table .att-post    { width: 9%;  white-space: nowrap; text-align: center; }
#ccl-attendees table .att-actions { width: 16%; white-space: nowrap; text-align: right; }

/* Manage CLEE Classes: keep the Date on one line and give the Instructor
   column more width (it may still wrap for long agency names). */
#panel-managecleeclasses td:nth-child(1),
#panel-managecleeclasses th:nth-child(1) {
  white-space: nowrap;
}
#panel-managecleeclasses td:nth-child(3),
#panel-managecleeclasses th:nth-child(3) {
  min-width: 155px;
}

/* CLEE Students directory.

   The card is wide because this table carries seven columns; at the default
   .panel width of 640px the table overflowed the white background entirely.

   Column widths are addressed BY CLASS (set in renderCleeStudents), not by
   :nth-child. The previous positional rules were written before the Agency
   column existed and every one of them shifted when it was added -- `nowrap`
   landed on Email, which is what stretched that column across the row, and the
   centring landed on POST # instead of Classes. Widths total 100%. */
#panel-cleestudents {
  max-width: 1400px;
}
#cs-list {
  /* Narrow screens scroll rather than overlap. */
  overflow-x: auto;
}
#cs-list .data-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}
#cs-list .data-table th,
#cs-list .data-table td {
  padding-left: 12px;
  padding-right: 12px;
  vertical-align: top;
}
#cs-list .data-table .cs-c-name    { width: 19%; overflow-wrap: anywhere; }
#cs-list .data-table .cs-c-agency  { width: 18%; overflow-wrap: anywhere; }
#cs-list .data-table .cs-c-email   { width: 26%; overflow-wrap: anywhere; word-break: break-word; }
#cs-list .data-table .cs-c-phone   { width: 13%; white-space: nowrap; }
#cs-list .data-table .cs-c-post    { width: 9%;  white-space: nowrap; text-align: center; }
#cs-list .data-table .cs-c-classes { width: 8%;  text-align: center; }
#cs-list .data-table .cs-c-actions { width: 7%;  white-space: nowrap; text-align: right; }

/* Manage Instructors: card wide enough to contain the whole table, keep Name +
   Phone on one line each, and give Phone / Status / button columns room. */
#panel-manageinstructors {
  max-width: 1400px;
}
#panel-manageinstructors .data-table {
  width: 100%;
}
#panel-manageinstructors .data-table td,
#panel-manageinstructors .data-table th {
  padding-left: 14px;
  padding-right: 14px;
}
#panel-manageinstructors .data-table td:first-child,
#panel-manageinstructors .data-table th:first-child,
#panel-manageinstructors .data-table td:nth-child(3),
#panel-manageinstructors .data-table th:nth-child(3) {
  white-space: nowrap;
}

/* Course Progress "Remaining" column: red when hours are still owed, green when
   the course requirement is fully met. */
.hours-short { color: #b00020; font-weight: 600; }
.hours-done  { color: #146c2e; font-weight: 600; }

.dashboard-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.dashboard-summary-card {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 12px 16px;
  width: 240px;
  min-height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Request Instruction: lay the available-date cards out in a full-width
   responsive grid instead of a single narrow 240px column. These cards reuse
   .dashboard-summary-card, so scope the overrides to #ri-dates-list only --
   the real dashboard stat cards keep their fixed 240px centered look. */
#ri-dates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
#ri-dates-list .dashboard-summary-card {
  width: auto;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Review Schedule Requests: spread the request cards across the full panel
   width in a responsive grid (same treatment as #ri-dates-list) instead of a
   single narrow column. Applies to both the pending and approved lists. */
#reviewschedulerequests-list,
#reviewschedulerequests-approved {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
#reviewschedulerequests-list .dashboard-summary-card,
#reviewschedulerequests-approved .dashboard-summary-card {
  width: auto;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}
.srq-unavailable { color: #8a5300; font-weight: 600; }
.srq-reopened { color: #146c2e; font-weight: 600; }
/* ---- Correcting a self-select request in place (migration 435) ---- */
.srq-corrected { color: #8a5300; font-weight: 600; }
.srq-edit-box { margin-top: 12px; padding: 12px; border: 1px solid #1f3864; border-radius: 6px; background: #f5f7fb; max-width: 640px; }
.srq-edit-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.srq-edit-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; }
.srq-edit-grid select, .srq-edit-grid input { padding: 6px 8px; font-weight: 400; }
.srq-edit-grid .srq-e-hours { width: 90px; }
.srq-open-note { margin-top: 8px; font-size: 0.85rem; }
.srq-note-label { display: block; margin-top: 10px; font-weight: 600; font-size: 0.85rem; }
.srq-note-label input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px 8px; font-weight: 400; }
.srq-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
/* The card the Instruction Calendar just sent us to. */
.srq-flash { outline: 3px solid #1f3864; outline-offset: 2px; transition: outline-color 0.4s ease; }

/* ---- Prospects (Migration 089) ---- */
.dash-formlink { margin: 8px 0 0; font-size: 0.9rem; }

/* ---- Practical Exercise Evaluations ---- */
/* The banner that says an existing evaluation is being corrected rather than a
   new one written. Loud on purpose -- the form looks identical either way. */
.pe-edit-banner {
  background: #fff4e5;
  border: 1px solid #f0c68a;
  border-left: 4px solid #b06a00;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.pe-mine-actions { margin-top: 8px; }
.pe-mine-actions button { padding: 4px 10px; font-size: 0.85rem; }

.peall-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.peall-filters label { font-weight: 600; }
.peall-filters select { padding: 6px 8px; width: auto; }
.peall-filters input[type="search"] { padding: 6px 8px; width: auto; min-width: 220px; flex: 0 1 320px; }

/* ---- PT Submissions (Migration 091) ---- */
.pts-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pts-toolbar label { font-weight: 600; }
.pts-toolbar select { padding: 6px 8px; }
.pts-card { background: #fff; border: 1px solid #e0e4ec; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.pts-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pts-date { margin-left: auto; font-size: 0.85rem; }
.pts-body { margin: 6px 0; font-size: 0.9rem; }
.pts-dates { font-size: 0.85rem; margin-bottom: 4px; }
.pts-k { color: #555; font-weight: 600; }
.status-badge.pts-late { background: #fdeccf; color: #8a5300; }
.status-badge.pts-future { background: #fdecec; color: #b00020; }
.pts-desc { margin-top: 4px; color: #333; }
.pts-reject { margin-top: 6px; color: #b00020; font-weight: 600; }
.pts-actions { display: flex; gap: 8px; margin-top: 8px; }
.pts-actions button.pts-verify.confirm { background: #146c2e; }
.pts-toolbar button#pts-verify-all { background: #146c2e; margin-left: auto; }
.pts-toolbar button#pts-verify-all:disabled { background: #7a8a7e; }
.pts-actions button.pts-reject-btn { background: #b00020; }
.pts-reject-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pts-reject-box input { flex: 1 1 260px; padding: 6px 8px; }
/* Delete (migration 434) -- deliberately not styled like Reject. Reject is a
   review decision; Delete removes the row. The outlined button and the warning
   strip are there so the two are never pressed by mistake for one another. */
.pts-actions button.pts-delete-btn { background: #fff; color: #b00020; border: 1px solid #b00020; }
.pts-actions button.pts-delete-btn:hover { background: #fdecec; }
.pts-delete-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px; border: 1px solid #b00020; border-radius: 6px; background: #fdf6f6; }
.pts-delete-box input { flex: 1 1 260px; padding: 6px 8px; }
.pts-delete-warn { flex: 1 1 100%; font-size: 0.85rem; color: #7a0016; }
.prospects-toolbar { margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.prospect-card {
  background: #fff;
  border: 1px solid #e0e4ec;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pr-head { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.pr-date { font-size: 0.85rem; margin-left: auto; }
.pr-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.pr-badge.pr-new { background: #e2edfb; color: #1a4a8a; }
.pr-badge.pr-rev { background: #fdeccf; color: #8a5300; }
.pr-badge.pr-conv { background: #e4f4ea; color: #146c2e; }
.pr-badge.pr-arch { background: #e6e9f0; color: #555; }
/* The two waiting states set by the next-step emails (migration 161). They get
   their own colours rather than reusing .pr-rev: the whole point of splitting
   them out is that the queue can tell at a glance what it is waiting on. */
.pr-badge.pr-await { background: #ddeef1; color: #14606c; }
.pr-badge.pr-hold  { background: #efe6f6; color: #5a3080; }
.pr-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 10px 0; font-size: 0.9rem; }
.pr-row { margin: 2px 0; }
.pr-k { color: #555; font-weight: 600; }
.pr-elig { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.pr-elig li { margin: 2px 0; }
.pr-more { grid-column: 1 / -1; }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pr-convert-box { margin-top: 12px; padding: 12px; background: #f7f9fc; border: 1px solid #e0e4ec; border-radius: 6px; }
.pr-conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pr-conv-grid label { display: flex; flex-direction: column; font-weight: 600; font-size: 0.85rem; gap: 4px; }
.pr-conv-grid input[type="email"], .pr-conv-grid input[type="text"], .pr-conv-grid select { padding: 6px 8px; font-weight: 400; }
.pr-conv-sponsored { flex-direction: row !important; align-items: center; }
.pr-pw-wrap { display: flex; gap: 6px; }
.pr-pw-wrap input { flex: 1; }
.pr-conv-do.confirm { background: #146c2e; }

/* ---- next-step email compose box ---------------------------------------- */
.pr-email-box { margin-top: 12px; padding: 12px; background: #f7f9fc;
                border: 1px solid #e0e4ec; border-radius: 6px; }
.pr-email-head { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 12px; margin-bottom: 8px; }
.pr-email-head .pr-email-prior { font-size: 0.8rem; color: #8a5300; }
.pr-email-box label { display: flex; flex-direction: column; font-weight: 600;
                      font-size: 0.85rem; gap: 4px; margin-bottom: 10px; }
.pr-email-box input[type="email"], .pr-email-box input[type="text"] {
  padding: 6px 8px; font-weight: 400; }
/* Monospace so the numbered steps and the URL stay readable while editing, and
   the wrapping matches roughly what the recipient sees. */
.pr-email-box textarea { padding: 8px; font-weight: 400; font-family: ui-monospace,
  Consolas, "Courier New", monospace; font-size: 0.85rem; line-height: 1.45;
  resize: vertical; min-height: 200px; }
.pr-email-sig { font-size: 0.78rem; margin: -4px 0 10px 0; }
.pr-email-send.confirm { background: #1a4a8a; }
.pr-email-class { margin-bottom: 10px; }
.pr-email-class select { padding: 6px 8px; font-weight: 400; }
.pr-email-class .pr-email-class-note { font-size: 0.78rem; margin: 4px 0 0 0; }
@media (max-width: 640px) {
  .pr-body, .pr-conv-grid { grid-template-columns: 1fr; }
}

.dashboard-summary-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1a2b4c;
}

.dashboard-summary-label {
  font-size: 0.85rem;
  color: #555;
  margin-top: 4px;
}

/* ---- Session edit: modal + clickable calendar entries ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow: auto;
  padding: 40px 16px;
}
.modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 20px 24px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.cal-session-entry.editable { cursor: pointer; }
.cal-session-entry.editable:hover { outline: 2px solid #1a2b4c; }
.ecs-monthnav { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.ecs-monthnav span { font-weight: 600; }

/* ---- On-screen recruit Grades Report tables (match the printable PDF spacing) ---- */
#rg-body table { border-collapse: collapse; width: auto; margin: 6px 0 4px; }
#rg-body th,
#rg-body td { text-align: left; padding: 8px 22px; vertical-align: top; }
#rg-body th:first-child,
#rg-body td:first-child { padding-left: 4px; }
#rg-body tbody td { border-bottom: 1px solid #e5e8ee; }

/* ---- Staff internship tables ---- */
#istaff-list table, #istaff-detail table { border-collapse: collapse; width: auto; }
#istaff-list th, #istaff-list td,
#istaff-detail th, #istaff-detail td { text-align: left; padding: 8px 16px; vertical-align: top; }
#istaff-list tbody td, #istaff-detail tbody td { border-bottom: 1px solid #e5e8ee; }

/* ---- Class Rank table ---- */
#classrank-list table { border-collapse: collapse; width: auto; }
#classrank-list th,
#classrank-list td { text-align: left; padding: 8px 20px; }
#classrank-list th:last-child,
#classrank-list td:last-child { text-align: right; }
#classrank-list tbody td { border-bottom: 1px solid #e5e8ee; }

/* ---- PT history table + quarter dividers ---- */
#pthistory-list table, #rpt-list table { width: 100%; border-collapse: collapse; }
#pthistory-list th, #pthistory-list td,
#rpt-list th, #rpt-list td {
  text-align: left;          /* line the data up under its header */
  padding: 9px 18px;         /* spread it out */
  vertical-align: top;
}
#pthistory-list th:first-child, #pthistory-list td:first-child,
#rpt-list th:first-child, #rpt-list td:first-child { white-space: nowrap; }          /* Date */
#pthistory-list th:nth-child(4), #pthistory-list td:nth-child(4),
#rpt-list th:nth-child(4), #rpt-list td:nth-child(4) { text-align: right; white-space: nowrap; } /* Miles */
#pthistory-list tbody td, #rpt-list tbody td { border-bottom: 1px solid #e5e8ee; }
.pthistory-divider {
  background: #1a2b4c;
  color: #fff;
  font-weight: 600;
  padding: 6px 18px;
}

/* ---- Course Progress series dividers ---- */
tr.cp-group td {
  background: #1a2b4c;
  color: #fff;
  font-weight: 600;
  padding: 6px 12px;
  letter-spacing: 0.5px;
}

/* ---- CLEE Contracts ---- */
/* Large full-width renewal counter at the top of the staff dashboard. */
/* Match the other clickable dashboard summary cards exactly. */
.contract-counter-card {
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.contract-counter-card:hover { background: #e6ebf3; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.contract-counter-card:active { transform: translateY(1px); }

/* Uniform hover for EVERY clickable card/button on the staff dashboard so they
   all shift to the same light blue -- the .memo-alert cards are <button>s that
   would otherwise pick up the global navy button:hover, and the plain summary
   cards had no hover at all. These class+pseudo selectors outrank button:hover. */
.dashboard-summary-card.clickable,
.memo-alert {
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.dashboard-summary-card.clickable:hover,
.memo-alert:hover {
  background: #e6ebf3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.dashboard-summary-card.clickable:active,
.memo-alert:active {
  transform: translateY(1px);
}

.contracts-controls { display: flex; align-items: center; gap: 16px; margin: 12px 0; }

/* New/Edit Contract form: stack each label above a full-width field, spaced. */
#contracts-editor label {
  display: block;
  font-weight: 600;
  margin: 14px 0 4px;
}
#contracts-editor input[type="text"],
#contracts-editor input[type="number"],
#contracts-editor input[type="date"],
#contracts-editor select,
#contracts-editor textarea {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 6px 8px;
  box-sizing: border-box;
}
#contracts-editor .muted { display: inline; font-weight: normal; }
#contracts-editor .actions { margin-top: 18px; }
.contracts-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.92rem; }
.contracts-table th { background: #1a2b4c; color: #fff; text-align: left; padding: 7px 10px; }
.contracts-table td { border-bottom: 1px solid #e0e3e8; padding: 7px 10px; }
.contracts-table tr:hover td { background: #f4f6f9; }

/* --- CLEE Invoices (one-off class invoices and receipts) ---------------- */
/* Reuses .contracts-table for the list so the two CLEE money screens match. */
/* Whether a recruit can actually sign in. Stated as a plain sentence rather than
   a badge, because "Inactive" next to "Dismissed" next to "Deactivate" is three
   words for three different things and staff should not have to work out which
   one stops a login. */
/* A past class day with teaching time nobody used. Tinted rather than filled,
   so the session chips on a part-used day stay readable -- and never colour
   alone: the chip says how many hours in words. */
.cal-day-cell.cal-unused { background: #fdf2f0; border-color: #e6b0a8; }
.cal-legend-unused {
  display: inline-block; font-size: 0.72rem; font-weight: 700; color: #b0281a;
  background: #fbe3df; border: 1px solid #e6b0a8; border-radius: 4px;
  padding: 1px 6px; margin-left: 10px;
}
.cal-unused-chip {
  display: block; font-size: 0.72rem; font-weight: 700; color: #b0281a;
  background: #fbe3df; border-radius: 4px; padding: 1px 5px; margin: 2px 0 3px;
}

/* The figures above the Course Progress table. A labelled list rather than a
   sentence: there are three different questions here (seat time, curriculum,
   calendar) and running them together in prose is what made the old one-liner
   hard to read. */
.cp-sum { display: inline-block; min-width: 520px; max-width: 760px;
  border: 1px solid #d6dce6; border-left: 4px solid #1a2b4c; border-radius: 8px;
  background: #f8fafc; padding: 12px 16px; font-weight: 400; }
.cp-sum-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 3px 0; }
.cp-sum-label { flex: 0 0 220px; color: #444; }
.cp-sum-value { font-weight: 700; color: #1a2b4c; }
.cp-sum-extra { flex: 1 1 200px; font-size: 0.82rem; color: #666; }
.cp-sum-rule { border-top: 1px solid #e2e6ee; margin: 10px 0 8px; }
.cp-sum-verdict { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; }
.cp-sum-ok  { background: #eaf6ec; color: #1a6b2f; }
.cp-sum-bad { background: #fdecea; color: #b0281a; font-weight: 600; }

/* Course Progress carries six columns now; on the standard narrow card the
   course titles wrapped to three lines to make room for the dates. */
#panel-courseprogress { max-width: 1100px; }

/* Course Progress -- the days a course runs. A scheduled day is amber and a
   taught day is plain, so the column can be read without a legend once you have
   seen it once. Never colour alone: the title on each date says which it is. */
.cp-days { font-size: 0.86rem; line-height: 1.5; }
.cp-day { white-space: nowrap; }
.cp-day-sched { color: #7a4b00; }
.cp-days-more { color: #666; white-space: nowrap; }

.er-access-state { margin: 0 0 6px; font-weight: 600; }
.er-access-on  { color: #1a6b2f; }
.er-access-off { color: #b0281a; }

.civ-form { max-width: 780px; }
/* Add-a-class row: the whole builder is now "pick a class, say how many, Add",
   so it gets a box of its own rather than sitting in the run of fields. */
.civ-addclass { border: 1px solid #d6dce6; border-radius: 8px; background: #f8fafc;
  padding: 12px 14px; margin: 14px 0; }
.civ-addclass-head { font-weight: 700; color: #1a2b4c; margin-bottom: 6px; }
.civ-addclass-row { align-items: flex-end; gap: 12px; }
.civ-addclass-row label { flex: 1 1 auto; min-width: 0; }
.civ-addclass-row .civ-qty-lbl, .civ-addclass-row .civ-price-lbl { flex: 0 0 110px; }
.civ-addclass-row .civ-qty-lbl input, .civ-addclass-row .civ-price-lbl input { max-width: 110px; }
.civ-addclass-row button { flex: 0 0 auto; }
.civ-form label { display: block; font-weight: 600; margin: 12px 0 4px; }
.civ-form input[type="text"], .civ-form input[type="date"], .civ-form input[type="search"],
.civ-form select, .civ-form textarea {
  width: 100%; max-width: 520px; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid #c4ccd8; border-radius: 6px; font: inherit; font-weight: 400;
}
.civ-row { display: flex; flex-wrap: wrap; gap: 16px; }
.civ-row label { flex: 1 1 220px; }
.civ-check { font-weight: 400 !important; display: flex !important; align-items: center; gap: 6px; }
.civ-actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.civ-hint { font-size: 0.8rem; margin: 6px 0 0; }
.civ-none { margin: 10px 0; }

.civ-attend { border: 1px solid #e2e6ee; border-radius: 8px; padding: 10px 14px; margin-top: 12px; background: #fbfcfe; }
.civ-attend-head { font-weight: 700; color: #1a2b4c; margin-bottom: 6px; }
.civ-agency { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: #475467; margin: 10px 0 4px; }
.civ-agency .link-btn { font-size: 0.78rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.civ-attendee { display: block; font-weight: 400 !important; margin: 3px 0 !important; }
.civ-attendee input { margin-right: 8px; }
.civ-disabled { color: #8a94a6; }
.civ-note-flag { font-size: 0.76rem; color: #777; font-style: italic; }
.civ-note-flag.civ-warn { color: #7a4b00; font-style: normal; font-weight: 600; }

.civ-lines-head { font-weight: 700; color: #1a2b4c; margin: 18px 0 6px; }
.civ-lines-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.civ-lines-table th { background: #1a2b4c; color: #fff; text-align: left; padding: 6px 8px; }
.civ-lines-table td { border-bottom: 1px solid #e0e3e8; padding: 5px 8px; vertical-align: middle; }
.civ-lines-table input { width: 100%; box-sizing: border-box; padding: 5px 7px;
  border: 1px solid #c4ccd8; border-radius: 5px; font: inherit; }
.civ-lines-table td:nth-child(2) input, .civ-lines-table td:nth-child(3) input { max-width: 110px; }
.civ-l-amt, .civ-l-total { text-align: right; white-space: nowrap; }
.civ-l-total-label, .civ-l-total { font-weight: 700; padding-top: 8px; }

.civ-row-actions { white-space: nowrap; }
.civ-void-row td { color: #8a94a6; }
.civ-void-why { font-size: 0.82rem; font-style: italic; }
.civ-badge { display: inline-block; background: #8a94a6; color: #fff; border-radius: 6px;
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px; text-transform: uppercase; vertical-align: middle; }
.civ-badge-void { background: #b3261e; }
/* Document number, type, date and total must never wrap -- an invoice number
   broken across three lines is unreadable at a glance. Class is the column
   that gets to be long. */
.civ-table td:nth-child(1), .civ-table td:nth-child(2),
.civ-table td:nth-child(3), .civ-table td:nth-child(6) { white-space: nowrap; }
.civ-table td:nth-child(6) { text-align: right; }
.civ-table th:nth-child(6) { text-align: right; }

/* --- CLEE Stats -------------------------------------------------------- */
/* Sized to the content, not to the screen. The widest thing on this page is the
   "Every class taught" table at 1040px, plus the panel's own 24px of padding
   each side = 1088. 1120 leaves that a little air without a hand's width of
   empty white down the right-hand side, which is what 1400 gave once the Flier
   #, Location and Status columns came out. ⚠ If a column is ever added back,
   this and .cst-classes move together. */
#panel-cleestats { max-width: 1120px; }
#cst-results { overflow-x: auto; }

.cst-controls { flex-wrap: wrap; }
.cst-controls input[type="date"] { padding: 6px 8px; border: 1px solid #c4ccd8; border-radius: 6px; font: inherit; }
.cst-cards { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 4px; }
.cst-card { border: 1px solid #d6dce6; border-left: 4px solid #1a2b4c; border-radius: 8px;
  padding: 10px 16px; min-width: 130px; background: #f8fafc; }
.cst-card-n { font-size: 1.7rem; font-weight: 700; color: #1a2b4c; line-height: 1.1; }
.cst-card-l { font-size: 0.9rem; color: #1a2b4c; }
.cst-card-h { font-size: 0.72rem; color: #777; margin-top: 2px; }
/* Host Only figures: same card, deliberately not the same colour. These sit
   directly under the four JCLEA cards and must never be mistaken for part of
   them -- another provider's class in our building is not training JCLEA
   delivered. */
.cst-cards-label { margin: 18px 0 0; font-size: 0.85rem; color: #444; }
.cst-cards { margin-top: 6px; }
/* Four rows of the same four figures: all, POST, Non-POST, Host Only. The
   colour is what tells them apart at a glance, so a screenshot of one row is
   never mistaken for another. The label above each says it in words. */
.cst-cards-all .cst-card { border-left-color: #1a2b4c; background: #eef2f9; }
.cst-cards-np .cst-card { border-left-color: #4a5a7a; background: #f6f7fb; }
.cst-cards-host .cst-card { border-left-color: #6b7280; background: #f3f4f6; }
.cst-cards-host .cst-card-n, .cst-cards-host .cst-card-l { color: #414753; }
.cst-cards-label-all { margin-top: 4px; }
.cst-sumnote { margin: 10px 0 0; }
/* Each category folds. The heading IS the control, so it has to look like one:
   a caret, a pointer cursor and a hover state. Without those a <summary> reads
   as an ordinary heading and nobody discovers it clicks. */
.cst-cat { border-top: 2px solid #d6dce6; margin-top: 28px; }
.cst-cat-sum {
  cursor: pointer; padding: 14px 4px 6px; list-style: none;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.cst-cat-sum::-webkit-details-marker { display: none; }
.cst-cat-sum::before {
  content: '\25b8'; color: #1a2b4c; font-size: 0.9rem; line-height: 1;
  transition: transform 0.12s ease-out;
}
.cst-cat[open] > .cst-cat-sum::before { transform: rotate(90deg); }
.cst-cat-sum:hover .cst-cat-title { text-decoration: underline; }
.cst-cat-title { font-size: 1.05rem; font-weight: 700; color: #1a2b4c; }
/* The counts stay visible when the section is folded, so it still says how much
   is inside without being opened. */
.cst-cat-meta { font-size: 0.85rem; color: #666; }
.cst-cat-body { padding-bottom: 6px; }
/* Kept: the old flat heading is still used by nothing, but the class remains so
   an older cached page does not lose its rule. */
.cst-h-cat { border-top: 2px solid #d6dce6; padding-top: 16px; margin-top: 28px; }
@media print {
  .cst-cat-sum::before { content: ''; }
}
.cst-h5 { margin: 16px 0 4px; color: #1a2b4c; font-size: 0.95rem; }
.cst-empty { margin-top: 18px; }
/* Host Only + Non-POST both ticked: a contradiction in the record, flagged where
   it can be worked through. Amber, not red -- nothing is broken and no figure is
   wrong; the class is simply saying two things that cannot both be true. */
.cst-flagclash { font-size: 0.85rem; color: #7a4b00; background: #fff8ec;
  border-left: 3px solid #7a4b00; padding: 10px 12px; border-radius: 0 6px 6px 0; margin-top: 18px; }
.cst-flagclash .cst-open { color: #7a4b00; text-decoration: underline; }
.cst-flagclash ul { margin: 6px 0 0 18px; padding: 0; }
.cst-flagclash li { margin: 2px 0; }
/* The same thing said on the class itself. */
.ccl-flagnote { font-size: 0.85rem; color: #7a4b00; background: #fff8ec;
  border-left: 3px solid #7a4b00; padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 4px 0 10px; }
.cst-h { margin: 24px 0 6px; color: #1a2b4c; }
.cst-h-host { border-top: 1px solid #e2e6ee; padding-top: 16px; }
.cst-note { font-size: 0.82rem; margin: 0 0 8px; }
.cst-hostsum { font-size: 0.92rem; margin: 0 0 8px; }
.cst-table td:last-child, .cst-table th:last-child { text-align: right; }
.cst-table tfoot td { font-weight: 700; border-top: 2px solid #1a2b4c; background: #f4f6f9; }
/* ⚠ THE TWO TABLES ON THIS PAGE NEED OPPOSITE COLUMN RULES, hence two classes.
   These nth-child rules were written for the seven-column "Every class taught"
   table -- first column Dates, then Flier #, Hours, Status -- and every one of
   them landed on the wrong column of the three-column summary above it, where
   the first column is the CLASS NAME. Nowrap on a course called "Racial
   Profiling / De-Escalation / Implicit, Unlawful, or Improper Bias in Public
   Safety" forced that column as wide as the longest name in the list, which
   pushed Times taught and Students out to the far right AND made the table
   wider than the card it sits in. */
.cst-table th { white-space: nowrap; }
/* Every class taught: Dates | Class | Hours | Students. Dates and Hours must not
   wrap; the class name is the one that gets to. ⚠ These are positional — they
   were written when the table also had Flier #, Location and Status and every
   one of them pointed at a different column then. Re-check them against
   cstClassTable if a column is ever added or removed. */
.cst-classes td:first-child { white-space: nowrap; }
.cst-classes td:nth-child(3) { white-space: nowrap; }
/* Same reasoning as the summary table above: capped, with the two number columns
   given a fixed width, so Hours and Students sit beside the class name instead
   of being flung to the far edge of a 1400px card. */
.cst-classes { max-width: 1040px; }
/* The class name is a link button. A button centres its text and will not wrap
   it by default, which would centre every course name in the column and push
   the long ones out of the cell. */
.cst-open { text-align: left; white-space: normal; }
.cst-classes th:nth-child(3), .cst-classes td:nth-child(3),
.cst-classes th:nth-child(4), .cst-classes td:nth-child(4) { width: 100px; text-align: right; }

/* The summary table: the class name wraps, and the two counts sit beside it
   rather than at the far edge of a full-width table. Capped rather than
   stretched -- three columns spread across 1300px is a pair of numbers with a
   hand's width of white between them and the name they belong to. */
.cst-sum { max-width: 900px; table-layout: fixed; }
.cst-sum td:first-child, .cst-sum th:first-child { overflow-wrap: anywhere; }
.cst-sum th:nth-child(2), .cst-sum td:nth-child(2),
.cst-sum th:nth-child(3), .cst-sum td:nth-child(3) { width: 120px; text-align: right; }
.cst-defs { font-size: 0.8rem; margin-top: 18px; border-top: 1px solid #e2e6ee; padding-top: 10px; }
.cst-warn { font-size: 0.85rem; color: #7a4b00; background: #fff8ec; border-left: 3px solid #7a4b00;
  padding: 8px 12px; border-radius: 0 6px 6px 0; margin-top: 16px; }
.contract-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.contract-badge.soon { background: #fff3cd; color: #7a5b00; }
.contract-badge.overdue { background: #fdecea; color: #b0281a; }
.contract-badge.cancelled { background: #e2e3e5; color: #555; }
.contract-action-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 8px 0 4px;
}
.contract-action-row label { display: flex; flex-direction: column; font-size: 0.85rem; }
#panel-managecontracts .muted { color: #777; font-weight: normal; }
#panel-managecontracts button.danger { background: #c0392b; color: #fff; }

.dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.dashboard-tile {
  background: white;
  border: 1px solid #ddd;
  color: #1a2b4c;
  padding: 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.dashboard-tile:hover {
  background: #f4f5f7;
  border-color: #1a2b4c;
}

/* Top-level workflow sections on the Staff Dashboard (Recruit Academy,
   Instructors, CLEE, Other). Bold divider so the big groups are easy to find;
   the individual <h4> subgroup headings within each section are unchanged. */
.dashboard-panel .dashboard-section-header {
  margin: 30px 0 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #1a2b4c;
  color: #1a2b4c;
  font-size: 1.25rem;
}

/* ---- Staff Dashboard: collapsible sections + per-account favorites ---- */

/* Clickable section headings (h3 "Recruit Academy" + each h4 subgroup). */
.dashboard-panel .collapsible-header {
  cursor: pointer;
  user-select: none;
}
.dashboard-panel .collapsible-header:hover {
  color: #c8102e; /* academy red on hover signals it's clickable */
}
.section-caret {
  display: inline-block;
  width: 0.85em;
  margin-right: 6px;
  font-size: 0.8em;
  color: #7a8699;
}
.section-caret::before { content: '\25BE'; }                              /* expanded */
.collapsible-header.is-collapsed .section-caret::before { content: '\25B8'; } /* collapsed */

/* Favorites row, pinned at the top of the tile area. */
.dashboard-favorites-header {
  margin: 6px 0 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #c8102e;
  color: #1a2b4c;
  font-size: 1.25rem;
}
.dashboard-favorites-header .favorites-star { color: #c8102e; }

/* Per-tile favorite star, in the tile's top-right corner. Scoped to the staff
   dashboard so other dashboards' tiles are unaffected. */
#panel-dashboardstaff .dashboard-tile {
  position: relative;
  padding-right: 30px; /* reserve room so long titles don't run under the star */
}
#panel-dashboardstaff .tile-fav-star {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 1rem;
  line-height: 1;
  color: #c2c8d2;   /* muted outline star when not favorited */
  cursor: pointer;
  user-select: none;
}
#panel-dashboardstaff .tile-fav-star:hover { color: #f0a500; }
#panel-dashboardstaff .tile-fav-star.is-fav { color: #f0a500; } /* gold when favorited */
#panel-dashboardstaff .favorite-shortcut-label { pointer-events: none; }

/* Paired fields on the CLEE class form (fees, class size, admin). */
.ccl-2col { display: flex; gap: 16px; flex-wrap: wrap; }
.ccl-2col > div { flex: 1 1 200px; }

.so-answer {
  display: block;
  width: 100%;
  min-height: 140px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.so-submit {
  display: block;
  margin-top: 8px;
}

/* Application status-history timeline (staff review panel) */
.ap-history-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-left: 2px solid #d0d5dd;
}
.ap-history-list li {
  position: relative;
  padding: 4px 0 4px 14px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ap-history-list li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #667085;
}
.ap-history-when {
  color: #667085;
  white-space: nowrap;
}
.muted {
  color: #667085;
  font-style: italic;
}

/* Google Drive folder link + manage required-document types */
.ap-folder-link {
  margin: 4px 0 8px;
}
.ap-folder-link a {
  font-weight: 600;
}
.ap-doctypes {
  margin-top: 12px;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  padding: 8px 12px;
  background: #fafafa;
}
.ap-doctypes > summary {
  cursor: pointer;
  font-weight: 600;
}
.ap-doctype-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.ap-doctype-row .ap-doctype-name {
  flex: 1 1 260px;
  min-width: 200px;
}
.ap-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ap-doctype-result {
  color: #667085;
  font-size: 0.85rem;
}
.ap-doctype-add {
  margin-top: 10px;
}
.ap-doctype-row.retired .ap-doctype-name,
.ap-doctype-row.retired .ap-inline-check {
  opacity: 0.55;
}
.ap-doctype-retired-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #b42318;
  background: #fee4e2;
  border-radius: 3px;
  padding: 1px 6px;
}
.ap-doctype-toggle {
  white-space: nowrap;
}

/* Resources page */
.resource-view-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.resource-view-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.resource-view-list a {
  font-weight: 600;
  font-size: 1.02rem;
}
.resource-desc {
  color: #475467;
  font-size: 0.9rem;
  margin-top: 2px;
}
#resources-manage {
  margin-top: 24px;
  border-top: 2px solid #e4e7ec;
  padding-top: 12px;
}
.resource-add {
  max-width: 560px;
  margin-bottom: 16px;
}
.resource-audiences {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.resource-audiences-label {
  font-weight: 600;
}
.resource-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.resource-row .resource-f-title { flex: 1 1 160px; min-width: 140px; }
.resource-row .resource-f-url { flex: 1 1 200px; min-width: 160px; }
.resource-row .resource-f-desc { flex: 1 1 200px; min-width: 160px; }
.resource-row .resource-f-group { flex: 0 0 auto; min-width: 130px; }

/* Resources page: collapsible groups on the staff view (Migration 172).
   Instructors and recruits get the flat .resource-view-list with no groups. */
.resource-group {
  border-bottom: 1px solid #e4e7ec;
}
.resource-group > summary {
  cursor: pointer;
  font-size: 1.05rem;
  padding: 10px 4px;
  list-style-position: inside;
}
.resource-group > summary:hover {
  background: #f6f8fa;
}
/* The list inside a group is indented by the group heading, so it does not need
   the top margin the standalone flat list carries. */
.resource-group .resource-view-list {
  margin: 0 0 8px;
  padding-left: 20px;
}
.resource-group .resource-view-list li:last-child {
  border-bottom: none;
}
/* The favorite star. Styled as a bare glyph rather than a control -- without
   these resets it picks up the global navy button background. */
.resource-fav-star {
  background: none !important;
  border: none !important;
  color: #98a2b3 !important;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 6px 0 0;
  vertical-align: baseline;
}
.resource-fav-star:hover {
  color: #b58105 !important;
  background: none !important;
}
.resource-fav-star.is-fav {
  color: #dca20a !important;
}
.resource-fav-star:disabled {
  opacity: 0.5;
  cursor: default;
}
.resource-expand-all {
  margin-top: 10px;
  font-size: 0.85rem;
  padding: 4px 10px;
}
.resource-del {
  background: #b42318;
  color: #ffffff;
  border-color: #b42318;
}

/* Destructive / delete buttons: consistent red background, white text.
   !important overrides the default button style and any inline red-text. */
.btn-danger,
button.danger,
.resource-del,
.delete-obj,
.delete-exception-btn,
.tm-del,
.mk-del {
  background: #c0392b !important;
  color: #ffffff !important;
  border: 1px solid #c0392b !important;
}
.btn-danger:hover,
button.danger:hover,
.resource-del:hover,
.delete-obj:hover,
.delete-exception-btn:hover,
.tm-del:hover,
.mk-del:hover {
  background: #a5342a !important;
  border-color: #a5342a !important;
}
.resource-result {
  color: #667085;
  font-size: 0.85rem;
}

/* Breadcrumb navigation trail */
.breadcrumbs {
  max-width: 900px;
  margin: 10px 0 2px;
  font-size: 0.9rem;
  color: #667085;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumbs .crumb-link {
  color: #1a2b4c;
  font-weight: 600;
  text-decoration: none;
}
.breadcrumbs .crumb-link:hover {
  text-decoration: underline;
}
.breadcrumbs .crumb-sep {
  margin: 0 6px;
  color: #98a2b3;
}
.breadcrumbs .crumb-current {
  color: #667085;
}

/* Academy address block at the top of the application */
.app-academy-address {
  margin: 0 0 10px;
  color: #475467;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Application read-only front matter: Directions, Disclosures, Academy Options */
#ap-readonly {
  margin: 0 0 22px;
}
.ap-ro {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #f9fafb;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
}
.ap-ro > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  background: #1a2b4c;
}
.ap-ro > summary::-webkit-details-marker { display: none; }
.ap-ro > summary::after {
  content: "\25BC";
  float: right;
  font-size: 0.75rem;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.ap-ro[open] > summary::after { transform: rotate(180deg); }
.ap-ro-static > .ap-ro-head {
  margin: 0;
  padding: 11px 16px;
  font-size: 1rem;
  color: #ffffff;
  background: #1a2b4c;
}
.ap-ro-body {
  padding: 6px 18px 14px;
  color: #344054;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ap-ro-body p { margin: 8px 0; }
.ap-ro-body ul { margin: 6px 0 10px; padding-left: 22px; }
.ap-ro-body li { margin: 3px 0; }
.ap-ro-sub {
  margin: 14px 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #1a2b4c;
}
.ap-ro-note {
  font-size: 0.82rem;
  font-style: italic;
  color: #667085;
}

/* "Apply Today" prompt under the login form */
.login-apply {
  margin-top: 16px;
  text-align: center;
  font-size: 0.95rem;
}
.login-apply a {
  font-weight: 700;
}

/* Recruit Report (read-only view of a recruit's record) */
.rr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.rr-ec-btn {
  background: #b42318;
  color: #ffffff;
  border-color: #b42318;
  font-weight: 700;
}
#rr-photo-area {
  margin: 0 0 16px;
}
.rr-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #101828;
  margin: 4px 0 10px;
}
.rr-group {
  margin: 18px 0 6px;
  color: #1a2b4c;
  border-bottom: 1px solid #e4e7ec;
  padding-bottom: 3px;
}
.rr-row {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.95rem;
}
.rr-label {
  flex: 0 0 210px;
  color: #667085;
}
.rr-value {
  color: #101828;
  font-weight: 500;
}
.rr-flash {
  background: #fff7d6;
  border-radius: 4px;
}

/* Emergency-contact card photo (instructor view) */
.re-photo-frame {
  width: 140px;
  height: 186px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #eef1f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 14px;
}
.re-photo-initials {
  font-size: 40px;
  font-weight: 600;
  color: #98a2b3;
}
.re-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  position: absolute;
  inset: 0;
}

/* CLEE attendee add row */
.clee-att-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.clee-att-add input {
  flex: 1 1 140px;
  min-width: 120px;
}
.clee-att-add button {
  flex: 0 0 auto;
}
.clee-att-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.clee-att-rowbtns {
  white-space: nowrap;
}

/* Attendee autocomplete suggestions */
.att-suggest {
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  max-width: 460px;
  margin: 4px 0;
  background: #fff;
  overflow: hidden;
}
.att-suggest-item {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.att-suggest-item:last-child {
  border-bottom: none;
}
.att-suggest-item:hover {
  background: #eef1f5;
}
.att-suggest-name {
  font-weight: 600;
  color: #101828;
}
#panel-cleestudents table { width: 100%; border-collapse: collapse; }
#panel-cleestudents th, #panel-cleestudents td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eee; }
#panel-cleestudents th { color: #555; }
#cs-search { max-width: 340px; }
.gs-bad {
  color: #b42318;
  font-weight: 700;
}
#panel-gradesummary table { width: 100%; border-collapse: collapse; }
#panel-gradesummary th, #panel-gradesummary td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
#panel-gradesummary th { color: #555; }
#panel-gradesummary tbody tr:hover { background: #fafbfc; }

#panel-tests table { width: 100%; border-collapse: collapse; }
#panel-tests th, #panel-tests td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
#panel-tests th { color: #555; }
#panel-tests tbody tr:hover { background: #fafbfc; }

#panel-objectivesduedates table, #panel-classduedates table { width: 100%; border-collapse: collapse; }
#panel-objectivesduedates th, #panel-objectivesduedates td,
#panel-classduedates th, #panel-classduedates td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  white-space: nowrap;
}
#panel-objectivesduedates th, #panel-classduedates th { color: #555; }
/* Course name is the only column allowed to wrap; it absorbs the extra width
   so the date/status columns stay on one line and uncrowded. */
#panel-objectivesduedates th:first-child, #panel-objectivesduedates td:first-child,
#panel-classduedates th:first-child, #panel-classduedates td:first-child { white-space: normal; width: 100%; }
#panel-objectivesduedates tbody tr:hover, #panel-classduedates tbody tr:hover { background: #fafbfc; }
.gr-addtest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.gr-addtest input[type="text"] { flex: 1 1 220px; min-width: 160px; }
.gr-roster-table .gr-grade { max-width: 110px; }
.cs-merge {
  margin: 10px 0 16px;
}
.cs-merge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}
.att-suggest-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #1a2b4c;
  background: #e7eefc;
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: middle;
}
.att-suggest-meta {
  font-size: 0.82rem;
  color: #667085;
}

/* CLEE class list date-range filter */
.ccl-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 10px 12px;
  background: #f4f5f7;
  border-radius: 8px;
}
.ccl-filter label {
  font-weight: 600;
  margin: 0;
}
.ccl-filter .ccl-filter-quick {
  background: #fff;
  color: #1a2b4c;
  border: 1px solid #1a2b4c;
}
.ccl-search-bar {
  margin: 10px 0 0;
}
.ccl-search-bar input[type="search"] {
  width: 100%;
  max-width: 520px;
  padding: 8px 12px;
  border: 1px solid #c7cfdb;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* CLEE class list: one table, aligned columns, month group header rows */
.clee-class-table {
  width: 100%;
  border-collapse: collapse;
}
.clee-class-table th,
.clee-class-table td {
  text-align: left;
  padding: 6px 10px;
  vertical-align: middle;
}
.clee-class-table tbody tr:not(.clee-month-row) {
  border-top: 1px solid #eee;
}
.clee-class-table .clee-month-row td {
  background: #f4f5f7;
  font-weight: 700;
  color: #1a2b4c;
  padding-top: 10px;
  padding-bottom: 6px;
}

/* ===== Instructions page (role-specific how-to guide) ===== */
#panel-instructions { max-width: 880px; }
.instructions-content h3 {
  color: #1a2b4c;
  margin: 26px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #1a2b4c;
}
.instructions-content p,
.instructions-content li {
  line-height: 1.55;
}
.instructions-content ol li,
.instructions-content ul li {
  margin-bottom: 6px;
}
.instructions-content a[data-nav] {
  color: #1558b0;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.instructions-intro {
  font-size: 1.05rem;
  background: #f4f5f7;
  border-left: 4px solid #1a2b4c;
  padding: 12px 14px;
  border-radius: 4px;
}
.instructions-tip {
  background: #fff8e6;
  border-left: 4px solid #a15c00;
  padding: 10px 14px;
  border-radius: 4px;
}

/* ---- Sign-In Sheets (Migration 087) ---- */
.si-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.si-controls label { font-weight: 600; }
.si-controls select,
.si-controls input[type="date"] { padding: 6px 8px; }
.si-print-range { border-top: 1px dashed #ccd; padding-top: 10px; }

.si-tabs { display: flex; gap: 4px; border-bottom: 2px solid #d5d9e2; margin: 8px 0 16px; }
.si-tab {
  background: transparent;
  color: #1a2b4c;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  font-weight: 600;
}
.si-tab:hover { background: #eef1f6; }
.si-tab.is-active { border-bottom-color: #1a2b4c; }

.si-daily-head {
  background: #f7f9fc;
  border: 1px solid #e0e4ec;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.si-daily-date { font-size: 1.15rem; }
.si-subj { margin: 8px 0; padding-left: 20px; }
.si-subj li { margin: 2px 0; }
.si-daily-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.si-received { font-weight: 600; }

.si-roster-table input.si-cmt { width: 100%; padding: 5px 7px; }
.si-roster-table select.si-flag { padding: 5px 7px; }

.si-badge {
  display: inline-block;
  background: #e6e9f0;
  color: #333;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 10px;
}
.si-badge-warn { background: #fdeccf; color: #8a5300; }

.si-memo-ok { color: #146c2e; font-weight: 600; }
.si-memo-pend { color: #8a5300; }
.si-memo-owe { color: #b00020; font-weight: 600; }

.si-owing-box {
  background: #fdecec;
  border-left: 4px solid #b00020;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 12px 0;
}
.si-owing-box ul { margin: 6px 0 0; padding-left: 20px; }
.si-owing-ok {
  background: #eaf6ee;
  border-left: 4px solid #146c2e;
  padding: 10px 14px;
  border-radius: 4px;
  margin: 12px 0;
}

.si-archive { margin: 8px 0 16px; }
.si-archive-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.si-archive-row input[type="url"] { flex: 1 1 320px; padding: 6px 8px; }
.si-log-table td { vertical-align: middle; }
.si-log-rcv { font-weight: 600; }


/* ===== "Why I Want To Be A Police Officer" recruit statement ===== */
/* Recruit Details report: photo on the left, statement filling the space to its right */
.rr-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
#rr-photo-area { flex: 0 0 auto; }
.rr-quote-area { flex: 1 1 320px; min-width: 0; }
.rr-quote-heading {
  font-weight: 700;
  color: #1a2a4a;
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.rr-quote-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font: inherit;
  font-style: italic;
  line-height: 1.5;
  resize: vertical;
}
.rr-quote-actions { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.rr-quote-status { color: #667085; font-size: 0.9rem; }
/* Instructor Emergency Contact view: read-only, quoted + italic */
.rr-quote-readonly {
  font-style: italic;
  color: #344054;
  line-height: 1.5;
  margin: 4px 0 10px;
  white-space: pre-wrap;
}

/* Recruit Dashboard: the recruit's own statement, shown prominently at the top */
.recruit-quote-banner {
  background: #f4f7fb;
  border: 1px solid #d8e0ec;
  border-left: 5px solid #1a2a4a;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.recruit-quote-heading {
  font-weight: 700;
  color: #1a2a4a;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.recruit-quote-text {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #101828;
  white-space: pre-wrap;
}


/* ===== Recruit Objectives page (grouped by block of instruction) ===== */
.obj-block-table td, .obj-block-table th { vertical-align: middle; }
.obj-score-input {
  width: 84px;
  padding: 4px 6px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font: inherit;
}
.obj-score-save { margin-left: 4px; padding: 4px 10px; font-size: 0.85rem; }
.obj-manual-tag {
  color: #8a6d00;
  background: #fff6e5;
  border: 1px solid #f0d9a0;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.ro-section-title { margin: 18px 0 6px; color: #1a2a4a; font-size: 1.05rem; }
.ro-section-title:first-child { margin-top: 4px; }
.ro-quarter-final { margin: 6px 0 4px; }

/* ===== "View as recruit" (staff QA tool) ===== */
.impersonation-banner {
  background: #8a1c1c;
  color: #fff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.impersonation-banner .imp-text { flex: 1 1 auto; }
.impersonation-banner strong { font-weight: 700; }
#impersonation-return-btn {
  background: #fff;
  color: #8a1c1c;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.rr-viewas-btn { background: #0b6b3a; }
.rr-viewas-btn:hover { background: #0a5c32; }

/* ===== My Grades: roomier, easier-to-read layout ===== */
#panel-mygrades { line-height: 1.6; }
#panel-mygrades > p { max-width: 820px; margin-bottom: 20px; }
#panel-mygrades h3 { margin-top: 34px; margin-bottom: 12px; font-size: 1.15rem; color: #1a2a4a; }
#panel-mygrades #mg-overall { font-size: 1.18rem; margin: 14px 0 30px; }
#panel-mygrades .data-table {
  width: 100% !important;
  max-width: 820px !important;
  border-collapse: collapse;
  margin: 16px 0 12px;
  font-size: 0.98rem;
}
#panel-mygrades .data-table th,
#panel-mygrades .data-table td {
  padding: 14px 28px;
  border-bottom: 1px solid #e7ebf1;
  text-align: left;
  vertical-align: middle;
}
#panel-mygrades .data-table thead th {
  color: #33415c;
  border-bottom: 2px solid #d5dbe4;
  background: #f7f9fc;
}
#panel-mygrades #mg-quarters .data-table td { text-align: center; }
#panel-mygrades .ro-quarter-final { margin: 14px 0 6px; font-size: 1.05rem; }

/* My Grades -> Tests: indented course-grade breakdown (quizzes -> average -> final -> course grade) */
#panel-mygrades .data-table td.mg-indent-1 { padding-left: 56px; }
#panel-mygrades .data-table td.mg-indent-2 { padding-left: 88px; }
#panel-mygrades .mg-course-sub td,
#panel-mygrades .mg-course-subtotal td { background: #f8fafc; }
#panel-mygrades .mg-course-subtotal td { font-style: italic; }
#panel-mygrades .mg-course-overall td { font-weight: 700; border-top: 2px solid #cfd6e0; background: #f2f5f9; }

/* ===== Objectives page (recruit read-only + staff editable): wider, one line per row ===== */
#panel-recruitobjectives { max-width: 1500px; }
#panel-recruitobjectives #ro-body { overflow-x: auto; }
#panel-recruitobjectives .data-table {
  border-collapse: collapse;
  margin: 14px 0 16px;
}
#panel-recruitobjectives .data-table th,
#panel-recruitobjectives .data-table td {
  padding: 12px 18px;
  border-bottom: 1px solid #e7ebf1;
  vertical-align: middle;
  text-align: left;
}
#panel-recruitobjectives .data-table thead th {
  background: #f7f9fc;
  color: #33415c;
  border-bottom: 2px solid #d5dbe4;
}
/* Objectives by Quarter: spread the scores out, but don't stretch full width */
#panel-recruitobjectives .data-table:not(.obj-block-table) { max-width: 560px; }
/* Objectives by Block: every row on a single line, and TIGHT -- this is the
   grading screen, so the more rows on screen the less scrolling it takes to
   enter a class's scores.
   ⚠ width is auto, NOT 100%. At 100% the table stretched to the 1500px panel and
   the browser handed the leftover width to the widest column, which is Course --
   that is what put a hand's width of empty space between a course name and its
   due date. Auto sizes each column to its content instead; max-width stops a very
   long course name pushing the table past the panel. */
#panel-recruitobjectives .obj-block-table { width: auto; max-width: 100%; }
#panel-recruitobjectives .obj-block-table th,
#panel-recruitobjectives .obj-block-table td { white-space: nowrap; }
/* Row height: less than half the vertical padding of the Quarter table above,
   which is deliberately left alone -- four rows read better with room, forty do
   not. */
#panel-recruitobjectives .obj-block-table th,
#panel-recruitobjectives .obj-block-table td { padding: 5px 14px; }
/* Close up the Course -> Due Date gap specifically. */
#panel-recruitobjectives .obj-block-table th:nth-child(2),
#panel-recruitobjectives .obj-block-table td:nth-child(2) { padding-right: 6px; }
#panel-recruitobjectives .obj-block-table th:nth-child(3),
#panel-recruitobjectives .obj-block-table td:nth-child(3) { padding-left: 6px; }
/* Once the cell padding is this small the input is what sets the row height, so
   it is trimmed to match. */
#panel-recruitobjectives .obj-score-input { padding: 2px 6px; }
/* Center Possible Points, Points Received, and Score under their headers */
#panel-recruitobjectives .obj-block-table th:nth-child(4),
#panel-recruitobjectives .obj-block-table td:nth-child(4),
#panel-recruitobjectives .obj-block-table th:nth-child(5),
#panel-recruitobjectives .obj-block-table td:nth-child(5),
#panel-recruitobjectives .obj-block-table th:nth-child(6),
#panel-recruitobjectives .obj-block-table td:nth-child(6) { text-align: center; }
#panel-recruitobjectives .obj-score-input { width: 74px; }

/* Course-grade breakdown rows -- shared look for My Grades and the staff Grades Report */
.data-table tr.mg-course-sub td,
.data-table tr.mg-course-subtotal td { background: #f8fafc; }
.data-table tr.mg-course-subtotal td { font-style: italic; }
.data-table tr.mg-course-overall td { font-weight: 700; border-top: 2px solid #cfd6e0; }

/* Recruit Time Log (staff view): ~50% wider than the standard panel */
#panel-recruittimelog { max-width: 960px; }

/* My Grades: give the Tests table room so the test name and date never wrap */
#panel-mygrades { max-width: 1200px; }
#panel-mygrades #mg-tests .data-table { max-width: 1120px !important; }
#panel-mygrades #mg-tests .data-table th,
#panel-mygrades #mg-tests .data-table td { white-space: nowrap; }

/* Grades Report (staff): wider, and keep each test name + date on one line */
#panel-recruitgrades { width: fit-content; max-width: 100%; }
#panel-recruitgrades .tests-breakdown-table th,
#panel-recruitgrades .tests-breakdown-table td { white-space: nowrap; }

/* Objectives by Block: center the Total row's numbers under their columns (the
   "Total" label uses colspan, so the totals sit in the last three cells). */
#panel-recruitobjectives .obj-block-table tfoot td:nth-child(2),
#panel-recruitobjectives .obj-block-table tfoot td:nth-child(3),
#panel-recruitobjectives .obj-block-table tfoot td:nth-child(4) { text-align: center; }

/* Objectives by Block: center the Total-row numbers (class-based, so it works in
   both the recruit and staff views regardless of cell position). */
#panel-recruitobjectives .obj-block-table td.obj-total-num { text-align: center; }

/* Recruit dashboard: Quick Links group sub-headings */
.dashboard-group-title { margin: 20px 0 8px; color: #1a2a4a; font-size: 1rem; font-weight: 700; }

/* Class Positions: duty-title checklist on the recruit edit form */
.position-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 14px;
  padding: 8px 10px;
  border: 1px solid #d8dce3;
  border-radius: 6px;
  background: #fafbfc;
}
.position-checklist .checkbox-label { margin: 0; font-weight: 400; }

/* Class Positions: the manage-titles list rows */
.cp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid #eee;
}
.cp-title-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cp-title-actions button { padding: 3px 10px; font-size: 0.85rem; }

/* Class Positions: the per-class summary table -- spacious and easy to scan */
#cp-summary .cp-table {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin-top: 10px;
}
#cp-summary .cp-table th,
#cp-summary .cp-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 22px;
  border-bottom: 1px solid #e3e7ee;
  font-size: 1.02rem;
  line-height: 1.7;
}
#cp-summary .cp-table thead th {
  border-bottom: 2px solid #c7ccd6;
  color: #1a2a4a;
  font-size: 1.05rem;
  padding-top: 6px;
  padding-bottom: 8px;
}
#cp-summary .cp-table td:first-child { width: 36%; white-space: nowrap; }
#cp-summary .cp-table tbody tr:nth-child(even) { background: #f7f9fc; }
#cp-summary h4 { margin: 26px 0 6px; color: #1a2a4a; font-size: 1.05rem; }
#cp-summary h4 + p { line-height: 1.9; max-width: 760px; }

/* Certificates area */
#panel-certificates .cert-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.cert-recruit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.cert-recruit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #eee; }
.cert-recruit-row button { padding: 3px 12px; font-size: 0.85rem; flex-shrink: 0; }
.cert-training-row { padding: 9px 4px; border-bottom: 1px solid #eee; }
.cert-training-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-training-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cert-training-actions button { padding: 3px 10px; font-size: 0.85rem; }
.cert-course-editor { margin: 10px 0 4px; padding: 10px; background: #fafbfc; border: 1px solid #e3e7ee; border-radius: 6px; }
.cert-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 3px 14px; max-height: 260px; overflow-y: auto; }
.cert-course-grid .checkbox-label { margin: 0; font-weight: 400; font-size: 0.88rem; }

/* Certificates: honor award recipient pickers */
.cert-honor-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.cert-honor-name { flex: 1 1 260px; font-weight: 600; }
.cert-honor-row select { max-width: 240px; }
.cert-honor-row button { padding: 3px 12px; font-size: 0.85rem; }

/* Certificates: recognition award recipient management */
.cert-award-row { padding: 8px 4px; border-bottom: 1px solid #eee; }
.cert-award-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cert-award-name { font-weight: 600; }
.cert-award-ctrl { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cert-award-ctrl select { max-width: 220px; }
.cert-award-ctrl button { padding: 3px 12px; font-size: 0.85rem; }
.cert-award-editor { margin: 10px 0 4px; padding: 10px; background: #fafbfc; border: 1px solid #e3e7ee; border-radius: 6px; }
.cert-award-recip { display: flex; align-items: center; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.cert-award-recip .checkbox-label { margin: 0; font-weight: 400; min-width: 200px; }
.cert-award-recip .cert-award-text { flex: 1 1 320px; padding: 4px 6px; }
.cert-award-recip .cert-award-date { width: 160px; }
.cert-award-recip .result { font-size: 0.8rem; }

/* Courses to Schedule */
.sn-course { border: 1px solid #e3e7ee; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.sn-course-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fafbfc; border: none; cursor: pointer; text-align: left; font-size: 0.95rem; color: #1a2733; }
.sn-course-head:hover { background: #f1f4f9; }
.sn-course-head.open { background: #eef2f8; border-bottom: 1px solid #e3e7ee; }
.sn-course-head .sn-code { font-weight: 700; color: #1a2733; min-width: 48px; }
.sn-course-head .sn-title { flex: 1; color: #1a2733; font-weight: 500; }
.sn-course-head .sn-remaining { font-weight: 600; color: #b23c17; white-space: nowrap; }
.sn-course-head .sn-remaining.sn-scheduled { color: #1c6b30; }
.sn-course.sn-done .sn-course-head { background: #f4faf5; }
.sn-course.sn-done .sn-course-head:hover { background: #eaf5ec; }
.sn-instructors { padding: 10px 14px 12px; }
.sn-breakdown { font-size: 0.85rem; margin-bottom: 8px; }
.sn-count { font-size: 0.85rem; margin-bottom: 4px; }
.sn-instructor-list { margin: 0; padding-left: 20px; }
.sn-instructor-list li { padding: 2px 0; }

/* Instruction Calendar search */
.cal-search { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.cal-search input[type="search"] { flex: 1; max-width: 520px; padding: 7px 10px; border: 1px solid #c7cfdb; border-radius: 6px; font-size: 0.9rem; }
.cal-search-clear { padding: 6px 12px; font-size: 0.85rem; }
.cal-search-results { max-width: 640px; margin: 4px 0 12px; border: 1px solid #e3e7ee; border-radius: 6px; max-height: 340px; overflow-y: auto; background: #fff; }
.cal-search-count { font-size: 0.8rem; color: #6b7684; padding: 6px 10px; border-bottom: 1px solid #eef1f6; }
.cal-search-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; text-align: left; border: none; border-bottom: 1px solid #f1f4f9; background: #fff; cursor: pointer; padding: 8px 10px; font-size: 0.88rem; color: #1a2733; }
.cal-search-row:last-child { border-bottom: none; }
.cal-search-row:hover { background: #f1f4f9; }
.cal-search-date { font-weight: 600; min-width: 110px; color: #1a2733; }
.cal-search-course { flex: 1 1 220px; }
.cal-search-meta { color: #6b7684; font-size: 0.82rem; flex: 1 1 100%; }
.cal-search-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.cal-search-status.confirmed { background: #d9f0de; color: #1c6b30; }
.cal-search-status.provisional { background: #fff0d6; color: #8a5a12; }
.cal-search-status.requested { background: #e2e8f5; color: #3a4a7a; }
@keyframes calCellFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,158,46,0); } 20%, 60% { box-shadow: 0 0 0 3px rgba(214,158,46,0.85); background: #fff7e6; } }
.cal-cell-flash { animation: calCellFlash 2.6s ease-in-out; }

/* ---- Messaging ---- */
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  background: #b42318; color: #fff; border-radius: 9px;
  font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle;
}
.msg-notice {
  background: #fff6e6; border: 1px solid #e3c37a; color: #7a4b00;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.9rem;
}
.msg-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.msg-composer {
  border: 2px solid #1a2b4c; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; background: #fbfcfe;
}
.msg-composer h3 { margin-top: 0; }
.msg-field-label { display: block; font-weight: 600; margin: 12px 0 4px; }
.msg-composer textarea, .msg-composer input[type="text"], .msg-composer select {
  width: 100%; max-width: 520px; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #c4ccd8; border-radius: 6px; font: inherit;
}
.msg-composer-actions { display: flex; gap: 10px; margin-top: 14px; }
.msg-contacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
  max-height: 260px; overflow-y: auto; border: 1px solid #e2e6ee; border-radius: 8px; padding: 12px; background: #fff;
}
.msg-contact-head { font-weight: 700; color: #1a2b4c; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px; }
.msg-contact { display: block; padding: 3px 0; cursor: pointer; }

.msg-layout { display: flex; gap: 16px; align-items: flex-start; }
.msg-list { flex: 0 0 320px; max-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.msg-thread {
  flex: 1 1 auto; min-width: 0; border: 1px solid #e2e6ee; border-radius: 10px;
  padding: 16px; background: #fff; min-height: 320px;
}
@media (max-width: 760px) { .msg-layout { flex-direction: column; } .msg-list { flex-basis: auto; max-width: none; width: 100%; } }

.msg-list-item {
  text-align: left; background: #f4f5f7; border: 1px solid #e2e6ee; border-radius: 8px;
  padding: 10px 12px; cursor: pointer; width: 100%; transition: background 0.15s;
}
.msg-list-item:hover { background: #e6ebf3; }
.msg-list-item.msg-active { border-color: #1a2b4c; background: #eef2f8; }
.msg-list-item.msg-unread { border-left: 4px solid #b42318; }
.msg-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.msg-item-label { font-weight: 700; color: #1a2b4c; }
.msg-item-unread { background: #b42318; color: #fff; border-radius: 9px; min-width: 18px; text-align: center; font-size: 0.72rem; font-weight: 700; padding: 0 5px; }
.msg-item-sub { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.msg-item-snip { color: #555; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-time { color: #888; font-size: 0.75rem; margin-top: 2px; }
.msg-kind-tag { background: #1a2b4c; color: #fff; border-radius: 6px; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; text-transform: uppercase; }

.msg-thread-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 12px; }
.msg-thread-head h3 { margin: 0; }
.msg-thread-note { color: #7a4b00; background: #fff6e6; border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; }
.msg-bubbles { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.msg-bubble { max-width: 78%; background: #f1f4f9; border-radius: 10px; padding: 8px 12px; align-self: flex-start; }
.msg-bubble.msg-mine { align-self: flex-end; background: #dce6f6; }
.msg-bubble-meta { font-size: 0.72rem; color: #666; margin-bottom: 3px; }
.msg-bubble-body { white-space: pre-wrap; word-wrap: break-word; }
.msg-reply { display: flex; gap: 8px; margin-top: 14px; align-items: flex-start; }
.msg-reply textarea { flex: 1 1 auto; padding: 8px 10px; border: 1px solid #c4ccd8; border-radius: 6px; font: inherit; resize: vertical; }

.msg-audit-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.msg-audit-row { text-align: left; background: #f4f5f7; border: 1px solid #e2e6ee; border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.msg-audit-row:hover { background: #e6ebf3; }
.msg-audit-label { font-weight: 700; color: #1a2b4c; }
.msg-audit-meta { font-size: 0.78rem; color: #666; }
.msg-audit-parts { font-size: 0.78rem; color: #555; }
button.secondary {
  background: #e2e6ee; color: #1a2b4c;
}
button.secondary:hover { background: #d2d9e6; }

/* Recruit Information Changes: give the panel room and keep every column on a
   single line (Field, New value, and the When timestamp were wrapping in the
   default 640px panel). Card scrolls horizontally only if a value is unusually long. */
#panel-verifyrecruitinfo { max-width: 1120px; }
#verifyrecruitinfo-list .memo-list-row { overflow-x: auto; }
#verifyrecruitinfo-list .data-table { width: 100%; border-collapse: collapse; }
#verifyrecruitinfo-list .data-table th,
#verifyrecruitinfo-list .data-table td {
  white-space: nowrap;
  padding: 7px 26px 7px 0;
  text-align: left;
  vertical-align: middle;
}
#verifyrecruitinfo-list .data-table th:last-child,
#verifyrecruitinfo-list .data-table td:last-child { padding-right: 0; }

/* ---- Study Area ---- */
.sa-level { margin-bottom: 18px; }
/* The POST-level heading is a full-width button (opens block-wide material) but
   still reads as a heading: transparent background, dark text, bottom rule. */
.sa-level-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none;
  border-bottom: 2px solid #1a2b4c; border-radius: 0;
  font-weight: 700; color: #1a2b4c; font-size: 1.05rem;
  padding: 2px 2px 4px; margin: 0 0 8px;
  transition: background 0.15s;
}
.sa-level-head:hover { background: #eef1f6; }
.sa-level-head-name { color: #1a2b4c; }
.sa-level-head-count { font-size: 0.78rem; font-weight: 600; color: #3a6ea5; white-space: nowrap; }
.sa-level-head-count.sa-empty { color: #98a2b3; font-style: italic; font-weight: 400; }
.sa-block-note { margin: -8px 0 14px; font-size: 0.9rem; }
.sa-course {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  background: #f4f5f7; border: 1px solid #e2e6ee; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 6px; cursor: pointer; transition: background 0.15s;
}
.sa-course:hover { background: #e6ebf3; }
.sa-course-code { font-weight: 700; color: #1a2b4c; min-width: 56px; }
/* The row is a <button>, whose global color is white -- set an explicit dark,
   readable color on the title span (normal weight). */
.sa-course-title { flex: 1 1 auto; color: #1a1a1a; }
.sa-course-count { color: #555; font-size: 0.82rem; white-space: nowrap; }
.sa-course-count.sa-empty { color: #999; font-style: italic; }

.sa-back {
  background: #e2e6ee; color: #1a2b4c; border: none; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; margin-bottom: 12px;
}
.sa-back:hover { background: #d2d9e6; }
.sa-detail-head { margin: 4px 0 16px; }
.sa-mat-group { margin-bottom: 16px; }
.sa-mat-type {
  font-weight: 700; color: #1a2b4c; text-transform: uppercase; font-size: 0.78rem;
  letter-spacing: 0.03em; margin-bottom: 6px;
}
.sa-mat {
  border-left: 3px solid #1a2b4c; background: #f8fafc; border-radius: 0 6px 6px 0;
  padding: 8px 12px; margin-bottom: 8px;
}
.sa-mat-retired { border-left-color: #b0b6c0; opacity: 0.85; }
.sa-mat-title { font-weight: 600; color: #1a56b0; text-decoration: none; }
.sa-mat-title:hover { text-decoration: underline; }
.sa-mat-desc { font-size: 0.88rem; color: #444; margin-top: 3px; }
.sa-mat-dates { font-size: 0.76rem; color: #777; margin-top: 3px; }
.sa-mat-archive { font-size: 0.78rem; color: #7a4b00; margin-top: 3px; }
.sa-mat-actions { margin-top: 5px; font-size: 0.82rem; }
.sa-mat-actions a, .sa-mat-actions button { white-space: nowrap; }
.sa-mat-dl { color: #1a56b0; text-decoration: none; font-weight: 600; }
.sa-mat-dl:hover { text-decoration: underline; }
.sa-badge {
  display: inline-block; background: #1a2b4c; color: #fff; border-radius: 6px;
  font-size: 0.65rem; font-weight: 700; padding: 1px 6px; text-transform: uppercase; vertical-align: middle;
}
.sa-badge-retired { background: #8a94a6; }
/* ⚠ text-align: left is not decoration. A <button> centres its own text, and
   font: inherit does not undo that -- so any link-btn whose label wraps onto a
   second line sat centred in its cell while every other column read down the
   left edge. It showed up first on the objectives course names, which are long
   enough to wrap; every other link-btn in the app is short enough that it never
   wrapped and the bug stayed invisible. */
.link-btn { background: none; border: none; color: #1a56b0; cursor: pointer; padding: 0; font: inherit; text-align: left; }
.link-btn:hover { text-decoration: underline; }

.sa-staff-controls { margin-top: 20px; padding-top: 14px; border-top: 1px solid #e2e6ee; }
.sa-form { border: 1px solid #e2e6ee; border-radius: 8px; padding: 14px; margin-top: 10px; background: #fbfcfe; max-width: 560px; }
.sa-form label { display: block; font-weight: 600; margin: 10px 0 4px; }
.sa-form label:first-child { margin-top: 0; }
.sa-form input[type="text"], .sa-form input[type="url"], .sa-form input[type="date"], .sa-form select {
  width: 100%; max-width: 520px; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid #c4ccd8; border-radius: 6px; font: inherit;
}
.sa-form-actions { margin-top: 12px; display: flex; align-items: center; gap: 10px; }

.sa-log { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sa-log-row { border: 1px solid #e2e6ee; border-radius: 6px; padding: 8px 10px; background: #fff; }
.sa-log-action {
  display: inline-block; border-radius: 6px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; padding: 1px 7px; color: #fff; margin-right: 6px;
}
.sa-log-added { background: #146c2e; }
.sa-log-edited { background: #1a2b4c; }
.sa-log-retired { background: #8a5a12; }
.sa-log-archive { font-size: 0.78rem; color: #7a4b00; margin-top: 3px; }
.sa-log-meta { font-size: 0.75rem; color: #888; margin-top: 3px; }

/* ---------------------------------------------------------------------------
   Application -- class selection carried over from the Pre-Screening Interest
   Form. Rendered directly under the status line at the top of the application.
   --------------------------------------------------------------------------- */
.ap-class-line {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #1a2b4c;
  margin: 4px 0 2px;
}
.ap-class-line-missing {
  color: #9a3412;
  text-transform: none;
  font-style: italic;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Manage Applicants -- queue filter. Enrolled and closed applications stay on
   file permanently; they are filtered out of the default working view, never
   deleted or hidden outright.
   --------------------------------------------------------------------------- */
.ma-filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}
.ma-filterbar label { font-weight: 600; }
.ma-filterbar select { margin-left: 6px; }
.ma-count { color: #555; font-size: 0.9rem; }
.ap-status-pill.st-enrolled { background: #14532d; color: #fff; }
.ma-row-enrolled td { background: #f4f7f4; }

/* ---- CLEE POST-audit highlighting (edit form + list) ---- */
/* Blank required fields on the class edit form. */
#editcleeclass-form input.audit-missing,
#editcleeclass-form textarea.audit-missing,
#editcleeclass-form select.audit-missing {
  background: #fff3b0;
  outline: 2px solid #e0b400;
  outline-offset: 0;
}
/* Grouped controls (evaluation-plan checkboxes, the blocks section). */
#ccl-eval-group.audit-missing,
#ccl-blocks-section.audit-missing {
  background: #fff8d6;
  outline: 2px solid #e0b400;
  border-radius: 6px;
  padding: 8px;
}
/* A block card with outstanding items. */
.block-card.audit-missing {
  border-left: 5px solid #e0b400;
  background: #fffbe8;
}
.block-audit-note {
  color: #7a5c00;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 4px 0 2px;
}
/* Summary banner at the top of the edit form. */
.audit-banner {
  margin: 10px 0 4px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.audit-banner ul { margin: 6px 0 0; padding-left: 20px; }
.audit-banner li { margin: 1px 0; }
.audit-banner.audit-incomplete { background: #fff3b0; border: 1px solid #e0b400; color: #5c4600; }
.audit-banner.audit-complete { background: #e5f5e5; border: 1px solid #4a9d4a; color: #1e5c1e; }
.audit-banner.audit-hostonly { background: #eef1f6; border: 1px solid #b8c2d6; color: #33415c; }
/* Read-only "Audit" column checkbox in the CLEE class list. Green when audit
   ready (complete / Host Only / Canceled); red-bordered when items are missing.
   Kept enabled (not disabled) so the green accent renders; clicks and focus are
   blocked in app.js and here so it stays a status indicator only. */
.clee-class-table td.clee-audit-cell { text-align: center; }
.clee-audit-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  pointer-events: none;
  accent-color: #2e7d32;
}
.clee-audit-cell input[type="checkbox"]:not(:checked) {
  outline: 2px solid #cc2b2b;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(204, 43, 43, 0.18);
  border-radius: 2px;
}
.clee-audit-cell .audit-x { color: #b33; font-weight: 700; }

/* ===== Inspirational quote strip (gray area above the dashboard) ===== */
.quote-bar {
  max-width: 900px;
  margin: 14px auto 0;
  padding: 10px 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #eef1f6;
  border-left: 4px solid #1a2b4c;
  border-radius: 6px;
  color: #33415c;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
}
.quote-bar-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  line-height: 1;
  color: #8a97ad;
  transform: translateY(4px);
}
.quote-bar-text::after { content: "\201D"; }

/* ===== Motivational Quotes management page (staff) ===== */
.quote-admin-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e6e8ec;
}
.quote-admin-row.quote-random-row {
  align-items: center;
  font-weight: 600;
  background: #f7f9fc;
  padding: 12px 10px;
  border-radius: 6px;
  border-bottom: 2px solid #d5deef;
  margin-bottom: 4px;
}
.quote-admin-row input[type="radio"] {
  margin-top: 5px;
  width: auto;
  flex: 0 0 auto;
}
.quote-random-row input[type="radio"] { margin-top: 0; }
.quote-admin-text {
  flex: 1 1 auto;
  min-width: 0;
}
.quote-admin-text textarea {
  width: 100%;
  resize: vertical;
  margin: 0;
}
.quote-admin-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-admin-actions button { margin: 0; }
.quote-admin-actions .quote-del { background: #b00020; }
.quote-admin-actions .quote-del:hover { background: #d21a3a; }
.quote-admin-result {
  display: block;
  font-size: 0.85rem;
  min-height: 1em;
}
.quote-random-hint {
  font-weight: 400;
  font-style: italic;
  color: #667085;
  font-size: 0.9rem;
}

/* ===== Study & Practice (question bank) ===== */
.sa-practice { margin-top: 22px; border-top: 2px solid #e3e8ef; padding-top: 14px; }
.sa-practice-head { font-weight: 700; color: #1A2B4C; font-size: 1.05rem; margin-bottom: 10px; }
.sa-practice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sa-quiz-opts { font-size: .9rem; color: #475467; margin: 6px 0 4px; }
.sa-quiz-opts select { margin: 0 4px; }
.sa-progress { font-size: .85rem; margin: 6px 0; }
.sa-quiz-area { margin-top: 12px; }
.sa-q { border: 1px solid #e3e8ef; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.sa-q-stem { font-weight: 600; margin-bottom: 8px; }
.sa-q-num { color: #1A2B4C; margin-right: 4px; }
.sa-opt { display: block; padding: 5px 0; cursor: pointer; }
.sa-opt input { margin-right: 8px; }
.sa-q-correct { border-color: #1A7F37; background: #f0fbf3; }
.sa-q-wrong { border-color: #d92d20; background: #fef4f3; }
.sa-q-fb { margin-top: 8px; font-size: .9rem; }
.sa-ok { color: #1A7F37; font-weight: 600; }
.sa-no { color: #b42318; font-weight: 600; }
.sa-why { margin-top: 4px; color: #475467; }
.sa-quiz-foot { margin-top: 10px; }
.sa-quiz-result { margin-left: 10px; }
.sa-flash { text-align: center; max-width: 520px; margin: 0 auto; }
.sa-flash-meta { color: #667085; font-size: .85rem; margin-bottom: 8px; }
.sa-flash-card { border: 2px solid #1A2B4C; border-radius: 12px; padding: 28px 20px; min-height: 120px; cursor: pointer; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.sa-flash-front { font-weight: 700; font-size: 1.15rem; color: #1A2B4C; }
.sa-flash-back { font-size: 1rem; color: #1c2431; border-top: 1px solid #e3e8ef; padding-top: 12px; }
.sa-flash-hint { font-size: .8rem; }
.sa-flash-nav { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sa-practice-manage { margin-top: 14px; }
.sa-qb-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 10px; }
.sa-qb-table th, .sa-qb-table td { border-bottom: 1px solid #e3e8ef; padding: 5px 8px; text-align: left; vertical-align: top; }
.sa-qb-retired { opacity: .55; }
.sa-qb-form { display: grid; gap: 4px; max-width: 560px; margin-top: 10px; }
.sa-qb-form label { font-weight: 600; font-size: .85rem; margin-top: 6px; }
.sa-qb-form textarea { min-height: 48px; width: 100%; box-sizing: border-box; }
.sa-qb-form input[type="text"] { width: 100%; box-sizing: border-box; }
.sa-qb-form-actions { margin-top: 10px; }

/* Practice section pinned to the top of a whole-block page (stands out above the material) */
.sa-practice-top { border-top: none; margin-top: 8px; margin-bottom: 22px; background: #f2f5fa; border: 1px solid #d9e0ec; border-radius: 10px; padding: 14px 16px; }
.sa-practice-top .sa-practice-head { margin-bottom: 8px; }

/* ===== Online Tests ===== */
.ot-card { border:1px solid #d9e0ec; border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fff; }
.ot-card-title { font-weight:700; color:#1A2B4C; font-size:1.05rem; }
.ot-instr { color:#33405a; margin:6px 0; }
.ot-start { margin-top:10px; }
.ot-result { text-align:center; max-width:440px; margin:20px auto; padding:22px; border:1px solid #d9e0ec; border-radius:12px; background:#f7f9fc; }
.ot-score { font-size:1.2rem; }
.ot-sec { margin:18px 0; padding-top:12px; border-top:1px solid #e3e8ef; }
.ot-sec h4 { color:#1A2B4C; margin:0 0 8px; }
.ot-warn { color:#b42318; font-size:.85rem; }

/* Online Tests card.

   The card holds the question list, the release grid and the "Assign to one
   recruit" search. That search alone is seven columns -- two datetime pickers
   and a run of action links -- and at the default .panel width of 640px the
   actions overflowed the white background entirely.

   Column widths are set BY CLASS (written in otAssignSearch), not by
   :nth-child, so adding a column cannot shift them onto the wrong ones. Widths
   total 100%. A narrow screen scrolls inside the card rather than spilling
   past it. */
#panel-onlinetests {
  max-width: 1400px;
}
#ot-asn-results,
#ot-asn-current,
#ot-roster-box,
#ot-results-box {
  overflow-x: auto;
}
#ot-asn-results .ot-asn-tbl {
  width: 100%;
  min-width: 1220px;
  table-layout: fixed;
}
#ot-asn-results .ot-asn-tbl th,
#ot-asn-results .ot-asn-tbl td {
  padding-left: 12px;
  padding-right: 12px;
}
#ot-asn-results .ot-asn-tbl .ot-c-name     { width: 15%; overflow-wrap: anywhere; }
#ot-asn-results .ot-asn-tbl .ot-c-class    { width: 6%;  white-space: nowrap; }
#ot-asn-results .ot-asn-tbl .ot-c-state    { width: 14%; }
#ot-asn-results .ot-asn-tbl .ot-c-open     { width: 17%; }
#ot-asn-results .ot-asn-tbl .ot-c-close    { width: 17%; }
#ot-asn-results .ot-asn-tbl .ot-c-practice { width: 5%;  text-align: center; }
#ot-asn-results .ot-asn-tbl .ot-c-acts     { width: 26%; }
/* The pickers shrink to their column instead of forcing it wider. */
#ot-asn-results .ot-asn-tbl input[type="datetime-local"] {
  width: 100%;
  box-sizing: border-box;
}
/* An action label wraps between buttons, never inside one: "Grant second
   attempt" stacked three words deep is what made the column look broken. */
#ot-asn-results .ot-asn-tbl .link-btn {
  white-space: nowrap;
}

/* "Now + 7 days" sits under its picker rather than beside it, so it never
   squeezes the date field. Small and quiet -- it fills the two boxes, it does
   not save anything. */
#ot-asn-results .ot-asn-tbl .ot-asn-7d,
#ot-rel-box .ot-rel-7d {
  font-size: .78rem;
}
#ot-asn-results .ot-asn-tbl .ot-asn-7d {
  display: block;
  margin-top: 4px;
}
#ot-rel-box .ot-rel-acts {
  white-space: nowrap;
}

/* Submitted Tests card.

   Seven columns -- recruit, class, test title, score, submitted, reviewed and
   the Open / Verify buttons -- in a card still at the default .panel width.
   Every column was crushed: names broke over two lines, "78% (39/50) Pass"
   stacked three deep, and the timestamp wrapped mid-date.

   Widths are set BY CLASS (written in loadSubmittedTests), not by :nth-child,
   so a new column cannot shift them. They total 100%, and a narrow screen
   scrolls inside the card rather than spilling past it. */
#panel-submittedtests {
  max-width: 1400px;
}
#st-list {
  overflow-x: auto;
}
#st-list .st-sub-tbl {
  width: 100%;
  min-width: 1200px;
  table-layout: fixed;
}
#st-list .st-sub-tbl th,
#st-list .st-sub-tbl td {
  padding-left: 12px;
  padding-right: 12px;
  vertical-align: top;
}
#st-list .st-sub-tbl .st-c-name  { width: 17%; overflow-wrap: anywhere; }
#st-list .st-sub-tbl .st-c-class { width: 6%;  white-space: nowrap; }
#st-list .st-sub-tbl .st-c-test  { width: 23%; }
#st-list .st-sub-tbl .st-c-score { width: 14%; }
#st-list .st-sub-tbl .st-c-sub   { width: 15%; white-space: nowrap; }
#st-list .st-sub-tbl .st-c-rev   { width: 12%; }
#st-list .st-sub-tbl .st-c-acts  { width: 13%; white-space: nowrap; }
/* Score reads as one line -- percentage, raw marks, verdict -- and Pass/Fail
   never breaks away from the number it belongs to. */
#st-list .st-sub-tbl .st-c-score .sa-ok,
#st-list .st-sub-tbl .st-c-score .sa-no {
  white-space: nowrap;
}
.ot-pool-list { max-height:320px; overflow-y:auto; border:1px solid #e3e8ef; border-radius:8px; padding:8px; margin:8px 0; }
.ot-pool-item { display:block; padding:4px 0; font-size:.9rem; cursor:pointer; }
.ot-pool-item input { margin-right:8px; }

/* ===== Recruit test alert -- the red bar on every screen =====
   Sticky under the impersonation banner, which sits at top:0 with z-index 1000
   when a staff member is viewing as a recruit. */
.test-alert-banner {
  background: #b42318;
  color: #fff;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.97rem;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.test-alert-banner .test-alert-text { flex: 1 1 auto; }
.test-alert-banner strong { font-weight: 700; }
#test-alert-go {
  background: #fff;
  color: #b42318;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
}
#test-alert-go:hover { background: #ffe9e7; }

/* Practice quizzes.

   Deliberately a different colour from the red graded-test banner. A test
   waiting is a different order of urgency from a quiz they can retake all
   week, and dressing the two identically teaches recruits to ignore both. */
.test-alert-banner.test-alert-practice {
  background: #1a56b0;
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.test-alert-banner.test-alert-practice #test-alert-go { color: #1a56b0; }
.test-alert-banner.test-alert-practice #test-alert-go:hover { background: #e7efff; }
.test-alert-also { opacity: .9; }

.pr-sec { margin-top: 26px; padding-top: 14px; border-top: 1px solid #e3e8ef; }
.pr-sec h4 { color: #1A2B4C; margin: 0 0 8px; }
.pr-owed {
  background: #1a56b0; color: #fff; border-radius: 10px;
  padding: 1px 9px; font-size: .8rem; font-weight: 600; margin-left: 6px;
}
.pr-card {
  border: 1px solid #d9e0ec; border-left: 4px solid #1a56b0; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; background: #fff;
}
.pr-card.pr-done { border-left-color: #2e7d32; background: #fbfdfb; }
.pr-card-title { font-weight: 700; color: #1A2B4C; font-size: 1.05rem; }
.pr-card button { margin-top: 10px; }
/* How long they have. Kept on its own line rather than appended to the count
   line -- a deadline buried in a run of middots is a deadline nobody read. */
.pr-window { margin-top: 6px; font-size: .92rem; color: #1A2B4C; }
.pr-window-soon { color: #b42318; font-weight: 600; }
/* Says "practice" wherever a score is shown, so an ungraded number is never
   mistaken for one that counts. */
.pr-tag, .ot-practice-tag {
  display: inline-block; background: #e7efff; color: #1a56b0;
  border-radius: 10px; padding: 1px 9px; font-size: .78rem;
  font-weight: 600; vertical-align: middle;
}
.ot-practice-head { background: #f5f8ff; border-radius: 8px; padding: 12px 14px; }
.ot-practice-head input[type="number"] { width: 70px; }
.ot-practice-lbl { display: block; margin-top: 12px; font-weight: 400; }

/* What they missed -- the part that does the teaching. */
.pr-missed { margin-top: 18px; }
.pr-missed h4 { color: #1A2B4C; margin: 0 0 10px; }
.pr-missed-q {
  border: 1px solid #f0c9c4; border-left: 4px solid #b42318; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px; background: #fffafa;
}
.pr-why { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6ccc8; }

/* ===== Recruit review of missed questions ===== */
.ot-taken { margin-top:26px; padding-top:14px; border-top:1px solid #e3e8ef; }
.ot-taken h4 { color:#1A2B4C; margin:0 0 8px; }
.ot-taken-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid #eef1f6; }
.ot-taken-row:last-child { border-bottom:none; }
.ot-taken-title { font-weight:600; color:#1A2B4C; flex:1 1 auto; }
.ot-rev-q { border:1px solid #f0c9c4; border-left:4px solid #b42318; border-radius:8px; padding:12px 14px; margin-bottom:12px; background:#fffafa; }
.ot-rev-stem { font-weight:600; color:#1A2B4C; margin-bottom:8px; }
.ot-rev-line { margin:3px 0; }
.ot-rev-yours { color:#b42318; }
.ot-rev-right { color:#1c7c3c; font-weight:600; }
.ot-rev-why { margin-top:8px; padding:8px 10px; background:#f4f7fb; border-radius:6px; color:#33405a; }
.ot-rev-why b { color:#1A2B4C; }

/* ===== Submitted Tests -- staff review screen ===== */
.st-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 16px; }
.st-filters label { font-weight:600; color:#1A2B4C; }
.st-detail-card { margin-top:22px; padding-top:16px; border-top:2px solid #1A2B4C; }
.st-detail-card h3 { color:#1A2B4C; margin:0 0 4px; }
.st-q { border:1px solid #d9e0ec; border-left:4px solid #cfd7e3; border-radius:8px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.st-q-wrong { border-left-color:#b42318; background:#fffafa; }
.st-q-out { border-left-color:#8a94a6; background:#f4f5f7; opacity:.75; }
.st-q-stem { font-weight:600; color:#1A2B4C; margin-bottom:6px; }
.st-q-line { margin:2px 0; }
.st-q-stats { margin-top:6px; font-size:.9rem; color:#5a6577; }
.st-q-flag { color:#b42318; font-weight:600; }
.st-q-act { margin-top:8px; }

/* Online Tests -- auto-build scope picker */
.ot-autob { margin-top:10px; }
.ot-scope { max-height:300px; overflow-y:auto; border:1px solid #e3e8ef; border-radius:8px; padding:8px; margin:8px 0; }
.ot-scope-block { margin-bottom:8px; }
.ot-scope-blk { display:block; }
.ot-scope-course { display:block; margin-left:22px; font-size:.9rem; padding:2px 0; }
.ot-autob-opts { margin:8px 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.ot-autob-opts input[type="number"] { width:70px; }

/* Exam-pool picker: group (tag) filter row */
.ot-pool-filter { margin:8px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ot-pool-filter select { max-width:280px; }

/* Print question pools: block / sub-block / group picker.
   One control per line, labels aligned in a fixed column. The selects size
   themselves to their longest option (width:auto) rather than being clipped by
   a fixed max-width, so a long block title stays readable. */
.ot-pe-row { margin:6px 0; display:flex; gap:10px; align-items:center; }
.ot-pe-lbl { flex:0 0 82px; }
.ot-pe-row select { width:auto; min-width:300px; max-width:100%; }
.ot-pe-actions { margin-top:12px; flex-wrap:wrap; }

.ot-del { color:#b42318; }

/* Question bank manager */
.qbm-add { margin:8px 0; }
.qbm-grp { background:#f2f5fa; }
.qbm-usage { font-size:10px; font-family:Arial,sans-serif; padding:1px 6px; border-radius:3px; color:#fff; text-transform:uppercase; }
.qbm-practice { background:#1A7F37; }
.qbm-exam { background:#1A2B4C; }

/* Optional-field marker and inline helper text. Used first on the internship
   point-of-contact phone (Migration 133), where the field stopped being
   mandatory -- a recruit who does not have the number should see plainly that
   blank is an acceptable answer rather than inventing one. */
.field-optional { font-weight:normal; color:#667085; font-size:12px; }
.field-help { margin:-4px 0 10px; color:#667085; font-size:12px; line-height:1.4; }

/* =========================================================================
   Contacts — unified directory (Migration 134).
   Column widths follow NAMED classes, never nth-child. Adding a column means
   adding its class here too; that is deliberate, and it is why the attendee
   and CLEE-student tables broke twice before this convention existed.
   ========================================================================= */
#panel-contacts { max-width: 1400px; }

.ct-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.ct-controls .ct-search { flex:1 1 380px; min-width:260px; }
.ct-controls select { width:auto; }

.ct-types { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:4px 0 10px; }
.ct-types label { display:inline-flex; align-items:center; gap:5px; font-weight:normal; margin:0; cursor:pointer; }
.ct-types input[type="checkbox"] { margin:0; }
.ct-linkbtn { background:none; border:none; color:#1A2B4C; text-decoration:underline; cursor:pointer; padding:0; font-size:13px; }

.ct-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 4px; }
.ct-actions-right { display:flex; gap:8px; }

#ct-add-form { margin:12px 0; border:1px solid #d8dce3; border-radius:8px; padding:12px 16px; background:#f8f9fb; }
.ct-form-grid { display:grid; grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr); gap:8px 12px; align-items:center; }
.ct-form-grid label { margin:0; text-align:right; font-size:13px; }
.ct-form-grid textarea { grid-column:span 3; }
@media (max-width: 900px) {
  .ct-form-grid { grid-template-columns:140px minmax(0,1fr); }
  .ct-form-grid textarea { grid-column:span 1; }
}

#ct-list .data-table { width:100%; min-width:1000px; table-layout:fixed; }
#ct-list .data-table th,
#ct-list .data-table td { padding-left:12px; padding-right:12px; vertical-align:top; }
/* Headers left-aligned to sit over their data, except the two centred columns.
   The default centred <th> read as a misalignment against left-aligned cells. */
#ct-list .data-table th { text-align:left; }
#ct-list .data-table th.ct-c-status { text-align:center; }
#ct-list .data-table th.ct-c-actions { text-align:right; }
#ct-list .data-table .ct-c-name    { width:19%; overflow-wrap:anywhere; }
#ct-list .data-table .ct-c-type    { width:11%; white-space:nowrap; }
#ct-list .data-table .ct-c-org     { width:19%; overflow-wrap:anywhere; }
#ct-list .data-table .ct-c-phone   { width:13%; white-space:nowrap; }
#ct-list .data-table .ct-c-email   { width:24%; overflow-wrap:anywhere; word-break:break-word; }
#ct-list .data-table .ct-c-status  { width:9%;  white-space:nowrap; text-align:center; }
#ct-list .data-table .ct-c-actions { width:5%;  white-space:nowrap; text-align:right; }

/* Source badges — the type is the thing you scan for, so give it a shape. */
.ct-badge { display:inline-block; font-size:10px; font-family:Arial,sans-serif; padding:2px 7px;
            border-radius:3px; color:#fff; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.ct-badge-company    { background:#6B4E9B; }
.ct-badge-recruit    { background:#1A2B4C; }
.ct-badge-instructor { background:#1A7F37; }
.ct-badge-clee       { background:#B54708; }

.ct-status-alumni   { color:#6941C6; font-weight:600; }
.ct-status-inactive { color:#98A2B3; }

#ct-detail { margin-top:20px; border-top:2px solid #e4e7ec; padding-top:14px; }
.ct-detail-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:8px 14px; align-items:center; max-width:760px; }
.ct-detail-grid label { margin:0; text-align:right; font-size:13px; }
.ct-detail-grid .ct-readonly { color:#475467; padding:6px 0; }
.ct-detail-sect { grid-column:span 2; margin:14px 0 2px; font-weight:600; border-bottom:1px solid #e4e7ec; padding-bottom:4px; }

/* The CALEA warning on a verified instructor. Amber, not red — this is a
   consequence to understand before saving, not an error. */
.ct-warning { margin:10px 0; padding:10px 14px; border:1px solid #F79009; border-left-width:4px;
              border-radius:6px; background:#FFFAEB; color:#93370D; max-width:760px; line-height:1.45; }
.ct-cat { font-size:11px; color:#667085; margin-top:3px; }

/* Contacts: collapsible letter groups, matching the CLEE Students directory. */
.ct-letter-group { border-bottom:1px solid #e4e7ec; }
.ct-letter-group > summary { cursor:pointer; font-size:1.05rem; padding:8px 4px; list-style-position:inside; }
.ct-letter-group > summary:hover { background:#f8f9fb; }

/* Manage CLEE Classes: start time, student count and the duplicate flag.
   Adding a start time is what makes two sessions of the same course on the same
   day distinguishable -- see cleeMarkDuplicates() in app.js. */
.clee-class-table .clee-c-time { white-space:nowrap; }
.clee-class-table .clee-blockcount { font-size:11px; }
.clee-class-table .clee-c-students { text-align:center; white-space:nowrap; }
.clee-class-table .clee-nostudents { color:#98A2B3; }

.clee-dup { display:inline-block; font-size:10px; font-family:Arial,sans-serif; padding:1px 6px;
            border-radius:3px; color:#fff; text-transform:uppercase; white-space:nowrap; vertical-align:1px; }
.clee-dup-exact { background:#b42318; }   /* same course, date, time AND instructor */
.clee-dup-maybe { background:#B54708; }   /* same course, date, instructor, but no time to compare */
.clee-class-table tr.clee-dup-row > td { background:#FFFBFA; }

/* =========================================================================
   Duplicate finder — shared by Manage Instructors and CLEE Students.
   Candidates only; the merge tools on each screen do the actual combining.
   ========================================================================= */
.dupfind-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
.dupfind-bar label { margin:0; font-weight:600; font-size:0.9rem; }
.dupfind-bar select { width:auto; }
.dupfind-bar input[type="text"] { flex:0 1 320px; }

.dupgrp { border:1px solid #d8dce3; border-left-width:4px; border-radius:8px; padding:10px 14px; margin:0 0 12px; }
.dupgrp-high     { border-left-color:#b42318; background:#FFFBFA; }
.dupgrp-probable { border-left-color:#B54708; background:#FFFCF5; }
.dupgrp-possible { border-left-color:#98A2B3; background:#FCFCFD; }

.dupgrp-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.dupgrp-conf { font-size:10px; font-family:Arial,sans-serif; padding:2px 7px; border-radius:3px;
               color:#fff; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.dupgrp-high .dupgrp-conf     { background:#b42318; }
.dupgrp-probable .dupgrp-conf { background:#B54708; }
.dupgrp-possible .dupgrp-conf { background:#667085; }
.dupgrp-why { color:#475467; font-size:13px; }
.dupgrp-large { color:#93370D; font-size:12px; font-style:italic; margin:4px 0 0; }

.dupgrp table { width:100%; border-collapse:collapse; font-size:13px; }
.dupgrp th { text-align:left; font-size:11px; text-transform:uppercase; color:#667085;
             border-bottom:1px solid #e4e7ec; padding:3px 8px 3px 0; white-space:nowrap; }
.dupgrp td { padding:5px 8px 5px 0; vertical-align:top; border-bottom:1px solid #f2f4f7; }
.dupgrp .dup-keep { font-weight:600; }
.dupgrp .dup-records { text-align:center; white-space:nowrap; }
.dupgrp .dup-empty { color:#98A2B3; }
.dupgrp-hint { margin:8px 0 0; font-size:12px; color:#475467; }
.dupgrp-conflicts { margin:4px 0 0; }
.dupgrp-conflict { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:3px 0; }
.dupgrp-clabel { flex:0 0 110px; font-size:12px; color:#475467; }
.dupgrp-conflict label { margin:0; font-weight:normal; font-size:13px; display:inline-flex;
                         align-items:center; gap:5px; cursor:pointer; }
.dupgrp-preview { margin-top:6px; }
.dupgrp-result { margin-left:8px; }
.dupgrp-notbtn { background:#fff; color:#475467; border:1px solid #d0d5dd; border-radius:6px;
                 padding:8px 14px; cursor:pointer; font-size:13px; }
.dupgrp-notbtn:hover:not(:disabled) { background:#f8f9fb; border-color:#98A2B3; }
.dupgrp-notbtn:disabled { background:#f2f4f7; color:#475467; border-color:#d0d5dd; cursor:not-allowed; }
.dupgrp .dup-include { margin:0; }

/* ===== Update Log (staff) ===================================================
   A running list of app changes, newest first. Entries are long, so the list is
   date + title with the write-up collapsed; the newest one opens by default. */

.ul-notice {
  background: #fff8e6;
  border: 1px solid #e6c86a;
  border-left: 4px solid #d99b1c;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
  color: #6b4a06;
}

/* A collapsible "add something" block. Used by the Equipment Inventory's Add an
   item form; the Update Log has no add form -- it writes itself. */
.add-details {
  border: 1px solid #d5deef;
  border-radius: 6px;
  background: #f7f9fc;
  padding: 0 14px;
  margin: 14px 0 18px;
}
.add-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: #1a2b4c;
  padding: 12px 0;
  list-style: revert;
}
.add-details[open] > summary { border-bottom: 1px solid #e2e8f2; margin-bottom: 12px; }
.add-details > form { padding-bottom: 14px; }

.ul-form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ul-form-date { flex: 0 0 190px; }
.ul-form-title { flex: 1 1 320px; min-width: 0; }
.ul-form-row input { width: 100%; box-sizing: border-box; }

#panel-updatelog textarea,
.ul-edit-box textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}

.ul-format-hint {
  font-size: 0.82rem;
  color: #475467;
  margin: 6px 0 0;
  line-height: 1.6;
}
.ul-format-hint code {
  background: #eef1f6;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.95em;
}

/* Toolbar: search on the left, expand/collapse pushed to the right */
.ul-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ul-search-label { font-weight: 600; margin: 0; }
.ul-toolbar input[type="search"] {
  flex: 1 1 240px;
  max-width: 380px;
  margin: 0;
}
.ul-toolbar-spacer { flex: 1 1 auto; }

/* A plain secondary button. Never disabled -- the global button:disabled style
   was unreadable, and a button that explains itself beats one that is greyed. */
.ul-plain-btn {
  background: #fff;
  color: #1a2b4c;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 7px 13px;
  cursor: pointer;
  font-size: 13px;
  margin: 0;
}
.ul-plain-btn:hover { background: #f2f5fa; border-color: #98a2b3; }

.ul-scope {
  font-size: 0.86rem;
  color: #475467;
  margin: 4px 0 14px;
}

.ul-entry {
  border: 1px solid #e2e6ed;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

.ul-entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #f7f9fc;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 12px 14px;
  cursor: pointer;
  color: #1a2b4c;
  font-size: 1rem;
}
.ul-entry-head:hover { background: #eef2f9; }
.ul-entry-head.ul-open { background: #eaf0fa; border-bottom: 1px solid #dde4f0; }
.ul-caret { flex: 0 0 14px; color: #667085; font-size: 0.85em; }
.ul-entry-date {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #475467;
  font-size: 0.86rem;
  white-space: nowrap;
}
.ul-entry-title { flex: 1 1 auto; font-weight: 600; }

.ul-entry-body { padding: 4px 18px 16px; }
.ul-entry-body p { line-height: 1.62; }
.ul-entry-body ul { line-height: 1.62; padding-left: 22px; }
.ul-entry-body li { margin-bottom: 4px; }
.ul-body-h {
  margin: 18px 0 6px;
  font-size: 1rem;
  color: #1a2b4c;
}
.ul-entry-body code {
  background: #eef1f6;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.92em;
  word-break: break-word;
}
.ul-entry-body > .ul-body-h:first-child { margin-top: 10px; }

.ul-edited {
  font-size: 0.82rem;
  color: #667085;
  font-style: italic;
}

.ul-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f4;
}
.ul-entry-actions button { margin: 0; }
.ul-edit-result { font-size: 0.85rem; }

.ul-edit-box { padding: 14px 18px 16px; }
.ul-edit-box label { display: block; }

@media (max-width: 640px) {
  .ul-entry-head { flex-wrap: wrap; }
  .ul-entry-date { flex-basis: 100%; margin-left: 24px; }
}

@media print {
  /* Printing the log should give the write-ups, not a row of collapsed bars. */
  .ul-toolbar, .ul-entry-actions, .ul-caret { display: none !important; }
  .ul-entry { break-inside: avoid; border-color: #999; }
  .ul-entry-head { background: #fff !important; }
}

/* ===== Equipment Inventory (staff) ==========================================
   Three categories in one table, each with its own columns, and an expandable
   detail row carrying the item's service / inspection log. */

.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.inv-toolbar input[type="search"] {
  flex: 1 1 260px;
  max-width: 420px;
  margin: 0;
}
.inv-toolbar select { margin: 0; width: auto; }

.inv-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 2px solid #dde4f0;
  width: 100%;
  padding-bottom: 0;
}
.inv-tab {
  background: #f4f6fa;
  color: #1a2b4c;
  border: 1px solid #dde4f0;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 9px 16px;
  margin: 0 0 -2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.inv-tab:hover { background: #eaeff8; }
.inv-tab-on {
  background: #fff;
  border-color: #dde4f0;
  border-bottom: 2px solid #fff;
  color: #1a2b4c;
}
.inv-count { font-weight: 400; color: #667085; font-size: 0.88em; }
.inv-tab-on .inv-count { color: #475467; }

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.inv-table th,
.inv-table td {
  border-bottom: 1px solid #e6e8ec;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.inv-table th {
  background: #f7f9fc;
  color: #1a2b4c;
  border-bottom: 2px solid #dde4f0;
  white-space: nowrap;
}
.inv-row { cursor: pointer; }
.inv-row:hover td { background: #f5f8fd; }
.inv-row:focus { outline: 2px solid #1a2b4c; outline-offset: -2px; }
.inv-row-open td { background: #eaf0fa; }
.inv-row-surplus td { color: #667085; font-style: italic; }

.inv-detail-row td { background: #fbfcfe; padding: 0; }
.inv-detail { padding: 14px 18px 18px; cursor: default; }
.inv-detail-title {
  margin: 16px 0 8px;
  font-size: 1rem;
  color: #1a2b4c;
}
.inv-detail > .inv-detail-title:first-child { margin-top: 4px; }
.inv-subhead {
  margin: 16px 0 6px;
  font-size: 0.92rem;
  color: #1a2b4c;
}

.inv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 22px;
  margin-bottom: 8px;
}
.inv-field { display: flex; gap: 8px; padding: 3px 0; }
.inv-field-label { flex: 0 0 150px; color: #475467; font-size: 0.88rem; }
.inv-field-value { flex: 1 1 auto; font-weight: 600; font-size: 0.9rem; word-break: break-word; }
.inv-notes {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
}

.inv-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: #fff;
}
.inv-log-table th,
.inv-log-table td {
  border: 1px solid #e6e8ec;
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.inv-log-table th { background: #f2f5fa; color: #1a2b4c; white-space: nowrap; }
.inv-log-table td:nth-child(3) { min-width: 240px; }
.inv-log-del { padding: 3px 9px !important; font-size: 12px !important; }

.inv-log-form,
.inv-edit-box,
.inv-initial-log {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 10px;
}
.inv-initial-log { background: #f7f9fc; }
.inv-log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 14px;
}
.inv-log-grid input,
.inv-log-grid select { width: 100%; box-sizing: border-box; }
#panel-inventory textarea,
.inv-edit-box textarea,
.inv-log-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.inv-edit-box input,
.inv-edit-box select,
.inv-edit-box textarea { max-width: 520px; }
.inv-edit-result, .inv-log-result { font-size: 0.85rem; }

@media (max-width: 820px) {
  /* The table stops being a table and becomes stacked rows -- a VIN and a plate
     number are unreadable squeezed into a phone-width column. */
  .inv-table thead { display: none; }
  .inv-table tr { display: block; border-bottom: 2px solid #dde4f0; }
  .inv-table td { display: block; border: 0; padding: 3px 10px; }
  .inv-table tbody td::before {
    content: attr(data-inv-head) ": ";
    color: #475467;
    font-size: 0.82rem;
  }
  .inv-detail-row td::before { content: ""; }
}

@media print {
  /* The page itself is not the report -- Print Inventory Report opens a clean one.
     If someone prints the page anyway, drop the controls. */
  .inv-toolbar, .inv-tabs, .add-details, .inv-log-form, .ul-entry-actions { display: none !important; }
  .inv-table { font-size: 0.72rem; }
  .inv-table tr { break-inside: avoid; }
}

/* ===========================================================================
   POST class-schedule sheets (Manage Recruit Classes)

   Two side-by-side blocks, one per sheet, each showing what the file will
   report before it is downloaded. Colour carries meaning here:
     amber  something is not ready yet, but nothing is wrong
     red    hours exist that the sheet has nowhere to put -- must be fixed
     grey   a note, for information
   =========================================================================== */
.ps-sheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
  /* The Manage Recruit Classes table is wide, and a full-width warning stretched
     across it is unreadable. Capped to a comfortable reading measure. */
  max-width: 1080px;
  /* The table this sits inside sets nowrap on its cells, which is right for a
     row of date fields and wrong for a paragraph -- without this every warning
     runs off the side of the page in one line. */
  white-space: normal;
}
.ps-sheet {
  border: 1px solid #dde4f0;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  /* A grid item will not shrink below its content's width unless told it may. */
  min-width: 0;
  overflow-wrap: break-word;
}
.ps-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ps-sheet-head strong { font-size: 1rem; }
/* The Beginning Class Report card carries two buttons -- the letter and the
   blank Sign-In sheet that goes in the envelope with it. */
.ps-btnrow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Three cards across on a wide screen, stacking as it narrows. */
.ps-letter { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .ps-sheets { grid-template-columns: repeat(3, minmax(320px, 1fr)); }
  .ps-letter { grid-column: auto; }
}
.ps-what { margin: 0 0 8px; font-size: 0.85rem; line-height: 1.35; }
/* NOT .muted -- that class is italic, and a panel of italic figures is hard to
   read. The short description above it is the only italic part. */
.ps-report { font-size: 0.85rem; color: #101828; font-style: normal; }
.ps-sub { color: #667085; }

.ps-line { display: flex; gap: 8px; padding: 1px 0; }
.ps-k { color: #475467; min-width: 9.5em; }
.ps-v { flex: 1; color: #101828; }
.ps-v code { font-size: 0.82rem; word-break: break-all; }

/* Amber: a sheet that is honest but not finished. Not an error -- generating an
   ending sheet mid-class is a normal thing to do. */
.ps-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #F79009;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fffaf0;
  color: #7a4b00;
  line-height: 1.35;
}

/* Red: delivered hours with nowhere on the sheet to report them. This one
   actually needs fixing before the file is sent. */
.ps-error {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid #b42318;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fff4f3;
  color: #7a1c14;
  line-height: 1.35;
}
.ps-error ul, .ps-warn ul { margin: 6px 0 6px 18px; padding: 0; }

.ps-note {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  color: #475467;
  line-height: 1.35;
}

.ps-owing { margin: 8px 0 0; }
.ps-owing summary { cursor: pointer; color: #475467; }
.ps-owing ul { margin: 6px 0 0 18px; padding: 0; }
.ps-owing li { padding: 1px 0; }

@media (max-width: 820px) {
  .ps-sheets { grid-template-columns: 1fr; }
  .ps-k { min-width: 0; font-weight: 600; }
  .ps-line { display: block; }
}

/* ---------------------------------------------------------------------------
   Schedule Instruction (staff): open dates and times, and the live conflict
   warning. Same availability engine the instructor Request Instruction screen
   uses -- see lib/class-availability.js.
   --------------------------------------------------------------------------- */

.log-avail {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid #dde4f0;
  border-radius: 6px;
  background: #f8fafc;
  /* This block sits inside a form whose labels/inputs are stacked full width.
     Its own content must be free to wrap rather than inherit anything nowrap. */
  white-space: normal;
  min-width: 0;
}

.log-avail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.log-avail-head button { margin: 0; }

.log-avail-status { color: #475467; }

.log-avail-note {
  margin: 8px 0 0;
  color: #475467;
  line-height: 1.35;
}

.log-avail-note:empty { display: none; }

/* Twenty open dates is a tall list, and Notes and Save Entry sit below it.
   Scroll the list inside the block rather than pushing the rest of the form off
   the bottom of the screen. */
#log-avail-list {
  margin-top: 4px;
  max-height: 440px;
  overflow-y: auto;
}

#log-avail-list:empty { display: none; }

.log-avail-day {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #dde4f0;
  border-radius: 6px;
  background: #fff;
  min-width: 0;
  overflow-wrap: break-word;
}

.log-avail-day-head { font-weight: 600; }

.log-avail-day-sub { color: #475467; font-weight: 400; }

.log-avail-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.log-avail-slot button { margin: 0; }

.log-avail-slot-time { font-variant-numeric: tabular-nums; }

.log-avail-more { margin: 10px 0 0; color: #475467; }

/* The live warning. Amber for "look at this before you save", red only for a
   flat collision with something already on the calendar. */
.log-conflict {
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 1px solid #F79009;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fffaf0;
  color: #7a4b00;
  line-height: 1.35;
  white-space: normal;
}

.log-conflict.log-conflict-clash {
  border-color: #b42318;
  background: #fff4f3;
  color: #7a1c14;
}

.log-conflict.log-conflict-clear {
  border-color: #12b76a;
  background: #f2fdf6;
  color: #085d3a;
}

.log-conflict ul { margin: 6px 0 0 18px; padding: 0; }
.log-conflict li { margin: 2px 0; }
.log-conflict-head { font-weight: 600; }
.log-conflict-day { margin-top: 6px; }

@media (max-width: 820px) {
  .log-avail-slot { display: block; }
  .log-avail-slot > * { margin-top: 4px; }
}

/* Quick Add on a CLEE block: "this instructor may already exist" warning.
   Amber rather than red -- a duplicate name is a caution, not an error, and
   "Add as a new person" stays available on it. */
.qa-dupe-warning {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #dc9a00;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fffaeb;
  color: #4a3200;
}
.qa-dupe-warning p { margin: 0 0 6px; }
.qa-dupe-warning p:last-of-type { margin-bottom: 8px; }
.qa-dupe-warning button { margin-left: 4px; }


/* Class rank on the Edit Recruit form -- "Class rank [ 18 ] of [ 20 ]".
   Two narrow number inputs on one line rather than two full-width fields, so the
   pair reads as the single printed figure it is. `form input` is width:100% by
   default, hence the override. Deliberately understated: a rank is on file for
   roughly 27 recruits out of 858 and blank is the normal state, so this must not
   pull the eye down the form. */
.rank-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.rank-input-row input[type="number"] {
  width: 90px;
  flex: 0 0 90px;
  margin-top: 0;
}
form label.rank-of-label {
  margin-top: 0;
  font-weight: normal;
  color: #667085;
  flex: 0 0 auto;
}

/* Field-level validation message, shown under the input it belongs to. */
.field-error {
  margin-top: 6px;
  color: #b42318;
  font-size: 0.9rem;
}

/* ===========================================================================
   Community Service Opportunities (Migration 336) -- the recruit sign-up board.
   Distinct from Log Internship Hours, which records hours already worked.
   =========================================================================== */

.cs-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 16px;
  max-width: 900px;
}
.cs-form-grid label { display: block; margin: 0; font-size: 13px; font-weight: 600; color: #1a2b4c; }
.cs-form-grid input, .cs-form-grid textarea { width: 100%; box-sizing: border-box; font-weight: 400; }
.cs-hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #666; line-height: 1.35; }
.cs-check { display: block; margin-top: 8px; font-size: 13px; }
.cs-check input { margin-right: 6px; }

/* The standing warning on the recruit board. Amber, not red: this is the rule,
   not an error the recruit has made. */
.cs-commit-warning {
  margin: 10px 0 16px;
  padding: 10px 14px;
  border: 1px solid #f0c36d;
  background: #fff8e6;
  border-radius: 8px;
  line-height: 1.5;
}

/* One event on the board */
.cs-card {
  border: 1px solid #ccd3e0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.cs-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.cs-card-title { font-weight: 700; color: #1a2b4c; font-size: 1.05rem; }
.cs-card-host { color: #555; }
.cs-card-rows { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; }
.cs-card-rows .cs-label { display: inline-block; min-width: 92px; color: #666; }
.cs-card-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Slot counter. Full turns red so "no point clicking" reads at a glance. */
.cs-slots { font-weight: 700; }
.cs-slots.cs-open { color: #146c2e; }
.cs-slots.cs-full { color: #b00020; }

.cs-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cs-badge-signed { background: #e3f2e8; color: #146c2e; border: 1px solid #a6d4b6; }
.cs-badge-full   { background: #fdeaea; color: #b00020; border: 1px solid #e0a3a3; }
.cs-badge-closed { background: #eceff4; color: #555;    border: 1px solid #c8cfda; }
.cs-badge-draft  { background: #fff8e6; color: #8a6100; border: 1px solid #f0c36d; }
.cs-badge-past   { background: #eceff4; color: #555;    border: 1px solid #c8cfda; }

/* The recruit dashboard reminder: commitments already made, never an advert
   for new openings. */
.cs-commitments {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #a6c8e8;
  background: #eef5fc;
  border-radius: 8px;
  line-height: 1.5;
}
.cs-commitments h4 { margin: 0 0 6px; color: #1a2b4c; font-size: 0.95rem; }
.cs-commitments ul { margin: 0; padding-left: 20px; }
.cs-commitments li { margin: 3px 0; }
.cs-commitments .cs-when { font-weight: 700; }

/* Staff list and roster */
.cs-staff-row {
  border: 1px solid #ccd3e0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.cs-staff-row.cs-row-past { background: #f7f8fa; }
.cs-staff-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-roster-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 6px; }
.cs-roster-table th, .cs-roster-table td { border: 1px solid #ccd3e0; padding: 6px 10px; text-align: left; }
.cs-roster-table th { background: #eef1f6; color: #1a2b4c; }
.cs-roster-table tr.cs-removed td { background: #f7f8fa; color: #888; text-decoration: line-through; }
.cs-roster-table tr.cs-removed td.cs-removed-note { text-decoration: none; color: #666; }
.cs-email-classes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.cs-email-classes label { font-size: 0.9rem; }

/* Staff "add a recruit to this event" -- for entering sign-ups taken outside
   the app. Sits under the roster table (Migration 336 feature, 20 Aug 2026). */
.cs-add-wrap {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed #ccd3e0;
  border-radius: 8px;
  background: #f7f9fc;
}
.cs-add-title { margin: 0 0 2px; font-size: 0.9rem; color: #1a2b4c; }
.cs-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-add-row select { max-width: 340px; }

/* ⚠ These fields are NOT inside a <form>, so the app's
   `form input, form select, form textarea { width: 100% }` rule never reached
   them and they were rendering at the browser's default ~20 characters. The
   Notes and Message boxes in particular were unreadable. Scoped to the two
   Community Service panels so nothing else moves. */
#panel-csopportunitiesstaff input[type="text"],
#panel-csopportunitiesstaff input[type="url"],
#panel-csopportunitiesstaff input[type="date"],
#panel-csopportunitiesstaff input[type="time"],
#panel-csopportunitiesstaff input[type="number"],
#panel-csopportunitiesstaff select,
#panel-csopportunitiesstaff textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 400;
}
/* Checkboxes must keep their natural size. */
#panel-csopportunitiesstaff input[type="checkbox"] { width: auto; margin-top: 0; }
/* The class/recruit pickers sit side by side and should not each take the row. */
#panel-csopportunitiesstaff .cs-add-row select { width: auto; min-width: 200px; max-width: 340px; }

/* The announcement email needs room. Wider than the standard staff panel, and
   the body is monospaced so the aligned "Event: / Host: / Date:" block in the
   draft lines up on screen the way it will in the recruit's inbox -- in a
   proportional font those columns look ragged and the message reads as broken.
   Same treatment as the Prospects email box. */
#panel-csopportunitiesstaff { max-width: 1200px; }
#csstaff-email-body {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 340px;
}
#csstaff-email-subject { font-size: 0.95rem; }

/* Shown when the form was opened by duplicating an existing event, so it is
   never a mystery why the fields arrived filled in. */
.cs-dup-banner {
  margin: 0 0 10px;
  padding: 9px 13px;
  border: 1px solid #a6c8e8;
  background: #eef5fc;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Year filter above the staff event list. */
.cs-year-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.cs-year-row label { font-size: 0.9rem; font-weight: 600; color: #1a2b4c; margin: 0; }
#panel-csopportunitiesstaff .cs-year-row select { width: auto; min-width: 150px; margin-top: 0; }
.cs-year-count { font-size: 0.85rem; color: #666; }

/* ---- A question's picture ---------------------------------------------- */
/*
   ⚠ THE PICTURE IS THE QUESTION. "Identify part #7" cannot be answered without
   it, so this is sized to be READ, not glanced at: big enough on a phone that
   a recruit can tell callout 11 from callout 13 without pinching.

   max-width is 100% of the card, so it shrinks on a narrow screen instead of
   forcing the page to scroll sideways.
*/
.q-img { margin: 10px 0 12px; }
/* The picture is a button so it can be opened full screen -- stripped back to
   look like a plain image until you hover or focus it. */
.q-img-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.q-img img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 420px;
  border: 1px solid #d6dbe4;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}
.q-img-btn:hover img,
.q-img-btn:focus-visible img { border-color: #1A2B4C; }
.q-img-btn:focus-visible { outline: 2px solid #1A2B4C; outline-offset: 2px; }
.q-img-hint {
  display: block;
  font-size: .78rem;
  color: #667085;
  margin-top: 4px;
}

/* Full-screen view. The recruit's own pinch-zoom works on top of this, which is
   what makes a 16-callout diagram usable on a phone. */
.q-img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(16, 20, 28, .92);
  padding: 16px;
  overflow: auto;
  text-align: center;
}
.q-img-lightbox.open { display: block; }
.q-img-lightbox img {
  max-width: 100%;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  margin-top: 44px;
}
.q-img-close {
  position: fixed;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: #1A2B4C;
  cursor: pointer;
}
/* Thumbnail, for the dense staff tables where a full diagram would break the
   row. Staff only ever need to see WHICH diagram was on the question. */
.q-img-sm { margin: 6px 0 2px; }
.q-img-sm img { max-height: 110px; padding: 2px; }

.sa-qb-imghint { font-size: .82rem; margin: 2px 0 10px; }
.sa-qb-imghint code { background: #eef1f6; padding: 1px 4px; border-radius: 3px; }

@media (max-width: 600px) {
  .q-img img { max-height: 300px; }
}

/* ---- A recruit's own study guide -------------------------------------- */
/*
   Reading material, not a test. Everything here is deliberately calmer than the
   quiz screens: no radio buttons, no submit, and the correct answer marked in
   the same green the printed answer key uses.
*/
.pg-blk { margin: 22px 0 6px; color: #1A2B4C; font-size: 1rem; }
.pg-group { border: 1px solid #e3e8ef; border-radius: 6px; overflow: hidden; }
.pg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eef1f6;
}
.pg-row:last-child { border-bottom: 0; }
.pg-row-main { flex: 1 1 260px; min-width: 0; }
.pg-row-act { flex: 0 0 auto; white-space: nowrap; }

.pg-q { padding: 14px 0; border-bottom: 1px solid #eef1f6; }
.pg-q:last-child { border-bottom: 0; }
.pg-opt { margin: 3px 0 3px 26px; }
/* The answer, marked the way the printed key marks it. */
.pg-opt-right { color: #1A7F37; font-weight: 600; }
.pg-why { margin: 6px 0 0 26px; font-size: .88rem; color: #444; font-style: italic; }
/* What they put last time. Never styled as a grade -- it is a starting point
   for revision, and a recruit who got it wrong is not being marked down here. */
.pg-mine {
  margin: 6px 0 0 26px;
  font-size: .85rem;
  padding: 4px 10px;
  border-left: 3px solid #c7ced9;
  background: #f6f7f9;
}
.pg-mine-ok { border-left-color: #1A7F37; }
.pg-mine-no { border-left-color: #9A4A0C; }

/* ===== Attendance Record (recruit's own screen, and the staff copy) =====

   A recruit's own class dates, printable for a sponsoring agency or a
   prospective employer. Six columns at the default panel width, so the table
   scrolls inside its own box on a phone rather than pushing the panel wide.

   The two exception rows are tinted rather than colored: an employer reads this
   sheet, and a wall of red would make an excused half-day look like a discipline
   record. Absent is the darker of the two, partial the lighter. */
#mya-list,
#rat-list { overflow-x: auto; }
.mya-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .88rem;
}
.mya-table th,
.mya-table td {
  border: 1px solid #dfe3ea;
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.mya-table th {
  background: #eef1f6;
  color: #1a2b4c;
  white-space: nowrap;
}
.mya-table tr.mya-partial td { background: #fdf6e8; }
.mya-table tr.mya-absent  td { background: #fbeceb; }

/* The closing entry for a recruit who left part-way through. One line, not a
   row per day -- and deliberately not tinted like an absence, because leaving
   the academy is a change of status, not a day they missed. */
.mya-table tr.mya-separation td {
  background: #f2f4f8;
  font-weight: 600;
  color: #1a2b4c;
}