/* mobile.css — the phone layer. Every rule is keyed on body.is-mobile
   (toggled by js/mobile.js at max-width 700px), so desktop is untouched by
   construction. Loaded LAST so it wins cascade ties (students.css has a
   920px rule that also matches at phone widths). */

/* ══ Day area: hour-list renderer swaps in for the grid ═══════════════════ */

body:not(.is-mobile) #day-mobile { display: none; }
body.is-mobile #day-grid { display: none; }

/* #day-view is a flex column (grid.css) — the hour view takes the grid's
   slot; the card list is the scrolling region, header stays put. */
body.is-mobile #day-mobile {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body.is-mobile .dm-hour-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

body.is-mobile .dm-hour-nav {
  flex: 0 0 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
body.is-mobile .dm-hour-nav:disabled { opacity: 0.3; }

body.is-mobile .dm-hour-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.is-mobile .dm-hour-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
body.is-mobile .dm-day-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Teacher-day mode: back link above the day header. */
body.is-mobile .dm-back-bar {
  padding: 6px 10px 0;
  background: var(--color-surface);
}
body.is-mobile .dm-back {
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

body.is-mobile .dm-pips { display: flex; gap: 4px; }
body.is-mobile .dm-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}
body.is-mobile .dm-pip.active { background: var(--color-primary); }

body.is-mobile .dm-allday {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
body.is-mobile .dm-allday-chip {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--appt-default);
}

body.is-mobile .dm-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
@keyframes dm-in-right { from { transform: translateX(24px);  opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes dm-in-left  { from { transform: translateX(-24px); opacity: 0.3; } to { transform: none; opacity: 1; } }
body.is-mobile .dm-body.dm-slide-left  { animation: dm-in-right 0.18s ease-out; }
body.is-mobile .dm-body.dm-slide-right { animation: dm-in-left  0.18s ease-out; }

body.is-mobile .dm-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 40px 12px;
}

body.is-mobile .dm-teacher { margin-bottom: 14px; }
body.is-mobile .dm-teacher-name {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  cursor: pointer;
}
/* Tappable — opens that teacher's full-day view. */
body.is-mobile .dm-teacher-name::after {
  content: ' ›';
  color: var(--color-primary);
}

body.is-mobile .dm-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--appt-default);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px var(--color-shadow);
  cursor: pointer;
}
body.is-mobile .dm-card.is-dashed { border-style: dashed; }
/* Same fill semantics as the grid cards (vars from base.css). */
.dm-card.is-high,        .dm-allday-chip.is-high        { background: var(--appt-importance-high); }
.dm-card.is-dnb,         .dm-allday-chip.is-dnb         { background: var(--appt-dnb); }
.dm-card.is-unavailable, .dm-allday-chip.is-unavailable { background: var(--appt-unavailable); }
.dm-card.is-cover,       .dm-allday-chip.is-cover       { background: var(--appt-cover); }
.dm-card.is-sick,        .dm-allday-chip.is-sick        { background: var(--appt-sick); }
.dm-card.is-online,      .dm-allday-chip.is-online      { background: var(--appt-online); }
.dm-card.is-nsn,         .dm-allday-chip.is-nsn         { background: var(--appt-nsn); }

