/* ═══ Admin: Course Cohorts (AdminCourseCohorts.vue) ═══
   Everything else for this view still lives in admin.css. This file exists for
   pieces that must NOT be added to that shared sheet. */

/* The shared sheet right-aligns every `.admin-table th` because the admin panel
   is Hebrew RTL almost everywhere. This screen is English LTR, so its headers
   sat hard right over left-aligned cells, leaving a wide empty gap between each
   caption and the column it labels (issue 103). Realign the headers to the
   start of their columns. Scoped to `.cohort-cards` - the class every table on
   this LTR screen carries - so no Hebrew RTL table elsewhere is touched, and
   this file loads after admin.css so the same-specificity tie is won here. The
   two numeric columns keep their centred captions to match their centred cells. */
.cohort-cards th {
  text-align: left;
}

.cohort-cards th.cohort-col-num {
  text-align: center;
}

/* "Here is what the Track change did to the money" note in the enroll /
   edit-enrollment modals. It reports every list price or amount that changed
   (and an agreed amount that was deliberately kept), so it is a WARNING, not
   another grey hint line: it uses the same amber tokens as the
   .reg-meta-row--caveat panel in admin.css so in-panel warnings keep one look.
   Symmetric tint, no directional accent - nothing here needs an RTL mirror if
   this modal is ever reused on one of the Hebrew pages. */
