/* ============================================================
   Form section (.form-section)
   ------------------------------------------------------------
   Reusable card-style form block: numbered badge + title header,
   responsive field grid, themed labels and controls (incl.
   Bootstrap form-control/form-select + TomSelect). Consumes
   --surface/--border/--control-*/--fs-* theme tokens.
   ============================================================ */

/* The whole form reads as ONE card: the container carries the surface
   background (rule lives in the page template's inline <style>), sections
   inside are flat and separated by hairline dividers. */

/* Page header sits inside the card — flatten its own chrome and let the
   divider below separate it from the first section. */
.assessment-form .formContainer .page-header {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.form-section {
    padding: 1.25rem 1.5rem 1.5rem;
    margin-bottom: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.form-section + .form-section {
    border-top: 1px solid var(--border-subtle);
}

.form-section__head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.form-section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.form-section__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.form-section__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: var(--fs-badge-bg);
    color: var(--fs-badge-text);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.form-section__title {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Field grid ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-field--span-2 {
    grid-column: span 2;
}

.form-field__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.1rem;
    margin-bottom: 0.35rem;
}

/* ── Labels ── */
.form-section .form-label,
.form-field__head .form-label {
    margin: 0 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
}

.form-field__head .form-label {
    margin-bottom: 0;
}

/* Label of the focused field picks up the accent */
.form-section .form-label {
    transition: color 0.14s ease;
}

.form-section .form-field:focus-within .form-label {
    color: var(--fs-accent);
}

.form-section .form-label.required::after {
    content: " *";
    color: var(--danger);
}

/* ── Controls ── */
.form-section .form-control,
.form-section .form-select {
    min-height: 2.6rem;
    border: 1px solid var(--control-border);
    border-radius: 0.5rem;
    background-color: var(--control-surface);
    color: var(--control-text);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.form-section .form-control::placeholder {
    color: var(--control-placeholder);
    font-weight: 500;
}

.form-section .form-control:focus,
.form-section .form-select:focus {
    border-color: var(--control-focus-border);
    background-color: var(--control-surface);
    color: var(--control-text);
    box-shadow: 0 0 0 0.2rem var(--control-focus-ring);
}

.form-section .form-select {
    background-image: var(--fs-select-caret);
}

.form-section .form-text {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ── TomSelect (project / labels multiselect) ── */
.form-section .ts-wrapper {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.form-section .ts-wrapper .ts-control {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--control-border);
    border-radius: 0.5rem;
    background: var(--control-surface);
    color: var(--control-text);
}

.form-section .ts-wrapper.focus .ts-control {
    border-color: var(--control-focus-border);
    box-shadow: 0 0 0 0.2rem var(--control-focus-ring);
}

.form-section .ts-control input::placeholder {
    color: var(--control-placeholder);
}

.form-section .ts-wrapper.multi .ts-control > div {
    margin: 0.12rem;
    padding: 0.16rem 0.42rem;
    border-radius: 0.3rem;
    background: var(--tb-ts-chip-bg);
    color: var(--tb-ts-chip-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.form-section .ts-dropdown {
    z-index: 60;
    border: 1px solid var(--control-border);
    border-radius: 0.5rem;
    background: var(--tb-dropdown-bg);
    color: var(--control-text);
    box-shadow: var(--tb-dropdown-shadow);
}

/* ── Responsive grid ── */
@media (max-width: 1199.98px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--span-2 {
        grid-column: auto;
    }
}

/* ── Form top bar (title) ── */
.form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-topbar__title {
    margin: 0;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ── Sticky form actions footer ── */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0;
    padding: 0.85rem 1rem;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 1rem 1rem;
    background: var(--surface);
    box-shadow: none;
}

.form-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.5rem 1.3rem;
    border-radius: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.form-actions__btn--cancel {
    border: 1px solid var(--control-border);
    background: var(--control-surface);
    color: var(--text-secondary);
}

.form-actions__btn--cancel:hover {
    border-color: var(--control-border-hover);
    background: var(--control-surface-hover);
    color: var(--text);
}

.form-actions__btn--cancel:focus-visible {
    outline: none;
    border-color: var(--control-focus-border);
    box-shadow: 0 0 0 0.22rem var(--control-focus-ring);
}

.form-actions__btn--cancel:active {
    background: var(--surface-sunken);
    transform: translateY(1px);
}

.form-actions__btn--save {
    border: none;
    background: linear-gradient(180deg, var(--ph-action-grad-top), var(--ph-action-grad-bottom));
    color: var(--ph-action-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px var(--ph-action-shadow),
        0 6px 16px var(--ph-action-shadow);
    transition: background-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.form-actions__btn--save:hover {
    background: linear-gradient(180deg, var(--ph-action-grad-top-hover), var(--ph-action-grad-bottom-hover));
    color: var(--ph-action-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 20px var(--ph-action-shadow);
    transform: translateY(-1px);
}

.form-actions__btn--save:focus-visible {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px var(--ph-action-shadow),
        0 0 0 0.22rem var(--ph-action-ring);
}

.form-actions__btn--save:active {
    background: linear-gradient(180deg, var(--ph-action-grad-bottom), var(--ph-action-grad-bottom));
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
    transform: translateY(0);
}

.form-actions__btn--save i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
}

/* ============================================================
   Assessment form: reference scale tables + risk group table
   ------------------------------------------------------------
   Scoped to .assessment-form so it overrides the legacy global
   .riskGroupTable / .assessmentScaleTable rules (in
   assessments/tables.css) WITHOUT affecting the project form,
   which shares those classes.
   ============================================================ */

/* ── Scale cards: select paired with its live preview table ── */
.form-grid--security-model {
    margin-bottom: 1rem;
}

.scale-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.scale-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--surface-sunken);
    transition: box-shadow 0.18s ease;
}

.scale-card:focus-within {
    box-shadow: 0 0 0 3px var(--control-focus-ring);
}

.scale-card__preview {
    margin-top: auto;
}

@media (max-width: 1399.98px) {
    .scale-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .scale-cards {
        grid-template-columns: 1fr;
    }
}

.assessment-form .assessmentScaleTable,
.assessment-form .riskGroupTable {
    width: 100%;
    margin: 0;
    border: 1px solid var(--dt-container-border);
    border-radius: 0.6rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--dt-container-bg);
}

.assessment-form .assessmentScaleTable thead th,
.assessment-form .riskGroupTable thead th {
    padding: 0.6rem 0.85rem;
    background: var(--dt-head-bg);
    color: var(--dt-head-text);
    border-bottom: 1px solid var(--dt-head-border);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.assessment-form .assessmentScaleTable thead th:first-child,
.assessment-form .riskGroupTable thead th:first-child {
    border-top-left-radius: 0.6rem;
}

.assessment-form .assessmentScaleTable thead th:last-child,
.assessment-form .riskGroupTable thead th:last-child {
    border-top-right-radius: 0.6rem;
}

.assessment-form .assessmentScaleTable td,
.assessment-form .riskGroupTable td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--dt-cell-border);
    color: var(--dt-cell-text);
    font-size: 0.85rem;
    vertical-align: middle;
}

.assessment-form .assessmentScaleTable tbody tr:last-child td,
.assessment-form .riskGroupTable tbody tr:last-child td {
    border-bottom: none;
}

.assessment-form .assessmentScaleTable tbody tr:nth-child(odd) td,
.assessment-form .riskGroupTable tbody tr:nth-child(odd) td {
    background: var(--dt-row-odd);
}

.assessment-form .assessmentScaleTable tbody tr:nth-child(even) td,
.assessment-form .riskGroupTable tbody tr:nth-child(even) td {
    background: var(--dt-row-even);
}

.assessment-form .assessmentScaleTable tbody tr:hover td,
.assessment-form .riskGroupTable tbody tr:hover td {
    background: var(--dt-row-hover);
}

/* Empty-selection placeholder row (JS-rendered .text-muted cell) */
.assessment-form .assessmentScaleTable td.text-muted,
.assessment-form .riskGroupTable td.text-muted {
    color: var(--text-muted) !important;
}

/* Scale table: narrow centered code column */
.assessment-form .assessmentScaleTable th:first-child,
.assessment-form .assessmentScaleTable td:first-child {
    width: 3.5rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
}

/* ── Risk group table specifics ── */
.assessment-form .risk-summary {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.9rem 0.55rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--surface-sunken);
    border: none;
    border-radius: 0.6rem;
    box-shadow: inset 3px 0 0 var(--blue-600);
}

.assessment-form .risk-summary--in-grid {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.assessment-form .risk-config {
    margin-bottom: 1rem;
}

.assessment-form .risk-summary__label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.assessment-form .risk-summary__value {
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.assessment-form .risk-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
    color: var(--dt-danger-text);
    font-size: 0.82rem;
}

.assessment-form .risk-legend i {
    color: var(--danger);
}

.assessment-form .riskGroupTable .risk-group-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.assessment-form .risk-cat-dot {
    flex: 0 0 auto;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--risk-cat-color, #94a3b8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--risk-cat-color, #94a3b8) 18%, transparent);
}

.assessment-form .risk-group-name__text {
    font-weight: 600;
}

.assessment-form .riskGroupTable .risk-group-name-exceeds .risk-group-name__text {
    font-weight: 700;
}

.assessment-form .riskGroupTable .risk-group-code {
    width: 5rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 800;
}

.assessment-form .riskGroupTable .risk-group-range-exceeds {
    color: var(--dt-danger-text);
    font-weight: 700;
}

.assessment-form .riskGroupTable tbody tr.risk-group-row-exceeds td {
    background: var(--dt-danger-tint) !important;
}

.assessment-form .riskGroupTable tbody tr.risk-group-row-exceeds:hover td {
    background: var(--dt-danger-tint) !important;
}

.assessment-form .riskGroupTable tbody tr.risk-group-row-exceeds td:first-child {
    box-shadow: inset 4px 0 0 var(--dt-danger-text), var(--table-border-color-body);
}

.assessment-form .riskGroupTable .risk-group-exceeds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--dt-danger-border);
    border-radius: 999px;
    background: var(--dt-danger-tint);
    color: var(--dt-danger-text);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}