/* =====================================================================
 * forms.css — canonical form-field styling shared across the portal +
 * tools. Loaded after each tool's inline <style> so it wins the cascade.
 *
 * Selectors cover the bare element AND the common .form-field wrapper
 * pattern. Existing wrappers (.ctr-rfq-field, .mfr-form-field, .field,
 * .form-row) are aliased so legacy markup keeps working.
 * =====================================================================*/

input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="password"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-strong);
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color 0.12s, box-shadow 0.12s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(56,189,248,0.18);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

textarea {
    min-height: 64px;
    resize: vertical;
}

/* Checkbox + radio — keep native control but match the accent. */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
    margin: 0;
}

/* Field-wrapper pattern (label above input). */
.form-field,
.ctr-rfq-field,
.mfr-form-field,
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-field > span,
.form-field > label,
.ctr-rfq-field > span,
.mfr-form-field > span,
.field > span.label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Inline-checkbox row (e.g. "✓ I agree" or "✓ Apply to all"). */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-default);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}

/* Two-column grid for paired fields. Collapses on narrow viewports. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}