/* ==========================================================================
   Admin: Today, Clients, the client file, Sales, Research, Outbox, Invites, Settings.
   Built from app.css tokens and classes; no colors, shadows, radii or motion
   of its own. Every class starts with adm- (all feature sheets load on every
   page). Desktop first, one column under 1024 px.
   ========================================================================== */

/* Shared bits */

.adm-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.adm-name {
  color: var(--ink-900);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-decoration-line: none;
}

.adm-name:hover {
  color: var(--ink-900);
  text-decoration-line: underline;
}

.adm-ink {
  color: var(--ink-900);
}

.adm-muted {
  color: var(--ink-500);
}

.adm-prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.adm-narrow {
  max-width: 840px;
}

.adm-h-link {
  display: flex;
}

.adm-h-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  margin: -8px 0 -7px;
  color: inherit;
  text-decoration-line: none;
}

.adm-h-link a:hover {
  text-decoration-line: underline;
}

/* Chips that are real checkboxes or radios (they post without JavaScript). */
.adm-chip {
  position: relative;
  display: inline-flex;
}

.adm-chip .choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* Disclosures ("Earlier (5)", "Grant sessions", Prep) built on details. */
.adm-more > summary,
.adm-prep > summary {
  list-style: none;
  width: max-content;
}

.adm-more > summary::-webkit-details-marker,
.adm-prep > summary::-webkit-details-marker {
  display: none;
}

.adm-more[open] > summary,
.adm-prep[open] > summary {
  margin-bottom: 8px;
}

.adm-fold-form {
  padding: 16px;
  border-radius: var(--radius-control);
  background: var(--ink-50);
}

/* Today */

.adm-queue > .section-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-200);
}

.adm-qrows {
  display: flex;
  flex-direction: column;
}

.adm-qrow {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 72px auto;
  align-items: center;
  column-gap: 24px;
  min-height: 72px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-200);
}

.adm-qtype {
  white-space: nowrap;
}

.adm-qwho {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adm-qcontext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.adm-qage {
  white-space: nowrap;
}

.adm-qact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.adm-alert {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 44px;
  align-items: center;
  column-gap: 24px;
  padding: 16px 12px 16px 24px;
}

.adm-alert-money {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* The Spanish labels run longer (owner decision 2026-10-19): the micro style is 8.58 px a character, so the queue's
   longest kind, 'Desistimiento' (13, 112 px), and the alert's 'Pedido nuevo' (12, 103 px) get wider columns
   from 768 px. Phones stack both rows (below). */
@media (min-width: 768px) {
  :lang(es) .adm-qrow {
    grid-template-columns: 112px minmax(0, 1fr) 72px auto;
  }

  :lang(es) .adm-alert {
    grid-template-columns: 104px minmax(0, 1fr) auto 44px;
  }
}

.adm-agenda {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-agenda + .adm-agenda {
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.adm-agenda-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.adm-agenda-head .numeral {
  flex: none;
}

.adm-week {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-week-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

/* 'Cancel session' under a week row's Prep: as wide as its words, not the column. */
.adm-cancel {
  align-self: flex-start;
}

.adm-prep-body {
  padding: 12px 16px;
  border-radius: var(--radius-control);
  background: var(--ink-50);
}

.adm-prep-facts {
  grid-template-columns: 88px minmax(0, 1fr);
}

.adm-pairs {
  display: flex;
  flex-direction: column;
}

.adm-pairs > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--target);
}

/* Summary composer: side sheet, page and card */

.adm-composer .form {
  gap: 20px;
}

.adm-sheet-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.adm-sheet-form .sheet-body {
  min-height: 0;
}

.adm-composer-foot,
.adm-sheet-form .sheet-foot {
  flex-wrap: wrap;
}

.adm-kbd {
  margin-right: auto;
}

.adm-steps {
  display: flex;
  flex-direction: column;
}

.adm-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--ink-100);
}

.adm-step-name {
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-900);
}

/* The skills editor (2026-10-19): a step's rows take the composer's grid, with room for its evidence line. */
.adm-step .cell-stack {
  padding: 8px 0;
}

/* Its side lists: the whole levels, the days held before the portal, the latest changes. */
.adm-levels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-step-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.adm-flagged .field-hint {
  color: var(--ink-700);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--ink-400);
  text-underline-offset: 3px;
}

/* A transcript (2026-10-20): its text in the fold, bounded and scrolled inside, and the method check's matches in the
   notice above the form, underlined as a flagged field's are. */
.adm-transcript {
  max-height: 480px;
  overflow-y: auto;
  padding: 12px 16px;
  margin-top: 8px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
}

.adm-transcript-flags {
  color: var(--ink-900);
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--ink-400);
  text-underline-offset: 3px;
}

