/* Shared design tokens — required by every component below. */
:root {
  --bg-page: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-elev: #FAFAFA;
  --surface-hover: #F4F4F5;
  --border: #E5E7EB;
  --border-strong: #CDD2DA;

  --text-primary: #171717;
  --text-secondary: #5F6672;
  --text-faint: #8B93A1;
  --text-on-primary: #FFFFFF;

  --primary: #18181B;
  --primary-hover: #27272A;
  --primary-soft: #F1F1F2;
  --primary-border: #D4D4D8;
  --focus: #2563EB;

  --ok: #15803D;
  --ok-soft: #DCFCE7;
  --warn: #B45309;
  --warn-soft: #FEF3C7;
  --bad: #DC2626;
  --bad-soft: #FEE2E2;
  --info: #2563EB;
  --info-soft: #DBEAFE;
  --neutral: #6B7280;
  --neutral-soft: #F3F4F6;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  /* Unified Form Control System. Width remains context-dependent. */
  --form-control-height: 38px;
  --form-control-font-size: 14px;
  --form-control-padding-inline: 10px;
  --form-control-radius: 8px;
  --sidebar-control-height: 40px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --sidebar-bg: #151718;
  --sidebar-surface: #1D2022;
  --sidebar-hover: #222628;
  --sidebar-active: #292D30;
  --sidebar-border: #303538;
  --sidebar-text: #D8DCDF;
  --sidebar-muted: #A7AEB4;
  --sidebar-faint: #7C858C;
  --sidebar-focus: #77A7DA;
}

* { box-sizing: border-box; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--text-on-primary);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mobile-header,
.mobile-backdrop { display: none; }

/* ============================================================ */
/* Layout: fixed sidebar + main content                           */
/* ============================================================ */
.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}
body.is-sidebar-collapsed .layout { grid-template-columns: 60px minmax(0, 1fr); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 200px 1fr; }
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  color: var(--sidebar-text);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 4px;
}
.sidebar-collapse {
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  margin-left: auto;
  color: var(--sidebar-muted);
  border-color: transparent;
}
.sidebar-collapse:hover { background: var(--sidebar-hover); color: #FFFFFF; }
.sidebar-collapse:focus-visible { outline-color: var(--sidebar-focus); }
.sidebar-collapse svg { transition: transform .18s ease; }

.sidebar-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 10px 8px 0;
  padding: 0 12px;
  min-height: var(--sidebar-control-height);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-sm);
  color: var(--sidebar-faint);
  background: var(--sidebar-surface);
}
.sidebar-search > svg { width: 18px; height: 18px; }
.sidebar-search:focus-within { border-color: var(--sidebar-focus); box-shadow: 0 0 0 2px rgba(119,167,218,.22); }
.sidebar-search input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--form-control-font-size);
  color: var(--sidebar-text);
}
.sidebar-search input::placeholder { color: var(--sidebar-faint); }
.sidebar .sidebar-search input[type="search"] {
  max-width: none;
  padding: 0;
  font-size: var(--form-control-font-size);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sidebar-text);
  box-shadow: none;
}
.sidebar-search-empty { margin: 8px 12px 0; color: var(--sidebar-muted); font-size: 11px; }
.brand-mark { flex-shrink: 0; }
.brand-mark rect { fill: #D8DCDF; }
.brand-logo { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; border-radius: 5px; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.brand-name {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: #F3F4F5;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 12px;
  line-height: 1.25;
  color: var(--sidebar-faint);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.tenant-context { padding: 10px 8px 2px; display: grid; gap: 5px; }
.tenant-context > span { color: var(--sidebar-faint); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; }
.tenant-context strong { color: var(--sidebar-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-context select {
  width: 100%; height: var(--sidebar-control-height); min-height: var(--sidebar-control-height); margin: 0; padding: 0 32px 0 12px; font-size: var(--form-control-font-size);
  color: var(--sidebar-text); background-color: var(--sidebar-surface); border-color: var(--sidebar-border);
}
.tenant-context select:focus { border-color: var(--sidebar-focus); box-shadow: 0 0 0 2px rgba(119,167,218,.22); }

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.nav-section { display: flex; flex-direction: column; gap: 3px; }
.nav-heading {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sidebar-faint);
  padding: 8px 18px 5px;
}
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--sidebar-muted);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-icon { width: 18px; height: 18px; justify-self: center; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.nav-item:focus-visible { outline: 2px solid var(--sidebar-focus); outline-offset: -2px; }
.nav-item.is-active {
  background: var(--sidebar-active);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  border-radius: 1px;
  background: var(--sidebar-focus);
}
.nav-item.is-active:hover { background: #2D3235; color: #FFFFFF; }

@media (min-width: 901px) {
  .sidebar.is-collapsed { width: 60px; padding-inline: 8px; }
  .sidebar.is-collapsed .brand-logo,
  .sidebar.is-collapsed .brand-mark,
  .sidebar.is-collapsed .brand-text,
  .sidebar.is-collapsed .tenant-context,
  .sidebar.is-collapsed .sidebar-search,
  .sidebar.is-collapsed .sidebar-search-empty,
  .sidebar.is-collapsed .nav-heading,
  .sidebar.is-collapsed .user-info,
  .sidebar.is-collapsed .signout-link { display: none; }
  .sidebar.is-collapsed .sidebar-header { justify-content: center; padding: 8px 0 16px; }
  .sidebar.is-collapsed .sidebar-collapse { margin: 0; }
  .sidebar.is-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
  .sidebar.is-collapsed .sidebar-nav { gap: 8px; }
  .sidebar.is-collapsed .nav-section { gap: 4px; }
  .sidebar.is-collapsed .nav-item {
    width: 44px;
    min-height: 44px;
    padding: 0;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .sidebar.is-collapsed .nav-label { display: none; }
  .sidebar.is-collapsed .nav-icon { width: 18px; height: 18px; }
  .sidebar.is-collapsed .sidebar-footer { padding-top: 8px; min-height: 1px; }
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 12px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.user-avatar {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sidebar-surface);
  border: 1px solid var(--sidebar-border);
  color: var(--text-on-primary);
  border-radius: 50%;
  font-size: 12px; font-weight: var(--fw-semibold);
}
.user-name { font-size: 14px; color: var(--sidebar-text); font-weight: var(--fw-semibold); }
.signout-link {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--sidebar-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.signout-link:hover { background: var(--sidebar-hover); color: #FFFFFF; }
.signout-link:focus-visible { outline-color: var(--sidebar-focus); }

.content {
  padding: 32px 40px;
  max-width: 1400px;
  width: 100%;
  min-width: 0;
}
body.is-sidebar-collapsed .content { max-width: 1460px; }
@media (max-width: 900px) {
  .content { padding: 24px; }
}

/* ============================================================ */
/* Page header                                                    */
/* ============================================================ */
.page-header { margin-bottom: 24px; }
.page-header h1 {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--text-primary);
  line-height: 1.25;
}
.page-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.page { display: block; }
.page[hidden] { display: none; }
[hidden] { display: none !important; }
.page { animation: page-fade-in .18s ease-out; }
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

.page-header-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.noc-launch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
}
.noc-launch-card h3 { margin: 0 0 8px; }
.noc-launch-card p { margin: 0; max-width: 680px; }
.noc-launch-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 24px;
  margin: 0;
}
.noc-launch-meta div { min-width: 110px; }
.noc-launch-meta dt {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.noc-launch-meta dd {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: var(--fw-medium);
  margin: 6px 0 0;
}
@media (max-width: 800px) {
  .page-header-with-action,
  .noc-launch-card { display: flex; flex-direction: column; }
  .noc-launch-meta { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================ */
/* Shared button system: primary, secondary, danger, tertiary     */
/* ============================================================ */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease, transform .08s ease;
}
button.btn-primary, .btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: var(--fw-semibold);
  box-shadow: none;
}
button.btn-primary:hover, .btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
}
button.btn-primary:active, .btn-primary:active { transform: translateY(1px); }

button.btn-secondary, .btn-secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
button.btn-secondary:hover, .btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: 0 2px 5px rgba(17, 24, 39, 0.07);
}
button.btn-secondary:active, .btn-secondary:active { transform: translateY(1px); }

button.btn-danger, .btn-danger {
  background: var(--bad);
  color: var(--text-on-primary);
  border-color: var(--bad);
  font-weight: var(--fw-semibold);
}
button.btn-danger:hover, .btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}
button.btn-danger:active, .btn-danger:active { transform: translateY(1px); }

button.btn-link, .btn-link {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  box-shadow: none;
}
button.btn-link:hover, .btn-link:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

button.btn-small, .btn-small {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 32px;
}

button:disabled, .btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button.is-loading::before, .btn.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin .7s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.is-loading::before, .btn.is-loading::before { animation: none; }
}

/* Contracts & renewals — shared Telemetry Ledger language */
.contract-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:24px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.contract-summary article{min-height:126px;padding:22px 24px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between}.contract-summary article:last-child{border-right:0}.contract-summary span{color:var(--text-faint);font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase}.contract-summary strong{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.contract-panel{padding:24px}.contract-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) repeat(4,minmax(130px,.35fr));gap:12px;margin:20px 0}.data-table td>small{display:block;margin-top:5px;color:var(--text-faint)}
.contract-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface-card,#fff);color:var(--text-primary,#171717);box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:auto}.contract-dialog::backdrop{background:rgba(16,18,22,.58)}.contract-dialog form{padding:26px;background:var(--surface-card,#fff)}.contract-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}.contract-notes,.contract-metadata,.contract-reminders{grid-column:1/-1}.contract-metadata,.contract-reminders{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface-card,#fff)}.contract-metadata legend,.contract-reminders legend{padding:0 6px;color:var(--text-secondary);font-weight:var(--fw-semibold)}.reminder-checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px}.reminder-checks label{display:flex;align-items:center;gap:7px}.contract-dialog textarea{resize:vertical}.compact-check{align-self:end;min-height:42px}
.contract-dialog .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.contract-dialog .modal-head h2{margin:0 0 6px}.contract-dialog .modal-head p{margin:0}.contract-dialog .icon-button{flex:0 0 auto;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--surface-card,#fff);color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer}.contract-dialog .icon-button:hover{background:var(--neutral-soft)}
@media(max-width:1100px){.contract-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.contract-toolbar>input{grid-column:1/-1}}
@media(max-width:900px){.contract-summary{grid-template-columns:1fr 1fr}.contract-summary article:nth-child(2){border-right:0}.contract-summary article:nth-child(-n+2){border-bottom:1px solid var(--border)}}
@media(max-width:620px){.contract-summary,.contract-toolbar,.contract-form-grid{grid-template-columns:1fr}.contract-summary article{border-right:0;border-bottom:1px solid var(--border)}.contract-summary article:last-child{border-bottom:0}.contract-notes{grid-column:auto}}
@media (max-width: 760px) {
  button, .btn, button.btn-small, .btn-small { min-height: 44px; }
}

/* ============================================================ */
/* Cards                                                          */
/* ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.card h3 {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  margin: 0 0 8px;
  color: var(--text-secondary);
}
.card .muted {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 12px;
}

.alert {
  background: var(--bad-soft);
  border: 1px solid var(--bad);
  color: var(--bad);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* ============================================================ */
/* Forms                                                          */
/* ============================================================ */

/* Compact single-column form (e.g., Monitoring Panel password rotation) */
.cred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .cred-grid { grid-template-columns: 1fr; }
}
.cred-grid > fieldset { margin: 0; }

.cred-form-narrow {
  max-width: 480px;
}
.cred-form-narrow label {
  font-size: 12px;
  margin-bottom: 14px;
}
.cred-form-narrow .row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Wider input within the narrow form */
.cred-form-narrow input[type="text"],
.cred-form-narrow input[type="password"] {
  max-width: none;   /* full width of the narrow form */
}

/* ============================================================ */
/* Forms                                                          */
/* ============================================================ */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}
.form-row:not(.form-row-stack) label {
  flex: 1;
  min-width: 0;
}
.form-row:not(.form-row-stack) button { align-self: end; }

label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
label .req::after { content: " *"; color: var(--bad); font-weight: var(--fw-bold); }
.form-label {
  display: block;
  margin-bottom: 8px;
}

/* Shared application form-control family. Width remains context-dependent. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  min-height: var(--form-control-height);
  padding: 0 var(--form-control-padding-inline);
  font-size: var(--form-control-font-size);
  line-height: normal;
  font-family: inherit;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--form-control-radius);
  color: var(--text-primary);
  width: 100%;
  max-width: 360px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select:not([multiple]) {
  height: var(--form-control-height);
}
textarea {
  height: auto;
  min-height: 112px;
  padding-block: 10px;
  resize: vertical;
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint);
  font-size: var(--form-control-font-size);
  opacity: 1;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-faint);
  opacity: 1;
  cursor: not-allowed;
}
input[readonly], textarea[readonly] {
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: default;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 12%, transparent);
}

.pw-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pw-row input { flex: 1; }

.checkbox-row, .backup-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-primary);
}
.checkbox-row input[type="checkbox"], .backup-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
}
.checkbox-row span, .backup-check span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* ============================================================ */
/* Tables                                                         */
/* ============================================================ */
.data, table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data th, .data td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.data th {
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--bg-page);
  position: sticky;
  top: 0;
}
.data tr:hover td { background: var(--surface-hover); }
.data-wrap { width: 100%; overflow-x: auto; }
.data th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, color .15s ease;
}
.data th.sortable:hover { background: var(--surface-hover); }
.data th.sortable.is-active { color: var(--text-primary); }
.sort-arrow {
  display: inline-block;
  min-width: 14px;
  margin-left: 4px;
  color: var(--text-faint);
}
.data-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.device-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px;
  gap: 10px;
  margin: 14px 0;
}
.device-toolbar input,
.device-toolbar select { margin: 0; }
.action-menu { position: relative; display: inline-block; }
.action-menu summary {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semibold);
}
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu summary:hover { background: var(--surface-hover); color: var(--text-primary); }
.action-menu[open] summary { box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.action-menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 176px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .12);
}
.action-menu-popover button,
.action-menu-popover a {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.action-menu-popover button:hover,
.action-menu-popover a:hover { background: var(--surface-hover); }
.action-menu-popover .is-danger { color: var(--bad); }
.data-wrap:has(.action-menu[open]) { overflow: visible; }

/* Bulk discovery follows the shared telemetry-ledger language. */
.onboarding-switch { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #F8F8F6; }
.onboarding-switch button { min-height: 34px; padding: 7px 14px; color: var(--text-secondary); }
.onboarding-switch button.is-active { background: var(--primary); color: var(--text-on-primary); box-shadow: var(--shadow-sm); }
.device-notice {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #B9DFC7;
  border-radius: 10px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.discovery-ledger {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
.discovery-ledger:has(.action-menu[open]) {
  overflow: visible;
}
.discovery-step {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  border-bottom: 1px solid var(--border);
}
.discovery-step:last-child { border-bottom: 0; }
.step-index {
  padding: 24px 18px;
  border-right: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
}
.step-content { min-width: 0; padding: 24px; }
.step-content h3 { margin: 0 0 4px; color: var(--text-primary); }
.device-list-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.onboarding-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(230px, 1.2fr) auto; align-items: end; gap: 12px; margin-top: 18px; }
.onboarding-form label { margin: 0; }
.onboarding-form input, .onboarding-form select { margin: 5px 0 0; }
.onboarding-message { min-height: 20px; margin-top: 12px; }
.scan-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.scan-pipeline span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-card); }
.scan-pipeline i { color: var(--border-strong); font-style: normal; }
.precheck-panel { margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-card); }
.precheck-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.precheck-header h4 { margin: 4px 0 0; color: var(--text-primary); }
.readiness { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-semibold); white-space: nowrap; }
.readiness.is-ready { background: var(--ok-soft); color: var(--ok); }
.readiness.is-blocked { background: var(--bad-soft); color: var(--bad); }
.precheck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.precheck-grid > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.precheck-grid > div:nth-child(even) { border-right: 0; }
.precheck-grid span:first-child { color: var(--text-secondary); font-size: 12px; }
.precheck-grid strong { min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: 12px; }
.precheck-grid select { max-width: 260px; margin: 0; }
.precheck-value { font-size: 12px; font-weight: var(--fw-semibold); }
.precheck-value.is-pass { color: var(--ok); }
.precheck-value.is-fail { color: var(--bad); }
.precheck-value.is-neutral { color: var(--text-secondary); }
.precheck-reason { padding: 14px 18px; background: var(--bad-soft); color: var(--bad); }
.precheck-reason p { margin: 4px 0 0; }
.precheck-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }
@media (max-width: 1200px) and (min-width: 761px) {
  .onboarding-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding-form > button { justify-self: start; }
}
.discovery-form {
  display: grid;
  grid-template-columns: minmax(240px, 440px) auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}
.discovery-form input { margin: 0; }
#discovery-message { min-height: 20px; margin-top: 10px; }
.snmp-discovery-options { max-width: 620px; margin-top: 16px; }
.check-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; }
.check-row strong, .check-row small { display: block; }
.check-row small { margin-top: 3px; color: var(--text-faint); }

