/* ═══ Admin: Student Area (AdminStudentArea.vue) ═══
   The staff side of the students' portal: three tabs - the announcements
   board, the two editable copy blocks, and the portal ACCOUNTS list
   (src/components/admin/studentArea/StudentAccountsPanel.vue, `.sta-acc-*`).
   English LTR page inside the admin shell; the generic kit (.admin-table,
   .form-*, .btn, .modal, .toast, .course-filter-tab*) lives in admin.css -
   this file carries only what is specific to this page.

   It also styles ONE class used in AdminCourseCohorts.vue: the attendance
   tab's `.cohort-badge--self` badge (a mark the student reported themselves
   from the student area). It lives here rather than in admin-cohorts.css
   because it is part of this feature, and .cohort-badge in admin.css already
   supplies the shape - this rule only adds the colours. */

/* ── Page sections ──────────────────────────────────────────────────── */

.sta-section {
  margin-bottom: 2rem;
}

/* ── Tab strip ──────────────────────────────────────────────────────── */

/* `.course-filter-tabs` is inline-flex with no wrap of its own, so without
   this the tabs force a horizontal scrollbar at phone widths. Same call as
   .stg-tabs and .pay-tabs. */
.sta-tabs {
  margin-bottom: var(--space-md, 16px);
  flex-wrap: wrap;
  max-width: 100%;
}

/* One quiet sentence under a section title saying what the section is. */
.sta-hint {
  margin: 0.25rem 0 1rem;
  font-size: 0.85rem;
  color: #6b6c78;
}

/* ── Announcements table ────────────────────────────────────────────── */

/* A hidden announcement stays listed (that is the point of the toggle) but
   reads as retired at a glance. */
.sta-row--hidden td {
  opacity: 0.55;
}

/* Title cell: the title on top, the first lines of the body under it. */
.sta-cell-title {
  max-width: 380px;
}

.sta-body-preview {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6b6c78;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.sta-cell-published {
  white-space: nowrap;
}

.sta-col-visible,
.sta-col-actions {
  white-space: nowrap;
}

/* The visibility toggle: a pill that states the CURRENT fact and flips it on
   press. Green = students see it, grey = they do not. */
.sta-visible-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}

.sta-visible-toggle--on {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.sta-visible-toggle--off {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #6b7280;
}

.sta-visible-toggle:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ── Announcement modal ─────────────────────────────────────────────── */

.sta-modal-body {
  resize: vertical;
  min-height: 120px;
  font: inherit;
  line-height: 1.4;
}

/* Publish moment: a date input beside a time input, never one datetime-local
   (a datetime-local reports empty until every segment is filled, silently
   discarding a date typed without an hour). Mirrors .cohort-datetime. */
.sta-datetime {
  display: flex;
  gap: 0.5rem;
}

.sta-datetime .sta-dt-date {
  flex: 1 1 auto;
}

.sta-datetime .sta-dt-time {
  flex: 0 0 108px;
}

/* ── Content blocks ─────────────────────────────────────────────────── */

.sta-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.sta-content-block {
  display: flex;
  flex-direction: column;
}

.sta-content-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The saved / dirty statement. Quiet when everything is saved; amber the
   moment the draft differs from what students would currently read. */
.sta-content-status {
  font-size: 0.75rem;
  color: #6b6c78;
}

.sta-content-status--dirty {
  color: #b45309;
  font-weight: 600;
}

.sta-content-textarea {
  resize: vertical;
  min-height: 160px;
  font: inherit;
  line-height: 1.45;
}

.sta-content-actions {
  margin-top: 0.6rem;
  display: flex;
  justify-content: flex-end;
}

/* ═══ Accounts tab (StudentAccountsPanel.vue) ════════════════════════ */

/* The lede that says what the table is, and - just as important - what it is
   not. A person can owe money under an email that has no portal account, so
   this is never a debtors list. */
.sta-acc-lede {
  max-width: 74ch;
}

.sta-acc-segments {
  margin-bottom: var(--space-md, 16px);
  flex-wrap: wrap;
  max-width: 100%;
}

/* ── Toolbar and filters ────────────────────────────────────────────── */

.sta-acc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* .form-input carries `direction: rtl; text-align: right` as a DIRECT
   declaration (admin.css), and a direct declaration beats the LTR the admin
   content region hands down - so every text field on an English admin screen
   renders right-aligned unless its page says otherwise. Scoped to this panel's
   own search box on purpose: the announcement title/body/audience fields on the
   sibling tabs have the same latent issue and are deliberately left alone, so
   that fix stays a visible change somebody chose to make. */
.sta-acc-search .form-input {
  direction: ltr;
  text-align: left;
}

.sta-acc-search input {
  width: 260px;
}

.sta-acc-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}