/* Clients */

.adm-search {
  display: contents;
}

.adm-tools {
  row-gap: 16px;
}

.adm-clients .table {
  min-width: 1040px;
}

.adm-clients .adm-name {
  white-space: nowrap;
}

.adm-status {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Client file */

.adm-mirror {
  grid-template-columns: minmax(0, 1fr) 1px 184px;
  column-gap: 32px;
  min-height: 0;
  padding: 32px;
}

.adm-mirror-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.adm-mirror-when .numeral {
  white-space: nowrap;
}

.adm-review {
  display: grid;
  grid-template-columns: 232px 1px minmax(0, 1fr);
  column-gap: 24px;
}

.adm-review-work {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.adm-review-work .inset {
  align-self: stretch;
}

.adm-review-divider {
  background: var(--ink-200);
}

.adm-review-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.adm-extlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.adm-sessions {
  display: flex;
  flex-direction: column;
}

.adm-session {
  display: grid;
  grid-template-columns: 28px 104px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--ink-200);
}

.adm-session-name {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-session-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.adm-homework {
  display: flex;
  flex-direction: column;
}

.adm-homework > li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-200);
}

/* A reading (2026-10-20) ends its row with Remove. */
.adm-homework > li.adm-homework-reading {
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

.adm-skillrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-skillrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 76px;
  align-items: center;
  column-gap: 12px;
  min-height: 30px;
}

.adm-track {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
}

.adm-track-steps {
  display: flex;
  gap: 8px;
}

.adm-step-mark {
  display: inline-flex;
}

.adm-track-level {
  color: var(--ink-700);
}

.adm-package {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-package + .adm-package {
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.adm-ledger {
  display: flex;
  flex-direction: column;
}

.adm-ledger-line {
  display: grid;
  grid-template-columns: 56px 32px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
}

.adm-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
}

.adm-dl > div:last-child {
  border-bottom: 0;
}

/* A row whose value is a line of text (the cancel page's session line): the label keeps its width, the value wraps. */
.adm-dl > .adm-dl-long {
  grid-template-columns: auto minmax(0, 1fr);
}

.adm-dl dt {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
}

.adm-dl dd {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-900);
  text-align: right;
}

.adm-orders {
  display: flex;
  flex-direction: column;
}

.adm-orders > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-100);
}

/* Sales */

.adm-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.adm-break {
  flex-basis: 100%;
}

.adm-grow {
  flex: 1 0 auto;
}

.adm-bars th[scope="row"] {
  font-weight: 400;
}

.adm-bar-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.adm-bar-name {
  flex: none;
  width: 168px;
}

.adm-bar {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.adm-bar-fill {
  display: block;
  height: 8px;
  background: var(--navy-900);
}

.adm-pair-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.adm-mini-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.adm-rows {
  display: flex;
  flex-direction: column;
}

.adm-rows > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 65px;
  padding: 10px 0;
  border-top: 1px solid var(--ink-200);
}

/* Sales's invoices: a document's total and its PDF, side by side and never squeezed by the words beside them. */
.adm-doc-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
}

/* An order without an invoice: the button's place stays when it has no button, so the totals keep one column. */
.adm-doc-action {
  display: flex;
  justify-content: flex-end;
  min-width: 128px;
}

/* Settings, Tax: a rate field and its 'Pending gestora' mark on one row. */
.adm-rows > li.adm-tax-rate {
  align-items: flex-end;
  flex-wrap: wrap;
}

.adm-tax-rate > .field {
  flex: 1 1 240px;
}

.adm-switch-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.adm-switch-form .switch-row {
  flex: 1;
}

/* Outbox, Invites, Settings */

.adm-mail {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-900);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.adm-link {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

/* Settings, weekly hours: one line per day (Google Calendar's model): the name, its rows, then Add and Copy. */
.adm-days {
  display: flex;
  flex-direction: column;
}

.adm-day {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  grid-template-areas: "name hours tools";
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 8px 0;
}

.adm-day + .adm-day {
  border-top: 1px solid var(--ink-200);
}

.adm-day-name {
  grid-area: name;
  padding: 10px 0;
  font-weight: 600;
  color: var(--ink-900);
}

.adm-day-hours {
  grid-area: hours;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.adm-day-off {
  padding: 10px 0;
  color: var(--ink-500);
}

/* One row: From, 'to', To and Remove; its error under it. */
.adm-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) var(--target);
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  max-width: 360px;
}

.adm-slot > .input {
  height: var(--control-h-compact);
  padding: 0 10px;
}

