/* ============================================================
   Własny komponent pola daty (ewdate.js)
   Skórka spójna z ewselect.css (przycisk jak pole formularza,
   panel jak lista opcji). Kolory z tokenów --line/--ink/--blue-600/--muted.
   ============================================================ */

.ewdate { position: relative; display: block; width: 100%; }

/* Natywny input zostaje (źródło wartości/formularza), ale niewidoczny. */
.ewdate__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- przycisk (trigger) — wygląd jak pole formularza --- */
.ewdate__btn {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  width: 100%; margin: 0; font: inherit; font-size: .98rem; text-align: left;
  padding: 10px 12px; color: var(--ink, #16233a);
  background: var(--card, #fff); border: 1.5px solid var(--line, #e2e8f0); border-radius: 6px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ewdate__btn:hover { border-color: var(--blue-600, #3f6fa0); }
.ewdate__btn:focus-visible,
.ewdate__btn:focus {
  outline: none; border-color: var(--blue-600, #3f6fa0);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(90, 136, 184, .16));
}
.ewdate__value {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ewdate__value.is-placeholder { color: var(--muted, #5c6b85); }
.ewdate__icon { flex: none; color: var(--muted, #5c6b85); }

.ewdate.is-disabled { opacity: .6; }
.ewdate__btn:disabled { cursor: not-allowed; background: var(--raised, #f5f7fa); }

/* --- panel kalendarza --- */
.ewdate__panel {
  position: absolute; z-index: 1000; left: 0; top: calc(100% + 6px);
  width: 288px; box-sizing: border-box;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card, #fff); border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px;
  box-shadow: 0 12px 28px var(--shadow-color, rgba(20, 40, 60, .16)); padding: 12px;
}
.ewdate__panel[hidden] { display: none; }

.ewdate__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ewdate__title { font-weight: 700; color: var(--ink, #16233a); font-size: .98rem; }
.ewdate__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted, #5c6b85); cursor: pointer; transition: background .15s, color .15s;
}
.ewdate__nav:hover { background: var(--accent-soft-strong, rgba(90, 136, 184, .12)); color: var(--blue-600, #3f6fa0); }

.ewdate__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.ewdate__wd span {
  text-align: center; font-size: .74rem; font-weight: 700; color: var(--muted, #5c6b85);
  padding: 4px 0; text-transform: none;
}

.ewdate__grid { display: flex; flex-direction: column; gap: 2px; }
.ewdate__grid [role="row"] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.ewdate__day {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0; font: inherit; font-size: .92rem;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--ink, #16233a); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ewdate__day:hover { background: var(--accent-soft-strong, rgba(90, 136, 184, .14)); }
.ewdate__day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-600, #3f6fa0); }
.ewdate__day.is-out { color: var(--muted, #9aa7bd); opacity: .65; }
.ewdate__day.is-today { border-color: var(--blue-600, #3f6fa0); font-weight: 700; }
.ewdate__day.is-selected,
.ewdate__day.is-selected:hover {
  background: var(--blue-600, #3f6fa0); color: var(--on-accent, #fff); border-color: var(--blue-600, #3f6fa0); font-weight: 700;
}
.ewdate__day.is-disabled,
.ewdate__day:disabled { color: var(--muted, #9aa7bd); opacity: .4; cursor: not-allowed; background: transparent; }

.ewdate__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ewdate__act {
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--line, #e2e8f0);
  background: var(--card, #fff); color: var(--blue-600, #3f6fa0); transition: background .15s, border-color .15s;
}
.ewdate__act:hover { background: var(--accent-soft, rgba(90, 136, 184, .1)); border-color: var(--blue-600, #3f6fa0); }
.ewdate__clear { color: var(--muted, #5c6b85); }

/* ============================================================
   Dopasowanie do kontekstów (jak w ewselect.css).
   ============================================================ */
/* Pasek „Płatność" na fakturze: pole daty węższe, spójne z resztą wiersza. */
.inv-paymark .ewdate { width: auto; min-width: 150px; max-width: 200px; }
/* Filtry Od/Do i inne w rzędzie flex — pozwól się zwężać. */
.field-inline .ewdate,
.filters__row .ewdate { flex: 1 1 auto; min-width: 0; }

/* Strona publiczna: pola .form mają promień 12px (themes.css) — dopasuj trigger. */
.form .ewdate__btn { padding: 12px 14px; font-size: 1rem; border-radius: var(--field-radius, 12px); }
/* Panel NIE ładuje themes.css — cofnij publiczne 12px, żeby było jak reszta pól panelu. */
.admin .form .ewdate__btn { padding: 10px 12px; font-size: .98rem; border-radius: 6px; }

/* Front motywu z ostrymi rogami (grafit): kalendarz idzie za promieniami motywu, jak ewselect.
   Zakres body.theme-grafit → miekki (10/6px) i panel (data płatności faktury) nietknięte.
   Dni z sąsiedniego miesiąca: pełne krycie — --muted na ciemnej karcie daje ~5:1, a opacity:.65 gasiło do ~3:1. */
body.theme-grafit .ewdate__panel { border-radius: var(--field-radius, 10px); }
body.theme-grafit .ewdate__day { border-radius: var(--radius-sm, 6px); }
body.theme-grafit .ewdate__day.is-out { opacity: 1; }
body.theme-grafit .ewdate__act { border-radius: var(--btn-radius, 6px); }
