/* Custom date picker -- design-handoffs/asportal-public/design-guide/"Portal_Select
   box".css includes an embedded date-range calendar overlapping heavily
   with asportal-admin's own calendar.css (same "today" accent-blue #0181E2,
   same overall structure) -- ported directly from admin's shipped file
   rather than re-derived from scratch, per the design-guide survey's
   finding that this piece is effectively shared, not new. Revisit once a
   real Portal screen that opens this picker exists, the same way every
   admin screen using it was individually confirmed against its own
   export. Markup/behavior: static/js/calendar.js (not yet ported). */

.date-range-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 2 1 300px;
  max-width: 420px;
}

.date-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 140px;
  max-width: 200px;
  height: 32px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.date-field .icon-calendar {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-secondary);
}

.date-field-input {
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  font-family: var(--font-family);
  font-size: 15px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  cursor: pointer;
}

.date-field-input::placeholder {
  color: var(--color-text-placeholder);
}

.date-field-input:focus {
  outline: none;
}

.date-field.active {
  border-color: var(--color-text-muted);
}

.date-field.has-error {
  border-color: var(--color-accent-error);
}

.date-field.disabled {
  background: var(--color-surface-muted);
  cursor: not-allowed;
}

.date-field.disabled .date-field-input {
  cursor: not-allowed;
}

@media (max-width: 767px) {
  /* .field itself removed from this selector -- forms.css's own .field
     rule is the sole owner of its font-size (16px, held at every
     breakpoint specifically to avoid iOS Safari's auto-zoom-on-focus for
     any input under 16px). This file loads after forms.css in base.html,
     so duplicating .field here at 14px was silently overriding that fix
     back on every page that also loads calendar.css -- exactly what a
     real iPhone report caught (the change-password field auto-zoomed
     despite forms.css's own .field already being fixed). */
  .date-field-input {
    font-size: 14px;
  }
}

/* ---- Popup ---- */

.calendar-popup {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 336px;
  padding: 20px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-text-faint);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.calendar-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.calendar-nav-btn:active {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  .calendar-nav-btn:hover {
    background: var(--color-surface-muted);
  }
}

.calendar-nav-btn .icon {
  width: 16px;
  height: 16px;
}

.calendar-nav-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-select {
  box-sizing: border-box;
  height: 36px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-md);
  background:
    var(--color-surface)
    url('../../images/base/icons/ic-down-stroke-12-md.svg') no-repeat right 8px center;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  cursor: pointer;
}

@media (hover: hover) {
  .calendar-select:hover {
    background-color: var(--color-surface-muted);
  }
}

.calendar-select:focus {
  outline: none;
}

.calendar-year-select,
.calendar-month-select {
  padding-right: 24px;
}

.calendar-weekdays {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.calendar-weekdays span {
  flex: 1;
  font-family: var(--font-family);
  font-size: 14px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-secondary);
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  row-gap: 4px;
}

.calendar-day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.calendar-day-cell.in-range {
  background: var(--color-surface-muted);
}

.calendar-day-cell.range-start,
.calendar-day-cell.range-end {
  background: var(--color-surface-muted);
}

.calendar-day-cell.range-start {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.calendar-day-cell.range-end {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-family);
  font-size: 15px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  cursor: pointer;
}

.calendar-day.other-month {
  color: var(--color-text-placeholder);
  cursor: default;
}

.calendar-day.sunday {
  color: var(--color-accent-error);
}

.calendar-day.saturday {
  color: var(--color-accent-blue);
}

.calendar-day.other-month.sunday,
.calendar-day.other-month.saturday {
  color: var(--color-text-placeholder);
}

.calendar-day.today {
  background: transparent;
  border: 1px solid var(--color-border);
}

.calendar-day.selected {
  background: var(--color-button-primary-bg);
  color: var(--color-text-inverse);
}

@media (hover: hover) {
  .calendar-day:not(.other-month):hover {
    background: var(--color-surface-muted);
  }

  .calendar-day.selected:hover {
    background: var(--color-button-secondary-bg);
  }
}