body.is-mobile .dm-card-time {
  flex: 0 0 62px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
}
body.is-mobile .dm-card-body { flex: 1; min-width: 0; }
body.is-mobile .dm-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}
body.is-mobile .dm-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}
body.is-mobile .dm-card-meta .appt-card-loc {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
body.is-mobile .dm-card .appt-card-recurring {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Booking drawer: full-width sheet. (Keep its own z-index — modals that the
   drawer opens sit at 200 and must stay above it.) */
body.is-mobile #booking-panel { width: 100vw; }

/* ══ Header: compact chrome ═══════════════════════════════════════════════ */

body.is-mobile #user-name,
body.is-mobile #session-stats,
body.is-mobile #btn-feedback { display: none; }

/* Grid-only Day controls (availability bands / coverage sub-view / search
   highlighting) have no mobile surface; keep refresh + new booking. */
body.is-mobile #btn-toggle-availability,
body.is-mobile #btn-coverage-needed,
body.is-mobile #chrome-day #search-input { display: none; }

body.is-mobile .header-main {
  flex-wrap: wrap;
  row-gap: 6px;
}
/* At 390px the chrome buttons collide with Sign out — drop the active area's
   chrome onto its own full-width row under the tabs. */
body.is-mobile .area-chrome {
  order: 10;
  flex-basis: 100%;
  justify-content: flex-end;
}

body.is-mobile #header-meta {
  flex-wrap: wrap;
  row-gap: 4px;
}
body.is-mobile #header-meta h2 { font-size: 14px; }
body.is-mobile #day-summary,
body.is-mobile #week-summary { font-size: 11px; }

/* ══ Students: roster table → card list ═══════════════════════════════════ */

body.is-mobile .area-students .students-table thead { display: none; }
body.is-mobile .area-students .students-table,
body.is-mobile .area-students .students-table tbody { display: block; width: 100%; }

/* The 920px rule stacks .students-body to a column; the table-wrap's
   flex:1 1 0 + overflow-x:auto then collapses it to zero height (overflow
   disables the flex automatic content minimum). Size it by content. */
body.is-mobile .area-students .students-table-wrap {
  flex: none;
  overflow-x: visible;
  border: none;
  background: none;
}

body.is-mobile .area-students .students-row {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px var(--color-shadow);
  cursor: pointer;
}
body.is-mobile .area-students .students-row td {
  display: block;
  padding: 0;
  border: none;
  width: auto;
}
body.is-mobile .area-students .students-row .col-name { margin-bottom: 4px; }
body.is-mobile .area-students .students-row .col-name .students-name {
  display: inline;
  font-size: 15px;
  margin-right: 6px;
}
body.is-mobile .area-students .students-row .col-parent,
body.is-mobile .area-students .students-row .col-phone,
body.is-mobile .area-students .students-row .col-email {
  display: inline-block;
  margin-right: 12px;
  font-size: 12px;
}
/* Low-value-on-phone columns (their chips deep-link into Foldy anyway). */
body.is-mobile .area-students .students-row .col-sessions,
body.is-mobile .area-students .students-row .col-plan,
body.is-mobile .area-students .students-row .col-programs { display: none; }

/* Next appt keeps its chip — tapping it jumps to that date on the Day view. */
body.is-mobile .area-students .students-row .col-next {
  display: block;
  margin-top: 6px;
}
body.is-mobile .area-students .students-row .col-next::before {
  content: 'Next';
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: 6px;
}

/* The docked 460px side panel is pointless on a phone — row taps go straight
   to the full page (students.js branch). Hide only the docked host, never
   the full-page profile (#student-fullpage-detail). */
body.is-mobile .area-students #students-detail { display: none; }

body.is-mobile .area-students .students-search {
  flex: 1 1 100%;
  max-width: none;
}

/* ══ Students: full-page profile ══════════════════════════════════════════ */

body.is-mobile .area-students .student-fullpage { padding: 14px; }

body.is-mobile .area-students .students-detail-cols {
  flex-direction: column;
  gap: 10px;
}
/* Vertical tab rail → horizontal scroll strip. */
body.is-mobile .area-students .students-tabs {
  flex-direction: row;
  flex: none;
  overflow-x: auto;
  border-right: none;
  border-bottom: 2px solid var(--color-border);
  padding: 0 0 2px;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile .area-students .students-tab {
  white-space: nowrap;
  border-left: none;
  border-bottom: 2px solid transparent;
  margin: 0 0 -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
body.is-mobile .area-students .students-tab.active {
  border-left: none;
  border-bottom-color: var(--color-primary);
}

body.is-mobile .area-students .si-tiles { grid-template-columns: 1fr; }
body.is-mobile .area-students .students-detail-head { flex-wrap: wrap; }

/* ══ Students: Schedule tab (StudentOps) ══════════════════════════════════ */

body.is-mobile .student-list-header { display: none; }

body.is-mobile .student-row {
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 2px 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
}
body.is-mobile .student-row .student-cell-date    { font-weight: 600; }
body.is-mobile .student-row .student-cell-teacher { grid-column: 1 / 3; }
body.is-mobile .student-row .student-cell-category,
body.is-mobile .student-row .student-cell-loc     { font-size: 12px; color: var(--color-text-muted); }
body.is-mobile .student-row .student-cell-loc     { grid-column: 3 / 5; justify-self: end; }
body.is-mobile .student-row .student-cell-action  { grid-row: 1; grid-column: 4; justify-self: end; }
/* Touch has no hover — keep the row actions visible. */
body.is-mobile .student-row .student-row-action { opacity: 1; }

body.is-mobile .student-toolbar { row-gap: 8px; }
/* Month grid is unusable at phone width — list/teacher modes only. */
body.is-mobile .student-mode-btn[data-mode="calendar"] { display: none; }