.sta-acc-facet-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sta-acc-facet-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a93a3;
  margin-right: 0.15rem;
}

/* A filter pill printing its own FACET count: how many rows pressing it would
   show, computed with its own dimension dropped. Pressing an active pill
   releases it. */
.sta-acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #e3e8f0;
  border-radius: 999px;
  background: #fff;
  color: #4a5261;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sta-acc-pill:hover {
  border-color: #c9d4e4;
  background: #f7f9fc;
}

.sta-acc-pill.is-on {
  background: #eef5ff;
  border-color: #b6d3f7;
  color: #0b57a4;
}

.sta-acc-pill-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a93a3;
}

.sta-acc-pill.is-on .sta-acc-pill-count {
  color: #0b57a4;
}

/* The one filter that names a problem rather than a category. Locked-out rows
   are the support calls that have not happened yet, so its pill carries the
   same amber the row does. */
.sta-acc-pill--alarm.is-on {
  background: #fff5e8;
  border-color: #f3d1a0;
  color: #9a5b06;
}

.sta-acc-pill--alarm.is-on .sta-acc-pill-count {
  color: #9a5b06;
}

/* A quiet caveat above the table: the book is bigger than one scan, so the
   facet counts describe the part that was read. Stated rather than hidden - a
   partial count that looks total is how a screen lies quietly. */
.sta-acc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #f3d1a0;
  border-radius: 8px;
  background: #fff8ef;
  color: #8a5b12;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* A failed "reset and email", stated PERSISTENTLY. The reset already destroyed
   the student's working password, so the mail failing leaves a real person
   locked out right now - a 3.2-second toast that the next list refresh can
   overwrite is not a report of that. It stays until somebody dismisses it. */
.sta-acc-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #f0b8bf;
  border-radius: 8px;
  background: #fff5f6;
  color: #8c2029;
  font-size: 0.82rem;
  line-height: 1.5;
}

.sta-acc-alert-text {
  flex: 1 1 auto;
}

.sta-acc-alert-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #a8535c;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}

.sta-acc-alert-close:hover {
  color: #8c2029;
}

/* A failed REFRESH, marked for as long as the stale rows are on screen. The
   first load has an error panel of its own, because it has no rows to leave
   behind; a refresh leaves the previous read exactly where it was, and a toast
   gone in 3.2 seconds is not a report of that - staff go on working a list
   that quietly stopped updating. Amber rather than the alert's red: nothing is
   broken and nobody is locked out, the screen is simply older than it looks.
   Dismissible, and a new failure raises it again. */
.sta-acc-stale {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #f0c98a;
  border-inline-start: 4px solid #dd971f;
  border-radius: 8px;
  background: #fff7ea;
  color: #85570f;
  font-size: 0.82rem;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
}

.sta-acc-stale-text {
  flex: 1 1 auto;
}

