/* datepicker.css – pekvänlig datumväljare med stora rutor. */

.datepicker {
  position: relative;
}

/* Fältet som visar valt datum och öppnar kalendern */
.datepicker__field {
  max-width: 360px;
}

.datepicker__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
  min-height: 56px;
  padding: 0 var(--space-4) 0 calc(52px + var(--space-4));
  border: 1px solid var(--color-control-border);
  background: var(--color-bg);
  text-align: left;
}

.datepicker__toggle:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 1px;
}

/* Kalenderpanelen */
.datepicker__panel {
  width: 100%;
  max-width: 360px;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-field-border);
  background: var(--color-bg);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

.datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.datepicker__month {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-transform: capitalize;
}

.datepicker__nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: var(--font-size-md);
}

.datepicker__nav:hover:not(:disabled) {
  background: var(--color-surface);
}

.datepicker__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  text-align: center;
}

.datepicker__weekday {
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.datepicker__day {
  display: grid;
  place-items: center;
  aspect-ratio: 1; /* 48 px på surfplatta och dator, krymper på smal mobil */
  border-radius: 50%;
  font-size: var(--font-size-base);
}

.datepicker__day:hover:not(:disabled) {
  background: var(--color-surface);
}

.datepicker__day--today {
  box-shadow: inset 0 0 0 2px var(--color-surface-dark);
}

.datepicker__day[aria-pressed="true"] {
  background: var(--color-surface-dark);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.datepicker__day:disabled {
  color: var(--color-field-border);
  cursor: not-allowed;
}

.datepicker__day:focus-visible,
.datepicker__nav:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 1px;
}

/* Snabbval under kalendern */
.datepicker__footer {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-field-border);
}

.datepicker__quick {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
}

.datepicker__quick:hover {
  background: var(--color-surface);
}

.datepicker__quick:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .datepicker__panel {
    padding: var(--space-2);
  }
}