/* ========================================================================
   Component: Forms
   ======================================================================== */

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-5); }
.form-label { display: block; font-weight: var(--weight-bold); font-size: var(--text-base); }
.form-hint { color: var(--text-muted); font-size: var(--text-sm); }
.form-help { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--bg-secondary));
    color: var(--text-primary);
    font-size: var(--text-base);
    outline: none;
    transition: box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 96px; }
.form-input-sm { padding: 6px 10px; font-size: var(--text-sm); }
.form-select-sm { padding: 6px 10px; font-size: var(--text-sm); }

.checkbox-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-base); cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--brand);
}

/* ── Toggle Switch ── */
.toggle { position: relative; display: inline-flex; align-items: center; }
.toggle input { display: none; }

.toggle-slider {
    width: 46px; height: 26px;
    background: rgba(148, 163, 184, 0.45);
    border-radius: var(--radius-full);
    position: relative;
    border: 1px solid var(--border);
    transition: background 0.2s var(--ease-default);
    cursor: pointer;
}
.toggle-slider::before {
    content: ''; width: 20px; height: 20px;
    position: absolute; top: 2px; left: 2px;
    border-radius: var(--radius-full);
    background: var(--text-inverse);
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.15);
    transition: transform 0.2s var(--ease-default);
}
.toggle input:checked + .toggle-slider { background: color-mix(in srgb, var(--brand) 75%, rgba(148,163,184,0.45)); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

.toggle-sm .toggle-slider { width: 36px; height: 20px; }
.toggle-sm .toggle-slider::before { width: 14px; height: 14px; }
.toggle-sm input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── Search ── */
.search-bar { position: relative; width: min(400px, 40vw); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-input {
    width: 100%; padding-left: 36px; height: 42px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-primary) 94%, var(--bg-secondary));
    color: var(--text-primary);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }

/* ── Input with unit ── */
.input-with-unit { display: flex; align-items: center; gap: var(--space-2); }
.input-with-unit .unit { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }

/* ── Form rows ── */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.form-section { margin-bottom: var(--space-8); }
.form-section h3 { margin: 0 0 var(--space-4) 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }