/* ============================================================
   TENDI THERAPY reskin: scoped under `.tendi-skin .th-*`, no-op without that markup.

   Deliberately SMALL. Everything the design system already ships is reused by the views
   instead of being restyled here:
     tabs        .tnd-seg / .tnd-seg-btn
     toolbar     .tnd-toolbar / .tnd-tb-fld / .tnd-tb-label / .tnd-tb-spacer / .tnd-tb-actions
     dropdowns   .tnd-select (via TndSelect.enhance on the native <select>)
     counts      .tnd-stat-grid / .tnd-stat
     status      .tnd-status-pill (incl. the is-info / is-critical / is-live added to the skin)
     tables      .tnd-list-tablewrap / table.tnd-list-table
     row action  .icon-btn
     buttons     .btn / .btn-primary / .btn-sm
     notes       .inline-note
     empty       .tnd-empty / -ico / -title / -sub

   What is left below is genuinely specific to this module: the page shell, the
   branch/therapist grouping, the slot card, the day pills, the load meter and the week matrix.
   Tokens only, no literal colors (except #fff for text on a deep accent, as the skin does).
   ============================================================ */

/* ---- page shell -------------------------------------------------------- */
.tendi-skin .th-page { background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl); padding: 20px 22px 24px; }
.tendi-skin .th-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.tendi-skin .th-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.tendi-skin .th-title .th-ico { width: 30px; height: 30px; border-radius: var(--radius-md);
  background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; font-size: 14px; }
.tendi-skin .th-head .tnd-seg { margin-left: auto; }
.tendi-skin .th-pane { display: none; }
.tendi-skin .th-pane.is-active { display: block; }
.tendi-skin .th-loading { text-align: center; color: var(--ink-4); padding: 40px 12px; font-size: 13px; }

/* four counts across; the shared stat block is a 2-up grid by default */
.tendi-skin .th-counts.tnd-stat-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); margin-bottom: 18px; }

/* "Updated 10:42" next to the board's refresh button */
.tendi-skin .th-stamp { font-size: 12px; color: var(--ink-4); align-self: center; }
/* avatar + name inside a table cell */
.tendi-skin .th-cellname { display: flex; align-items: center; gap: 9px; }

/* ---- branch / therapist grouping --------------------------------------- */
.tendi-skin .th-branch { margin-bottom: 22px; }
.tendi-skin .th-branchname { display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.tendi-skin .th-branchname:after { content: ""; flex: 1; height: 1px; background: var(--paper-edge); }
.tendi-skin .th-thera { border: 1px solid var(--paper-edge); border-radius: var(--radius-xl);
  margin-bottom: 10px; overflow: hidden; background: var(--paper-2); }
.tendi-skin .th-theraname { display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  background: var(--cream); border-bottom: 1px solid var(--paper-edge);
  font-weight: 600; font-size: 13.5px; color: var(--ink); }
.tendi-skin .th-theraname .th-n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-4); }

/* monogram avatar; deep accent so white text clears AA (same convention as .org-avatar) */
.tendi-skin .th-av { width: 26px; height: 26px; border-radius: var(--radius-full); display: grid;
  place-items: center; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--plum-deep); flex-shrink: 0; }
.tendi-skin .th-av.a1 { background: var(--plum-deep); }
.tendi-skin .th-av.a2 { background: var(--teal-deep); }
.tendi-skin .th-av.a3 { background: var(--rose-deep); }
.tendi-skin .th-av.a4 { background: var(--sage-deep); }
.tendi-skin .th-av.a5 { background: var(--sky-deep); }

/* ---- slot card ---------------------------------------------------------
   State is expressed by ONE custom property: a whisper wash (7%) plus a hairline (22%).
   Not a left accent bar, and not a saturated tint block: both are called out in the
   design bible (§17) as dated / alert-box looking. */
.tendi-skin .th-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 10px; padding: 12px; }
.tendi-skin .th-slot { --sem: var(--ink-5);
  border: 1px solid color-mix(in srgb, var(--sem) 22%, transparent);
  background: color-mix(in srgb, var(--sem) 7%, var(--paper-2));
  border-radius: var(--radius-lg); padding: 12px 13px; }
.tendi-skin .th-slot.s-out { --sem: var(--info); }
.tendi-skin .th-slot.s-overdue { --sem: var(--critical); }
.tendi-skin .th-slot.s-returned { --sem: var(--ok); }
.tendi-skin .th-slot.s-auto_closed { --sem: var(--attention); }
.tendi-skin .th-slot.s-scheduled,
.tendi-skin .th-slot.s-absent { --sem: var(--ink-5); }
.tendi-skin .th-slot.is-absent .th-strike { text-decoration: line-through; color: var(--ink-4); }

.tendi-skin .th-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px;
  color: var(--ink); flex-wrap: wrap; }
.tendi-skin .th-meta { font-size: 12px; color: var(--ink-4); margin-top: 3px; line-height: 1.5; }
.tendi-skin .th-meta b { color: var(--ink-2); font-weight: 600; }
.tendi-skin .th-slot .tnd-status-pill { margin-top: 9px; }
.tendi-skin .th-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--plum-deep);
  background: var(--primary-tint); border-radius: var(--radius-full); padding: 2px 8px; }
.tendi-skin .th-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }

/* ---- compact density ---------------------------------------------------
   One aligned row per slot. Flex, not grid: a slot carries a VARIABLE number of meta
   lines, and a fixed column count pushes the extras onto a second row and stretches
   the pill to full width. */
