/* ids domain styles. Owned by the ids domain; loaded by index.html.
 * Build on tokens.css and components.css; prefix selectors with .ids- so
 * nothing here can restyle another domain's screens. */

/* One priority palette for every IDS screen: P1 reads the same everywhere. */
:root {
  --ids-p1: var(--signal-crit);
  --ids-p2: var(--signal-warn);
  --ids-p3: #facc15;
  --ids-p4: var(--signal-idle);
}
/* Yellow text on white is unreadable: the light theme darkens P3. */
:root[data-theme="light"] { --ids-p3: #ca8a04; }

.ids-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 6px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-label-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ids-prio.p1 { background: var(--tint-crit); color: var(--signal-crit-text); }
.ids-prio.p2 { background: var(--tint-warn); color: var(--signal-warn); }
.ids-prio.p3 { background: rgb(250 204 21 / 0.12); color: var(--ids-p3); }
.ids-prio.p4 { background: var(--surface-high); color: var(--on-surface-variant); }

.ids-link { color: var(--primary-fixed-dim); cursor: pointer; text-decoration: none; }
.ids-link:hover { text-decoration: underline; }
/* Spans only: an inline element needs a box to truncate in. A block that
 * truncates (the asset list's MAC-vendor line under the IP) must stay a
 * block — matching every `td .truncate` pulled it up beside the address. */
td .ids-link.truncate,
td span.truncate { display: inline-block; max-width: 360px; vertical-align: bottom; }

/* Ranked rows: label, P1..P4+ stack, count. */
.ids-rank { display: flex; flex-direction: column; gap: 6px; }
.ids-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-body-sm);
}
.ids-rank-row.clickable { cursor: pointer; border-radius: var(--r-md); }
.ids-rank-row.clickable:hover { background: var(--surface-high); }
.ids-rank-count { text-align: right; color: var(--on-surface-variant); }
.ids-stack-track { height: 8px; border-radius: var(--r-full, 999px); background: var(--surface-high); overflow: hidden; }
.ids-stack { display: flex; height: 100%; }
.ids-stack > i { display: block; height: 100%; }

/* SVG charts are stretched to their box; labels stay HTML. */
.ids-columns { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ids-svg { width: 100%; display: block; }
.ids-svg .ids-grid { stroke: var(--stroke); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ids-svg .ids-area { fill: rgb(var(--accent-rgb) / 0.12); }
.ids-svg .ids-line { fill: none; stroke: var(--signal-live); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ids-svg .ids-blocked-mark { fill: var(--on-surface); }
.ids-axis { display: flex; font-size: var(--fs-label-sm); color: var(--outline); font-variant-numeric: tabular-nums; }
.ids-axis > span { text-align: left; overflow: visible; white-space: nowrap; }
.ids-asof { text-align: right; margin-top: 6px; }

/* Weekday x hour. */
.ids-heat { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 2px; }
.ids-heat-axis { font-size: var(--fs-label-sm); color: var(--outline); text-align: center; line-height: 16px; }
.ids-heat-cell { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--surface-high); min-height: 10px; }

.ids-stats { gap: var(--gutter); }
@media (max-width: 1400px) { .ids-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The live screen: stream and timeline left, panels right. */
.ids-live { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gutter); align-items: start; }
.ids-live-side { position: sticky; top: calc(var(--header-h) + 8px); }
@media (max-width: 1300px) { .ids-live { grid-template-columns: minmax(0, 1fr); } .ids-live-side { position: static; } }
tr.ids-fresh { animation: ids-fresh 2.4s var(--ease) 1; }
@keyframes ids-fresh { from { background: rgb(var(--accent-rgb) / 0.16); } to { background: transparent; } }

/* Condition chips and menus. */
.ids-cond { display: inline-flex; align-items: center; gap: 2px; }
.ids-menu-wrap { position: relative; display: inline-block; }
.ids-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--sp-sm);
  background: var(--glass-3);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ids-menu[hidden] { display: none; }
.ids-menu-item { cursor: pointer; padding: 2px 4px; border-radius: var(--r-md); }
.ids-menu-item:hover { background: var(--surface-high); }

.ids-note { padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-md); font-size: var(--fs-body-sm); }
.ids-note.warn { background: var(--tint-warn); color: var(--signal-warn); }
.ids-note.info { background: var(--tint-info); color: var(--signal-info); }

