/* ============================================================================
   weseq-forms.css - KANONICZNE komponenty formularzy weSEQ.IT (motyw slate)
   ----------------------------------------------------------------------------
   Rozszerza weseq-panel.css o pola formularzy (input/select/radio/checkbox/
   file/textarea), stepper kroków i nawigację. Wszystko na tokenach --weseq-*,
   --text-*, --space-*, --radius- ze slate. ZERO twardych kolorów.
   Doloz tu nowe komponenty formularzowe, gdy kolejna apka ich potrzebuje.
   ============================================================================ */

/* --- Wrapper formularza (na srodku, jak karta) --- */
.weseq-form { max-width: 760px; margin: 0 auto; }
.weseq-form__title { font-size: var(--text-2xl); font-weight: 650; letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1); color: var(--weseq-text); }
.weseq-form__lead { color: var(--weseq-text-muted); font-size: var(--text-base); line-height: 1.55; margin: 0 0 var(--space-5); }

/* --- Stepper kroków (pasek postępu) --- */
.weseq-stepper { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0 0 var(--space-5); }
.weseq-stepper__item { flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) var(--space-1); border-top: 3px solid var(--weseq-border); color: var(--weseq-text-faint);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.weseq-stepper__item.is-active { border-top-color: var(--weseq-accent); color: var(--weseq-accent); }
.weseq-stepper__item.is-done { border-top-color: var(--weseq-success); color: var(--weseq-success); }
.weseq-stepper__num { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.weseq-stepper__label { font-size: var(--text-2xs); font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--weseq-text-muted); line-height: 1.3; }

/* --- Sekcja kroku --- */
.weseq-step { display: none; }
.weseq-step.is-active { display: block; animation: weseq-step-in .28s var(--ease-out); }
@keyframes weseq-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.weseq-step__head { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--space-1); color: var(--weseq-text); }
.weseq-step__desc { color: var(--weseq-text-muted); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); }

/* --- Pole (label + kontrolka + hint) --- */
.weseq-field { margin-bottom: var(--space-4); }
.weseq-field:last-child { margin-bottom: 0; }
.weseq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.weseq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); }
@media (max-width: 600px) { .weseq-grid-2, .weseq-grid-3 { grid-template-columns: 1fr; } }

.weseq-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--weseq-text);
  margin-bottom: var(--space-1-5); }
.weseq-label .req { color: var(--weseq-danger); margin-left: 2px; }
.weseq-label .opt { color: var(--weseq-text-faint); font-weight: 400; font-size: var(--text-2xs); margin-left: var(--space-1); }
.weseq-hint { font-size: var(--text-2xs); color: var(--weseq-text-faint); line-height: 1.45; margin-top: var(--space-1); }

/* --- Kontrolki tekstowe --- */
.weseq-input, .weseq-select, .weseq-textarea {
  width: 100%; box-sizing: border-box; padding: var(--space-2-5, 10px) var(--space-3);
  font: inherit; font-size: var(--text-base); color: var(--weseq-text);
  background: var(--weseq-surface); border: 1px solid var(--weseq-border-strong);
  border-radius: var(--radius-sm); outline: none; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.weseq-input::placeholder, .weseq-textarea::placeholder { color: var(--weseq-text-faint); }
.weseq-input:focus, .weseq-select:focus, .weseq-textarea:focus {
  border-color: var(--weseq-accent); box-shadow: var(--weseq-ring); }
.weseq-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.weseq-select { appearance: none; background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6a7d' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); }

/* --- Radio jako karty wyboru --- */
.weseq-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.weseq-choices--row { flex-direction: row; flex-wrap: wrap; }
.weseq-choice { display: flex; gap: var(--space-2-5, 10px); align-items: flex-start; padding: var(--space-3);
  border: 1px solid var(--weseq-border-strong); border-radius: var(--radius-sm); background: var(--weseq-surface);
  cursor: pointer; transition: border-color .15s, background .15s; }
.weseq-choice:hover { border-color: var(--weseq-accent); }
.weseq-choice input { margin: 2px 0 0; accent-color: var(--weseq-accent); flex: 0 0 auto; }
.weseq-choice:has(input:checked) { border-color: var(--weseq-accent); background: var(--weseq-accent-weak); }
.weseq-choice__body { display: flex; flex-direction: column; gap: 2px; }
.weseq-choice__title { font-size: var(--text-sm); font-weight: 600; color: var(--weseq-text); }
.weseq-choice__sub { font-size: var(--text-2xs); color: var(--weseq-text-muted); line-height: 1.4; }

/* --- Checkbox (oswiadczenia / zalecenia) --- */
.weseq-check { display: flex; gap: var(--space-2-5, 10px); align-items: flex-start; padding: var(--space-2) 0;
  font-size: var(--text-sm); color: var(--weseq-text); line-height: 1.45; cursor: pointer; }
.weseq-check input { margin: 1px 0 0; accent-color: var(--weseq-accent); flex: 0 0 auto; width: 16px; height: 16px; }
.weseq-check a { color: var(--weseq-accent); text-decoration: none; }
.weseq-check a:hover { text-decoration: underline; }
.weseq-checklist { display: flex; flex-direction: column; gap: var(--space-1); }
.weseq-checklist .weseq-check { border-bottom: 1px solid var(--weseq-border); }
.weseq-checklist .weseq-check:last-child { border-bottom: none; }

/* --- Upload pliku --- */
.weseq-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px dashed var(--weseq-border-strong); border-radius: var(--radius-sm); background: var(--weseq-surface-2);
  font-size: var(--text-sm); color: var(--weseq-text-muted); cursor: pointer; transition: border-color .15s; }
.weseq-file:hover { border-color: var(--weseq-accent); }
.weseq-file input { display: none; }
.weseq-file__btn { flex: 0 0 auto; font-weight: 600; color: var(--weseq-accent); }

/* --- Walidacja --- */
.weseq-field.has-error .weseq-input, .weseq-field.has-error .weseq-select, .weseq-field.has-error .weseq-textarea {
  border-color: var(--weseq-danger); }
.weseq-field-error { display: none; font-size: var(--text-2xs); color: var(--weseq-danger); margin-top: var(--space-1); }
.weseq-field.has-error .weseq-field-error { display: block; }

/* Miasto z cyfra: pomaranczowe ostrzezenie na zywo (numer zwykle nalezy do ulicy, nie miasta). NIE blokuje. */
.weseq-input.is-city-warn { border-color: var(--weseq-warning) !important; background: var(--weseq-warning-weak); }
.weseq-input.is-city-warn:focus { border-color: var(--weseq-warning) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--weseq-warning) 22%, transparent); }