.tendi-skin .th-board.is-compact .th-slots { grid-template-columns: 1fr; gap: 0; padding: 0; }
.tendi-skin .th-board.is-compact .th-slot { border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.tendi-skin .th-board.is-compact .th-slot:last-child { border-bottom: 0; }
.tendi-skin .th-board.is-compact .th-name { flex: 0 0 auto; min-width: 148px; font-size: 13.5px; }
.tendi-skin .th-board.is-compact .th-meta { flex: 1 1 auto; margin-top: 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tendi-skin .th-board.is-compact .th-slot .tnd-status-pill { margin-top: 0; flex: 0 0 auto; }
.tendi-skin .th-board.is-compact .th-btns { margin-top: 0; flex: 0 0 auto; flex-wrap: nowrap; }

/* ---- assignment day pills ---------------------------------------------- */
.tendi-skin .th-days { display: inline-flex; gap: 3px; }
.tendi-skin .th-day { width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid;
  place-items: center; font-size: 10px; font-weight: 700; color: var(--ink-5);
  background: var(--cream); border: 1px solid var(--paper-edge); }
.tendi-skin .th-day.on { color: #fff; background: var(--primary); border-color: var(--primary); }

/* secondary line inside a table cell (e.g. "45 min" under a time range) */
.tendi-skin .th-sub { font-size: 11.5px; color: var(--ink-4); }
/* row actions, right aligned and out of the way until the row is scanned */
.tendi-skin .th-rowacts { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- modal day picker ---------------------------------------------------
   Real checkboxes in a <label> so the whole pill toggles them (design bible §13:
   never a div flipped by a class). The violet selected state is driven by :has(),
   same technique the Users pane uses for its assignment chips. */
.tendi-skin .th-daypick { display: flex; flex-wrap: wrap; gap: 6px; }
.tendi-skin .th-daypick-item { display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 13px; min-height: 42px; cursor: pointer; font-weight: 600; font-size: 13px;
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
.tendi-skin .th-daypick-item:hover { border-color: var(--paper-edge-strong); background: var(--cream); }
.tendi-skin .th-daypick-item input { margin: 0; }
.tendi-skin .th-daypick-item:has(input:checked) { background: var(--primary-tint);
  border-color: var(--primary); color: var(--primary); }
.tendi-skin .th-daypick-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Checkbox sitting on the toolbar line (Week: "Hide empty days").
   The selector is long on purpose. tendi-skin styles EVERY direct label child of a toolbar
   field as an uppercase micro-label:
       .tnd-toolbar .tnd-tb-fld > label, .tnd-toolbar > label, .tnd-toolbar .tnd-tb-label
   which is 3 classes, so a plain `.tendi-skin .th-checkline` loses and the control shouts
   "HIDE EMPTY DAYS". This is a real control with sentence-case text, not a field label, so it
   opts out explicitly rather than with !important. */
.tendi-skin .tnd-toolbar .tnd-tb-fld > label.th-checkline {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 40px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-transform: none; letter-spacing: normal; cursor: pointer; white-space: nowrap;
}
.tendi-skin .th-checkline input { margin: 0; }

/* ---- therapist weekly load meter --------------------------------------- */
.tendi-skin .th-load { display: flex; align-items: center; gap: 9px; min-width: 132px; }
.tendi-skin .th-load-n { font-size: 11.5px; color: var(--ink-4); }
.tendi-skin .th-track { flex: 1; height: 6px; border-radius: var(--radius-full);
  background: var(--cream-3); overflow: hidden; }
/* display:block matters: an inline span ignores height/width and the meter renders empty */
.tendi-skin .th-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary); }
.tendi-skin .th-fill.hi { background: var(--attention); }

/* ---- week matrix -------------------------------------------------------
   Scrolls inside its OWN container with the therapist column pinned, so the page
   body never scrolls sideways. */
.tendi-skin .th-weekscroll { overflow-x: auto; border: 1px solid var(--paper-edge);
  border-radius: var(--radius-xl); background: var(--paper-2); }
.tendi-skin table.th-week { width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px; min-width: 940px; }
.tendi-skin table.th-week th { background: var(--cream); color: var(--ink-3); font-weight: 600;
  font-size: 11.5px; padding: 11px 12px; text-align: left;
  border-bottom: 1px solid var(--paper-edge); white-space: nowrap; }
.tendi-skin table.th-week td { padding: 9px 12px; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
.tendi-skin table.th-week tbody tr:last-child td { border-bottom: 0; }
.tendi-skin .th-wname { position: sticky; left: 0; z-index: 1; background: var(--paper-2);
  border-right: 1px solid var(--paper-edge); font-weight: 600; color: var(--ink); white-space: nowrap; }
.tendi-skin th.th-wname { background: var(--cream); z-index: 3; }
.tendi-skin .th-wslot { display: block; padding: 5px 9px; border-radius: var(--radius-sm);
  background: var(--primary-tint); color: var(--primary); font-weight: 600; margin-bottom: 4px; font-size: 11.5px; }
.tendi-skin .th-wslot small { display: block; color: var(--ink-4); font-weight: 500; }
.tendi-skin .th-wempty { color: var(--ink-5); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .tendi-skin .th-head .tnd-seg { margin-left: 0; width: 100%; }
  .tendi-skin .th-slots { grid-template-columns: 1fr; }
  .tendi-skin .th-counts.tnd-stat-grid { grid-template-columns: 1fr 1fr; }
  .tendi-skin .th-board.is-compact .th-slot { flex-wrap: wrap; }
  .tendi-skin .th-page { padding: 14px 14px 18px; }
}