.ids-drawer { width: min(560px, 100vw); }
.ids-drawer-title { min-width: 0; overflow-wrap: anywhere; }
.ids-section-title { font-size: var(--fs-label-md); color: var(--outline); border-top: 1px solid var(--stroke); padding-top: var(--sp-sm); }

/* Rule detail. */
.ids-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); }
.ids-flow-arrow {
  padding: 2px 10px;
  border-radius: var(--r-full, 999px);
  background: var(--tint-live);
  color: var(--signal-live);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
}
.ids-buffer { display: flex; align-items: center; gap: var(--sp-sm); }
.ids-rule-line { flex: 1; height: 1px; background: var(--stroke-strong); }
.ids-step { border: 1px solid var(--stroke); background: var(--surface-low); border-radius: var(--r-md); padding: 6px 10px; }
.ids-mod {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  color: var(--on-surface-variant);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  padding: 0 5px;
}
.ids-content { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.ids-bytes { display: inline-flex; gap: 2px; }
.ids-byte {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  padding: 0 3px;
  border-radius: var(--r-sm);
  background: var(--tint-warn);
  color: var(--signal-warn);
}

/* Policy form: the three states as cards (PINO-AVM PolicyExceptionFields). */
.ids-status-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); }
.ids-status-cards[hidden] { display: none; }
@media (max-width: 640px) { .ids-status-cards { grid-template-columns: minmax(0, 1fr); } }
.ids-status-card {
  display: flex; gap: var(--sp-sm); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--stroke); border-radius: var(--r-md); padding: var(--sp-sm) var(--sp-md);
  min-height: 64px; background: var(--surface-low);
}
.ids-status-card:hover { background: var(--surface-high); }
.ids-status-card.on { border-color: var(--primary-fixed-dim); background: var(--tint-info); }
.ids-status-card input { margin-top: 3px; }
.ids-current {
  font-size: var(--fs-label-sm); color: var(--on-surface-variant); border: 1px solid var(--stroke);
  border-radius: var(--r-full, 999px); padding: 0 6px; line-height: 16px;
}
.ids-readonly { background: var(--surface-high); display: flex; align-items: center; }
/* The SID form's three cards need room: PINO-AVM's dialog is sm:max-w-2xl. */
.modal:has(.ids-policy-form) { width: min(720px, calc(100vw - 32px)); }
.ids-policy-form textarea { width: 100%; box-sizing: border-box; }

/* Live screen: the push link badge and the coverage line. */
.ids-coverage-line { padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-body-sm); }
.ids-coverage-line.ok { background: var(--tint-ok, rgb(34 197 94 / 0.12)); color: var(--signal-ok); }
.ids-coverage-line.warn { background: var(--tint-warn); color: var(--signal-warn); }
.ids-coverage-line.muted { background: var(--surface-high); color: var(--on-surface-variant); }
.ids-token { word-break: break-all; user-select: all; }
.ids-prov { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); align-items: baseline; }
.ids-prov .sep { color: var(--outline); }
.ids-donut-wrap { display: flex; align-items: center; gap: var(--sp-md); }
.ids-donut .ids-donut-label { fill: var(--outline); font-size: 11px; }
.ids-donut .ids-donut-value { fill: var(--on-surface); font-size: 16px; font-weight: 600; }
.ids-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.ids-card-rule { border-bottom: 1px solid var(--stroke); padding-bottom: var(--sp-sm); }
.ids-card-rule:last-child { border-bottom: 0; padding-bottom: 0; }
.ids-policy-form .field[hidden] { display: none; }