/* Admin panel: security event summary by type and firmware release labels. */
/* styles.css has no global .mono rule, so raw identifiers get an explicit stack. */
.admin-sec-type__name code,
.admin-fw-series,
.admin-fw-channel .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Own badges instead of .chip: the cloud shell recolours every .chip with !important. */
.admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-secondary) 85%, transparent);
}
.admin-badge--unknown { border-style: dashed; }
.admin-badge--routine {
  color: color-mix(in srgb, var(--br-cloud-green, #27b76a) 52%, var(--br-cloud-ink, #09243b));
  border-color: color-mix(in srgb, var(--br-cloud-green, #27b76a) 45%, transparent);
  background: color-mix(in srgb, var(--br-cloud-green, #27b76a) 12%, transparent);
}
.admin-badge--attention,
.admin-badge--trial {
  color: color-mix(in srgb, var(--br-cloud-amber, #e9a833) 45%, var(--br-cloud-ink, #09243b));
  border-color: color-mix(in srgb, var(--br-cloud-amber, #e9a833) 60%, transparent);
  background: color-mix(in srgb, var(--br-cloud-amber, #e9a833) 16%, transparent);
}
.admin-sec-column { min-width: 0; }
.admin-sec-total { font-variant-numeric: tabular-nums; }
.admin-sec-hint { margin: -2px 0 0; }
.admin-sec-type-select { min-width: 0; }

/* The row layout follows the summary's own width (container queries), not the
   viewport: next to the audit column the summary is narrow even on wide screens. */
.admin-sec-summary {
  container: admin-sec-summary / inline-size;
  --admin-sec-verdict-width: 132px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
}
.admin-sec-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  min-width: 0;
}
.admin-sec-summary__head h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.admin-sec-summary__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.admin-sec-summary__list--busy { opacity: .6; }
.admin-sec-summary__note { margin: 0; }

.admin-sec-type {
  display: grid;
  /* Count and verdict tracks have fixed widths, so every row gets the same columns
     and the bars line up from row to row. */
  grid-template-columns: minmax(0, 1fr) 7ch minmax(96px, 150px) var(--admin-sec-verdict-width);
  grid-template-areas:
    "name count share verdict"
    "hint hint hint hint";
  gap: 4px 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}
button.admin-sec-type { cursor: pointer; transition: border-color var(--transition-base, .15s), box-shadow var(--transition-base, .15s); }
button.admin-sec-type:hover { border-color: var(--accent-primary); }
button.admin-sec-type:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.admin-sec-type--active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 40%, transparent);
  background: color-mix(in srgb, var(--surface-primary) 82%, var(--accent-primary) 18%);
}
.admin-sec-type--other,
.admin-sec-type--hidden { border-style: dashed; }
.admin-sec-type__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
/* Russian words wrap whole; only a word wider than the column may break. */
.admin-sec-type__name strong { min-width: 0; font-weight: 700; overflow-wrap: break-word; }
.admin-sec-type__name code { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.admin-sec-type__flag { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.admin-sec-type__count { grid-area: count; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-sec-type__share {
  grid-area: share;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-sec-type__bar {
  flex: 1 1 auto;
  min-width: 32px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-border) 75%, transparent);
}
.admin-sec-type__bar > span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--accent-primary); }
/* Fixed-width percentage keeps every bar the same length. */
.admin-sec-type__share > span:last-child { flex: 0 0 auto; min-width: 6ch; text-align: right; }
.admin-sec-type__verdict { grid-area: verdict; justify-self: end; white-space: nowrap; }
.admin-sec-type__hint { grid-area: hint; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }

.admin-sec-event-type { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.admin-sec-event-label { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-sec-list--busy { opacity: .6; }

.flow-badge.admin-sev--info { color: var(--text-secondary); }
.flow-badge.admin-sev--warning { background: color-mix(in srgb, var(--surface-primary) 72%, #f2bd5a 28%); color: var(--text-primary); }
.flow-badge.admin-sev--error,
.flow-badge.admin-sev--critical { background: color-mix(in srgb, var(--surface-primary) 65%, #ff7e94 35%); color: var(--text-primary); }

.admin-fw-cell { min-width: 0; }
.admin-fw-series { margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.admin-fw-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.admin-fw-channel { overflow-wrap: anywhere; }
.admin-fw-trial { white-space: nowrap; }
/* Release tables: 64-character hashes and long URLs must wrap instead of widening
   the row; the cloud view clips the grid (overflow: hidden) on narrow screens. */
.admin-grid--firmware .admin-grid__row > *,
.admin-grid--app-releases .admin-grid__row > * { min-width: 0; }
.admin-grid--firmware .admin-secondary,
.admin-grid--app-releases .admin-secondary { overflow-wrap: anywhere; }
@media (max-width: 1080px) {
  .admin-grid--app-releases .admin-grid__head,
  .admin-grid--app-releases .admin-grid__row { grid-template-columns: 1fr; }
}
.admin-grid__row.admin-grid__row--trial {
  border-color: color-mix(in srgb, var(--br-cloud-amber, #e9a833) 55%, var(--surface-border-soft));
  box-shadow: inset 3px 0 0 var(--br-cloud-amber, #e9a833);
}

/* Narrow summary: name and count, then bar and verdict, then the explanation. */
@container admin-sec-summary (max-width: 600px) {
  .admin-sec-type {
    grid-template-columns: minmax(0, 1fr) var(--admin-sec-verdict-width);
    grid-template-areas:
      "name count"
      "share verdict"
      "hint hint";
  }
}
/* Very narrow: the verdict gets its own line. */
@container admin-sec-summary (max-width: 340px) {
  .admin-sec-type {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name count"
      "share share"
      "verdict verdict"
      "hint hint";
  }
  .admin-sec-type__verdict { justify-self: start; }
}