/* FJN System — E0 component styles: form fields.
   Loaded after fjn-base.css (see templates/base.html); order matters. */
/* ---------- Form fields ---------- */

.fjn-form { display: flex; flex-direction: column; gap: var(--fjn-sp-5); }
.fjn-form-grid {
  display: grid; gap: var(--fjn-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fjn-form-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fjn-form-grid > .fjn-field--wide { grid-column: 1 / -1; }

.fjn-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fjn-fieldset { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fjn-fieldset legend { padding: 0; }
.fjn-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fjn-sp-2); }
.fjn-field__label { font-size: 14px; font-weight: var(--fjn-fw-bold); }
.fjn-field__optional { font-weight: var(--fjn-fw-regular); color: var(--fjn-text-2); }
.fjn-field__counter { font: 12px var(--fjn-font-mono); color: var(--fjn-text-3); }
.fjn-field__help { font-size: var(--fjn-fs-small); line-height: var(--fjn-lh-small); color: var(--fjn-text-3); }
.fjn-field__error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: var(--fjn-fs-small); line-height: var(--fjn-lh-small); color: var(--fjn-danger-700);
}
.fjn-field__error .fjn-icon { margin-top: 1px; }
.fjn-field--disabled .fjn-field__label { color: var(--fjn-text-3); }

/* Text field (also number, e-mail, date, select, textarea) */
.fjn-input, .fjn-select, .fjn-textarea, .fjn-input-group {
  width: 100%; min-width: 0;
  border: 1px solid var(--fjn-border-strong); border-radius: var(--fjn-r-md);
  background: var(--fjn-surface); color: var(--fjn-text);
  font-size: var(--fjn-fs-body);
}
.fjn-input, .fjn-select { height: var(--fjn-ctl); padding: 0 var(--fjn-sp-3); }
.fjn-textarea { min-height: 80px; padding: 10px var(--fjn-sp-3); line-height: var(--fjn-lh-body); resize: vertical; }
.fjn-input::placeholder, .fjn-textarea::placeholder, .fjn-input-group__control::placeholder { color: var(--fjn-text-3); }

.fjn-select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("../icons/chevron-down.bf32575dce75.svg");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}

.fjn-input:focus, .fjn-select:focus, .fjn-textarea:focus, .fjn-input-group:focus-within {
  outline: none; border-color: var(--fjn-brand-600); box-shadow: var(--fjn-focus);
}
.fjn-input-group__control:focus, .fjn-input-group__control:focus-visible { outline: none; box-shadow: none; }

.fjn-field--error .fjn-input, .fjn-field--error .fjn-select, .fjn-field--error .fjn-textarea,
.fjn-field--error .fjn-input-group {
  border: 2px solid var(--fjn-danger-700); padding-left: 11px;
}
.fjn-field--error .fjn-input-group { padding-left: 0; }

.fjn-input:disabled, .fjn-select:disabled, .fjn-textarea:disabled,
.fjn-input-group:has(.fjn-input-group__control:disabled) {
  background: var(--fjn-bg); border-color: var(--fjn-border); color: var(--fjn-text-3); cursor: not-allowed;
}

/* Technical values: registration no., VIN, NIP, phone, amounts [D3] */
.fjn-input--mono, .fjn-input-group__control--mono { font-family: var(--fjn-font-mono); }
.fjn-input--vin { font-family: var(--fjn-font-mono); letter-spacing: .03em; text-transform: uppercase; }

/* Group with prefix / suffix: phone (+48), amount (zł), registration no. (PL), number (− +), QR */
.fjn-input-group { display: flex; align-items: stretch; height: var(--fjn-ctl); overflow: hidden; }
.fjn-input-group__control {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0 var(--fjn-sp-3);
  font-size: var(--fjn-fs-body);
}
.fjn-input-group__control--right { text-align: right; }
.fjn-input-group__affix {
  display: flex; align-items: center; gap: 4px; padding: 0 10px; flex: none;
  background: var(--fjn-bg); color: var(--fjn-text-2); font: 14px var(--fjn-font-mono);
}
.fjn-input-group__affix--start { border-right: 1px solid var(--fjn-border); }
.fjn-input-group__affix--end { border-left: 1px solid var(--fjn-border); font-family: var(--fjn-font); }

/* Icon inside the field, on the right (date) */
.fjn-input-group__icon { display: flex; align-items: center; padding: 0 var(--fjn-sp-3); color: var(--fjn-text-2); flex: none; }
/* 4.26.3: an invisible native date field over the icon — a tap opens the date picker of the device */
.fjn-input-group__icon--pick { position: relative; cursor: pointer; }
.fjn-date-pick {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; font-size: 16px;
}

/* Registration number: blue "PL" strip like on a number plate */
.fjn-input-group__plate {
  display: flex; align-items: flex-end; justify-content: center; flex: none;
  width: 22px; padding-bottom: 5px;
  background: var(--fjn-brand-600); color: var(--fjn-text-inverse);
  font: var(--fjn-fw-bold) 9px var(--fjn-font-mono);
}
.fjn-input-group__control--plate {
  font: var(--fjn-fw-bold) 16px var(--fjn-font-mono); letter-spacing: .06em; text-transform: uppercase;
}

