/* ================================================================
   calendar.css — Date picker rendering styles
   ================================================================ */

/* ── Calendar container ─────────────────────────────────────────── */
.cal-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  user-select: none;
}

/* ── Month nav header ───────────────────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-month-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243,244,248,0.5);
}

.cal-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cal-nav-btn:hover:not(:disabled) {
  border-color: var(--line-2);
  color: var(--fg);
  background: rgba(255,255,255,0.05);
}

.cal-nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ── Day-of-week row ────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-dow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(243,244,248,0.25);
  text-align: center;
  padding: 4px 0;
  margin-bottom: 2px;
}

/* ── Day cells ──────────────────────────────────────────────────── */
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: var(--radius);
  transition: background 0.1s, color 0.1s;
  cursor: default;
  position: relative;
}

/* Selectable days */
.cal-day.selectable {
  color: rgba(243,244,248,0.65);
  cursor: pointer;
}

.cal-day.selectable:hover {
  background: rgba(46,247,199,0.1);
  color: var(--aqua);
}

/* Past days */
.cal-day.past {
  color: rgba(243,244,248,0.15);
}

/* Weekend days */
.cal-day.weekend {
  color: rgba(243,244,248,0.12);
}

/* Blacked out / unavailable */
.cal-day.blackout {
  color: rgba(243,244,248,0.1);
  text-decoration: line-through;
  text-decoration-color: rgba(243,244,248,0.1);
}

/* Fully booked */
.cal-day.full {
  color: rgba(254,95,85,0.35);
}

.cal-day.full::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(254,95,85,0.5);
}

/* Selected start date */
.cal-day.selected-start {
  background: var(--aqua);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

/* In-range dates (between start and end) */
.cal-day.in-range {
  background: rgba(46,247,199,0.1);
  color: rgba(46,247,199,0.85);
  border-radius: 0;
}

/* Delivery / end date */
.cal-day.delivery {
  background: rgba(46,247,199,0.6);
  color: var(--ink);
  font-weight: 700;
}

/* Today marker */
.cal-day.today::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--aqua);
  opacity: 0.5;
}

/* Min-date indicator (earliest selectable) */
.cal-day.min-date {
  /* no special style, just the hover shows it's selectable */
}

/* ── Legend ─────────────────────────────────────────────────────── */
.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-swatch.start   { background: var(--aqua); }
.legend-swatch.range   { background: rgba(46,247,199,0.15); border: 1px solid rgba(46,247,199,0.3); }
.legend-swatch.deliver { background: rgba(46,247,199,0.6); }
.legend-swatch.blocked { background: transparent; border: 1px dashed rgba(243,244,248,0.15); }

/* ── Full-month blocked banner ──────────────────────────────────── */
.cal-month-full {
  text-align: center;
  padding: 24px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(254,95,85,0.6);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Calendar nav buttons must be at least 44px tap target on touch */
  .cal-nav-btn {
    width: 44px;
    height: 44px;
  }

  /* Day cells: larger tap area */
  .cal-day {
    min-height: 44px;
  }
}

@media (max-width: 400px) {
  .cal-day { font-size: 10px; }
  .cal-dow { font-size: 9px; }
}

/* ── Deadline mode ──────────────────────────────────────────── */

/* Zone-blocked — too close, non-selectable (similar to past/weekend) */
.cal-day.zone-blocked {
  color: rgba(243, 244, 248, 0.1);
  cursor: not-allowed;
}

/* Zone-rush — amber tint, selectable, rush fee applies */
.cal-day.zone-rush {
  color: rgba(244, 208, 111, 0.55);
  cursor: pointer;
}

.cal-day.zone-rush:hover {
  background: rgba(244, 208, 111, 0.12);
  color: var(--jasmine);
}

/* Zone-normal — standard selectable (inherits .selectable styling) */
/* .zone-normal is intentionally unstyled — .selectable handles hover */

/* Selected deadline date — matches selected-start treatment */
.cal-day.selected-deadline {
  background: var(--aqua);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

/* Calculated production-start — matches delivery treatment */
.cal-day.production-start {
  background: rgba(46, 247, 199, 0.6);
  color: var(--ink);
  font-weight: 700;
}

/* Deadline-mode legend swatches */
.legend-swatch.rush       { background: rgba(244, 208, 111, 0.4); border: 1px solid rgba(244, 208, 111, 0.5); }
.legend-swatch.prod-start { background: rgba(46, 247, 199, 0.6); }
.legend-swatch.deadline   { background: var(--aqua); }

/* ── Showcase events ─────────────────────────────────────────────── */
/* Each pill/marker is tinted by --sc-color, set inline per showcase
   from the cycled palette (--sc-1/2/3). */
.cal-showcases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.cal-showcase-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--sc-color, var(--sc-1)) 35%, transparent);
  background: color-mix(in srgb, var(--sc-color, var(--sc-1)) 7%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sc-color, var(--sc-1));
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

a.cal-showcase-pill:hover {
  background: color-mix(in srgb, var(--sc-color, var(--sc-1)) 14%, transparent);
  border-color: color-mix(in srgb, var(--sc-color, var(--sc-1)) 55%, transparent);
}

.cal-showcase-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sc-color, var(--sc-1));
  flex-shrink: 0;
}

/* Ring on the last bookable day for a showcase (colour matches its pill).
   Inset box-shadow so it survives selected/delivery/range backgrounds. */
.cal-day.showcase-cutoff {
  box-shadow: inset 0 0 0 1.5px var(--sc-color, var(--sc-1));
}

.legend-swatch.sc-cutoff {
  background: transparent;
  border: 1.5px solid var(--sc-1);
}