/* CVEFinder UI foundations. Shared by the cabinet and the design reference. */
/* Dependency screens use the same layout, dialogs, rows and badges as infrastructure. */
#sca .metrics { margin-bottom: 24px; }
#sca .metric small { display: block; margin-top: 8px; color: var(--ui-muted); }
#sca .sca-overview { margin: 0 0 24px; color: var(--ui-muted); }
#sca .table-wrap > table { min-width: 680px; }
#sca table.sca-findings { table-layout: fixed; width: 100%; min-width: 720px; }
#sca .finding-row .status-badge { white-space: normal; }
#sca .finding-row p { margin-top: 0; }
#sca .sca-project a { overflow-wrap: anywhere; }
#sca .sca-dialog { width: min(800px, calc(100vw - 2rem)); }
#sca .sca-dialog pre { padding: 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-background); }
#sca .sca-dialog details.card { padding: 0; border: 0; margin: 0; background: transparent; }
#sca .sca-dialog details > summary { display: none; }
#sca .sca-token-result .information-table { margin: 24px 0; }
:root {
  --ui-background: #0b111b;
  --ui-surface: #111d2c;
  --ui-border: #30465c;
  --ui-text: #e6edf3;
  --ui-muted: #a3b4c8;
  --ui-accent: #64dac3;
  --ui-success: #9ce8cb;
  --ui-warning: #f7d38a;
  --ui-error: #ffadbb;
  --ui-radius: 12px;
  --ui-gap: 16px;
  --ui-control-height: 44px;
}
button, input, select { min-height: var(--ui-control-height); }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--ui-accent); }
.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-gap);
  margin-bottom: 24px;
}
.dialog-heading h2 { margin: 4px 0 0; min-width: 0; }
.icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--ui-control-height);
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  margin: 0;
  padding: 0;
  font-size: 26px;
  line-height: 1;
}
dialog { max-height: 90dvh; overflow-y: auto; border-radius: var(--ui-radius); }
dialog label { margin-bottom: 0; }
dialog .settings-form { margin: 0 0 20px; }
#server-connection pre { padding: 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-background); }
#server-connection .download-link { display: inline-block; padding: 10px 12px; }
#server-connection .information-table { margin-top: 20px; }
#token-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#token-form button { margin: 0 0 18px; }
:is(#report, #sca) .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: stretch; gap: var(--ui-gap); }
:is(#report, #sca) .filters > label { min-width: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
:is(#report, #sca) .filters > label.inline { flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; gap: 10px; }
:is(#report, #sca) .filters input[type="number"] { max-width: none; }
.inline input[type="checkbox"], .inline input[type="radio"] { display: inline-block; min-height: 0; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--ui-accent); }
#report .table-wrap > table, #findings details table { table-layout: fixed; width: 100%; min-width: 720px; }
.finding-row > td { vertical-align: top; overflow-wrap: anywhere; }
.finding-row > td:nth-child(1) { width: 24%; }
.finding-row > td:nth-child(2) { width: 16%; }
.finding-row > td:nth-child(3) { width: 40%; }
.finding-row > td:nth-child(4) { width: 20%; }
.finding-row .severity { margin: 0 0 10px; }
.finding-actions > td { text-align: right; padding-top: 0; padding-bottom: 20px; border-top: 0; }
.finding-actions button { margin: 0; }
.environment-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.4fr) auto; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ui-border); }
.environment-summary { margin: 0; color: var(--ui-muted); font-size: 13px; }
.environment-row .row-actions { justify-content: flex-end; }
.status-badge { display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; font-size: 12px; font-weight: 650; line-height: 1.4; }
.status-success { color: var(--ui-success); background: #173d33; }
.status-warning { color: var(--ui-warning); background: #3c301c; }
.status-error { color: var(--ui-error); background: #4a1924; }
.status-neutral { color: var(--ui-muted); background: #253143; }
.database-table { max-height: 440px; overflow: auto; }
.database-table table { min-width: 650px; }
.database-table th { position: sticky; top: 0; z-index: 1; background: var(--ui-surface); }
.database-table td, .database-table th { padding: 14px 16px; vertical-align: middle; }
.database-table time { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ui-muted); }
@media (max-width: 760px) {
  .environment-row { grid-template-columns: 1fr; gap: 12px; }
  .environment-row .row-actions { justify-content: flex-start; }
  :is(#report, #sca) .filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}