/* ===== Spec form ===== */
.form-section {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    background: var(--card-bg);
    overflow: hidden;
}

.form-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: background var(--duration-fast) ease;
}
.form-section-head:hover { background: var(--background-color); }
.form-section-head .sec-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.form-section-head .sec-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-color); }
.form-section-head .sec-chevron { color: var(--text-light); font-size: 11px; transition: transform var(--duration-normal) var(--ease-out); }
.form-section.open .sec-chevron { transform: rotate(90deg); }

.form-section-body {
    display: none;
    padding: 4px 12px 13px;
    border-top: 1px solid var(--border-color);
}
.form-section.open .form-section-body { display: block; }

/* Field rows */
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; min-width: 0; }

.field { margin-top: 10px; position: relative; }
.field label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.field .input-wrap { position: relative; display: flex; align-items: center; }

.field input[type="number"],
.field input[type="text"],
.field select {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 7px 9px;
    background: var(--card-bg);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.field input.field-error { border-color: var(--danger-color); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); }

.field .unit-suffix {
    position: absolute;
    right: 9px;
    font-size: 10.5px;
    color: var(--text-light);
    pointer-events: none;
    background: var(--card-bg);
    padding-left: 4px;
}
.field input[type="number"] { padding-right: 34px; }

/* Segmented control (persons, door type, etc.) */
.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px;
}
.segmented button {
    flex: 1;
    min-width: 34px;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-light);
    border-radius: 5px;
    padding: 5px 6px;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}
.segmented button:hover { color: var(--text-color); background: var(--surface-sunken); }
.segmented button.active { background: var(--primary-color); color: #fff; box-shadow: 0 1px 4px rgba(0,90,156,0.3); }

/* Override (unlock) fields */
.field .override-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    opacity: 0.6;
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 4px;
    margin-left: auto;
}
.field .override-toggle:hover { color: var(--primary-color); background: var(--primary-light); }
.field.overridden .override-toggle { color: var(--accent-amber); }
.field.overridden label::after {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-amber);
    display: inline-block;
}
.field input[disabled] { background: var(--background-color); color: var(--text-light); }

/* linked capacity fields */
.linked-note { font-size: 10px; color: var(--text-light); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.linked-note i { font-size: 9px; }

/* Component select row w/ edit button */
.component-row { display: flex; gap: 6px; align-items: stretch; }
.component-row select { flex: 1; }
.component-row .btn { padding: 0 10px; }
.field input.field-warn, .field select.field-warn { border-color: #d78700; box-shadow: 0 0 0 3px rgba(215, 135, 0, 0.10); }
.field select.field-error { border-color: var(--danger-color); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); }

/* Flash pulse when the compliance panel jumps the user to a field */
.field.field-flash {
    animation: field-flash-pulse 0.85s ease-in-out 3;
    border-radius: 6px;
}
@keyframes field-flash-pulse {
    0%, 100% { background: transparent; box-shadow: none; }
    50% { background: rgba(124, 92, 255, 0.14); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.28); }
}