/* Unified notifications — uses the same restrained ledger language as Event Display. */
.ledger-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); margin-top: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-card); }
.ledger-section-number { padding: 24px 18px; border-right: 1px solid var(--border); color: var(--text-faint); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .12em; }
.ledger-section-content { min-width: 0; padding: 24px; }
.ledger-section-content h2 { margin: 0 0 6px; font-size: 18px; }
.ledger-section-content > p, .section-heading-row p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.compact-filter{display:block;width:min(220px,100%);margin:0}.compact-filter select{margin:0}
.form-grid { display: grid; column-gap: 16px; row-gap: 22px; margin-top: 20px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: block; min-width: 0; margin: 0; }
.field > span, .rule-group legend { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.field input, .field select { width: 100%; margin: 0; }
.field small { display: block; margin-top: 6px; color: var(--text-faint); font-size: 11px; }
#telegram-settings-form .check-row { margin-top: 16px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.form-actions.align-right { justify-content: flex-end; }
.setup-guide { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--text-secondary); font-size: 12px; }
.setup-guide summary { cursor: pointer; color: var(--text-primary); font-weight: var(--fw-semibold); }
.setup-guide ol { margin: 12px 0 0; padding-left: 22px; line-height: 1.7; }
.notification-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.rule-group { min-width: 0; margin: 0; padding: 0 20px 0 0; border: 0; }
.rule-group + .rule-group { padding-left: 24px; border-left: 1px solid var(--border); }
.inline-options { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 4px; }
.history-filters { display: grid; grid-template-columns: repeat(3, minmax(140px, 220px)); gap: 12px; margin-top: 20px; }
.table-scroll { margin-top: 16px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); text-align: left; font-weight: var(--fw-semibold); }
.data-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 3px; color: var(--text-faint); }
.recent-events-card { margin-top: 22px; padding: 22px; }
.recent-events-card .section-heading-row { margin-bottom: 14px; }
.recent-events-table { min-width: 760px; }
.recent-events-table th:first-child,
.recent-events-table td:first-child { width: 170px; white-space: nowrap; }
.recent-events-table th:nth-child(2),
.recent-events-table td:nth-child(2) { width: 190px; }
.recent-events-table th:nth-child(4),
.recent-events-table td:nth-child(4),
.recent-events-table th:nth-child(5),
.recent-events-table td:nth-child(5) { width: 120px; }
.service-heading-row { margin: 20px 0 14px; }
@media (max-width: 800px) {
  .ledger-card { grid-template-columns: 1fr; }
  .ledger-section-number { padding: 16px 20px 0; border-right: 0; }
  .ledger-section-content { padding: 20px; }
  .form-grid.two-col, .form-grid.three-col, .notification-rule-grid, .history-filters { grid-template-columns: 1fr; }
  .rule-group + .rule-group { padding: 20px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .section-heading-row { align-items: flex-start; }
}
#discovery-snmp-fields { margin: 12px 0 0 28px; }
#discovery-snmp-fields input { margin: 0; padding-right: 68px; }
.secret-field { position: relative; max-width: 360px; }
.secret-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 32px !important;
  height: 32px;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
}
.secret-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.secret-toggle:focus-visible { outline-offset: 0; }
.field-note { margin: 6px 0 0; font-size: 12px; }
.discovery-results { margin-top: 18px; }
.discovery-summary { margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; }
.discovery-table th:first-child, .discovery-table td:first-child { width: 44px; }
.discovery-table input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.discovery-table select { min-width: 190px; margin: 0; }
.discovery-table td small { display: block; margin-top: 4px; color: var(--text-faint); }
.discovery-table td:nth-child(4) { max-width: 360px; overflow-wrap: anywhere; }
.discovery-table td .badge + .badge, .discovery-table td code + .badge { margin-left: 8px; }
.discovery-add-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.empty-state.compact { padding: 28px 18px; }
@media (max-width: 760px) {
  .onboarding-switch { display: flex; }
  .onboarding-switch button { flex: 1; }
  .discovery-step { grid-template-columns: 46px minmax(0, 1fr); }
  .step-index { padding: 20px 12px; }
  .step-content { padding: 20px 16px; }
  .discovery-form { grid-template-columns: 1fr; }
  .discovery-form button, .discovery-add-row button { width: 100%; }
  .discovery-add-row { align-items: stretch; flex-direction: column; }
  .onboarding-form { grid-template-columns: 1fr; }
  .onboarding-form button { width: 100%; }
  .scan-pipeline i { display: none; }
  .precheck-header, .precheck-actions { align-items: stretch; flex-direction: column; }
  .precheck-grid { grid-template-columns: 1fr; }
  .precheck-grid > div { border-right: 0; }
  .precheck-actions button { width: 100%; }
}

/* ============================================================ */
/* Status ledger (Status tab) — one composed surface, not a card grid */
/* ============================================================ */
.summary-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr .9fr .9fr;
  gap: 0;
  margin-bottom: 18px;
  background: #F8F8F6;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.summary-grid.is-tenant {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .summary-card:nth-child(even) { border-right: 0; }
}
.summary-card {
  position: relative;
  min-width: 0;
  min-height: 142px;
  padding: 22px 24px 20px;
  border-right: 1px solid var(--border);
  background: transparent;
}
.summary-card:last-child { border-right: 0; }
.summary-card::after {
  position: absolute;
  top: 19px;
  right: 20px;
  color: #B2B2AE;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.summary-card[data-key="hosts"]::after { content: "01"; }
.summary-card[data-key="alerts"]::after { content: "02"; }
.summary-card[data-key="cpu"]::after { content: "03"; }
.summary-card[data-key="memory"]::after { content: "04"; }
.summary-card[data-key="alerts"].is-warn,
.summary-card[data-key="alerts"].is-bad {
  background: #FFF7ED;
}
.summary-stripe {
  position: absolute;
  top: 25px;
  left: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral);
}
.summary-card.is-ok    .summary-stripe { background: var(--ok); }
.summary-card.is-warn  .summary-stripe { background: var(--warn); }
.summary-card.is-bad   .summary-stripe { background: var(--bad); }
.summary-card.is-neutral .summary-stripe { background: var(--neutral); }
.summary-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--fw-semibold);
  margin: 0 28px 22px 15px;
}
.summary-value {
  font-size: 34px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-primary);
}
.summary-meta {
  max-width: 22ch;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-faint);
  margin-top: 8px;
}

/* ============================================================ */
/* Service tiles (Status tab)                                     */
/* ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.tile.is-loading .tile-name, .tile.is-loading .meta-val {
  color: var(--text-faint);
  background: linear-gradient(90deg,
    var(--surface-hover) 0%, var(--neutral-soft) 50%, var(--surface-hover) 100%);
  background-size: 200% 100%;
  animation: tile-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  display: inline-block;
  min-width: 60px;
}
@keyframes tile-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.tile-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-hover);
  color: var(--text-secondary);
}
.tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 40px;
}
.tile-name {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.dot {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.ok      { background: var(--ok-soft);  color: var(--ok); }
.dot.warn    { background: var(--warn-soft); color: var(--warn); }
.dot.bad     { background: var(--bad-soft);  color: var(--bad); }
.dot.unknown { background: var(--neutral-soft); color: var(--neutral); }
.dot svg { display: block; }
.tile-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.tile-meta .meta-label {
  color: var(--text-faint);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin-right: 6px;
}
.tile-meta .meta-val { color: var(--text-primary); font-weight: var(--fw-medium); }

.tile-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.tile-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-family: inherit;
}
.tile-action-btn:hover:not(:disabled) {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-hover);
}
.tile-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================ */
/* Link cards (Links tab)                                         */
/* ============================================================ */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.link-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.link-label {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.link-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}
.link-meta { font-size: 12px; color: var(--text-faint); }
.open-link {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--info);
  text-decoration: none;
  margin-top: 6px;
  align-self: flex-start;
}
.open-link:hover { text-decoration: underline; }