.sta-acc-stale-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sta-acc-stale-close {
  background: none;
  border: none;
  color: #a67c34;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}

.sta-acc-stale-close:hover {
  color: #85570f;
}

/* ── One-time temporary password ────────────────────────────────────── */

/* Deliberately the same amber panel as the users screen's one-time credential
   box: it is the same promise - shown once, never stored - and staff should
   recognise it on sight. */
.sta-onetime {
  background: #fffbeb;
  border: 1px solid #f5d98b;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.sta-onetime-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #1a1a2e;
}

.sta-onetime-head .fa-key {
  color: #b7791f;
}

.sta-onetime-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}

.sta-onetime-close:hover {
  color: #1a1a2e;
}

.sta-onetime-body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.65rem 0 0.4rem;
}

.sta-onetime-code {
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  background: #fff;
  border: 1px solid #e8d9a8;
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  color: #1a1a2e;
  user-select: all;
}

.sta-onetime-note {
  font-size: 0.78rem;
  color: #8a6d3b;
  line-height: 1.45;
  margin: 0;
}

/* The panel takes focus when it appears (it is shown once, and a reset pressed
   far down the table would otherwise reveal it off screen), so a keyboard
   reader gets a ring saying where they were just moved to. */
.sta-onetime:focus-visible {
  outline: 2px solid #b7791f;
  outline-offset: 2px;
}

/* Resetting a FROZEN account is allowed on purpose, but the password will not
   work until the freeze is lifted - said here, in the dialog, and in the toast,
   because this panel is what staff copy the value out of. */
.sta-onetime-frozen {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: #3730a3;
}

/* ── The table ──────────────────────────────────────────────────────── */

/* No declared column widths past the identity columns: a width the viewport
   cannot honour hands the remaining columns zero and stacks them on top of
   each other (the cohorts-list defect). The caps below are max-widths, which
   give way instead.

   The email column also carries a FLOOR, and it is the one column that needs
   one. The address is what a row IS here - it is what staff search by, read
   out on the phone and paste into the CRM - and the auto table layout was
   handing this column its leftovers: 130px at 1440, which broke every address
   in the middle of a token across two lines ("noa.levi0@g" / "mail.com").

   A floor, never a fixed width, and 15rem measured rather than guessed: the
   other seven columns need 871px between them at their narrowest, the content
   region is 1112px wide at 1440 with the sidebar out, and 240px is what is
   left. So the whole table still fits with nothing to pan at the width this
   screen is actually read at, and the column holds 24 monospace characters -
   an ordinary address - on one unbroken line. A longer one folds at its "@"
   (see the `<wbr>` note below) rather than mid-token. Where the table cannot
   fit at all it is its own `.adm-table-scroll` wrapper that pans, never the
   page. Re-measure if a column is ever added: the sum of the others, not the
   15, is the real constraint. */
.sta-acc-table .sta-acc-td-email {
  min-width: 15rem;
  max-width: 24rem;
}

.sta-acc-table .sta-acc-td-person {
  max-width: 240px;
}

/* `overflow-wrap: anywhere`, never `word-break: break-all`, and it is the LAST
   resort rather than the mechanism: the markup offers a break at the address's
   "@" (a `<wbr>`), so an address too long for the column folds into its local
   part and its "@domain" instead of being chopped wherever the line ran out.
   This catches what that cannot - a local part longer than the whole column.
   Pairing it with the floor above is also what keeps the column's width in one
   place: the floor says how much room the address gets, and this says the
   address may not demand more, so one student with a very long address cannot
   push the table wider than the screen. */
