/* =========================================================
   calendar.css — ปฏิทินว่าง/ไม่ว่าง 30 วัน (หน้าบ้าน + หลังบ้าน)
   ========================================================= */
.cal { --free: #E3F6EA; --free-ink: #0F7A3D; --booked: #FDE7E7; --booked-ink: #B42323; }
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; }
.cal__head { margin-bottom: .375rem; }
.cal__head span { font-size: var(--fs-xs); text-align: center; color: var(--c-muted); }
.cal__day {
  position: relative; display: grid; place-content: center; justify-items: center;
  aspect-ratio: 1; border-radius: 10px; line-height: 1.1; user-select: none;
}
.cal__num { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cal__day small { min-height: 1em; font-size: .6875rem; opacity: .75; }
.cal__day.is-free { background: var(--free); color: var(--free-ink); }
.cal__day.is-booked { background: var(--booked); color: var(--booked-ink); }
.cal__day.is-booked .cal__num { text-decoration: line-through; }

.cal__legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--c-muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cal__legend i { width: 12px; height: 12px; border-radius: 4px; }
.cal__legend .is-free { background: var(--free); border: 1px solid var(--free-ink); }
.cal__legend .is-booked { background: var(--booked); border: 1px solid var(--booked-ink); }

/* โหมดแก้ไข (หลังบ้าน) — ติ๊ก = ไม่ว่าง */
.cal--edit .cal__day { cursor: pointer; background: var(--free); color: var(--free-ink); transition: background-color .15s; }
.cal--edit .cal__day input { position: absolute; opacity: 0; pointer-events: none; }
.cal--edit .cal__day:has(input:checked) { background: var(--booked); color: var(--booked-ink); }
.cal--edit .cal__day:has(input:checked) .cal__num { text-decoration: line-through; }
.cal--edit .cal__day:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* วันที่ผ่านไปแล้วในเดือนนี้ */
.cal__day.is-past, .cal--edit .cal__day.is-past { background: transparent; color: var(--c-muted); opacity: .45; cursor: default; }
.cal__day small:empty::before { content: "\00a0"; }