.cohort-price-note {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.1rem 0 0.2rem;
  padding: 0.55rem 0.7rem;
  background: #fffaf0;
  border: 1px solid #f6e2b8;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* The glyph must not shrink when the sentence wraps to three lines. */
.cohort-price-note i {
  flex: 0 0 auto;
}

/* One fact per line, stacked - a list price change and an amount change are
   two separate statements and must not run together into one paragraph. */
.cohort-price-note-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* The first line names the track that was just selected and introduces the
   rest, so it carries the weight. */
.cohort-price-note-lines span:first-child {
  font-weight: 600;
}

/* ── Per-cohort pricing ───────────────────────────────────────────────
   The cohort table's Price column and the four price controls in the
   create/edit modal. The rest of that table's column widths (.cohort-col-num,
   -status, -actions, -attendance) live in admin.css beside the shared
   .admin-table kit; this one lives here because that sheet is read by every
   other admin screen and a new column of one screen does not belong in it.
   This file is linked AFTER admin.css, so a same-specificity tie is won here. */

/* Wide enough for "13,680 ₪" over "(11,593 ₪ excl. VAT)" over "offer until
   22 Aug 2026" without any of the three wrapping mid-figure. The cell stacks,
   so the column never has to fit them side by side. */
.cohort-col-price {
  width: 190px;
}

/* What a buyer pays right now. The only figure on the row that is a decision,
   so it reads first; deliberately NOT bolder than 500 - the brand gradient is
   never applied here, but the panel's own weight ladder tops out at 600 for
   headings and a price is not one. */
.cohort-price-now {
  font-weight: 600;
}

/* The struck regular price, beside the current one. Muted and one step down:
   it is the anchor, not the number anybody acts on. */
.cohort-price-was {
  margin-inline-start: 0.4rem;
  color: #8e8f9e;
  font-size: 0.85em;
  text-decoration: line-through;
}

/* "offer until 22 Aug 2026" - its own line under the figures, in the same
   amber the in-panel warnings use, because a running offer is a deadline and
   the row should say so at a glance rather than in a tooltip. */
.cohort-price-offer {
  display: block;
  margin-block-start: 0.15rem;
  color: #92400e;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* A cohort that quotes no price at all (an interview marathon, an "other"). A
   dash, muted, so it never reads as a zero. */
.cohort-price-none {
  color: #8e8f9e;
}

/* One sentence above the four price controls in the modal, saying what an empty
   box means and that every figure is gross. Same muted small print as the
   panel's other derived hints. */
.cohort-price-legend {
  margin: 0.9rem 0 0.5rem;
  color: #8e8f9e;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Offer deadline: a date input beside a time input, never one datetime-local.
   The time is fixed-width - it holds "23:59" and nothing longer - so the date
   field takes the slack and both stay readable at the modal's two-column
   width. Mirrors .ep-datetime in admin-enrollment-pages.css, which exists for
   the same reason on the same kind of deadline. */
.cohort-datetime {
  display: flex;
  gap: 0.5rem;
}

.cohort-datetime .cohort-dt-date {
  flex: 1 1 auto;
  min-width: 0;
}

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

@media (max-width: 767px) {
  /* Two full-width rows rather than two half-width controls: a native date
     picker and a native time picker each need the whole line on a phone. */
  .cohort-datetime {
    flex-wrap: wrap;
  }

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

/* ═══ Tablet and phone: every table on this screen becomes cards ═══════
   Below 1025px the generic rule in admin.css (`.admin-table { display:
   block }` plus `thead, tbody, tr { display: table; width: 100%;
   table-layout: fixed }`) pins each row to the viewport width and then
   distributes the DECLARED column widths inside it. This screen declares
   648px of them on the cohorts list alone - price 190, two numbers at 90,
   status 110, actions 168 - so Label, Course Type and Start Date are handed
   what is left of a 360px row, which is nothing. Measured at 390px before
   this block existed: those three cells all sat at x=13 with width 0 and
   painted on top of each other, and .cohort-actions-cell, .exvat and
   .cohort-price-offer each refuse to wrap, so the overflow ran across its
   neighbours. The answer is not a narrower column; it is to stop being a
   table below the breakpoint.

   Same dialect the rest of the panel already speaks (admin-card-payments.css,
   admin-invoices.css, admin-enrollments.css): thead is dropped, each row
   becomes a card, and any cell that needs its heading back carries it in
   `data-label`, printed by a ::before caption. All four tables on this screen
   opt in explicitly through `.cohort-cards`, never through
   `.cohorts-page .admin-table` - the detail panel holds three more
   `.admin-table`s under the same page root and a blanket rule would restyle
   whatever is added there next.

   The breakpoint is 1024px, not 767px, for the same reason every other card
   table here uses it: with the admin sidebar taking its share, a 1024px
   screen has roughly 760px of content and an eight-column row is already
   unreadable there. */

@media (max-width: 1024px) {
  /* 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. */
  .cohort-table-scroll {
    overflow-x: visible;
  }

  /* The table stops painting a surface: the CARDS carry it now, so the frame,
     the white and the radius move down one level. */
  .cohort-cards {
    display: block;
    min-width: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .cohort-cards thead {
    display: none;
  }

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

  /* One card per row. The `<tr>` must be taken off `display: table` in the
     SAME breakpoint that flexes its cells: leaving it a table-row while the
     cells become flex items wraps them all into one anonymous cell and stacks
     them, which is the failure this screen already had in another form. */
  .cohort-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);
  }

  .cohort-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 fixed widths that
     caused the crush, and the nowrap that made it overflow instead of fold.
     14px rather than the 0.78rem the shared sheet drops table text to - that
     is 12.5px, fine in a dense grid a mouse scans and too small for the body
     text of a card held at arm's length. */
  .cohort-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 and on selection. In card mode the
     tint belongs to the card, or a selected cohort shows as a few tinted
     fragments floating on white. */
  .cohort-cards tbody tr:hover td {
    background: transparent;
  }

  /* Labelled rows: a full-width line, its heading in the gutter. Anything
     without a `data-label` is identity or meta and leads the card unlabelled,
     because "Ada Lovelace" and "Tue, 19 Jan 2027" caption themselves. */
  .cohort-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;
  }

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

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

  /* Every action cell closes its card as one right-aligned row under a rule.
     `white-space: nowrap` was the desktop guard against a 168px column
     folding; here the row is full width and the flex gap does that job, and
     leaving it on would push the buttons past the card's edge. The four
     44px targets the touch floors below already mandate come to 200px of a
     328px content box at 360px, so they fit without an overflow menu. */
  .cohort-cards td.cohort-actions-cell {
    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;
  }

  /* On the desktop table these are bare glyphs that colour in on hover and
     name themselves in a `title` tooltip. A touchscreen has neither, so on a
     card they take a visible chip: a border and a surface to say they are
     controls, and enough width to look deliberate at the 44px the touch
     floors already give them. */
  .cohort-cards td.cohort-actions-cell .btn-icon {
    flex: 0 0 auto;
    min-width: 56px;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    background: #fbfcfe;
    color: #5b6270;
  }

  /* Delete, and cancelling an enrollment. Both are guarded by a confirm, but
     the guard is the second line of defence; the first is that the button
     looks different from the one beside it before it is pressed. `danger`
     carries its red on hover only, which on touch is never. */
  .cohort-cards td.cohort-actions-cell .btn-icon.danger {
    border-color: #f4d7db;
    background: #fff8f9;
    color: #c9425a;
  }

  /* The centring is a numeric-COLUMN convention; a labelled card row reads
     from the caption outwards. */
  .cohort-cards td.cohort-col-num,
  .cohort-cards td.cohort-col-attendance {
    text-align: start;
  }

  /* Long values that a fixed column used to clip. A card has the room, and an
     ellipsis on a touchscreen is a promise of a tooltip that can never be
     redeemed. */
  .cohort-cards td.cohort-td-email {
    max-width: none;
    overflow-wrap: anywhere;
  }

  /* ── The cohorts list card ──────────────────────────────────────────
     Line 1: the label, with the status badge parked at the end of it.
     Line 2: course type and start date, muted.
     Then price, then the two counts sharing one line, then the actions.
     `order` does the arranging, so the DOM keeps the column order the
     desktop table needs. */

  .cohort-list-table td.cohort-td-label {
    order: 0;
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.35;
  }

  /* Parked at the end of the title line. */
  .cohort-list-table td.cohort-td-status {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .cohort-list-table td.cohort-td-type,
  .cohort-list-table td.cohort-td-date {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: #8e8f9e;
  }

  .cohort-list-table td.cohort-td-type {
    order: 3;
  }

  .cohort-list-table td.cohort-td-date {
    order: 4;
  }

  /* A middot between the two meta facts, so they read as one line rather than
     two collided ones. Generated, not typed into the template: the desktop
     table must not grow a stray separator inside a cell. */
  .cohort-list-table td.cohort-td-date::before {
    content: "\00b7";
    margin-inline-end: 0.5rem;
    color: #c6c9d2;
  }

  /* A zero-height full-width flex item, ordered between the status chip and
     the meta, so the card ALWAYS breaks there. Without it the four short
     cells fit one line at this width and `margin-inline-start: auto` merely
     opens a gap in the middle of it: the chip lands between the label and
     the course type, and a slightly longer label pushes the start date onto
     a line of its own behind an orphaned separator. A break cannot be
     expressed on the cells themselves - the pseudo-element has to be a
     SIBLING flex item, which on a `display: flex` row means the row's own
     ::before. */
  .cohort-list-table tbody tr::before,
  .cohort-enr-table tbody tr::before {
    content: "";
    flex: 0 0 100%;
    order: 2;
    height: 0;
  }

  .cohort-list-table td.cohort-col-price {
    order: 5;
  }

  /* The price cell carries up to four facts. The struck price sits beside the
     current one; the ex-VAT parenthetical and the offer deadline each claim
     their own line under them, indented past the caption gutter so the block
     reads as one column of money rather than three loose strings. Neither of
     those two can wrap (`.exvat` and `.cohort-price-offer` are both nowrap by
     design), which is exactly why they are given a full flex line instead of
     being left to fit beside something. */
  .cohort-list-table td.cohort-col-price .exvat--block,
  .cohort-list-table td.cohort-col-price .cohort-price-offer {
    flex: 1 1 100%;
    margin-inline-start: 5.5rem;
  }

  .cohort-list-table td.cohort-col-price .cohort-price-now {
    font-size: 1.05rem;
  }

  /* Sessions and Enrolled are two short numbers. Full-width rows of their own
     would be two nearly empty lines on every card, so they share one. They
     keep their captions: the two badges are identical markup and, without the
     headings the card just dropped, nothing else tells them apart. */
  .cohort-list-table td.cohort-td-sessions,
  .cohort-list-table td.cohort-td-enrolled {
    flex: 1 1 42%;
  }

  .cohort-list-table td.cohort-td-sessions {
    order: 6;
  }

  .cohort-list-table td.cohort-td-enrolled {
    order: 7;
  }

  .cohort-list-table td.cohort-td-sessions::before,
  .cohort-list-table td.cohort-td-enrolled::before {
    flex: 0 0 auto;
  }

  .cohort-list-table td.cohort-actions-cell {
    order: 9;
  }

  /* The whole card is the tap target for opening a cohort, and a touchscreen
     has no hover to say so. A press tint is the only affordance available;
     the tap highlight is suppressed so the two do not fight. */
  .cohort-list-table tbody tr.cohort-row {
    -webkit-tap-highlight-color: transparent;
  }

  .cohort-list-table tbody tr.cohort-row:active {
    background: #f7f9fd;
  }

  /* The selected cohort. The shared sheet paints this on the `td`
     (admin.css: `.cohort-row--selected td`), which in card mode tints a few
     fragments and leaves the card white around them, so the tint moves up to
     the card and the cell rule is neutralised. */
  .cohort-list-table tbody tr.cohort-row--selected {
    background: var(--primary-light, rgba(0, 113, 227, 0.06));
    border-color: #9ec5f5;
  }

  .cohort-list-table tbody tr.cohort-row--selected td {
    background: transparent;
  }

  /* ── The enrollments card (detail panel) ────────────────────────────
     Name and status on line 1, the two contact facts under it, then track,
     then the money pair, then the actions. */

  .cohort-enr-table td.cohort-td-name {
    order: 0;
    flex: 1 1 auto;
    font-size: 1rem;
  }

  .cohort-enr-table td.cohort-td-status {
    order: 1;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .cohort-enr-table td.cohort-td-mobile {
    order: 3;
    flex: 1 1 100%;
    font-variant-numeric: tabular-nums;
  }

  .cohort-enr-table td.cohort-td-email {
    order: 4;
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: #8e8f9e;
  }

  .cohort-enr-table td.cohort-td-track {
    order: 5;
  }

  /* What is owed and what has landed, side by side, because the only reason
     to read either is to compare them. */
  .cohort-enr-table td.cohort-td-topay,
  .cohort-enr-table td.cohort-td-paid {
    flex: 1 1 42%;
    align-content: flex-start;
  }

  .cohort-enr-table td.cohort-td-topay {
    order: 6;
  }

  .cohort-enr-table td.cohort-td-paid {
    order: 7;
  }

  .cohort-enr-table td.cohort-td-topay::before,
  .cohort-enr-table td.cohort-td-paid::before {
    flex: 0 0 100%;
    line-height: 1.3;
  }

  .cohort-enr-table td.cohort-actions-cell {
    order: 9;
  }

  /* A cancelled enrollment stays for the record and reads as history. Same
     0.55 the shared sheet gives the cells, moved to the card so the fade is
     even across it. */
  .cohort-enr-table tbody tr.cohort-row--cancelled {
    opacity: 0.65;
  }

  .cohort-enr-table tbody tr.cohort-row--cancelled td {
    opacity: 1;
  }

  /* ── The sessions card (detail panel) ───────────────────────────────
     Date and time lead, the mode sits at the end of that line, and the two
     effective values (zoom link, location) become labelled rows carrying
     their inherited/override hint. */

  .cohort-sess-table td.cohort-td-date {
    order: 0;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 600;
    color: #191a23;
  }

  .cohort-sess-table td.cohort-td-time {
    order: 1;
    flex: 0 0 auto;
    color: #6b6c7b;
    font-variant-numeric: tabular-nums;
  }

  /* An unlabelled meeting says nothing here rather than carrying a "-" pill:
     the card is a summary and every intake-1 meeting is unlabelled. The desktop
     table still prints the dash, where a blank cell in a column of words reads
     as a rendering fault instead of as an answer. Ordered before the --set rule
     on purpose - the two selectors have equal specificity. */
  .cohort-sess-table td.cohort-td-kind {
    display: none;
  }

  /* Kind and mode are one pair - what the meeting is, then where it happens -
     so they close the date/time line as two identical pills. */
  .cohort-sess-table td.cohort-td-kind--set,
  .cohort-sess-table td.cohort-td-mode {
    display: block;
    order: 2;
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border: 1px solid #e3e8f0;
    border-radius: 999px;
    background: #f7f9fc;
    font-size: 0.75rem;
    color: #5b6270;
    white-space: nowrap;
  }

  /* The `auto` margin that pushes the pair to the end of the line sits on
     whichever pill comes first - the kind when it is set, the mode when the
     kind cell is hidden. A hidden cell still matches the sibling selector, so
     the choice is structural and needs no second class. */
  .cohort-sess-table td.cohort-td-kind--set,
  .cohort-sess-table td.cohort-td-kind:not(.cohort-td-kind--set) ~ td.cohort-td-mode {
    margin-inline-start: auto;
  }

  /* The session title reads as the first labelled row of the card, above
     the zoom link (order tie at 3 resolves by DOM position: title precedes
     zoom). Desktop keeps it as its own column. */
  .cohort-sess-table td.cohort-td-title {
    order: 3;
  }

  .cohort-sess-table td.cohort-td-zoom {
    order: 3;
  }

  .cohort-sess-table td.cohort-td-loc {
    order: 4;
  }

  /* A meeting URL is one long unbreakable token; without this it either
     overflows the card or forces it wider than the screen. */
  .cohort-sess-table td.cohort-td-zoom .cohort-link {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
  }

  /* "inherited" / "override" says where the value above it came from, so it
     takes its own line INDENTED to the value's column. Left in the flow it
     wraps back to the caption gutter and reads as a second labelled fact
     rather than a footnote on the first. Same treatment the price cell gives
     its ex-VAT line and its offer deadline, for the same reason. */
  .cohort-sess-table td.cohort-effective-cell .cohort-source-hint {
    flex: 1 1 100%;
    margin-inline-start: 5.5rem;
  }

  .cohort-sess-table td.cohort-actions-cell {
    order: 9;
  }

  /* ── The attendance card (detail panel) ─────────────────────────────
     Marking someone present is the only thing this table is for, so the
     toggle is the card: full width, both segments equal, under the name. */

  .cohort-att-table td.cohort-td-name {
    order: 0;
    flex: 1 1 100%;
    font-size: 1rem;
  }

  .cohort-att-table td.cohort-td-email {
    order: 1;
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: #8e8f9e;
  }

  .cohort-att-table td.cohort-td-att {
    order: 2;
    flex: 1 1 100%;
    margin-top: 0.35rem;
  }

  .cohort-att-table .cohort-attendance-toggle {
    display: flex;
    width: 100%;
  }

  .cohort-att-table .cohort-att-btn {
    flex: 1 1 50%;
  }

  /* ── The screen around the tables ───────────────────────────────────
     A card list is only half a phone screen; the chrome above and around it
     has to survive the same width. */

  /* The detail panel. Its head is an unwrapped space-between line and its
     tabs an unwrapped row, both of which overflow a phone; the padding also
     costs width the cards inside would rather have. */
  .cohort-detail {
    padding: 1rem 0.9rem 1.15rem;
  }

  .cohort-detail-head {
    flex-wrap: wrap;
  }

  .cohort-detail-head > div:first-child {
    flex: 1 1 100%;
  }

  .cohort-detail-head-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* Three tabs plus their counts do not fit across 360px. They pan instead of
     wrapping, so the underline stays a single continuous baseline; the
     scrollbar is hidden because the tabs themselves are the affordance. */
  .cohort-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .cohort-tabs::-webkit-scrollbar {
    display: none;
  }

  .cohort-tab {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  /* The per-tab toolbar is another unwrapped space-between line: its hint and
     its buttons collide, and the button labels fold mid-word. */
  .cohort-tab-toolbar {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .cohort-tab-hint {
    flex: 1 1 100%;
  }

  .cohort-tab-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .cohort-tab-actions .btn {
    white-space: nowrap;
  }

  /* The attendance session picker is a full-width control, not a squeezed
     third of a toolbar row. */
  .cohort-tab-toolbar .cohort-filter-field {
    flex: 1 1 100%;
  }

  .cohort-tab-toolbar .cohort-filter-field .form-select {
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* The page toolbar. A phone has room for the status filter and Refresh on
     one line and nothing else, so New Cohort takes the line under them at
     full width, which is where a phone expects its primary action anyway.
     Left alone between 768 and 1024, where all three still fit across. */
  .cohorts-page .admin-page-header {
    gap: 0.6rem;
  }

  .cohorts-page .admin-toolbar {
    align-items: flex-end;
    gap: 0.5rem;
  }

  .cohorts-page .admin-toolbar > .cohort-filter-field {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cohorts-page .admin-toolbar > .btn-primary {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* A narrower caption gutter: at 360px the 5.5rem one leaves too little for
     the value beside it. */
  .cohort-cards td[data-label]::before {
    flex-basis: 4.75rem;
  }

  .cohort-list-table td.cohort-col-price .exvat--block,
  .cohort-list-table td.cohort-col-price .cohort-price-offer,
  .cohort-sess-table td.cohort-effective-cell .cohort-source-hint {
    margin-inline-start: 4.75rem;
  }

  /* Four 56px chips and three gaps come to 260px of a 328px content box, so
     the group still fits one line at 360px and stays a group: spread across
     the full width they stop reading as one bar and start reading as four
     unrelated glyphs. */
  .cohort-cards td.cohort-actions-cell .btn-icon {
    min-width: 52px;
  }
}

/* ── Touch floors (admin mobile revamp) ───────────────────────────────
   44px targets and 16px input text below 1025px; an iOS input under 16px
   zooms the whole page on focus. The view's kit lives in admin.css (the
   shared sheet), so the floors live HERE, scoped to the page root the
   template carries - this file loads after admin.css and wins the tie.
   Wide tables scroll inside .adm-table-scroll wrappers in the template. */
@media (max-width: 1024px) {
  .cohorts-page .btn,
  .cohorts-page .btn-icon {
    min-height: 44px;
    min-width: 44px;
  }

  .cohorts-page .form-input,
  .cohorts-page .form-select,
  .cohorts-page .form-textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Present / Absent segments and the enroll modal's segment toggle. */
  .cohorts-page .cohort-att-btn,
  .cohorts-page .cohort-segment button {
    min-height: 44px;
  }
}

/* ── Moving a sale to another cohort ──────────────────────────────────
   The Cohort control at the foot of the Edit Enrollment modal, its
   "nothing here is re-priced" panel, and the notice the roster shows after
   a move (the row it names is gone from that table by then).

   Everything below uses logical properties and a symmetric tint, so the kit
   survives being reused on one of the panel's Hebrew RTL screens without an
   extra mirrored rule. */

/* A rule and a heading, because the fields above are the SALE and this one is
   where the sale sits - two different writes, on two different endpoints. */
.cohort-move-block {
  margin-block-start: 1.1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid #eef0f3;
}

.cohort-move-title {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8e8f9e;
}

/* What the pending move will and will not do. Blue, not the amber
   .cohort-price-note wears: that one reports money that MOVED, and the whole
   point of this one is that none does. Same shape so the two read as one
   family when they stack in the same modal. */
.cohort-move-note {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.1rem 0 0.6rem;
  padding: 0.55rem 0.7rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* The glyph keeps its width when the sentence wraps. */
.cohort-move-note i {
  flex: 0 0 auto;
}

.cohort-move-note-lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* The first line names the target and the date it starts. */
.cohort-move-note-lines span:first-child {
  font-weight: 600;
}

/* The frozen sale beside what the target sells for today. Read-only by
   construction - there is no control in it, and nothing on the left is ever
   derived from the right. */
.cohort-move-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-block-end: 0.8rem;
}

.cohort-move-compare-col {
  padding: 0.6rem 0.7rem;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fbfcfe;
}

.cohort-move-compare-head {
  display: block;
  margin-block-end: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b4c5a;
  line-height: 1.35;
}

/* Label left, figure right, on one line each - so the two columns' rows line
   up and the comparison can be read across. */
.cohort-move-compare-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #191a23;
}

.cohort-move-compare-row span:first-child {
  color: #8e8f9e;
}

.cohort-move-compare-foot {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #8e8f9e;
}

/* The server's refusal, kept on screen after the toast has gone. Red, because
   the sentence it carries is always "this did NOT happen". */
.cohort-move-error {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: #fff8f9;
  border: 1px solid #f4d7db;
  border-radius: 8px;
  color: #c9425a;
  font-size: 0.82rem;
  line-height: 1.5;
}

.cohort-move-error i {
  flex: 0 0 auto;
}

/* "X moved to Y and is no longer on this roster", above the table the row
   just left, with the way to follow it. Same blue family as the modal's
   note - it is the same fact, one step later. */
.cohort-moved-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.8rem;
  padding: 0.6rem 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cohort-moved-note > i {
  flex: 0 0 auto;
}

.cohort-moved-note-lines {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
}

.cohort-moved-note-lines span:first-child {
  font-weight: 600;
}

.cohort-moved-note-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  /* Two columns of money at 360px would break every figure across two lines,
     so the comparison stacks and stays readable. */
  .cohort-move-compare {
    grid-template-columns: 1fr;
  }

  /* The notice becomes a block: sentence, then the button under it at full
     width, rather than a 44px target squeezed against the card edge. */
  .cohort-moved-note {
    flex-wrap: wrap;
  }

  .cohort-moved-note-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}