.sta-acc-email {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.sta-acc-person-link {
  color: var(--primary-color, #0071e3);
  text-decoration: none;
}

.sta-acc-person-link:hover {
  text-decoration: underline;
}

/* A quiet second line under a cell: the cohorts, the freeze authorship, the
   "temporary password not changed yet" note. */
.sta-acc-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: #6b6c78;
  line-height: 1.35;
}

.sta-acc-reason {
  font-style: italic;
}

.sta-acc-nomatch,
.sta-acc-nosale,
.sta-acc-never {
  color: #8a93a3;
  font-size: 0.8rem;
}

/* Money at 600, solid, never the brand gradient. `no sale` above is a word,
   not a figure, precisely so it can never be read as a zero balance. */
.sta-acc-due {
  font-weight: 600;
  color: #3d4350;
}

.sta-acc-due--owed {
  color: #191a23;
  font-weight: 700;
}

/* The FIGURE may not wrap; the header above it may. Scoped to the cell rather
   than the column for a measured reason: "Amount due" held on one line was
   asking 143px of the row's width where the word "Amount" needs 93px, and that
   50px is part of what the address column now uses to hold an address. */
td.sta-acc-col-due {
  white-space: nowrap;
}

/* The sortable-header kit pins `white-space: nowrap` on every sortable header
   (`.reg-th-sort`, admin.css), which is why scoping the rule above to the cell
   is not enough on its own. Released here for this one header: it wraps only
   when the table is actually short of room, and a two-line "Amount / due" is a
   cheaper thing to look at than an address broken in half. */
.sta-acc-table th.sta-acc-col-due {
  white-space: normal;
}

.sta-acc-col-actions {
  white-space: nowrap;
}

/* ── Access chips ───────────────────────────────────────────────────── */

/* The access cell's one group: the chip or chips, and under them the freeze
   detail that explains them. A plain block on the desktop table, where it
   changes nothing - the chips flow inline and the detail sits beneath, as
   before. It earns its keep in the card layout below 1024px, where the cell
   itself becomes a flex row. */
.sta-acc-access {
  display: block;
}

/* The freeze date and the reason are ONE thing: when it happened, who did it,
   and why. Kept together so the reason reads as belonging to the freeze. */
.sta-acc-freeze-meta {
  display: block;
}

.sta-acc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.sta-acc-chip + .sta-acc-chip {
  margin-left: 0.3rem;
}

.sta-acc-chip--eligible {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

/* The loudest thing on the screen, and deliberately so: this person signs in
   fine and sees an empty portal with no error and no way to repair it. It is
   the row about to generate a support call. */
.sta-acc-chip--locked_out {
  background: #fff1e0;
  border-color: #f0be7c;
  color: #8a4c00;
}

.sta-acc-chip--frozen {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.sta-acc-chip--unknown {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #6b7280;
}

/* A whole-row tint under the chip, so a scan down the table finds the two
   states that need a human before any cell is read. */
.sta-acc-row--locked td {
  background: #fffaf3;
}

.sta-acc-row--frozen td {
  background: #f7f8ff;
}

/* ── Row actions ────────────────────────────────────────────────────── */

.sta-acc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

/* The two reset doors stay LABELLED, never two glyphs side by side: the choice
   between them is who gets to see the password, and a tooltip is not where
   that decision belongs. */
.sta-acc-actions .btn {
  white-space: nowrap;
}

/* The written name of an icon action. On the desktop table the row is tight and
   the glyph has hover plus a `title`, so the label is hidden there and shown in
   the card layout below - see the breakpoint. It is not `display: none` on a
   whim: a hidden label would also leave the button unnamed for a screen reader,
   so the markup keeps the text and this rule only stops it PAINTING. */
.sta-acc-actions .btn-icon .sta-acc-action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Pagination ─────────────────────────────────────────────────────── */

.sta-acc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.sta-acc-pagination-info {
  font-size: 0.8rem;
  color: #6b6c78;
}

/* ── Freeze modal ───────────────────────────────────────────────────── */

.sta-acc-freeze-points {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a5261;
}

.sta-acc-freeze-points li {
  margin-bottom: 0.3rem;
}

.sta-acc-freeze-reason {
  direction: ltr;
  text-align: left;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  line-height: 1.4;
}

/* ── Attendance "self" badge (AdminCourseCohorts.vue) ───────────────── */

/* Colours only - the pill shape comes from .cohort-badge in admin.css. Sits
   beside the Present/Absent toggle when the mark came from the student's own
   report rather than the roster tick. */
.cohort-badge--self {
  background: #fef3c7;
  color: #92400e;
}

/* ═══ Recording consents tab (AdminStudentArea.vue, `.sta-rc-*`) ══════ */

/* A read-only register: one card per meeting, its signatures inside it. The
   colour vocabulary is the panel's own - green for "this student can watch what
   is online now", amber for "somebody has to sign again" - and every one of
   those states is ALSO written in words, because a colour alone cannot say
   which of the eight signatures on a meeting still counts. */

.sta-rc-lede {
  max-width: 82ch;
}

/* ── The cohort picker row ──────────────────────────────────────────── */

.sta-rc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sta-rc-bar-label {
  margin: 0;
}

.sta-rc-cohort-select {
  width: auto;
  min-width: 260px;
}

/* ── One meeting ────────────────────────────────────────────────────── */

.sta-rc-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sta-rc-meeting {
  padding: 0.9rem 1rem 1rem;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
}

.sta-rc-meeting-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.sta-rc-meeting-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.sta-rc-date {
  font-weight: 600;
  white-space: nowrap;
}

.sta-rc-title {
  color: #4a5261;
}

.sta-rc-meeting-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

/* Whether there is a video at all. The "set" chip is an anchor - the url is
   right there and staff open it constantly - so it drops the underline and
   reads as the chip it looks like. */
.sta-rc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.sta-rc-chip--has {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.sta-rc-chip--has:hover {
  background: #d9f7ea;
}

.sta-rc-chip--none {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #6b7280;
}

.sta-rc-count {
  font-size: 0.82rem;
  color: #4a5261;
}

/* THE WEIGHT IS NOT DECORATION HERE. `fonts.css` carries a universal
   `* { font-weight: 400 }`, which beats the browser's own bold for `<strong>`,
   so an unstyled `<strong>` in this panel renders at 400 and the emphasis
   simply does not happen. admin.css re-declares the weight at each of its own
   `<strong>` uses for exactly this reason. This is the count staff scan the
   page for; without the weight it reads as a slightly larger word inside a
   sentence. */
.sta-rc-count strong {
  font-size: 0.95rem;
  font-weight: 600;
}

/* The signer's name, above their muted email. Same universal-400 trap. */
.sta-rc-td-person strong {
  font-weight: 600;
}

/* The amber sentence under the head: signatures that no longer release
   anything, or a list the cap cut short. Same shape as .sta-acc-note, which
   makes the same kind of admission about a partial count. */
.sta-rc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid #f3d1a0;
  border-radius: 8px;
  background: #fff8ef;
  color: #8a5b12;
  font-size: 0.8rem;
  line-height: 1.45;
}

.sta-rc-empty {
  margin-top: 0.7rem;
  color: #6b6c78;
  font-size: 0.85rem;
}

/* ── The signature table ────────────────────────────────────────────── */

.sta-rc-scroll {
  margin-top: 0.8rem;
}

/* A row signed against a video that has since been replaced. It is tinted AND
   labelled "Earlier video" in its own cell - the tint is the glance, the words
   are the answer. */
.sta-rc-row--old td {
  background: #fffaf3;
}

.sta-rc-email {
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: #8a93a3;
}

/* Identity numbers and addresses read left to right whatever the surrounding
   sheet does, and a tabular figure keeps a column of them aligned. They say
   their own direction rather than inheriting an answer - `.form-input` in
   admin.css sets `direction: rtl` as a direct declaration, which is how an
   English admin screen ends up right-aligned by accident. */
.sta-rc-id,
.sta-rc-ip {
  direction: ltr;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* A ת.ז is nine digits and never wants to break. */
.sta-rc-id {
  white-space: nowrap;
}

/* AN ADDRESS DOES WANT TO BREAK, and `nowrap` on it was a measured bug rather
   than a preference. `req.ip` is the visitor's real address behind Cloudflare,
   so a 39-character IPv6 is ordinary Israeli mobile traffic, not an edge case,
   and one of them widened the signature table from 1078px (which fits) to
   1198px inside a 1078px scroller: the whole 112px actions column, every View
   button with it, sat off the right edge with no way to reach it but panning.
   The same rule pushed the detail modal to 440px inside a 375px phone, cutting
   the address mid-way and sliding the signature image out with it. Letting the
   address wrap returns both to exactly their container's width. */
.sta-rc-ip {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sta-rc-when {
  white-space: nowrap;
}

/* What stands where the View button would be for an admin who holds the roster
   but not the paperwork. A sentence, not an empty cell: an action that is
   missing without explanation reads as a broken screen. */
.sta-rc-nokey {
  font-size: 0.76rem;
  color: #6b6c78;
  white-space: nowrap;
}

.sta-rc-col-actions {
  white-space: nowrap;
}

/* The per-row verdict: does this signature cover the video that is online
   now? */
.sta-rc-video {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.sta-rc-video--current {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.sta-rc-video--old {
  background: #fff5e8;
  border-color: #f3d1a0;
  color: #9a5b06;
}

/* ── The signature modal ────────────────────────────────────────────── */

.sta-rc-detail-name {
  font-size: 17px;
  font-weight: 600;
}

.sta-rc-detail-sub {
  margin-bottom: 0.9rem;
  color: #8a93a3;
  font-size: 0.82rem;
}

.sta-rc-detail-list {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}

.sta-rc-detail-list dt {
  color: #8a93a3;
  font-weight: 600;
}

.sta-rc-detail-list dd {
  margin: 0;
  min-width: 0;
}

/* A recording url is long and never breaks at a space. */
.sta-rc-detail-url {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.sta-rc-ua {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  color: #6b6c78;
}

/* In the modal the verdict is a sentence on its own line under the url it is
   about, not a chip in a table cell - so it wraps rather than running off. */
.sta-rc-detail-list .sta-rc-video {
  margin-top: 0.3rem;
  white-space: normal;
  text-align: left;
  /* Once it wraps it is a block of text, not a chip, and a pill radius on four
     wrapped lines pinches the first and last of them against the curve. */
  border-radius: 8px;
}

.sta-rc-detail-label {
  display: block;
  margin-bottom: 0.3rem;
}

/* The undertaking verbatim. Hebrew, so the block declares `dir="rtl"` in the
   markup, and it scrolls rather than pushing the modal taller than the screen. */
.sta-rc-consent-text {
  max-height: 190px;
  margin-bottom: 1rem;
  padding: 0.7rem 0.85rem;
  overflow-y: auto;
  border: 1px solid #e8eef8;
  border-radius: 10px;
  background: #fbfcfe;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-line;
}

/* Mirrors .ct-signature-box (admin-contracts.css): a drawn signature on a white
   card at its own size, capped so a wide pad cannot stretch the modal. */
.sta-rc-signature-box {
  padding: 10px;
  border: 1px solid #e8eef8;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.sta-rc-signature-box img {
  max-width: 100%;
  max-height: 160px;
}

/* ── Breakpoints ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Touch floors (admin mobile revamp): 44px targets and 16px input text
     below 1025px; an iOS input under 16px zooms the whole page on focus. */
  .sta-page .btn,
  .sta-page .btn-icon,
  .sta-page .sta-visible-toggle {
    min-height: 44px;
  }

  .sta-page .form-input,
  .sta-page .form-select,
  .sta-page .sta-content-textarea,
  .sta-page .sta-modal-body {
    font-size: 16px;
  }

  /* A filter pill is a control too, but 44px of height on a strip of nine of
     them eats the screen - they get the width instead and stay tappable. */
  .sta-page .sta-acc-pill {
    min-height: 34px;
    padding-inline: 0.8rem;
  }

  .sta-acc-search input {
    width: 100%;
  }

  .sta-acc-search {
    flex: 1 1 200px;
  }

  /* The stale-refresh banner's own two controls: the retry is a .btn and is
     already 44px by the rule above, and the dismiss is a bare glyph, so it is
     given the same floor here rather than being a 26px target on a phone. The
     banner wraps so neither is squeezed against the sentence. */
  .sta-acc-stale {
    flex-wrap: wrap;
  }

  .sta-acc-stale-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* The other two dismiss glyphs need the same floor for the same reason, and
     the rule above does not reach them: neither is a .btn or a .btn-icon, and
     both sit on notices a phone reader is most likely to want gone - the
     warning that a reset mail never left, and the panel holding a temporary
     password that is shown once. At their own padding they measure about
     26x20px, which is half a touch target. */
  .sta-acc-stale-close,
  .sta-acc-alert-close,
  .sta-onetime-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* ── Card layout for the account tables ───────────────────────────
     The breakpoint is 1024px, not 767px, for the reason every other card
     table in the panel uses it: with the admin sidebar taking its share, a
     1024px screen leaves roughly 760px of content and an eight-column row is
     already unreadable there. Opt-in through `.sta-cards` on the table, never
     a blanket `.sta-page .admin-table` rule - the announcements board is an
     .admin-table under the same page root and must keep its own layout. */

  /* The wrapper's job was to pan a too-wide table. A card list is never too
     wide, and a leftover scroller would clip the cards' shadow. The shared
     `.adm-table-scroll` utility is frozen, so this rides alongside it on the
     same element rather than redefining it. */
  .sta-acc-scroll {
    overflow-x: visible;
  }

  /* The table stops painting a surface: the CARDS carry it now. admin.css
     turns .admin-table into a block scroller at this same breakpoint, which
     is what these three rules undo. */
  .sta-cards {
    display: block;
    min-width: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .sta-cards thead {
    display: none;
  }

  .sta-cards tbody {
    display: block;
    width: 100%;
  }

  /* One card per row. Taking the `<tr>` off `display: table` in the SAME
     breakpoint that flexes its cells is load-bearing: admin.css sets
     `thead, tbody, tr { display: table; table-layout: fixed }` here, and
     leaving the row a table while the cells become flex items merges every
     cell into one anonymous stacked cell that never scrolls. */
  .sta-cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    width: 100%;
    margin-bottom: 0.8rem;
    padding: 0.85rem 1rem 0.7rem;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 60, 130, 0.05);
  }

  .sta-cards tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Cells are laid out by the card now, so they give up every table-era
     property: the padding, the rules between them, the max-widths and the
     nowrap that would overflow instead of folding. */
  .sta-cards tbody td {
    width: auto;
    max-width: none;
    padding: 0;
    border: none;
    white-space: normal;
    font-size: 0.875rem;
    color: #3d4350;
  }

  /* The shared sheet tints `td` on hover. In card mode the tint belongs to
     the card, or a row shows as a few tinted fragments floating on white -
     which is also what the locked-out and frozen row tints must become. */
  .sta-cards tbody tr:hover td,
  .sta-cards tbody tr.sta-acc-row--locked td,
  .sta-cards tbody tr.sta-acc-row--frozen td {
    background: transparent;
  }

  .sta-cards tbody tr.sta-acc-row--locked {
    background: #fffaf3;
    border-color: #f0be7c;
  }

  .sta-cards tbody tr.sta-acc-row--frozen {
    background: #f7f8ff;
    border-color: #c7d2fe;
  }

  /* Labelled rows: a full-width line with its heading in the gutter. Anything
     without a `data-label` is identity and leads the card unlabelled, because
     an email address and a person's name caption themselves. */
  .sta-cards td[data-label] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid #f1f4f8;
  }

  .sta-cards td[data-label]:empty {
    display: none;
  }

  .sta-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    color: #8a93a3;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.9;
    text-transform: uppercase;
  }

  /* The email column's desktop floor is a table-layout instruction and nothing
     else. A card is one column wide, so the floor has to go with the rest of
     the table-era sizing, or a 19rem minimum sits inside a 330px card on a
     phone and pushes the row wider than the screen. */
  .sta-cards .sta-acc-td-email,
  .sta-cards .sta-acc-td-person {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* The access group stays ONE flex item beside the ACCESS label, so the chips
     and the freeze detail read as a block. Loose, they became three items of a
     flex row spread across the whole card, and the italic reason ended up at
     the far right, reading as an afterthought instead of as the explanation of
     the chip beside it. */
  .sta-cards td[data-label] .sta-acc-access {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Under the chip it explains, not beside it. */
  .sta-cards .sta-acc-freeze-meta {
    width: 100%;
    margin-top: 0.1rem;
  }

  /* The actions close the card as one full-width row under a rule. */
  .sta-cards td.sta-acc-col-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f4f8;
    white-space: normal;
  }

  /* The chips fill the width of the card and read left to right. Right-aligned
     was fine for four bare glyphs; four labelled chips wrap, and a wrapped
     right-aligned row leaves a ragged left edge with no reading order. */
  .sta-cards td.sta-acc-col-actions .sta-acc-actions {
    flex: 1 1 100%;
    gap: 0.4rem;
    justify-content: flex-start;
  }

  /* On the desktop table these are bare glyphs that colour in on hover and
     name themselves in a `title`. A touchscreen has NEITHER - there is no
     hover and a `title` never appears - so on a card they take a visible chip
     AND their written name. Four unlabelled glyphs here are sign-out, freeze,
     unlink-Google and delete, which is not a guess anybody should have to
     make. */
  .sta-cards td.sta-acc-col-actions .btn-icon {
    flex: 0 0 auto;
    gap: 0.4rem;
    min-width: 0;
    padding-inline: 0.75rem;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    background: #fbfcfe;
    color: #5b6270;
  }

  .sta-cards td.sta-acc-col-actions .btn-icon .sta-acc-action-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .sta-cards td.sta-acc-col-actions .btn-icon.danger {
    border-color: #f4d7db;
    background: #fff8f9;
    color: #b4232f;
  }

  /* ── Recording consents ──────────────────────────────────────────
     The signature table opts into the same `.sta-cards` layout as the
     account tables above, so the generic half of it (thead hidden, one card
     per row, `data-label` gutters) is already done. These are the three
     things that are this table's own. */

  /* A native select at the picker's desktop minimum is wider than a phone. */
  .sta-rc-cohort-select {
    width: 100%;
    min-width: 0;
  }

  /* The wrapper's job was to pan a too-wide table; a card list is never too
     wide, and a leftover scroller clips the cards' shadow. Same call, and the
     same reason, as `.sta-acc-scroll` above. */
  .sta-rc-scroll {
    overflow-x: visible;
  }

  /* The person leads the card unlabelled, as the account cards do - a name
     and an email caption themselves. */
  .sta-cards .sta-rc-td-person {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* The tint of a superseded row belongs to the CARD in card mode. The rule
     above turns every `td` background transparent, so left on the cell it
     would simply vanish and the "Earlier video" state would lose half of how
     it is told. */
  .sta-cards tbody tr.sta-rc-row--old td {
    background: transparent;
  }

  .sta-cards tbody tr.sta-rc-row--old {
    background: #fffaf3;
    border-color: #f0be7c;
  }

  /* The View button closes the card as its own full-width row under a rule,
     matching the accounts cards' action row. */
  .sta-cards td.sta-rc-col-actions {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f4f8;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  /* The two copy blocks stack on a phone. */
  .sta-content-grid {
    grid-template-columns: 1fr;
  }

  /* A native date picker and a native time picker each need the whole line. */
  .sta-datetime {
    flex-wrap: wrap;
  }

  .sta-datetime .sta-dt-date,
  .sta-datetime .sta-dt-time {
    flex: 1 1 100%;
  }
}