:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #16202a;
  --muted: #617080;
  --line: #d9e0e7;
  --accent: #0f766e;
  --accent-2: #b45309;
  --danger: #b42318;
  --warn: #b54708;
  --ok: #067647;
  --shadow: 0 12px 30px rgba(22, 32, 42, 0.08);
}

/* v1.0.5-RC2 enterprise SOC/DLP dark console refresh */
:root {
  --bg: #071018;
  --panel: #101b26;
  --panel-2: #0b1520;
  --ink: #e7edf5;
  --muted: #91a2b5;
  --line: #213244;
  --accent: #22c7a9;
  --accent-2: #4ea1ff;
  --danger: #f05f66;
  --warn: #f5b84b;
  --ok: #35d07f;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body {
  background: var(--bg);
  color: var(--ink);
}

button,
a.button-link,
input,
select,
textarea {
  background: #0d1722;
  border-color: var(--line);
  color: var(--ink);
}

button:hover,
a.button-link:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34, 199, 169, 0.18);
}

.sidebar {
  background: #080f17;
  border-right: 1px solid var(--line);
  padding: 18px;
}

.brand-mark {
  background: linear-gradient(135deg, #22c7a9, #4ea1ff);
  color: #061018;
}

.nav {
  gap: 6px;
}

.nav-button {
  border-color: transparent;
  color: #b7c6d8;
  min-height: 34px;
}

.nav-button.active {
  background: #132536;
  border-color: #2f5874;
  color: #f4f8fb;
}

.nav-button:disabled {
  color: #536273;
}

.shell {
  padding: 18px;
}

.topbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.status-strip,
.metric,
.ops-card,
.pilot-card,
.demo-status-card,
.demo-scenario-card,
.demo-step-card,
.demo-handoff-card,
.scenario-summary-card,
.scenario-card,
.document-card,
.handoff-card,
.command-card,
.scope-card,
.workflow-card,
.work-surface,
.attention-card,
.activity-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.soc-kpi {
  grid-template-columns: repeat(7, minmax(130px, 1fr));
}

.metric.clickable,
.attention-card,
.activity-card {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 14px;
  text-align: left;
}

.metric span,
.attention-card span,
.activity-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.metric strong,
.attention-card strong,
.activity-card strong {
  color: var(--ink);
  font-size: 24px;
}

.metric.critical,
.attention-card.critical {
  border-color: rgba(240, 95, 102, 0.7);
}

.metric.high,
.attention-card.warn {
  border-color: rgba(245, 184, 75, 0.7);
}

.metric.ok {
  border-color: rgba(53, 208, 127, 0.7);
}

.metric.api,
.metric.dpi,
.activity-card:hover {
  border-color: rgba(78, 161, 255, 0.65);
}

.attention-grid,
.activity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  padding: 14px;
}

.activity-grid.compact {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.audit-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 14px 0;
}

.audit-flow span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0d1722;
  color: #c5d2df;
  font-size: 12px;
  font-weight: 700;
  padding: 10px;
  text-align: center;
}

.audit-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.audit-result-grid div {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0d1722;
  padding: 10px;
}

.audit-result-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.audit-result-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.audit-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.finding-list {
  white-space: pre-wrap;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #070d13;
  color: #d8e2ed;
  padding: 10px;
}

.notice {
  background: #0d1722;
  border-color: var(--line);
  color: #c7d4e1;
}

.badge {
  border-radius: 999px;
  background: #132536;
  border: 1px solid #2d4358;
  color: #dce7f2;
}

.error-text {
  color: var(--danger);
}

table {
  background: var(--panel);
  color: var(--ink);
}

th {
  background: #0b1520;
  color: #aebfd1;
}

td {
  border-top-color: var(--line);
}

code {
  color: #b9e7ff;
}

@media (max-width: 1280px) {
  .soc-kpi,
  .attention-grid,
  .activity-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 860px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .soc-kpi,
  .attention-grid,
  .activity-grid,
  .audit-flow,
  .audit-result-grid {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, Segoe UI, Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
}

a.button-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 0 12px;
  border-radius: 6px;
  text-decoration: none;
}

button:hover {
  border-color: var(--accent);
}

a.button-link:hover {
  border-color: var(--accent);
}

.sidebar {
  background: #17212b;
  color: #f8fafc;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #0f766e;
  font-weight: 800;
}

.brand span,
.connection label,
.auth-panel label {
  display: block;
  color: #a7b4c2;
  font-size: 12px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #dbe5ef;
}

.nav-button.active {
  background: #0e1a26;
  color: #e7edf5;
}

.nav-button:disabled {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
  color: #7f8b98;
}

.connection,
.auth-panel {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.auth-panel {
  margin-top: 0;
}

.connection input,
.auth-panel input {
  width: 100%;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #0f1720;
  color: #f8fafc;
  padding: 0 10px;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-identity {
  color: #f8fafc;
  font-size: 13px;
  padding-top: 4px;
  overflow-wrap: anywhere;
}

.auth-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.auth-role {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #dbe5ef;
  font-size: 12px;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shell {
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
}

h2 {
  font-size: 18px;
}

.topbar p {
  color: var(--muted);
  margin-top: 4px;
}

.status-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.role-mode {
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  margin-left: 4px;
  padding-left: 10px;
  white-space: nowrap;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}

.status-dot.ok {
  background: var(--ok);
}

.status-dot.bad {
  background: var(--danger);
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 18px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.handoff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.demo-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 8px;
  background: #17212b;
  color: #f8fafc;
  padding: 22px;
}

.demo-hero span {
  color: #a7b4c2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-hero h2 {
  margin: 4px 0 0;
  font-size: 28px;
}

.demo-hero strong {
  min-width: 96px;
  border-radius: 8px;
  background: #0e1a26;
  color: #e7edf5;
  padding: 14px;
  text-align: center;
  font-size: 26px;
}

.demo-hero strong.ok {
  color: #35d07f;
}

.demo-hero strong.pending {
  color: #f5b84b;
}

.demo-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}

.demo-script-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
}

.demo-scenario-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
}

.demo-handoff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.scenario-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(120px, 1fr));
  gap: 12px;
  padding: 16px 16px 0;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
}

.scenario-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.scenario-report {
  padding: 0 16px 16px;
}

.pilot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  padding: 16px;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  padding: 16px;
}

.command-grid,
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px;
}

.metric,
.ops-card,
.pilot-card,
.demo-status-card,
.demo-scenario-card,
.demo-step-card,
.demo-handoff-card,
.scenario-summary-card,
.scenario-card,
.document-card,
.handoff-card,
.command-card,
.scope-card,
.workflow-card,
.work-surface {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric,
.ops-card,
.pilot-card,
.demo-status-card,
.demo-scenario-card,
.demo-step-card,
.demo-handoff-card,
.scenario-summary-card {
  padding: 16px;
}

.demo-status-card,
.demo-scenario-card,
.demo-step-card,
.demo-handoff-card {
  display: grid;
  gap: 8px;
}

.demo-status-card span,
.demo-scenario-card span,
.demo-step-card span,
.demo-handoff-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.demo-status-card strong,
.demo-scenario-card strong,
.demo-step-card strong,
.demo-handoff-card strong {
  overflow-wrap: anywhere;
}

.demo-status-card small,
.demo-scenario-card small,
.demo-step-card small,
.demo-handoff-card small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.demo-status-card.ok,
.demo-scenario-card.ok,
.demo-step-card.ok {
  border-color: #b7e4d8;
  background: rgba(53,208,127,0.14);
}

.demo-status-card.pending,
.demo-scenario-card.pending,
.demo-step-card.pending {
  border-color: #fed7aa;
  background: rgba(245,184,75,0.16);
}

.demo-step-card {
  align-content: start;
}

.demo-step-card .demo-step-number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #17212b;
  color: #f8fafc;
  font-size: 13px;
}

.demo-step-card em {
  width: fit-content;
  border-radius: 999px;
  background: #0e1a26;
  color: var(--ink);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.demo-step-card.ok em {
  background: rgba(53,208,127,0.18);
  color: #35d07f;
}

.demo-step-card.pending em {
  background: rgba(245,184,75,0.18);
  color: #f5b84b;
}

.scenario-summary-card {
  display: grid;
  gap: 6px;
  min-height: 84px;
}

.scenario-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.scenario-summary-card strong {
  font-size: 18px;
}

.scenario-summary-card small {
  color: var(--muted);
  line-height: 1.35;
}

.scenario-summary-card.ok {
  border-color: #b7e4d8;
  background: rgba(53,208,127,0.14);
}

.scenario-summary-card.pending {
  border-color: #fed7aa;
  background: rgba(245,184,75,0.16);
}

.handoff-card,
.scenario-card,
.command-card,
.scope-card,
.workflow-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.scenario-card code {
  display: block;
  padding: 9px;
  border-radius: 6px;
  background: #0d1722;
  color: #22c7a9;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.scenario-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scenario-card small {
  color: var(--muted);
  line-height: 1.4;
}

.scenario-card.ok {
  border-color: #b7e4d8;
}

.scenario-card.pending {
  border-color: #fed7aa;
}

.scenario-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.scenario-status.ok {
  background: rgba(53,208,127,0.18);
  color: #35d07f;
}

.scenario-status.pending {
  background: rgba(245,184,75,0.18);
  color: #f5b84b;
}

.scenario-evidence-row {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e1a26;
  padding: 12px;
}

.scenario-evidence-row.ok {
  border-color: #b7e4d8;
  background: rgba(53,208,127,0.14);
}

.scenario-evidence-row.pending {
  border-color: #fed7aa;
  background: rgba(245,184,75,0.16);
}

.scenario-evidence-row span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.scenario-evidence-row small {
  color: var(--muted);
  line-height: 1.4;
}

.scenario-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #0e1a26;
  padding: 12px 14px;
}

.scenario-report-head div {
  display: grid;
  gap: 4px;
}

