/* =============================================================
 * SynthRadio — Forms (inputs, selects, textarea, checks, uploads, errors)
 * ============================================================= */

.form { display: grid; gap: var(--sr-space-5); }

.form-group { display: grid; gap: var(--sr-space-2); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sr-space-4);
}

.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.form label,
.form .form-label {
    font-size: var(--sr-fs-sm);
    font-weight: 600;
    color: var(--sr-text);
    letter-spacing: 0.02em;
}

.form .form-hint {
    font-size: var(--sr-fs-xs);
    color: var(--sr-text-dim);
    line-height: var(--sr-lh-snug);
}

/* — Standard text inputs — */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="url"],
.form input[type="number"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="time"],
.form input[type="datetime-local"],
.form input[type="search"],
.form select,
.form textarea {
    width: 100%;
    padding: var(--sr-space-3) var(--sr-space-4);
    color: var(--sr-text);
    font-family: inherit;
    font-size: var(--sr-fs-base);
    background: linear-gradient(180deg, rgba(16,23,34,0.9), rgba(11,15,21,0.9));
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius);
    outline: none;
    transition:
        border-color var(--sr-transition),
        box-shadow var(--sr-transition),
        background var(--sr-transition);
}

.form textarea {
    resize: vertical;
    min-height: 120px;
    line-height: var(--sr-lh-snug);
}

.form select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--sr-muted) 50%),
        linear-gradient(135deg, var(--sr-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.form input::placeholder,
.form textarea::placeholder {
    color: var(--sr-text-dim);
}

.form input:hover:not(:disabled),
.form select:hover:not(:disabled),
.form textarea:hover:not(:disabled) {
    border-color: var(--sr-border-strong);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--sr-electric);
    background: linear-gradient(180deg, rgba(16,23,34,1), rgba(11,15,21,1));
    box-shadow: 0 0 0 3px rgba(0, 172, 255, 0.18), var(--sr-glow-blue);
}

.form input:disabled,
.form select:disabled,
.form textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form input.is-valid,
.form select.is-valid,
.form textarea.is-valid {
    border-color: rgba(46,204,113,0.45);
    box-shadow: 0 0 0 3px rgba(46,204,113,0.1);
}

.form input.is-invalid,
.form select.is-invalid,
.form textarea.is-invalid {
    border-color: rgba(255,77,109,0.55);
    box-shadow: 0 0 0 3px rgba(255,77,109,0.12);
}

/* — Form error messages — */
.form-error {
    color: var(--sr-danger);
    font-size: var(--sr-fs-sm);
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: var(--sr-space-2);
    margin-top: -2px;
}
.form-error::before {
    content: "⚠";
    line-height: 1.2;
    flex-shrink: 0;
}
.form-error-inline { display: inline-flex; margin-top: 0; }

.form-success {
    color: var(--sr-success);
    font-size: var(--sr-fs-sm);
    font-weight: 500;
}

/* — Checkbox & radio (custom-styled) — */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--sr-fs-sm);
    color: var(--sr-muted);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--sr-border-strong);
    background: var(--sr-panel-2);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--sr-transition);
    flex-shrink: 0;
}
.form-check input[type="radio"] { border-radius: 50%; }

.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-electric));
    border-color: rgba(0,172,255,0.6);
    box-shadow: 0 0 12px rgba(0, 172, 255, 0.45);
}
.form-check input[type="checkbox"]:checked::after {
    content: "";
    width: 10px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.form-check input[type="radio"]:checked::after {
    content: "";
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
}
.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible {
    outline: 2px solid var(--sr-electric);
    outline-offset: 2px;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sr-space-3);
}

/* — Switch (toggle) — */
.form-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-3);
    cursor: pointer;
    user-select: none;
}
.form-switch input { display: none; }
.form-switch .switch-track {
    width: 44px;
    height: 24px;
    border-radius: 9999px;
    background: var(--sr-panel-2);
    border: 1px solid var(--sr-border);
    position: relative;
    transition: all var(--sr-transition);
}
.form-switch .switch-track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--sr-transition);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.form-switch input:checked + .switch-track {
    background: linear-gradient(90deg, var(--sr-blue), var(--sr-electric));
    border-color: rgba(0,172,255,0.6);
    box-shadow: 0 0 14px rgba(0, 172, 255, 0.45);
}
.form-switch input:checked + .switch-track::after { transform: translateX(20px); }