/* ============================================================ */
/* Backup tab sections                                            */
/* ============================================================ */
.backup-section {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  border-bottom: 1px solid var(--border);
}
.backup-section:last-child { border-bottom: 0; }
.backup-ledger { overflow: hidden; margin-top: 18px; border: 1px solid var(--border); border-radius: 16px; background: #F8F8F6; }
.backup-index { padding: 24px 18px; border-right: 1px solid var(--border); color: var(--text-faint); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .08em; }
.backup-body { min-width: 0; padding: 24px; }
.backup-body h3 { margin: 0 0 4px; color: var(--text-primary); }
.backup-body > p { margin: 0; }
.backup-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.backup-check { margin-top: 14px; }
.backup-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.backup-item-meta, .backup-item-meta > span { display: block; }
.backup-item-meta .muted { margin-top: 3px; font-size: 12px; }
.backup-item-actions { display: flex; align-items: center; gap: 6px; }
.backup-body > .console { margin: 16px 0 0; }

/* ============================================================ */
/* List (backup list)                                             */
/* ============================================================ */
.list { list-style: none; padding: 0; margin: 0; }

/* Update versions use the same compact ledger language. */
.version-ledger {
  overflow: hidden;
  margin-bottom: 16px;
  background: #F8F8F6;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.version-row {
  display: grid;
  grid-template-columns: 36px minmax(240px, 1fr) minmax(260px, 1.25fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.version-row:last-child { border-bottom: 0; }
.version-index {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
}
.version-image,
.version-date {
  min-width: 0;
  overflow-wrap: anywhere;
}
.version-image { color: var(--text-primary); font-size: 12px; }
.version-date { color: var(--text-faint); font-size: 12px; }
.version-empty { padding: 18px; color: var(--text-faint); font-size: 13px; }

/* ============================================================ */
/* Unified telemetry-ledger language                              */
/* ============================================================ */
.page > .card {
  background: #F8F8F6;
  border-color: var(--border);
  border-radius: 16px;
  box-shadow: none;
}

/* Reports — one structured ledger using the shared form/button system. */
.report-ledger { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-card); }
.report-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.report-step + .report-step { border-top: 1px solid var(--border); }
.report-step-index { padding: 28px 20px; border-right: 1px solid var(--border); color: var(--text-soft); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.report-step-body { padding: 28px 32px; }
.report-step-body h3 { margin: 0 0 8px; }
.report-step-body > p { margin: 0; }
.report-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.report-form label { min-width: 0; }
.report-form-action { display: flex; align-items: end; }
.report-site-status { min-height: 20px; margin-top: 12px; }
.report-step-note .report-step-body { max-width: 840px; }

@media (max-width: 760px) {
  .report-step { grid-template-columns: 48px minmax(0, 1fr); }
  .report-step-index { padding: 22px 14px; }
  .report-step-body { padding: 22px 18px; }
  .report-form { grid-template-columns: 1fr; }
}

/* Services read as operational rows, not repeated dashboard cards. */
.grid {
  display: block;
  overflow: hidden;
  background: #F8F8F6;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.tile {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.25fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 0;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.tile:last-child { border-bottom: 0; }
.tile-icon { display: none; }
.tile-head { margin-right: 0; }
.tile-meta {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px 18px;
}
.tile-actions { margin-top: 0; justify-content: flex-end; }

/* Endpoint links share one ledger surface with dividers. */
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
}
.link-card {
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
}
.link-card:last-child { border-right: 0; }

/* Credential groups use one divided ledger instead of two floating cards. */
.cred-surface {
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #F8F8F6;
}
.cred-grid {
  gap: 0;
  overflow: hidden;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cred-grid > fieldset {
  padding: 20px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.cred-grid > fieldset:last-child { border-right: 0; }
.cred-actions {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .48);
}
.cred-actions #creds-status { flex: 1; }
.cred-surface > .console {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

/* Integration prerequisites use the same divided ledger language. */
.integration-ledger { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #F8F8F6; }
.integration-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.integration-row:last-child { border-bottom: 0; }
.integration-index { padding: 24px 18px; border-right: 1px solid var(--border); color: var(--text-faint); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .08em; }
.integration-body { min-width: 0; padding: 24px; }
.integration-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.integration-heading h3 { margin: 0 0 4px; color: var(--text-primary); }
.integration-heading p { margin: 0; }
.integration-form { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 14px 18px; margin-top: 20px; }
.integration-form > .field-span-2 { grid-column: 1 / -1; }
.integration-form label { margin: 0; }
.integration-form input { margin: 5px 0 0; }
.integration-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.integration-group + .integration-group { padding-left: 18px; border-left: 1px solid var(--border); }
.integration-form > .integration-group.field-span-2 + .integration-group.field-span-2 {
  padding-top: 22px;
  padding-left: 0;
  border-top: 1px solid var(--border);
  border-left: 0;
}
.integration-group legend { padding: 0; color: var(--text-primary); font-size: 16px; font-weight: var(--fw-bold); }
.integration-group > p { margin: 5px 0 16px; color: var(--text-muted); font-size: 13px; }
.integration-group-grid { display: grid; gap: 14px; }
.integration-group-grid label { min-width: 0; }
.integration-group-actions { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.integration-group-actions > span { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.integration-group-actions button { flex: 0 0 auto; }
.integration-health { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.integration-health-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.integration-health-heading h4, .integration-health-columns h4 { margin: 0 0 5px; color: var(--text-primary); }
.integration-health-heading p { margin: 0; }
.integration-health-actions { flex-wrap: wrap; justify-content: flex-end; }
.integration-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-card); }
.integration-health-grid > div { min-width: 0; padding: 15px 16px; border-right: 1px solid var(--border); }
.integration-health-grid > div:last-child { border-right: 0; }
.integration-health-grid span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.integration-health-grid strong { display: block; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.integration-health-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.integration-check-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-card); }
.integration-check-list > p { margin: 0; padding: 14px 16px; }
.integration-check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.integration-check-row:last-child { border-bottom: 0; }
.integration-check-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.integration-state { color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.integration-state[data-state="HEALTHY"], .integration-state[data-state="UP"], .integration-state[data-state="READY"] { color: var(--ok); }
.integration-state[data-state="WARNING"], .integration-state[data-state="PARTIAL"], .integration-state[data-state="SETUP_REQUIRED"], .integration-state[data-state="NO_DATA"], .integration-state[data-state="NOT_CONFIGURED"] { color: var(--warn); }
.integration-state[data-state="OFFLINE"], .integration-state[data-state="AUTH_FAILED"], .integration-state[data-state="UNAVAILABLE"], .integration-state[data-state="API_ERROR"] { color: var(--bad); }
.integration-secret { max-width: none; }
.integration-note { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; }
.integration-toggle { grid-column: 1 / -1; width: fit-content; }
.integration-toggle input { flex: 0 0 auto; margin: 2px 0 0; }
.integration-toggle small { display: block; margin-top: 3px; color: var(--text-faint); }
.integration-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 4px; }
.integration-actions > span { flex: 1; }
.branding-form { margin-top: 20px; }
.branding-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.branding-modes legend { margin-bottom: 8px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.branding-modes label { display: flex; align-items: flex-start; gap: 9px; min-height: 64px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-card); cursor: pointer; }
.branding-modes label:has(input:checked) { border-color: var(--text-primary); background: var(--surface-hover); }
.branding-modes input { width: auto; margin: 3px 0 0; }
.branding-modes span, .branding-modes small { display: block; }
.branding-modes strong { font-size: 13px; }
.branding-modes small { margin-top: 3px; color: var(--text-faint); font-size: 11px; line-height: 1.35; }
.branding-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 18px; }
.branding-fields label, .branding-upload { margin: 0; }
.branding-fields input { margin-top: 5px; }
.branding-powered-toggle { margin-top: 16px; }
.branding-logo-row { display: flex; align-items: end; gap: 10px; margin-top: 18px; }
.branding-upload { flex: 1; }
.branding-upload input { margin: 5px 0 0; }
.branding-upload small { display: block; margin-top: 5px; color: var(--text-faint); font-size: 11px; }
.branding-preview { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-card); }
.branding-preview-label { margin-bottom: 14px; color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.branding-preview-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.branding-preview-identity > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.branding-preview-identity strong { overflow-wrap: anywhere; font-size: 16px; }
.branding-preview-identity small { margin-top: 3px; color: var(--text-secondary); }
.branding-preview-logo { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.branding-preview-logo img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.brand-mark-preview { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; }
.brand-mark-preview i { width: 8px; height: 8px; border-radius: 2px; background: var(--text-primary); }
.brand-mark-preview i:nth-child(2), .brand-mark-preview i:nth-child(3) { opacity: .45; }
.branding-actions { display: flex; margin-top: 16px; }
@media (max-width: 760px) {
  .integration-row { grid-template-columns: 46px minmax(0, 1fr); }
  .integration-index { padding: 20px 12px; }
  .integration-body { padding: 20px 16px; }
  .integration-heading, .integration-actions { align-items: stretch; flex-direction: column; }
  .integration-form { grid-template-columns: 1fr; }
  .integration-group + .integration-group { padding-top: 20px; padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }
  .integration-group-actions { align-items: stretch; flex-direction: column; }
  .integration-group-actions button { width: 100%; }
  .integration-health-heading { flex-direction: column; }
  .integration-health-actions { justify-content: flex-start; }
  .integration-health-grid, .integration-health-columns { grid-template-columns: 1fr; }
  .integration-health-grid > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .integration-health-grid > div:last-child { border-bottom: 0; }
  .integration-note, .integration-toggle, .integration-actions { grid-column: 1; }
  .integration-actions button { width: 100%; }
  .branding-modes, .branding-fields { grid-template-columns: 1fr; }
  .branding-logo-row { align-items: stretch; flex-direction: column; }
  .branding-logo-row button { width: 100%; }
  .backup-section { grid-template-columns: 46px minmax(0, 1fr); }
  .backup-index { padding: 20px 12px; }
  .backup-body { padding: 20px 16px; }
  .backup-item { align-items: stretch; flex-direction: column; }
  .backup-item-actions .btn, .backup-item-actions button { flex: 1; }
}
.list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.list li:last-child { border-bottom: 0; }

/* ============================================================ */
/* Console / log viewer                                           */
/* ============================================================ */
.console {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* Log viewer — always dark surface for readability of log levels */
.console.console-stream {
  background: #0F1218;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-on-primary);
  padding: 8px 4px;
}
.console.console-stream .log-msg { color: var(--text-on-primary); }
.console.console-stream .log-time {
  color: #9BA4B5;
  font-variant-numeric: tabular-nums;
}
.console.console-stream .log-level-info {
  color: #6FB1FF;
  font-weight: var(--fw-semibold);
}
.console.console-stream .log-level-warning {
  color: #F4C266;
  font-weight: var(--fw-semibold);
}
.console.console-stream .log-level-error {
  color: #FF8585;
  font-weight: var(--fw-semibold);
}
.console.console-stream .log-level-debug {
  color: var(--text-faint);
}
.console.console-stream .log-line:hover { background: rgba(255, 255, 255, 0.05); }
.console.console-stream .log-line {
  display: grid;
  grid-template-columns: 90px 70px 1fr;
  gap: 12px;
  padding: 2px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ============================================================ */
/* Modals                                                         */
/* ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 100;
  display: none;
}
.modal-backdrop.is-open { display: flex; }
.modal-backdrop .card {
  box-shadow: var(--shadow-md);
  max-width: 480px;
  width: 90%;
  margin: 0;
}
.modal-card-wide { max-width: 720px !important; }

.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
}
.modal[hidden] { display: none !important; }
.modal.is-open { display: flex; }
.modal-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 960px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
/* Native dialogs must remain out of layout until showModal()/show() sets
   the open attribute. The reusable modal-card flex rule otherwise overrides
   the browser's default dialog:not([open]) behavior. */
dialog.modal-card:not([open]) { display: none; }
.modal-card .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.modal-card .modal-head h2 { margin: 0 0 6px; }
.modal-card .modal-head p { margin: 0; color: var(--text-secondary); }
.modal-card .modal-head .icon-button {
  flex: 0 0 auto;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
}
.modal-card .modal-head .icon-button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.modal-card header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-card header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--fw-semibold);
}
.modal-head-left { display: flex; align-items: baseline; gap: 10px; }
.modal-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.modal-toggle input { accent-color: var(--primary); }
.modal-input {
  width: 220px;
}
.modal-card pre {
  margin: 0;
  padding: 12px 16px;
  flex: 1;
  overflow: auto;
  background: #0F1218;
  color: var(--text-on-primary);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modal-card .modal-close-btn {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

/* ============================================================ */
/* Misc utilities                                                 */
/* ============================================================ */
.muted { color: var(--text-secondary); font-size: 13px; }
a.link, .link { color: var(--text-secondary); text-decoration: none; }
a.link:hover { color: var(--text-primary); text-decoration: underline; }

/* ============================================================ */
/* IT operations Activity Calendar + Event Display management    */
/* ============================================================ */
.calendar-card { padding: 0; overflow: hidden; }
.calendar-toolbar,
.activity-agenda-heading,
.activity-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.calendar-toolbar { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.calendar-toolbar h2,
.activity-agenda-heading h3,
.activity-modal-header h3 { margin: 4px 0 0; }
.calendar-eyebrow {
  color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: .09em; text-transform: uppercase;
}
.calendar-actions { display: flex; align-items: center; gap: 6px; }
.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.calendar-weekdays span {
  padding: 10px 12px; color: var(--text-faint); font-size: 11px;
  font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase;
}
.calendar-grid .loading-state { grid-column: 1 / -1; }
.calendar-day {
  min-height: 116px; padding: 10px; border: 0; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); border-radius: 0; align-items: stretch;
  justify-content: flex-start; flex-direction: column; gap: 8px; white-space: normal;
  background: var(--surface-card); text-align: left;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover { background: var(--surface-hover); }
.calendar-day.is-outside { color: var(--text-faint); background: var(--surface-muted); }
.calendar-day.is-selected { box-shadow: inset 0 0 0 2px var(--focus); z-index: 1; }
.calendar-day.is-today .calendar-date { background: var(--primary); color: var(--text-on-primary); }
.calendar-date {
  align-self: flex-start; display: grid; place-items: center; min-width: 26px; height: 26px;
  border-radius: 7px; font-size: 12px; font-weight: var(--fw-semibold);
}
.calendar-events { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calendar-event {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-secondary); font-size: 11px; line-height: 1.35;
}
.calendar-event::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 6px; border-radius: 50%; background: var(--text-faint); }
.calendar-event[data-status="In Progress"]::before { background: var(--focus); }
.calendar-event[data-status="Completed"]::before { background: var(--ok); }
.calendar-event[data-status="Postponed"]::before { background: var(--warn); }
.calendar-event[data-status="Cancelled"]::before { background: var(--bad); }
.calendar-more { color: var(--text-faint); font-size: 10px; }
.activity-agenda-card { padding: 0; }
.activity-agenda-heading { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.agenda-row {
  display: grid; grid-template-columns: 82px minmax(180px, 1.5fr) minmax(120px, .8fr) auto;
  gap: 18px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.agenda-main strong, .agenda-main span, .agenda-place span { display: block; }
.agenda-main span, .agenda-place span { color: var(--text-secondary); font-size: 12px; margin-top: 3px; }
.activity-status {
  justify-self: start; display: inline-flex; padding: 4px 8px; border-radius: 999px;
  background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; font-weight: var(--fw-semibold);
}
.activity-status[data-status="In Progress"] { background: #E8F1FF; color: #215DA8; }
.activity-status[data-status="Completed"] { background: #EAF7EF; color: #277A49; }
.activity-status[data-status="Postponed"] { background: #FFF4DB; color: #8A5A00; }
.activity-status[data-status="Cancelled"] { background: #F3F3F4; color: #6F737A; }
.activity-status[data-status="Awaiting Closure"] { background: #FFF4DB; color: #8A5A00; }
.activity-status[data-status="Completed with Issue"] { background: #FFF4DB; color: #8A5A00; }
.activity-modal-card { max-width: 900px !important; width: calc(100vw - 32px) !important; max-height: calc(100vh - 32px); overflow: auto; }
.activity-modal-header { margin-bottom: 20px; }
.activity-form-grid,
.event-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.activity-form-grid label,
.event-settings-grid label { margin: 0; }
.activity-form-grid .field-span-2 { grid-column: 1 / -1; }
.activity-form-grid textarea { resize: vertical; min-height: 96px; }
.activity-modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.activity-action-spacer { flex: 1; }
.page-header-actions { display: flex; align-items: center; gap: 8px; }
.activity-closure-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 14px; border: 1px solid #E7D3A2; border-radius: var(--r-md); background: #FFF9EC; }
.activity-closure-actions>span { display: flex; flex: 1; min-width: 180px; flex-direction: column; }
.activity-closure-actions small { margin-top: 2px; color: var(--text-secondary); }
.compact-modal-card { max-width: 560px !important; width: calc(100vw - 32px) !important; }
.profile-list { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.profile-row { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--border); }
.profile-row:first-child { border-top: 0; }
.profile-row>div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.profile-row>div:first-child span { overflow: hidden; color: var(--text-secondary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-actions { display: flex; align-items: center; gap: 6px; }
.event-settings-form fieldset { margin: 22px 0 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-md); }
.event-settings-form legend { padding: 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-semibold); }
.event-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.event-options label,
.event-inline-options label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.event-options input,
.event-inline-options input { width: auto; margin: 0; accent-color: var(--primary); }
.event-inline-options { display: flex; gap: 24px; margin-top: 16px; }
.event-music-settings .checkbox-row { margin-bottom: 18px; }
.event-settings-form input[type="range"] { padding: 0; border: 0; }

.changeguard-panel { margin-top: 22px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-muted); }
.changeguard-heading, .changeguard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.changeguard-heading h4 { margin: 4px 0 0; font-size: 16px; }
.changeguard-panel > .muted { margin: 10px 0 18px; line-height: 1.55; }
.changeguard-panel select[multiple] { min-height: 132px; }
.changeguard-peer-grid { margin-top: 14px; }
.changeguard-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-card); }
.changeguard-metric { padding: 14px 16px; border-left: 1px solid var(--border); }
.changeguard-metric:first-child { border-left: 0; }
.changeguard-metric span, .changeguard-metric strong { display: block; }
.changeguard-metric span { color: var(--text-faint); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.changeguard-metric strong { margin-top: 5px; font-size: 14px; }
.changeguard-proceed { margin-top: 16px; padding: 14px; border: 1px solid #E7D3A2; border-radius: var(--r-md); background: #FFF9EC; }
.changeguard-evidence { margin-top: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-card); }
.changeguard-evidence table { width: 100%; min-width: 640px; border-collapse: collapse; }
.changeguard-evidence th, .changeguard-evidence td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.changeguard-evidence tr:last-child td { border-bottom: 0; }
.changeguard-evidence th { color: var(--text-faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.changeguard-actions { justify-content: flex-end; margin-top: 16px; }
.assurance-step { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.assurance-step > .muted { margin: 10px 0 16px; line-height: 1.55; }
.assurance-step .check-row { margin-top: 14px; }
.assurance-timeline { margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-card); }
.assurance-timeline-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border-top: 1px solid var(--border); }
.assurance-timeline-row:first-child { border-top: 0; }
.assurance-timeline-row > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.assurance-timeline-row > div:last-child { align-items: flex-end; text-align: right; }
.assurance-timeline-row span:not(.badge), .assurance-timeline-row small { color: var(--text-faint); font-size: 11px; }
.maintenance-scope-reason { max-width: 72ch; line-height: 1.45; }
.maintenance-watch-risk { margin-top: 12px; }
.changeguard-metric.is-attention { background: var(--danger-soft); }
.recovery-settings-row { display: flex; align-items: flex-end; gap: 12px; margin: 14px 0 16px; }
.recovery-settings-row label { width: min(280px, 100%); margin: 0; }
.recovery-row > div:first-child { flex: 1; }
.recovery-row progress { width: min(420px, 100%); height: 6px; margin-top: 7px; accent-color: var(--accent, #17171b); }
.recovery-row .btn-link { margin-top: 3px; }
.validation-attempts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.validation-attempt { display: grid; min-width: 150px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-card); color: var(--text-primary); text-align: left; }
.validation-attempt:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.validation-attempt.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-ring); }
.validation-attempt span, .validation-attempt small { color: var(--text-faint); font-size: 10px; }
.validation-attempt strong { margin: 2px 0; font-size: 13px; }
.validation-watch-context { margin-top: 18px; }
.validation-watch-context h5 { margin: 0; font-size: 14px; }
.validation-watch-context > .muted { margin: 5px 0 0; }
.validation-watch-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.validation-attention { margin-top: 16px; padding: 14px 16px; border: 1px solid #F0B8B8; border-radius: var(--r-md); background: #FFF1F1; color: #8E2424; }
.validation-attention strong { display: block; font-size: 13px; }
.validation-attention p { margin: 5px 0 8px; line-height: 1.5; }
.validation-attention ul { margin: 0; padding-left: 20px; }
.validation-attention li { margin-top: 4px; }
.validation-attention li span { color: var(--text-secondary); font-size: 11px; }

@media (max-width: 900px) {
  .event-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .agenda-place { grid-column: 2; }
}
@media (max-width: 680px) {
  .calendar-toolbar, .activity-agenda-heading { align-items: flex-start; flex-direction: column; }
  .calendar-weekdays { display: none; }
  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-day { min-height: 70px; border-right: 0; }
  .calendar-day.is-outside { display: none; }
  .activity-form-grid, .event-settings-grid, .event-options { grid-template-columns: 1fr; }
  .activity-form-grid .field-span-2 { grid-column: auto; }
  .agenda-row { grid-template-columns: 1fr auto; padding: 16px; }
  .agenda-time, .agenda-place { grid-column: 1; }
  .agenda-row > button { grid-column: 2; grid-row: 1 / span 2; }
  .activity-modal-actions { flex-wrap: wrap; }
  .activity-action-spacer { display: none; }
  .activity-modal-actions button { flex: 1 1 100%; }
  .page-header-actions, .activity-closure-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .page-header-actions button, .activity-closure-actions button { width: 100%; }
  .profile-row { grid-template-columns: 1fr; }
  .profile-actions { align-items: stretch; flex-direction: column; }
  .changeguard-summary { grid-template-columns: 1fr; }
  .changeguard-metric { border-top: 1px solid var(--border); border-left: 0; }
  .changeguard-metric:first-child { border-top: 0; }
  .changeguard-actions { align-items: stretch; flex-direction: column; }
  .changeguard-actions button { width: 100%; }
  .assurance-timeline-row { align-items: flex-start; flex-direction: column; }
  .assurance-timeline-row > div:last-child { align-items: flex-start; text-align: left; }
  .recovery-settings-row { align-items: stretch; flex-direction: column; }
  .validation-attempt { width: 100%; }
  .validation-watch-summary { grid-template-columns: 1fr; }
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.row .muted { margin-right: auto; }

.stack-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 0 0 12px;
}
.stack-form legend {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 8px;
}

.toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.h-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 8px;
  color: var(--primary);
}


/* ============================================================ */
/* Async button spinner                                           */
/* ============================================================ */
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.btn.is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================================ */
/* Scrollbar (Webkit + Firefox)                                   */
/* ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  background-clip: padding-box;
}

::selection {
  background: var(--primary-soft);
  color: var(--text-primary);
}

/* ============================================================ */
/* Login page — premium black / white                             */
/* ============================================================ */
.login-body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(560px, 1.16fr) minmax(440px, .84fr);
  background: #0a0b0c;
  color: #f5f5f3;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
.login-body ::selection { background: #d7d7d3; color: #0a0b0c; }
.login-hero {
  min-height: 100vh;
  background: #0a0b0c;
  color: #f5f5f3;
  padding: clamp(36px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-right: 1px solid #292b2e;
}
.login-hero-body {
  margin-top: auto;
  margin-bottom: auto;
  width: min(760px, 100%);
  padding: 32px 0 24px;
}
.login-hero h1 {
  font-size: clamp(48px, 4.8vw, 72px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.04;
}
.login-hero h1 span { color: #b8b9b6; }
.login-hero-rule {
  display: block;
  width: 48px;
  height: 2px;
  margin: 30px 0 24px;
  background: #a3a4a1;
}
.login-hero p {
  color: #a7a8a5;
  margin: 0;
  max-width: 430px;
  line-height: 1.55;
}
.login-hero .login-hero-lead { font-size: clamp(20px, 2vw, 28px); color: #dededb; line-height: 1.45; }
.login-hero-tagline {
  display: grid;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #868784;
}
.login-hero-tagline strong {
  color: #f1f1ef;
  font-size: 12px;
  font-weight: var(--fw-semibold);
}
.login-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #292b2e;
  font-size: 13px;
  color: #9c9d9a;
  line-height: 1.6;
}
.login-hero-meta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }
.login-capabilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 40px; }
.login-capabilities article { min-width: 0; padding: 0 22px; border-left: 1px solid #292b2e; }
.login-capabilities article:first-child { padding-left: 0; border-left: 0; }
.login-capabilities article:last-child { padding-right: 0; }
.login-capabilities svg { width: 27px; height: 27px; margin-bottom: 14px; fill: none; stroke: #d2d3d0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-capabilities h2 { margin: 0 0 8px; font-size: 14px; font-weight: var(--fw-semibold); color: #f5f5f3; }
.login-capabilities article p { font-size: 12px; line-height: 1.55; color: #8e8f8c; }
.login-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  background: #0d0e10;
}
.login-card {
  background: #131416;
  border: 1px solid #323438;
  border-radius: 12px;
  padding: 38px 36px;
  width: 100%;
  max-width: 430px;
  box-shadow: none;
}
.login-card h2 {
  font-size: 26px;
  font-weight: var(--fw-semibold);
  margin: 0 0 6px;
  color: #f5f5f3;
}
.login-card .sub {
  font-size: 14px;
  color: #9c9d9a;
  margin: 0 0 22px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: #c5c6c3;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
  display: block;
}
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #17181a;
  border: 1px solid #3b3d41;
  border-radius: 7px;
}
.input-wrap:focus-within {
  border-color: #ededeb;
  outline: 2px solid #696b70;
  outline-offset: 2px;
}
.input-wrap .lead {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f9093;
  pointer-events: none;
}
.input-wrap input {
  border: 0;
  background: transparent;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 40px;
  font-size: 14px;
  color: #f5f5f3;
  outline: none;
}
.input-wrap input::placeholder { color: #717276; }
.input-wrap.pw input { padding-left: 40px; padding-right: 40px; }
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #a0a1a4;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.pw-toggle:hover { color: #fff; background: #2a2c2f; }
.pw-toggle:focus-visible { outline: 2px solid #f0f0ed; outline-offset: 1px; }
.pw-toggle .ico-eye-off { display: none; }
.pw-toggle.is-shown .ico-eye { display: none; }
.pw-toggle.is-shown .ico-eye-off { display: inline-block; }
.login-card .alert {
  background: #241718;
  border: 1px solid #8d4a4d;
  color: #f1b8ba;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.login-card button[type="submit"] {
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 14px;
  background: #f4f4f1;
  border-color: #f4f4f1;
  color: #0b0c0d;
  border-radius: 7px;
  box-shadow: none;
}
.login-card button[type="submit"]:hover:not(:disabled) { background: #d9d9d5; border-color: #d9d9d5; color: #0b0c0d; }
.login-card button[type="submit"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.login-card button[type="submit"]:disabled { background: #92938f; border-color: #92938f; color: #27282a; cursor: wait; }
.login-security-note { margin-top: 26px; color: #999a97; text-align: center; }
.login-security-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 12px; font-weight: var(--fw-semibold); }
.login-security-divider::before, .login-security-divider::after { content: ""; flex: 1; height: 1px; background: #333539; }
.login-security-note > div { display: inline-flex; align-items: flex-start; gap: 10px; text-align: left; }
.login-security-note svg { width: 17px; height: 17px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.login-security-note p, .login-security-note strong, .login-security-note span { display: block; margin: 0; font-size: 12px; line-height: 1.5; }
.login-security-note strong { font-weight: var(--fw-medium); color: #b7b8b5; }
.login-security-note p span { color: #7f807d; }
.login-card .meta {
  margin-top: 18px;
  font-size: 11px;
  color: #7f807d;
  text-align: center;
}

@media (max-width: 900px) {
  .login-body { grid-template-columns: 1fr; }
  .login-hero { min-height: auto; padding: 32px clamp(24px,6vw,52px); border-right: 0; border-bottom: 1px solid #292b2e; }
  .login-hero-body { margin: 0; padding: 28px 0 6px; }
  .login-hero h1 { font-size: clamp(34px,7vw,48px); }
  .login-capabilities, .login-hero-meta { display: none; }
  .login-side { min-height: auto; padding: 42px 24px 56px; }
}

@media (min-width: 901px) and (max-height: 820px) {
  .login-hero { padding-top: 30px; padding-bottom: 30px; }
  .login-hero-body { padding: 18px 0; }
  .login-hero h1 { font-size: clamp(44px, 4.2vw, 58px); }
  .login-hero-rule { margin: 20px 0 16px; }
  .login-capabilities { margin-top: 26px; }
  .login-capabilities svg { margin-bottom: 9px; }
  .login-hero-meta { padding-top: 16px; }
  .login-side { padding-top: 24px; padding-bottom: 24px; }
  .login-card { padding-top: 28px; padding-bottom: 28px; }
  .login-field { margin-bottom: 12px; }
  .login-security-note { margin-top: 18px; }
  .login-security-divider { margin-bottom: 15px; }
}

@media (max-width: 520px) {
  .login-hero { padding: 24px 20px; }
  .login-hero-body { padding: 20px 0 2px; }
  .login-hero h1 { font-size: 34px; }
  .login-hero-rule { margin: 20px 0 16px; }
  .login-hero .login-hero-lead { font-size: 18px; }
  .login-side { padding: 28px 16px 40px; }
  .login-card { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-body *, .login-body *::before, .login-body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================ */
/* Mobile / responsive                                            */
/* ============================================================ */
@media (max-width: 900px) {
  main { padding: 0 12px; margin: 16px auto; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; }
  .card h2 { font-size: 18px; }
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body.is-nav-open { overflow: hidden; }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav-toggle {
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface-card);
    color: var(--text-primary);
  }
  .mobile-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .mobile-brand strong { font-size: 14px; font-weight: var(--fw-semibold); }
  .mobile-brand span { font-size: 11px; color: var(--text-faint); }

  .mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    background: rgba(17, 24, 39, 0.32);
  }
  .mobile-backdrop[hidden] { display: none; }

  .layout { display: block; min-height: calc(100vh - 60px); }
  .sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: min(260px, calc(100vw - 40px));
    height: 100vh;
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: none;
  }
  .sidebar-collapse { display: none; }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 12px 0 28px rgba(17, 24, 39, 0.12);
  }

  .content {
    max-width: none;
    padding: 24px 16px 40px;
  }
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 20px;
  }
  .page-header h1,
  .page-header p { flex-basis: 100%; }
  .page-header > .btn,
  .page-header > button { margin-left: 0 !important; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card { min-height: 126px; padding: 18px; }
  .summary-card::after { top: 16px; right: 16px; }
  .summary-stripe { top: 21px; left: 18px; }
  .summary-label { margin-bottom: 18px; }
  .summary-value { font-size: 28px; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .pw-row { align-items: stretch; }
  .pw-row input { min-width: 0; }
  .backup-actions { align-items: stretch; }
  .modal-card,
  .modal-backdrop .card { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .modal-card header { align-items: flex-start; }
  .modal-head-right { width: 100%; }
  .modal-input { flex: 1 1 180px; min-width: 0; }
}

@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card,
  .summary-card:nth-child(even) {
    min-height: 116px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .summary-card:last-child { border-bottom: 0; }
  .backup-actions { flex-direction: column; }
  .backup-actions .btn,
  .backup-actions button,
  .backup-actions label { width: 100%; }
}

@media (max-width: 900px) {
  .version-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px 12px;
    padding: 14px 16px;
  }
  .version-date { grid-column: 2; }
  .tile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
  }
  .tile-meta { grid-column: 1; }
  .tile-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .link-grid { grid-template-columns: 1fr; }
  .link-card {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .link-card:last-child { border-bottom: 0; }
  .cred-grid > fieldset {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .cred-grid > fieldset:last-child { border-bottom: 0; }
  .cred-actions { align-items: stretch; flex-direction: column; }
  .cred-actions #creds-apply { width: 100%; }
}

@media (max-width: 560px) {
  .device-toolbar { grid-template-columns: 1fr; }
  .tile { grid-template-columns: 1fr; }
  .tile-meta {
    grid-column: 1;
    grid-template-columns: 1fr 1fr;
  }
  .tile-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================ */
/* Shared component classes (Badge / EmptyState / LoadingState)   */
/* ============================================================ */

/* Badge — compact pill for counts, status tags */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  background: var(--neutral-soft);
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: nowrap;
}
.badge.is-ok    { background: var(--ok-soft);  color: var(--ok); }
.badge.is-warn  { background: var(--warn-soft); color: var(--warn); }
.badge.is-bad   { background: var(--bad-soft);  color: var(--bad); }
.badge.is-info  { background: var(--info-soft); color: var(--info); }

.rbac-role-guide { margin-top: 20px; }
.rbac-role-guide h2 { margin: 0 0 16px; }
.rbac-role-guide dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; margin: 0; }
.rbac-role-guide dl div { padding: 14px 0; border-top: 1px solid var(--border); }
.rbac-role-guide dt { font-weight: var(--fw-semibold); color: var(--text); }
.rbac-role-guide dd { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
@media (max-width:700px) { .rbac-role-guide dl { grid-template-columns: 1fr; } }

/* EmptyState — centered illustration + message for "no data" views */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
}
.empty-state .empty-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--neutral-soft);
  color: var(--text-faint);
}
.empty-state .empty-title {
  font-size: 14px; font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.empty-state .empty-sub {
  font-size: 12px; color: var(--text-faint);
  max-width: 360px;
}

/* LoadingState — for in-flight data loads */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  color: var(--text-faint);
  font-size: 13px;
}
.loading-state::before {
  content: "";
  width: 12px; height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: state-spin 0.7s linear infinite;
}
@keyframes state-spin { to { transform: rotate(360deg); } }

/* Signed license — same restrained telemetry-ledger language as settings. */
.license-ledger { display: grid; gap: 16px; }
.license-ledger .ledger-card { margin-top: 0; }
.license-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 22px 0 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.license-detail-grid div { min-width: 0; padding: 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.license-detail-grid div:nth-child(4n) { border-right: 0; }
.license-detail-grid div:nth-last-child(-n+4) { border-bottom: 0; }
.license-detail-grid dt { color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .09em; text-transform: uppercase; }
.license-detail-grid dd { margin: 7px 0 0; overflow-wrap: anywhere; color: var(--text); font-weight: var(--fw-medium); }
.license-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.license-usage-grid article { padding: 18px; border: 1px solid var(--border); border-radius: 10px; }
.license-usage-grid article > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.license-usage-grid span { color: var(--text-secondary); }
.license-usage-grid progress { width: 100%; height: 7px; accent-color: var(--text); }
.license-usage-grid small { display: block; margin-top: 8px; color: var(--bad); }
.license-feature-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 1px solid var(--border); }
.license-feature-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.license-feature-grid > div:nth-child(odd) { border-right: 1px solid var(--border); }
.license-token-field { display: grid; gap: 8px; margin-top: 20px; }
.license-token-field span { color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.license-token-field textarea { width: 100%; resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.license-preview { display: grid; gap: 4px; margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--neutral-soft); }
.license-preview span,.license-preview small { color: var(--text-secondary); }
@media(max-width:900px){.license-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.license-detail-grid div:nth-child(4n){border-right:1px solid var(--border)}.license-detail-grid div:nth-child(2n){border-right:0}.license-detail-grid div:nth-last-child(-n+4){border-bottom:1px solid var(--border)}.license-detail-grid div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:620px){.license-detail-grid,.license-usage-grid,.license-feature-grid{grid-template-columns:1fr}.license-detail-grid div,.license-detail-grid div:nth-child(4n),.license-feature-grid>div:nth-child(odd){border-right:0}.license-detail-grid div:nth-last-child(-n+2){border-bottom:1px solid var(--border)}.license-detail-grid div:last-child{border-bottom:0}}

/* Inline Loading... in table cells */
.data td.loading-cell {
  text-align: center;
  padding: 24px;
  color: var(--text-faint);
}

/* Operations Replay — restrained telemetry ledger with a chronological spine. */
.replay-filter-card { padding: 22px; margin-bottom: 20px; }
.replay-filter-grid { display: grid; grid-template-columns: 1.35fr repeat(3,1fr) 1.2fr; gap: 16px; }
.replay-filter-grid label { display: grid; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.replay-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.replay-source-options { display: flex; flex-wrap: wrap; gap: 18px; }
.replay-source-options label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
.replay-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.replay-summary div { position: relative; min-height: 112px; padding: 20px; border-right: 1px solid var(--border); }
.replay-summary div:last-child { border-right: 0; }
.replay-summary span { display: block; color: var(--text-faint); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.replay-summary strong { display: block; margin-top: 18px; font-size: 26px; font-weight: var(--fw-medium); }
.replay-summary small { position: absolute; top: 18px; right: 16px; color: var(--text-faint); font-size: 10px; letter-spacing: .12em; }
.replay-timeline-card { padding: 22px; }
.replay-timeline { position: relative; margin-top: 16px; }
.replay-timeline::before { content:""; position:absolute; left:88px; top:12px; bottom:12px; width:1px; background:var(--border-strong); }
.replay-entry { position: relative; display: grid; grid-template-columns: 64px 28px minmax(0,1fr); gap: 14px; min-height: 92px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.replay-entry:last-child { border-bottom: 0; }
.replay-entry time { padding-top: 4px; color: var(--text); font-size: 13px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.replay-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text-secondary); font-weight: var(--fw-semibold); }
.replay-entry.is-problem .replay-marker { border-color: var(--bad); color: var(--bad); }
.replay-entry.is-recovery .replay-marker { border-color: var(--ok); color: var(--ok); }
.replay-entry-body { min-width: 0; }
.replay-entry-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.replay-entry-body p { margin: 7px 0; color: var(--text-secondary); }
.replay-entry-body small { color: var(--text-faint); }
.replay-host { margin-top: 8px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; }
.replay-entry details { margin-top: 9px; }
.replay-entry summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: var(--fw-medium); }
.replay-devices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.replay-devices span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; }
@media(max-width:1000px){.replay-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.replay-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.replay-summary div:nth-child(3){border-right:0}.replay-summary div:nth-child(-n+3){border-bottom:1px solid var(--border)}}
@media(max-width:620px){.replay-filter-grid,.replay-summary{grid-template-columns:1fr}.replay-filter-actions{align-items:stretch;flex-direction:column}.replay-filter-actions .btn-primary{width:100%}.replay-summary div,.replay-summary div:nth-child(3){border-right:0;border-bottom:1px solid var(--border)}.replay-summary div:last-child{border-bottom:0}.replay-timeline::before{left:68px}.replay-entry{grid-template-columns:50px 28px minmax(0,1fr);gap:8px}}

/* Runbook Manager — restrained documentation library and isolated reader. */
.runbook-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) minmax(180px,280px);gap:14px;padding:18px;margin-bottom:18px}.runbook-toolbar label,.runbook-toolbar input,.runbook-toolbar select{margin:0}.runbook-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.runbook-library>.empty-state,.runbook-library>.loading-state{grid-column:1/-1}.runbook-card{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:210px}.runbook-card-main{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:22px;border:0;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}.runbook-card-main:hover{background:var(--surface-hover)}.runbook-card-main:focus-visible{outline:2px solid var(--focus,#2875d9);outline-offset:-3px}.runbook-card-main strong{font-size:19px;line-height:1.3}.runbook-card-main>span:not(.runbook-category){color:var(--text-secondary);line-height:1.5}.runbook-card-main small{margin-top:auto;color:var(--text-tertiary,#8c939c)}.runbook-category{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--neutral-soft,#f1f2f3);color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.runbook-card-actions{display:flex;justify-content:flex-end;gap:5px;padding:10px 14px;border-top:1px solid var(--border)}.btn-link.is-danger{color:var(--danger,#c83232)}.runbook-file-field{display:grid;gap:7px;margin-top:20px}.runbook-file-field input[type="file"]{padding:12px;border:1px solid var(--border);border-radius:10px}.runbook-reader:fullscreen{padding:22px;background:var(--surface-card,#fff);overflow:auto}.runbook-reader-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}.runbook-reader-title h1{margin:3px 0 0;font-size:28px}.runbook-reader-actions{display:flex;gap:8px}.runbook-reader-grid{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 230px)}.runbook-toc{padding:22px 18px 22px 0;border-right:1px solid var(--border);overflow:auto}.runbook-toc::before{display:block;margin-bottom:12px;color:var(--text-tertiary,#8c939c);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;content:'Contents'}.runbook-toc button{display:block;width:100%;padding:7px 8px 7px calc(8px + (var(--toc-level) - 1)*12px);border:0;border-radius:7px;background:transparent;color:var(--text-secondary);text-align:left;cursor:pointer}.runbook-toc button:hover{background:var(--surface-hover);color:var(--text-primary)}.runbook-document{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;padding-left:20px}.runbook-findbar{display:grid;grid-template-columns:minmax(180px,420px) auto 38px 38px;align-items:center;gap:8px;padding:14px 0}.runbook-findbar input{margin:0}.runbook-findbar button{padding:7px}.runbook-document iframe{width:100%;height:calc(100vh - 290px);min-height:560px;border:1px solid var(--border);border-radius:10px;background:#fff}.runbook-reader:fullscreen .runbook-document iframe{height:calc(100vh - 145px)}#runbook-toc-toggle{display:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.runbook-reader-head{grid-template-columns:1fr auto}.runbook-reader-head>#runbook-reader-back{grid-column:1/-1;justify-self:start}.runbook-reader-grid{grid-template-columns:1fr;position:relative}.runbook-toc{display:none;position:absolute;z-index:5;inset:0 auto auto 0;width:min(320px,88vw);max-height:70vh;padding:18px;background:var(--surface-card,#fff);border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.16)}.runbook-toc.is-open{display:block}.runbook-document{padding-left:0}#runbook-toc-toggle{display:inline-flex}}
@media(max-width:620px){.runbook-toolbar{grid-template-columns:1fr}.runbook-library{grid-template-columns:1fr}.runbook-reader-head{grid-template-columns:1fr}.runbook-reader-actions{width:100%}.runbook-reader-actions button{flex:1}.runbook-findbar{grid-template-columns:minmax(0,1fr) auto auto}.runbook-findbar .muted{grid-column:1/-1;grid-row:2}.runbook-document iframe{min-height:480px;height:65vh}}

/* Document & Drawing Controller */
.document-toolbar{display:grid;grid-template-columns:minmax(280px,2fr) repeat(5,minmax(130px,1fr));gap:10px;padding:16px;margin-bottom:16px}.document-toolbar label,.document-toolbar input,.document-toolbar select{margin:0;min-width:0}.document-register-card{padding:0;overflow:hidden}.document-register-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border)}.document-register-heading h2{margin:4px 0 0}.document-table td:first-child strong,.document-table td:first-child small,.document-table td:nth-child(2) small{display:block}.document-table td small{margin-top:4px;color:var(--text-tertiary,#8c939c)}.document-revision-token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700}.table-actions{display:flex;align-items:center;gap:4px;white-space:nowrap}.document-viewer{min-width:0}.document-viewer:fullscreen{padding:18px;background:var(--surface-card,#fff);overflow:auto}.document-viewer-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.document-viewer-identity h1{margin:3px 0;font-size:26px}.document-viewer-identity p{margin:0}.document-viewer-actions,.document-viewer-controls,.document-manage-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.document-viewer-shell{margin-top:16px;border:1px solid var(--border);border-radius:14px;background:#202124;overflow:hidden}.document-canvas-wrap{height:min(68vh,760px);min-height:500px;background:#292a2d}.document-canvas-wrap iframe{width:100%;height:100%;border:0;background:#fff}.document-image-stage{width:100%;height:100%;padding:24px;overflow:auto;text-align:center}.document-image-stage img{display:block;max-width:none;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.28);transition:transform .15s ease}.document-viewer-controls{justify-content:center;padding:10px;background:var(--surface-card,#fff);border-top:1px solid var(--border)}#document-page-controls{display:inline-flex;align-items:center;gap:8px}.document-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:16px;margin-top:16px}.document-detail-card,.document-history-card{padding:22px}.document-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.document-detail-heading h2,.document-history-card h2{margin:4px 0 16px}.document-metadata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}.document-metadata div{padding:12px 14px;border-bottom:1px solid var(--border)}.document-metadata div:nth-child(odd){border-right:1px solid var(--border)}.document-metadata div:last-child{grid-column:1/-1;border-bottom:0;border-right:0}.document-metadata dt{color:var(--text-tertiary,#8c939c);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.document-metadata dd{margin:4px 0 0;color:var(--text-primary);overflow-wrap:anywhere}.document-manage-actions{margin-top:16px}.document-manage-actions label{display:flex;align-items:center;gap:8px;margin:0}.document-manage-actions select{width:auto;margin:0}.document-revision-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:13px 0;border-top:1px solid var(--border)}.document-revision-row:first-of-type{border-top:0}.document-revision-row.is-current{padding-inline:12px;border-radius:9px;background:var(--surface-hover)}.document-revision-row>div:first-child{display:flex;align-items:center;gap:8px}.document-revision-row p,.document-revision-row small{grid-column:1;margin:0;color:var(--text-secondary);overflow-wrap:anywhere}.document-revision-row small{color:var(--text-tertiary,#8c939c)}.document-revision-row>div:last-child{grid-column:2;grid-row:1/4;display:flex;align-items:center}.document-dialog{width:min(920px,calc(100vw - 32px))}.document-revision-dialog{width:min(620px,calc(100vw - 32px))}.document-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.document-form-grid .field{margin:0}.document-form-grid .field-span-2{grid-column:1/-1}.document-dialog::backdrop,.document-revision-dialog::backdrop{background:rgba(18,20,22,.62);backdrop-filter:blur(2px)}
.document-register-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
.document-table{min-width:760px}
@media(max-width:1500px){.document-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.document-search{grid-column:1/-1}.document-detail-grid{grid-template-columns:1fr}}
.document-manage-actions{display:grid;grid-template-columns:minmax(260px,auto) auto minmax(max-content,1fr);align-items:end;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.document-status-action>label{display:block;margin:0 0 6px;color:var(--text-secondary);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.document-status-controls,.document-primary-actions,.document-destructive-actions{display:flex;align-items:center;gap:8px}
.document-status-controls select{width:auto;min-width:150px;margin:0}
.document-status-controls button,.document-primary-actions button,.document-destructive-actions button{height:48px;min-height:48px}
.document-primary-actions,.document-destructive-actions{min-height:48px;align-self:end}
.document-destructive-actions{justify-content:flex-end}
.document-delete-dialog{width:min(520px,calc(100vw - 32px))}
.danger-confirmation-copy{margin:18px 0;padding:16px;border-left:3px solid var(--bad);background:var(--surface-muted,#f7f7f6)}
.danger-confirmation-copy strong{display:block;margin-bottom:6px}
.danger-confirmation-copy p{margin:0;color:var(--text-secondary)}
@media(max-width:760px){.document-toolbar{grid-template-columns:1fr 1fr}.document-search{grid-column:1/-1}.document-viewer-header{grid-template-columns:1fr}.document-viewer-actions{width:100%}.document-viewer-actions>*{flex:1}.document-canvas-wrap{min-height:420px;height:60vh}.document-metadata{grid-template-columns:1fr}.document-metadata div:nth-child(odd){border-right:0}.document-form-grid{grid-template-columns:1fr}.document-form-grid .field-span-2{grid-column:auto}.document-manage-actions{grid-template-columns:1fr;align-items:stretch}.document-status-controls{display:grid;grid-template-columns:minmax(0,1fr) auto}.document-status-controls select{width:100%}.document-primary-actions,.document-destructive-actions{justify-content:stretch}.document-primary-actions>*,.document-destructive-actions>*{width:100%}.document-revision-row{grid-template-columns:1fr}.document-revision-row>div:last-child{grid-column:1;grid-row:auto;justify-content:flex-start}}
@media(max-width:480px){.document-toolbar{grid-template-columns:1fr}.document-toolbar>*{grid-column:1}.document-viewer-controls{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.document-viewer-controls>*{flex:0 0 auto}}
@media(prefers-reduced-motion:reduce){.document-image-stage img{transition:none}}

/* Contacts & Escalation — follows the portal ledger/card system. */
.contact-tabs{display:inline-flex;gap:4px;margin-bottom:22px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--neutral-soft,#f4f5f6)}.contact-tabs button{min-height:44px;padding:10px 20px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font:inherit;font-weight:600;cursor:pointer}.contact-tabs button.is-active{background:var(--text-primary,#19191c);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}.contact-tabs button:focus-visible{outline:2px solid var(--focus,#2875d9);outline-offset:2px}
.contact-toolbar{display:grid;grid-template-columns:minmax(280px,2fr) repeat(4,minmax(140px,1fr));gap:10px;padding:16px;margin-bottom:16px}.contact-toolbar input,.contact-toolbar select{margin:0}.contact-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}.contact-directory>.empty-state,.contact-directory>.loading-state{grid-column:1/-1}.contact-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px;cursor:pointer}.contact-card>.btn{grid-column:3}.contact-card-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.contact-card-copy strong{font-size:17px}.contact-card-copy span,.contact-card-copy small{color:var(--text-secondary);overflow-wrap:anywhere}.contact-card-copy small{color:var(--text-tertiary,#8c939c)}
.contact-avatar{width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--neutral-soft,#eff1f3)}.contact-initials{display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);font-weight:750;letter-spacing:.04em}.contact-avatar.is-small{width:38px;height:38px;border-radius:10px}.contact-avatar.is-large{width:84px;height:84px;border-radius:20px;font-size:24px}.contact-section-heading{margin:8px 0 16px}.organization-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:16px}.organization-list{display:grid;align-content:start;gap:10px}.organization-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px;cursor:pointer}.organization-card h3{margin:4px 0}.organization-card p{margin:0;color:var(--text-secondary)}.organization-chart-panel{padding:20px;min-width:0}.organization-chart-panel select{width:auto;min-width:200px;margin:0}.organization-chart{min-height:280px;margin-top:18px;padding:16px;overflow-x:auto}.organization-chart ul{display:flex;justify-content:center;gap:18px;min-width:max-content;margin:0;padding:22px 0 0;list-style:none}.organization-chart li{position:relative;display:flex;align-items:center;flex-direction:column}.organization-chart li>ul{position:relative}.organization-chart li>ul::before{position:absolute;top:8px;left:50%;width:1px;height:14px;background:var(--border);content:''}.org-node{display:flex;align-items:center;gap:10px;min-width:200px;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-card,#fff);color:var(--text-primary);text-align:left;cursor:pointer}.org-node:hover{border-color:var(--text-tertiary)}.org-node span{display:flex;flex-direction:column}.org-node small{color:var(--text-secondary)}
.escalation-directory{display:grid;gap:14px}.escalation-group{padding:22px}.escalation-group h3{margin:4px 0 16px}.escalation-levels article{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border)}.escalation-level{display:inline-flex;align-items:center;justify-content:center;width:44px;height:36px;border-radius:9px;background:var(--neutral-soft);font-size:13px}.escalation-levels article>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.escalation-levels span,.escalation-levels small{color:var(--text-secondary)}.contact-dialog{width:min(900px,calc(100vw - 32px))}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}.contact-form-grid .field,.contact-form-grid .check-row{margin:0}.contact-form-grid .field-span-2{grid-column:1/-1}.contact-profile-dialog{width:min(720px,calc(100vw - 32px));padding:26px}.contact-profile-head{display:flex;align-items:center;gap:20px}.contact-profile-head h2{margin:4px 0}.contact-profile-head p{margin:0 0 3px;color:var(--text-secondary)}.contact-profile-grid{display:grid;grid-template-columns:1fr 1fr;margin:22px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}.contact-profile-grid div{padding:12px 14px;border-bottom:1px solid var(--border)}.contact-profile-grid div:nth-child(odd){border-right:1px solid var(--border)}.contact-profile-grid dt{color:var(--text-tertiary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.contact-profile-grid dd{margin:4px 0 0;overflow-wrap:anywhere}
@media(max-width:1100px){.contact-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-search{grid-column:1/-1}.organization-grid{grid-template-columns:1fr}}
@media(max-width:680px){.contact-tabs{display:grid;grid-template-columns:1fr;width:100%}.contact-toolbar,.contact-form-grid,.contact-profile-grid{grid-template-columns:1fr}.contact-toolbar>*,.contact-form-grid .field-span-2{grid-column:1}.contact-directory{grid-template-columns:1fr}.contact-card{grid-template-columns:auto minmax(0,1fr)}.contact-card>.badge{grid-column:2}.contact-card>.btn{grid-column:1/-1;width:100%}.contact-profile-grid div:nth-child(odd){border-right:0}.contact-profile-head{align-items:flex-start}.escalation-levels article{grid-template-columns:48px minmax(0,1fr)}.escalation-levels .table-actions{grid-column:1/-1;justify-content:flex-end}}

/* AI-driven Reporting Suite — evidence ledger, editor and approval workflow. */
.report-suite-ledger,.report-editor{border:1px solid var(--border);border-radius:16px;background:var(--surface-card,#fff);overflow:hidden}.report-toolbar{display:grid;grid-template-columns:minmax(180px,280px) minmax(180px,240px) auto;align-items:end;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}.report-toolbar label{display:grid;gap:7px;margin:0;color:var(--text-secondary);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.report-toolbar select{margin:0}.report-toolbar button{justify-self:start}.report-register-notice{padding:14px 22px;border-bottom:1px solid var(--border)}.report-register{display:grid}.report-register-row{display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(180px,1fr) 130px 180px;align-items:center;gap:18px;width:100%;min-height:86px;padding:16px 22px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}.report-register-row:last-child{border-bottom:0}.report-register-row:hover{background:var(--surface-hover)}.report-register-row:focus-visible{outline:2px solid var(--focus,#2875d9);outline-offset:-3px}.report-register-row>span{display:flex;min-width:0;flex-direction:column;gap:5px}.report-register-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-register-row small{color:var(--text-tertiary,#8c939c)}.report-register-row>.badge{display:inline-flex;align-items:center;justify-content:center;justify-self:start}.report-empty{display:flex;min-height:280px;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-secondary);text-align:center}.report-editor-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px;border-bottom:1px solid var(--border)}.report-editor-header h2{margin:4px 0 0}.report-editor-notice{min-height:44px;padding:12px 22px;border-bottom:1px solid var(--border)}.report-editor-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;min-height:600px}.report-section-nav{padding:14px;border-right:1px solid var(--border)}.report-section-nav button{display:flex;width:100%;flex-direction:column;gap:4px;padding:11px 12px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font:inherit;text-align:left;cursor:pointer}.report-section-nav button:hover,.report-section-nav button.is-active{background:var(--surface-hover);color:var(--text-primary)}.report-section-nav button.is-active{box-shadow:inset 3px 0 0 var(--text-primary)}.report-section-nav small{color:var(--text-tertiary);font-size:10px;letter-spacing:.06em}.report-section-editor{min-width:0;padding:24px;border-right:1px solid var(--border)}.report-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.report-section-heading h3{margin:5px 0 18px;font-size:24px}.report-section-heading>span{color:var(--text-tertiary);font-size:12px}.report-section-editor textarea{width:100%;min-height:360px;margin:0;padding:16px;resize:vertical;font-family:inherit;line-height:1.6}.report-section-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.report-ai-candidate{margin-top:16px;padding:17px;border:1px solid var(--border);border-left:3px solid var(--warning,#b97200);border-radius:10px;background:var(--warning-soft,#fff8ea)}.report-ai-candidate p{max-height:260px;overflow:auto;line-height:1.55}.report-evidence-panel{padding:24px;background:var(--surface-subtle,#fafafa)}.report-evidence-panel h3{margin-top:0}.report-evidence-panel p{color:var(--text-secondary);line-height:1.55}.report-evidence-panel dl{display:grid;margin-top:22px}.report-evidence-panel dl div{padding:11px 0;border-top:1px solid var(--border)}.report-evidence-panel dt{color:var(--text-tertiary);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.report-evidence-panel dd{margin:5px 0 0;overflow-wrap:anywhere}.report-workflow-actions{display:flex;justify-content:flex-end;gap:8px;padding:17px 22px;border-top:1px solid var(--border)}.report-ai-settings,.report-legacy-preview{margin-top:18px}.report-ai-settings summary,.report-legacy-preview summary{cursor:pointer;font-weight:700}.report-ai-settings .settings-grid{margin-top:20px}.report-create-dialog{width:min(820px,calc(100vw - 32px))}.report-create-dialog::backdrop{background:rgba(18,20,22,.62);backdrop-filter:blur(2px)}
@media(max-width:1200px){.report-register-row{grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr) 120px}.report-register-row>span:last-child{display:none}.report-editor-layout{grid-template-columns:220px minmax(0,1fr)}.report-evidence-panel{grid-column:1/-1;border-top:1px solid var(--border)}.report-evidence-panel dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.report-evidence-panel dl div{border-top:0}}
@media(max-width:760px){.report-toolbar,.report-register-row,.report-editor-header,.report-editor-layout{grid-template-columns:1fr}.report-register-row{gap:10px}.report-register-row>span:last-child{display:flex}.report-section-nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border)}.report-section-nav button{flex:0 0 190px}.report-section-editor{border-right:0}.report-evidence-panel dl{grid-template-columns:1fr 1fr}.report-workflow-actions,.report-section-actions{align-items:stretch;flex-direction:column}.report-workflow-actions button,.report-section-actions button{width:100%}}
/* AI usage governance uses the same quiet ledger language as integrations. */

/* Incident Management — one restrained operational ledger and workspace. */
.incident-ledger,.incident-workspace{border:1px solid var(--border);border-radius:14px;background:var(--surface-card);overflow:hidden}.incident-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) 190px 190px auto;gap:10px;padding:18px 20px;border-bottom:1px solid var(--border)}.incident-toolbar input,.incident-toolbar select{margin:0}.incident-table{min-width:860px}.incident-row{cursor:pointer}.incident-row:hover{background:var(--surface-hover)}.incident-row:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}.incident-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;color:var(--text-secondary)}.incident-pagination>div{display:flex;gap:8px}.incident-severity-high,.incident-severity-disaster{color:var(--bad);background:var(--bad-soft)}.incident-severity-average{color:var(--warning);background:var(--warning-soft)}.incident-workspace-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:18px;padding:20px 22px;border-bottom:1px solid var(--border)}.incident-workspace-head h2{margin:5px 0}.incident-workspace-head p{margin:0}.incident-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.incident-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.incident-pane{min-width:0;padding:22px;border-bottom:1px solid var(--border)}.incident-pane:nth-child(odd):not(.incident-pane-wide){border-right:1px solid var(--border)}.incident-pane-wide{grid-column:1/-1;border-bottom:0}.incident-pane-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.incident-pane-heading h3{margin:5px 0 0}.incident-summary-grid,.incident-rca-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.incident-summary-grid label,.incident-rca-grid label,.incident-investigation-grid label{display:grid;gap:7px;margin:0;color:var(--text-secondary);font-size:12px;font-weight:var(--fw-semibold)}.incident-summary-grid .field-span-2,.incident-rca-grid .field-span-2{grid-column:1/-1}.incident-summary-grid select,.incident-summary-grid textarea,.incident-rca-grid select,.incident-rca-grid textarea{margin:0}.incident-evidence-list{display:grid;border:1px solid var(--border);border-radius:10px;overflow:hidden}.incident-evidence-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}.incident-evidence-list article:last-child{border-bottom:0}.incident-evidence-list article>div{display:flex;min-width:0;flex-direction:column;gap:3px}.incident-evidence-list small{color:var(--text-tertiary);overflow-wrap:anywhere}.incident-timeline{display:grid;gap:0;margin:18px 0 0;padding:0;list-style:none}.incident-timeline li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--border)}.incident-timeline time{color:var(--text-tertiary);font-size:12px}.incident-timeline li>div{display:flex;min-width:0;flex-direction:column;gap:4px}.incident-timeline span{color:var(--text-secondary);font-size:12px}.incident-investigation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}.incident-investigation-grid label{padding:14px;border:1px solid var(--border);border-radius:10px}.incident-investigation-grid label:last-child{grid-column:1/-1}.incident-investigation-grid label>span{color:var(--text-primary);font-size:14px}.incident-investigation-grid select,.incident-investigation-grid textarea{margin:0}.incident-review-state{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--text-secondary)}.incident-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.incident-form-row label{margin:0}
@media(max-width:900px){.incident-toolbar{grid-template-columns:1fr 1fr}.incident-toolbar input{grid-column:1/-1}.incident-workspace-head{grid-template-columns:1fr}.incident-workspace-head>.btn-link{justify-self:start}.incident-actions{justify-content:flex-start}.incident-workspace-grid{grid-template-columns:1fr}.incident-pane:nth-child(odd):not(.incident-pane-wide){border-right:0}.incident-pane-wide{grid-column:1}.incident-summary-grid,.incident-rca-grid,.incident-investigation-grid{grid-template-columns:1fr}.incident-summary-grid .field-span-2,.incident-rca-grid .field-span-2,.incident-investigation-grid label:last-child{grid-column:1}.incident-timeline li{grid-template-columns:1fr;gap:5px}}
@media(max-width:560px){.incident-toolbar,.incident-form-row{grid-template-columns:1fr}.incident-toolbar input{grid-column:1}.incident-toolbar button{width:100%}.incident-workspace-head,.incident-pane{padding:17px}.incident-pane-heading{align-items:stretch;flex-direction:column}.incident-pane-heading .incident-actions{display:grid}.incident-pane-heading .incident-actions button{width:100%}.incident-pagination{align-items:stretch;flex-direction:column}.incident-pagination>div button{flex:1}}

.ai-usage-ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 24px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-card,#fff)}
.ai-usage-ledger>div{display:grid;gap:9px;min-height:108px;padding:20px;border-right:1px solid var(--border)}
.ai-usage-ledger>div:last-child{border-right:0}.ai-usage-ledger span{color:var(--text-tertiary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ai-usage-ledger strong{font-size:25px;font-weight:650;letter-spacing:-.025em}
.ai-policy-form{display:grid;gap:18px;padding-top:22px;border-top:1px solid var(--border)}.ai-policy-enabled{margin:0}.ai-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ai-policy-grid label,.ai-policy-form>label{display:grid;gap:7px;margin:0}.ai-policy-grid small,.ai-policy-form small{color:var(--text-tertiary);font-weight:400;letter-spacing:0;text-transform:none}.ai-policy-form .settings-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ai-policy-form .settings-actions>span{margin-right:auto}
.ai-credit-form{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(140px,.55fr) minmax(240px,1fr) auto;align-items:end;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}.ai-credit-form h4{margin:0 0 5px}.ai-credit-form p{margin:0}.ai-credit-form label{display:grid;gap:7px;margin:0}.ai-credit-form>span{grid-column:1/-1}.ai-usage-details{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}.ai-usage-details summary{cursor:pointer;font-weight:650}.ai-usage-breakdown{display:grid;margin-top:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden}.ai-usage-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid var(--border)}.ai-usage-breakdown>div:last-child{border-bottom:0}.ai-usage-breakdown span{color:var(--text-secondary);text-transform:capitalize}
@media(max-width:900px){.ai-usage-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-usage-ledger>div:nth-child(2){border-right:0}.ai-usage-ledger>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.ai-policy-grid{grid-template-columns:1fr}.ai-credit-form{grid-template-columns:1fr}.ai-policy-form .settings-actions{align-items:stretch;flex-direction:column}.ai-policy-form .settings-actions>span{margin:0}.ai-policy-form .settings-actions button{width:100%}}
@media(max-width:520px){.ai-usage-ledger{grid-template-columns:1fr}.ai-usage-ledger>div{min-height:88px;border-right:0;border-bottom:1px solid var(--border)}.ai-usage-ledger>div:last-child{border-bottom:0}}
.ai-feature-policies{display:grid;border:1px solid var(--border);border-radius:10px;overflow:hidden}.ai-feature-row{display:grid;grid-template-columns:minmax(220px,1fr) 140px 150px;align-items:center;gap:14px;padding:13px 15px;border-bottom:1px solid var(--border)}.ai-feature-row:last-child{border-bottom:0}.ai-feature-row strong{font-size:14px}.ai-feature-row label{margin:0}@media(max-width:760px){.ai-feature-row{grid-template-columns:1fr}.ai-feature-row label{width:100%}}

/* Incident archive filter extends the existing operational toolbar grid. */
@media(min-width:901px){.incident-toolbar{grid-template-columns:minmax(280px,1fr) 170px 170px 170px auto}}
.report-toolbar{grid-template-columns:minmax(180px,280px) minmax(180px,240px) minmax(180px,220px) auto}
@media(max-width:760px){.report-toolbar{grid-template-columns:1fr}}

/* Shared form-control standard: page-specific editors keep their layout and width. */
.report-toolbar label,
.ai-policy-grid label,
.ai-policy-form > label,
.ai-credit-form label { gap: 8px; }
.report-section-editor textarea {
  padding: 12px var(--form-control-padding-inline);
  line-height: 1.6;
}


/* ============================================================ */
/* Monitoring Dashboard V2 — interactive states                  */
/* ============================================================ */
.monitoring-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.monitoring-refresh-button{min-height:34px}
.monitoring-clickable{cursor:pointer;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .08s ease}
.monitoring-clickable:hover{background:#fff;border-color:var(--border-strong);box-shadow:0 4px 14px rgba(17,24,39,.07)}
.monitoring-clickable:active{transform:translateY(1px)}
.monitoring-clickable:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;z-index:1}
.monitoring-event-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:16px 0 0}
.monitoring-filter-tabs{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--border);border-radius:10px;background:#F8F8F6}
.monitoring-filter-tab{min-height:32px;padding:6px 10px;border:0;border-radius:7px;color:var(--text-secondary);background:transparent;font-size:12px;box-shadow:none}
.monitoring-filter-tab:hover{background:var(--surface-hover);color:var(--text-primary)}
.monitoring-filter-tab.is-active{background:var(--primary);color:var(--text-on-primary)}
.monitoring-filter-tab span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:5px;padding:0 6px;border-radius:999px;background:rgba(127,127,127,.14);font-size:10px;font-variant-numeric:tabular-nums}
.monitoring-filter-tab.is-active span{background:rgba(255,255,255,.16)}
.monitoring-severity-filter{display:block;margin:0;max-width:170px}
.monitoring-severity-filter select{margin:0;min-height:34px;height:34px;font-size:12px}
.monitoring-filter-summary{margin:10px 0 -2px;color:var(--text-faint);font-size:11px}
.monitoring-event-row{cursor:pointer;transition:background .14s ease}
.monitoring-event-row:hover td,.monitoring-event-row:focus td,.monitoring-event-row.is-expanded td{background:#F8FAFC}
.monitoring-event-row:focus{outline:none}
.monitoring-event-row:focus td:first-child{box-shadow:inset 3px 0 0 var(--focus)}
.monitoring-row-chevron{display:inline-block;margin-left:9px;color:var(--text-faint);font-size:18px;line-height:1;vertical-align:-2px;transition:transform .15s ease}
.monitoring-event-row.is-expanded .monitoring-row-chevron{transform:rotate(90deg)}
.monitoring-host-link{display:block;min-height:0!important;height:auto!important;margin:3px 0 0;padding:0;border:0;background:transparent;color:var(--info);font-size:10px;font-weight:var(--fw-medium);box-shadow:none;text-align:left}
.monitoring-host-link:hover{background:transparent;color:#1D4ED8;text-decoration:underline}
.monitoring-event-detail-row td{padding:0!important;background:#FAFBFC!important;border-bottom:1px solid var(--border)}
.monitoring-event-detail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px dashed var(--border);padding:14px 16px 16px}
.monitoring-event-detail>div{min-width:0;padding:8px 14px;border-right:1px solid var(--border)}
.monitoring-event-detail>div:nth-child(4){border-right:0}
.monitoring-event-detail span{display:block;margin-bottom:4px;color:var(--text-faint);font-size:9px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase}
.monitoring-event-detail strong{display:block;color:var(--text-primary);font-size:12px;overflow-wrap:anywhere}
.monitoring-event-detail-wide{grid-column:1/4;border-top:1px solid var(--border);margin-top:5px;padding-top:13px!important}
.monitoring-event-detail-actions{grid-column:4;display:flex!important;align-items:flex-end;justify-content:flex-end;border-top:1px solid var(--border);margin-top:5px;padding-top:13px!important;border-right:0!important}
.monitoring-timeline-item{width:100%;display:grid;grid-template-columns:72px 14px minmax(0,1fr);align-items:start;gap:8px;padding:10px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;text-align:left;white-space:normal;min-height:0;color:inherit}
.monitoring-timeline-item:last-child{border-bottom:0}
.monitoring-timeline-item:hover{background:#FAFBFC}
.monitoring-timeline-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.monitoring-timeline-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.monitoring-timeline-copy strong{font-size:11px;color:var(--text-primary);overflow-wrap:anywhere}
.monitoring-timeline-copy>span:not(.monitoring-timeline-status){font-size:10px;color:var(--text-secondary);overflow-wrap:anywhere}
.monitoring-timeline-status{width:max-content;max-width:100%;margin-top:3px;font-size:9px;font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.monitoring-timeline-dot{width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--neutral)}
.monitoring-timeline-item.is-problem .monitoring-timeline-dot{background:var(--bad)}
.monitoring-timeline-item.is-recovered .monitoring-timeline-dot{background:var(--ok)}
.monitoring-timeline-time{font-size:9px;color:var(--text-faint);line-height:1.4}
@media(max-width:760px){
  .monitoring-page-header,.monitoring-header-actions{align-items:flex-start}
  .monitoring-header-actions{width:100%;justify-content:space-between}
  .monitoring-event-controls{align-items:stretch;flex-direction:column}
  .monitoring-filter-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .monitoring-filter-tab{width:100%;padding-inline:6px}
  .monitoring-severity-filter{max-width:none;width:100%}
  .monitoring-event-detail{grid-template-columns:1fr 1fr}
  .monitoring-event-detail>div:nth-child(2){border-right:0}
  .monitoring-event-detail>div:nth-child(3),.monitoring-event-detail>div:nth-child(4){border-top:1px solid var(--border)}
  .monitoring-event-detail-wide{grid-column:1/-1!important;border-right:0!important}
  .monitoring-event-detail-actions{grid-column:1/-1!important;justify-content:flex-start}
}

/* ============================================================ */
/* Monitoring Dashboard V3 — draggable / resizable widget grid */
/* ============================================================ */
.monitoring-layout-hint{margin:-4px 0 14px;padding:9px 12px;border:1px dashed var(--border-strong);border-radius:9px;background:#F8FAFC;color:var(--text-secondary);font-size:11px}
.monitoring-widget-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:18px;align-items:stretch;margin-bottom:18px}
.monitoring-widget{position:relative;grid-column:span var(--widget-span,6);min-width:0;overflow:hidden;transition:box-shadow .16s ease,border-color .16s ease,opacity .12s ease}
.monitoring-widget[data-widget-id="problems"]{--widget-span:8}
.monitoring-widget[data-widget-id="activity"]{--widget-span:4}
.monitoring-widget[data-widget-id="summary"]{--widget-span:7}
.monitoring-widget[data-widget-id="health"]{--widget-span:5}
.monitoring-widget-drag,.monitoring-widget-resize{display:none}
.monitoring-overview.is-layout-editing .monitoring-widget{border-style:dashed;border-color:#8BB8FF;box-shadow:0 0 0 1px rgba(37,99,235,.06);user-select:none;overflow:visible}
.monitoring-overview.is-layout-editing .monitoring-widget:hover{border-color:#2563EB;box-shadow:0 5px 18px rgba(37,99,235,.10)}
.monitoring-overview.is-layout-editing .monitoring-widget-drag{display:grid;position:absolute;z-index:20;top:-15px;right:12px;width:30px;height:30px;min-height:0;padding:0;place-items:center;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.98);color:var(--text-secondary);font-size:17px;letter-spacing:-3px;cursor:grab;box-shadow:0 2px 8px rgba(15,23,42,.10)}
.monitoring-overview.is-layout-editing .monitoring-widget-drag:active{cursor:grabbing}
.monitoring-overview.is-layout-editing .monitoring-widget-resize{display:block;position:absolute;z-index:9;right:4px;bottom:4px;width:22px;height:22px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 48%,#64748B 49% 56%,transparent 57% 66%,#64748B 67% 74%,transparent 75%);opacity:.85}
.monitoring-widget.is-dragging{opacity:.45}
.monitoring-widget.is-drag-over{outline:2px dashed #2563EB;outline-offset:4px}
.monitoring-overview.is-layout-editing .monitoring-events-table,.monitoring-overview.is-layout-editing .monitoring-filter-tabs,.monitoring-overview.is-layout-editing .monitoring-severity-filter{user-select:auto}
#monitoring-layout-save:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:1100px){.monitoring-widget{grid-column:span 12!important}}
@media(max-width:760px){#monitoring-layout-edit,#monitoring-layout-save,#monitoring-layout-reset{display:none}.monitoring-widget-grid{grid-template-columns:1fr;gap:14px}.monitoring-widget{grid-column:1!important;min-height:0!important}}


/* ============================================================ */
/* Monitoring Dashboard V3.1 — Zabbix-style current-event timeline */
/* Frontend-only: preserves filters, row expansion, View device and V3 layout. */
/* ============================================================ */
.monitoring-problems-card .monitoring-events-table{
  border-collapse:separate;
  border-spacing:0;
}
.monitoring-problems-card .monitoring-events-table th{
  background:var(--surface-card);
  color:var(--text-faint);
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding-top:13px;
  padding-bottom:13px;
}
.monitoring-problems-card .monitoring-event-row{
  position:relative;
}
.monitoring-problems-card .monitoring-event-row td{
  position:relative;
  padding-top:15px;
  padding-bottom:15px;
  vertical-align:top;
  background:var(--surface-card);
}
.monitoring-problems-card .monitoring-event-row td:first-child{
  width:190px;
  padding-right:36px;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Timeline rail sits at the right edge of the Time column. */
.monitoring-problems-card .monitoring-event-row td:first-child::before{
  content:"";
  position:absolute;
  top:0;
  right:15px;
  bottom:0;
  width:2px;
  background:#D7E8F4;
}
.monitoring-problems-card .monitoring-event-row td:first-child::after{
  content:"";
  position:absolute;
  z-index:2;
  top:22px;
  right:11px;
  width:10px;
  height:10px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--bad);
  box-shadow:0 0 0 1px #D7E8F4;
}
.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td:first-child::after{
  background:var(--ok);
}
.monitoring-problems-card .monitoring-event-row[data-severity="0"] td:first-child::after,
.monitoring-problems-card .monitoring-event-row[data-severity="1"] td:first-child::after{
  background:var(--info);
}
.monitoring-problems-card .monitoring-event-row[data-severity="2"] td:first-child::after{
  background:#D6A100;
}
.monitoring-problems-card .monitoring-event-row[data-severity="3"] td:first-child::after{
  background:#F59E0B;
}
.monitoring-problems-card .monitoring-event-row[data-severity="4"] td:first-child::after,
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td:first-child::after{
  background:var(--bad);
}
.monitoring-problems-card .monitoring-event-row td:nth-child(2) strong{
  font-size:13px;
}
.monitoring-problems-card .monitoring-event-row td:nth-child(3){
  font-weight:var(--fw-medium);
  color:var(--text-primary);
}
.monitoring-problems-card .monitoring-event-row[data-severity="2"] td:nth-child(3){
  background:#FFFBEB;
}
.monitoring-problems-card .monitoring-event-row[data-severity="3"] td:nth-child(3){
  background:#FFF7ED;
}
.monitoring-problems-card .monitoring-event-row[data-severity="4"] td:nth-child(3),
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td:nth-child(3){
  background:#FEF2F2;
}
.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td:nth-child(3){
  background:#F0FDF4;
}
.monitoring-status-cell{
  min-width:130px;
  white-space:nowrap;
}
.monitoring-live-duration{
  display:block;
  margin-top:6px;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
}
.monitoring-live-duration::before{
  content:"Duration ";
  color:var(--text-faint);
  font-weight:var(--fw-regular);
}
.monitoring-problems-card .monitoring-event-row:hover td{
  background:#F8FAFC;
}
.monitoring-problems-card .monitoring-event-row:hover td:nth-child(3){
  filter:brightness(.99);
}
.monitoring-problems-card .monitoring-event-row.is-expanded td:first-child{
  box-shadow:none;
}
.monitoring-problems-card .monitoring-event-detail-row td{
  background:#FAFBFC!important;
}
@media(max-width:900px){
  .monitoring-problems-card .monitoring-event-row td:first-child{
    width:160px;
  }
}


/* ============================================================ */
/* Monitoring Dashboard V3.2 — Clean enterprise event list       */
/* Removes timeline rail/dots; keeps filters, live duration,      */
/* row expansion, View device, drag/resize and existing APIs.     */
/* ============================================================ */

.monitoring-problems-card .monitoring-events-table{
  border-collapse:separate;
  border-spacing:0 8px;
  table-layout:fixed;
}

.monitoring-problems-card .monitoring-events-table thead th{
  background:transparent;
  border-bottom:0;
  padding:8px 16px 6px;
  color:var(--text-faint);
  font-size:10px;
  font-weight:var(--fw-bold);
  letter-spacing:.11em;
  text-transform:uppercase;
}

.monitoring-problems-card .monitoring-events-table thead th:nth-child(1){width:15%;}
.monitoring-problems-card .monitoring-events-table thead th:nth-child(2){width:17%;}
.monitoring-problems-card .monitoring-events-table thead th:nth-child(3){width:35%;}
.monitoring-problems-card .monitoring-events-table thead th:nth-child(4){width:11%;}
.monitoring-problems-card .monitoring-events-table thead th:nth-child(5){width:10%;}
.monitoring-problems-card .monitoring-events-table thead th:nth-child(6){width:12%;}

/* Explicitly remove the previous V3.1 timeline treatment. */
.monitoring-problems-card .monitoring-event-row td:first-child::before,
.monitoring-problems-card .monitoring-event-row td:first-child::after{
  content:none!important;
  display:none!important;
}

.monitoring-problems-card .monitoring-event-row td{
  position:relative;
  padding:16px;
  vertical-align:middle;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  background:#fff;
  transition:background .15s ease,border-color .15s ease;
}

.monitoring-problems-card .monitoring-event-row td:first-child{
  width:auto;
  padding-right:16px;
  border-left:1px solid var(--border-subtle);
  border-radius:10px 0 0 10px;
  color:var(--text-secondary);
  white-space:normal;
  font-variant-numeric:tabular-nums;
}

.monitoring-problems-card .monitoring-event-row td:last-child{
  border-right:1px solid var(--border-subtle);
  border-radius:0 10px 10px 0;
}

/* Gentle severity wash across the complete row, not a decorative timeline. */
.monitoring-problems-card .monitoring-event-row[data-severity="2"] td{
  background:#FFFCF3;
}
.monitoring-problems-card .monitoring-event-row[data-severity="3"] td{
  background:#FFF9F2;
}
.monitoring-problems-card .monitoring-event-row[data-severity="4"] td,
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td{
  background:#FFF7F7;
}
.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td{
  background:#F7FCF8;
}

/* Keep the event message as the visual anchor. */
.monitoring-problems-card .monitoring-event-row td:nth-child(3){
  color:var(--text-primary);
  font-weight:var(--fw-semibold);
  line-height:1.35;
}
.monitoring-problems-card .monitoring-event-row td:nth-child(2) strong{
  display:block;
  color:var(--text-primary);
  font-size:13px;
  line-height:1.25;
}
.monitoring-problems-card .monitoring-device-link{
  margin-top:5px;
  font-size:11px;
}

/* Neutralize older per-event-cell severity fills. */
.monitoring-problems-card .monitoring-event-row[data-severity="2"] td:nth-child(3),
.monitoring-problems-card .monitoring-event-row[data-severity="3"] td:nth-child(3),
.monitoring-problems-card .monitoring-event-row[data-severity="4"] td:nth-child(3),
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td:nth-child(3),
.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td:nth-child(3){
  background:inherit;
}

.monitoring-status-cell{
  min-width:0;
  white-space:nowrap;
}
.monitoring-status-cell .monitoring-row-chevron{
  margin-left:8px;
}

.monitoring-duration-cell{
  color:var(--text-secondary);
  font-size:12px;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.monitoring-live-duration{
  display:inline;
  margin:0;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.monitoring-live-duration::before{
  content:"";
}

.monitoring-problems-card .monitoring-event-row:hover td{
  background:#F8FAFC!important;
  border-color:#D8DEE5;
}
.monitoring-problems-card .monitoring-event-row:focus-visible td{
  box-shadow:none;
  border-color:#C6CED8;
}
.monitoring-problems-card .monitoring-event-row.is-expanded td{
  background:#F8FAFC!important;
}

.monitoring-problems-card .monitoring-event-detail-row td{
  background:#FAFBFC!important;
  border:1px solid var(--border-subtle);
  border-radius:10px;
}

@media(max-width:900px){
  .monitoring-problems-card .monitoring-events-table{
    min-width:900px;
    table-layout:auto;
  }
  .monitoring-problems-card .monitoring-event-row td:first-child{
    width:auto;
  }
}


/* ============================================================ */
/* Monitoring Dashboard V3.2.1 — Event severity accent line      */
/* Adds a slim severity-colored line on the EVENT cell only.      */
/* ============================================================ */
.monitoring-problems-card .monitoring-event-row td:nth-child(3){
  position:relative;
  padding-left:22px;
}

.monitoring-problems-card .monitoring-event-row td:nth-child(3)::before{
  content:"";
  position:absolute;
  left:8px;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:var(--neutral);
}

.monitoring-problems-card .monitoring-event-row[data-severity="0"] td:nth-child(3)::before,
.monitoring-problems-card .monitoring-event-row[data-severity="1"] td:nth-child(3)::before{
  background:var(--info);
}

.monitoring-problems-card .monitoring-event-row[data-severity="2"] td:nth-child(3)::before{
  background:#D6A100;
}

.monitoring-problems-card .monitoring-event-row[data-severity="3"] td:nth-child(3)::before{
  background:#F59E0B;
}

.monitoring-problems-card .monitoring-event-row[data-severity="4"] td:nth-child(3)::before,
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td:nth-child(3)::before{
  background:var(--bad);
}

.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td:nth-child(3)::before{
  background:var(--ok);
}


/* ============================================================ */
/* Monitoring Dashboard V3.2.2 — Full-row severity tint          */
/* Entire event row uses one consistent severity color.           */
/* Removes the EVENT-only accent line.                            */
/* ============================================================ */

/* Remove the event accent line completely. */
.monitoring-problems-card .monitoring-event-row td:nth-child(3)::before{
  content:none !important;
  display:none !important;
}

/* Restore normal event-cell padding after removing the line. */
.monitoring-problems-card .monitoring-event-row td:nth-child(3){
  padding-left:16px !important;
}

/* One consistent tint across ALL columns in the row. */
.monitoring-problems-card .monitoring-event-row[data-severity="0"] td,
.monitoring-problems-card .monitoring-event-row[data-severity="1"] td{
  background:#F7FAFF !important;
}

.monitoring-problems-card .monitoring-event-row[data-severity="2"] td{
  background:#FFF9E8 !important;
}

.monitoring-problems-card .monitoring-event-row[data-severity="3"] td{
  background:#FFF5E8 !important;
}

.monitoring-problems-card .monitoring-event-row[data-severity="4"] td,
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td{
  background:#FFF3F3 !important;
}

.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td{
  background:#F2FBF5 !important;
}

/* Keep hover subtle without breaking the severity color language. */
.monitoring-problems-card .monitoring-event-row:hover td{
  filter:brightness(.985);
}

/* Ensure expanded rows still retain a unified look. */
.monitoring-problems-card .monitoring-event-row.is-expanded td{
  filter:brightness(.985);
}


/* ============================================================ */
/* V3.2.3 — Remove event-row left accent line completely         */
/* ============================================================ */
.monitoring-problems-card .monitoring-event-row,
.monitoring-problems-card .monitoring-event-row:hover,
.monitoring-problems-card .monitoring-event-row:focus,
.monitoring-problems-card .monitoring-event-row:focus-visible,
.monitoring-problems-card .monitoring-event-row.is-expanded{
  border-left:0 !important;
  box-shadow:none !important;
  outline:none !important;
}

.monitoring-problems-card .monitoring-event-row td:first-child,
.monitoring-problems-card .monitoring-event-row:hover td:first-child,
.monitoring-problems-card .monitoring-event-row:focus td:first-child,
.monitoring-problems-card .monitoring-event-row:focus-visible td:first-child,
.monitoring-problems-card .monitoring-event-row.is-expanded td:first-child{
  border-left:1px solid var(--border-subtle) !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Remove any pseudo-element accent/timeline from first and event cells. */
.monitoring-problems-card .monitoring-event-row td:first-child::before,
.monitoring-problems-card .monitoring-event-row td:first-child::after,
.monitoring-problems-card .monitoring-event-row td:nth-child(3)::before,
.monitoring-problems-card .monitoring-event-row td:nth-child(3)::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Keep the clean full-row severity colors. */
.monitoring-problems-card .monitoring-event-row[data-severity="0"] td,
.monitoring-problems-card .monitoring-event-row[data-severity="1"] td{
  background:#F7FAFF !important;
}
.monitoring-problems-card .monitoring-event-row[data-severity="2"] td{
  background:#FFF9E8 !important;
}
.monitoring-problems-card .monitoring-event-row[data-severity="3"] td{
  background:#FFF5E8 !important;
}
.monitoring-problems-card .monitoring-event-row[data-severity="4"] td,
.monitoring-problems-card .monitoring-event-row[data-severity="5"] td{
  background:#FFF3F3 !important;
}
.monitoring-problems-card .monitoring-event-row[data-monitoring-kind="recovered"] td{
  background:#F2FBF5 !important;
}


/* Application Update -------------------------------------------------- */
.app-update-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 1rem;
  align-items: start;
}
.app-update-card { padding: 1.25rem; }
.app-update-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.app-update-card-head h2 { margin: .2rem 0 0; }
.app-update-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .62;
}
.app-update-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}
.app-update-meta > div {
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--border, rgba(127,127,127,.22));
  border-radius: .7rem;
}
.app-update-meta dt {
  margin-bottom: .3rem;
  font-size: .75rem;
  opacity: .65;
}
.app-update-meta dd {
  margin: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.app-update-meta-wide { grid-column: 1 / -1; }
.app-update-actions { margin-top: 1rem; align-items: center; }
.app-release-notes {
  min-height: 260px;
  max-height: 430px;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: .7rem;
  border: 1px solid var(--border, rgba(127,127,127,.22));
  background: rgba(127,127,127,.06);
  font: inherit;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .app-update-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .app-update-meta { grid-template-columns: 1fr; }
  .app-update-meta-wide { grid-column: auto; }
  .app-update-card-head { flex-direction: column; }
}

/* Unified Operations Event Feed source badges */
.monitoring-event-source{
  display:inline-flex;
  align-items:center;
  margin-right:8px;
  padding:2px 6px;
  border:1px solid #d9dde2;
  border-radius:4px;
  background:#f5f6f7;
  color:#59636d;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1.4;
  vertical-align:1px;
  white-space:nowrap;
}

.monitoring-event-source.is-zabbix{
  background:#f5f6f7;
  color:#59636d;
}

.monitoring-event-source.is-edge-health{
  background:#fff7e8;
  border-color:#ead8ad;
  color:#89651c;
}

.monitoring-event-source.is-connector{
  background:#eef5fb;
  border-color:#c9dbea;
  color:#365f7d;
}

/* ==========================================================
   Unified Network Intelligence Overview
   ========================================================== */

.network-intelligence-page {
  width: 100%;
}

.ni-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.ni-kpi {
  appearance: none;
  width: 100%;
  min-height: 118px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border: 1px solid var(--border, #d9dde3);
  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.ni-kpi:hover {
  transform: translateY(-1px);
}

.ni-kpi.is-selected {
  border-color: currentColor;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
}

.ni-kpi span {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ni-kpi strong {
  display: block;
  margin: 9px 0 5px;
  font-size: 2.15rem;
  line-height: 1;
}

.ni-kpi small {
  display: block;
  opacity: .68;
  font-size: .78rem;
}

.ni-issue-card {
  padding: 0;
  overflow: hidden;
}

.ni-issue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #e4e7eb);
}

.ni-issue-head h2 {
  margin: 0 0 4px;
}

.ni-issue-head p {
  margin: 0;
}

.ni-table {
  width: 100%;
  border-collapse: collapse;
}

.ni-table th,
.ni-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border, #eceff2);
  white-space: nowrap;
}

.ni-table th {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.ni-severity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.ni-severity-critical {
  background: rgba(220, 38, 38, .12);
}

.ni-severity-warning {
  background: rgba(217, 119, 6, .13);
}

.ni-severity-data {
  background: rgba(37, 99, 235, .11);
}

.ni-severity-info {
  background: rgba(107, 114, 128, .12);
}

@media (max-width: 1100px) {
  .ni-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ni-kpi-grid {
    grid-template-columns: 1fr;
  }

  .ni-issue-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Network Intelligence Overview polish */

.network-intelligence-page .page-header {
  margin-bottom: 18px;
}

.ni-kpi-grid {
  gap: 12px;
  margin-bottom: 16px;
}

.ni-kpi {
  min-height: 98px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}

.ni-kpi span {
  font-size: .72rem;
  letter-spacing: .06em;
  opacity: .72;
}

.ni-kpi strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
}

.ni-kpi small {
  font-size: .76rem;
  opacity: .58;
}

.ni-issue-card {
  margin-top: 4px;
}

.ni-issue-head {
  padding: 16px 18px;
}

.ni-issue-head h2 {
  font-size: 1.08rem;
}

.ni-table th,
.ni-table td {
  padding: 11px 16px;
}

@media (max-width: 900px) {
  .ni-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ni-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Network Intelligence — compact typography polish */

.network-intelligence-page .ni-kpi {
  min-height: 88px;
  padding: 18px 20px;
}

.network-intelligence-page .ni-kpi-label {
  font-size: .76rem;
  letter-spacing: .08em;
}

.network-intelligence-page .ni-kpi small {
  font-size: .78rem;
  line-height: 1.35;
}

.network-intelligence-page .ni-kpi strong {
  font-size: 2rem;
  line-height: 1;
}

/* Active Issues */

.network-intelligence-page .ni-issues-card h2,
.network-intelligence-page #ni-overview-table-title {
  font-size: 1.05rem;
}

.network-intelligence-page #ni-overview-note {
  font-size: .78rem;
}

.network-intelligence-page .ni-issues-table th {
  font-size: .70rem;
  letter-spacing: .06em;
  padding: 14px 16px;
}

.network-intelligence-page .ni-issues-table td {
  font-size: .80rem;
  line-height: 1.35;
  padding: 11px 16px;
}

.network-intelligence-page .ni-severity {
  font-size: .68rem;
  padding: 4px 10px;
}

.network-intelligence-page #ni-overview-clear-filter {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  font-size: .76rem;
}


/* Network Intelligence Active Issues - smaller table text */
.network-intelligence-page table th {
  font-size: .72rem;
  letter-spacing: .06em;
}

.network-intelligence-page table td {
  font-size: .78rem;
  line-height: 1.3;
}

.network-intelligence-page .ni-severity,
.network-intelligence-page .severity-badge,
.network-intelligence-page td:first-child span {
  font-size: .66rem;
  padding: 5px 10px;
  letter-spacing: .04em;
}



/* Network Intelligence Issue Center */

.ni-issue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
}

.ni-issue-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ni-issue-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  font-size: .75rem;
}

.ni-issue-filter strong {
  font-size: .72rem;
}

.ni-issue-filter.is-selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.ni-issue-search {
  width: min(330px, 100%);
}

.ni-issue-search input {
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border, #d9dddf);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  font-size: .78rem;
}

.ni-issue-search input:focus {
  outline: none;
  border-color: #8b9499;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
}

@media (max-width: 760px) {
  .ni-issue-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ni-issue-search {
    width: 100%;
  }

  .ni-issue-filters {
    flex-wrap: wrap;
  }
}


/* Network Intelligence History */

.ni-history-toolbar {
  align-items: center;
}

.ni-history-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ni-history-tools select {
  min-height: 36px;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--border, #d9dddf);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  font-size: .75rem;
}

.ni-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.ni-status.active {
  background: #f7e2df;
  color: #2b2423;
}

.ni-status.resolved {
  background: #e7eee9;
  color: #28352d;
}

.ni-history-table td,
.ni-history-table th {
  white-space: nowrap;
}

.ni-history-table td:nth-child(5) {
  min-width: 280px;
  white-space: normal;
}

@media (max-width: 900px) {
  .ni-history-tools {
    width: 100%;
    flex-wrap: wrap;
  }

  .ni-history-tools .ni-issue-search {
    flex: 1;
    min-width: 220px;
  }
}


/* Network Intelligence History - shared table container */

.network-intelligence-page .ni-issue-card {
  overflow: hidden;
}

/* =========================================================
   Network Intelligence History — final standard typography
   ========================================================= */

.network-intelligence-page .ni-history-table {
  width: 100%;
  table-layout: auto;
}

.network-intelligence-page .ni-history-table th {
  padding: 12px 14px;
  font-size: .70rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
}

.network-intelligence-page .ni-history-table td {
  padding: 11px 14px;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.35;
  vertical-align: middle;
}

.network-intelligence-page .ni-history-table td:nth-child(1) {
  width: 88px;
}

.network-intelligence-page .ni-history-table td:nth-child(2) {
  width: 205px;
}

.network-intelligence-page .ni-history-table td:nth-child(3) {
  width: 105px;
}

.network-intelligence-page .ni-history-table td:nth-child(4) {
  min-width: 260px;
  max-width: 340px;
  white-space: normal;
}

.network-intelligence-page .ni-history-table td:nth-child(5) {
  width: 245px;
  white-space: normal;
}

.network-intelligence-page .ni-history-table td:nth-child(6) {
  width: 75px;
  white-space: nowrap;
}

.network-intelligence-page .ni-history-table td:nth-child(7) {
  width: 85px;
  white-space: nowrap;
}

.network-intelligence-page .ni-history-issue {
  display: block;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.35;
}

.network-intelligence-page .ni-history-severity {
  display: block;
  margin-top: 3px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  opacity: .65;
}

.network-intelligence-page .ni-history-timeline {
  white-space: normal !important;
}

.network-intelligence-page .ni-history-timeline > div {
  display: grid;
  grid-template-columns: 62px minmax(130px, 1fr);
  align-items: baseline;
  gap: 8px;
  margin: 1px 0;
  font-size: .72rem;
  line-height: 1.35;
}

.network-intelligence-page .ni-history-timeline span {
  font-size: .60rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .58;
}

.network-intelligence-page .ni-history-table .ni-status {
  min-width: 62px;
  padding: 4px 9px;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

/* Network Intelligence History - final alignment */

.network-intelligence-page .ni-history-table {
  width: 100%;
  table-layout: fixed;
}

.network-intelligence-page .ni-history-table th,
.network-intelligence-page .ni-history-table td {
  box-sizing: border-box;
  vertical-align: middle;
}

.network-intelligence-page .ni-history-table th:nth-child(1),
.network-intelligence-page .ni-history-table td:nth-child(1) {
  width: 8%;
}

.network-intelligence-page .ni-history-table th:nth-child(2),
.network-intelligence-page .ni-history-table td:nth-child(2) {
  width: 16%;
}

.network-intelligence-page .ni-history-table th:nth-child(3),
.network-intelligence-page .ni-history-table td:nth-child(3) {
  width: 9%;
}

.network-intelligence-page .ni-history-table th:nth-child(4),
.network-intelligence-page .ni-history-table td:nth-child(4) {
  width: 25%;
}

.network-intelligence-page .ni-history-table th:nth-child(5),
.network-intelligence-page .ni-history-table td:nth-child(5) {
  width: 24%;
}

.network-intelligence-page .ni-history-table th:nth-child(6),
.network-intelligence-page .ni-history-table td:nth-child(6) {
  width: 9%;
}

.network-intelligence-page .ni-history-table th:nth-child(7),
.network-intelligence-page .ni-history-table td:nth-child(7) {
  width: 9%;
}

.network-intelligence-page .ni-history-table td:nth-child(2),
.network-intelligence-page .ni-history-table td:nth-child(3),
.network-intelligence-page .ni-history-table td:nth-child(6),
.network-intelligence-page .ni-history-table td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.network-intelligence-page .ni-history-table td:nth-child(4),
.network-intelligence-page .ni-history-table td:nth-child(5) {
  white-space: normal;
}

.network-intelligence-page .ni-history-timeline > div {
  grid-template-columns: 62px 1fr;
}

.network-intelligence-page .ni-issue-card .table-scroll {
  overflow-x: hidden;
}

/* Activity Calendar operational visibility controls */
.calendar-visibility-controls {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.calendar-visibility-controls .calendar-eyebrow {
  margin: 0;
  white-space: nowrap;
}

.calendar-visibility-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-muted);
  white-space: nowrap;
}

.calendar-visibility-controls input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.calendar-visibility-controls #calendar-save-visibility {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .calendar-visibility-controls {
    align-items: flex-start;
    gap: 12px 18px;
  }

  .calendar-visibility-controls .calendar-eyebrow {
    flex: 0 0 100%;
  }

  .calendar-visibility-controls #calendar-save-visibility {
    margin-left: 0;
  }
}

/* Event Display - Visible information balanced grid */
.event-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

.event-options legend {
  grid-column: 1 / -1;
}

.event-options label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
}

.event-options input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 1000px) {
  .event-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .event-options {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FMA Demo Mode
   ========================================================= */

.fma-demo-banner{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:12000;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  min-width:520px;
  max-width:calc(100vw - 32px);
  padding:8px 10px 8px 14px;

  background:#111;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;

  box-shadow:0 10px 35px rgba(0,0,0,.20);
}

.fma-demo-banner[hidden]{
  display:none !important;
}

.fma-demo-banner-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.fma-demo-banner-left strong{
  font-size:11px;
  letter-spacing:.10em;
  white-space:nowrap;
}

.fma-demo-banner-left span{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fma-demo-banner-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.fma-demo-banner select{
  height:30px;
  min-width:180px;

  padding:0 28px 0 9px;

  color:#111;
  background:#fff;

  border:1px solid #d7d7d7;
  border-radius:6px;

  font-size:12px;
}

.fma-demo-banner button{
  min-height:30px;
  padding:4px 10px;

  background:#fff;
  color:#111;

  border:1px solid rgba(255,255,255,.30);
  border-radius:6px;

  font-size:12px;
  font-weight:600;
}

.fma-demo-banner button:hover{
  background:#f2f2f2;
}

@media (max-width:760px){
  .fma-demo-banner{
    width:calc(100vw - 20px);
    min-width:0;
    top:10px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .fma-demo-banner-actions{
    width:100%;
  }

  .fma-demo-banner select{
    flex:1;
    min-width:0;
  }
}


/* FMA_MAC_TRACE_GLOBAL_FIX */
.fma-mac-v2{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fma-mac-topology{
  border:1px solid var(--border,#dfe5e8);
  border-radius:16px;
  background:#fff;
  padding:18px 20px;
  overflow-x:auto;
}

.fma-mac-topology-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.fma-mac-topology-head strong{
  font-size:15px;
  color:#15191d;
}

.fma-mac-topology-legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:11px;
  color:#6d777e;
}

.fma-mac-dot{
  width:8px;
  height:8px;
  display:inline-block;
  border-radius:50%;
  margin-right:5px;
}

.fma-mac-dot.is-healthy{background:#18a45b;}
.fma-mac-dot.is-warning{background:#e9a30b;}
.fma-mac-dot.is-critical{background:#db3828;}
.fma-mac-dot.is-unknown{background:#81909a;}

.fma-mac-path{
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:4px 0 8px;
}

.fma-mac-node{
  width:150px;
  min-height:154px;
  border:1px solid #dce4e8;
  border-radius:13px;
  background:#fff;
  padding:14px 10px 12px;
  text-align:center;
  cursor:pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.fma-mac-node:hover,
.fma-mac-node.is-selected{
  border-color:#14181c;
  box-shadow:0 5px 18px rgba(0,0,0,.07);
  transform:translateY(-1px);
}

.fma-mac-node.is-healthy{
  border-color:#55b87f;
}

.fma-mac-node.is-warning{
  border-color:#ddb14e;
}

.fma-mac-node.is-critical{
  border-color:#dc7066;
}

.fma-mac-node.is-endpoint{
  background:#f6fbf7;
  border-color:#9bdcb5;
}

.fma-mac-node-icon{
  width:48px;
  height:48px;
  margin:0 auto 9px;
  border-radius:11px;
  border:1px solid #dce4e8;
  background:#f7f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#161b1f;
}

.fma-mac-node.is-endpoint .fma-mac-node-icon{
  background:#eef9f1;
}

.fma-mac-node-title{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#161b1f;
  line-height:1.3;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fma-mac-node-sub{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#67727a;
  line-height:1.35;
}

.fma-mac-node-port{
  margin-top:6px;
  font-size:10px;
  color:#4c585f;
  font-weight:650;
}

.fma-mac-node-health{
  margin-top:8px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.fma-mac-node-health.is-healthy{color:#11834a;}
.fma-mac-node-health.is-warning{color:#a76e00;}
.fma-mac-node-health.is-critical{color:#bf2d22;}
.fma-mac-node-health.is-unknown{color:#708089;}

.fma-mac-link{
  width:110px;
  min-width:110px;
  height:154px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#79868d;
}

.fma-mac-link-line{
  width:100%;
  height:2px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  background:#b9c3c8;
}

.fma-mac-collapsed{
  width:112px;
  min-width:112px;
  height:70px;
  border:1px dashed #c8d1d5;
  border-radius:12px;
  background:#fafbfb;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#68757c;
}

.fma-mac-collapsed strong{
  font-size:12px;
  color:#273137;
}

.fma-mac-collapsed span{
  margin-top:3px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}


.fma-mac-link.is-warning .fma-mac-link-line{
  background:#e3a21a;
}

.fma-mac-link.is-warning .fma-mac-link-line::after{
  background:#e3a21a;
}

.fma-mac-link.is-critical .fma-mac-link-line{
  background:#dc382b;
}

.fma-mac-link.is-critical .fma-mac-link-line::after{
  background:#dc382b;
}

.fma-ai-modal-backdrop{
  position:fixed !important;
  inset:0;
  z-index:10000;
  background:rgba(15,20,24,.30);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.fma-ai-modal{
  width:min(560px,100%);
  max-height:82vh;
  overflow:auto;
  background:#fff;
  border:1px solid #dfe5e8;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.fma-ai-modal-head{
  padding:16px 18px;
  border-bottom:1px solid #e5e9ec;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.fma-ai-modal-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:800;
}

.fma-ai-modal-close{
  border:0;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  color:#657078;
}

.fma-ai-modal-body{
  padding:18px;
}

.fma-ai-context-summary{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:6px 12px;
  font-size:11px;
  margin-bottom:16px;
}

.fma-ai-context-summary span{
  color:#78838a;
}

.fma-ai-context-summary strong{
  color:#222b30;
  overflow-wrap:anywhere;
}

.fma-ai-answer{
  border:1px solid #e1e6e9;
  border-radius:11px;
  background:#fafbfb;
  padding:14px;
  min-height:120px;
  font-size:11px;
  line-height:1.55;
  white-space:pre-wrap;
}

.fma-ai-answer.is-error{
  background:#fff5f3;
  border-color:#efc2bc;
  color:#a52b22;
}

.fma-ai-modal-actions{
  padding:0 18px 18px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.fma-ai-modal-actions button{
  border:1px solid #d7dde0;
  background:#fff;
  border-radius:8px;
  padding:8px 12px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.fma-ai-modal-actions button.is-primary{
  background:#17191c;
  color:#fff;
  border-color:#17191c;
}
.fma-mac-link-label{
  color:#a46b00;
  font-weight:700;
}

.fma-mac-link.is-critical .fma-mac-link-label{
  color:#bd2f24;
  font-weight:700;
}


.fma-mac-ai-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border:1px solid #d9dfe2;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1d2529;
  cursor:pointer;
  font-size:11px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  z-index:2;
}

.fma-mac-ai-btn:hover{
  background:#17191c;
  color:#fff;
  border-color:#17191c;
}

.fma-mac-node{
  position:relative;
}

.fma-mac-node-issue{
  margin-top:7px;
  padding:5px 7px;
  border-radius:7px;
  font-size:9px;
  line-height:1.3;
  font-weight:750;
  text-align:left;
}

.fma-mac-node-issue.is-warning{
  background:#fff7e5;
  color:#986400;
}

.fma-mac-node-issue.is-critical{
  background:#fff0ee;
  color:#b72c22;
}

.fma-mac-table tbody tr.is-warning{
  background:#fffaf0;
}

.fma-mac-table tbody tr.is-critical{
  background:#fff4f2;
}

.fma-mac-issue-box{
  margin-top:14px;
  border-radius:10px;
  padding:11px 12px;
  font-size:10px;
}

.fma-mac-issue-box.is-warning{
  background:#fff7e5;
  border:1px solid #f0d28b;
  color:#805600;
}

.fma-mac-issue-box.is-critical{
  background:#fff0ee;
  border:1px solid #efb0aa;
  color:#a92820;
}

.fma-mac-issue-box strong{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.fma-mac-link-label{
  position:absolute;
  top:calc(50% + 12px);
  left:50%;
  transform:translateX(-50%);
  width:120px;
  text-align:center;
  font-size:9px;
  line-height:1.35;
  color:#748087;
}

.fma-mac-link-line::after{
  content:"";
  position:absolute;
  right:-4px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#89979e;
  transform:translateY(-50%);
}

.fma-mac-link-label{
  max-width:100px;
  text-align:center;
  font-size:9px;
  line-height:1.35;
  color:#748087;
}

.fma-mac-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:14px;
  align-items:start;
}

.fma-mac-panel{
  background:#fff;
  border:1px solid var(--border,#dfe5e8);
  border-radius:14px;
  overflow:hidden;
}

.fma-mac-panel-head{
  min-height:51px;
  padding:12px 15px;
  border-bottom:1px solid #e4e9ec;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fma-mac-panel-title{
  display:flex;
  align-items:center;
  gap:9px;
  color:#171b1f;
  font-size:14px;
  font-weight:800;
}

.fma-mac-panel-title i{
  width:24px;
  text-align:center;
}

.fma-mac-found{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:4px 8px;
  background:#eaf8ef;
  color:#167b47;
  font-size:10px;
  font-weight:800;
}

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

.fma-mac-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

.fma-mac-table th{
  padding:9px 10px;
  text-align:left;
  white-space:nowrap;
  background:#f7f9fa;
  color:#58636a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid #e2e7ea;
}

.fma-mac-table td{
  padding:10px;
  border-bottom:1px solid #edf0f2;
  vertical-align:middle;
  white-space:nowrap;
  color:#283137;
}

.fma-mac-table tbody tr{
  cursor:pointer;
  transition:background .12s ease;
}

.fma-mac-table tbody tr:hover{
  background:#f8fafb;
}

.fma-mac-table tbody tr.is-selected{
  background:#f0f5f7;
}

.fma-mac-table tbody tr:last-child td{
  border-bottom:0;
}

.fma-mac-table-device{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:750;
}

.fma-mac-mini-icon{
  width:25px;
  height:25px;
  border:1px solid #dce4e8;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f7f9fa;
  color:#20272b;
}

.fma-mac-type{
  display:inline-flex;
  padding:3px 7px;
  border-radius:6px;
  background:#edf1f3;
  color:#49545a;
  font-size:9px;
  font-weight:750;
  text-transform:capitalize;
}

.fma-mac-health-text{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:750;
}

.fma-mac-health-text i{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}

.fma-mac-health-text.is-healthy i{background:#18a45b;}
.fma-mac-health-text.is-warning i{background:#e9a30b;}
.fma-mac-health-text.is-critical i{background:#db3828;}
.fma-mac-health-text.is-unknown i{background:#81909a;}

.fma-mac-detail-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fma-mac-detail-body{
  padding:14px 16px 16px;
}

.fma-mac-device-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
}

.fma-mac-device-head .fma-mac-node-icon{
  width:44px;
  height:44px;
  margin:0;
}

.fma-mac-device-head-main{
  min-width:0;
  flex:1;
}

.fma-mac-device-head-main strong{
  display:block;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fma-mac-device-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:9px;
  font-weight:800;
  background:#edf1f3;
  color:#5a666d;
}

.fma-mac-device-status.is-healthy{
  background:#e8f8ee;
  color:#137843;
}

.fma-mac-kv{
  display:grid;
  grid-template-columns:105px minmax(0,1fr);
  gap:7px 10px;
  font-size:11px;
}

.fma-mac-kv span{
  color:#69757c;
}

.fma-mac-kv strong{
  min-width:0;
  color:#293238;
  font-weight:650;
  overflow-wrap:anywhere;
}

.fma-mac-empty-value{
  color:#96a0a6 !important;
}

@media (max-width:1100px){
  .fma-mac-workspace{
    grid-template-columns:1fr;
  }

  .fma-mac-detail-stack{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:720px){
  .fma-mac-topology{
    padding:14px;
  }

  .fma-mac-topology-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .fma-mac-path{
    justify-content:flex-start;
  }

  .fma-mac-node{
    width:132px;
    min-height:145px;
  }

  .fma-mac-link{
    width:58px;
    min-width:58px;
  }

  .fma-mac-detail-stack{
    display:flex;
  }
}

/* FMA MAC Trace topology overflow alignment fix */
.fma-mac-topology{
  overflow-x:auto;
}

.fma-mac-path{
  justify-content:flex-start !important;
  padding-left:8px;
  padding-right:8px;
}


/* FMA Demo MAC hint */
.fma-demo-mac-tip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #dfe5e8;
  border-radius:10px;
  background:#f8fafb;
  font-size:11px;
  color:#5f6971;
}

.fma-demo-mac-tip[hidden]{
  display:none !important;
}

.fma-demo-mac-tip strong{
  color:#171b1f;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

.fma-demo-mac-tip button{
  white-space:nowrap;
}

@media(max-width:720px){
  .fma-demo-mac-tip{
    align-items:flex-start;
    flex-direction:column;
  }
}

.fma-demo-mac-label{
  margin-top:6px;
  font-size:11px;
  color:#7a858f;
}

.fma-demo-mac-label strong{
  color:#171b1f;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* FMA Demo - Activity Calendar read-only */
[data-page="activities"][data-demo="true"] [data-edit-activity] {
  display: none !important;
}

/* Zabbix transport - per API method table */
#organization-zabbix-method-table {
  margin-top: 12px;
  overflow-x: auto;
}

#organization-zabbix-method-table table {
  width: 100%;
  min-width: 760px;
  table-layout: auto;
}

#organization-zabbix-method-table th,
#organization-zabbix-method-table td {
  white-space: nowrap;
  vertical-align: middle;
}

#organization-zabbix-method-table th:nth-child(1),
#organization-zabbix-method-table td:nth-child(1) {
  min-width: 150px;
}

#organization-zabbix-method-table th:nth-child(2),
#organization-zabbix-method-table td:nth-child(2) {
  min-width: 130px;
}

#organization-zabbix-method-table th:nth-child(3),
#organization-zabbix-method-table td:nth-child(3),
#organization-zabbix-method-table th:nth-child(4),
#organization-zabbix-method-table td:nth-child(4),
#organization-zabbix-method-table th:nth-child(5),
#organization-zabbix-method-table td:nth-child(5),
#organization-zabbix-method-table th:nth-child(6),
#organization-zabbix-method-table td:nth-child(6),
#organization-zabbix-method-table th:nth-child(7),
#organization-zabbix-method-table td:nth-child(7) {
  text-align: right;
}

#organization-zabbix-method-table td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#organization-zabbix-method-table .badge {
  min-width: 92px;
  justify-content: center;
}

/* Zabbix transport method table - full width refinement */
#organization-zabbix-method-table {
  width: 100%;
  max-width: none;
  overflow-x: visible;
}

#organization-zabbix-method-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#organization-zabbix-method-table th,
#organization-zabbix-method-table td {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#organization-zabbix-method-table th:nth-child(1),
#organization-zabbix-method-table td:nth-child(1) {
  width: 22%;
  min-width: 0;
  text-align: left;
}

#organization-zabbix-method-table th:nth-child(2),
#organization-zabbix-method-table td:nth-child(2) {
  width: 18%;
  min-width: 0;
  text-align: left;
}

#organization-zabbix-method-table th:nth-child(3),
#organization-zabbix-method-table td:nth-child(3) {
  width: 13%;
}

#organization-zabbix-method-table th:nth-child(4),
#organization-zabbix-method-table td:nth-child(4) {
  width: 15%;
}

#organization-zabbix-method-table th:nth-child(5),
#organization-zabbix-method-table td:nth-child(5),
#organization-zabbix-method-table th:nth-child(6),
#organization-zabbix-method-table td:nth-child(6),
#organization-zabbix-method-table th:nth-child(7),
#organization-zabbix-method-table td:nth-child(7) {
  width: 10.66%;
}

#organization-zabbix-method-table .badge {
  min-width: 90px;
  max-width: 100%;
}

#organization-zabbix-transport-card .integration-health-columns,
#organization-zabbix-transport-card .field-span-2,
#organization-zabbix-method-table {
  grid-column: 1 / -1;
  width: 100%;
}

/* Zabbix transport method details */
.zabbix-method-details {
  width: 100%;
  margin-top: 18px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 14px;
}

.zabbix-method-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
}

.zabbix-method-details > summary::-webkit-details-marker {
  display: none;
}

.zabbix-method-details > summary::after {
  content: "⌄";
  font-size: 18px;
  transition: transform 0.15s ease;
}

.zabbix-method-details[open] > summary::after {
  transform: rotate(180deg);
}

.zabbix-method-details[open]
#organization-zabbix-method-table {
  margin-top: 16px;
}

/* ============================================================
   FMA Report Builder
   ============================================================ */

.report-mode-tabs{
  display:flex;
  gap:8px;
  margin:0 0 18px;
}

.report-mode-tabs .is-active{
  font-weight:700;
}

.report-builder-shell[hidden],
#report-standard-mode[hidden]{
  display:none !important;
}

.report-builder-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}

.report-builder-toolbar h2{
  margin:3px 0 0;
}

.report-builder-actions{
  display:flex;
  gap:8px;
}

.report-builder-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 280px;
  gap:18px;
  align-items:start;
}

.report-builder-palette{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

.report-builder-palette h3{
  margin:0 0 12px;
}

.report-builder-block{
  width:100%;
  display:block;
  text-align:left;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:inherit;
  cursor:pointer;
}

.report-builder-workspace{
  min-width:0;
}

.report-builder-template-bar{
  display:grid;
  grid-template-columns:260px minmax(240px,1fr);
  gap:12px;
  margin-bottom:12px;
}

.report-builder-template-bar label{
  display:grid;
  gap:6px;
}

.report-builder-canvas{
  min-height:720px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-soft);
}

#report-builder-grid{
  min-height:680px;
}

.report-builder-widget{
  height:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  padding:14px;
  overflow:hidden;
}

.report-builder-widget strong{
  display:block;
  margin-bottom:5px;
}

.report-builder-widget small{
  color:var(--muted);
}

@media (max-width:900px){
  .report-builder-layout{
    grid-template-columns:1fr;
  }

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

.report-builder-properties{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  position:sticky;
  top:18px;
}

.report-builder-properties h3{
  margin:0 0 14px;
}

#report-builder-properties-form{
  display:grid;
  gap:14px;
}

#report-builder-properties-form[hidden]{
  display:none !important;
}

.report-builder-properties label{
  display:grid;
  gap:6px;
}

.report-builder-property-meta{
  display:grid;
  gap:4px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

.report-builder-widget.is-selected{
  outline:2px solid currentColor;
  outline-offset:-2px;
}

.report-builder-widget{
  cursor:pointer;
}

@media (max-width:1200px){
  .report-builder-layout{
    grid-template-columns:200px minmax(0,1fr);
  }

  .report-builder-properties{
    grid-column:1 / -1;
    position:static;
  }
}

/* Report Builder live KPI */

.report-builder-widget-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.report-builder-kpi-value{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:12px 0 8px;
}

.report-builder-kpi-value span{
  font-size:30px;
  line-height:1;
  font-weight:750;
  letter-spacing:-.03em;
}

.report-builder-kpi-value small{
  font-size:12px;
  color:var(--muted);
}

.report-builder-kpi-value.is-loading,
.report-builder-kpi-value.is-empty,
.report-builder-kpi-value.is-error{
  color:var(--muted);
}

.report-builder-data-warning{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:10px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}

.report-builder-actions{
  flex-wrap:wrap;
}

/* Report Builder Chart */

.report-builder-chart-stage{
  position:relative;
  width:100%;
  height:210px;
  margin:10px 0 8px;
}

.report-builder-chart-stage canvas{
  width:100% !important;
  height:100% !important;
}

.report-builder-widget[data-builder-block-type="chart"]{
  min-height:260px;
}

.report-builder-template-bar{
  grid-template-columns:
    minmax(180px,1fr)
    minmax(240px,1.4fr)
    minmax(145px,.7fr)
    minmax(145px,.7fr);
}

@media (max-width:1100px){
  .report-builder-template-bar{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:700px){
  .report-builder-template-bar{
    grid-template-columns:1fr;
  }
}

/* Report Builder metadata bar — prevent overlap with Properties */
.report-builder-template-bar{
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.35fr);
}

.report-builder-template-bar label{
  min-width:0;
}

.report-builder-template-bar input,
.report-builder-template-bar select{
  width:100%;
  min-width:0;
}

@media (max-width:700px){
  .report-builder-template-bar{
    grid-template-columns:1fr;
  }
}

/* Report Builder chart — dashboard style */
.report-builder-chart-stage {
  position: relative;
  min-height: 260px;
  width: 100%;
  padding: 8px 8px 2px;
  background: #fff;
  border-radius: 8px;
}

.report-builder-chart-stage canvas {
  width: 100% !important;
  height: 100% !important;
}

.report-builder-widget[data-builder-block-type="chart"] {
  border-color: #dfe5ea;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 3px 10px rgba(15, 23, 42, 0.025);
}

.report-builder-widget[data-builder-block-type="chart"]
.report-builder-widget-head {
  padding-bottom: 6px;
}

/* Report Builder multi-host selector */
.report-builder-property-hosts > span{
  display:block;
  margin-bottom:8px;
}

.report-builder-host-picker{
  position:relative;
}

.report-builder-host-picker summary{
  cursor:pointer;
  list-style:none;
  border:1px solid #d7dde3;
  border-radius:10px;
  padding:12px 14px;
  background:#fff;
}

.report-builder-host-picker summary::-webkit-details-marker{
  display:none;
}

.report-builder-host-options{
  display:grid;
  gap:4px;
  max-height:260px;
  overflow:auto;
  margin-top:6px;
  padding:8px;
  border:1px solid #d7dde3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}

.report-builder-host-tools{
  display:grid;
  gap:8px;
  padding:10px 10px 6px;
  border-left:1px solid #d7dde3;
  border-right:1px solid #d7dde3;
  background:#fff;
}

.report-builder-host-tools > div{
  display:flex;
  gap:12px;
}

.report-builder-host-tools .btn-link{
  border:0;
  padding:0;
  background:transparent;
  color:#475569;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  text-decoration:underline;
}

.report-builder-host-option{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border-radius:7px;
  cursor:pointer;
}

.report-builder-host-option:hover{
  background:#f5f7f9;
}

.report-builder-host-option input{
  margin:0;
}

/* Report Builder host picker — selectable rows */
.report-builder-host-option{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.report-builder-host-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.report-builder-host-option:hover{
  background:#f5f6f7;
}

.report-builder-host-option.is-selected{
  background:#eef0f2;
}

.report-builder-host-name{
  font-weight:500;
  color:#374151;
}

.report-builder-host-target{
  color:#6b7280;
  font-size:12px;
}

#report-builder-property-ai-row{
  display:grid;
  gap:14px;
}

#report-builder-property-ai-row[hidden]{
  display:none !important;
}

.report-builder-ai-includes{
  display:grid;
  gap:8px;
}

.report-builder-ai-includes label{
  display:flex;
  align-items:center;
  gap:8px;
}

.report-builder-ai-preview{
  margin-top:8px;
  color:#475569;
  white-space:pre-line;
  line-height:1.55;
  max-height:230px;
  overflow:auto;
}

.report-builder-widget[data-builder-block-type="ai_summary"]{
  min-height:260px;
}

/* ==========================================================
   FMA_ORG_DIRECTORY_V2_CSS_A1
   Scoped responsive Organization Directory controls.
   ========================================================== */

.page[data-page="tenants"] .tenant-directory-controls {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(120px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}

.page[data-page="tenants"] .tenant-directory-controls .field {
  min-width: 0;
  margin: 0;
}

.page[data-page="tenants"] .tenant-directory-controls input,
.page[data-page="tenants"] .tenant-directory-controls select {
  width: 100%;
  min-width: 0;
}

.page[data-page="tenants"] .tenant-directory-summary {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 13px;
}

.page[data-page="tenants"] .tenant-directory-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.page[data-page="tenants"] #tenant-directory-page-info {
  min-width: 100px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.page[data-page="tenants"] .tenant-directory-pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 1200px) {
  .page[data-page="tenants"] .tenant-directory-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .page[data-page="tenants"] .tenant-directory-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page[data-page="tenants"] .tenant-directory-controls .field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .page[data-page="tenants"] .tenant-directory-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .page[data-page="tenants"] .tenant-directory-controls .field:first-child {
    grid-column: auto;
  }

  .page[data-page="tenants"] .tenant-directory-pagination {
    justify-content: center;
  }
}

/* FMA_TENANT_ACTION_KEBAB_V1 */
.page[data-page="tenants"] .tenant-action-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, #d5d9de);
  border-radius: 9px;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #20252b);
  font-size: 24px;
  cursor: pointer;
}

.page[data-page="tenants"] .tenant-action-trigger:hover {
  background: var(--surface-hover, #f2f4f6);
}

.page[data-page="tenants"] .tenant-action-trigger:focus-visible {
  outline: 2px solid var(--focus, #2875d9);
  outline-offset: 2px;
}

.tenant-action-floating-menu {
  position: fixed;
  z-index: 9999;
  width: 230px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--border, #d5d9de);
  border-radius: 11px;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #20252b);
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.tenant-action-floating-menu[hidden] {
  display: none !important;
}

.tenant-action-floating-menu button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary, #20252b);
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tenant-action-floating-menu button:hover,
.tenant-action-floating-menu button:focus-visible {
  background: var(--surface-hover, #f2f4f6);
}