/* MONO — forms.css */

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }

.field__label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.field__hint { font-size: 12px; color: var(--text-secondary); }
.field__error { font-size: 12px; color: var(--negative); display: flex; align-items: center; gap: 4px; }
.field__error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--negative); color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }

.input, .select, .textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color var(--duration-fast) var(--easing);
}
.textarea { padding: var(--space-3); min-height: 88px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--text-primary); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--negative); }
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.6; }

.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

.input-group { display: flex; align-items: stretch; }
.input-group__prefix {
    display: flex; align-items: center;
    padding: 0 var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
}
.input-group .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.checkbox-row, .radio-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.checkbox-row input[type="checkbox"], .radio-row input[type="radio"] {
    width: 20px; height: 20px; flex-shrink: 0;
    accent-color: var(--text-primary);
}

.switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-full); transition: background-color var(--duration-fast) var(--easing); }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--easing); }
.switch input:checked + .switch__track { background: var(--text-primary); }
.switch input:checked + .switch__track + .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

.type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); }
.type-toggle label {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 14px;
    color: var(--text-secondary);
}
.type-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.type-toggle input:checked + label { background: var(--text-primary); color: var(--background); border-color: var(--text-primary); }
.type-toggle input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }