/* ===========================================================================
   Calendar widget.

   Shared by the public booking page and the admin availability screen, exactly
   like the calendar.js module they both render through. It lives in its own
   file because admin.html loads admin.css instead of site.css — keeping these
   rules in site.css left the admin calendar completely unstyled, and with it
   the day--busy markers invisible, so confirmed bookings looked like they had
   vanished.

   Load order: tokens.css → calendar.css → (site.css | admin.css)
   =========================================================================== */

.calwrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.calbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.calbar__nav { display: flex; gap: var(--s2); }
.calbar__btn {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.calbar__btn:hover:not(:disabled) { background: var(--paper-3); border-color: var(--ink-mute); }
.calbar__btn:disabled { opacity: .35; cursor: not-allowed; }
.calbar__label { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--ink); }

.cals { display: grid; gap: var(--s5); padding: var(--s5); }
@media (min-width: 700px) { .cals { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

.cal__month { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; color: var(--ink); text-align: center; margin-bottom: var(--s3); }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 5px; }
.cal__dow span { text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-mute); text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.day {
  aspect-ratio: 1; min-height: 40px; border-radius: var(--r-sm);
  touch-action: manipulation;
  display: grid; place-items: center; position: relative;
  font-size: .9rem; font-weight: 550; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  padding: 0;
}
.day--pad { background: none; pointer-events: none; }
.day--free { background: #EAF6EF; color: #14603A; cursor: pointer; }
.day--free:hover { background: #CFEBDC; border-color: var(--ok); }
.day--busy { background: var(--stop-bg); color: #B04A4A; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.day--past { background: transparent; color: #C4BBB4; cursor: not-allowed; }
.day--today { border-color: var(--ink); font-weight: 750; }
.day--sel { background: var(--brand) !important; color: #fff !important; border-color: var(--brand-dark) !important; }
.day--range { background: rgba(182,5,5,.16) !important; color: var(--brand-dark) !important; }
.day--sel.day--start { border-radius: var(--r-sm) 3px 3px var(--r-sm); }
.day--sel.day--end { border-radius: 3px var(--r-sm) var(--r-sm) 3px; }

@media (max-width: 560px) {
  /* Thumb-sized targets once there is only one month on screen. Height is what
     we enforce; width follows the column, and min-width:0 stops the 1:1
     aspect-ratio from forcing the grid wider than the screen. */
  .day { min-height: 44px; min-width: 0; font-size: .95rem; }
  .cals { padding: var(--s4) var(--s3); }
  .calbar, .legend { padding-inline: var(--s4); }
}

.legend { display: flex; flex-wrap: wrap; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--paper-2); font-size: .82rem; color: var(--ink-mute); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; flex: none; }