/* — File upload dropzone — */
.form-upload {
    display: block;
    border: 2px dashed var(--sr-border);
    border-radius: var(--sr-radius);
    padding: var(--sr-space-8) var(--sr-space-6);
    text-align: center;
    cursor: pointer;
    transition: all var(--sr-transition);
    background:
        radial-gradient(circle at 50% 0%, rgba(0,172,255,0.05), transparent 70%),
        var(--sr-panel);
    color: var(--sr-muted);
}
.form-upload:hover,
.form-upload.is-dragover {
    border-color: var(--sr-electric);
    color: var(--sr-cyan);
    background: rgba(0, 172, 255, 0.05);
    box-shadow: var(--sr-glow-blue);
}
.form-upload .upload-icon {
    font-size: 32px;
    margin-bottom: var(--sr-space-3);
    color: var(--sr-electric);
    display: block;
}
.form-upload .upload-title {
    font-weight: 700;
    font-size: var(--sr-fs-base);
    color: var(--sr-text);
    margin-bottom: var(--sr-space-1);
}
.form-upload .upload-hint {
    font-size: var(--sr-fs-sm);
    color: var(--sr-muted);
}
.form-upload input[type="file"] { display: none; }

/* — File list (selected) — */
.file-list {
    list-style: none;
    display: grid;
    gap: var(--sr-space-2);
    margin-top: var(--sr-space-3);
}
.file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sr-space-3);
    padding: var(--sr-space-3) var(--sr-space-4);
    background: var(--sr-panel-2);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-sm);
    font-size: var(--sr-fs-sm);
}
.file-list .file-name { color: var(--sr-text); font-weight: 600; }
.file-list .file-size { color: var(--sr-muted); font-family: var(--sr-font-mono); font-size: var(--sr-fs-xs); }
.file-list .file-remove {
    color: var(--sr-muted);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sr-radius-sm);
    transition: all var(--sr-transition);
    border: 1px solid transparent;
}
.file-list .file-remove:hover {
    color: var(--sr-danger);
    background: rgba(255,77,109,0.08);
    border-color: rgba(255,77,109,0.25);
}

/* — Form fieldset / sections — */
.form-section {
    padding: var(--sr-space-6);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    background: linear-gradient(180deg, rgba(16,23,34,0.5), rgba(11,15,21,0.3));
}
.form-section-title {
    font-size: var(--sr-fs-md);
    font-weight: 700;
    margin-bottom: var(--sr-space-4);
    color: var(--sr-text);
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
}
.form-section-title::before {
    content: "";
    width: 4px; height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--sr-cyan), var(--sr-crimson));
}

/* — Auth shell (centered card) — */
.auth-shell {
    min-height: calc(100vh - var(--sr-header-h) - var(--sr-space-16));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sr-space-8) 0;
}
.auth-card {
    width: 100%;
    max-width: 460px;
    padding: var(--sr-space-8);
}
.auth-brand {
    display: grid;
    gap: 2px;
    margin-bottom: var(--sr-space-6);
}
.auth-brand-synthverse {
    font-size: var(--sr-fs-xs);
    letter-spacing: 0.22em;
    color: var(--sr-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.auth-brand-station {
    font-size: var(--sr-fs-md);
    font-weight: 800;
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, var(--sr-cyan), var(--sr-blue) 50%, var(--sr-crimson));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-title { font-size: var(--sr-fs-xl); margin-bottom: var(--sr-space-2); }
.auth-subtitle { color: var(--sr-muted); font-size: var(--sr-fs-sm); margin-bottom: var(--sr-space-6); line-height: var(--sr-lh-snug); }
.auth-footer {
    margin-top: var(--sr-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sr-space-2);
    flex-wrap: wrap;
    font-size: var(--sr-fs-sm);
    color: var(--sr-muted);
}
.auth-stub-note {
    margin-top: var(--sr-space-4);
    padding-top: var(--sr-space-4);
    border-top: 1px dashed var(--sr-border);
    font-size: var(--sr-fs-xs);
    color: var(--sr-text-dim);
    font-family: var(--sr-font-mono);
}

/* — Range slider — */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--sr-panel-2);
    border-radius: 9999px;
    border: 1px solid var(--sr-border);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-electric));
    border: 2px solid #fff;
    box-shadow: var(--sr-glow-blue);
    cursor: pointer;
    transition: transform var(--sr-transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sr-blue), var(--sr-electric));
    border: 2px solid #fff;
    box-shadow: var(--sr-glow-blue);
    cursor: pointer;
}