/* ============================================================
   Register Auditorium Calendar – Stylesheet  v3
   Unified CI Color: #1a3a6b (Navy Blue)
   Aligned with Meeting Room Calendar
   ============================================================ */

/* --- Color Variables --- */
:root {
  --aud-primary:               #1a3a6b;
  --aud-primary-dark:          #0f2548;
  --aud-primary-light:         #2062b8;
  --aud-primary-lighter:       #2868a8;
  --aud-primary-bg:            #eef3fb;
  --aud-today-badge:           #f5a623;
  --aud-page-bg:               #f5f2ec;
}

/* ---------- Page wrapper ---------- */
.auditorium-calendar-wrapper {
  font-family: 'Sarabun', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--aud-page-bg);
  min-height: 100vh;
  padding: 0.75rem 0.5rem;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
}

.calendar-title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 28px 0;
  display: none;
}

/* ---------- Navigation bar ---------- */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.calendar-nav__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.calendar-week-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--aud-primary);
}

.btn-nav {
  display: inline-block;
  background: var(--aud-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-nav:hover { background: var(--aud-primary-dark); color: #fff; text-decoration: none; }

.today-badge {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--aud-primary);
  border-radius: 20px;
  padding: 3px 18px;
  font-size: 0.85rem;
  color: var(--aud-primary);
}
.today-badge--link {
  text-decoration: none;
  cursor: pointer;
  color: var(--aud-primary);
}
.today-badge--link:hover { background: var(--aud-primary-bg); }

/* ---------- Calendar outer container ---------- */
.calendar-grid-container {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
}

/* ---------- Header row ---------- */
.calendar-header-row {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  background: var(--aud-primary);
  border-bottom: 2px solid var(--aud-primary-dark);
}

.cal-head {
  color: #fff;
  text-align: center;
  padding: 10px 4px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}
.cal-head--time {
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-head--day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
/* Weekend: matches mrc-table__day-header--weekend (#243a5e) */
.cal-head--day.is-weekend { background: #243a5e; }

.day-name   { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; opacity: 0.85; }
.day-number { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.day-month  { font-size: 0.7rem; opacity: 0.8; }

/* Today circle — matches mrc today badge color */
.today-circle {
  background: var(--aud-today-badge);
  color: var(--aud-primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Calendar body (scrollable) ---------- */
.calendar-body {
  position: relative;
  overflow: hidden;
}

/* ---------- Background grid ---------- */
.calendar-bg-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  height: 100%;
  position: absolute;
  inset: 0;
}

.bg-time-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #d0d0d0;
}

.bg-time-cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px 8px 0 0;
  font-size: 0.76rem;
  color: #999;
  font-weight: 500;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  flex-shrink: 0;
}

.bg-day-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e5e5;
}
/* Weekend: matches mrc-table__cell--weekend (#f0f0f0) */
.bg-day-col.is-weekend { background: #f0f0f0; }

.bg-day-cell {
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* ---------- Event overlay layer ---------- */
.calendar-events-layer {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.events-time-spacer {
  /* matches the time column – no events here */
}

.events-day-col {
  position: relative;
  pointer-events: none;
}

/* ---------- Individual event block ---------- */
.calendar-event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 5px;
  padding: 5px 7px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: all;
  cursor: default;
  box-sizing: border-box;
  z-index: 10;
  font-size: 0.76rem;
}

.calendar-event:not(.is-first-day) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.calendar-event:not(.is-last-day) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.event-label {
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-time {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.92;
  white-space: nowrap;
  margin-top: auto;
}

.event-clock-icon { font-size: 0.68rem; }

/* ── Color variants ── */

/* Approved – main event (วันจัดงาน) = DARK NAVY — matches mrc-booking--confirmed */
.event-approved-main {
  background: linear-gradient(170deg, var(--aud-primary-light) 0%, var(--aud-primary) 100%);
  color: #fff;
  border-left: 3px solid var(--aud-primary-dark);
  box-shadow: 0 2px 8px rgba(26, 58, 107, 0.25);
}

/* Approved – sub (เตรียมงาน / ซ้อม / เก็บงาน) = LIGHT BLUE */
.event-approved-sub {
  background: linear-gradient(170deg, #6aaee0 0%, var(--aud-primary-lighter) 100%);
  color: #fff;
  border-left: 3px solid var(--aud-primary-light);
  box-shadow: 0 2px 8px rgba(40, 104, 168, 0.25);
}

/* Pending – main event (วันจัดงาน) = MID GREY */
.event-pending-main {
  background: linear-gradient(170deg, #8a8a8a 0%, #606060 100%);
  color: #fff;
  border-left: 3px solid #484848;
}

/* Pending – sub (เตรียมงาน / ซ้อม / เก็บงาน) = LIGHT GREY */
.event-pending-sub {
  background: linear-gradient(170deg, #d4d4d4 0%, #b8b8b8 100%);
  color: #555;
  border-left: 3px solid #9a9a9a;
}

/* ---------- Legend ---------- */
.calendar-legend {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 14px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #444;
}

.legend-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #ccc;
  flex-shrink: 0;
}
.legend-swatch--empty          { background: #fff; }
.legend-swatch--approved-main  { background: var(--aud-primary); border-color: var(--aud-primary-dark); }
.legend-swatch--pending-main   { background: #707070; border-color: #484848; }
.legend-swatch--weekend        { background: #f0f0f0; border-color: #ccc; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .calendar-header-row,
  .calendar-bg-grid,
  .calendar-events-layer {
    grid-template-columns: 52px repeat(7, 1fr);
  }
  .calendar-title { font-size: 1.4rem; }
  .btn-nav        { padding: 8px 12px; font-size: 0.8rem; }
  .day-number     { font-size: 1.1rem; }
  .bg-time-cell   { font-size: 0.68rem; padding-right: 5px; }
}

@media (max-width: 768px) {
  .auditorium-calendar-wrapper {
    padding: 0.5rem 0.25rem;
  }

  .calendar-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .calendar-nav__center {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .btn-nav--prev { order: 0; }
  .btn-nav--next { order: 1; }

  .calendar-header-row,
  .calendar-bg-grid,
  .calendar-events-layer {
    grid-template-columns: 44px repeat(7, 1fr);
  }

  .day-number { font-size: 0.95rem; }
  .day-month  { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .btn-nav,
  .today-badge {
    display: none;
  }

  .auditorium-calendar-wrapper {
    padding: 0;
    background: #ffffff;
    min-height: unset;
  }

  .calendar-grid-container {
    box-shadow: none;
    border-radius: 0;
  }

  .calendar-event {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none;
  }
}