/*
 * holidays.css — public-holiday awareness UI.
 * Pairs with public/js/holidays.js. Purely informational styling: nothing here
 * marks a field invalid or implies the date cannot be booked.
 */

/* ── Non-blocking notice under a date field ───────────────────────────────── */
.ve-hol-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  background: #FFFBEB;
  color: #78350F;
  font-size: 13px;
  line-height: 1.5;
  animation: ve-hol-in 180ms ease-out;
}

@keyframes ve-hol-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ve-hol-alert { animation: none; }
}

.ve-hol-alert[hidden] { display: none; }

.ve-hol-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.35;
  color: #D97706;
}

.ve-hol-body { flex: 1 1 auto; min-width: 0; }

.ve-hol-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #92400E;
  margin-bottom: 4px;
}

.ve-hol-more {
  font-weight: 600;
  font-size: 11.5px;
  opacity: .75;
}

.ve-hol-single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ve-hol-list {
  margin: 0 0 6px;
  padding-left: 18px;
}

.ve-hol-list li { margin-bottom: 3px; }

.ve-hol-date {
  font-weight: 600;
  color: #92400E;
}

/* Scope badges — Perak's own holidays get the strongest treatment, since
   they are the ones most easily overlooked. */
.ve-hol-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.ve-hol-badge-state    { background: #4C1D95; color: #FFFFFF; }
.ve-hol-badge-regional { background: #E9D5FF; color: #5B21B6; }
.ve-hol-badge-national { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }

.ve-hol-subject {
  display: inline-block;
  font-size: 10.5px;
  font-style: italic;
  color: #9A3412;
  opacity: .9;
}

.ve-hol-note {
  margin: 0;
  font-size: 12.5px;
  color: #7C4A12;
  line-height: 1.5;
}

/* ── FullCalendar day tinting ─────────────────────────────────────────────────
   Applied to day cells by holidays.js. No events are added to the calendar, so
   event counts, filters and day lists elsewhere are unaffected. */
.fc .fc-daygrid-day.ve-holiday-day,
.fc .fc-timegrid-col.ve-holiday-day,
.fc .fc-col-header-cell.ve-holiday-day {
  background-color: rgba(245, 158, 11, .13);
}

.fc .fc-daygrid-day.ve-holiday-day .fc-daygrid-day-number,
.fc .fc-col-header-cell.ve-holiday-day .fc-col-header-cell-cushion {
  color: #92400E;
  font-weight: 700;
}

/* Perak's own holidays read as distinctly different from national ones. */
.fc .fc-daygrid-day.ve-holiday-scope-state,
.fc .fc-timegrid-col.ve-holiday-scope-state,
.fc .fc-col-header-cell.ve-holiday-scope-state {
  background-color: rgba(124, 58, 237, .13);
}

.fc .fc-daygrid-day.ve-holiday-scope-state .fc-daygrid-day-number,
.fc .fc-col-header-cell.ve-holiday-scope-state .fc-col-header-cell-cushion {
  color: #5B21B6;
}

/* The holiday name inside a month-view cell */
.ve-hol-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 1px 3px 2px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(245, 158, 11, .22);
  color: #78350F;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  pointer-events: none;   /* never steals a day/event click */
}

.ve-hol-chip-state {
  background: rgba(124, 58, 237, .2);
  color: #4C1D95;
}

.ve-hol-chip-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D97706;
}

.ve-hol-chip-state .ve-hol-chip-dot { background: #7C3AED; }

.ve-hol-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Month view: the chip sits on the day-number row, which FullCalendar keeps
   clear of event bars — so a fully booked day still names its holiday.
   .fc-daygrid-day-top is row-reverse (number on the right); margin-right:auto
   pushes the chip to the opposite edge. Kept to one nowrap line so it never
   grows the row and knocks the cell out of alignment with spanning events. */
.fc .fc-daygrid-day-top {
  align-items: center;
  min-width: 0;
}

.ve-hol-chip-top {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 30px);
  margin: 0 auto 0 4px;
  padding: 1px 5px;
  font-size: .56rem;
  position: relative;
  z-index: 2;
}

/* Week / day view: inline beside the column header date, so the header keeps
   the single-line height FullCalendar measured it at. */
.ve-hol-chip-header {
  display: inline-flex;
  vertical-align: middle;
  max-width: 14ch;
  margin: 0 0 0 5px;
  padding: 1px 5px;
}

/* ── Day View sidebar card ────────────────────────────────────────────────────
   Holidays are context, not bookings, so they sit above the booking rows with
   their own treatment rather than being styled as another .day-item. */
.day-holiday {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: var(--radius-md, 8px);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
}

.day-holiday-state {
  background: #F5F3FF;
  border-color: #DDD6FE;
  border-left-color: #7C3AED;
}

.day-holiday-icon {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.35;
  color: #D97706;
}

.day-holiday-state .day-holiday-icon { color: #7C3AED; }

.day-holiday-body { flex: 1 1 auto; min-width: 0; }

.day-holiday-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #92400E;
  line-height: 1.3;
}

.day-holiday-state .day-holiday-name { color: #5B21B6; }

.day-holiday-meta {
  font-size: 11px;
  color: #A16207;
  margin-top: 1px;
}

.day-holiday-state .day-holiday-meta { color: #6D28D9; }

/* ── Compact legend, for calendars that show one ──────────────────────────── */
.ve-hol-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted, #6b7280);
}

.ve-hol-legend .ve-hol-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: rgba(245, 158, 11, .55);
  display: inline-block;
}

.ve-hol-legend .ve-hol-swatch.state { background: rgba(124, 58, 237, .55); }

@media (max-width: 576px) {
  .ve-hol-alert { font-size: 12.5px; padding: 10px 12px; }
  .ve-hol-note  { font-size: 12px; }

  /* Month cells get too narrow for a name; the dot plus the day tint still
     signal the holiday, and the cell's title attribute still names it. */
  .ve-hol-chip-top .ve-hol-chip-text { display: none; }
  .ve-hol-chip-top { padding: 2px 3px; }
}