.scenario-report-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.scenario-report pre {
  max-height: 440px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: #111827;
  color: #f9fafb;
  padding: 14px;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.document-card {
  display: grid;
  gap: 8px;
  min-height: 84px;
  padding: 14px;
}

.document-card code {
  color: var(--muted);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.metric span,
.ops-card span,
.pilot-card span,
.scenario-card span,
.handoff-card span,
.scope-card span,
.workflow-card span {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.metric strong,
.ops-card strong,
.pilot-card strong {
  display: block;
  font-size: 30px;
  margin-top: 8px;
}

.handoff-card strong {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scenario-card strong {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  margin-top: 4px;
}

.workflow-card strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.workflow-card small {
  color: var(--muted);
}

.workflow-card button {
  width: fit-content;
}

.workflow-card.ok {
  border-color: #b7e4d8;
}

.workflow-card.pending {
  border-color: #fed7aa;
}

.workflow-card.risk,
.workflow-card.audit {
  border-color: #fecaca;
}

.handoff-card small {
  color: var(--muted);
  line-height: 1.4;
}

.command-card code {
  display: block;
  padding: 10px;
  border-radius: 6px;
  background: #0f1720;
  color: #e2e8f0;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scope-card strong {
  font-size: 15px;
}

.ops-card.ok strong {
  color: var(--ok);
}

.ops-card.risk strong {
  color: var(--danger);
}

.pilot-card.ok strong {
  color: var(--ok);
}

.pilot-card.risk strong,
.pilot-card.audit strong {
  color: var(--danger);
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  padding: 16px;
}

.service-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--ink);
  text-decoration: none;
}

.service-link:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.work-surface {
  overflow: hidden;
}

.section-head {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.compact-head {
  min-height: auto;
  padding: 0;
  border-bottom: 0;
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

select,
input,
textarea {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--panel);
  color: var(--ink);
}

textarea {
  min-height: 68px;
  padding: 8px 10px;
  resize: vertical;
}

.endpoint-policy-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2, #0b1520);
}

.endpoint-policy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
}

.endpoint-policy-form {
  display: grid;
  gap: 12px;
}

.policy-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.policy-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.policy-form-grid .field-wide {
  grid-column: 1 / -1;
}

.policy-checkbox {
  min-height: 36px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  color: var(--ink) !important;
}

.policy-checkbox input {
  min-height: auto;
  width: 16px;
  height: 16px;
  padding: 0;
}

/* Standalone checkbox labels (e.g. Shadow copies) must not stretch in the grid. */
.checkbox-label {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  color: var(--ink) !important;
}

.checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: auto;
  padding: 0;
  margin: 0;
}

.endpoint-policy-state {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.endpoint-policy-state h3 {
  margin: 0;
  font-size: 15px;
}

.endpoint-policy-effective {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.endpoint-policy-effective dl {
  margin: 0;
}

.endpoint-policy-effective div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.endpoint-policy-effective div:last-child {
  border-bottom: 0;
}

.endpoint-policy-effective dt {
  color: var(--muted);
  font-size: 12px;
}

.endpoint-policy-effective dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.inline-notice {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

th,
td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #0e1a26;
  color: var(--ink);
}

.badge.critical,
.badge.high {
  background: rgba(240,95,102,0.18);
  color: var(--danger);
}

.badge.medium {
  background: rgba(245,184,75,0.16);
  color: var(--warn);
}

.badge.block,
.badge.quarantine {
  background: rgba(245,184,75,0.12);
  color: var(--accent-2);
}

.badge.current {
  background: rgba(53,208,127,0.18);
  color: var(--ok);
}

.badge.fresh {
  background: rgba(53,208,127,0.18);
  color: var(--ok);
}

.badge.outdated {
  background: rgba(240,95,102,0.18);
  color: var(--danger);
}

.badge.stale,
.badge.offline {
  background: rgba(240,95,102,0.18);
  color: var(--danger);
}

.badge.unknown {
  background: #0e1a26;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.notice {
  padding: 12px 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.notice.restricted {
  background: rgba(245,184,75,0.16);
  color: #f5b84b;
}

dialog {
  background: var(--panel, #101b26);
  color: var(--ink, #e7edf5);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  width: min(460px, calc(100vw - 32px));
  padding: 18px;
}

dialog::backdrop {
  background: rgba(3, 8, 14, 0.6);
}

dialog .section-head {
  align-items: center;
}

#groupDialog {
  width: min(760px, calc(100vw - 24px));
  max-height: 88vh;
  padding: 16px;
}

#groupDialog:not([open]) {
  display: none;
}

#groupDialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#groupDialog .dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

#groupDialog #groupForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

#groupDialog label {
  color: var(--muted);
  display: grid;
  gap: 6px;
}

#groupDialog input {
  width: 100%;
}

#groupAgentList {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

#groupDialog #groupForm .toolbar {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  background: var(--panel);
  padding-top: 4px;
}

#groupDialog #groupSubmitButton {
  min-width: 140px;
}

#groupDialog table {
  width: 100%;
}

.group-card {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.group-card:hover {
  border-color: var(--accent);
}

.group-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 199, 169, 0.35);
}

.group-card h3 {
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  #groupDialog {
    width: calc(100vw - 12px);
    max-height: 92vh;
    padding: 12px;
  }

  #groupAgentList {
    min-height: 110px;
  }
}

