html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===========================
   Calendar
   =========================== */

/* Booking calendar — row backgrounds, clickability, and day headers.
   Used by Views/Booking/Calendar.cshtml, Views/BookingAdmin/Calendar.cshtml,
   and their _CalendarList / _CalendarListAdmin partials.
   Three background tiers:
     - day header 
     - other users
     - viewer's own */

.calendar-day-header {
  background-color: #d8d9da;
}

.booking-other {
  background-color: #f0f1f2;
}

/* Only clickable rows react to hover — a hover effect on a non-clickable
   row would falsely signal that it can be opened. */
.booking-clickable {
  cursor: pointer;
}

/* Clickable rows darken slightly on hover. Own rows (white) and other
 users' rows (grey) each step down to their own hover shade. */
.booking-clickable:hover {
  background-color: #f7f8f9;
}

.booking-other.booking-clickable:hover {
  background-color: #e8e9ea;
}

/* Separator line between calendar rows and day headers. */
.booking-row,
.calendar-day-header {
  border-bottom: 1px solid #888;
}

/* ===========================
   MyBookings
   =========================== */
/* MyBookings list — four background tiers by booking state.
   Two axes: time (upcoming vs past) and status (active vs cancelled).
   Used by Views/Booking/MyBookings.cshtml and its _MyBookingsList partial.
   Distinct from the calendar's row classes above — different meaning, so
   different classes rather than reusing .booking-other etc.
     - upcoming active   : white, the normal current rows
     - upcoming cancelled: red tint, has an Uncancel action
     - past active       : grey, receded
     - past cancelled    : grey with a faint red cast, most receded
   Only the upcoming tiers get a hover shade — past rows have no action, so
   a hover effect would falsely signal they can be interacted with. */

.mybooking-upcoming-active {
  background-color: #ffffff;
}

/* Upcoming-active rows are clickable (whole row → Calendar edit). The
  .booking-clickable cursor:pointer is already defined in the calendar
  block above; this is just the hover shade for the upcoming-active tier.
  Other MyBookings tiers are not clickable and get no hover. */
.mybooking-upcoming-active.booking-clickable:hover {
  background-color: #f2f4f6;
}

.mybooking-upcoming-cancelled {
  background-color: #fbeaea;
}

.mybooking-upcoming-cancelled:hover {
  background-color: #f4dede;
}

.mybooking-past-active {
  background-color: #eef0f1;
}

.mybooking-past-cancelled {
  background-color: #f1e9ea;
}

/* Cancelled bookings — struck through. Applied to the date/time line of both
   upcoming-cancelled and past-cancelled rows. The strikethrough marks the
   booking as not in effect; the row itself stays readable because an
   upcoming cancelled booking can still be uncancelled. */
.mybooking-cancelled-text {
  text-decoration: line-through;
}

/* ===========================
   Forms
   =========================== */
/* Boxed forms (Bootstrap card) opt in with the .form-card class. The card
   body is a soft grey and the header a step darker, so the white inputs
   inside stand out. Inputs need no rule — Bootstrap's .form-control is
   already white. Plain inline forms do not use .form-card and stay as-is.
   Defined once here; never set form-card colours inline per form. */

.form-card .card-body {
  background-color: #eeeeee;
  padding: 0.5rem;
}

.form-card .card-header {
  background-color: #e0e0e0;
}

.form-card .mb-2 {
  margin-bottom: 0.35rem !important;
}

/* Note text on booking rows — user notes, admin comment, admin notes.
   pre-wrap so multi-line notes render with their line breaks intact. */
.booking-note {
  white-space: pre-wrap;
}