/* tables.css (lane K2): table extensions, filters, pills, alphabar, display parts,
   list page, patient frame, report page. Tokens only; no inline styles. Mobile first. */

/* Table extensions */
.table td .cell-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
.table .money { white-space: nowrap; }
.table-dense th, .table-dense td { padding: 0.3rem var(--space-3); font-size: var(--fs-2); }
.table tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); color: var(--ink); }
.table-rowlinks tbody tr:hover { background: var(--accent-wash); }
.table td > a { color: var(--accent); font-weight: 600; }
.table td > a:hover { text-decoration: underline; }

/* Mobile "scroll": keep the table layout and scroll it inside its container. */
@media (max-width: 767px) {
  .table.table.table-mscroll { min-width: 40rem; }
  .table.table.table-mscroll:not(.table-compact) thead { position: sticky; width: auto; height: auto; overflow: visible; clip: auto; }
  .table.table.table-mscroll:not(.table-compact) tr { display: table-row; padding: 0; }
  .table.table.table-mscroll:not(.table-compact) td { display: table-cell; border-bottom: 1px solid var(--border); padding: 0.65rem var(--space-4); text-align: left !important; }
  .table.table.table-mscroll:not(.table-compact) td.right { text-align: right !important; }
  .table.table.table-mscroll:not(.table-compact) td::before { content: none; }
  .table-scroll { max-width: 100%; }
}

/* Pager */
.pager-size { display: inline-flex; align-items: center; gap: var(--space-2); }
.pager-size select, .filter-select select, .filter-date input, .subnav-select select {
  min-height: 2.25rem; padding: 0.3rem 0.6rem; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
}
.pager-page { white-space: nowrap; }

/* Filter bar extensions */
.filter-select, .filter-date { display: inline-flex; flex-direction: column; gap: 2px; }
.filter-label { font-size: var(--fs-1); font-weight: 600; color: var(--ink-muted); }
.filterbar > input[type="hidden"] { display: none; }

/* Tabs: pill (segmented switch) and scrolling bar */
.tabs-scroll { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs-scroll .tab { scroll-snap-align: start; flex: none; }
.tabs-pill { display: inline-flex; gap: 2px; padding: 0.1875rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); max-width: 100%; }
.tabs-pill .tab { border: 0; margin: 0; padding: 0.35rem var(--space-4); border-radius: var(--radius-pill); }
.tabs-pill .tab[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* Alpha bar */
.alphabar { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; margin: var(--space-2) 0; }
.alphabar ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; width: max-content; }
.alphabar li { scroll-snap-align: start; }
.alphabar a { display: grid; place-items: center; min-width: 2rem; min-height: 2.25rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-weight: 700; color: var(--ink-muted); }
.alphabar a:hover { background: var(--accent-wash); color: var(--accent); text-decoration: none; }
.alphabar a[aria-current] { background: var(--accent); color: var(--accent-ink); }

/* Stat grid */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.card-body.flush .stat-grid { margin: 0; padding: var(--space-3) var(--space-5); }

/* Avatar */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--accent-wash); color: var(--accent); font-weight: 700; border: 1px solid var(--accent-border); }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-1); }
.avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--fs-3); }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--fs-5); }

/* Skeleton */
.skeleton { display: grid; gap: var(--space-2); padding: var(--space-3) 0; }
.sk-bar { display: block; height: 0.9rem; border-radius: var(--radius-sm); background: var(--neutral-bg); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-w1 { width: 100%; } .sk-w2 { width: 80%; } .sk-w3 { width: 60%; }
@keyframes sk-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; } }

/* Prose and embed */
.prose { max-width: 70ch; line-height: 1.6; color: var(--body); }
.prose h1, .prose h2, .prose h3 { color: var(--ink); margin: var(--space-5) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-3); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose img { max-width: 100%; height: auto; }
.embed { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--surface-2); border-radius: var(--radius-md); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Plan card */
.plan-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-top: 0.25rem solid var(--accent-brand); border-radius: var(--radius-md); }
.plan-card header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan-card h3 { margin: 0; }
.plan-card.plan-teal { border-top-color: var(--teal); }
.plan-card.plan-orange { border-top-color: var(--orange); }
.plan-card.plan-purple { border-top-color: var(--purple); }
.plan-card[data-state="current"] { border-color: var(--accent); }
.plan-price { font-size: var(--fs-6); font-weight: 700; color: var(--ink); margin: 0; }
.plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.plan-features li { display: flex; gap: var(--space-2); align-items: flex-start; }
.plan-features .icon { color: var(--ok); flex: none; width: 1.1em; height: 1.1em; margin-top: 2px; }

/* List page */
/* List page: full content width, the remaining height of the window, and the table scrolls inside its own container
   (the page does not scroll). The head row of the table stays visible. Phones keep the card rows; they scroll inside the container. */
.shell-main:has(.list-page) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#main:has(> .list-page) { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0; max-width: none; margin: 0; }
#main > .list-page { flex: 1 1 auto; }
.list-page { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; }
.list-page > .table-block { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.list-page > .table-block > .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.list-page > .table-block > .pager { flex: none; }
.list-page .table thead th { z-index: 1; box-shadow: inset 0 -1px 0 var(--border); }
.list-page > .tabs, .list-page > .filterbar, .list-page > .alphabar, .list-page > .list-totals { flex: none; }
@media print {
  .shell-main:has(.list-page) { display: block; height: auto; }
  .list-page > .table-block > .table-scroll { overflow: visible; }
}
.list-page > .alphabar { margin: 0; }
.list-totals .stat-grid { margin: 0; }

/* Detail page and patient frame */
.detail-panel, .patient-panel { display: grid; gap: var(--space-3); min-width: 0; }
.patient-head .patient-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.patient-head h1 { overflow-wrap: anywhere; }
.patient-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.patient-panel > .tabs { border-bottom: 1px solid var(--border); }
.tab-body { min-width: 0; }
.tab-body:focus { outline: none; }
.subnav .tabs-pill { display: none; }
.subnav-select { display: block; }
.subnav-select select { width: 100%; }
@media (min-width: 768px) {
  .subnav .tabs-pill { display: inline-flex; }
  .subnav-select { display: none; }
}

/* Report page */
.report-page { display: grid; gap: var(--space-4); min-width: 0; }
.report-panel .table-block { padding: 0; }

/* R6 (SRR-05): classes the kit templates emit. */
.avatar-initials { font-size: var(--fs-2); letter-spacing: 0.02em; text-transform: uppercase; }
.table-foot { font-weight: 700; }