/* --- Pole warunkowe (chowane) --- */
.weseq-when { display: none; }
.weseq-when.is-shown { display: block; }

/* --- Nawigacja kroków --- */
.weseq-form-nav { display: flex; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--weseq-border); }
.weseq-form-nav .weseq-btn { min-width: 120px; }

/* --- Callout / nota --- */
.weseq-note { display: flex; gap: var(--space-2-5, 10px); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--weseq-accent-weak); color: var(--weseq-text);
  font-size: var(--text-sm); line-height: 1.5; margin: var(--space-3) 0; }
.weseq-note--warn { background: var(--weseq-warning-weak); }

/* === Kalendarz dostepnosci (datepicker ze statusem dni: zielone/szare/weekend/swieto) === */
.weseq-cal { position: relative; max-width: 340px; }
.weseq-cal__field { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  text-align: left; cursor: pointer; padding: var(--space-2-5, 10px) var(--space-3); font: inherit; font-size: var(--text-base);
  color: var(--weseq-text); background: var(--weseq-surface); border: 1px solid var(--weseq-border-strong); border-radius: var(--radius-sm); }
.weseq-cal__field.is-empty { color: var(--weseq-text-faint); }
.weseq-cal__field:focus-visible { border-color: var(--weseq-accent); box-shadow: var(--weseq-ring); outline: none; }
.weseq-cal__field::after { content: ""; width: 16px; height: 16px; flex: 0 0 auto; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6a7d' stroke-width='1.8'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 9h18M8 3v4M16 3v4'/></svg>") no-repeat center; }
.weseq-cal__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 318px; box-sizing: border-box;
  background: var(--weseq-surface); border: 1px solid var(--weseq-border); border-radius: var(--radius-md);
  box-shadow: var(--weseq-shadow-lg); padding: var(--space-3); }
.weseq-cal__pop[hidden] { display: none; }
.weseq-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.weseq-cal__month { font-weight: 650; font-size: var(--text-sm); color: var(--weseq-text); }
.weseq-cal__nav { width: 30px; height: 30px; border: 1px solid var(--weseq-border); border-radius: var(--radius-sm);
  background: var(--weseq-surface); color: var(--weseq-text); cursor: pointer; font-size: 15px; line-height: 1; }
.weseq-cal__nav:hover { border-color: var(--weseq-accent); color: var(--weseq-accent); }
.weseq-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.weseq-cal__dow { text-align: center; font-size: var(--text-2xs); font-weight: 600; color: var(--weseq-text-faint);
  text-transform: uppercase; padding: 4px 0; }
.weseq-cal__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid transparent;
  border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  cursor: default; background: transparent; color: var(--weseq-text-faint); }
.weseq-cal__day--empty { visibility: hidden; }
/* weekend (sb/nd): bez tla, najjasniejszy tekst + kropka - inaczej niz niedostepne robocze */
.weseq-cal__day--weekend { color: var(--weseq-text-faint); position: relative; }
.weseq-cal__day--weekend::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--weseq-border-strong); }
/* niedostepne robocze / po terminie: pelne szare tlo */
.weseq-cal__day--off { color: var(--weseq-text-faint); background: var(--weseq-surface-2); }
/* swieto: czerwone */
.weseq-cal__day--holiday { color: var(--weseq-danger); background: var(--weseq-danger-weak); font-weight: 600; }
/* dostepne: zielone, klikalne */
.weseq-cal__day--ok { color: var(--weseq-success); background: var(--weseq-success-weak); font-weight: 650; cursor: pointer;
  border-color: color-mix(in srgb, var(--weseq-success) 30%, transparent); }
.weseq-cal__day--ok:hover { background: var(--weseq-success); color: #fff; }
.weseq-cal__day--selected { background: var(--weseq-accent); color: #fff; border-color: var(--weseq-accent); font-weight: 650; }
.weseq-cal__legend { display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); margin-top: var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--weseq-border); font-size: var(--text-2xs); color: var(--weseq-text-muted); }
.weseq-cal__legend span { display: inline-flex; align-items: center; gap: 5px; }
.weseq-cal__legend i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.weseq-cal__legend .lg--ok { background: var(--weseq-success-weak); border: 1px solid var(--weseq-success); }
.weseq-cal__legend .lg--holiday { background: var(--weseq-danger-weak); border: 1px solid var(--weseq-danger); }
.weseq-cal__legend .lg--off { background: var(--weseq-surface-2); border: 1px solid var(--weseq-border-strong); }
.weseq-cal__legend .lg--weekend { background: var(--weseq-surface); border: 1px solid var(--weseq-border); }