/* ============================================================================
 * date-inputs.css — Site-wide date/time input polish + Flatpickr brand theme
 * ----------------------------------------------------------------------------
 * Loaded after components.css. Two concerns:
 *   1. Native <input type="date|time|datetime-local"> baseline (works even
 *      before Flatpickr's JS loads, and styles Flatpickr's own alt-input).
 *   2. Flatpickr calendar theming mapped onto the app's semantic tokens.
 *
 * Theming rules (see CLAUDE.md):
 *   - Only reference semantic tokens (--form-input-*, --brand-primary,
 *     --bg-elevated, --border-default …). Never hardcode a hex that dupes one.
 *   - Text sitting on the brand fill (selected day) uses literal #fff, never a
 *     theme-flipping token.
 *   - After editing this file, bump CACHE_NAME in static/sw.js (PWA cache).
 * ========================================================================== */

/* ── 1. Native input baseline ─────────────────────────────────────────────── */

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  /* The single most important fix: renders the browser's native calendar/clock
     popup and the internal field chrome in the correct theme. Without this the
     popup is light-on-dark and the calendar icon is near-invisible. */
  color-scheme: light dark;
  min-height: 2.5rem;           /* segmented native fields are cramped otherwise */
}

/* Restore rounded corners — several stylesheets force `border-radius:0 !important`
   on .form-input/.form-control (style.css, premium-esports.css, ui-layout.css).
   Match their weapon so date fields don't read as squared-off outliers. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  border-radius: .5rem !important;
}

/* Brand-tint the native calendar/clock picker indicator so it's visible in both
   themes. Dark theme: the default dark glyph is invisible on dark bg → invert to
   near-white. Light theme: leave the default dark glyph (visible on light bg). */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .75;
  filter: invert(1) brightness(1.4);
  transition: opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;   /* default dark glyph is correct on light bg */
}

/* Keep the internal date text readable regardless of which class the input uses
   (form-input, db-input, av-input, pt2-input all diverge). color-scheme handles
   the field text colour; this just guards the placeholder segments. */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--text-primary);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

/* ── 2. Flatpickr brand theme ─────────────────────────────────────────────────
 * Loaded after flatpickr.min.css, so equal-specificity (single-class) rules
 * here win the cascade without !important. All colours come from semantic
 * tokens, which already flip per theme — EXCEPT text on the coral selected day,
 * which stays literal #fff (brand fill doesn't flip). */

.flatpickr-calendar {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: .6rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  color: var(--text-primary);
}
/* The little pointer triangle above/below the input */
.flatpickr-calendar.arrowTop:after  { border-bottom-color: var(--bg-elevated); }
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--border-default); }
.flatpickr-calendar.arrowBottom:after  { border-top-color: var(--bg-elevated); }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--border-default); }

/* Month header + nav arrows */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--text-primary); fill: var(--text-primary); }
.flatpickr-monthDropdown-months { background: var(--bg-elevated); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--text-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brand-primary); }

/* Weekday row */
span.flatpickr-weekday { color: var(--text-muted); font-weight: 600; }

/* Days */
.flatpickr-day {
  color: var(--text-primary);
  border-radius: .4rem;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(var(--brand-primary-rgb), .15);
  border-color: transparent;
}
.flatpickr-day.today {
  border-color: var(--brand-primary);
}
.flatpickr-day.today:hover {
  background: rgba(var(--brand-primary-rgb), .15);
  color: var(--text-primary);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;            /* constant — brand fill doesn't flip per theme */
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: .55; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--text-muted); opacity: .3; }

/* Time picker (datetime-local and time-only) */
.flatpickr-time { border-top: 1px solid var(--border-default); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--text-primary); }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: rgba(var(--brand-primary-rgb), .12); }

/* Numeric spinner arrows */
.flatpickr-calendar .numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); }
.flatpickr-calendar .numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); }
.flatpickr-calendar .numInputWrapper:hover { background: rgba(var(--brand-primary-rgb), .08); }