.adm-slot-to {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

.adm-slot > .field-error {
  grid-column: 1 / -1;
}

.adm-day-tools {
  grid-area: tools;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* Copy: a details panel under its button, so it opens without JavaScript; admin.js closes it on Escape, a click
   outside or the focus leaving it, so it never covers the control the focus went to. */
.adm-copy {
  position: relative;
}

.adm-copy-toggle {
  list-style: none;
}

.adm-copy-toggle::-webkit-details-marker {
  display: none;
}

.adm-copy[open] > .adm-copy-toggle {
  background: var(--ink-100);
  color: var(--ink-900);
}

.adm-copy-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 248px;
  padding: 12px 16px 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.adm-copy-days {
  display: flex;
  flex-direction: column;
}

.adm-copy-days > .field-label {
  margin-bottom: 4px;
}

.adm-copy-panel > .btn {
  align-self: flex-start;
}

/* Add existing client: what a preview line needs fixed. */
.adm-error {
  color: var(--danger);
}

/* Program rows ('Add existing client', the client file's 'Add earlier purchases'): one group per program
   under a hairline, its row number across, then Program, Sessions bought, Held and Valid until two by two. */
.adm-programs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.adm-program-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.adm-program-row > .adm-program-wide {
  grid-column: 1 / -1;
}

/* Research's post form (2026-10-18): the categories as radio rows with who reads each, the files with their Keep
   boxes and each image's Markdown line, and the Preview under the form. The summary composer's files (2026-10-20,
   adm-sf-) are the same rows. */
.adm-rs-tiers {
  display: flex;
  flex-direction: column;
}

.adm-rs-tier-line {
  display: block;
}

.adm-rs-files,
.adm-sf-files {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-rs-file,
.adm-sf-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--ink-200);
}

.adm-rs-file > .check,
.adm-sf-file > .check {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.adm-rs-line {
  flex: 1 1 100%;
}

.adm-rs-line .input {
  font-family: var(--font-mono);
  font-size: 13px;
}

.adm-rs-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Responsive: one column under 1024 px; rows stack on phones. */

@media (max-width: 1023px) {
  .adm-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adm-review {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .adm-review-divider {
    height: 1px;
  }
}

@media (max-width: 767px) {
  .adm-program-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .adm-qrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "type age"
      "who who"
      "act act";
    row-gap: 8px;
  }

  .adm-qtype {
    grid-area: type;
  }

  .adm-qage {
    grid-area: age;
    text-align: right;
  }

  .adm-qwho {
    grid-area: who;
  }

  .adm-qact {
    grid-area: act;
    justify-content: flex-start;
  }

  .adm-alert {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "when close"
      "who who"
      "money money";
    row-gap: 8px;
  }

  .adm-alert-when {
    grid-area: when;
  }

  .adm-alert-who {
    grid-area: who;
  }

  .adm-alert-money {
    grid-area: money;
    align-items: flex-start;
  }

  .adm-alert-close {
    grid-area: close;
  }

  .adm-mirror {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .adm-session {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 4px;
    padding: 8px 0;
  }

  .adm-session-name,
  .adm-session-end {
    grid-column: 2;
  }

  .adm-session-end {
    justify-content: flex-start;
  }

  .adm-homework > li,
  .adm-homework > li.adm-homework-reading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .adm-figures,
  .adm-pair-cards,
  .adm-step-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .adm-step {
    grid-template-columns: 20px minmax(0, 1fr);
    row-gap: 4px;
    padding: 8px 0;
  }

  .adm-step .choices {
    grid-column: 2;
  }

  /* Phones: the name with Add and Copy on top, the rows across the card under them. */
  .adm-day {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name tools"
      "hours hours";
  }

  .adm-slot {
    max-width: none;
  }

  .adm-rows > li {
    flex-wrap: wrap;
  }

  .adm-bar-name {
    width: 112px;
  }

  /* Sales by month and by VAT treatment on a phone: each row's name on a line of its own, its three figures across
     under it, so nothing goes off the screen (owner report 2026-10-31). The roles in SplitTable keep it a table. */
  .adm-split,
  .adm-split thead,
  .adm-split tbody {
    display: block;
  }

  .adm-split tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ink-200);
  }

  .adm-split thead tr {
    padding-bottom: 4px;
  }

  .adm-split thead th,
  .adm-split tbody :is(td, th) {
    height: auto;
    padding: 0;
    border-bottom: 0;
  }

  .adm-split thead th:first-child,
  .adm-split tbody th {
    grid-column: 1 / -1;
  }

  .adm-split tbody td {
    font-size: 13px;
    line-height: 20px;
  }
}

/* The narrowest phones: 7,774.25 fits its third of the card only a step smaller, and By product its name a little narrower. */
@media (max-width: 359px) {
  .adm-bar-name {
    width: 104px;
  }

  .adm-split tr {
    column-gap: 8px;
  }

  .adm-split tbody td {
    font-size: 12px;
  }
}