.threat-legend-swatch {
    width: 3;
    height: 1;
    margin-right: 1;
}

.threat-legend-swatch.not-investigated    { background: #888888; }
.threat-legend-swatch.na                  { background: #4488cc; }
.threat-legend-swatch.mitigated           { background: #44aa44; }
.threat-legend-swatch.vulnerable          { background: #cc4444; }
.threat-legend-swatch.conditionally-mitigated { background: #cc8844; }

ThreatLegendItem {
    width: auto;
    height: 1;
    margin: 0 2;
    align: left middle;
}

ThreatLegend {
    height: 3;
    align: center middle;
    border-top: solid $primary;
    padding: 0 2;
}

#heatmap-scroll {
    height: 1fr;
}

#heatmap-grid {
    width: 100%;
    height: auto;
}

.heatmap-column {
    width: 1fr;
    height: auto;
    border: solid $primary;
}

.heatmap-column-wide {
    width: 2fr;
    height: auto;
    border: solid $primary;
}

.app-sw-columns {
    width: 100%;
    height: auto;
}

.app-sw-sub {
    width: 1fr;
    height: auto;
}

.column-header {
    text-align: center;
    text-style: bold;
    height: 3;
    content-align: center middle;
    border-bottom: solid $primary;
    background: $surface;
}

ThreatEntry {
    width: 100%;
    height: 1;
    margin: 1 1 0 1;
    content-align: center middle;
}

ThreatEntry:hover {
    text-style: bold reverse;
}

ThreatEntry.not-investigated         { background: #888888; }
ThreatEntry.na                       { background: #4488cc; }
ThreatEntry.mitigated                { background: #44aa44; }
ThreatEntry.vulnerable               { background: #cc4444; }
ThreatEntry.conditionally-mitigated  { background: #cc8844; }

/* ── Threat Modal ────────────────────────────────────── */

ThreatModal {
    align: center middle;
}

#threat-modal-dialog {
    width: 60;
    max-height: 80%;
    padding: 1 2;
    border: thick $primary;
    background: $surface;
}

#threat-modal-title {
    text-style: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 1;
}

#resolution-select {
    width: 100%;
    margin-bottom: 1;
}

#mitigation-list {
    height: auto;
    max-height: 12;
    margin-bottom: 1;
    border: solid $primary;
    padding: 0 1;
}

#remarks-area {
    height: 6;
    width: 100%;
    margin-bottom: 1;
}

#threat-modal-buttons {
    width: 100%;
    height: auto;
    align: center middle;
}

#threat-modal-buttons Button {
    margin: 0 1;
}
