/* TRELLAN: the continuing-education screens. Report 258.

   Boards CE and CE-Phone. Decision 8: the CE dashboard keeps R1's
   operations lead's layout; this restyles it only. Scoped to `.evce`
   (ce/index.html) and the dashboard's own `cedash__*` classes. */

.cedash__h {
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 720px) { .cedash__h { font-size: 19px; } }
/* The caps heading and buttons are wider than the old words: let the card
   shrink inside its flex parent so a phone never scrolls sideways. */
.ce-owed > .cedash { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cedash .ui-btn { white-space: normal; text-align: center; }
/* Phone tiles, as the CE-Phone board: two columns, the words take the
   whole tile (no icon), the tick sits in the corner, words never break. */
@media (max-width: 720px) {
  .cedash__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cedash__tile { min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 12px 12px 10px; }
  .cedash__tile-ico { display: none; }
  .cedash__tile-check { position: absolute; top: 10px; right: 10px; font-size: 18px; }
  .cedash__tile--done .cedash__tile-text { padding-right: 22px; }
  .cedash__tile-text, .cedash__tile-name, .cedash__tile-detail { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .cedash__tile-name { font-size: 14px; }
}
@media (max-width: 360px) { .cedash__tiles { grid-template-columns: minmax(0, 1fr); } }

/* "Your courses" is the page's second heading. */
.evce .ce-courses__head .of-group-label {
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.evce .ce-approved-total { color: var(--gray); }

/* The course table: the shared table pattern. */
.evce .ce-table thead th {
  background: #FFFFFF; border-bottom: 1px solid var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.evce .ce-th__sort { padding: 14px 16px; }
.evce .ce-th__sort.is-on, .evce .ce-th__sort:hover { color: var(--ink); }
.evce .ce-th__sort.is-on .ce-th__arrow { color: var(--ink); }
.evce .ce-table td { color: var(--ink); border-bottom-color: var(--hairline); }
/* The 56 px row is a desktop row; a phone row is the two-line grid of
   of-progress.css and keeps its own padding. */
@media (min-width: 721px) {
  .evce .ce-table td { padding: 0 16px; height: 56px; font-size: 15px; }
  .evce .ce-detail > td { height: auto; padding: 0 16px 16px; }
}
@media (max-width: 720px) {
  /* The row is a grid: its own rule is on the row, not the first cell. */
  .evce .ce-row--sent-back > td:first-child { box-shadow: none; }
}
.evce .ce-course__name { font-weight: 400; color: var(--ink); }
.evce .ce-td--date, .evce .ce-td--number, .evce .ce-td--category { color: var(--gray); }
.evce .ce-td--date, .evce .ce-td--hours { font-variant-numeric: tabular-nums; }
.evce .ce-row:hover > td { background: var(--mist); }
.evce .ce-row--sent-back > td { background: #FFFBF9; }
.evce .ce-row--sent-back > td:first-child, .evce .ce-detail.ce-row--sent-back > td { box-shadow: inset 3px 0 0 var(--alert-dot); }
.evce .ce-detail > td { background: #FFFFFF; }
.evce .ce-toggle:hover { background: var(--mist); }
.evce .ce-total th, .evce .ce-total td { background: var(--mist); color: var(--ink); font-weight: 600; border-top: 1px solid var(--hairline); }

/* ══ Report 260: the rest of the CE area ═══════════════════════════════
   Boards in qa/by-page.json "ce": add, edit, delete, history, the
   approved-course list, compliance, other compliance, requirements, review
   one course, auto-approved, and the three requests staff decide (license
   change, PM request, remove a license). Every page carries `.tr-ce` on
   its `ui-page`. Look only. */

/* The page head. `.ui-page-head h1` is 600 in components.css; Trellan's
   heading is Poppins 300 caps. The back link is Leaf caps, as the boards. */
.ui-page.tr-ce .ui-page-head h1, .ui-page.tr-ce .ui-title { font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.ui-page.tr-ce .ui-back, .ui-page.tr-ce .of-head__back {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--leaf);
  text-decoration: none; gap: 6px;
}
.ui-page.tr-ce .ui-back:hover, .ui-page.tr-ce .of-head__back:hover { color: var(--leaf-deep); text-decoration: underline; }
.ui-page.tr-ce .ui-back .ms, .ui-page.tr-ce .of-head__back .ms { font-size: 14px; letter-spacing: 0; }
.ui-page.tr-ce .ui-page-head__sub, .ui-page.tr-ce .of-head__line { color: var(--gray); }

/* A narrow page (a form, a question) is one 950 px column, centred. */
.ui-page.tr-ce.ui-page--narrow > *, .ui-page.tr-ce.rp > * { max-width: 950px; margin-left: auto; margin-right: auto; }
.ui-page.tr-ce.rp { display: block; }
.ui-page.tr-ce.rp > * + * { margin-top: 20px; }

/* Field labels: 11 px caps over the field. A label that WRAPS its field
   (`.prof-grid`, `.lic-grid`, `.ev-desc-label`) has its words caps and
   its notes in sentence case again. A check box's label stays a sentence. */
.ui-page.tr-ce .prof-grid > label, .ui-page.tr-ce .lic-grid > label, .ui-page.tr-ce label.ev-desc-label,
.ui-page.tr-ce .ui-field > label, .ui-page.tr-ce .field > label, .ui-page.tr-ce .req-field__label,
.ui-page.tr-ce .ce-console-search > .ui-label, .ui-page.tr-ce .course-search .ui-label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.ui-page.tr-ce .prof-grid > label > *, .ui-page.tr-ce .lic-grid > label > *, .ui-page.tr-ce label.ev-desc-label > * {
  font-family: var(--font-sans); letter-spacing: 0; text-transform: none;
}
.ui-page.tr-ce .prof-grid > label > .field-note { font-size: 11px; color: var(--gray); }
.ui-page.tr-ce .prof-readonly dt, .ui-page.tr-ce .of-facts dt {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.ui-page.tr-ce .prof-readonly dd, .ui-page.tr-ce .of-facts dd { font-size: 15px; color: var(--ink); }

/* Card titles: Poppins 300 caps (the boards' "WHERE IT STANDS"). */
.ui-page.tr-ce .card-title, .ui-page.tr-ce .lic-head > .lic-name:only-child,
.ui-page.tr-ce section.ui-card:not(.cr-card) > .lic-head:first-child > .lic-name {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.ui-page.tr-ce .ui-card, .ui-page.tr-ce .rp-card { padding: 24px; }

/* Status words: the square pill with its 8 px dot (trellan.css 5.4). The
   CE sheets hid the dot; the boards show it. */
.ui-page.tr-ce .ce-state, .ui-page.tr-ce .lic-expiry, .ui-page.tr-ce .pill {
  height: auto; min-height: 24px; padding: 4px 10px; gap: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.2;
}
.ui-page.tr-ce .ce-state::before, .ui-page.tr-ce .lic-expiry::before, .ui-page.tr-ce .pill::before {
  display: block; content: ""; width: 8px; height: 8px; flex: none; background: currentColor;
}
.ui-page.tr-ce .pill { display: inline-flex; align-items: center; }
.ui-page.tr-ce .pill--warn { background: var(--warn-bg); color: var(--warn-fg); }
.ui-page.tr-ce .ce-unmatched, .ui-page.tr-ce .ce-rejected { background: var(--alert-bg); color: var(--alert-fg); }

/* Tables in this area: caps headers on white with the ink rule (some
   sheets turned the sort links back to sentence case). */
.ui-page.tr-ce .ui-table th, .ui-page.tr-ce .ui-table th a, .ui-page.tr-ce .ui-table th button {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray); background: #FFFFFF;
}
.ui-page.tr-ce .ui-table thead th { border-bottom: 1px solid var(--ink); }
@media (min-width: 721px) { .ui-page.tr-ce .ui-table td { padding-top: 14px; padding-bottom: 14px; } }
.ui-page.tr-ce .ui-table__link { font-weight: 600; color: var(--ink); }
/* A name never breaks between first and last name when it fits. */
.ui-page.tr-ce .cc-table td:first-child, .ui-page.tr-ce .ce-items-table td:first-child { min-width: 150px; }
.ui-page.tr-ce .cc-table .ui-table__link { white-space: nowrap; }

/* Notes: a Leaf rule on Mist (the boards' info box). */
.ui-page.tr-ce .ce-reason-box, .ui-page.tr-ce .co > .ce-reason, .ui-page.tr-ce .co .co-note { border-left: 3px solid var(--green); background: var(--mist); }

/* ── Fix this course (ce/edit.html) ─────────────────────────────────── */
.ui-page.tr-ce .ce-returned { background: #FFFBF9; box-shadow: inset 3px 0 0 var(--alert-dot); border-color: var(--hairline); }
.ui-page.tr-ce .ce-returned .ui-eyebrow { margin: 0 0 8px; }
.ui-page.tr-ce .ce-returned .ce-reason strong { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--ink); }
@media (min-width: 721px) {
  .ui-page.tr-ce .prof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .ui-page.tr-ce .prof-grid > .ce-edit__wide, .ui-page.tr-ce .prof-grid > .ce-add__wide { grid-column: 1 / -1; }
}
.ui-page.tr-ce .lic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Delete this course? (ce/delete.html) ───────────────────────────── */
.ui-page.tr-ce .ce-delete__facts { margin: 0 0 16px; }

/* ── The course history (ce/history.html) ───────────────────────────── */
.ui-page.tr-ce .ce-hist__who { font-weight: 600; color: var(--ink); }
.ui-page.tr-ce .ce-hist__note { border-left: 1px solid var(--hairline); padding-left: 10px; color: var(--ink); }

/* ── Other compliance (ce/items.html): the tiles as the board ───────────
   White, a 3 px top rule in the tile's tone, the chosen one an ink edge. */
.ui-page.tr-ce .ce-tallies { gap: 12px; }
.ui-page.tr-ce .ce-tally {
  background: #FFFFFF; color: var(--charcoal); border: 1px solid var(--hairline);
  border-top: 3px solid var(--stone); min-width: 130px; padding: 12px 14px; filter: none;
}
.ui-page.tr-ce .ce-tally strong { font-family: var(--font-display); font-weight: 300; font-size: 26px; color: var(--ink); }
.ui-page.tr-ce .ce-tally--short { border-top-color: var(--alert-dot); }
.ui-page.tr-ce .ce-tally--unknown { border-top-color: var(--gold); }
.ui-page.tr-ce .ce-tally--met { border-top-color: var(--green); }
.ui-page.tr-ce a.ce-tally:hover { background: var(--mist); filter: none; }
.ui-page.tr-ce a.ce-tally.is-active { border: 2px solid var(--ink); border-top-width: 3px; box-shadow: none; outline: 0; }

/* ── Review one course (ce/review.html, item page) ──────────────────── */
.ui-page.tr-ce.cr-one .cr-card .lic-head .lic-name { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ui-page.tr-ce .ce-decide { padding-top: 16px; border-top: 1px solid var(--hairline); }
.ui-page.tr-ce .ce-decide .of-danger { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* ── License change and PM request (profile/*.html, staff) ──────────────
   The comparison table: caps row labels, the changed value on Gold. */
.ui-page.tr-ce .rp-card .grid { width: 100%; border-collapse: collapse; }
.ui-page.tr-ce .rp-card .grid th, .ui-page.tr-ce .rp-card .grid td { padding: 14px 10px; border-bottom: 1px solid var(--hairline); text-align: left; }
.ui-page.tr-ce .rp-card .grid th {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.ui-page.tr-ce .rp-card .grid thead th { border-bottom: 1px solid var(--ink); }
.ui-page.tr-ce .rp-card .grid thead th:last-child { color: var(--ink); }
.ui-page.tr-ce .rp-card .grid td { font-size: 15px; color: var(--ink); }
.ui-page.tr-ce .rp-card .grid td:has(.pill--warn), .ui-page.tr-ce .rp-card .grid td[data-label="Asks for"] { background: var(--warn-bg); }
.ui-page.tr-ce .rp-card .field > label { display: block; margin: 18px 0 8px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.ui-page.tr-ce .rp-card .lic-actions { margin-top: 14px; }
.ui-page.tr-ce .pm-licenses { padding-left: 0; list-style: none; }

/* ── Remove a license (profile/delete_license.html) ─────────────────── */
.ui-page.tr-ce [data-delete-consequence] { position: relative; padding-left: 18px; color: var(--charcoal); }
.ui-page.tr-ce [data-delete-consequence]::before { content: ""; position: absolute; left: 4px; top: .6em; width: 5px; height: 5px; background: var(--charcoal); }
.ui-page.tr-ce [data-remove-needs-confirm] { border-left: 3px solid var(--green); background: var(--mist); padding: 12px 16px; color: var(--ink); }
.ui-page.tr-ce.rp .lic-item { background: var(--mist); border: 1px solid var(--hairline); padding: 12px 14px; }
.ui-page.tr-ce.rp .lic-name { font-weight: 600; color: var(--ink); }

/* ── NM's requirements (ce/requirement.html) ────────────────────────── */
.ui-page.tr-ce .ofs-req .of-facts, .ui-page.tr-ce.ofs-req .of-facts { background: var(--mist); border-color: var(--mist); }

/* Phone: nothing in these pages is wider than the window; a label never
   pushes its field past the edge. */
@media (max-width: 720px) {
  .ui-page.tr-ce .req-part__hours, .ui-page.tr-ce .req-field__label { min-width: 0; overflow-wrap: normal; }
  .ui-page.tr-ce .req-part, .ui-page.tr-ce .req-field { min-width: 0; max-width: 100%; }
  .ui-page.tr-ce .ui-card, .ui-page.tr-ce .rp-card { padding: 16px; }
  .ui-page.tr-ce .lic-actions .ui-btn--commit { flex: 1 1 100%; }
  .ui-page.tr-ce .ce-tally { min-width: 0; }
}

/* Other compliance: a lapsed row is pinned (the Problem rule and ground),
   its word the Problem pair; dates read left, as the board. */
.ui-page.tr-ce tr:has([data-standing="lapsed"]) > td { background: #FFFBF9; }
.ui-page.tr-ce tr:has([data-standing="lapsed"]) > td:first-child { box-shadow: inset 3px 0 0 var(--alert-dot); }
.ui-page.tr-ce [data-standing="lapsed"] { background: var(--alert-bg); color: var(--alert-fg); }
.ui-page.tr-ce [data-compliance-row] .ui-table__num { text-align: left; }
.ui-page.tr-ce [data-compliance-row] .ui-table__link, .ui-page.tr-ce .cc-table .ui-table__link { font-weight: 500; }
/* "What goes with it" on Remove a license is a label, not a title. */
.ui-page.tr-ce.rp .rp-card > .card-title {
  font-weight: 500; font-size: 11px; letter-spacing: 2.4px; color: var(--gray);
}

/* NM's requirements: "The named minimums" is a label over an ink rule;
   "Add a named minimum" and its fields sit in one Mist box, four across. */
.ui-page.tr-ce .req-subhead {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
  margin: 12px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.ui-page.tr-ce .req-subhead:has(+ [data-part-add]) {
  margin-top: 16px; padding: 16px 16px 4px; border-bottom: 0; background: var(--mist); color: var(--ink);
}
.ui-page.tr-ce .of-section .req-fields[data-part-add] { background: var(--mist); padding: 8px 16px 16px; }
@media (min-width: 900px) {
  .ui-page.tr-ce .of-section .req-fields[data-part-add] { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
}
.ui-page.tr-ce .req-fields[data-part-add] + .req-note { background: var(--mist); margin-top: 0; padding: 0 16px 16px; }
.ui-page.tr-ce .req-part__label strong, .ui-page.tr-ce .req-part__label > :first-child { font-weight: 600; color: var(--ink); }
.ui-page.tr-ce .req-part__hours input[type="number"], .ui-page.tr-ce .req-part__hours .ui-input { text-align: right; }
@media (max-width: 720px) {
  .ui-page.tr-ce .lic-actions > .ui-btn--secondary { flex: 1 1 100%; }
}
@media (max-width: 720px) {
  /* Tiles two across, as the phone board. */
  .ui-page.tr-ce .ce-tallies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* A phone row is a block: the Problem rule goes on the row, not a cell. */
  .ui-page.tr-ce tr:has([data-standing="lapsed"]) > td:first-child { box-shadow: none; }
  .ui-page.tr-ce tr:has([data-standing="lapsed"]) { box-shadow: inset 3px 0 0 var(--alert-dot); background: #FFFBF9; }
  /* A named minimum: its name across the row, the hours and Remove under it. */
  .ui-page.tr-ce .req-part { grid-template-columns: 120px auto; justify-content: start; }
  .ui-page.tr-ce .req-part > .req-part__label { grid-column: 1 / -1; }
}