/* Formularze. Etykieta zawsze nad polem — etykieta z boku łamie się przy
   pierwszym dłuższym napisie i rozjeżdża kolumnę. */

.dat-field { display: flex; flex-direction: column; gap: var(--space-1); }
.dat-field__label { font-size: var(--text-overline-size); font-weight: var(--text-title-weight); color: var(--color-text); }
.dat-field__help { font-size: var(--text-overline-size); color: var(--color-text-muted); }

.dat-input {
    height: var(--control-height-md);
    padding: 0 var(--input-padding-x);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--input-radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-small-size);
}

.dat-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 var(--ring-width) var(--focus-ring);
}

.dat-input[readonly] { border-color: var(--color-border); background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.dat-input:disabled { opacity: .5; background: var(--color-surface-sunken); cursor: not-allowed; }

.dat-input.is-error { border-color: var(--color-danger); }
.dat-input.is-error:focus { box-shadow: 0 0 0 var(--ring-width) var(--color-danger-soft); }

.dat-input--mono { font-family: var(--font-mono); }

textarea.dat-input { height: auto; min-height: var(--textarea-min-height); padding: var(--space-2) var(--input-padding-x); line-height: var(--text-body-lh); }

.dat-check { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.dat-check input { position: absolute; opacity: 0; width: var(--border-width); height: var(--border-width); }

.dat-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--check-size);
    height: var(--check-size);
    border: var(--border-width-strong) solid var(--color-border-strong);
    border-radius: var(--check-radius);
    background: var(--color-surface);
    color: var(--color-accent-fg);
}

.dat-check__box--radio { border-radius: var(--radius-full); }

.dat-check:has(input:checked) .dat-check__box { background: var(--color-accent); border-color: var(--color-accent); }
.dat-check__dot { opacity: 0; }
.dat-check:has(input:checked) .dat-check__dot { opacity: 1; }

.dat-check:has(input:focus-visible) .dat-check__box {
    outline: var(--focus-gap) solid var(--color-accent);
    outline-offset: var(--focus-gap);
}

.dat-check:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.dat-check__text { display: flex; flex-direction: column; gap: var(--space-1); }
.dat-check__label { font-size: var(--text-small-size); }
.dat-check__help { font-size: var(--text-overline-size); color: var(--color-text-muted); }

.dat-switch {
    display: inline-flex;
    align-items: center;
    width: var(--switch-width);
    height: var(--switch-height);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    cursor: pointer;
}

.dat-switch.is-active { background: var(--color-accent); justify-content: flex-end; }
.dat-switch__knob { width: var(--switch-knob); height: var(--switch-knob); border-radius: var(--radius-full); background: var(--color-surface); }

.dat-segmented {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--segmented-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--btn-radius-lg);
    background: var(--color-surface-sunken);
}

.dat-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--segmented-item-height);
    padding: var(--segmented-item-padding);
    line-height: 1;
    border: 0;
    border-radius: var(--segmented-radius);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-overline-size);
    text-decoration: none;
    cursor: pointer;
}

.dat-segmented__item.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--text-title-weight);
    box-shadow: var(--shadow-sm);
}

.dat-form__footer { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); }