/* booking-slot-picker.css
 *
 * Styling for the patient BookingSlotPicker widget ported from
 * medical-assessment's ScheduleSlotComponent. Visual goals:
 *
 * - Soft, calm card surface so the picker reads as a discrete step in
 *   the patient flow.
 * - Day grouping that uses a strong heading + a responsive grid of
 *   time buttons.
 * - Clear "selected" state on the chosen slot, with a confirm CTA at
 *   the bottom-right.
 *
 * All class names start with ``bsp-`` to keep the widget self-contained
 * and avoid colliding with the surrounding ACI patient page styles.
 */

.bsp-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.bsp-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bsp-title {
  font-size: 18px;
  font-weight: 600;
  color: #1c2b30;
  margin: 0;
}

.bsp-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: #4a5a60;
  margin: 0;
}

.bsp-tz {
  font-size: 12px;
  color: #7a8a90;
  margin: 0;
}

.bsp-banner {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}

.bsp-banner--error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: #842029;
}

.bsp-banner--info {
  background: #fff4d6;
  border: 1px solid #f4dc8e;
  color: #6b5314;
}

/* Day dropdown + the selected day's times, stacked. Replaces the cramped
   left-hand day rail. */
.bsp-pick {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bsp-day-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 340px;
}

.bsp-day-field-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7a80;
}

.bsp-day-select-wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.bsp-day-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 36px 10px 13px;
  border: 1px solid #d4dee2;
  border-radius: 10px;
  background: #ffffff;
  color: #1c2b30;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bsp-day-select:hover {
  border-color: #d06c52;
}

.bsp-day-select:focus {
  outline: none;
  border-color: #d06c52;
  box-shadow: 0 0 0 3px rgba(208, 108, 82, 0.16);
}

.bsp-day-select-caret {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7a80;
  font-size: 11px;
}

.bsp-times {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bsp-times-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2c3a40;
}

.bsp-time-grid {
  display: grid;
  /* Fixed-width compact cards (not stretched to fill the row), so a day with a
     couple of slots reads as a tidy set of chips rather than huge panels. */
  grid-template-columns: repeat(auto-fill, minmax(132px, 148px));
  gap: 8px;
  justify-content: start;
}

.bsp-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d4dee2;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #2c3a40;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.bsp-slot:hover {
  border-color: #d06c52;
  background: #f4f8f7;
}

.bsp-slot--selected {
  background: #d06c52;
  border-color: #d06c52;
  color: #ffffff;
}

/* Hover darkens the accent terracotta, matching the app-wide pattern
   (e.g. the atlas/form-fill primary buttons) — never a green swap. */
.bsp-slot--selected:hover {
  background: #b9583f;
  border-color: #b9583f;
}

.bsp-slot-time {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Optional per-slot owner annotation (staff cross-clinician pickers only). */
.bsp-slot-who {
  font-size: 11.5px;
  color: #5a6b72;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.bsp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.bsp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bsp-btn--primary {
  background: #d06c52;
  color: #ffffff;
  border-color: #d06c52;
}

.bsp-btn--primary:hover:not(:disabled) {
  background: #b9583f;
  border-color: #b9583f;
}

.bsp-btn--ghost {
  background: transparent;
  color: #4a5a60;
  border-color: transparent;
  /* No horizontal padding: the ghost link is the outer-most thing at its end
     of the actions row, so padding would inset it from the edge the time grid
     above it aligns to. Vertical padding is kept for the tap target. */
  padding-left: 0;
  padding-right: 0;
}

/* Underline the words only, so the refresh icon isn't struck through. */
.bsp-btn--ghost .bsp-btn-label {
  text-decoration: underline;
}

.bsp-btn--ghost:hover:not(:disabled) {
  color: #1c2b30;
}

/* Pressed feedback: the click accent matches the picker's terracotta. */
.bsp-btn--ghost:active:not(:disabled) {
  color: #d06c52;
}

.bsp-btn--ghost:focus-visible {
  outline: 2px solid #d06c52;
  outline-offset: 3px;
  border-radius: 6px;
}

/* While refreshing the control stays legible (the generic disabled 0.5 fade
   reads as "broken" rather than "working"), and the icon spins. */
.bsp-btn--ghost:disabled {
  opacity: 1;
  color: #d06c52;
  cursor: progress;
}

.bsp-btn-spin {
  animation: bsp-spin 0.8s linear infinite;
}

@keyframes bsp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bsp-btn-spin {
    animation: none;
  }
}