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

/* ----------------------------------------------------------------- CCE -- */

/* A stacked label / value / note card. The KPI strip's own tile is a row,
 * and a long Korean label wrapped a syllable a line inside it. */
.compliance-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.compliance-legend { align-items: center; }

/* One matrix cell. Three states, never two: passing, failing, not applicable
 * — and never assessed, which is an outline (an absence) rather than a fill
 * (a value). */
.compliance-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
}
.compliance-cell.pass { background: var(--signal-ok); }
.compliance-cell.fail { background: var(--signal-crit); }
.compliance-cell.na { background: var(--surface-bright); }
.compliance-cell.none { background: transparent; border: 1px solid var(--stroke-strong); }
/* A failure somebody ruled on: still red, with the ruling drawn across it. */
.compliance-cell.excepted {
  background: repeating-linear-gradient(45deg, var(--signal-crit) 0 3px, var(--signal-info) 3px 5px);
}

.compliance-matrix-scroll { overflow-x: auto; }
.compliance-matrix { border-collapse: collapse; }
.compliance-matrix th,
.compliance-matrix td { padding: 2px 3px; text-align: center; }
.compliance-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 180px;
  text-align: left !important;
  padding: 4px 10px !important;
  background: var(--surface-container);
  border-right: 1px solid var(--stroke);
}
.compliance-item-head {
  writing-mode: vertical-rl;
  height: 48px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-surface-variant);
}
/* Items nothing evaluates, dimmed: a grey column is "we do not check this",
 * not "nothing reported". */
.compliance-item-head.manual { opacity: 0.45; }
.compliance-cell-td { cursor: pointer; }
.compliance-evidence {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------------------- reports -- */

.compliance-section-row { align-items: flex-start; }
.compliance-section-row input { margin-top: 3px; }

/* ----------------------------------------------------------- dashboard -- */

.compliance-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--signal-warn);
  border-radius: 6px;
  background: var(--tint-warn);
  color: var(--signal-warn);
}

.compliance-axes th { text-align: left; }
.compliance-cov {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.compliance-cov:hover .t-label-sm { color: var(--on-surface); }

/* --------------------------------------------------------------- audit -- */

.compliance-pre {
  margin: 0;
  max-height: 40vh;
  overflow: auto;
  padding: var(--sp-sm);
  border-radius: 4px;
  background: var(--surface-lowest);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
}

/* Filters size to their content; the global select fills its field. */
.compliance-toolbar .select { width: auto; min-width: 160px; }

/* -------------------------------------------- dashboard sections (r2) -- */

/* The overview's sections, each a grid cell: full width by default, half
 * when the reader halves it. Order and width live in localStorage. */
.compliance-dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.compliance-dsec { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.compliance-dsec.half { grid-column: span 1; }
@media (max-width: 767px) {
  .compliance-dash { grid-template-columns: minmax(0, 1fr); }
  .compliance-dsec, .compliance-dsec.half { grid-column: span 1; }
}
.compliance-dsec-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  cursor: grab;
  user-select: none;
}
.compliance-grip { color: var(--on-surface-variant); font-size: 12px; letter-spacing: -2px; }
.compliance-size { margin-left: auto; padding: 0 6px; min-height: 0; line-height: 1.4; }
.compliance-dsec.dragging { opacity: 0.5; }
.compliance-dsec.drop-target { outline: 2px dashed var(--signal-live); outline-offset: 4px; border-radius: 8px; }
.compliance-broken {
  padding: var(--sp-md);
  border: 1px solid var(--signal-crit);
  border-radius: 8px;
  background: var(--tint-crit);
}
.compliance-tiles .kpi.clickable { cursor: pointer; }

/* Ring charts. */
.compliance-donut-wrap { align-items: center; flex-wrap: wrap; }
.compliance-donut { width: 140px; height: 140px; flex: none; }
.compliance-donut circle:hover { stroke-width: 20; }
.compliance-donut-total { fill: var(--on-surface); font-size: 18px; font-family: var(--font-mono); }
.compliance-legend-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.compliance-legend-btn:disabled { cursor: default; }
.compliance-legend-btn:hover:not(:disabled) .t-body-sm { text-decoration: underline; }
.compliance-legend-btn .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Threat-feed cards with a freshness dot. */
.compliance-feeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-sm);
}
.compliance-feed {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--surface-container, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.compliance-feed:hover { border-color: var(--signal-live); }
.compliance-feed .grow { flex: 1; min-width: 0; }
.compliance-feed-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.compliance-feed-dot.fresh { background: #10b981; }
.compliance-feed-dot.stale { background: #fbbf24; }
.compliance-feed-dot.old { background: #ef4444; }
.compliance-feed-dot.never { background: #64748b; }

/* ATT&CK kill chain (runzero AttackKillChain.vue). The count is always
 * written, whatever the colour: a heat grid read alone is a guess. */
.compliance-kc-grid { display: grid; gap: 6px; }
.compliance-kc-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 74px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--stroke);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.compliance-kc-box:hover { border-color: var(--signal-live); }
.compliance-kc-ord { font-size: 10px; opacity: 0.65; font-family: var(--font-mono); }
.compliance-kc-name { font-size: 11px; line-height: 1.25; min-height: 2.5em; }
.compliance-kc-count { font-size: 18px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.compliance-kc-assets { font-size: 10px; opacity: 0.7; }
.compliance-kc-box.none { background: transparent; color: var(--on-surface-variant); }
.compliance-kc-box.low, .compliance-kc-fill.low { background: rgb(34 197 94 / 0.22); }
.compliance-kc-box.mid, .compliance-kc-fill.mid { background: rgb(234 179 8 / 0.26); }
.compliance-kc-box.high, .compliance-kc-fill.high { background: rgb(249 115 22 / 0.30); }
.compliance-kc-box.top, .compliance-kc-fill.top { background: rgb(220 38 38 / 0.34); }
.compliance-kc-gauge { margin-top: var(--sp-sm); }
.compliance-kc-track { position: relative; height: 20px; }
.compliance-kc-fill { position: absolute; top: 7px; height: 6px; border-radius: 3px; }
.compliance-kc-handle {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.compliance-kc-handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-container, #222);
  border: 2px solid var(--on-surface-variant);
  cursor: ew-resize;
}
.compliance-kc-handle::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-container, #222);
  border: 2px solid var(--on-surface-variant);
  cursor: ew-resize;
}

/* Trend series toggles. */
.compliance-series {
  border: 1px solid var(--series);
  border-left: 4px solid var(--series);
  background: transparent;
  color: var(--on-surface);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11px;
  cursor: pointer;
}
.compliance-series.off { border-color: var(--stroke); border-left-color: var(--stroke); opacity: 0.5; }

/* Report scope chips. */
.compliance-scope-chips { max-height: 160px; overflow-y: auto; }
.compliance-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
}