/* ============================================
   CANONICAL DATE PICKER STYLES
   ============================================
   Clean, white calendar picker that replaces
   native browser date inputs.
*/

/* Wrapper */
.date-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Enhanced input styling */
.date-picker-input {
  padding-right: 36px !important;
  cursor: pointer !important;
  min-width: 140px;
  font-family: inherit;
  font-size: 14px;
}

.date-picker-input::placeholder {
  color: var(--slate-400, #94a3b8);
  font-style: normal;
}

.date-picker-input:focus {
  outline: none;
  border-color: var(--primary-500, #14b8a6);
  box-shadow: var(--focus-ring-shadow);
}

/* Hide native date picker icon (cross-browser) */
.date-picker-input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

.date-picker-input::-webkit-inner-spin-button,
.date-picker-input::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Trigger button */
.date-picker-trigger {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--slate-400, #94a3b8);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.date-picker-trigger:hover {
  background: var(--slate-100, #f1f5f9);
  color: var(--primary-500, #14b8a6);
}

/* Backdrop */
.date-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-modal);
}

/* Popup container */
.date-picker-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white, #ffffff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 320px;
  overflow: hidden;
  z-index: var(--z-modal-elevated, 3500);
  animation: datePickerFadeIn 0.2s ease-out;
}

@keyframes datePickerFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Header */
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--white, #ffffff);
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
}

.date-picker-nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--white, #ffffff);
  border-radius: 10px;
  color: var(--slate-600, #475569);
  cursor: pointer;
  transition: all 0.15s;
}

.date-picker-nav:hover {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: white;
}

