/* ==========================================
   Gargoli — jQuery UI Theme Overrides
   Themes jQuery UI widgets (datepicker, etc.) to match the
   cyan / blue / pink design system. Load AFTER jquery-ui.min.css and design.css.
   ========================================== */

/* Datepicker container */
.ui-datepicker {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-pale);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--color-text-primary);
  z-index: 1000;
}

/* Header (month/year + navigation) */
.ui-datepicker .ui-datepicker-header {
  background: var(--color-secondary-blue);
  color: var(--color-on-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.ui-datepicker .ui-datepicker-title {
  font-weight: 600;
  color: var(--color-on-secondary);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  color: var(--color-on-secondary);
  cursor: pointer;
  top: 4px;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: color-mix(in srgb, var(--color-on-secondary) 18%, transparent);
  border: none;
  border-radius: var(--radius-sm);
}

/* Weekday header row */
.ui-datepicker th {
  color: var(--color-text-secondary);
  font-weight: 500;
  padding: var(--space-1);
}

/* Day cells */
.ui-datepicker td a,
.ui-datepicker td span {
  text-align: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: var(--space-1);
}

.ui-datepicker td a:hover {
  background: var(--color-background-light);
  border: none;
}

/* Selected day (accent) */
.ui-datepicker .ui-state-active,
.ui-datepicker td .ui-state-active {
  background: var(--color-accent-pink);
  color: var(--color-on-accent);
  border: none;
}

/* Today (primary) */
.ui-datepicker .ui-state-highlight {
  background: var(--color-primary-cyan);
  color: var(--color-on-primary);
  border: none;
}

/* Input that triggers the datepicker */
.has-datepicker {
  cursor: pointer;
}