.dialog-form {
  display: grid;
  gap: 12px;
}

.dialog-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 920px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

    .metrics,
    .ops-grid,
    .handoff-grid,
    .demo-status-grid,
    .demo-script-grid,
    .demo-scenario-grid,
    .demo-handoff-grid,
    .scenario-summary,
    .scenario-grid,
    .scenario-evidence,
    .pilot-grid,
  .document-grid,
  .command-grid,
  .scope-grid,
  .workflow-grid,
  .link-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .endpoint-policy-grid {
    grid-template-columns: 1fr;
  }

  .topbar,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .scenario-report-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .demo-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .shell {
    padding: 14px;
  }

    .metrics,
    .ops-grid,
    .handoff-grid,
    .demo-status-grid,
    .demo-script-grid,
    .demo-scenario-grid,
    .demo-handoff-grid,
    .scenario-summary,
    .scenario-grid,
    .scenario-evidence,
    .pilot-grid,
  .document-grid,
  .command-grid,
  .scope-grid,
  .workflow-grid,
  .link-grid {
    grid-template-columns: 1fr;
  }

  .policy-form-grid {
    grid-template-columns: 1fr;
  }

  .endpoint-policy-effective div {
    grid-template-columns: 1fr;
  }
}

/* v1.0.5-RC2 UNICON visual addendum final layer */
:root {
  --bg: #0b0f16;
  --panel: #121820;
  --panel-2: #161d27;
  --panel-3: #1b222d;
  --ink: #eef3f9;
  --muted: #9aa7b7;
  --line: #2a3442;
  --accent: #9fc7ff;
  --accent-2: #56d17d;
  --danger: #ff9ba0;
  --warn: #ffbd59;
  --ok: #65e88f;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}

body {
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #10131b;
  border-right: 1px solid var(--line);
  padding: 16px;
  gap: 16px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #1687ff;
  color: #f8fbff;
}

.brand strong {
  display: block;
  font-size: 15px;
}

.nav {
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  padding-right: 2px;
}

.nav-section {
  color: #647389;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 12px 8px 4px;
  text-transform: uppercase;
}

.nav-button {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c6cfdb;
  font-size: 13px;
  padding: 0 10px;
}

.nav-button:hover {
  background: #171d28;
  color: #ffffff;
  box-shadow: none;
}

.nav-button.active {
  background: #202530;
  border-right: 2px solid var(--accent);
  color: var(--accent);
}

.connection,
.auth-panel {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.shell {
  padding: 18px 32px 32px;
}

.topbar {
  border-bottom: 1px solid var(--line);
  margin: -18px -32px 22px;
  padding: 18px 32px;
}

h1 {
  font-size: 28px;
  font-weight: 800;
}

h2 {
  font-size: 15px;
  letter-spacing: 0;
}

button,
a.button-link,
input,
select,
textarea {
  background: #111720;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
}

button:hover,
a.button-link:hover {
  border-color: var(--accent);
  box-shadow: none;
}

.status-strip,
.work-surface,
.metric,
.activity-card,
.attention-card,
.details-card,
.gap-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: none;
}

.soc-kpi {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 14px;
}

.metric.clickable,
.activity-card,
.attention-card {
  min-height: 84px;
  padding: 16px 18px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.metric.clickable:hover,
.activity-card:hover,
.attention-card:hover,
.gap-card:hover {
  background: #171f2a;
}

.metric strong,
.activity-card strong,
.attention-card strong {
  font-size: 28px;
  line-height: 1;
}

.metric.critical,
.attention-card.critical,
.severity-row.critical {
  border-color: rgba(255, 155, 160, 0.72);
}

.metric.high,
.metric.warn,
.attention-card.warn,
.severity-row.warn {
  border-color: rgba(255, 189, 89, 0.72);
}

.metric.ok {
  border-color: rgba(101, 232, 143, 0.72);
}

.metric.api,
.metric.dlp,
.metric.dpi {
  border-color: rgba(159, 199, 255, 0.72);
}

.attention-grid,
.activity-grid,
.details-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.data-mode-notice {
  margin-bottom: 14px;
  color: var(--warn);
  border-color: rgba(255, 189, 89, 0.46);
}

.no-attention,
.compact-empty {
  grid-column: 1 / -1;
  min-height: 58px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.overview-operational-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.operational-card strong {
  font-size: 22px;
  overflow-wrap: anywhere;
}

.incident-timeline {
  padding: 14px;
}

.timeline-bars {
  align-items: end;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  min-height: 132px;
}

.timeline-bar {
  align-content: end;
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 120px;
  padding: 8px 6px;
  text-align: center;
}

.timeline-bar span {
  align-self: end;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 3px 3px 0 0;
  display: block;
  min-height: 8px;
}

.timeline-bar strong {
  color: var(--ink);
  font-size: 12px;
}

.timeline-bar em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-range {
  border-color: var(--accent);
  color: var(--accent);
}

.section-head {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.compact-head {
  padding: 14px 16px;
}

.toolbar {
  gap: 8px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th {
  background: #101720;
  color: #aeb9c8;
  font-size: 11px;
  height: 40px;
  letter-spacing: 0;
  text-transform: uppercase;
}

td {
  border-top: 1px solid var(--line);
  color: #dce5ef;
  font-size: 13px;
  height: 52px;
  vertical-align: middle;
}

tbody tr:hover {
  background: #141c26;
}

.badge {
  background: #1b2430;
  border: 1px solid #334154;
  color: #dce8f5;
  font-size: 11px;
  min-height: 22px;
}

.badge.critical,
.badge.high,
.badge.OFFLINE,
.badge.ERROR,
.badge.FAIL,
.badge.block {
  background: rgba(255, 155, 160, 0.12);
  border-color: rgba(255, 155, 160, 0.46);
  color: var(--danger);
}

.badge.medium,
.badge.STALE,
.badge.PARTIAL,
.badge.alert,
.badge.quarantine {
  background: rgba(255, 189, 89, 0.12);
  border-color: rgba(255, 189, 89, 0.46);
  color: var(--warn);
}

.badge.ONLINE,
.badge.PASS,
.badge.RECORDED,
.badge.resolved,
.badge.closed,
.badge.allow,
.badge.current,
.badge.fresh {
  background: rgba(101, 232, 143, 0.12);
  border-color: rgba(101, 232, 143, 0.44);
  color: var(--ok);
}

.notice {
  background: #111720;
  border: 1px solid var(--line);
  color: var(--muted);
}

.notice.restricted {
  background: rgba(255, 189, 89, 0.1);
  color: var(--warn);
}

/* Empty-state block for data tables (replaces the bare "No records" notice). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px 16px;
  margin: 8px 0;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #0d1722;
}
.empty-state .empty-state-mark {
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.6;
}
.empty-state p {
  margin: 0;
  color: #c7d4e1;
  font-weight: 600;
}
.empty-state .muted {
  font-size: 12px;
}

/* Agent connectivity ping indicator (Agents table). */
.ping-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid var(--line);
}
.ping-badge.ping-ok {
  background: rgba(60, 200, 120, 0.16);
  color: #56d38a;
  border-color: rgba(60, 200, 120, 0.4);
}
.ping-badge.ping-warn {
  background: rgba(245, 184, 75, 0.16);
  color: #f5b84b;
  border-color: rgba(245, 184, 75, 0.4);
}
.ping-badge.ping-bad {
  background: rgba(233, 78, 78, 0.16);
  color: #ff6b6b;
  border-color: rgba(233, 78, 78, 0.4);
}
.ping-badge.ping-unknown {
  color: var(--muted);
}

/* Per-day period overview chips (DLP weekly summary). */
.period-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  font-size: 12px;
}
.period-summary .period-chip {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0d1722;
  color: #c7d4e1;
  white-space: nowrap;
}

/* DPI-TAXONOMY-20261013: highlight the active DPI category filter card. */
.activity-card.active-filter {
  border-color: #4ea1ff;
  box-shadow: inset 0 0 0 1px #4ea1ff;
}
.dpi-filter-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* RISK-TRIAGE-20261013: metric help dots, priority badges and risk matrix. */
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 9px;
  font-style: normal;
  opacity: 0.6;
  cursor: help;
  vertical-align: middle;
}
.help-dot:hover { opacity: 1; }
.badge.priority-P1 { background: rgba(255, 86, 86, 0.18); color: #ff6b6b; border-color: #ff6b6b; }
.badge.priority-P2 { background: rgba(255, 159, 64, 0.16); color: #ff9f40; border-color: #ff9f40; }
.badge.priority-P3 { background: rgba(78, 161, 255, 0.14); color: #4ea1ff; border-color: #4ea1ff; }
.badge.priority-P4 { background: rgba(120, 130, 140, 0.16); color: #9aa6b2; border-color: #9aa6b2; }
.risk-matrix-grid { display: grid; gap: 10px; }
.risk-matrix-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; }
.risk-matrix-row p { margin: 0; color: var(--muted); }

.drop-zone {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin: 16px;
  border: 1px dashed #52647a;
  border-radius: 6px;
  background: #0f151d;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}

.drop-zone input {
  display: none;
}

.drop-zone strong {
  font-size: 20px;
}

.drop-zone span {
  color: var(--muted);
  margin-top: -42px;
}

.drop-zone.dragging {
  border-color: var(--accent);
  background: #152132;
}

.details-grid {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.details-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.details-card h3 {
  margin: 0 0 2px;
  font-size: 13px;
  text-transform: uppercase;
}

.detail-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
}

.detail-row span {
  color: var(--muted);
  font-size: 12px;
}

.detail-row strong,
.mono-value,
code {
  color: #bcdcff;
  font-family: Consolas, "Cascadia Mono", monospace;
  overflow-wrap: anywhere;
}

.selection-toolbar,
.pagination-strip {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
}

.selection-toolbar.hidden {
  display: none;
}

.link-button {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  text-align: left;
}

.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
}

.report-main,
.report-side {
  min-width: 0;
}

.gap-list {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.gap-card {
  display: grid;
  min-height: 74px;
  padding: 14px;
  text-align: left;
}

.gap-card span {
  color: var(--muted);
}

.gap-card.critical {
  border-color: rgba(255, 155, 160, 0.7);
}

.gap-card.warn {
  border-color: rgba(255, 189, 89, 0.7);
}

.gap-card.ok {
  border-color: rgba(101, 232, 143, 0.54);
}

.no-traffic {
  grid-column: 1 / -1;
  min-height: 88px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

@media (max-width: 1366px) {
  .shell {
    padding: 16px 22px 24px;
  }

  .topbar {
    margin: -16px -22px 20px;
    padding: 16px 22px;
  }

  .soc-kpi,
  .attention-grid,
  .activity-grid,
  .overview-operational-grid,
  .details-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .metric.clickable,
  .activity-card,
  .attention-card {
    padding: 12px;
  }

  .metric strong,
  .activity-card strong,
  .attention-card strong {
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .report-layout {
    grid-template-columns: 1fr;
  }

  .soc-kpi,
  .attention-grid,
  .activity-grid,
  .overview-operational-grid,
  .details-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .timeline-bars {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .soc-kpi,
  .attention-grid,
  .activity-grid,
  .overview-operational-grid,
  .details-grid,
  .audit-flow {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }
}

/* v1.0.5-RC2 i18n control and long-label hardening */
.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.language-switcher button {
  min-width: 38px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

.language-switcher button.active,
.language-switcher button[aria-pressed="true"] {
  background: #202b38;
  color: var(--accent);
}

.nav-button {
  line-height: 1.25;
  white-space: normal;
}

.metric span,
.metric strong,
.activity-card span,
.activity-card strong,
.attention-card span,
.attention-card strong,
.scenario-card strong,
.scenario-card small,
.document-card strong,
.workflow-card strong,
.workflow-card small,
.gap-card strong,
.gap-card span,
#apiStatusText,
.role-mode,
th,
td {
  overflow-wrap: anywhere;
}

.toolbar input,
.toolbar select,
.toolbar button {
  max-width: 100%;
}

@media (max-width: 1366px) {
  .topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .topbar-actions {
    align-items: flex-start;
    width: 100%;
  }
}


/* P2 #4 (file shadowing): incident shadow copies card. */
.incident-artifacts-card .artifact-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.artifact-item {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.artifact-item .artifact-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.incident-artifacts-card .toolbar {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.artifact-detail {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.artifact-detail code {
  word-break: break-all;
}

.classification-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent, #4f8cff);
  font-size: 12px;
}

/* === P4-HIDE-API-20260925: hide technical connection/auth config from sidebar (kept in DOM, login flow intact) === */
.connection { display: none !important; }
.auth-panel label[for="keycloakBase"],
.auth-panel #keycloakBase,
.auth-panel #keycloakRealm,
.auth-panel #keycloakClient,
.auth-panel #authIdentity,
.auth-panel #authRoles { display: none !important; }

/* === P4-RESPONSIVE-20260925: responsive layout + even nav buttons === */

/* -- even menu buttons (desktop) -- */
.nav {
  gap: 6px;
}
.nav-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7f8b98;
  margin: 8px 2px 0;
}
.nav-button {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-button.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* -- hamburger toggle: hidden on desktop -- */
#navToggle {
  display: none;
}
#navOverlay {
  display: none;
}

@media (min-width: 861px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

/* -- tablet -- */
@media (max-width: 1280px) {
  .soc-kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .audit-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -- phone: sidebar becomes a drawer -- */
@media (max-width: 860px) {
  body {
    grid-template-columns: 1fr;
  }
  .shell {
    padding: 14px;
  }
  h1 {
    font-size: 22px;
  }
  .topbar {
    flex-wrap: wrap;
  }
  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }
  .work-surface {
    padding: 12px;
  }

  #navToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 18px;
    line-height: 1;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    z-index: 60;
    overflow-y: auto;
    padding: 16px;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }
  body.nav-open .sidebar {
    transform: none;
  }
  body.nav-open #navOverlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(6, 12, 18, 0.55);
  }

  /* even 2-column menu buttons */
  .nav {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .nav-section {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .nav-button {
    min-height: 44px;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    white-space: normal;
  }

  .soc-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .attention-grid,
  .activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audit-flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .audit-result-grid {
    grid-template-columns: 1fr;
  }
  .table-wrap {
    overflow-x: auto;
  }
  .table-wrap table {
    min-width: 640px;
  }
}

@media (max-width: 480px) {
  .nav {
    grid-template-columns: 1fr;
  }
  .soc-kpi {
    grid-template-columns: 1fr 1fr;
  }
  .attention-grid,
  .activity-grid,
  .audit-flow,
  .audit-result-grid {
    grid-template-columns: 1fr;
  }
}

/* === P4-EVEN-UI-20260925: uniform buttons and straight rows everywhere === */

button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  line-height: 1.2;
  font-weight: 600;
  vertical-align: middle;
}

select,
input,
textarea {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
}

.toolbar {
  align-items: center;
}
.toolbar > * {
  flex: 0 0 auto;
}

.section-head {
  flex-wrap: wrap;
}

/* KPI + card grids: equal heights per row */
.soc-kpi .metric,
.attention-grid .attention-card,
.activity-grid .activity-card {
  height: 100%;
  min-height: 92px;
}
.metrics {
  align-items: stretch;
}

/* nav buttons: identical sizing */
.nav-button {
  font-size: 13.5px;
}

/* language switcher: equal buttons */
.language-switcher button {
  min-width: 44px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  justify-content: center;
}

/* auth actions: two equal buttons */
.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.auth-actions button {
  width: 100%;
  justify-content: center;
}

/* compact uniform buttons inside tables and rows */
.table-wrap button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
}

/* status strip and switcher keep one line height */
.language-switcher button {
  min-height: 30px;
  min-width: 42px;
  padding: 0 10px;
}

@media (max-width: 860px) {
  .toolbar > button {
    flex: 1 1 auto;
  }
  .auth-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* === P4-STRICT-EVEN-20260925: fixed-height controls, perfectly even rows === */

button:not(.metric):not(.gap-card):not(.nav-button):not(.activity-card):not(.attention-card):not(.timeline-bar) {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  height: 38px;
  min-height: 38px;
}
textarea {
  min-height: 38px;
}

a.button-link,
.service-link {
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 8px;
  white-space: nowrap;
}

/* topbar: single even line */
.topbar-actions {
  align-items: center;
}
.status-strip {
  min-height: 42px;
}
.topbar-actions .nav-toggle {
  height: 42px;
  min-height: 42px;
}

/* language switcher buttons: fixed equal size */
.language-switcher button {
  height: 30px;
  min-height: 30px;
  min-width: 42px;
  padding: 0 10px;
  justify-content: center;
}

/* table row buttons: fixed compact height */
.table-wrap button {
  height: 32px;
  min-height: 32px;
}

/* mobile: nav buttons strictly equal height, no wrapping */
@media (max-width: 860px) {
  .nav-button {
    min-height: 44px;
    height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    font-size: 12.5px;
  }
  .topbar-actions > * {
    flex: 0 0 auto;
  }
  .toolbar > button {
    height: 38px;
    flex: 1 1 auto;
  }
}

/* === P4-UX-GRID-20260925: unified card grid, no clipped values, aligned heads === */

/* card-buttons: size like cards, not like toolbar buttons */
button.metric,
button.attention-card,
button.activity-card,
button.gap-card {
  height: auto;
  min-height: 92px;
  border-radius: 10px;
  padding: 14px;
  white-space: normal;
  overflow: visible;
}
.attention-grid > *,
.activity-grid > * {
  height: auto;
  min-height: 92px;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-width: 0;
}

/* one unified grid for both blocks */
.attention-grid,
.activity-grid,
.overview-operational-grid {
  display: grid;
  gap: 12px;
  align-items: stretch;
}
.attention-grid,
.activity-grid,
.overview-operational-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* values: fit fully inside cards */
.metric strong {
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.soc-kpi .metric strong {
  font-size: 22px;
}
.attention-card strong,
.activity-card strong {
  font-size: 17px;
  line-height: 1.25;
  display: block;
  margin-top: auto;
  overflow-wrap: anywhere;
}
.attention-card span,
.activity-card span,
.metric span {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* section head: heading and buttons on one even line */
.section-head {
  align-items: center;
}
.section-head h2 {
  line-height: 1.25;
}
.section-head .toolbar button {
  height: 34px;
  min-height: 34px;
}
.section-head .muted {
  margin-left: auto;
  text-align: right;
}

/* unified corners, borders and hover highlight */
.metric,
.gap-card {
  border-radius: 10px;
}
.metric.clickable:hover,
.attention-card:hover,
.activity-card:hover {
  border-color: rgba(78, 161, 255, 0.65);
}

@media (max-width: 860px) {
  .attention-grid,
  .activity-grid,
  .overview-operational-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .attention-grid,
  .activity-grid,
  .overview-operational-grid {
    grid-template-columns: 1fr;
  }
}

/* === P4-PERF-UI-20260925: skeleton shimmer loaders === */
.skeleton-card {
  min-height: 92px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 12px 22px;
  gap: 10px;
  align-content: start;
  padding: 14px;
}
.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(127, 168, 218, 0.13) 50%, transparent 70%);
  animation: skeleton-sweep 1.2s ease-in-out infinite;
}
.skeleton-card.skeleton-shimmer {
  border: 1px dashed rgba(127, 168, 218, 0.35);
}
@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* === P4-TREND-20260925: incident trend chart — proper height, even columns, axes === */

/* chart bars must not be squashed by the global fixed-height button rule */
.incident-timeline {
  padding: 14px 16px 12px;
}

.timeline-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  height: 240px;
  padding: 6px 4px 0;
}

/* Y axis (incident count) */
.timeline-yaxis {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  min-width: 26px;
  /* keep "0" on the bar baseline: value+label rows sit below the plot area */
  padding-bottom: 36px;
}
.timeline-yaxis .ymax { grid-row: 1; align-self: start; }
.timeline-yaxis .ymid { grid-row: 1; align-self: center; }
.timeline-yaxis .yzero { grid-row: 1; align-self: end; }

/* bars: equal columns across the full width, growing from the bottom */
.timeline-bars {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  min-height: 0;
  border-left: 1px solid var(--line);
  padding: 0 2px 0 8px;
}

.timeline-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: end;
  align-content: stretch;
  gap: 4px;
  padding: 0 4px;
  background: transparent;
  border: 0;
}
.timeline-bar:hover {
  background: rgba(127, 168, 218, 0.08);
}

.timeline-bar span {
  align-self: end;
  width: 100%;
  max-width: 46px;
  min-height: 6px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.timeline-bar strong {
  font-size: 13px;
  line-height: 1.2;
  min-height: 0;
  height: auto;
}

.timeline-bar em {
  font-size: 10px;
  line-height: 1.2;
  max-width: 100%;
}

/* header: title vertically centered with the range buttons (desktop) */
@media (min-width: 921px) {
  .incident-trend-surface .section-head {
    align-items: center;
  }
}

@media (max-width: 860px) {
  .timeline-chart {
    height: 190px;
  }
}

/* ===== P5-QUEUE-20260925 : incident queue alignment, column picker, hover ===== */
.table-wrap th,
.table-wrap td {
  padding: 8px 12px;
  font-size: 13px;
  vertical-align: middle;
}

.table-wrap th {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.3;
}

/* Agents table: content-sized columns with top alignment so header and rows line up. */
#agentsTable table {
  width: 100%;
}

#agentsTable td,
#agentsTable th {
  vertical-align: top;
  white-space: normal;
}

#agentsTable th {
  white-space: nowrap;
}

#agentsTable .error-text {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th.col-check,
td.col-check {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}

th.col-check input[type="checkbox"],
td.col-check input[type="checkbox"],
label.select-visible-label input[type="checkbox"],
.column-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent, #4ea1ff);
}

th[data-col="id"] { min-width: 96px; }
th[data-col="time"] { min-width: 150px; }
th[data-col="severity"] { min-width: 110px; }
th[data-col="status"] { min-width: 110px; }
th[data-col="assignee"] { min-width: 120px; }
th[data-col="actions"] { min-width: 170px; }

.badge {
  justify-content: center;
  padding: 0 10px;
}

.table-wrap tbody tr:hover td {
  background: rgba(78, 161, 255, 0.07);
}

.col-off {
  display: none !important;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  margin: 0 0 10px;
}

.column-picker {
  position: relative;
  display: inline-flex;
}

.column-picker-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.column-picker-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: 0 0 auto;
}

.column-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d1722;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.column-dropdown.hidden {
  display: none;
}

.column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.column-option:hover {
  background: rgba(78, 161, 255, 0.08);
}

label.select-visible-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.incident-table {
  min-width: 980px;
}

/* Incidents table: keep each cell value on one line (no mid-word breaks). */
#incidentsTable td,
#incidentsTable th {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.selection-toolbar:not(.hidden) {
  border: 1px solid rgba(78, 161, 255, 0.55);
  border-radius: 10px;
  background: rgba(78, 161, 255, 0.1);
  margin: 10px 16px 0;
}

@media (max-width: 860px) {
  .table-toolbar {
    padding: 0 12px;
  }
}

/* --- Local TEST sign-in dialog (matches the dark console theme) ----------- */
#localLoginDialog {
  background: var(--panel, #101b26);
  color: var(--ink, #e7edf5);
  border: 1px solid var(--line, #213244);
  border-radius: 10px;
  box-shadow: var(--shadow, 0 10px 28px rgba(0, 0, 0, 0.22));
  padding: 20px 22px 18px;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

#localLoginDialog::backdrop {
  background: rgba(3, 8, 14, 0.62);
}

#localLoginDialog h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--ink, #e7edf5);
}

#localLoginDialog .muted {
  margin: 0 0 14px;
  color: var(--muted, #91a2b5);
  font-size: 13px;
  line-height: 1.45;
}

#localLoginDialog label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted, #91a2b5);
  font-size: 13px;
}

#localLoginDialog select,
#localLoginDialog input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--line, #213244);
  border-radius: 6px;
  background: var(--panel-2, #0b1520);
  color: var(--ink, #e7edf5);
  font: inherit;
}

#localLoginDialog select:focus,
#localLoginDialog input:focus {
  outline: 2px solid var(--accent, #22c7a9);
  outline-offset: 1px;
}

#localLoginDialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

#localLoginDialog button {
  padding: 9px 16px;
  border: 1px solid var(--line, #213244);
  border-radius: 6px;
  background: var(--panel-2, #0b1520);
  color: var(--ink, #e7edf5);
  font: inherit;
  cursor: pointer;
}

#localLoginDialog button:hover {
  border-color: var(--accent, #22c7a9);
}

#localLoginDialog #localLoginSubmit {
  background: var(--accent, #22c7a9);
  border-color: var(--accent, #22c7a9);
  color: #041712;
  font-weight: 600;
}

#localLoginDialog .error,
#localLoginDialog .error-text {
  margin: 10px 0 0;
  color: var(--danger, #f05f66);
  font-size: 13px;
}