/* Today's schedule: tiles, then a table per day with the same columns. */

.schedule-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.schedule-filter { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--text-tertiary); }
.schedule-filter select { color: var(--text-primary); }
.schedule-days { display: flex; align-items: center; gap: 6px; }
.schedule-days .btn-md { min-width: 34px; padding: 0 10px; }

.day-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.day-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.day-meta { font-size: var(--text-meta); color: var(--text-muted); }

/* The design's grid: 64px 1.4fr 1fr 1.6fr 1fr 140px with 16px gaps. */
.schedule-table { min-width: 860px; table-layout: fixed; }
.schedule-table th { box-sizing: border-box; }
.schedule-table th:nth-child(1) { width: 80px; }
.schedule-table th:nth-child(2) { width: 22.5%; }
.schedule-table th:nth-child(3) { width: 16%; }
.schedule-table th:nth-child(4) { width: 25.7%; }
.schedule-table th.col-check-in { width: 174px; text-align: right; }
/* Later days show no header row; it stays for screen readers, at no height. */
.schedule-table-later thead th { height: 0; padding-top: 0; padding-bottom: 0; border: 0; font-size: 0; line-height: 0; overflow: hidden; }
.schedule-table tbody tr { cursor: pointer; }
.schedule-table tbody tr:hover td { background: var(--bg-muted-2); }
.schedule-table tr.row-high td { background: oklch(0.99 0.006 27); }
.schedule-table tr.row-high:hover td { background: oklch(0.975 0.012 27); }
.schedule-table .time { font-size: var(--text-base); font-weight: 500; white-space: nowrap; }
.schedule-table .practitioner { color: var(--text-secondary); }
.schedule-table .check-in { text-align: right; }

.row-title { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.row-title:hover { color: var(--text-primary); text-decoration: underline; }

.flag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.history-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.history-cell .table-sub { flex-basis: 100%; }
.history-cell form { margin: 0; }

.arrived { font-size: var(--text-meta); font-weight: 500; color: var(--accent); white-space: nowrap; }
.arrived-closed { color: var(--text-muted); }
.check-in-action { display: flex; justify-content: flex-end; margin: 0; }
.check-in-button:hover { background: var(--text-primary); color: #fff; box-shadow: none; }

@media (max-width: 48rem) {
  .schedule-filters { width: 100%; }
}

/* Phone: each Appointment is a card, with 44px buttons. */
@media (max-width: 40rem) {
  .schedule .table-card { overflow: visible; border: 0; background: none; }
  .schedule-table, .schedule-table tbody { display: block; min-width: 0; }
  .schedule-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .schedule-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .schedule-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "time patient history" ". practitioner practitioner" "flags flags check-in";
    align-items: center;
    gap: 6px 10px;
    padding: 14px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-dialog);
    background: var(--bg-surface);
  }
  .schedule-table tbody tr td,
  .schedule-table tbody tr:hover td,
  .schedule-table tr.row-high td { display: block; padding: 0; border: 0; background: none; }
  .schedule-table tr.row-high { background: oklch(0.99 0.006 27); }
  .schedule-table .time { grid-area: time; align-self: baseline; font-size: var(--text-base); }
  .schedule-table .patient { grid-area: patient; align-self: baseline; }
  .schedule-table .patient .row-title { font-size: 15px; font-weight: 600; }
  .schedule-table .practitioner { grid-area: practitioner; font-size: var(--text-sm); }
  .schedule-table .fetch-status { grid-area: history; justify-self: end; font-size: var(--text-sm); }
  .schedule-table .open-flags { grid-area: flags; margin-top: 4px; }
  .schedule-table .check-in { grid-area: check-in; margin-top: 4px; }
  .schedule-table .check-in:empty { display: none; }
  .schedule-table .check-in-button { height: 44px; padding: 0 16px; border-radius: var(--radius-tile); font-size: var(--text-md); }
  .schedule-table .history-cell .link-action { min-height: 44px; }
  .schedule-table-later tbody tr { grid-template-areas: "time patient history"; }
  .schedule-table-later .practitioner, .schedule-table-later .open-flags { display: none; }
}

/* Tablet: the table fits the width instead of scrolling. */
@media (min-width: 40.01rem) and (max-width: 60rem) {
  .schedule-table { min-width: 0; }
  .schedule-table th:nth-child(1) { width: 64px; }
  .schedule-table th.col-check-in { width: 112px; }
  .schedule-table td, .schedule-table th { padding-left: 12px; padding-right: 12px; }
}