/* firewall.css — FortiGate configuration audit.
 *
 * Findings-first. The score is context; what an analyst came for is the list of
 * things to fix and the reason each one matters.
 */

.fw-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 1.2rem 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}

.fw-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0.55rem 0.9rem; font: inherit; font-size: 0.88rem;
  color: #8C8C8C; cursor: pointer;
}
.fw-tab.is-on { color: inherit; border-bottom-color: var(--tint); font-weight: 600; }
.fw-tab:hover { color: inherit; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.fw-head {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1rem 1.2rem; margin-bottom: 1rem;
  border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 8px;
}

.fw-score { flex: 0 0 auto; text-align: center; min-width: 108px; }
.fw-score-v { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.fw-of { font-size: 0.9rem; font-weight: 400; opacity: 0.55; }
.fw-score-l { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }

.fw-excellent .fw-score-v, .fw-excellent .fw-score-l { color: #2E9E5B; }
.fw-good      .fw-score-v, .fw-good      .fw-score-l { color: var(--tint); }
.fw-fair      .fw-score-v, .fw-fair      .fw-score-l { color: #f39c12; }
.fw-poor      .fw-score-v, .fw-poor      .fw-score-l { color: #e74c3c; }
.fw-unknown   .fw-score-v, .fw-unknown   .fw-score-l { color: #8C8C8C; }

/* "Not assessed" must not read as a result. */
.fw-nd { font-size: 1.1rem; font-style: italic; color: #8C8C8C; }

.fw-meta { flex: 1 1 auto; min-width: 0; }
.fw-device { font-weight: 650; margin-bottom: 0.25rem; }
.fw-sub { font-size: 0.8rem; color: #8C8C8C; line-height: 1.5; }

/* ── Notices ──────────────────────────────────────────────────────────────── */

.fw-note {
  font-size: 0.83rem; line-height: 1.55;
  padding: 0.65rem 0.9rem; margin: 0 0 0.9rem;
  border-left: 3px solid #8C8C8C;
  background: rgba(127, 127, 127, 0.06);
  border-radius: 3px;
}

.fw-note.fw-good { border-left-color: #2E9E5B; background: rgba(46, 158, 91, 0.07); }
/* An unmasked upload is the loudest thing on this page, deliberately: it is the
   one state where somebody has to go and do something about a real exposure. */
.fw-note.fw-bad  { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.08); }

.fw-note code {
  font-size: 0.9em; padding: 0.05rem 0.25rem;
  background: rgba(127, 127, 127, 0.14); border-radius: 3px;
}

/* ── Controls over the list ───────────────────────────────────────────────── */

/* Screen-reader-only label: the search box is obvious by its placeholder to
   someone who can see it, and unlabelled to someone who cannot. */
.fw-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Status tabs. The count rides in the control, so an outcome's size is legible
   without opening it. */
.fw-seg {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 1.4rem 0 0.8rem;
}

.fw-st {
  font: inherit; font-size: 0.84rem; cursor: pointer;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  color: #8C8C8C; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.25);
}
.fw-st:hover { color: inherit; border-color: rgba(127, 127, 127, 0.45); }
.fw-st.is-on {
  color: inherit; font-weight: 600;
  border-color: var(--tint); background: rgba(var(--tint-rgb), 0.10);
}

.fw-st-n {
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 0.78rem; opacity: 0.8; margin-left: 0.15rem;
}

.fw-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.fw-q-wrap { flex: 1 1 18rem; min-width: 0; }
.fw-q {
  width: 100%; font: inherit; font-size: 0.86rem;
  padding: 0.45rem 0.7rem; border-radius: 5px;
  color: inherit; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.3);
}
.fw-q:focus { outline: 2px solid rgba(var(--tint-rgb), 0.45); outline-offset: 1px; }

.fw-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.fw-chips-l {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8C8C8C; margin-right: 0.15rem;
}

.fw-chip {
  font: inherit; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.04em; cursor: pointer;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  color: #8C8C8C; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.28);
}
.fw-chip:hover { color: inherit; }
.fw-chip-n { font-variant-numeric: tabular-nums; font-weight: 700; }

/* A pressed chip takes its own severity's colour, so the filter and the rows it
   leaves behind read as the same thing. */
.fw-chip.is-on { color: #fff; border-color: transparent; font-weight: 600; }
.fw-chip.fw-sev-critical.is-on { background: #C0392B; }
.fw-chip.fw-sev-high.is-on     { background: #E74C3C; }
.fw-chip.fw-sev-medium.is-on   { background: #D98B0B; }
.fw-chip.fw-sev-low.is-on      { background: #6E7B85; }

.fw-tools { display: flex; gap: 0.3rem; margin-left: auto; }
.fw-tool {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.3rem 0.6rem; border-radius: 5px;
  color: #8C8C8C; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.25);
}
.fw-tool:hover { color: inherit; border-color: rgba(127, 127, 127, 0.45); }

/* What a filter is hiding, and the way out of it. Never quiet: a forgotten
   filter is how a firewall reads as clean when only one slice of it was on
   screen. */
.fw-filter-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: #8C8C8C;
  padding: 0.45rem 0.7rem; margin-bottom: 0.8rem;
  border-radius: 5px; background: rgba(var(--tint-rgb), 0.08);
  border: 1px solid rgba(var(--tint-rgb), 0.25);
}

.fw-clear {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.15rem 0.5rem; border-radius: 4px;
  color: var(--tint); background: transparent;
  border: 1px solid rgba(var(--tint-rgb), 0.4);
}
.fw-clear:hover { color: #fff; background: var(--tint); }

/* Why a set of checks could not be assessed, grouped. Styled as information
   rather than as an alarm: none of it is a fault on the device. */
.fw-why {
  font-size: 0.83rem; line-height: 1.55;
  padding: 0.7rem 0.9rem; margin: 0 0 0.9rem;
  border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 5px;
  background: rgba(127, 127, 127, 0.04);
}
.fw-why ul { margin: 0.5rem 0 0.6rem; padding-left: 1.1rem; }
.fw-why li { margin-bottom: 0.2rem; }
.fw-why code {
  font-size: 0.9em; padding: 0.05rem 0.25rem;
  background: rgba(127, 127, 127, 0.14); border-radius: 3px;
}
.fw-why p { margin: 0; color: #8C8C8C; }
.fw-why-n { color: #8C8C8C; font-variant-numeric: tabular-nums; }

/* ── Findings ─────────────────────────────────────────────────────────────── */

.fw-h {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8C8C8C; margin: 1.6rem 0 0.7rem;
}

.fw-f {
  padding: 0.75rem 0.95rem; margin-bottom: 0.7rem;
  border: 1px solid rgba(127, 127, 127, 0.2);
  border-left-width: 3px; border-radius: 5px;
}

/* The rationale and the fix sit behind a disclosure. The summary carries
   everything needed to decide whether to open it: outcome, severity, title and
   which benchmark asked for it. */
.fw-f > summary { cursor: pointer; list-style: none; }
.fw-f > summary::-webkit-details-marker { display: none; }
.fw-f > summary::after {
  content: '\203A'; margin-left: auto; padding-left: 0.5rem;
  color: #8C8C8C; transform: rotate(90deg); transition: transform 0.15s ease;
}
.fw-f[open] > summary::after { transform: rotate(-90deg); }
.fw-f > summary:focus-visible { outline: 2px solid rgba(var(--tint-rgb), 0.5); outline-offset: 2px; }
.fw-f-body { margin-top: 0.15rem; }

.fw-f.fw-sev-critical { border-left-color: #c0392b; }
.fw-f.fw-sev-high     { border-left-color: #e74c3c; }
.fw-f.fw-sev-medium   { border-left-color: #f39c12; }
.fw-f.fw-sev-low      { border-left-color: #8C8C8C; }

.fw-f-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.fw-f-t { font-weight: 600; flex: 1 1 240px; }

.fw-badge {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 700;
}
.fw-badge.fw-fail { background: rgba(231, 76, 60, 0.14);  color: #e74c3c; }
.fw-badge.fw-pass { background: rgba(46, 158, 91, 0.14);  color: #2E9E5B; }
/* Grey, not amber: "we could not check this" is not a warning about the
   client's firewall, it is a statement about our visibility. */
.fw-badge.fw-na   { background: rgba(127, 127, 127, 0.16); color: #8C8C8C; }

.fw-sev { font-size: 0.7rem; text-transform: uppercase; color: #8C8C8C; letter-spacing: 0.04em; }

.fw-ref {
  font-size: 0.68rem; color: #8C8C8C;
  border: 1px solid rgba(127, 127, 127, 0.3);
  padding: 0.03rem 0.32rem; border-radius: 3px;
}
/* Ours is marked as ours rather than dressed up as a standard. */
.fw-ref.fw-own { border-style: dashed; }

.fw-f-d { font-size: 0.87rem; margin-top: 0.4rem; line-height: 1.5; }
.fw-f-r { font-size: 0.82rem; margin-top: 0.35rem; line-height: 1.55; color: #8C8C8C; }

/* Policy ids, interface names, tunnel names. Never a secret value, and never
   shown to a client — see publicFinding() in lib/fortigate-score.js. */
.fw-ev {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  font-size: 0.78rem; margin-top: 0.45rem;
  color: #8C8C8C; word-break: break-word;
}

/* One pill per evidence key, so `policies: 4` and `interfaces: port1, port2`
   stop running together into one line of punctuation. */
.fw-ev-i {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.12rem 0.4rem; border-radius: 4px;
  background: rgba(127, 127, 127, 0.10);
  border: 1px solid rgba(127, 127, 127, 0.16);
}
.fw-ev-k { font-weight: 700; opacity: 0.85; }
.fw-ev-k::after { content: ':'; }

/* ── Category scorecards ──────────────────────────────────────────────────── */

.fw-cats {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Each card is a button: the question a scorecard provokes is "which ones", and
   the card is where that click naturally lands. */
.fw-cat {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  color: inherit; background: transparent;
  padding: 0.7rem 0.85rem; border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.2);
  border-left-width: 3px;
}
.fw-cat:hover { border-color: rgba(127, 127, 127, 0.45); }
.fw-cat.is-on {
  background: rgba(var(--tint-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.45);
}
.fw-cat-top { display: flex; align-items: baseline; gap: 0.6rem; }
.fw-cat-l { flex: 1 1 auto; font-weight: 600; font-size: 0.85rem; }
.fw-cat-v { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fw-cat-sub { display: block; font-size: 0.76rem; color: #8C8C8C; margin-top: 0.2rem; }
.fw-cat-b {
  display: block; font-size: 0.74rem; color: #8C8C8C;
  margin-top: 0.4rem; line-height: 1.45;
}

/* Band colours reuse the score block's, so a category reads the same way the
   headline score does. */
.fw-cat.fw-excellent { border-left-color: #22C55E; }
.fw-cat.fw-good      { border-left-color: #4ADE80; }
.fw-cat.fw-fair      { border-left-color: #F59E0B; }
.fw-cat.fw-poor      { border-left-color: #E8394A; }
.fw-cat.fw-unknown   { border-left-color: rgba(127, 127, 127, 0.4); }

/* Heading above each group of findings. */
.fw-cat-h {
  margin: 1.3rem 0 0.5rem; font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.5rem;
}
.fw-cat-n {
  font-size: 0.72rem; font-weight: 600; color: #8C8C8C;
  border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* ── History ──────────────────────────────────────────────────────────────── */

.fw-hist { display: flex; flex-direction: column; gap: 0.4rem; }

.fw-h-row {
  display: flex; align-items: baseline; gap: 0.9rem;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 0.6rem 0.85rem; color: inherit; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 5px;
}
.fw-h-row:hover { border-color: var(--tint); }
/* The audit currently on the Latest tab, marked in the list it was chosen
   from — otherwise clicking a row gives no sign which one you are reading. */
.fw-h-row.is-on { border-color: var(--tint); background: rgba(var(--tint-rgb), 0.07); }

.fw-h-tag {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; margin-left: 0.45rem;
  padding: 0.05rem 0.35rem; border-radius: 3px;
  color: #8C8C8C; background: rgba(127, 127, 127, 0.14);
}
.fw-h-tag-on { color: var(--tint); background: rgba(var(--tint-rgb), 0.14); }

/* Movement against the previous audit. Absent, not zero, when either score is
   null — there is no "no change" between two things that were never measured. */
.fw-h-d { font-size: 0.75rem; font-weight: 700; margin-left: 0.3rem; }
.fw-h-d.fw-up   { color: #2E9E5B; }
.fw-h-d.fw-down { color: #e74c3c; }
.fw-h-d.fw-flat { color: #8C8C8C; }

/* Row + its delete button as siblings, so neither is nested inside the other. */
.fw-h-item { display: flex; align-items: stretch; gap: 0.4rem; }
.fw-h-item .fw-h-row { flex: 1 1 auto; width: auto; }

/*
 * Destructive, so it is quiet until you go near it — findable without competing
 * with the row it would delete.
 */
.fw-h-del, .fw-actions .fw-h-del {
  flex: 0 0 auto; font: inherit; font-size: 0.8rem; cursor: pointer;
  padding: 0 0.75rem; color: #8C8C8C; background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 5px;
}
.fw-h-del:hover { color: #fff; background: #C0392B; border-color: #C0392B; }

.fw-actions {
  display: flex; justify-content: flex-end;
  margin-top: 1.2rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
}
.fw-actions .fw-h-del { padding: 0.4rem 0.9rem; }

.fw-h-when  { flex: 0 0 auto; color: #8C8C8C; font-variant-numeric: tabular-nums; }
.fw-h-dev   { flex: 1 1 auto; font-weight: 600; }
.fw-h-score { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fw-h-sub   { flex: 0 0 auto; font-size: 0.78rem; color: #8C8C8C; }

.fw-upload { margin-bottom: 1.2rem; }

/* Shut once there is an audit to read, so the findings are the top of the page.
   The promise that the file is not stored stays on the summary, where it is
   answerable without opening the card. */
.fw-up-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  cursor: pointer; list-style: none;
}
.fw-up-sum::-webkit-details-marker { display: none; }
.fw-up-sum::after {
  content: '\203A'; margin-left: auto;
  color: #8C8C8C; transform: rotate(90deg); transition: transform 0.15s ease;
}
.fw-upload[open] .fw-up-sum::after { transform: rotate(-90deg); }
.fw-up-sum:focus-visible { outline: 2px solid rgba(var(--tint-rgb), 0.5); outline-offset: 2px; }
.fw-up-hint { font-size: 0.78rem; color: #2E9E5B; }

@media (max-width: 700px) {
  .fw-head { flex-wrap: wrap; }
  .fw-h-row { flex-wrap: wrap; gap: 0.25rem 0.7rem; }
  .fw-h-when { flex-basis: 100%; }
  .fw-tools { margin-left: 0; }
}