/* Number with − + buttons */
.fjn-input-group__step {
  width: var(--fjn-ctl); flex: none; border: 0; border-left: 1px solid var(--fjn-border);
  background: none; font-size: 18px; cursor: pointer;
}
.fjn-input-group__step:hover { background: var(--fjn-surface-2); }
.fjn-input-group__control[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.fjn-input-group__control::-webkit-inner-spin-button,
.fjn-input-group__control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Field with QR scanning (from E1/E2) */
.fjn-input-group--qr { height: var(--fjn-ctl-touch); }
.fjn-input-group__scan {
  display: flex; align-items: center; justify-content: center; width: 52px; flex: none;
  border: 0; background: var(--fjn-brand-600); color: var(--fjn-text-inverse); cursor: pointer;
}
.fjn-input-group__scan:hover { background: var(--fjn-brand-700); }

/* Field with an inner icon: list filter (funnel), global search (magnifier) [D16] */
.fjn-input-group--search .fjn-input-group__lead {
  display: flex; align-items: center; padding-left: var(--fjn-sp-3); color: var(--fjn-text-2);
}
.fjn-input-group--search .fjn-input-group__control { padding-left: 10px; }

/* Field loading state (e.g. NIP "Sprawdzanie…") */
.fjn-input-group__busy { display: flex; align-items: center; padding: 0 var(--fjn-sp-3); color: var(--fjn-text-2); }

/* Switch (consents, "Tylko zatwierdzone urządzenia") */
.fjn-toggle { display: flex; align-items: center; gap: var(--fjn-sp-3); min-height: var(--fjn-ctl-touch); cursor: pointer; }
.fjn-toggle__input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.fjn-toggle__track {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--fjn-r-full);
  background: var(--fjn-border-strong);
}
.fjn-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--fjn-surface); transition: left var(--fjn-dur-fast);
}
.fjn-toggle__input:checked + .fjn-toggle__track { background: var(--fjn-brand-600); }
.fjn-toggle__input:checked + .fjn-toggle__track::after { left: 23px; }
.fjn-toggle__input:focus-visible + .fjn-toggle__track { box-shadow: var(--fjn-focus-btn); }
.fjn-toggle__input:disabled + .fjn-toggle__track { opacity: .5; }
.fjn-toggle__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fjn-toggle__label { font-size: var(--fjn-fs-body); }
.fjn-toggle__state { font-size: 14px; font-weight: var(--fjn-fw-bold); }
.fjn-toggle__state--on { display: none; }
.fjn-toggle__input:checked ~ .fjn-toggle__state--on { display: inline; }
.fjn-toggle__input:checked ~ .fjn-toggle__state--off { display: none; }

/* Checkbox (filter list, consents) */
.fjn-check { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--fjn-sp-2); border-radius: var(--fjn-r-sm); cursor: pointer; }
.fjn-check:hover { background: var(--fjn-brand-50); }
/* Markup: <label class="fjn-check"><input type="checkbox"><span class="fjn-check__box">{% icon "check" 14 %}</span>…</label> */
.fjn-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.fjn-check__box {
  display: flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
  border: 1.5px solid var(--fjn-border-strong); border-radius: var(--fjn-r-sm); background: var(--fjn-surface);
  color: transparent;
}
.fjn-check input:checked + .fjn-check__box { background: var(--fjn-brand-600); border-color: var(--fjn-brand-600); color: var(--fjn-text-inverse); }
.fjn-check input:focus-visible + .fjn-check__box { box-shadow: var(--fjn-focus-btn); }
.fjn-check__box--radio { border-radius: 50%; }
.fjn-check:has(input:checked) { background: var(--fjn-brand-50); }

/* Multiple choice with chips (roles, skills) */
.fjn-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: var(--fjn-ctl); padding: 5px var(--fjn-sp-2);
  border: 1px solid var(--fjn-border-strong); border-radius: var(--fjn-r-md); background: var(--fjn-surface);
  position: relative;
}
.fjn-chips:focus-within { border-color: var(--fjn-brand-600); box-shadow: var(--fjn-focus); }
.fjn-chips__native { width: 100%; border: 0; min-height: 80px; }
.fjn-chips.is-enhanced .fjn-chips__native { display: none; }
.fjn-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px;
  border: 0; border-radius: var(--fjn-r-sm); background: var(--fjn-brand-100); color: var(--fjn-brand-700);
  font-size: 14px; font-weight: var(--fjn-fw-bold); cursor: pointer;
}
.fjn-chip:hover { background: var(--fjn-brand-50); }
.fjn-chip--static { cursor: default; padding-right: 10px; background: var(--fjn-surface-2); color: var(--fjn-text); }
.fjn-chips__input { flex: 1; min-width: 120px; height: 28px; border: 0; padding: 0 4px; background: none; font-size: var(--fjn-fs-body); }
.fjn-chips__input:focus { outline: none; box-shadow: none; }
.fjn-chips__list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: var(--fjn-sp-2); list-style: none;
  background: var(--fjn-surface); border: 1px solid var(--fjn-border); border-radius: 8px; box-shadow: var(--fjn-shadow-2);
}
.fjn-chips__option { display: flex; align-items: center; min-height: 36px; padding: 0 var(--fjn-sp-2); border-radius: var(--fjn-r-sm); cursor: pointer; }
.fjn-chips__option[aria-selected="true"], .fjn-chips__option:hover { background: var(--fjn-brand-50); }

/* PIN (4 digits [D12]) — 52 × 56 fields */
.fjn-pin { display: flex; gap: var(--fjn-sp-2); }
.fjn-pin__digit {
  width: 52px; height: 56px; padding: 0; text-align: center;
  border: 2px solid var(--fjn-border-strong); border-radius: 8px; background: var(--fjn-surface);
  font: var(--fjn-fw-bold) 24px var(--fjn-font-mono);
  -webkit-text-security: disc;
}
.fjn-pin__digit:not(:placeholder-shown) { border-color: var(--fjn-text); }
.fjn-pin__digit:focus { outline: none; border-color: var(--fjn-brand-600); box-shadow: var(--fjn-focus); }