.date-picker-month-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--white, #ffffff);
  border-radius: 10px;
  color: var(--slate-800, #1e293b);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.date-picker-month-btn:hover {
  background: var(--slate-50, #f8fafc);
  border-color: var(--primary-300, #5eead4);
}

.date-picker-month-btn i {
  font-size: 10px;
  color: var(--slate-400, #94a3b8);
}

/* Month/year selector dropdown */
.date-picker-month-selector {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 12px;
  background: white;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.date-picker-month-select,
.date-picker-year-select {
  padding: 8px 12px;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700, #334155);
  background: var(--white, #ffffff);
  cursor: pointer;
}

.date-picker-month-select:focus,
.date-picker-year-select:focus {
  outline: none;
  border-color: var(--primary-500, #14b8a6);
}

/* Weekday headers */
.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 12px 16px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-400, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Calendar grid */
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 8px 16px 16px;
}

/* Day cells */
/* Selectable days are <button>s (they need to be keyboard-reachable and
   announced as controls), so the UA's default button chrome — grey background,
   border, padding, centred system font — has to be reset back to the flat cell
   look. The inert leading/trailing pad cells are still <div>s and share this
   rule, which is why the reset is on the base selector rather than a button
   variant. */
.date-picker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--slate-700, #334155);
  cursor: pointer;
  transition: all 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

/* Keyboard focus must be visible — the grid is arrow-key navigable, so the
   focused day is the user's only position indicator. */
.date-picker-day:focus-visible {
  outline: 2px solid var(--primary-500, #14b8a6);
  outline-offset: 2px;
  z-index: 1;
}

.date-picker-day:hover:not(.disabled):not(.other-month) {
  background: var(--primary-50, rgba(20, 184, 166, 0.1));
  color: var(--primary-700, #0f766e);
}

.date-picker-day.other-month {
  color: var(--slate-300, #cbd5e1);
  cursor: default;
}

.date-picker-day.today {
  background: var(--slate-100, #f1f5f9);
  font-weight: 700;
  position: relative;
}

.date-picker-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--primary-500, #14b8a6);
  border-radius: 50%;
}

.date-picker-day.selected {
  background: var(--primary-500, #14b8a6);
  color: white;
  font-weight: 600;
}

.date-picker-day.selected.today::after {
  background: white;
}

.date-picker-day.disabled {
  color: var(--slate-300, #cbd5e1);
  cursor: not-allowed;
}

/* Footer */
.date-picker-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--slate-50, #f8fafc);
  border-top: 1px solid var(--slate-100, #f1f5f9);
}

.date-picker-clear,
.date-picker-today {
  padding: 8px 16px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--white, #ffffff);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600, #475569);
  cursor: pointer;
  transition: all 0.15s;
}

.date-picker-clear:hover,
.date-picker-today:hover {
  background: var(--slate-100, #f1f5f9);
  border-color: var(--slate-300, #cbd5e1);
}

.date-picker-today {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: white;
}

.date-picker-today:hover {
  background: var(--primary-600, #0d9488);
  border-color: var(--primary-600, #0d9488);
}

/* "Today" is unusable when today falls outside the field's min/max range. It
   used to stay fully styled as the primary action and silently no-op on click;
   show the unavailable state instead. `:hover` is neutralised too, or the
   disabled button would still light up under the cursor. */
.date-picker-today:disabled,
.date-picker-today.is-disabled {
  background: var(--slate-100, #f1f5f9);
  border-color: var(--slate-200, #e2e8f0);
  color: var(--slate-400, #94a3b8);
  cursor: not-allowed;
  opacity: 0.7;
}

.date-picker-today:disabled:hover,
.date-picker-today.is-disabled:hover {
  background: var(--slate-100, #f1f5f9);
  border-color: var(--slate-200, #e2e8f0);
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode .date-picker-popup,
body.dark-mode .date-picker-popup {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

body.dark-mode .date-picker-header,
body.dark-mode .date-picker-header {
  background: var(--slate-800, #1e293b);
  border-bottom-color: var(--slate-700, #334155);
}

body.dark-mode .date-picker-nav,
body.dark-mode .date-picker-nav {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .date-picker-nav:hover,
body.dark-mode .date-picker-nav:hover {
  background: var(--primary-500, #14b8a6);
  border-color: var(--primary-500, #14b8a6);
  color: white;
}

body.dark-mode .date-picker-month-btn,
body.dark-mode .date-picker-month-btn {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .date-picker-month-btn:hover,
body.dark-mode .date-picker-month-btn:hover {
  background: var(--slate-600, #475569);
}

body.dark-mode .date-picker-month-selector,
body.dark-mode .date-picker-month-selector {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-600, #475569);
}

body.dark-mode .date-picker-month-select,
body.dark-mode .date-picker-year-select,
body.dark-mode .date-picker-month-select,
body.dark-mode .date-picker-year-select {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-200, #e2e8f0);
}

body.dark-mode .date-picker-weekdays,
body.dark-mode .date-picker-weekdays {
  color: var(--slate-500, #64748b);
}

body.dark-mode .date-picker-day,
body.dark-mode .date-picker-day {
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .date-picker-day.other-month,
body.dark-mode .date-picker-day.other-month {
  color: var(--slate-600, #475569);
}

body.dark-mode .date-picker-day.today,
body.dark-mode .date-picker-day.today {
  background: var(--slate-700, #334155);
}

body.dark-mode .date-picker-day:hover:not(.disabled):not(.other-month),
body.dark-mode .date-picker-day:hover:not(.disabled):not(.other-month) {
  background: rgba(20, 184, 166, 0.2);
  color: var(--primary-300, #5eead4);
}

body.dark-mode .date-picker-day.disabled,
body.dark-mode .date-picker-day.disabled {
  color: var(--slate-600, #475569);
}

body.dark-mode .date-picker-footer,
body.dark-mode .date-picker-footer {
  background: var(--slate-900, #0f172a);
  border-top-color: var(--slate-700, #334155);
}

body.dark-mode .date-picker-clear,
body.dark-mode .date-picker-clear {
  background: var(--slate-700, #334155);
  border-color: var(--slate-600, #475569);
  color: var(--slate-300, #cbd5e1);
}

body.dark-mode .date-picker-clear:hover,
body.dark-mode .date-picker-clear:hover {
  background: var(--slate-600, #475569);
}

/* Disabled "Today" in dark mode. Without this pair the light-mode slate-100
   fill would paint a near-white button onto the dark footer. */
body.dark-mode .date-picker-today:disabled,
body.dark-mode .date-picker-today.is-disabled {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
  color: var(--slate-500, #64748b);
}

body.dark-mode .date-picker-today:disabled:hover,
body.dark-mode .date-picker-today.is-disabled:hover {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-700, #334155);
}

body.dark-mode .date-picker-trigger,
body.dark-mode .date-picker-trigger {
  color: var(--slate-500, #64748b);
}

body.dark-mode .date-picker-trigger:hover,
body.dark-mode .date-picker-trigger:hover {
  background: var(--slate-700, #334155);
  color: var(--primary-400, #2dd4bf);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
  .date-picker-popup {
    width: calc(100% - 32px);
    max-width: 340px;
  }

  /* Day cells are the picker's primary controls and the input is readOnly, so
     tapping one is the only way to fill the field. The old 36px box was below
     the comfortable touch-target minimum. The grid is `repeat(7, 1fr)`, so
     `width` was already redundant (cells stretch to the column); dropping it
     and letting the column decide avoids forcing horizontal overflow on a
     narrow screen, while the taller box gives the tap area. */
  .date-picker-day {
    width: auto;
    min-height: 44px;
    height: auto;
    font-size: 14px;
  }
}