/* ============================================================
   calendar.css — Main calendar UI
   KAT SYC Availability Calendar
   ============================================================ */

/* ── CSS variables (light mode) ── */
:root {
  --bg:            #FAF9F6;
  --surface:       #FFFFFF;
  --text:          #1C1C1A;
  --muted:         #7A7970;
  --border:        #E5E3DC;
  --accent:        #2D5A3D;
  --accent-light:  #EAF2EC;

  --band-color:    #D0E6D8;   /* mid-stay bar fill */
  --band-text:     #1C3D27;   /* number on the bar */

  --checkin-bg:    #2D5A3D;   /* check-in circle */
  --checkin-text:  #ffffff;
  --checkin-label: #2D5A3D;

  --checkout-bg:   #7B2D1E;   /* check-out circle */
  --checkout-text: #ffffff;
  --checkout-label:#7B2D1E;

  --today-ring:    #2D5A3D;
  --radius:        14px;
}

/* ── CSS variables (dark mode) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #141412;
    --surface:       #1E1E1B;
    --text:          #F0EEE8;
    --muted:         #9A9890;
    --border:        #2E2D28;
    --accent:        #5BAF7A;
    --accent-light:  #1A2E20;

    --band-color:    #1A3526;
    --band-text:     #9FE1CB;

    --checkin-bg:    #3D7A53;
    --checkin-text:  #ffffff;
    --checkin-label: #5BAF7A;

    --checkout-bg:   #8B3A2A;
    --checkout-text: #ffffff;
    --checkout-label:#E8957A;

    --today-ring:    #5BAF7A;
  }
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 5rem;
}

/* ── Header ── */
header {
  text-align: center;
  margin-bottom: 1.75rem;
}

header h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

header p {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 300;
}

/* ── Sync status pill ── */
#status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  padding: 0.45rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.dot.loading { background: #E0A000; animation: pulse 1s infinite; }
.dot.ok      { background: #2D8A4E; }
.dot.err     { background: #A82B1A; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Legend ── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  justify-content: center;
  margin-bottom: 2rem;
  font-size: 0.81rem;
  color: var(--muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lsw {
  width: 28px;
  height: 16px;
  border-radius: 4px;
}

.lsw-avail { background: var(--surface); border: 1px solid var(--border); }
.lsw-band  { background: var(--band-color); }
.lsw-ci    { background: var(--checkin-bg);  border-radius: 8px 0 0 8px; }
.lsw-co    { background: var(--checkout-bg); border-radius: 0 8px 8px 0; }

/* ── Month grid container ── */
#calendars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 1000px;
}

/* ── Month card ── */
.month-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem 1rem;
}

.month-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  padding-left: 4px;
}

/* ── Weekday header row ── */
.day-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.day-label {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  padding: 3px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Week rows ── */
.week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  margin-bottom: 2px;
}

/* Continuous booking band (rendered behind day cells) */
.band-segment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  background: var(--band-color);
  pointer-events: none;
  z-index: 0;
}

/* ── Day cell ── */
.day-cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text);
  cursor: default;
  user-select: none;
  border-radius: 8px;
}

.day-cell .num { line-height: 1; }

.day-cell .tag {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1;
  opacity: 0;           /* hidden by default; shown for checkin/checkout */
}

.day-cell.empty   { pointer-events: none; }
.day-cell.past    { opacity: 0.38; }

.day-cell.available:hover {
  background: var(--accent-light);
  color: var(--accent);
}

/* Mid-stay (on the band) */
.day-cell.mid {
  color: var(--band-text);
  font-weight: 400;
  background: transparent;
}

/* Check-in circle cap */
.day-cell.checkin {
  background: var(--checkin-bg);
  color: var(--checkin-text);
  font-weight: 500;
  border-radius: 50%;
}

/* Check-out circle cap */
.day-cell.checkout {
  background: var(--checkout-bg);
  color: var(--checkout-text);
  font-weight: 500;
  border-radius: 50%;
}

/* Same-day check-in & check-out */
.day-cell.checkin.checkout {
  background: conic-gradient(var(--checkin-bg) 180deg, var(--checkout-bg) 180deg);
  border-radius: 50%;
}

/* Labels below the circle */
.day-cell.checkin  .tag,
.day-cell.checkout .tag {
  position: absolute;
  bottom: -13px;
  font-size: 0.48rem;
  white-space: nowrap;
  opacity: 1;
}

.day-cell.checkin  .tag { color: var(--checkin-label); }
.day-cell.checkout .tag { color: var(--checkout-label); }

/* Today highlight ring */
.day-cell.today::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid var(--today-ring);
  pointer-events: none;
  z-index: 2;
}

.day-cell.checkin.today::before,
.day-cell.checkout.today::before {
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── Upcoming bookings list ── */
#booking-list {
  width: 100%;
  max-width: 1000px;
  margin-top: 2rem;
}

.booking-list-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  text-align: center;
}

.booking-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
}

.booking-item .bi-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.booking-item .bi-date {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}

.booking-item .bi-nights {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.bi-ci-dot,
.bi-co-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.bi-ci-dot { background: var(--checkin-bg); }
.bi-co-dot { background: var(--checkout-bg); }

/* ── Footer ── */
#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

#refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

#refresh-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

#last-synced {
  font-size: 0.76rem;
  color: var(--muted);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .booking-item {
    grid-template-columns: 1fr 1fr;
  }
  .booking-item .bi-nights {
    grid-column: 1 / -1;
    justify-self: start;
  }
}