/* availability-grid.css — shared styles for the weekly availability grid widget
   (window.AvailabilityGrid). Linked by account.html (student) and admin.html (admin). */

/* My Availability grid (Phase 1) */
.avail-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.avail-preset-btn {
  /* var(--white) (not #fff) so the pill follows the theme — in dark mode #fff
     gave white text (var(--text)) on a white pill = invisible labels. */
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
.avail-preset-btn:hover { border-color: var(--green); }
/* Active (toggled-on) band pill — matches the selected-slot green exactly. */
.avail-preset-btn.avail-preset-on {
  background: var(--green-light); border-color: var(--green); color: var(--green-dark); font-weight: 600;
}
.avail-preset-clear { margin-left: auto; }
/* Single stacked-by-day column on narrow screens; day blocks flow into
   multiple columns on wider screens (spec §6 — not a transposed matrix). */
.avail-grid { display: grid; grid-template-columns: 1fr; gap: 14px 24px; }
@media (min-width: 720px) {
  .avail-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.avail-oor { margin-top: 14px; padding: 12px; border: 1px solid var(--yellow); border-radius: 10px; background: #fffdf3; }
.avail-oor-note { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.avail-day-label { font-weight: 600; margin-bottom: 6px; }
.avail-hours { display: flex; flex-wrap: wrap; gap: 6px; }
.avail-cell {
  /* var(--white) keeps cells on the card surface in both themes (was #fff →
     white boxes in dark mode). min-height lifts the tap target toward 44px. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; min-width: 56px; cursor: pointer;
}
.avail-cell-on {
  background: var(--green-light); border-color: var(--green); color: var(--green-dark); font-weight: 600;
}
.avail-cell:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Coach per-day recurring editor */
.coach-schedule { display: flex; flex-direction: column; gap: 10px; }
.coach-schedule-unavailable { color: #a00; }
/* minmax(0, 1fr): let the time-block track shrink below its content's
   min-width on narrow screens; paired with .coach-day-block wrapping below so
   the end-time <select> drops to a new line instead of overflowing the page
   (was: horizontal scroll + clipped select at 320–360px). */
.coach-day-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: start; gap: 8px; }
.coach-day-toggle { padding-top: 5px; font-weight: 600; }
.coach-day-off { color: #999; }
.coach-day-block { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px; margin-bottom: 6px; }
.coach-day-block-del:disabled { opacity: 0.35; cursor: default; }
.coach-day-add-block { background: none; border: none; color: #2563c9; cursor: pointer; padding: 0; }
.coach-day-allbiz { display: block; color: #555; font-size: 13px; margin-top: 4px; }