:root {
  color-scheme: dark;
  --matmon-page-bg: #0c1117;
  --matmon-page-bg-2: #0e141b;
  --matmon-sidebar-bg: #111821;
  --matmon-sidebar-bg-2: #0f151d;
  --matmon-sidebar-item-bg: #161f2b;
  --matmon-sidebar-item-hover-bg: rgba(95, 141, 255, 0.12);
  --matmon-sidebar-item-active-bg: rgba(95, 141, 255, 0.16);
  --matmon-sidebar-item-border: #263241;
  --matmon-topbar-bg: rgba(11, 16, 22, 0.96);
  --matmon-topbar-border: #263241;
  --matmon-bg: #0c1117;
  --matmon-surface: #111821;
  --matmon-surface-soft: #0f151d;
  --matmon-surface-strong: #161f2b;
  --matmon-border: #263241;
  --matmon-foreground: #edf2f7;
  --matmon-muted: #95a2b0;
  --matmon-accent: #5f8dff;
  --matmon-accent-2: #8aa3ff;
  --matmon-success: #78d5c8;
  --matmon-warning: #f3b36b;
  --matmon-danger: #ff6b76;
  --matmon-mono-font: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --matmon-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] {
  color-scheme: light;
  --matmon-page-bg: #f3f6fb;
  --matmon-page-bg-2: #e8edf5;
  --matmon-sidebar-bg: #fbfdff;
  --matmon-sidebar-bg-2: #f2f6fb;
  --matmon-sidebar-item-bg: #ffffff;
  --matmon-sidebar-item-hover-bg: rgba(41, 92, 255, 0.08);
  --matmon-sidebar-item-active-bg: rgba(41, 92, 255, 0.12);
  --matmon-sidebar-item-border: #d8e0eb;
  --matmon-topbar-bg: rgba(249, 251, 255, 0.92);
  --matmon-topbar-border: #d8e0eb;
  --matmon-bg: #f3f6fb;
  --matmon-surface: #ffffff;
  --matmon-surface-soft: #eef3f9;
  --matmon-surface-strong: #f7faff;
  --matmon-border: #d8e0eb;
  --matmon-foreground: #16202c;
  --matmon-muted: #5e6b7a;
  --matmon-accent: #295cff;
  --matmon-accent-2: #5476ff;
  --matmon-success: #1e9f8f;
  --matmon-warning: #c87b1e;
  --matmon-danger: #d94859;
  --matmon-mono-font: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --matmon-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

html {
  font-size: 14px;
  min-height: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 0;
  margin: 0;
  color: var(--matmon-foreground);
  background: linear-gradient(180deg, var(--matmon-page-bg) 0%, var(--matmon-page-bg-2) 100%);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
}

a {
  color: inherit;
}

.ui-icon {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

.matmon-shell {
  position: relative;
}

body.is-sidebar-open {
  overflow: auto;
}

.app-shell {
  display: grid;
  grid-template-columns: clamp(250px, 18vw, 300px) minmax(0, 1fr);
  min-height: 0;
  align-items: start;
}

.app-main {
  min-width: 0;
}

.app-content {
  padding-block: 0.5rem;
}

.mobile-nav-bar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow);
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
  border-color: rgba(95, 141, 255, 0.28);
  background: rgba(95, 141, 255, 0.1);
  outline: none;
}

.mobile-nav-toggle .ui-icon {
  width: 1rem;
  height: 1rem;
}

.mobile-nav-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.mobile-nav-brand {
  color: var(--matmon-muted);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.mobile-nav-copy strong {
  min-width: 0;
  color: var(--matmon-foreground);
  font-size: 0.92rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-backdrop {
  display: none;
}

.breadcrumb-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0.35rem 0 0.75rem;
  padding: 0.35rem 0.4rem;
  color: var(--matmon-muted);
  font-size: 0.74rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.breadcrumb-link,
.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(42vw, 34rem);
  padding: 0.1rem 0.22rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-link {
  color: var(--matmon-muted);
}

.breadcrumb-link:hover {
  color: var(--matmon-accent);
  background: rgba(95, 141, 255, 0.08);
}

.breadcrumb-current {
  color: var(--matmon-foreground);
  font-weight: 700;
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--matmon-muted);
  opacity: 0.8;
  flex: 0 0 auto;
}

.breadcrumb-separator .ui-icon {
  width: 0.72rem;
  height: 0.72rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: linear-gradient(180deg, var(--matmon-sidebar-bg), var(--matmon-sidebar-bg-2));
  border-right: 1px solid var(--matmon-sidebar-item-border);
  backdrop-filter: blur(10px);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.85rem;
  min-height: 0;
}

.sidebar-brand-block {
  display: grid;
  gap: 0.12rem;
  padding: 0.1rem 0.15rem 0.72rem;
  border-bottom: 1px solid var(--matmon-sidebar-item-border);
}

.sidebar-alert-status {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.75rem;
  border-left: 3px solid var(--matmon-accent);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--matmon-surface-strong), var(--matmon-sidebar-bg));
  color: var(--matmon-foreground);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--matmon-sidebar-item-border);
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.sidebar-alert-status:hover,
.sidebar-alert-status:focus-within {
  color: var(--matmon-foreground);
  background: linear-gradient(180deg, var(--matmon-sidebar-item-hover-bg), var(--matmon-sidebar-bg));
  box-shadow: inset 0 0 0 1px rgba(95, 141, 255, 0.24);
}

.sidebar-alert-status-main {
  display: grid;
  gap: 0.2rem;
  color: inherit;
  text-decoration: none;
}

.sidebar-alert-status-main:hover {
  color: inherit;
}

.sidebar-alert-status.is-active {
  background: linear-gradient(180deg, var(--matmon-sidebar-item-active-bg), var(--matmon-sidebar-bg));
  box-shadow: inset 0 0 0 1px rgba(95, 141, 255, 0.3);
}

.sidebar-alert-status[data-tone="ok"] {
  border-left-color: rgba(120, 213, 200, 0.7);
}

.sidebar-alert-status[data-tone="warning"] {
  border-left-color: rgba(243, 179, 107, 0.75);
}

.sidebar-alert-status[data-tone="error"] {
  border-left-color: rgba(255, 107, 118, 0.8);
}

.sidebar-alert-status-label {
  color: var(--matmon-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-alert-status-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-alert-status-count {
  font-size: 1.35rem;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sidebar-alert-status-state {
  color: var(--matmon-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-alert-status[data-tone="ok"] .sidebar-alert-status-state {
  color: rgba(120, 213, 200, 0.95);
}

.sidebar-alert-status[data-tone="warning"] .sidebar-alert-status-state {
  color: rgba(243, 179, 107, 0.95);
}

.sidebar-alert-status[data-tone="error"] .sidebar-alert-status-state {
  color: rgba(255, 107, 118, 0.95);
}

.sidebar-alert-status-hint {
  color: var(--matmon-muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.sidebar-alert-status-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.22rem;
  margin-top: 0.1rem;
}

.sidebar-alert-status-meta a,
.sidebar-alert-status-meta span {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  padding: 0.22rem 0.25rem;
  border-radius: 6px;
  background: rgba(124, 142, 171, 0.08);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--matmon-sidebar-item-border);
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.sidebar-alert-status-meta a:hover,
.sidebar-alert-status-meta a:focus-visible {
  background: rgba(95, 141, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(95, 141, 255, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.sidebar-alert-status-meta strong {
  font-size: 0.78rem;
  line-height: 1;
}

.sidebar-alert-status-meta small {
  min-width: 0;
  color: var(--matmon-muted);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-alert-status-meta [data-tone="error"] strong {
  color: rgba(255, 107, 118, 0.95);
}

.sidebar-alert-status-meta [data-tone="warning"] strong {
  color: rgba(243, 179, 107, 0.95);
}

.sidebar-alert-status-meta [data-tone="ack"] strong {
  color: rgba(95, 141, 255, 0.95);
}

.sidebar-alert-status-meta [data-tone="paused"] strong {
  color: rgba(124, 142, 171, 0.95);
}

.sidebar-footer {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--matmon-sidebar-item-border);
}

.sidebar-footer-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sidebar-version {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-version:hover {
  background: var(--matmon-sidebar-item-hover, rgba(124, 142, 171, 0.12));
  color: var(--matmon-foreground);
}

.sidebar-version-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--matmon-foreground);
}

.sidebar-version-tag {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.about-shell {
  display: grid;
  gap: 1rem;
}

.about-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.4rem;
  border-radius: 14px;
  border: 1px solid var(--matmon-border);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--matmon-accent) 18%, transparent), transparent 22rem),
    var(--matmon-surface);
}

.about-hero-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
  color: var(--matmon-accent);
  background: color-mix(in srgb, var(--matmon-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 40%, transparent);
}

.about-hero-mark svg {
  width: 2.1rem;
  height: 2.1rem;
}

.about-hero-copy {
  display: grid;
  gap: 0.25rem;
}

.about-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--matmon-muted);
}

.about-hero-copy h1 {
  margin: 0;
  font-size: 1.9rem;
}

.about-hero-copy p {
  margin: 0;
  color: var(--matmon-muted);
  max-width: 46rem;
}

.about-version-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.about-version-tag {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--matmon-surface-soft);
  border: 1px solid var(--matmon-border);
}

.about-channel-badge {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  color: var(--matmon-foreground);
}

.about-channel-badge[data-channel="release"] {
  color: #78d5c8;
  border-color: color-mix(in srgb, #78d5c8 50%, transparent);
  background: color-mix(in srgb, #78d5c8 14%, transparent);
}

.about-channel-badge[data-channel="nightly"] {
  color: var(--matmon-accent);
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
}

.about-channel-badge[data-channel="local"] {
  color: var(--matmon-muted);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.about-panel {
  display: grid;
  gap: 0.7rem;
  padding: 1.1rem 1.25rem;
}

.about-facts {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.about-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--matmon-border) 55%, transparent);
}

.about-facts > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-facts dt {
  color: var(--matmon-muted);
  font-weight: 500;
}

.about-facts dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.about-text {
  margin: 0;
  color: var(--matmon-muted);
  line-height: 1.55;
}

.about-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.about-license {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--matmon-muted);
}

.about-channel-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--matmon-muted);
}

.about-channel-list code {
  color: var(--matmon-foreground);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--matmon-foreground);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand .ui-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--matmon-accent);
}

.brand:hover,
.topnav-link:hover {
  color: var(--matmon-accent);
}

.brand-note {
  color: var(--matmon-muted);
  padding-left: 1.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.topnav-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 32px;
  padding: 0.25rem 0.25rem 0.25rem 0.55rem;
  border-radius: 0;
  color: var(--matmon-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  background: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.topnav-link:hover {
  color: var(--matmon-foreground);
  background: var(--matmon-sidebar-item-hover-bg);
  border-left-color: rgba(95, 141, 255, 0.35);
}

.topnav-link.is-active {
  color: var(--matmon-foreground);
  background: var(--matmon-sidebar-item-active-bg);
  border-left-color: var(--matmon-accent);
}

.topnav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  background: rgba(95, 141, 255, 0.18);
  color: var(--matmon-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.topnav-badge[data-tone="warning"] {
  background: rgba(243, 179, 107, 0.2);
}

.topnav-badge[data-tone="error"] {
  background: rgba(255, 107, 118, 0.24);
}

.topnav-badge[data-tone="ok"] {
  background: rgba(120, 213, 200, 0.2);
}

.topnav-badge[data-tone="paused"] {
  background: rgba(124, 142, 171, 0.18);
}

.topnav-user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.2rem 0.45rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topnav-form {
  margin: 0;
  width: 100%;
}

.topnav-button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 32px;
  padding: 0.25rem 0.25rem 0.25rem 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--matmon-muted);
  border-left: 2px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.topnav-button:hover {
  color: var(--matmon-foreground);
  background: var(--matmon-sidebar-item-hover-bg);
  border-left-color: rgba(95, 141, 255, 0.35);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .sidebar-inner {
    gap: 0.6rem;
  }

  .sidebar-brand-block {
    padding-bottom: 0.45rem;
  }

  .sidebar-alert-status {
    padding: 0.5rem 0.6rem;
  }

  .sidebar-alert-status-meta {
    gap: 0.16rem;
  }

  .sidebar-alert-status-meta a,
  .sidebar-alert-status-meta span {
    padding: 0.16rem 0.2rem;
  }

  .brand {
    font-size: 1.04rem;
  }

  .brand-note {
    font-size: 0.6rem;
  }

  .topnav-link {
    min-height: 28px;
    padding: 0.2rem 0.25rem 0.2rem 0.5rem;
  }

  .topnav-button {
    min-height: 28px;
    padding: 0.2rem 0.25rem 0.2rem 0.5rem;
  }

  .sidebar-footer {
    gap: 0.3rem;
    padding-top: 0.55rem;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1199.98px) {
  .app-shell {
    display: block;
    min-height: 0;
  }

  .topbar {
    display: none;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 1px solid var(--matmon-topbar-border);
    border-bottom: 1px solid var(--matmon-topbar-border);
    box-shadow: none;
    z-index: 1000;
    overflow: visible;
    transform: none;
    overscroll-behavior: auto;
  }

  .app-shell.is-sidebar-open .topbar {
    display: block;
  }

  .sidebar-inner {
    gap: 0.45rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .sidebar-brand-block {
    padding-bottom: 0.2rem;
  }

  .brand {
    font-size: 1.04rem;
  }

  .brand-note {
    display: none;
  }

  .sidebar-alert-status {
    padding: 0.45rem 0.55rem;
  }

  .sidebar-alert-status-hint,
  .sidebar-alert-status-meta {
    display: none;
  }

  .sidebar-backdrop {
    display: none;
  }

  .mobile-nav-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    margin-bottom: 0.05rem;
  }

  .app-main {
    width: 100%;
    min-width: 0;
  }

  .app-main > main {
    padding-top: 0.05rem;
  }

  .topnav-link,
  .topnav-button {
    min-height: 28px;
    padding: 0.18rem 0.25rem 0.18rem 0.5rem;
  }

  .sidebar-footer {
    gap: 0.25rem;
    padding-top: 0.45rem;
  }

  .account-menu-trigger {
    min-height: 2rem;
    padding-block: 0.2rem;
  }

  .account-trigger-label {
    font-size: 0.5rem;
  }

  .account-trigger-name {
    font-size: 0.7rem;
  }

  .workspace-summary-strip {
    display: none;
  }

  .monitoring-list-shell,
  .monitoring-tree {
    overflow-x: visible;
  }

  .monitoring-list-shell .monitoring-list-head,
  .monitoring-list-shell .monitoring-list-row {
    min-width: 0;
  }

  .monitoring-list-head {
    display: none;
  }

  .monitoring-list-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    min-width: 0;
  }

  .monitoring-list-status,
  .monitoring-list-main,
  .monitoring-list-endpoint,
  .monitoring-list-info,
  .monitoring-list-side {
    width: 100%;
  }

  .monitoring-list-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .monitoring-list-side .workspace-row-actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .monitoring-list-side .workspace-action-menu-panel {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .monitoring-tree-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.2rem 0.35rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid rgba(124, 142, 171, 0.13);
    border-radius: 8px;
    background: var(--matmon-surface-strong);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    margin-left: 0;
  }

  .monitoring-tree-row > * {
    min-width: 0;
  }

  .monitoring-tree-main {
    order: 2;
    flex: 1 1 min(100%, 16rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    white-space: normal;
  }

  .monitoring-tree-details {
    max-width: none;
    white-space: normal;
  }

  .monitoring-tree-meta {
    flex-wrap: wrap;
    white-space: normal;
  }

  .monitoring-tree-side {
    order: 3;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .monitoring-tree-side .workspace-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .monitoring-tree-children {
    margin-left: 0.2rem;
    padding-left: 0.5rem;
  }

  .monitoring-sensor-strip,
  .monitoring-tree-sensor-level {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }

  .monitoring-tree .monitoring-sensor-chip,
  .monitoring-tree .monitoring-add-sensor-chip,
  .tree-sensor-chip,
  .tree-add-sensor {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .monitoring-tree .monitoring-sensor-chip-main {
    grid-template-areas:
      "icon name"
      "icon value"
      "meta meta";
    padding: 0.18rem 1.35rem 0.18rem 0.28rem;
  }

  .monitoring-tree .monitoring-sensor-meta,
  .monitoring-tree .monitoring-sensor-graph {
    display: none;
  }

  .tree-sensor-strip {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
  }

  .tree-sensor-chips {
    width: 100%;
    flex-direction: column;
  }

  .tree-sensor-chip {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .tree-add-sensor {
    width: 100%;
    margin-left: 0;
  }
}

.topnav-theme-toggle {
  padding-inline: 0.55rem;
}

.sidebar-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--matmon-sidebar-item-border);
  border-radius: 7px;
  background: var(--matmon-sidebar-item-bg);
  color: var(--matmon-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.sidebar-icon-button.topnav-theme-toggle {
  padding: 0;
}

.sidebar-icon-button:hover,
.sidebar-icon-button:focus-visible {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.38);
  background: var(--matmon-sidebar-item-hover-bg);
  outline: none;
}

.sidebar-icon-button:active {
  transform: translateY(1px);
}

.account-menu {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.28rem 0.35rem;
  border: 1px solid var(--matmon-sidebar-item-border);
  border-radius: 7px;
  background: var(--matmon-sidebar-item-bg);
  color: var(--matmon-foreground);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.account-menu-trigger:hover,
.account-menu[open] .account-menu-trigger {
  border-color: rgba(95, 141, 255, 0.34);
  background: var(--matmon-sidebar-item-hover-bg);
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(95, 141, 255, 0.9), rgba(120, 213, 200, 0.72));
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.account-trigger-copy {
  display: grid;
  gap: 0.03rem;
  min-width: 0;
}

.account-trigger-label {
  color: var(--matmon-muted);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.account-trigger-name {
  min-width: 0;
  color: var(--matmon-foreground);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger-chevron {
  display: inline-flex;
  color: var(--matmon-muted);
  transition: transform 0.12s ease, color 0.12s ease;
}

.account-trigger-chevron .ui-icon {
  width: 0.78rem;
  height: 0.78rem;
}

.account-menu[open] .account-trigger-chevron {
  color: var(--matmon-accent);
  transform: rotate(90deg);
}

.account-menu-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  display: grid;
  gap: 0.35rem;
  padding: 0.4rem;
  border: 1px solid var(--matmon-sidebar-item-border);
  border-radius: 8px;
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow);
}

.account-menu-meta {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.25rem 0.35rem 0.45rem;
  border-bottom: 1px solid var(--matmon-sidebar-item-border);
}

.account-menu-meta span {
  color: var(--matmon-muted);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.account-menu-meta strong {
  min-width: 0;
  color: var(--matmon-foreground);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-form {
  margin: 0;
}

.account-menu-action,
.account-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--matmon-muted);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.account-menu-action:hover,
.account-login-button:hover,
.account-login-button.is-active {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.26);
  background: var(--matmon-sidebar-item-hover-bg);
}

/* Account menu items read as a plain left-aligned list (no icon indent). */
.account-menu-panel .account-menu-action {
  justify-content: flex-start;
}

.account-login-button {
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  border-color: var(--matmon-sidebar-item-border);
  background: var(--matmon-sidebar-item-bg);
}

/* Show the icon matching the current theme MODE (light=sun, dark=moon, system=split sun/moon). */
.theme-toggle-icon {
  display: none;
  align-items: center;
}

html[data-theme-mode="light"] .theme-toggle-icon[data-theme-icon="light"],
html[data-theme-mode="dark"] .theme-toggle-icon[data-theme-icon="dark"],
html[data-theme-mode="system"] .theme-toggle-icon[data-theme-icon="system"] {
  display: inline-flex;
}

.auth-shell {
  display: grid;
  place-items: center;
  gap: 1rem;
  min-height: calc(100vh - 120px);
}

.auth-shell-login {
  width: min(560px, 100%);
  min-height: 0;
  justify-items: stretch;
  align-items: start;
}

.anonymous-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.anonymous-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem 0.35rem;
}

.anonymous-brand {
  text-decoration: none;
}

.anonymous-theme-toggle {
  margin-left: auto;
}

.anonymous-main {
  display: grid;
  place-items: center;
  min-height: 0;
}

.anonymous-main-top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.35rem;
}

.auth-card {
  width: min(560px, 100%);
  padding: 1rem 1rem 0.95rem;
}

.auth-shell-login .page-header {
  min-height: 0;
  padding: 0;
}

.auth-card h1 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

.auth-form {
  display: grid;
  gap: 0.8rem;
  margin-top: 0;
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.auth-note {
  color: var(--matmon-muted);
  font-size: 0.88rem;
}

.auth-submit {
  min-width: 8.5rem;
}

.auth-submit:hover {
  background: rgba(95, 141, 255, 0.22);
}

.auth-intro {
  color: var(--matmon-muted);
  margin: 0 0 0.4rem;
  line-height: 1.5;
}

/* ---- First-run setup wizard ---- */
.setup-wizard {
  max-width: 760px;
  width: 100%;
  margin: 1.5rem auto;
  display: grid;
  gap: 1rem;
}

.setup-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.setup-wizard-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  counter-reset: wizard-step;
}

.setup-wizard-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  color: var(--matmon-muted);
  background: var(--matmon-surface-strong);
  box-shadow: inset 0 0 0 1px var(--matmon-sidebar-item-border);
  font-size: 0.84rem;
  white-space: nowrap;
}

.setup-wizard-step.is-current {
  color: var(--matmon-foreground);
  box-shadow: inset 0 0 0 1px var(--matmon-accent);
  background: linear-gradient(180deg, var(--matmon-surface-strong), var(--matmon-sidebar-bg));
}

.setup-wizard-step.is-done {
  color: var(--matmon-accent);
}

.setup-wizard-step-mark {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
}

.setup-wizard-step-mark svg {
  width: 100%;
  height: 100%;
}

.setup-wizard-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
}

.setup-wizard-progress {
  margin: 0;
  color: var(--matmon-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.setup-wizard-body {
  display: grid;
  gap: 0.75rem;
  line-height: 1.55;
}

.setup-wizard-body p {
  margin: 0;
}

.setup-wizard-list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.setup-wizard-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.setup-wizard-list svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--matmon-accent);
  flex: 0 0 auto;
}

.setup-wizard-chips {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.setup-wizard-muted {
  color: var(--matmon-muted);
  font-size: 0.88rem;
}

.setup-wizard-open {
  justify-self: start;
  min-width: 0;
}

.setup-wizard-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--matmon-sidebar-item-border);
  padding-top: 0.9rem;
}

.setup-wizard-actions-spacer {
  flex: 1 1 auto;
}

.setup-wizard-net {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.setup-wizard-net form {
  display: inline-flex;
  margin: 0;
}

.setup-wizard-net-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--matmon-muted);
  cursor: pointer;
  padding: 0;
  width: 1rem;
  height: 1rem;
}

.setup-wizard-net-remove:hover {
  color: #ff6b6b;
}

.setup-wizard-net-remove svg {
  width: 0.85rem;
  height: 0.85rem;
}

.setup-wizard-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.setup-wizard-add .workspace-input {
  max-width: 280px;
}

.setup-wizard-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.setup-wizard-suggestions form {
  margin: 0;
}

.setup-wizard-tree {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.2rem;
  display: grid;
  gap: 0.35rem;
}

.setup-wizard-tree ul {
  list-style: none;
  margin: 0.35rem 0 0 0.4rem;
  padding: 0 0 0 0.8rem;
  display: grid;
  gap: 0.35rem;
  border-left: 1px solid var(--matmon-sidebar-item-border);
}

.setup-wizard-tree-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.setup-wizard-tree-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--matmon-accent);
}

.setup-wizard-probe {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--matmon-sidebar-item-border);
  border-radius: 8px;
  background: var(--matmon-surface-soft);
}

.setup-wizard-code {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}

.setup-wizard-form {
  display: grid;
  gap: 0.7rem;
}

.setup-wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.setup-wizard-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--matmon-muted);
  font-size: 0.9rem;
}

.dashboard-shell {
  display: grid;
  gap: 0.9rem;
}

.dashboard-home-shell {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  gap: 0.72rem;
}

.panel {
  background: var(--matmon-surface);
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  box-shadow: var(--matmon-shadow);
}

.hero-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.95rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 3rem;
  padding: 0.15rem 0.1rem 0.25rem;
}

.page-header.has-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem 1rem;
}

.page-header.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.assistant-steps {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.assistant-step {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 999px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.assistant-step.is-active {
  border-color: rgba(95, 141, 255, 0.35);
  color: var(--matmon-foreground);
  background: rgba(95, 141, 255, 0.12);
}

.workspace-assistant-panel {
  padding-block: 0.75rem;
}

.eyebrow {
  color: var(--matmon-accent);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hero-panel h1 {
  margin: 0.25rem 0 0;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.05;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  line-height: 1.1;
}

.page-title,
.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.page-title .ui-icon,
.panel-title .ui-icon {
  color: var(--matmon-accent);
}

.workspace-toolbar {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.85rem;
}

.hero-copy {
  margin: 0.65rem 0 0;
  max-width: 56ch;
  color: var(--matmon-muted);
}

.mode-chip {
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  text-align: right;
}

.mode-chip span,
.metric-label,
.panel-hint,
.tree-details,
.probe-meta,
.sensor-pill small {
  color: var(--matmon-muted);
}

.mode-chip strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

.panel-hint {
  color: var(--matmon-muted);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.workspace-summary-strip {
  display: none;
  justify-content: flex-end;
  margin: 0.3rem 0 0.6rem;
}

/* Revealed by initializeWorkspaceSummaryPlacement once it's in its final spot, so
   it doesn't visibly jump from the sidebar into the page header on every load. */
.workspace-summary-strip.is-placed {
  display: flex;
}

.page-header .workspace-summary-strip {
  grid-column: 2;
  margin: 0;
  justify-content: flex-end;
}

.workspace-summary-card {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.52rem 0.62rem;
  border: 1px solid var(--matmon-border);
  border-radius: 8px;
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow);
  max-width: 100%;
  flex-wrap: wrap;
}

.workspace-summary-main {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.workspace-summary-kicker {
  color: var(--matmon-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.workspace-summary-main strong {
  min-width: 0;
  color: var(--matmon-foreground);
  font-size: 0.86rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-summary-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.workspace-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.85rem;
  padding: 0.26rem 0.48rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
  text-decoration: none;
}

.workspace-summary-chip:hover {
  background: rgba(95, 141, 255, 0.1);
  border-color: rgba(95, 141, 255, 0.22);
}

.workspace-summary-chip .ui-icon {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--matmon-accent);
}

.workspace-summary-chip strong {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1;
}

.workspace-summary-chip span {
  color: var(--matmon-muted);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.dashboard-home-shell > .page-header.dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem 1rem;
}

.dashboard-header-main {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
  padding-top: 0.06rem;
}

.dashboard-header-main h1 {
  margin: 0;
}

.dashboard-header-summary.workspace-summary-card {
  align-self: start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.6rem;
  padding: 0.44rem 0.58rem;
  white-space: nowrap;
}

.dashboard-header-summary .workspace-summary-main strong {
  font-size: 0.83rem;
}

.dashboard-header-summary .workspace-summary-metrics {
  flex-wrap: nowrap;
}

.page-header-summary.workspace-summary-card {
  align-self: start;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.6rem;
  padding: 0.44rem 0.58rem;
  white-space: nowrap;
}

.page-header-summary .workspace-summary-main strong {
  font-size: 0.83rem;
}

.page-header-summary .workspace-summary-metrics {
  flex-wrap: nowrap;
}

.metric-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}

.metric-label .ui-icon {
  color: var(--matmon-accent);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
}

.metric-card strong {
  display: block;
  margin-top: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.metric-card small {
  display: none;
}

.metric-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.metric-link:hover {
  border-color: rgba(95, 141, 255, 0.28);
  background: rgba(95, 141, 255, 0.08);
}

.metric-link strong {
  color: var(--matmon-foreground);
}

.dashboard-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(260px, 1.25fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.72rem 0.8rem;
  overflow: hidden;
}

.dashboard-home-shell .dashboard-status-panel {
  grid-template-columns: minmax(0, 0.82fr) auto minmax(240px, 1.05fr);
  gap: 0.7rem;
  padding: 0.62rem 0.68rem;
}

.dashboard-status-copy {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.dashboard-status-header {
  min-height: auto;
  padding: 0;
}

.dashboard-status-summary {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--matmon-muted);
}

.dashboard-status-summary strong {
  color: var(--matmon-foreground);
  font-size: clamp(1.8rem, 5vw, 2.65rem);
  line-height: 0.95;
}

.dashboard-status-chart {
  display: grid;
  place-items: center;
}

.dashboard-status-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8rem, 15vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.18);
}

.dashboard-home-shell .dashboard-status-donut {
  width: clamp(7rem, 9vw, 8.5rem);
}

.dashboard-status-donut::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dashboard-status-donut-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--matmon-surface);
  box-shadow: inset 0 0 0 1px var(--matmon-border);
}

.dashboard-status-donut-core strong {
  color: var(--matmon-foreground);
  font-size: 1.65rem;
  line-height: 0.9;
}

.dashboard-status-donut-core span {
  color: var(--matmon-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-status-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.32rem;
  min-width: 0;
}

.dashboard-status-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.34rem 0.45rem;
  border: 1px solid var(--matmon-border);
  border-radius: 7px;
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.dashboard-status-legend-item:hover {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.28);
  background: rgba(95, 141, 255, 0.08);
  transform: translateY(-1px);
}

.dashboard-status-legend-item.is-hidden {
  display: none;
}

.dashboard-status-legend-item > span:not(.dashboard-status-dot) {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-size: 0.78rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-status-legend-item strong {
  color: var(--matmon-foreground);
  font-size: 0.9rem;
  line-height: 1;
}

.dashboard-status-legend-item small {
  min-width: 2.2rem;
  color: var(--matmon-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: right;
}

.dashboard-status-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #7c8eab;
  box-shadow: 0 0 0 3px rgba(124, 142, 171, 0.1);
}

.dashboard-status-dot[data-tone="ok"] {
  background: #78d5c8;
  box-shadow: 0 0 0 3px rgba(120, 213, 200, 0.12);
}

.dashboard-status-dot[data-tone="warning"] {
  background: #f3b36b;
  box-shadow: 0 0 0 3px rgba(243, 179, 107, 0.13);
}

.dashboard-status-dot[data-tone="ack"] {
  background: #5f8dff;
  box-shadow: 0 0 0 3px rgba(95, 141, 255, 0.13);
}

.dashboard-status-dot[data-tone="error"] {
  background: #ff7f93;
  box-shadow: 0 0 0 3px rgba(255, 127, 147, 0.13);
}

.monitoring-controls {
  padding: 0.8rem 0.85rem;
}

.monitoring-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* --- Detail tabs (ported from the instance UI: General / Roles / … ) --- */
.sensor-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--matmon-border);
  overflow-x: auto;
  margin-bottom: 16px;
}

.sensor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.95rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--matmon-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.sensor-tab .tab-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--matmon-surface-soft, rgba(148, 163, 184, 0.14));
  color: var(--matmon-muted);
}

.sensor-tab:hover {
  color: var(--matmon-foreground);
}

.sensor-tab.is-active {
  color: var(--matmon-foreground);
  border-bottom-color: var(--matmon-accent);
}

[data-sensor-tab][hidden] {
  display: none;
}

/* The list toolbar reads clearly as its own tile (like the instance Events filter bar). */
.list-toolbar-panel {
  padding: 14px 18px;
}

.monitoring-view-switch,
.monitoring-size-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.monitoring-size-switch .workspace-action-link {
  min-width: 2.15rem;
  padding-inline: 0.48rem;
}

/* The view/size/layout switches now live inside one "Display" dropdown. */
.monitoring-display-menu > summary {
  list-style: none;
}

.monitoring-display-menu > summary::-webkit-details-marker {
  display: none;
}

.monitoring-display-panel {
  min-width: 13rem;
  gap: 0.3rem;
  padding: 0.6rem;
}

.monitoring-display-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--matmon-muted);
  margin-top: 0.35rem;
}

.monitoring-display-label:first-child {
  margin-top: 0;
}

.monitoring-display-panel .monitoring-view-switch,
.monitoring-display-panel .monitoring-size-switch {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
}

.monitoring-display-panel .workspace-action-link {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}

.monitoring-tree-bulk {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.monitoring-tree-bulk .workspace-action-link {
  justify-content: flex-start;
  gap: 0.5rem;
}

.monitoring-size-switch.is-list-view .workspace-action-link:disabled,
.monitoring-size-switch.is-list-view .workspace-action-link.is-disabled {
  opacity: 0.46;
  cursor: not-allowed;
  background: var(--matmon-surface-soft);
  border-color: var(--matmon-border);
  color: var(--matmon-muted);
  box-shadow: none;
  pointer-events: none;
}

.monitoring-size-switch.is-list-view .workspace-action-link.is-active {
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.08);
}

.monitoring-filter-field {
  display: grid;
  gap: 0.3rem;
  flex: 1 1 180px;
  min-width: 180px;
}

.monitoring-filter-field span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--matmon-muted);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.monitoring-filter-field .ui-icon {
  color: var(--matmon-accent);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
  gap: 0.6rem;
  align-items: start;
}

.panel-stack {
  padding: 0.65rem 0.7rem 0.65rem;
}

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.panel-header h2 {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 700;
}

.section-title .ui-icon {
  color: var(--matmon-accent);
}

.tree-list,
.probe-list,
.sensor-pills,
.monitoring-list,
.monitoring-list-shell {
  display: grid;
  gap: 0.42rem;
}

.tree-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, 0.9fr);
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  margin-left: calc(var(--depth, 0) * 1rem);
  border-radius: 14px;
  background: var(--matmon-surface-strong);
  border: 1px solid rgba(124, 142, 171, 0.12);
}

.tree-row[data-state="ok"],
.probe-row[data-state="ok"],
.graph-card[data-state="ok"] {
  border-color: rgba(120, 213, 200, 0.22);
}

.tree-row[data-state="warning"],
.probe-row[data-state="warning"],
.graph-card[data-state="warning"] {
  border-color: rgba(243, 179, 107, 0.22);
}

.tree-row[data-state="error"],
.probe-row[data-state="error"],
.graph-card[data-state="error"] {
  border-color: rgba(255, 127, 147, 0.26);
}

.tree-row[data-state="paused"],
.probe-row[data-state="paused"],
.graph-card[data-state="paused"] {
  border-color: rgba(124, 142, 171, 0.24);
}

.tree-row[data-state="unknown"],
.probe-row[data-state="unknown"],
.graph-card[data-state="unknown"],
.tree-row[data-state="disabled"],
.probe-row[data-state="disabled"],
.graph-card[data-state="disabled"] {
  border-color: rgba(124, 142, 171, 0.18);
}

.tree-kind {
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* min-width (not a fixed width) so the chip stays a ~square box for a bare icon but grows to
     fit a text label (Probe / Sensor / Folder / Host) instead of letting the text spill out. */
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
  border-radius: 6px;
  color: var(--matmon-foreground);
  background: rgba(95, 141, 255, 0.12);
  border: 1px solid rgba(95, 141, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.tree-kind .ui-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.monitoring-tree-main .tree-name {
  font-size: 0.98rem;
}

.tree-kind[data-kind="probe"] {
  background: rgba(95, 141, 255, 0.14);
}

.tree-kind[data-kind="folder"] {
  background: rgba(124, 142, 171, 0.14);
}

.tree-kind[data-kind="host"] {
  background: rgba(138, 163, 255, 0.14);
}

.tree-kind[data-kind="sensor"] {
  background: rgba(255, 107, 118, 0.14);
}

.tree-name,
.probe-name {
  font-weight: 700;
}

.tree-main,
.probe-row > div:first-child {
  min-width: 0;
}

.tree-main {
  display: grid;
  gap: 0.1rem;
}

.tree-details,
.tree-meta,
.probe-meta,
.probe-state small {
  font-size: 0.8rem;
}

.tree-meta {
  display: grid;
  gap: 0.15rem;
  text-align: right;
}

.tree-state {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.tree-summary {
  color: var(--matmon-muted);
  font-size: 0.75rem;
}

.tree-state-message {
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.events-list {
  display: grid;
  gap: 0.28rem;
}

.event-row {
  display: grid;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  border-left: 3px solid var(--event-state-color, var(--matmon-accent));
}

.event-row[data-state="ok"] {
  border-left-color: #78d5c8;
}

.event-row[data-state="warning"] {
  border-left-color: #f3b36b;
}

.event-row[data-state="error"] {
  border-left-color: #ff6b76;
}

.event-row[data-state="paused"] {
  border-left-color: #7c8eab;
}

.event-row[data-state="unknown"],
.event-row[data-state="disabled"] {
  border-left-color: #7c8eab;
}

.event-row[open] {
  background: var(--matmon-surface);
}

.event-row summary {
  list-style: none;
}

.event-row summary::-webkit-details-marker {
  display: none;
}

.event-row-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding: 0.26rem 0.45rem 0.26rem 0.35rem;
  cursor: pointer;
}

.event-row-summary:hover {
  background: rgba(95, 141, 255, 0.04);
}

.event-row-kind {
  align-self: center;
  justify-self: start;
  /* This reuses .tree-kind for the chip colour, but .tree-kind is a fixed 1.9rem icon
     square — here it holds the event-kind text ("State changed", …), so size it to fit
     the label instead of cramming the text into a tiny box. */
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.event-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  overflow: hidden;
  white-space: nowrap;
}

.event-row-name,
.event-row-path,
.event-row-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-row-name {
  color: var(--matmon-foreground);
  font-weight: 700;
}

.event-row-path,
.event-row-message,
.event-row-separator,
.event-row-time {
  color: var(--matmon-muted);
  font-size: 0.74rem;
}

.event-row-separator {
  flex: 0 0 auto;
  opacity: 0.85;
}

.event-row-side {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 0;
  white-space: nowrap;
}

.event-row-time {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.event-row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--matmon-muted);
  transition: transform 0.14s ease, color 0.14s ease;
}

.event-row-chevron .ui-icon {
  width: 0.7rem;
  height: 0.7rem;
}

.event-row[open] .event-row-chevron {
  transform: rotate(90deg);
  color: var(--matmon-foreground);
}

.event-row-body {
  display: grid;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-top: 1px solid rgba(124, 142, 171, 0.12);
  background: rgba(124, 142, 171, 0.03);
}

.event-row-body-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.event-row-field {
  min-width: 0;
  padding: 0.34rem 0.42rem;
  border-radius: 6px;
  border: 1px solid rgba(124, 142, 171, 0.12);
  background: rgba(124, 142, 171, 0.05);
}

.event-row-field .workspace-label {
  display: block;
  margin-bottom: 0.08rem;
  font-size: 0.68rem;
}

.event-row-field > div {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.25;
}

.event-row-actions {
  margin-top: 0;
  justify-content: flex-end;
}

.event-row-actions .workspace-action-link {
  min-height: 28px;
  padding: 0.22rem 0.42rem;
  font-size: 0.8rem;
}

.monitoring-tree {
  --tree-gap: 0.3rem;
  display: grid;
  gap: var(--tree-gap);
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: thin;
}

.monitoring-tree-node {
  display: grid;
  gap: var(--tree-gap);
  min-width: 0;
}

.monitoring-tree-row {
  display: grid;
  grid-template-columns: 1.5rem 2.1rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.22rem 0.45rem;
  border-radius: 0;
  background: transparent;
  border: 0;
  /* Status accent only (not a full frame) in tiles; the full card frame is added in rows mode. */
  border-left: 3px solid var(--matmon-border);
  min-width: 0;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.monitoring-tree-row:hover,
.monitoring-tree-row:focus-within {
  background: var(--matmon-surface-strong);
}

.monitoring-tree-node[data-state="error"] > .monitoring-tree-row {
  border-left-color: #ff6b76;
}

.monitoring-tree-node[data-state="warning"] > .monitoring-tree-row {
  border-left-color: #f3b36b;
}

.monitoring-tree-node[data-state="ok"] > .monitoring-tree-row {
  border-left-color: #a8c814;
}

.monitoring-tree-node[data-state="error"] > .monitoring-tree-row {
  color: var(--matmon-foreground);
}

.monitoring-tree-node[data-state="error"] > .monitoring-tree-row .tree-kind,
.monitoring-tree-node[data-state="error"] > .monitoring-tree-row .tree-name {
  color: #ff6b76;
}

.monitoring-tree-node[data-state="warning"] > .monitoring-tree-row .tree-kind,
.monitoring-tree-node[data-state="warning"] > .monitoring-tree-row .tree-name {
  color: #f3b36b;
}

.monitoring-tree-node[data-state="ok"] > .monitoring-tree-row .tree-kind {
  color: #78d5c8;
}

.monitoring-tree-node[data-state="paused"] > .monitoring-tree-row .tree-kind,
.monitoring-tree-node[data-state="disabled"] > .monitoring-tree-row .tree-kind,
.monitoring-tree-node[data-state="unknown"] > .monitoring-tree-row .tree-kind {
  color: #7c8eab;
}

.monitoring-tree-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  white-space: nowrap;
}

.monitoring-tree-details {
  min-width: 0;
  max-width: 22rem;
  color: var(--matmon-muted);
  font-size: 0.74rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-tree-meta {
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 0;
  color: var(--matmon-muted);
  font-size: 0.74rem;
  overflow: hidden;
}

.monitoring-tree-count {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  white-space: nowrap;
}

.monitoring-tree-count.is-warning {
  color: #f3b36b;
  background: transparent;
  border-color: transparent;
}

.monitoring-tree-count.is-error {
  color: #ff6b76;
  background: transparent;
  border-color: transparent;
}

.monitoring-tree-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.08rem 0.28rem;
  border-radius: 999px;
  background: rgba(95, 141, 255, 0.08);
  border: 1px solid rgba(95, 141, 255, 0.15);
}

.monitoring-tree-value-label {
  color: var(--matmon-muted);
}

.monitoring-tree-value-number {
  color: var(--matmon-foreground);
  font-weight: 700;
}

.monitoring-tree-lastcheck {
  color: var(--matmon-muted);
}

.monitoring-tree-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.monitoring-tree-side .workspace-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-top: 0;
  gap: 0.08rem;
}

.monitoring-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--matmon-muted);
}

.monitoring-tree-toggle .ui-icon {
  width: 0.58rem;
  height: 0.58rem;
  transition: transform 0.14s ease;
}

.monitoring-tree-node.is-collapsed > .monitoring-tree-row .monitoring-tree-toggle .ui-icon {
  transform: rotate(0deg);
}

.monitoring-tree-node:not(.is-collapsed) > .monitoring-tree-row .monitoring-tree-toggle .ui-icon {
  transform: rotate(90deg);
}

.monitoring-tree-toggle:hover {
  color: var(--matmon-foreground);
  border-color: transparent;
  background: rgba(95, 141, 255, 0.08);
}

.monitoring-tree-toggle-spacer {
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

.monitoring-tree-children {
  display: grid;
  gap: var(--tree-gap);
  padding-left: 0.8rem;
  margin-left: 0.55rem;
  border-left: 1px dotted rgba(124, 142, 171, 0.34);
}

.monitoring-tree-node.is-collapsed > .monitoring-tree-children {
  display: none;
}

.monitoring-tree-node[data-tree-kind="sensor"] > .monitoring-tree-row {
  background: rgba(95, 141, 255, 0.06);
}

.monitoring-tree-node.is-move-source > .monitoring-tree-row {
  background: rgba(95, 141, 255, 0.12);
  box-shadow: inset 2px 0 0 rgba(95, 141, 255, 0.7);
}

.monitoring-tree-node.is-master-probe > .monitoring-tree-row {
  background: linear-gradient(90deg, rgba(95, 141, 255, 0.1), transparent 42%);
}

.monitoring-tree-node.is-master-probe > .monitoring-tree-row .tree-kind {
  border-color: rgba(95, 141, 255, 0.24);
  background: rgba(95, 141, 255, 0.16);
}

.monitoring-tree-node.is-master-probe > .monitoring-tree-row .tree-name {
  font-weight: 850;
}

.monitoring-tree-node.is-probe-root {
  margin-top: 0.18rem;
}

.monitoring-sensor-chip.is-move-source {
  border-color: rgba(95, 141, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.12);
}

.monitoring-tree.is-move-active .workspace-action-link,
.monitoring-tree.is-move-active .workspace-secondary-submit {
  opacity: 0.95;
}

.monitoring-tree .workspace-action-link,
.monitoring-tree .workspace-secondary-submit {
  min-height: 20px;
  padding: 0.08rem 0.14rem;
  gap: 0.16rem;
  width: auto;
  white-space: nowrap;
  border-radius: 2px;
}

.monitoring-tree .workspace-row-actions > .workspace-action-link span,
.monitoring-tree .workspace-row-actions > .workspace-secondary-submit span,
.monitoring-tree .workspace-row-actions > form .workspace-secondary-submit span,
.monitoring-tree .workspace-row-actions > .workspace-action-menu > summary span,
.monitoring-list .workspace-row-actions > .workspace-action-link span,
.monitoring-list .workspace-row-actions > .workspace-secondary-submit span,
.monitoring-list .workspace-row-actions > form .workspace-secondary-submit span,
.monitoring-list .workspace-row-actions > .workspace-action-menu > summary span {
  display: none;
}

.monitoring-tree .workspace-action-link span,
.monitoring-tree .workspace-secondary-submit span {
  display: none;
}

.monitoring-tree [data-tree-move-target]:not([hidden]) {
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.24);
}

.monitoring-tree .workspace-row-actions {
  gap: 0.08rem;
}

.monitoring-tree .monitoring-action-trigger {
  width: 1.9rem;
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  opacity: 1;
}

.monitoring-tree .monitoring-action-trigger span {
  display: none;
}

.monitoring-tree .monitoring-action-trigger .ui-icon {
  width: 1rem;
  height: 1rem;
}

.monitoring-tree-row:hover .monitoring-action-trigger,
.monitoring-tree-row:focus-within .monitoring-action-trigger,
.monitoring-tree .workspace-action-menu[open] > .monitoring-action-trigger {
  opacity: 1;
}

.monitoring-tree .monitoring-action-trigger:hover,
.monitoring-tree .workspace-action-menu[open] > .monitoring-action-trigger {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.2);
  background: rgba(95, 141, 255, 0.08);
}

.monitoring-tree .monitoring-move-target:not([hidden]) {
  width: auto;
  min-width: 1.2rem;
  padding: 0 0.22rem;
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.28);
  color: var(--matmon-foreground);
}

.monitoring-tree-move-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.monitoring-tree-move-banner-main {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-weight: 700;
}

.monitoring-tree .tree-kind {
  /* In the tree the box is invisible (transparent) — size it to the icon instead of
     the fixed 1.9rem square from the base rule, so the icon sits on the same optical
     line as the name/toggle instead of floating in an oversized box. */
  width: auto;
  height: auto;
  min-width: 0;
  align-self: center;
  justify-content: center;
  padding: 0;
  font-size: 0.62rem;
  gap: 0.18rem;
  border-radius: 2px;
  background: transparent;
  border-color: transparent;
  white-space: nowrap;
}

.monitoring-tree .tree-kind .ui-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.monitoring-tree .tree-kind > span {
  display: none;
}

.monitoring-tree .tree-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  line-height: 1;
}

.monitoring-tree .state-pill {
  padding: 0.14rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.monitoring-tree .state-pill[data-state="error"] {
  background: rgba(255, 107, 118, 0.22);
  border-color: rgba(255, 107, 118, 0.6);
  color: #ff8a93;
}

.monitoring-tree .state-pill[data-state="warning"] {
  background: rgba(243, 179, 107, 0.22);
  border-color: rgba(243, 179, 107, 0.55);
  color: #f0b072;
}

.monitoring-tree .state-pill[data-state="ok"] {
  background: rgba(120, 213, 200, 0.18);
  border-color: rgba(120, 213, 200, 0.5);
  color: #7ad5c8;
}

.monitoring-tree .state-pill[data-state="paused"],
.monitoring-tree .state-pill[data-state="disabled"] {
  background: rgba(124, 142, 171, 0.18);
  border-color: rgba(124, 142, 171, 0.45);
  color: var(--matmon-muted);
}

/* Only hide the pill when there's genuinely no state (was hiding ok/paused too). */
.monitoring-tree-node[data-state="unknown"] > .monitoring-tree-row .state-pill {
  display: none;
}

/* Container summary pills (sensor count + warning/error counts) shown at the row end
   instead of a single state pill. Own class so the unknown-state hide above never
   catches them. */
.monitoring-count-pill {
  padding: 0.14rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(124, 142, 171, 0.4);
  background: rgba(124, 142, 171, 0.16);
  color: var(--matmon-muted);
  white-space: nowrap;
}

.monitoring-count-pill[data-count="warning"] {
  background: rgba(243, 179, 107, 0.22);
  border-color: rgba(243, 179, 107, 0.55);
  color: #f0b072;
}

.monitoring-count-pill[data-count="error"] {
  background: rgba(255, 107, 118, 0.22);
  border-color: rgba(255, 107, 118, 0.6);
  color: #ff8a93;
}

.monitoring-sensor-strip {
  display: flex;
  align-items: stretch;
  gap: var(--tree-gap);
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: thin;
}

.monitoring-tree-sensor-level {
  flex-wrap: wrap;
  overflow-x: visible;
  padding: 0;
}

.monitoring-sensor-strip.is-single-sensor {
  padding: 0;
  overflow: visible;
}

.monitoring-sensor-chip,
.monitoring-add-sensor-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-width: 7.8rem;
  max-width: 10.8rem;
  min-height: 2rem;
  border: 1px solid rgba(124, 142, 171, 0.2);
  border-left: 0.42rem solid var(--tree-state-color, #7c8eab);
  border-radius: 2px;
  background: var(--matmon-surface-strong);
  overflow: visible;
  position: relative;
}

.monitoring-sensor-chip[data-state="ok"] {
  border-left-color: #a8c814;
}

.monitoring-sensor-chip[data-state="warning"] {
  border-left-color: #f3b36b;
}

.monitoring-sensor-chip[data-state="error"] {
  border-left-color: #ff6b76;
}

.monitoring-sensor-chip[data-state="paused"],
.monitoring-sensor-chip[data-state="unknown"],
.monitoring-sensor-chip[data-state="disabled"] {
  border-left-color: #7c8eab;
}

.monitoring-sensor-chip-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon value";
  gap: 0 0.22rem;
  min-width: 0;
  padding: 0.16rem 1.35rem 0.16rem 0.26rem;
  color: inherit;
  text-decoration: none;
}

.monitoring-sensor-chip-main:hover {
  background: rgba(95, 141, 255, 0.06);
}

.monitoring-sensor-status {
  grid-area: icon;
  align-self: start;
  color: var(--tree-state-color, var(--matmon-muted));
}

.monitoring-sensor-status .ui-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.monitoring-sensor-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
}

.monitoring-sensor-value {
  grid-area: value;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--matmon-foreground);
  font-size: 0.82rem;
  font-weight: 700;
}

.monitoring-sensor-meta,
.monitoring-sensor-graph {
  display: none;
}

.monitoring-sensor-meta {
  grid-area: meta;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  overflow: hidden;
}

/* Type + time stay whole; the tag strip takes the rest and collapses overflow into a +N chip. */
.monitoring-sensor-meta > span:not(.monitoring-sensor-tags) {
  white-space: nowrap;
  flex: 0 0 auto;
}

.monitoring-sensor-tags {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}

.monitoring-sensor-tags .tree-tag {
  flex: 0 0 auto;
}

.tag-overflow-more {
  cursor: default;
}

.monitoring-sensor-graph {
  grid-area: graph;
  height: 2.2rem;
  min-width: 0;
}

html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-chip,
html[data-monitoring-size="s"] .monitoring-tree .monitoring-add-sensor-chip {
  min-width: 7rem;
  max-width: 9.6rem;
  min-height: 1.7rem;
}

/* Size S = genuinely compact: smaller fonts/icons + tighter chip. */
html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-chip-main {
  padding: 0.12rem 1.1rem 0.12rem 0.24rem;
}

html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-name,
html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-value {
  font-size: 0.68rem;
}

html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-meta {
  font-size: 0.6rem;
}

html[data-monitoring-size="s"] .monitoring-tree .monitoring-sensor-status .ui-icon {
  width: 0.78rem;
  height: 0.78rem;
}

html[data-monitoring-size="m"] .monitoring-tree .monitoring-sensor-chip,
html[data-monitoring-size="m"] .monitoring-tree .monitoring-add-sensor-chip {
  min-width: 9.8rem;
  max-width: 13.4rem;
}

html[data-monitoring-size="m"] .monitoring-tree .monitoring-sensor-chip-main {
  grid-template-areas:
    "icon name"
    "icon value"
    "meta meta";
  padding: 0.2rem 1.35rem 0.2rem 0.32rem;
}

html[data-monitoring-size="m"] .monitoring-tree .monitoring-sensor-meta {
  display: inline-flex;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-chip,
html[data-monitoring-size="l"] .monitoring-tree .monitoring-add-sensor-chip {
  min-width: 14rem;
  max-width: 18.5rem;
  min-height: 4.8rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-chip-main {
  grid-template-areas:
    "icon name"
    "icon value"
    "meta meta"
    "graph graph";
  gap: 0.06rem 0.25rem;
  padding: 0.26rem 1.45rem 0.26rem 0.36rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-name {
  font-size: 0.95rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-value {
  font-size: 0.95rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-status .ui-icon {
  width: 1.1rem;
  height: 1.1rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-meta {
  display: inline-flex;
  font-size: 0.78rem;
}

html[data-monitoring-size="l"] .monitoring-tree .monitoring-sensor-graph {
  display: block;
}

/* Hover overlay: dim the chip and float the action button on top of it. */
.monitoring-sensor-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(6, 9, 16, 0.74);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 5;
}

.monitoring-sensor-chip:hover::after,
.monitoring-sensor-chip:focus-within::after {
  opacity: 1;
}

/* Hover action cluster: floats on the dimmed chip (vertically centred, right edge).
   Shown while the chip is hovered/focused, and kept visible while its menu is open
   (:has) so moving onto the dropdown doesn't hide it. */
.monitoring-sensor-overlay-actions {
  display: none;
  position: absolute;
  /* Span the full height and centre the buttons with flex instead of
     `top:50% + translateY(-50%)`. A transform here would make this the containing
     block for the menu panel's `position: fixed`, offsetting the dropdown down/right
     (the bug that only hit sensor chips, not containers). */
  top: 0;
  bottom: 0;
  inset-inline-end: 0.35rem;
  z-index: 8;
  align-items: center;
  gap: 0.3rem;
}

.monitoring-sensor-chip:hover .monitoring-sensor-overlay-actions,
.monitoring-sensor-chip:focus-within .monitoring-sensor-overlay-actions,
.monitoring-sensor-chip:has(.monitoring-sensor-actions[open]) .monitoring-sensor-overlay-actions,
.monitoring-tree.is-move-active .monitoring-sensor-overlay-actions {
  display: inline-flex;
}

/* The <details> sits in normal flow inside the cluster, so its dropdown anchors to
   the ⋯ button (a clean dropdown) instead of floating 'somewhere'. */
.monitoring-sensor-overlay-actions .monitoring-sensor-actions {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.monitoring-sensor-action-menu > summary span {
  display: none;
}

/* Eye (open) + ⋯ buttons, styled to read on the dark overlay. */
.monitoring-sensor-open,
.monitoring-sensor-chip .monitoring-sensor-action-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  min-width: 1.7rem;
  height: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #0c1422;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  cursor: pointer;
}

.monitoring-sensor-open:hover,
.monitoring-sensor-chip .monitoring-sensor-action-menu > summary:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
}

/* Light mode: invert the effect — a milky overlay that washes the chip out, with
   dark solid buttons that pop against it (a dark veil + white buttons read as too
   heavy on the otherwise light UI). */
html[data-theme="light"] .monitoring-sensor-chip::after {
  background: rgba(244, 247, 252, 0.66);
}

html[data-theme="light"] .monitoring-sensor-open,
html[data-theme="light"] .monitoring-sensor-chip .monitoring-sensor-action-menu > summary {
  background: rgba(20, 28, 42, 0.94);
  border-color: rgba(20, 28, 42, 0.94);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

html[data-theme="light"] .monitoring-sensor-open:hover,
html[data-theme="light"] .monitoring-sensor-chip .monitoring-sensor-action-menu > summary:hover {
  background: #0c1422;
  border-color: #0c1422;
  color: #fff;
}

.monitoring-sensor-open .ui-icon,
.monitoring-sensor-action-menu > summary .ui-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.monitoring-sensor-action-menu .workspace-action-menu-panel {
  min-width: 9.5rem;
}

.monitoring-add-chip-menu {
  position: relative;
  overflow: visible;
}

.monitoring-add-chip-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 100%;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  list-style: none;
}

.monitoring-add-chip-menu > summary::-webkit-details-marker {
  display: none;
}

.monitoring-add-chip-menu .workspace-action-menu-panel {
  min-width: 9.5rem;
}

.monitoring-add-chip-menu[open] {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.28);
}

.monitoring-add-sensor-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  min-width: 5rem;
  color: var(--matmon-muted);
  text-decoration: none;
  border-left-color: rgba(95, 141, 255, 0.68);
  background: var(--matmon-surface);
}

.monitoring-add-sensor-chip:hover {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.28);
  border-left-color: rgba(95, 141, 255, 0.9);
}

.tree-sensor-strip {
  grid-column: 2 / -1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.05rem;
}

.tree-sensor-chips {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.tree-sensor-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name state"
    "type value";
  gap: 0.15rem 0.4rem;
  min-width: 160px;
  max-width: 230px;
  padding: 0.42rem 0.5rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  border-left: 3px solid var(--series-color, var(--matmon-accent));
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.tree-sensor-chip:hover {
  background: rgba(95, 141, 255, 0.08);
  border-color: rgba(95, 141, 255, 0.24);
}

.tree-sensor-chip-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
}

.tree-sensor-chip-type {
  grid-area: type;
  color: var(--matmon-muted);
  font-size: 0.68rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-sensor-chip-value {
  grid-area: value;
  justify-self: end;
  color: var(--matmon-foreground);
  font-size: 0.76rem;
  font-weight: 700;
}

.tree-sensor-chip-state {
  grid-area: state;
  justify-self: end;
  align-self: start;
}

.tree-add-sensor {
  align-self: stretch;
  margin-left: auto;
  white-space: nowrap;
}

.monitoring-list-shell {
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.monitoring-list-head,
.monitoring-list-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.65fr) minmax(15rem, 1.35fr) minmax(10rem, 0.8fr) minmax(14rem, 1fr) minmax(5rem, auto);
  align-items: center;
  gap: 0.65rem;
  min-width: 980px;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-head,
html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-row {
  grid-template-columns: minmax(7rem, 0.55fr) minmax(11rem, 1.05fr) minmax(8rem, 0.72fr) minmax(10rem, 0.9fr) minmax(4.5rem, auto);
  min-width: 860px;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-head,
html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-row {
  grid-template-columns: minmax(9rem, 0.7fr) minmax(16rem, 1.45fr) minmax(12rem, 0.9fr) minmax(18rem, 1.15fr) minmax(5.5rem, auto);
  min-width: 1080px;
}

.monitoring-list-head {
  padding: 0 0.55rem;
  color: var(--matmon-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monitoring-list-row {
  position: relative;
  padding: 0.42rem 0.55rem 0.42rem 0.72rem;
  border: 1px solid rgba(124, 142, 171, 0.13);
  border-left-width: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(124, 142, 171, 0.055), transparent 45%), var(--matmon-surface-strong);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.monitoring-list-row[data-kind="probe"][data-depth="0"] {
  background:
    linear-gradient(90deg, rgba(95, 141, 255, 0.1), transparent 42%),
    var(--matmon-surface-strong);
  border-color: rgba(95, 141, 255, 0.18);
}

.monitoring-list-row[data-kind="probe"][data-depth="0"] .tree-kind {
  border-color: rgba(95, 141, 255, 0.24);
  background: rgba(95, 141, 255, 0.16);
}

.monitoring-list-row[data-state="ok"] {
  border-left-color: var(--matmon-success);
}

.monitoring-list-row[data-state="warning"] {
  border-left-color: var(--matmon-warning);
}

.monitoring-list-row[data-state="error"] {
  border-left-color: var(--matmon-danger);
}

.monitoring-list-row[data-state="paused"],
.monitoring-list-row[data-state="unknown"],
.monitoring-list-row[data-state="disabled"],
.monitoring-list-row[data-state="neutral"] {
  border-left-color: var(--matmon-muted);
}

.monitoring-list-status,
.monitoring-list-main,
.monitoring-list-endpoint,
.monitoring-list-info,
.monitoring-list-side {
  min-width: 0;
}

.monitoring-list-status {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.monitoring-list-state-dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--matmon-muted);
  box-shadow: 0 0 0 3px rgba(124, 142, 171, 0.12);
}

.monitoring-list-row[data-state="ok"] .monitoring-list-state-dot {
  background: var(--matmon-success);
  box-shadow: 0 0 0 3px rgba(120, 213, 200, 0.13);
}

.monitoring-list-row[data-state="warning"] .monitoring-list-state-dot {
  background: var(--matmon-warning);
  box-shadow: 0 0 0 3px rgba(243, 179, 107, 0.14);
}

.monitoring-list-row[data-state="error"] .monitoring-list-state-dot {
  background: var(--matmon-danger);
  box-shadow: 0 0 0 3px rgba(255, 127, 147, 0.16);
}

.monitoring-list-muted-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(124, 142, 171, 0.18);
  border-radius: 999px;
  color: var(--matmon-muted);
  background: rgba(124, 142, 171, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
}

.monitoring-list-main {
  display: grid;
  gap: 0.08rem;
}

.monitoring-list-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.4rem;
}

.monitoring-list-title-row .tree-kind {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 0;
  justify-content: center;
  padding: 0;
}

.monitoring-list-title {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-list-title:hover {
  color: var(--matmon-accent);
}

.monitoring-list-path,
.monitoring-list-endpoint small,
.monitoring-list-info small {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-muted);
  font-size: 0.68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-list-endpoint,
.monitoring-list-info {
  display: grid;
  gap: 0.08rem;
  align-content: center;
}

.monitoring-list-endpoint strong,
.monitoring-list-info span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-list-endpoint strong {
  font-family: var(--matmon-mono-font);
}

.monitoring-list-side {
  display: grid;
  justify-items: end;
  gap: 0.22rem;
  text-align: right;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-row {
  gap: 0.45rem;
  padding: 0.3rem 0.42rem 0.3rem 0.58rem;
  border-radius: 5px;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-main {
  gap: 0.04rem;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-title-row {
  gap: 0.28rem;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-title {
  font-size: 0.82rem;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-path,
html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-endpoint small,
html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-info small {
  display: none;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-endpoint strong,
html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-info span {
  font-size: 0.7rem;
}

html[data-monitoring-size="s"] .monitoring-list-shell .monitoring-list-icon-action {
  width: 1.45rem;
  min-width: 1.45rem;
  min-height: 1.45rem;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-row {
  gap: 0.72rem;
  padding: 0.48rem 0.62rem 0.48rem 0.72rem;
  border-radius: 8px;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-main {
  gap: 0.12rem;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-title {
  font-size: 0.92rem;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-path {
  font-size: 0.72rem;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-endpoint strong,
html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-info span {
  font-size: 0.82rem;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-info span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-info small {
  display: block;
}

html[data-monitoring-size]:not([data-monitoring-size="s"]) .monitoring-list-shell .monitoring-list-icon-action {
  width: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
}

.monitoring-list-icon-action {
  width: 1.65rem;
  min-width: 1.65rem;
  min-height: 1.65rem;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
}

.monitoring-list-icon-action span {
  display: none;
}

.side-column {
  display: grid;
  gap: 1rem;
}

.probe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.probe-result-list {
  display: grid;
  gap: 0.38rem;
}

.probe-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.48rem 0.58rem 0.46rem;
  border-radius: 7px;
  border: 1px solid var(--matmon-border);
  border-left: 3px solid var(--series-color, var(--matmon-accent));
  background:
    linear-gradient(90deg, rgba(95, 141, 255, 0.06), transparent 42%),
    var(--matmon-surface-strong);
}

.probe-result-row[data-state="ok"] {
  border-left-color: #78d5c8;
}

.probe-result-row[data-state="warning"] {
  border-left-color: #f3b36b;
}

.probe-result-row[data-state="error"] {
  border-left-color: #ff7f93;
}

.probe-result-row[data-state="paused"],
.probe-result-row[data-state="unknown"],
.probe-result-row[data-state="disabled"] {
  border-left-color: #6f7786;
}

.probe-result-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.probe-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 5px;
  color: var(--series-color, var(--matmon-accent));
  background: rgba(95, 141, 255, 0.1);
}

.probe-result-icon .ui-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.probe-result-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.probe-result-title-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.probe-result-title-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-size: 0.84rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-result-path,
.probe-result-message,
.probe-result-time {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-result-message {
  color: color-mix(in srgb, var(--matmon-muted) 82%, var(--matmon-foreground));
}

.probe-result-side {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
  min-width: 4.5rem;
  text-align: right;
}

.probe-state {
  text-align: right;
}

.state-pill,
.graph-state,
.probe-state span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  color: var(--matmon-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  background: rgba(124, 142, 171, 0.14);
}

.state-pill[data-state="ok"],
.graph-state[data-state="ok"],
.probe-state span[data-state="ok"] {
  background: rgba(120, 213, 200, 0.2);
}

.state-pill[data-state="warning"],
.graph-state[data-state="warning"],
.probe-state span[data-state="warning"] {
  background: rgba(243, 179, 107, 0.2);
}

.state-pill[data-state="error"],
.graph-state[data-state="error"],
.probe-state span[data-state="error"] {
  background: rgba(255, 127, 147, 0.2);
}

.state-pill[data-state="paused"],
.graph-state[data-state="paused"],
.probe-state span[data-state="paused"] {
  background: rgba(124, 142, 171, 0.22);
}

.state-pill[data-state="unknown"],
.graph-state[data-state="unknown"],
.probe-state span[data-state="unknown"],
.state-pill[data-state="disabled"],
.graph-state[data-state="disabled"],
.probe-state span[data-state="disabled"] {
  background: rgba(124, 142, 171, 0.18);
}

.sensor-pill {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.sensor-pill span {
  display: block;
  font-weight: 700;
}

.empty-state {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: var(--matmon-muted);
  background: var(--matmon-surface-strong);
  border: 1px dashed var(--matmon-border);
}

.graph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.sensor-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sensor-highlights-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.sensor-highlight-card {
  flex: 0 0 clamp(280px, 34vw, 360px);
  min-width: 280px;
  scroll-snap-align: start;
}

.dashboard-home-shell .sensor-highlight-card {
  flex-basis: clamp(260px, 28vw, 330px);
  min-width: 260px;
}

.graph-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem 0.65rem;
  position: relative;
  overflow: hidden;
}

.graph-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--series-color, var(--matmon-accent));
  opacity: 0.9;
}

.sensor-card-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.sensor-card-link:hover {
  border-color: rgba(95, 141, 255, 0.28);
  background: rgba(95, 141, 255, 0.06);
}

.sensor-card-head {
  gap: 1rem;
}

.sensor-card-main {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.sensor-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.sensor-card-title .ui-icon {
  color: var(--series-color, var(--matmon-accent));
}

.sensor-highlight-card .sensor-card-title .ui-icon {
  color: #f6c743;
}

.sensor-card-path {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  word-break: break-word;
}

.sensor-card-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sensor-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.4rem;
  padding: 0.16rem 0.45rem;
  border-radius: 4px;
  background: rgba(124, 142, 171, 0.12);
  color: var(--matmon-muted);
  font-size: 0.7rem;
  line-height: 1;
}

.sensor-card-metric {
  justify-items: end;
  text-align: right;
  gap: 0.15rem;
}

.sensor-state-pill {
  margin-bottom: 0.15rem;
}

.sensor-card-metric strong {
  font-size: 1.6rem;
}

.sensor-card-link-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--series-color, var(--matmon-accent));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  background: rgba(246, 199, 67, 0.14);
  border: 1px solid rgba(246, 199, 67, 0.24);
  color: #f6c743;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.highlight-pill .ui-icon {
  width: 0.7rem;
  height: 0.7rem;
  color: #f6c743;
}

.sensor-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.sensor-header-side {
  min-width: 220px;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  border-left: 3px solid var(--sensor-state-color, var(--matmon-accent));
}

.sensor-header-main {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
}

.sensor-path {
  color: var(--matmon-muted);
  font-size: 0.82rem;
  word-break: break-word;
}

.sensor-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sensor-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  background: rgba(124, 142, 171, 0.14);
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1;
}

.sensor-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.sensor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem 0.16rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--matmon-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 38%, transparent);
  color: var(--matmon-foreground);
  font-size: 0.72rem;
  line-height: 1;
}

.sensor-tag .ui-icon {
  width: 0.78rem;
  height: 0.78rem;
  opacity: 0.85;
}

.sensor-tag.is-inherited {
  background: rgba(124, 142, 171, 0.12);
  border-color: color-mix(in srgb, var(--matmon-border) 70%, transparent);
  color: var(--matmon-muted);
}

.tree-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.tree-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.46rem 0.1rem 0.36rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 32%, transparent);
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.tree-tag .ui-icon {
  width: 0.68rem;
  height: 0.68rem;
  opacity: 0.8;
}

.tree-tag.is-mini {
  padding: 0.04rem 0.4rem;
  font-size: 0.68rem;
}

/* ---- Tag input (chips + free text, progressive enhancement of a text field) ---- */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  cursor: text;
  min-height: 2.3rem;
  padding: 0.3rem 0.45rem;
}

.tag-input-chips {
  display: contents;
}

.tag-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.25rem 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--matmon-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 38%, transparent);
  color: var(--matmon-foreground);
  font-size: 0.76rem;
  line-height: 1.4;
}

.tag-input-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--matmon-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.tag-input-remove:hover {
  background: color-mix(in srgb, var(--matmon-accent) 30%, transparent);
  color: var(--matmon-foreground);
}

.tag-input-field {
  flex: 1 1 6rem;
  min-width: 6rem;
  border: none;
  outline: none;
  background: transparent;
  color: var(--matmon-foreground);
  font-size: 0.9rem;
  padding: 0.15rem 0.1rem;
}

.tag-input-field::placeholder {
  color: var(--matmon-muted);
}

/* ---- Element picker (input-looking trigger + searchable dialog) ---- */
.element-picker {
  position: relative;
  width: 100%;
}

.element-picker-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  /* Stay at the field width and truncate inside instead of growing with the content. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.5;
  /* Match the exact rendered height of a sibling workspace-input/-select: line box
     (1.5em) + the workspace-input vertical padding (0.5rem × 2) + the 1px borders.
     Bootstrap's .form-control min-height assumes its own .75rem padding, so without
     this the button trigger ends up a couple px shorter than the inputs around it. */
  min-height: calc(1.5em + 1rem + 2px);
}

.element-picker-trigger-label {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element-picker-trigger.is-empty .element-picker-trigger-label {
  color: var(--matmon-muted);
  font-weight: 400;
}

.element-picker-trigger-path {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--matmon-muted);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Truncate the FRONT of the path (ellipsis on the left) so the end — the element
     and its nearest parents — is always visible. */
  direction: rtl;
  text-align: left;
}

.element-picker-trigger-icon {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.7;
}

.element-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 1rem;
  background: rgba(8, 12, 20, 0.55);
  backdrop-filter: blur(2px);
}

/* The `display: flex` above (and on options) is an author rule, so it overrides the
   UA `[hidden] { display: none }`. Without these the dialog can never be hidden
   (won't close, selecting doesn't dismiss it) and filtering can't hide options. */
.element-picker-backdrop[hidden],
.element-picker-option[hidden] {
  display: none;
}

.element-picker-panel {
  width: min(40rem, 100%);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--matmon-surface);
  border: 1px solid var(--matmon-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.element-picker-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--matmon-border);
}

.element-picker-search {
  position: relative;
  /* basis 0 + min-width 0 so it actually fills the head regardless of content. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.element-picker-search .ui-icon {
  position: absolute;
  left: 0.6rem;
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.6;
  pointer-events: none;
}

.element-picker-search .workspace-input {
  padding-left: 2rem;
  width: 100%;
}

/* Element ⇆ Tag toggle (segmented control) + mode visibility. */
.element-picker-mode {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--matmon-border);
  border-radius: 8px;
  overflow: hidden;
}

.element-picker-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--matmon-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.element-picker-mode-btn.is-active {
  background: rgba(95, 141, 255, 0.16);
  color: var(--matmon-text);
}

.element-picker-mode-btn .ui-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.element-picker-tag-list {
  display: none;
}

.element-picker.is-tag-mode [data-picker-list]:not(.element-picker-tag-list) {
  display: none;
}

.element-picker.is-tag-mode .element-picker-tag-list {
  display: block;
}

.element-picker.is-tag-mode .element-picker-tag {
  display: none;
}

.element-picker-option-empty {
  padding: 0.6rem 0.7rem;
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.element-picker-tag {
  /* Override .workspace-select's width:100% — otherwise the tag dropdown takes the
     whole head, collapsing the search box and pushing the close (X) off-screen. */
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;
  max-width: 11rem;
}

.element-picker-close {
  flex: 0 0 auto;
  padding: 0.35rem 0.5rem;
}

.element-picker-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  overflow-y: auto;
}

.element-picker-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  /* Tree indentation by depth (zeroed in flat/search mode). */
  padding-left: calc(0.55rem + var(--picker-depth, 0) * 1.05rem);
  border-radius: 8px;
  cursor: pointer;
}

.element-picker-list.is-flat .element-picker-option {
  padding-left: 0.55rem;
}

/* In tree mode the indentation conveys the hierarchy, so the full path is noise. */
.element-picker-list:not(.is-flat) .element-picker-option-path {
  display: none;
}

.element-picker-option:hover,
.element-picker-option:focus-visible {
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
  outline: none;
}

.element-picker-option.is-selected {
  background: color-mix(in srgb, var(--matmon-accent) 22%, transparent);
}

.element-picker-option-kind {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(124, 142, 171, 0.16);
  color: var(--matmon-muted);
}

.element-picker-option-kind .ui-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.element-picker-option-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.element-picker-option-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element-picker-option-path {
  font-size: 0.72rem;
  color: var(--matmon-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element-picker-option-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  justify-content: flex-end;
  max-width: 12rem;
}

.element-picker-clear {
  color: var(--matmon-muted);
  font-size: 0.82rem;
}

.element-picker-empty {
  padding: 1rem;
  text-align: center;
  color: var(--matmon-muted);
}

body.element-picker-open {
  overflow: hidden;
}

.usage-level-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
  background: rgba(95, 141, 255, 0.12);
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
}

.usage-level-pill[data-level="low"] {
  color: #78d5c8;
  background: rgba(120, 213, 200, 0.14);
}

.usage-level-pill[data-level="moderate"] {
  color: #f3b36b;
  background: rgba(243, 179, 107, 0.14);
}

.usage-level-pill[data-level="high"] {
  color: #ff7f93;
  background: rgba(255, 127, 147, 0.14);
}

.sensor-state-message {
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.sensor-header-side {
  display: grid;
  justify-items: end;
  gap: 0.55rem;
  text-align: right;
}

.sensor-header-meta {
  display: grid;
  gap: 0.15rem;
}

.sensor-current-value strong {
  display: block;
  color: var(--sensor-state-color, var(--matmon-foreground));
  font-size: 1.9rem;
  line-height: 1;
}

.sensor-current-value span {
  color: var(--matmon-muted);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sensor-header-actions {
  justify-content: flex-end;
}

.probe-usage-side {
  min-width: min(340px, 100%);
  gap: 0.3rem;
}

.probe-usage-summary {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.28rem;
}

.probe-usage-metric {
  min-width: 0;
  padding: 0.24rem 0.32rem;
  border-radius: 5px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  text-align: left;
}

.probe-usage-metric span {
  display: block;
  color: var(--matmon-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.probe-usage-metric strong {
  display: block;
  margin-top: 0.08rem;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(124, 142, 171, 0.14);
  color: var(--matmon-muted);
}

.channel-mode-pill[data-mode="fixed"] {
  background: rgba(120, 213, 200, 0.14);
  color: var(--matmon-success);
}

.channel-mode-pill[data-mode="dynamic"] {
  background: rgba(95, 141, 255, 0.14);
  color: var(--matmon-accent);
}

.probe-usage-group-list {
  display: grid;
  gap: 0.45rem;
}

.probe-usage-group {
  overflow: hidden;
  border-radius: var(--matmon-radius-medium);
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow-sm);
}

.probe-usage-group summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.72rem 0.78rem;
  cursor: pointer;
}

.probe-usage-group summary::-webkit-details-marker {
  display: none;
}

.probe-usage-group-main {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.probe-usage-group-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.probe-usage-group-title .usage-level-pill {
  flex: 0 0 auto;
}

.probe-usage-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.55rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
}

.probe-usage-group-side {
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  text-align: right;
}

.probe-usage-load-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(124, 142, 171, 0.14);
}

.probe-usage-load-bar > span {
  display: block;
  width: var(--usage-percent, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(95, 141, 255, 0.58), rgba(120, 213, 200, 0.88));
}

.probe-usage-sensor-list {
  display: grid;
  gap: 0.28rem;
  padding: 0.55rem 0.6rem 0.6rem;
  border-top: 1px solid var(--matmon-border);
}

.probe-usage-sensor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.42rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(124, 142, 171, 0.12);
  background: rgba(124, 142, 171, 0.05);
}

.probe-usage-sensor-row[data-state="error"] {
  border-color: rgba(255, 127, 147, 0.24);
}

.probe-usage-sensor-row[data-state="warning"] {
  border-color: rgba(243, 179, 107, 0.22);
}

.probe-usage-sensor-row[data-state="ok"] {
  border-color: rgba(120, 213, 200, 0.18);
}

.probe-usage-sensor-main {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.probe-usage-sensor-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.probe-usage-sensor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem 0.45rem;
  color: var(--matmon-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.probe-usage-sensor-side {
  display: grid;
  justify-items: end;
  gap: 0.28rem;
  text-align: right;
}

.probe-usage-sensor-load {
  width: 100%;
  max-width: 180px;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(124, 142, 171, 0.14);
}

.probe-usage-sensor-load > span {
  display: block;
  width: var(--usage-percent, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(95, 141, 255, 0.5), rgba(246, 199, 67, 0.82));
}

.probe-usage-sensor-metrics {
  display: grid;
  gap: 0.08rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
}

.probe-usage-sensor-metrics strong {
  color: var(--matmon-foreground);
  font-size: 0.95rem;
}

.probe-usage-actions,
.probe-usage-sensor-actions {
  justify-content: flex-end;
}

.probe-usage-toolbar-panel {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
}

.probe-usage-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1.5fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) auto auto;
  align-items: end;
  gap: 0.45rem;
}

.probe-usage-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.probe-usage-view-switch .workspace-tab {
  min-height: 34px;
  padding: 0.4rem 0.72rem;
}

.probe-usage-filter-field {
  min-width: 0;
}

.probe-usage-highlight-check {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.probe-usage-distribution {
  display: grid;
  gap: 0.35rem;
}

.probe-usage-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.probe-usage-overview-card {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.probe-usage-overview-card-accent {
  border-color: var(--matmon-accent);
  background: color-mix(in srgb, var(--matmon-accent) 12%, var(--matmon-surface-soft));
}

.probe-usage-overview-card-accent strong {
  color: var(--matmon-accent);
}

.probe-usage-overview-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  color: var(--matmon-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.probe-usage-overview-note .ui-icon {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.12rem;
}

.probe-usage-overview-card span {
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.probe-usage-overview-card strong {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  word-break: break-word;
}

.probe-usage-distribution-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.probe-usage-distribution-bar {
  display: flex;
  width: 100%;
  height: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.probe-usage-distribution-segment {
  display: block;
  min-width: 0.18rem;
}

.probe-usage-distribution-segment[data-level="low"] {
  background: linear-gradient(90deg, rgba(95, 141, 255, 0.55), rgba(95, 141, 255, 0.82));
}

.probe-usage-distribution-segment[data-level="moderate"] {
  background: linear-gradient(90deg, rgba(120, 213, 200, 0.55), rgba(120, 213, 200, 0.88));
}

.probe-usage-distribution-segment[data-level="high"] {
  background: linear-gradient(90deg, rgba(243, 179, 107, 0.7), rgba(255, 127, 147, 0.82));
}

.probe-usage-log-hint {
  font-size: 0.78rem;
  color: var(--matmon-muted);
}

.probe-usage-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.probe-usage-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, 26%) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.probe-usage-log-row:hover {
  background: color-mix(in srgb, var(--matmon-accent) 10%, transparent);
}

.probe-usage-log-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.probe-usage-log-name {
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.probe-usage-log-meta {
  font-size: 0.72rem;
  color: var(--matmon-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.probe-usage-log-bar {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--matmon-border) 55%, transparent);
  overflow: hidden;
}

.probe-usage-log-bar span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(95, 141, 255, 0.55), rgba(95, 141, 255, 0.82));
}

.probe-usage-log-row[data-level="moderate"] .probe-usage-log-bar span {
  background: linear-gradient(90deg, rgba(120, 213, 200, 0.55), rgba(120, 213, 200, 0.88));
}

.probe-usage-log-row[data-level="high"] .probe-usage-log-bar span {
  background: linear-gradient(90deg, rgba(243, 179, 107, 0.7), rgba(255, 127, 147, 0.82));
}

.probe-usage-log-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  text-align: right;
}

/* System details (OS / host / subnets) shown per probe in System -> Probes. */
.system-probe-os {
  color: var(--matmon-muted);
  word-break: break-word;
}

.system-probe-subnets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.system-probe-subnets .sensor-chip {
  font-size: 0.7rem;
}

.probe-usage-distribution-legend {
  display: flex;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.probe-usage-distribution-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.7rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--matmon-border);
  border-radius: 999px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
  font-size: 0.72rem;
}

.probe-usage-distribution-chip strong {
  font-size: 0.72rem;
}

.probe-usage-distribution-chip span {
  color: var(--matmon-muted);
  font-size: 0.68rem;
}

.probe-usage-distribution-chip[data-level="low"] {
  border-color: rgba(95, 141, 255, 0.28);
}

.probe-usage-distribution-chip[data-level="moderate"] {
  border-color: rgba(120, 213, 200, 0.28);
}

.probe-usage-distribution-chip[data-level="high"] {
  border-color: rgba(243, 179, 107, 0.3);
}

.probe-usage-table-wrap,
.probe-usage-group-table-wrap {
  overflow-x: auto;
}

.probe-usage-table {
  width: 100%;
  min-width: 900px;
  table-layout: auto;
  border-collapse: collapse;
}

.probe-usage-table col.probe-usage-col-sensor {
  width: auto;
}

.probe-usage-table col.probe-usage-col-state {
  width: 1%;
}

.probe-usage-table col.probe-usage-col-schedule {
  width: 1%;
}

.probe-usage-table col.probe-usage-col-load {
  width: 1%;
}

.probe-usage-table col.probe-usage-col-traffic {
  width: 1%;
}

.probe-usage-table col.probe-usage-col-actions {
  width: 1%;
}

.probe-usage-table thead th {
  padding: 0.35rem 0.45rem 0.42rem;
  border-bottom: 1px solid var(--matmon-border);
  color: var(--matmon-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.probe-usage-table tbody tr:hover {
  background: rgba(124, 142, 171, 0.06);
}

.probe-usage-table-row td {
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid rgba(124, 142, 171, 0.11);
  vertical-align: top;
}

.probe-usage-table-row td:first-child {
  border-left: 3px solid transparent;
}

.probe-usage-table-row[data-state="error"] td:first-child {
  border-left-color: var(--matmon-danger);
}

.probe-usage-table-row[data-state="warning"] td:first-child {
  border-left-color: var(--matmon-warning);
}

.probe-usage-table-row[data-state="ok"] td:first-child {
  border-left-color: var(--matmon-success);
}

.probe-usage-table-row[data-state="paused"] td:first-child,
.probe-usage-table-row[data-state="unknown"] td:first-child,
.probe-usage-table-row[data-state="disabled"] td:first-child {
  border-left-color: var(--matmon-muted);
}

.probe-usage-cell-main,
.probe-usage-cell-state,
.probe-usage-cell-schedule,
.probe-usage-cell-load,
.probe-usage-cell-traffic,
.probe-usage-cell-actions {
  min-width: 0;
}

.probe-usage-cell-main,
.probe-usage-cell-state,
.probe-usage-cell-schedule,
.probe-usage-cell-load,
.probe-usage-cell-traffic {
}

.probe-usage-cell-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.probe-usage-cell-detail-line,
.probe-usage-cell-inline-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.probe-usage-cell-detail-line {
  gap: 0.22rem 0.35rem;
}

.probe-usage-cell-path,
.probe-usage-cell-target,
.probe-usage-cell-summary,
.probe-usage-cell-inline-line small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-usage-cell-path {
  flex: 1 1 auto;
}

.probe-usage-cell-target {
  flex: 0 1 auto;
  text-align: left;
}

.probe-usage-cell-inline-line strong {
  flex: 0 1 auto;
}

.probe-usage-cell-inline-line small {
  flex: 0 1 auto;
  text-align: left;
}

.probe-usage-cell-main strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-usage-cell-main small,
.probe-usage-cell-state small,
.probe-usage-cell-schedule small,
.probe-usage-cell-load small,
.probe-usage-cell-traffic small {
  color: var(--matmon-muted);
  font-size: 0.67rem;
  line-height: 1.18;
  display: block;
}

.probe-usage-cell-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-usage-cell-schedule strong,
.probe-usage-cell-traffic strong {
  font-size: 0.76rem;
}

.probe-usage-cell-load .probe-usage-cell-inline-line {
  align-items: baseline;
}

.probe-usage-cell-load .probe-usage-cell-inline-line small {
  font-size: 0.63rem;
}

.probe-usage-cell-load strong {
  font-size: 0.84rem;
}

.probe-usage-cell-state .probe-usage-cell-inline-line,
.probe-usage-cell-schedule .probe-usage-cell-inline-line,
.probe-usage-cell-traffic .probe-usage-cell-inline-line {
  justify-content: flex-start;
}

.probe-usage-cell-inline-note {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--matmon-muted);
  font-size: 0.64rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.probe-usage-cell-actions .workspace-row-actions {
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.probe-usage-cell-actions .workspace-action-link {
  min-height: 30px;
  padding-inline: 0.45rem;
  font-size: 0.76rem;
}

.probe-usage-cell-actions .workspace-action-link span {
  display: none;
}

.probe-usage-cell-actions .workspace-action-link .ui-icon {
  margin: 0;
}

.probe-usage-group-table-wrap {
  padding: 0.4rem;
  border-top: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.probe-usage-group .probe-usage-table {
  min-width: 860px;
}

.probe-usage-cell-dot {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  line-height: 1;
  flex: 0 0 auto;
}

.probe-usage-group-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.72rem 0.78rem;
  cursor: pointer;
  list-style: none;
}

.probe-usage-group-summary::-webkit-details-marker {
  display: none;
}

.probe-usage-group-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.probe-usage-group-count {
  color: var(--matmon-muted);
  font-size: 0.72rem;
}

.probe-usage-group-summary-main {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}

.probe-usage-group-summary-side {
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  text-align: right;
}

.sensor-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.sensor-statistics-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* The flex gap already spaces the header from the toolbar below it. */
.sensor-statistics-panel .panel-header {
  margin-bottom: 0;
}

.sensor-statistics-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sensor-statistics-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--matmon-muted);
}

.sensor-statistics-field input,
.sensor-statistics-field select {
  min-height: 32px;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--matmon-foreground);
}

/* selects need extra right padding so their arrow never sits over the text */
.sensor-statistics-field select {
  min-width: 9rem;
  padding-right: 1.9rem;
  background-position: right 0.6rem center;
}

.sensor-statistics-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.sensor-range-chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.sensor-range-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.sensor-range-chip:hover {
  color: var(--matmon-foreground);
  border-color: var(--matmon-accent);
}

.sensor-range-chip.is-active {
  background: color-mix(in srgb, var(--matmon-accent) 18%, transparent);
  border-color: var(--matmon-accent);
  color: var(--matmon-foreground);
}

.sensor-statistics-chart {
  border: 1px solid color-mix(in srgb, var(--matmon-border) 60%, transparent);
  border-radius: 6px;
  padding: 0.5rem 0.6rem 0.35rem;
  background: var(--matmon-surface-strong);
}

.sensor-statistics-chart svg {
  display: block;
  width: 100%;
  height: 7.5rem;
}

.sensor-statistics-bar {
  fill: var(--matmon-accent);
}

.sensor-statistics-bar[data-state="ok"],
.sensor-statistics-bar[data-state="healthy"] {
  fill: #5fcf9e;
}

.sensor-statistics-bar[data-state="warning"] {
  fill: var(--matmon-warning);
}

.sensor-statistics-bar[data-state="error"],
.sensor-statistics-bar[data-state="critical"] {
  fill: var(--matmon-danger);
}

.sensor-statistics-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--matmon-muted);
}

.sensor-statistics-scroll {
  overflow: auto;
  max-height: 22rem;
  border: 1px solid color-mix(in srgb, var(--matmon-border) 60%, transparent);
  border-radius: 6px;
}

.sensor-statistics-table tr.is-clickable {
  cursor: pointer;
}

.sensor-statistics-table tr.is-clickable:hover td {
  background: color-mix(in srgb, var(--matmon-accent) 12%, transparent);
}

.sensor-statistics-drill {
  margin-left: 0.35rem;
  color: var(--matmon-muted);
  font-weight: 700;
}

.sensor-statistics-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--matmon-surface-strong);
}

.sensor-statistics-empty {
  margin: 0.4rem;
}

.sensor-statistics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.sensor-statistics-table th {
  text-align: right;
  font-weight: 600;
  color: var(--matmon-muted);
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid var(--matmon-border);
  white-space: nowrap;
}

.sensor-statistics-table th:first-child,
.sensor-statistics-table td:first-child {
  text-align: left;
}

.sensor-statistics-table td {
  text-align: right;
  padding: 0.28rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--matmon-border) 55%, transparent);
  white-space: nowrap;
  color: var(--matmon-foreground);
}

.sensor-statistics-table td:first-child {
  color: var(--matmon-muted);
}

.sensor-statistics-table td.is-strong {
  font-weight: 600;
}

.sensor-statistics-table tbody tr:last-child td {
  border-bottom: none;
}

.sensor-statistics-table tr[data-state="warning"] td:first-child {
  box-shadow: inset 3px 0 0 var(--matmon-warning);
}

.sensor-statistics-table tr[data-state="critical"] td:first-child {
  box-shadow: inset 3px 0 0 var(--matmon-danger);
}

.sensor-unit-conversion {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--matmon-muted);
}

.sensor-unit-conversion-tag {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--matmon-accent) 16%, transparent);
  color: var(--matmon-foreground);
}

.sensor-unit-conversion strong {
  color: var(--matmon-foreground);
  font-weight: 600;
}

.sensor-window-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.sensor-window-card[data-state="ok"] {
  border-color: rgba(120, 213, 200, 0.22);
}

.sensor-window-card[data-state="warning"] {
  border-color: rgba(243, 179, 107, 0.22);
}

.sensor-window-card[data-state="error"] {
  border-color: rgba(255, 127, 147, 0.26);
}

.sensor-window-card[data-state="paused"],
.sensor-window-card[data-state="unknown"],
.sensor-window-card[data-state="disabled"] {
  border-color: rgba(124, 142, 171, 0.18);
}

.sensor-window-card.is-selected {
  border-color: rgba(95, 141, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.08);
}

.sensor-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sensor-window-figure {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.sensor-window-figure span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sensor-window-figure strong {
  font-size: 1.35rem;
  line-height: 1;
}

.sensor-window-figure small {
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.sensor-window-mini {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.sensor-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
  gap: 0.6rem;
  align-items: start;
}

.sensor-side-stack {
  display: grid;
  gap: 0.6rem;
}

.sensor-side-panel {
  min-width: 0;
}

.workspace-tabs,
.sensor-window-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.discovery-tabs {
  justify-content: flex-start;
  margin: 0.15rem 0 0.7rem;
}

.workspace-tab,
.sensor-window-tab {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.workspace-tab-count {
  display: inline-flex;
  align-items: center;
  min-width: 1.35rem;
  justify-content: center;
  padding: 0 0.35rem;
  margin-left: 0.1rem;
  border-radius: 999px;
  background: var(--matmon-surface-alt);
  color: var(--matmon-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.workspace-tab.is-active,
.sensor-window-tab.is-active {
  background: rgba(95, 141, 255, 0.14);
  border-color: rgba(95, 141, 255, 0.22);
  color: var(--matmon-foreground);
}

.alert-filter-bar {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

.alert-filter-tab {
  gap: 0.35rem;
}

.alert-filter-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: rgba(124, 142, 171, 0.12);
  color: var(--matmon-foreground);
  font-size: 0.68rem;
  line-height: 1;
}

.alert-filter-tab[data-tone="error"] strong {
  color: rgba(255, 107, 118, 0.98);
  background: rgba(255, 107, 118, 0.12);
}

.alert-filter-tab[data-tone="warning"] strong {
  color: rgba(243, 179, 107, 0.98);
  background: rgba(243, 179, 107, 0.13);
}

.alert-filter-tab[data-tone="ack"] strong {
  color: rgba(95, 141, 255, 0.98);
  background: rgba(95, 141, 255, 0.13);
}

.alert-filter-tab[data-tone="paused"] strong {
  color: rgba(124, 142, 171, 0.98);
  background: rgba(124, 142, 171, 0.14);
}

.workspace-filter-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.1rem 0 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.workspace-filter-note a {
  color: var(--matmon-accent);
  font-weight: 700;
  text-decoration: none;
}

.workspace-filter-note a:hover {
  text-decoration: underline;
}

.sensor-chart {
  height: 180px;
}

.sensor-chart-wrap {
  position: relative;
}

/* Holds the plot area (svg + overlaid y-axis) so axis labels never spill onto
   the x-axis labels rendered as a sibling below. */
.sensor-chart-plot {
  position: relative;
}

.sensor-chart-axis-y {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.15rem 0.3rem;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--matmon-muted);
  pointer-events: none;
}

.sensor-chart-axis-y span {
  background: color-mix(in srgb, var(--matmon-surface-strong) 78%, transparent);
  border-radius: 3px;
  padding: 0 0.15rem;
}

.sensor-chart-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--matmon-accent) 55%, transparent);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 2;
}

.sensor-chart-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--series-color, var(--matmon-accent));
  border: 2px solid var(--matmon-surface);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.sensor-chart-tooltip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, calc(-100% - 10px));
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.3rem 0.5rem;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.sensor-chart-tooltip span {
  color: var(--matmon-muted);
  font-size: 0.66rem;
}

.sensor-statistics-bar {
  transition: filter 0.1s ease;
}

.sensor-statistics-bar.is-hover {
  filter: brightness(1.18);
}

.sensor-window-summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.sensor-chart-legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.sensor-chart-legend-line {
  width: 1.4rem;
  height: 0;
  border-top: 2px solid var(--series-color, var(--matmon-accent));
  position: relative;
}

.sensor-chart-legend-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  border-top: 1px solid rgba(120, 213, 200, 0.14);
}

.sensor-channel-list,
.sensor-observation-list {
  display: grid;
  gap: 0.42rem;
}

/* Sensor detail tabs */
.sensor-detail-tabs {
  margin-bottom: 0;
}

/* Each detail tab stacks its sections with the same rhythm as the page shell,
   so the gap between e.g. the stats cards and the graph matches everywhere. */
.sensor-detail-tabpanel {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

/* General tab: channels are the prominent "IST" state, shown as a multi-column grid. */
.sensor-channel-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.sensor-channel-grid .sensor-channel-row {
  background: var(--matmon-surface);
  border: 1px solid var(--matmon-border);
}

.sensor-channel-row,
.sensor-observation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.sensor-channel-row[data-state="ok"],
.sensor-observation-row[data-state="ok"] {
  border-color: rgba(120, 213, 200, 0.22);
}

.sensor-channel-row[data-state="warning"],
.sensor-observation-row[data-state="warning"] {
  border-color: rgba(243, 179, 107, 0.22);
}

.sensor-channel-row[data-state="error"],
.sensor-observation-row[data-state="error"] {
  border-color: rgba(255, 127, 147, 0.26);
}

.sensor-channel-row[data-state="paused"],
.sensor-observation-row[data-state="paused"],
.sensor-channel-row[data-state="unknown"],
.sensor-observation-row[data-state="unknown"],
.sensor-channel-row[data-state="disabled"],
.sensor-observation-row[data-state="disabled"] {
  border-color: rgba(124, 142, 171, 0.18);
}

.sensor-channel-row[data-default="true"] {
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.1);
}

.sensor-channel-main,
.sensor-observation-main {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.sensor-channel-name,
.sensor-observation-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-weight: 700;
}

.sensor-channel-meta,
.sensor-observation-meta {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  word-break: break-word;
}

.sensor-channel-side,
.sensor-observation-side {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  text-align: right;
}

.sensor-channel-value {
  font-size: 1rem;
  font-weight: 700;
}

.sensor-channel-meter {
  width: clamp(5rem, 9vw, 8rem);
  height: 0.4rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.sensor-channel-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--matmon-accent);
  transition: width 0.3s ease;
}

.sensor-channel-meter[data-state="ok"] span,
.sensor-channel-meter[data-state="healthy"] span { background: #5fcf9e; }
.sensor-channel-meter[data-state="warning"] span { background: var(--matmon-warning); }
.sensor-channel-meter[data-state="error"] span,
.sensor-channel-meter[data-state="critical"] span { background: var(--matmon-danger); }

.sensor-channel-gauge {
  width: 4.2rem;
  height: 2.35rem;
}

.sensor-channel-gauge-track {
  fill: none;
  stroke: var(--matmon-surface-strong);
  stroke-width: 9;
}

.sensor-channel-gauge-fill {
  fill: none;
  stroke: var(--matmon-accent);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.sensor-channel-gauge[data-state="ok"] .sensor-channel-gauge-fill,
.sensor-channel-gauge[data-state="healthy"] .sensor-channel-gauge-fill { stroke: #5fcf9e; }
.sensor-channel-gauge[data-state="warning"] .sensor-channel-gauge-fill { stroke: var(--matmon-warning); }
.sensor-channel-gauge[data-state="error"] .sensor-channel-gauge-fill,
.sensor-channel-gauge[data-state="critical"] .sensor-channel-gauge-fill { stroke: var(--matmon-danger); }

.sensor-threshold-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 1.1rem;
  margin-top: 0.4rem;
}

.sensor-threshold-visual {
  display: grid;
  gap: 0.25rem;
  max-width: 14rem;
}

.sensor-threshold-log {
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--matmon-foreground);
  min-height: auto;
  padding-bottom: 0.35rem;
}

.sensor-channel-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.sensor-channel-default-button {
  min-height: 28px;
  padding: 0.18rem 0.45rem;
  font-size: 0.76rem;
}

.sensor-channel-default-button.is-active {
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.28);
  color: var(--matmon-foreground);
}

.sensor-observation-side .sensor-channel-value {
  font-size: 0.95rem;
}

.graph-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.graph-title {
  font-size: 0.92rem;
  font-weight: 700;
}

.graph-desc {
  margin-top: 0.15rem;
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.graph-metric {
  text-align: right;
}

.graph-metric strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.graph-metric span {
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.sparkline {
  width: 100%;
  height: 80px;
  overflow: visible;
}

.sparkline path {
  vector-effect: non-scaling-stroke;
}

.sparkline [data-role="area"] {
  fill: rgba(120, 213, 200, 0.07);
  stroke: none;
}

.sparkline [data-role="line"] {
  fill: none;
  stroke: var(--series-color, var(--matmon-accent));
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graph-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.graph-state {
  text-transform: none;
  letter-spacing: 0.01em;
}

.dashboard-tree-list .tree-row {
  padding: 0.4rem 0.55rem;
  gap: 0.55rem;
}

.dashboard-tree-row {
  align-items: start;
}

.dashboard-tree-row .tree-kind {
  margin-top: 0.05rem;
}

.dashboard-tree-row .tree-main {
  gap: 0.08rem;
}

.dashboard-tree-row .tree-details,
.dashboard-tree-row .tree-summary,
.dashboard-tree-row .tree-state-message {
  font-size: 0.75rem;
}

.dashboard-panel-link {
  min-height: 28px;
  padding: 0.22rem 0.52rem;
  font-size: 0.76rem;
}

.dashboard-sensors-panel {
  overflow: visible;
}

.dashboard-sensor-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.dashboard-home-shell .dashboard-sensor-board {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.38rem;
}

.dashboard-sensor-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.38fr);
  gap: 0.65rem;
  min-width: 0;
  padding: 0.52rem 0.58rem 0.5rem;
  border-radius: 7px;
  border: 1px solid var(--matmon-border);
  border-left: 3px solid var(--series-color, var(--matmon-accent));
  background:
    linear-gradient(90deg, rgba(95, 141, 255, 0.07), transparent 38%),
    var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.dashboard-sensor-tile:hover {
  color: var(--matmon-foreground);
  border-color: rgba(95, 141, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(95, 141, 255, 0.11), transparent 42%),
    var(--matmon-surface-strong);
  transform: translateY(-1px);
}

.dashboard-sensor-tile[data-state="ok"] {
  border-left-color: #78d5c8;
}

.dashboard-sensor-tile[data-state="warning"] {
  border-left-color: #f3b36b;
}

.dashboard-sensor-tile[data-state="error"] {
  border-left-color: #ff7f93;
}

.dashboard-sensor-tile[data-state="paused"],
.dashboard-sensor-tile[data-state="unknown"],
.dashboard-sensor-tile[data-state="disabled"] {
  border-left-color: #6f7786;
}

.dashboard-sensor-tile-main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.dashboard-sensor-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.dashboard-sensor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  color: var(--series-color, var(--matmon-accent));
  background: rgba(95, 141, 255, 0.1);
  flex: 0 0 auto;
}

.dashboard-sensor-icon .ui-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.dashboard-sensor-title {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sensor-path,
.dashboard-sensor-message {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sensor-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex-wrap: wrap;
}

.dashboard-sensor-meta span {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 14rem);
  min-height: 1.25rem;
  padding: 0.1rem 0.34rem;
  border-radius: 4px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sensor-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.22rem;
  min-width: 0;
  text-align: right;
}

.dashboard-sensor-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.18rem;
  min-width: 0;
  color: var(--series-color, var(--matmon-accent));
}

.dashboard-sensor-value strong {
  font-size: 1.3rem;
  line-height: 1;
}

.dashboard-sensor-value span {
  color: var(--matmon-muted);
  font-size: 0.72rem;
}

.dashboard-sensor-sparkline {
  width: 7.2rem;
  height: 2.1rem;
  opacity: 0.95;
}

.dashboard-highlight-pill {
  flex: 0 0 auto;
  padding-block: 0.05rem;
  font-size: 0.64rem;
}

.dashboard-sensor-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.45rem;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.config-grid-stack {
  grid-template-columns: minmax(0, 1fr);
}

.config-block {
  padding: 0.7rem;
}

.config-list {
  display: grid;
  gap: 0.65rem;
}

.config-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--matmon-border);
}

.config-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.config-row dt,
.config-row dd {
  margin: 0;
}

.config-row dt {
  color: var(--matmon-muted);
}

.config-row dd {
  text-align: right;
}

.config-code {
  margin: 0;
  padding: 0.7rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  color: var(--matmon-foreground);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  line-height: 1.45;
}

.system-tabs {
  margin-top: -0.25rem;
  margin-bottom: 0.55rem;
}

.system-table {
  display: grid;
  gap: 0.18rem;
}

.system-probe-table {
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.backup-overview-layout {
  align-items: start;
}

.backup-restore-layout {
  align-items: start;
}

.system-table-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1.3fr) minmax(5rem, 0.42fr) minmax(9rem, 0.9fr) minmax(11rem, 0.85fr) minmax(4.5rem, 0.35fr) minmax(11rem, 0.9fr);
  gap: 0.5rem;
  align-items: start;
  min-height: 2.35rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.system-probe-row.has-actions {
  grid-template-columns: minmax(11rem, 1.15fr) minmax(4rem, 0.36fr) minmax(8rem, 0.82fr) minmax(9rem, 0.75fr) minmax(3.5rem, 0.28fr) minmax(9rem, 0.72fr) minmax(10rem, auto);
  min-width: 0;
}

.system-probe-row > [role="cell"],
.system-probe-row > [role="columnheader"] {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.08rem;
  line-height: 1.22;
}

.system-probe-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.35rem;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
}

.system-probe-actions form {
  margin: 0;
  display: inline-flex;
}

.probe-overview-row {
  grid-template-columns: minmax(11rem, 1.2fr) minmax(4rem, 0.35fr) minmax(8rem, 0.76fr) minmax(9rem, 0.78fr) minmax(4rem, 0.3fr) minmax(7rem, auto);
}

.probe-overview-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

.system-probe-create-actions {
  margin-top: 0.65rem;
  justify-content: flex-end;
}

.probe-install-panel {
  margin: 0.28rem 0 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface);
}

.probe-install-panel summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.7rem;
  color: var(--matmon-foreground);
  font-weight: 800;
  cursor: pointer;
}

.probe-install-panel summary::marker {
  color: var(--matmon-muted);
}

.probe-install-panel summary small {
  margin-left: auto;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.probe-install-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.probe-install-method {
  display: grid;
  grid-template-rows: auto minmax(14rem, 1fr);
  gap: 0.4rem;
  min-width: 0;
  align-content: start;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.probe-install-method .panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.12rem;
  align-items: start;
  min-height: 2.65rem;
  margin-bottom: 0;
}

.probe-install-method .section-title {
  align-items: center;
  min-width: 0;
}

.probe-install-method .panel-hint {
  justify-self: start;
  white-space: normal;
}

.probe-install-method .config-code {
  min-height: 14rem;
  max-height: 22rem;
  overflow: auto;
  white-space: pre;
  word-break: normal;
  font-size: 0.72rem;
  line-height: 1.45;
}

.probe-install-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem 1rem;
}

.probe-install-header .dashboard-header-main {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
  padding-top: 0.06rem;
}

.probe-install-summary.workspace-summary-card {
  align-self: start;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.44rem 0.58rem;
}

.probe-install-summary .workspace-summary-metrics {
  flex-wrap: wrap;
}

.probe-install-actions {
  justify-content: flex-start;
  margin: 0.1rem 0 0.65rem;
}

.probe-install-method-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.65rem;
}

.probe-install-method-title {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.probe-copy-button {
  align-self: flex-start;
  white-space: nowrap;
}

.probe-copy-button.is-copied {
  border-color: rgba(120, 213, 200, 0.3);
  background: rgba(120, 213, 200, 0.12);
  color: var(--matmon-foreground);
}

.probe-install-note {
  margin-top: 0.6rem;
}

.system-table-head {
  min-height: 1.8rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  font-weight: 700;
  background: transparent;
}

.system-table-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-table-row > .system-probe-actions {
  overflow: visible;
}

.system-table-row > span > strong,
.system-table-row > span > small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-table-row > span > small {
  margin-top: 0.08rem;
  color: var(--matmon-muted);
  font-size: 0.7rem;
}

.backup-job-list {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.backup-job-card {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow);
}

.backup-job-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  min-width: 0;
}

.backup-job-card-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.backup-job-card-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.backup-job-card-main small {
  color: var(--matmon-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  word-break: break-word;
}

.backup-job-card-side {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  text-align: right;
  flex: 0 0 auto;
}

.backup-job-card-side small {
  color: var(--matmon-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.backup-job-card-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.45rem 0.6rem;
  min-width: 0;
}

.backup-job-card-meta-item {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 8px;
  background: var(--matmon-surface-soft);
}

.backup-job-card-meta-item span {
  color: var(--matmon-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.backup-job-card-meta-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 1.3;
}

.backup-job-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.backup-job-card-actions form {
  margin: 0;
}

.system-backup-job-row {
  grid-template-columns: minmax(14rem, 1.3fr) minmax(8rem, 0.85fr) minmax(11rem, 1fr) minmax(10rem, 0.8fr) minmax(10rem, 0.8fr) minmax(12rem, 0.95fr) minmax(16rem, 1.2fr);
}

.system-backup-snapshot-row {
  grid-template-columns: minmax(14rem, 1.35fr) minmax(10rem, 0.85fr) minmax(7rem, 0.45fr) minmax(12rem, 0.95fr) minmax(14rem, 1.1fr);
}

.system-backup-actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.35rem;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
}

.system-backup-actions > *,
.system-backup-actions form {
  flex: 0 0 auto;
}

.system-backup-actions .workspace-secondary-submit,
.system-backup-actions .workspace-danger-submit {
  white-space: nowrap;
}

.system-storage-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.55rem;
}

.system-storage-summary {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.storage-number strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
}

.storage-number span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.storage-meter {
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
}

.storage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78d5c8, #f3b36b);
}

.system-cleanup-panel {
  margin-top: 0.55rem;
}

.storage-cleanup-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.storage-cleanup-metrics div {
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface-soft);
}

.storage-cleanup-metrics strong,
.storage-cleanup-metrics span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-cleanup-metrics strong {
  color: var(--matmon-foreground);
  font-size: 1rem;
  line-height: 1.05;
}

.storage-cleanup-metrics span {
  margin-top: 0.15rem;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Storage tab (redesigned) --- */
.storage-layout {
  display: grid;
  gap: 0.6rem;
}

.storage-hero {
  display: grid;
  gap: 0.8rem;
}

.storage-hero-total {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.storage-hero-total strong {
  font-size: 2.1rem;
  line-height: 1;
}

.storage-hero-total span {
  color: var(--matmon-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.storage-stack {
  display: flex;
  height: 0.95rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.storage-stack-seg {
  height: 100%;
  min-width: 0;
  transition: width 0.3s ease;
}

.storage-stack-seg[data-kind="telemetry"] { background: var(--matmon-accent); }
.storage-stack-seg[data-kind="workspace"] { background: #78d5c8; }
.storage-stack-seg[data-kind="backup"] { background: #f3b36b; }
.storage-stack-seg[data-kind="other"] { background: color-mix(in srgb, var(--matmon-muted) 55%, transparent); }

.storage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.storage-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.storage-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  flex: 0 0 auto;
}

.storage-legend li[data-kind="telemetry"] .storage-legend-dot { background: var(--matmon-accent); }
.storage-legend li[data-kind="workspace"] .storage-legend-dot { background: #78d5c8; }
.storage-legend li[data-kind="backup"] .storage-legend-dot { background: #f3b36b; }
.storage-legend li[data-kind="other"] .storage-legend-dot { background: color-mix(in srgb, var(--matmon-muted) 55%, transparent); }

.storage-legend-label {
  color: var(--matmon-muted);
}

.storage-legend li strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.storage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.6rem;
  align-items: start;
}

.storage-card {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.storage-gauge-value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.storage-gauge-value strong {
  font-size: 1.5rem;
  line-height: 1;
}

.storage-gauge-value span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.storage-db-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.storage-db-counts div {
  min-width: 0;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--matmon-surface-soft);
  border: 1px solid var(--matmon-border);
}

.storage-db-counts strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.storage-db-counts span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--matmon-muted);
}

.storage-paths dd {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

.config-about-link {
  text-decoration: none;
  color: var(--matmon-accent);
}

.config-about-link:hover {
  text-decoration: underline;
}

.config-channel-tag {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  color: var(--matmon-muted);
}

.config-channel-tag[data-channel="release"] {
  color: #78d5c8;
  border-color: color-mix(in srgb, #78d5c8 50%, transparent);
}

.config-channel-tag[data-channel="nightly"] {
  color: var(--matmon-accent);
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
}

.config-reference {
  margin-top: 0.55rem;
}

.storage-cleanup-form {
  align-items: end;
}

.compact-config-list {
  gap: 0.35rem;
}

.compact-config-list .config-row {
  padding-bottom: 0.35rem;
}

.workspace-banner-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  color: #f3b36b;
  background: rgba(243, 179, 107, 0.1);
  border-color: rgba(243, 179, 107, 0.24);
}

.workspace-banner {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
}

.workspace-banner-success {
  background: rgba(120, 213, 200, 0.12);
  border-color: rgba(120, 213, 200, 0.22);
  color: var(--matmon-foreground);
}

.workspace-banner-error {
  background: rgba(255, 127, 147, 0.12);
  border-color: rgba(255, 127, 147, 0.22);
  color: var(--matmon-danger);
}

.workspace-banner-info {
  background: rgba(95, 141, 255, 0.12);
  border-color: rgba(95, 141, 255, 0.22);
  color: var(--matmon-foreground);
}

.workspace-banner-warning {
  border-color: rgba(243, 179, 107, 0.24);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.9fr);
  gap: 0.6rem;
  align-items: start;
}

.workspace-create-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.workspace-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.notification-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.notification-rules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 0.6rem;
  align-items: start;
}

.workspace-panel,
.workspace-editor-panel,
.workspace-card {
  position: relative;
}

.workspace-card {
  padding: 0.7rem;
}

.workspace-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--matmon-accent);
}

.workspace-card-title .ui-icon {
  color: var(--matmon-accent);
}

.workspace-form {
  display: grid;
  gap: 0.55rem;
}

.workspace-form label {
  display: grid;
  gap: 0.35rem;
}

.workspace-form label span,
.workspace-label {
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.workspace-check-field {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
}

.workspace-check-field input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
}

.workspace-check-field span {
  margin: 0;
}

.workspace-input,
.workspace-select,
.workspace-textarea {
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background-color: var(--matmon-surface-strong) !important;
  color: var(--matmon-foreground) !important;
  caret-color: var(--matmon-foreground);
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  box-shadow: none !important;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

/* form-select draws its arrow at the right edge and normally reserves padding
   for it; the shared rule above resets padding, so restore room for the arrow
   (otherwise long option text slides underneath it). */
.workspace-select {
  width: 100%;
  padding-right: 2rem;
  background-position: right 0.7rem center;
}

.workspace-input:disabled,
.workspace-select:disabled,
.workspace-textarea:disabled {
  background-color: var(--matmon-surface) !important;
  color: var(--matmon-muted) !important;
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.75;
}

.workspace-input::placeholder,
.workspace-textarea::placeholder {
  color: var(--matmon-muted);
  opacity: 1;
}

.workspace-input:focus,
.workspace-select:focus,
.workspace-textarea:focus {
  background-color: var(--matmon-surface) !important;
  border-color: var(--matmon-accent) !important;
  color: var(--matmon-foreground) !important;
  outline: none;
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.18) !important;
}

.workspace-input:-webkit-autofill,
.workspace-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--matmon-foreground) !important;
  box-shadow: 0 0 0 1000px var(--matmon-surface-strong) inset !important;
}

html[data-theme="light"] .workspace-input::placeholder,
html[data-theme="light"] .workspace-textarea::placeholder {
  color: #8191a2;
}

.workspace-select[multiple] {
  min-height: 8rem;
}

.workspace-textarea {
  min-height: 100px;
  resize: vertical;
}

.workspace-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.7rem;
  align-items: start;
}

.workspace-hint {
  color: var(--matmon-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.workspace-form label span em,
.workspace-label em {
  font-style: normal;
  margin-left: 0.3rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--matmon-muted);
  opacity: 0.8;
}

.workspace-field-primary .workspace-input {
  font-size: 1rem;
  padding: 0.6rem 0.85rem;
}

.workspace-notification-template-block {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.8rem;
}

.workspace-subsection-header {
  margin-top: 0;
}

.notification-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0.8rem;
}

.notification-template-help,
.notification-template-preview {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface);
  min-width: 0;
}

.notification-template-panel-title {
  color: var(--matmon-foreground);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.notification-template-help-note,
.notification-template-preview-summary {
  color: var(--matmon-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.notification-template-group {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.3rem;
}

.notification-template-group + .notification-template-group {
  border-top: 1px solid var(--matmon-border);
  padding-top: 0.75rem;
}

.notification-template-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--matmon-foreground);
}

.notification-template-group-items {
  display: grid;
  gap: 0.35rem;
}

.notification-template-placeholder {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}

.notification-template-placeholder code {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.45rem;
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  border: 1px solid var(--matmon-border);
  font-size: 0.77rem;
  white-space: nowrap;
}

.notification-template-placeholder span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  min-width: 0;
}

.notification-template-preview-subject {
  display: grid;
  gap: 0.2rem;
}

.notification-template-preview-subject span {
  color: var(--matmon-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.notification-template-preview-subject strong {
  color: var(--matmon-foreground);
  font-size: 0.92rem;
}

.notification-template-preview-text {
  margin: 0;
  padding: 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.notification-template-preview-html {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  padding: 0.75rem;
  min-width: 0;
}

.workspace-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.workspace-field-inline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 1.35rem;
}

.backup-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.55rem 0.8rem;
}

.backup-section-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.6rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
  font-size: 0.84rem;
}

.backup-section-item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.backup-upload-panel {
  margin-top: 0.7rem;
}

.backup-upload-form {
  margin-top: 0.15rem;
}

.backup-restore-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
}

.backup-restore-snapshot-summary {
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.backup-restore-meta {
  margin-top: 0.55rem;
}

.backup-restore-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.55rem;
}

.backup-restore-section-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.7rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
  color: var(--matmon-foreground);
  cursor: pointer;
}

.backup-restore-section-card:hover {
  border-color: rgba(95, 141, 255, 0.22);
  background: rgba(95, 141, 255, 0.04);
}

.backup-restore-section-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--matmon-surface-soft);
}

.backup-restore-section-card input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
}

.backup-restore-section-card-body {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.backup-restore-section-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.backup-restore-section-card-head strong {
  font-size: 0.9rem;
}

.backup-restore-section-count {
  color: var(--matmon-accent);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.backup-restore-section-description {
  color: var(--matmon-muted);
  font-size: 0.79rem;
  line-height: 1.35;
}

.backup-restore-section-summary {
  display: grid;
  gap: 0.12rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--matmon-border);
}

.backup-restore-section-summary span {
  color: var(--matmon-foreground);
  font-size: 0.8rem;
}

.backup-restore-section-summary small {
  color: var(--matmon-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

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

  .backup-job-card-head {
    flex-direction: column;
  }

  .backup-job-card-side {
    justify-items: start;
    text-align: left;
  }

  .backup-job-card-actions {
    justify-content: flex-start;
  }
}

.workspace-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.6rem;
  color: var(--matmon-foreground);
  font-size: 0.86rem;
}

.workspace-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.discovery-check-note {
  color: var(--matmon-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.workspace-span-2 {
  grid-column: 1 / -1;
}

.workspace-form-actions,
.workspace-inline-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

/* One aligned action row: primary actions (Back/Save…) sit left, the spacer pushes the
   trailing group (Delete and other standalone actions) to the right, all on one height. */
.workspace-form-actions {
  align-items: center;
}

.workspace-form-actions-spacer {
  flex: 1 1 auto;
}

.workspace-inline-note {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.discovery-form {
  align-items: start;
}

.discovery-scope-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.discovery-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.discovery-scope-option:hover {
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, var(--matmon-border));
}

.discovery-scope-option:has(input:checked) {
  border-color: var(--matmon-accent);
  background: color-mix(in srgb, var(--matmon-accent) 12%, transparent);
}

.discovery-scope-option input {
  margin-top: 0.2rem;
}

.discovery-scope-text {
  display: grid;
  gap: 0.1rem;
}

.discovery-scope-text strong {
  font-size: 0.85rem;
  color: var(--matmon-foreground);
}

.discovery-scope-text small {
  font-size: 0.72rem;
  color: var(--matmon-muted);
}

.discovery-subnet-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.discovery-subnet-chip {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--matmon-foreground);
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 38%, transparent);
  cursor: pointer;
}

.discovery-subnet-chip:hover {
  background: color-mix(in srgb, var(--matmon-accent) 24%, transparent);
}

@media (max-width: 720px) {
  .discovery-scope-options {
    grid-template-columns: 1fr;
  }
}

.discovery-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem 0.75rem;
}

.discovery-job-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--matmon-muted);
  font-size: 0.84rem;
}

.discovery-job-summary span {
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface-soft);
}

.discovery-progress {
  display: grid;
  gap: 0.35rem;
}

.discovery-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--matmon-muted);
  font-size: 0.82rem;
}

.discovery-progress-header strong {
  color: var(--matmon-foreground);
  font-variant-numeric: tabular-nums;
}

.discovery-progress-track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(124, 142, 171, 0.18);
}

.discovery-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--matmon-accent), #78d5c8);
  transition: width 0.25s ease;
}

.discovery-result-tools {
  display: flex;
  align-items: end;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.45rem;
}

.discovery-result-tools .monitoring-filter-field {
  min-width: min(18rem, 100%);
}

.discovery-result-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--matmon-border);
  border-radius: 9px;
  background: var(--matmon-surface);
}

.discovery-result-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.discovery-result-table th,
.discovery-result-table td {
  padding: 0.34rem 0.5rem;
  border-bottom: 1px solid var(--matmon-border);
  vertical-align: middle;
  white-space: nowrap;
}

.discovery-result-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discovery-result-table th button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.discovery-result-table th button::after {
  content: "";
  color: var(--matmon-muted);
  font-size: 0.65rem;
}

.discovery-result-table th button.is-active[data-direction="asc"]::after {
  content: "up";
}

.discovery-result-table th button.is-active[data-direction="desc"]::after {
  content: "down";
}

.discovery-host-row:hover td {
  background: rgba(95, 141, 255, 0.06);
}

.discovery-host-row[data-discovery-expanded="true"] td {
  background: rgba(95, 141, 255, 0.08);
}

.discovery-table-select {
  width: 5.6rem;
}

.discovery-table-select input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 0 0 0.35rem;
  vertical-align: middle;
}

.discovery-row-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--matmon-border);
  border-radius: 5px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.discovery-row-toggle:hover {
  border-color: var(--matmon-accent);
  color: var(--matmon-accent);
}

.discovery-address-cell {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 12rem;
}

.discovery-address-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.discovery-suggestion-panel td {
  padding: 0.45rem 0.55rem 0.55rem 2.1rem;
  background: var(--matmon-surface-soft);
}

.discovery-host-message {
  margin-bottom: 0.35rem;
  color: var(--matmon-muted);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-suggestion-list {
  display: grid;
  gap: 0.18rem;
  padding: 0;
}

.discovery-suggestion-row {
  display: grid;
  grid-template-columns: auto auto minmax(7rem, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0.18rem 0.35rem;
  border-radius: 6px;
  background: rgba(124, 142, 171, 0.06);
  color: var(--matmon-foreground);
  cursor: pointer;
}

.discovery-suggestion-row:hover {
  background: rgba(95, 141, 255, 0.08);
}

.discovery-suggestion-row input[type="checkbox"] {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
}

.discovery-suggestion-row-readonly {
  grid-template-columns: auto minmax(7rem, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) auto;
  cursor: default;
}

.discovery-assistant-actions {
  justify-content: flex-start;
  margin-bottom: 0.35rem;
}

.discovery-suggestion-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
}

.discovery-job-link {
  color: inherit;
  text-decoration: none;
}

.discovery-job-link:hover {
  color: inherit;
  background: var(--matmon-surface-strong);
}

.discovery-job-table {
  min-width: 920px;
}

.discovery-job-main-link {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.discovery-job-main-link strong,
.discovery-job-main-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-job-main-link span {
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.discovery-job-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.maps-shell {
  gap: 0.8rem;
}

.map-library-panel,
.map-view-panel,
.map-editor-panel {
  overflow: clip;
}

.map-library-panel,
.map-view-panel,
.map-editor-panel,
.map-settings-panel {
  padding: 0.75rem;
}

.map-library-list {
  display: grid;
  gap: 0.45rem;
}

.map-library-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 0.8fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
}

.map-library-row.is-active {
  border-color: color-mix(in srgb, var(--matmon-accent) 58%, var(--matmon-border));
  background: color-mix(in srgb, var(--matmon-surface) 86%, var(--matmon-accent) 14%);
}

.map-library-main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.map-library-main strong,
.map-library-main span,
.map-public-link input {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-library-main span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.map-public-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.map-public-link .ui-icon {
  color: var(--matmon-muted);
  flex: 0 0 auto;
}

.map-public-link input {
  min-height: 2.1rem;
  font-size: 0.76rem;
}

.map-library-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.map-library-actions form {
  margin: 0;
}

.map-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
}

.map-switcher-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: min(28rem, 100%);
  margin: 0;
}

.map-switcher-form .workspace-select {
  min-width: min(20rem, 70vw);
}

.map-canvas,
.map-editor-canvas {
  display: grid;
  grid-template-columns: repeat(var(--map-columns, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--map-rows, 8), minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, calc(var(--map-display-width, 1920) * 1px));
  aspect-ratio: var(--map-display-width, 1920) / var(--map-display-height, 1080);
  margin-inline: auto;
  min-height: 28rem;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background:
    linear-gradient(rgba(124, 142, 171, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 142, 171, 0.08) 1px, transparent 1px),
    var(--matmon-surface-soft);
  background-size: calc(100% / var(--map-columns, 12)) calc(100% / var(--map-rows, 8));
}

.map-editor-canvas {
  min-height: 36rem;
  width: 100%;
  max-width: none;
}

/* In-app map view: keep the board inside the viewport so it never forces a
   page scrollbar. aspect-ratio holds the shape until max-height clamps it. */
.map-view-panel .map-canvas {
  min-height: 0;
  max-height: calc(100vh - 15rem);
}

.map-tile {
  --map-tile-accent: var(--map-tile-custom-accent, var(--map-tile-tone, var(--matmon-border)));
  grid-column: var(--tile-x, 1) / span var(--tile-w, 3);
  grid-row: var(--tile-y, 1) / span var(--tile-h, 2);
  /* Flex column so the main visual (graph/gauge/value/progress) can grow and fill the
     tile instead of the content packing at the top and leaving the cell half empty.
     justify-content:center balances "flat" tiles (summary/state/text without a growing
     visual) so they use the height too — tiles with a flex:1 visual are unaffected
     because the visual already consumes the free space. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
  container-type: size;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--map-tile-accent) 52%, var(--matmon-border));
  border-left: 4px solid var(--map-tile-accent);
  border-radius: 9px;
  background: var(--map-tile-custom-bg, color-mix(in srgb, var(--matmon-surface) 92%, var(--map-tile-tone, transparent)));
  box-shadow: var(--matmon-shadow-soft);
  color: var(--map-tile-custom-text, var(--matmon-text));
  overflow: hidden;
}

.map-tile[data-state="ok"] {
  --map-tile-tone: #78d5c8;
}

.map-tile[data-state="warning"] {
  --map-tile-tone: #f3b36b;
}

.map-tile[data-state="error"] {
  --map-tile-tone: #ff7f93;
}

.map-tile[data-state="unknown"],
.map-tile[data-state="disabled"] {
  --map-tile-tone: #7c8eab;
}

.map-tile[data-state="paused"] {
  --map-tile-tone: #7c8eab;
}

.map-tile-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 0 0 auto;
}

.map-tile-head strong,
.map-tile-title-input {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.5rem, 5.5cqmin, 1.05rem);
}

.map-tile-head .state-pill {
  margin-left: auto;
}

.map-tile-icon {
  display: inline-flex;
  color: var(--map-tile-accent, var(--matmon-muted));
}

.map-tile-kind-label {
  margin-left: auto;
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--matmon-border);
  border-radius: 999px;
  color: var(--matmon-muted);
  font-size: clamp(0.42rem, 3.6cqmin, 0.68rem);
  white-space: nowrap;
}

.map-tile-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* cqmin scales with the tile's smaller side, so the value shrinks in small/narrow tiles instead
     of staying the old fixed 1.6rem+ (which overflowed once the grid got denser). */
  font-size: clamp(0.85rem, 20cqmin, 3rem);
  font-weight: 800;
  line-height: 1;
}

.map-tile-progress-wrap {
  display: grid;
  gap: 0.25rem;
}

.map-tile-progress {
  height: 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--map-tile-accent) 42%, var(--matmon-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--map-tile-accent, var(--matmon-muted)) 12%, var(--matmon-surface-soft));
}

.map-tile-progress span {
  display: block;
  width: calc(var(--map-progress, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--map-tile-accent), color-mix(in srgb, var(--map-tile-accent) 70%, white));
}

.map-tile-gauge {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  align-self: center;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--matmon-surface) 0 55%, transparent 56%),
    conic-gradient(var(--map-tile-accent) calc(var(--map-progress, 0) * 1%), color-mix(in srgb, var(--map-tile-accent) 14%, var(--matmon-border)) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-tile-accent) 35%, transparent);
}

.map-tile-gauge span {
  display: grid;
  place-items: center;
  gap: 0.08rem;
  width: 64%;
  aspect-ratio: 1;
  border-radius: inherit;
  background: var(--matmon-surface);
  color: var(--matmon-text);
  text-align: center;
}

.map-tile-gauge strong {
  font-size: clamp(0.6rem, 9cqmin, 1.4rem);
  line-height: 1;
}

.map-tile p,
.map-tile small {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  color: var(--matmon-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.42rem, 4.5cqmin, 0.8rem);
}

.map-tile-graph-frame {
  flex: 1 1 auto;
  display: grid;
  align-items: stretch;
  /* No fixed floor — the frame must be able to shrink into a small tile instead of overflowing it. */
  min-height: 0;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--map-tile-accent, var(--matmon-border)) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--map-tile-accent, transparent) 10%, transparent);
  color: var(--matmon-muted);
  font-size: clamp(0.42rem, 4cqmin, 0.78rem);
}

.map-tile-graph {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.map-graph-area {
  fill: color-mix(in srgb, var(--map-tile-accent, #78d5c8) 22%, transparent);
  stroke: none;
}

.map-graph-line,
.map-graph-bars {
  fill: none;
  stroke: var(--map-tile-accent, #78d5c8);
  stroke-width: 2.1;
  vector-effect: non-scaling-stroke;
}

.map-graph-bars {
  stroke-width: 3.2;
}

.map-designer-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 20rem;
  gap: 0.75rem;
  align-items: start;
}

.map-toolbox,
.map-property-editor {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-height: min(36rem, 72vh);
  max-height: min(72vh, 52rem);
  overflow: auto;
  padding: 0.65rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
}

/* Bound the single content column to the (fixed-width) panel so a long picker/path
   truncates instead of widening the column and forcing a horizontal scroll. */
.map-property-editor {
  grid-template-columns: minmax(0, 1fr);
}

.map-property-panel,
.map-property-section {
  min-width: 0;
}

/* Read-only tile type (the kind is fixed when the tile is dragged in — delete + re-drag
   to change it, no dropdown). */
.map-property-readonly {
  padding: 0.32rem 0.1rem;
  font-weight: 600;
  color: var(--matmon-text);
}

.map-designer-side-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--matmon-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.map-tool-button {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--matmon-border);
  border-radius: 9px;
  background: var(--matmon-surface);
  color: var(--matmon-text);
  text-align: left;
  cursor: grab;
}

.map-tool-button:hover {
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, var(--matmon-border));
  background: color-mix(in srgb, var(--matmon-surface) 84%, var(--matmon-accent) 16%);
}

.map-tool-button span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.map-tool-button small {
  color: var(--matmon-muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.map-designer-workbench {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  max-height: min(72vh, 52rem);
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--matmon-surface-soft) 72%, transparent);
}

.map-designer-map-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: min(100%, 28rem);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--matmon-border);
  border-radius: 8px;
  background: var(--matmon-surface);
  color: var(--matmon-text);
  text-align: left;
  box-shadow: var(--matmon-shadow-soft);
  cursor: pointer;
}

.map-designer-map-title:hover,
.map-designer-map-title.is-selected {
  border-color: color-mix(in srgb, var(--matmon-accent) 58%, var(--matmon-border));
  background: color-mix(in srgb, var(--matmon-surface) 86%, var(--matmon-accent) 14%);
}

.map-designer-map-title-icon {
  display: inline-flex;
  color: var(--matmon-accent);
}

.map-designer-map-title span:not(.map-designer-map-title-icon) {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.map-designer-map-title strong,
.map-designer-map-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-designer-map-title small {
  color: var(--matmon-muted);
}

.map-designer-map-title em {
  color: var(--matmon-muted);
  font-size: 0.74rem;
  font-style: normal;
  white-space: nowrap;
}

.map-tile-editor {
  position: relative;
  padding: 0.52rem;
  cursor: pointer;
}

.map-tile-editor.is-dragging {
  opacity: 0.82;
  transform: scale(0.99);
  z-index: 20;
}

.map-tile-editor.is-selected {
  outline: 2px solid color-mix(in srgb, var(--matmon-accent) 72%, white);
  outline-offset: 2px;
}

.map-tile-drag-handle {
  cursor: grab;
}

.map-tile-drag-handle:active {
  cursor: grabbing;
}

.map-tile-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0;
  padding: 0;
  border: 1px solid var(--matmon-border);
  border-radius: 999px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
}

.map-tile-remove:hover {
  color: #ff7f93;
  border-color: #ff7f93;
}

.map-tile-resize-handle {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 2px solid color-mix(in srgb, var(--map-tile-accent) 70%, var(--matmon-muted));
  border-bottom: 2px solid color-mix(in srgb, var(--map-tile-accent) 70%, var(--matmon-muted));
  cursor: nwse-resize;
  opacity: 0.65;
}

.map-tile-resize-handle:hover {
  opacity: 1;
}

.map-property-empty,
.map-property-panel {
  padding: 0.65rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
}

.map-property-empty {
  color: var(--matmon-muted);
  font-size: 0.86rem;
}

.map-property-panel {
  display: grid;
  gap: 0.7rem;
}

.map-property-panel[hidden],
.map-property-empty[hidden],
[data-map-property-target][hidden],
[data-map-property-visual][hidden],
[data-map-property-text-only][hidden],
[data-map-property-graph-only][hidden] {
  display: none;
}

.map-property-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.map-property-hint {
  padding: 0.55rem;
  border: 1px dashed var(--matmon-border);
  border-radius: 8px;
  color: var(--matmon-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.map-property-section {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 9px;
  background: var(--matmon-surface-soft);
}

.map-property-checks {
  display: grid;
  gap: 0.35rem;
}

.map-property-checks label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--matmon-muted);
  font-size: 0.82rem;
}

.map-property-checks input {
  accent-color: var(--matmon-accent);
}

.map-property-size-readout {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 8px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.map-designer-help {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.82rem;
}

.public-map-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(120, 213, 200, 0.12), transparent 30rem),
    var(--matmon-bg);
  color: var(--matmon-text);
}

.public-map-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.85rem;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.public-map-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
}

.public-map-header span {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-map-header h1,
.public-map-header p {
  margin: 0;
}

.public-map-header h1 {
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.public-map-header p {
  color: var(--matmon-muted);
}

.public-map-headline {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.public-map-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  text-align: right;
  white-space: nowrap;
}

.public-map-meta span {
  letter-spacing: normal;
  text-transform: none;
}

.public-map-meta .public-map-meta-brand {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.public-map-meta-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--matmon-foreground);
  font-variant-numeric: tabular-nums;
}

.public-map-meta-time .ui-icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Public wallboard fills the row the shell grid hands it (1fr) exactly, so the
   board scales to the screen instead of overflowing into a scrollbar. */
.public-map-canvas {
  min-height: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}

/* --- Map carousel (multi-slide) --- */
.map-carousel {
  display: block;
  width: 100%;
}

.public-map-carousel {
  flex: 1;
  min-height: 0;
}

/* A hidden slide must stay hidden despite .map-canvas using display:grid. */
.map-carousel-slide[hidden] {
  display: none !important;
}

.map-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.public-map-carousel-nav {
  margin-top: 0.4rem;
}

/* Stage wraps the board + its page indicator so an overlay indicator can float over it. */
.public-map-stage {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.public-map-carousel-nav.is-overlay {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 5;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--matmon-surface) 86%, transparent);
  border: 1px solid var(--matmon-border);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.public-map-carousel-nav.is-auto-hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.public-map-stage.is-active .public-map-carousel-nav.is-auto-hide {
  opacity: 1;
  pointer-events: auto;
}

.map-carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  cursor: pointer;
}

.map-carousel-arrow:hover {
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
  color: var(--matmon-accent);
}

.map-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.map-carousel-dot {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.map-carousel-dot:hover {
  color: var(--matmon-foreground);
}

.map-carousel-dot.is-active {
  background: color-mix(in srgb, var(--matmon-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
  color: var(--matmon-foreground);
}

/* --- Map editor slide strip --- */
.map-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--matmon-border);
}

.map-editor-toolbar .map-slide-strip {
  margin-bottom: 0;
}

.map-editor-scale {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.map-editor-scale .workspace-label {
  margin: 0;
}

.map-scale-range {
  width: 8rem;
  accent-color: var(--matmon-accent);
}

.map-scale-output {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--matmon-muted);
}

.map-slide-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.map-slide-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.map-slide-tab {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.map-slide-tab.is-active {
  background: color-mix(in srgb, var(--matmon-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
  color: var(--matmon-foreground);
}

.map-slide-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.map-slide-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  font-size: 0.78rem;
  cursor: pointer;
}

.map-slide-action:hover {
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
}

.map-slide-action-danger:hover {
  border-color: color-mix(in srgb, var(--matmon-danger) 55%, transparent);
  color: var(--matmon-danger);
}

.system-user-table {
  gap: 0;
}

/* Scope the column template to BOTH the header and the data rows so they line up — the base
   .system-table-row is a 6-column grid (for the probe table); the user table has 5 columns. */
.system-user-table .system-table-row {
  grid-template-columns: minmax(13rem, 1.3fr) minmax(5rem, 0.7fr) minmax(7rem, 0.55fr) minmax(10rem, 1fr) minmax(9rem, auto);
  gap: 0.55rem;
  align-items: center;
}

.system-user-row > span {
  min-width: 0;
}

.system-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.system-user-actions form {
  margin: 0;
}

.system-user-create-actions {
  margin-top: 0.65rem;
  justify-content: flex-end;
}

.user-edit-summary.workspace-summary-card {
  width: 100%;
}

.workspace-details {
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface-soft);
  overflow: clip;
}

.workspace-details > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--matmon-foreground);
}

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

.workspace-details > summary .ui-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.workspace-details[open] > summary {
  border-bottom: 1px solid var(--matmon-border);
  background: var(--matmon-surface);
}

.workspace-details-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
}

.workspace-details-nested {
  background: var(--matmon-surface-soft);
}

.workspace-details-nested > summary {
  padding-inline: 0.65rem;
}

.workspace-details .workspace-inline-note {
  margin-top: 0;
}

.workspace-details .workspace-form-grid {
  align-items: start;
}

.workspace-details .workspace-form-grid .workspace-span-2 {
  grid-column: 1 / -1;
}

.sensor-overview-section,
.sensor-credential-section,
.sensor-parameter-section,
.sensor-schedule-section,
.sensor-threshold-section,
.sensor-snmp-section,
.sensor-create-step,
.sensor-telemetry-section,
.template-impact-section,
.workspace-retention-section {
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
  border-radius: 6px;
  background: var(--matmon-surface-soft);
  border: 1px solid var(--matmon-border);
}

/* --- Schedule editor (smart) --- */
.schedule-editor-grid {
  display: grid;
  gap: 0.6rem;
}

.schedule-mode-field {
  display: grid;
  gap: 0.25rem;
  max-width: 22rem;
}

.schedule-every-fields {
  display: grid;
  gap: 0.5rem;
}

.schedule-interval {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
  max-width: 22rem;
}

.schedule-interval label {
  display: grid;
  gap: 0.25rem;
}

.schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schedule-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.schedule-chip:hover {
  color: var(--matmon-foreground);
  border-color: color-mix(in srgb, var(--matmon-accent) 50%, transparent);
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
}

.schedule-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px dashed var(--matmon-border);
  background: color-mix(in srgb, var(--matmon-accent) 7%, transparent);
}

.schedule-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--matmon-muted);
}

.schedule-preview-label svg {
  width: 0.9rem;
  height: 0.9rem;
}

.schedule-preview-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.schedule-preview-time {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.schedule-weekday-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.schedule-weekday-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.schedule-weekday-option:has(input:checked) {
  border-color: var(--matmon-accent);
  background: rgba(95, 141, 255, 0.12);
}

.workspace-section-intro {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--matmon-muted);
}

.workspace-section-intro em {
  color: var(--matmon-foreground);
  font-style: normal;
  font-weight: 600;
}

.telemetry-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--matmon-foreground);
  background: color-mix(in srgb, var(--matmon-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 40%, transparent);
}

.telemetry-profile-pill svg {
  flex: 0 0 auto;
  color: var(--matmon-accent);
}

.workspace-field-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--matmon-muted);
}

.sensor-create-flow {
  display: grid;
  gap: 0.5rem;
}

.sensor-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--matmon-border);
  overflow-x: auto;
}

.sensor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--matmon-muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.sensor-tab .ui-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.sensor-tab:hover {
  color: var(--matmon-foreground);
}

.sensor-tab.is-active {
  color: var(--matmon-foreground);
  border-bottom-color: var(--matmon-accent);
}

/* Hidden tab panels: this two-attribute selector outranks the section cards'
   display:grid so the panel is actually hidden. */
[data-sensor-tab][hidden] {
  display: none;
}

.sensor-create-step {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.sensor-create-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 5px;
  background: rgba(95, 141, 255, 0.12);
  border: 1px solid rgba(95, 141, 255, 0.22);
  color: var(--matmon-accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.sensor-create-step-body {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.template-editor-guide {
  gap: 0.55rem;
}

.template-guide-copy {
  color: var(--matmon-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.template-guide-copy strong {
  color: var(--matmon-foreground);
}

.template-metric-grid,
.template-editor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.template-metric-card,
.template-summary-card {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.58rem 0.65rem;
}

.template-metric-card > span,
.template-summary-card > span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  color: var(--matmon-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.template-metric-card strong,
.template-summary-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-size: 1.15rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-summary-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-library {
  display: grid;
  gap: 0.7rem;
}

.template-scope-group {
  display: grid;
  gap: 0.35rem;
}

.template-scope-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.template-scope-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.16rem 0.42rem;
  border-radius: 4px;
  border: 1px solid rgba(95, 141, 255, 0.18);
  background: rgba(95, 141, 255, 0.1);
  color: var(--matmon-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.template-scope-badge[data-scope="sensor"] {
  border-color: rgba(255, 107, 118, 0.22);
  background: rgba(255, 107, 118, 0.1);
}

.template-scope-badge[data-scope="host"] {
  border-color: rgba(138, 163, 255, 0.22);
  background: rgba(138, 163, 255, 0.1);
}

.template-scope-badge[data-scope="folder"] {
  border-color: rgba(124, 142, 171, 0.24);
  background: rgba(124, 142, 171, 0.1);
}

.template-scope-badge[data-scope="probe"] {
  border-color: rgba(120, 213, 200, 0.24);
  background: rgba(120, 213, 200, 0.1);
}

.template-row-list {
  display: grid;
  gap: 0.35rem;
}

.template-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.48rem 0.55rem;
  border-radius: 7px;
  border: 1px solid var(--matmon-border);
  border-left: 3px solid rgba(95, 141, 255, 0.45);
  background: var(--matmon-surface-strong);
}

.template-row[data-scope="sensor"] {
  border-left-color: rgba(255, 107, 118, 0.62);
}

.template-row[data-scope="host"] {
  border-left-color: rgba(138, 163, 255, 0.62);
}

.template-row[data-scope="probe"] {
  border-left-color: rgba(120, 213, 200, 0.62);
}

.template-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 5px;
  color: var(--matmon-accent);
  background: rgba(95, 141, 255, 0.1);
}

.template-row-main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.template-row-title,
.template-chip-list,
.template-flow-line,
.template-row-side,
.template-apply-summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: wrap;
}

.template-row-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--matmon-foreground);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-flow-line {
  color: var(--matmon-muted);
  font-size: 0.74rem;
}

.template-flow-line .ui-icon {
  width: 0.68rem;
  height: 0.68rem;
}

.template-flow-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-chip-list span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-row-side {
  justify-content: flex-end;
}

.template-impact-mini {
  display: grid;
  justify-items: end;
  min-width: 4.8rem;
  color: var(--matmon-muted);
  font-size: 0.7rem;
  text-align: right;
}

.template-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.template-impact-mini strong {
  color: var(--matmon-foreground);
  font-size: 1.05rem;
  line-height: 1;
}

.template-impact-mini small {
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-apply-panel {
  border-color: rgba(95, 141, 255, 0.24);
}

.template-apply-summary {
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
}

.template-impact-list {
  display: grid;
  gap: 0.35rem;
}

.template-impact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 5px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-strong);
  color: var(--matmon-foreground);
  text-decoration: none;
}

.template-impact-row:hover {
  border-color: rgba(95, 141, 255, 0.28);
  color: var(--matmon-foreground);
}

.template-impact-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.8rem;
  padding: 0.14rem 0.38rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--matmon-muted);
  background: var(--matmon-surface-soft);
  border: 1px solid var(--matmon-border);
}

.template-impact-state.is-direct {
  color: var(--matmon-accent);
  background: rgba(95, 141, 255, 0.11);
  border-color: rgba(95, 141, 255, 0.2);
}

.template-impact-main {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.template-impact-main strong,
.template-impact-main span,
.template-impact-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-impact-main strong {
  font-size: 0.83rem;
}

.template-impact-main span,
.template-impact-meta {
  color: var(--matmon-muted);
  font-size: 0.74rem;
}

.template-impact-meta {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
  justify-items: end;
  text-align: right;
}

.sensor-snmp-toolbar {
  align-items: end;
}

.sensor-parameter-list {
  display: grid;
  gap: 0.45rem;
}

.sensor-parameter-group-title {
  margin: 0.6rem 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--matmon-muted);
}

.sensor-parameter-group-title:first-child {
  margin-top: 0;
}

.sensor-threshold-list {
  display: grid;
  gap: 0.45rem;
}

.sensor-parameter-card {
  display: grid;
  gap: 0.42rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.credential-kind-panel {
  display: grid;
  gap: 0.45rem;
}

.credential-kind-panel[hidden] {
  display: none !important;
}

.sensor-threshold-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.snmp-walk-list {
  display: grid;
  gap: 0.45rem;
}

.snmp-walk-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.snmp-walk-row.is-numeric {
  border-left: 3px solid rgba(120, 213, 200, 0.9);
}

.snmp-walk-row.is-text {
  border-left: 3px solid rgba(124, 142, 171, 0.75);
}

.snmp-walk-main {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.snmp-walk-oid {
  font-weight: 700;
  font-size: 0.82rem;
  word-break: break-all;
}

.snmp-walk-value {
  color: var(--matmon-muted);
  font-size: 0.78rem;
  word-break: break-word;
}

.snmp-walk-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  color: var(--matmon-muted);
  font-size: 0.75rem;
  text-align: right;
}

.snmp-walk-type {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: rgba(95, 141, 255, 0.08);
  border: 1px solid rgba(95, 141, 255, 0.15);
}

.sensor-parameter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sensor-threshold-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sensor-threshold-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.sensor-parameter-name {
  font-weight: 700;
}

.sensor-threshold-name {
  font-weight: 700;
}

.sensor-parameter-help {
  margin-top: 0.15rem;
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

/* "Available variables" reference card for the local script / program sensors. */
.script-variables {
  margin: 0.1rem 0 1.1rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 28%, var(--matmon-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--matmon-accent) 6%, transparent);
}

.script-variables-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.script-variables-head .ui-icon {
  width: 1rem;
  height: 1rem;
  color: var(--matmon-accent);
}

.script-variables-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.script-variables-hint {
  margin-left: auto;
  color: var(--matmon-muted);
  font-size: 0.76rem;
}

.script-variables-hint code {
  font-family: var(--matmon-mono-font);
  background: color-mix(in srgb, var(--matmon-foreground) 10%, transparent);
  padding: 0.02rem 0.32rem;
  border-radius: 4px;
}

.script-variables-group {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--matmon-muted);
  font-weight: 700;
  margin: 0.75rem 0 0.4rem;
}

.script-variables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 0.4rem 1.25rem;
}

.script-variable {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.script-variable-name {
  flex: 0 0 auto;
  font-family: var(--matmon-mono-font);
  font-size: 0.76rem;
  color: var(--matmon-accent);
  background: color-mix(in srgb, var(--matmon-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--matmon-accent) 22%, transparent);
  border-radius: 6px;
  padding: 0.06rem 0.4rem;
  white-space: nowrap;
}

.script-variable-desc {
  min-width: 0;
  font-size: 0.8rem;
  color: var(--matmon-foreground);
  opacity: 0.86;
}

/* Credentials: compact list rows + an edit dialog (modal) instead of big inline cards. */
.credential-row {
  border: 1px solid var(--matmon-border);
  border-radius: 10px;
  background: var(--matmon-surface);
  margin-bottom: 0.5rem;
}

.credential-row-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  min-width: 0;
}

.credential-row-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--matmon-accent);
}

.credential-row-icon .ui-icon {
  width: 1rem;
  height: 1rem;
}

.credential-row-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credential-row-kind {
  flex: 0 0 auto;
}

.credential-row-actions {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.credential-row-delete {
  padding-inline: 0.5rem;
}

.credential-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 12, 24, 0.55);
}

.credential-modal-backdrop[hidden] {
  display: none;
}

.credential-modal {
  width: min(640px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--matmon-surface-strong, var(--matmon-surface));
  border: 1px solid var(--matmon-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.credential-modal-head,
.credential-modal-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
}

.credential-modal-head {
  border-bottom: 1px solid var(--matmon-border);
}

.credential-modal-head .section-title {
  margin: 0;
}

.credential-modal-x {
  margin-left: auto;
}

.credential-modal-foot {
  border-top: 1px solid var(--matmon-border);
  justify-content: flex-end;
}

.credential-modal-body {
  padding: 1rem;
  overflow-y: auto;
}

body.credential-modal-open {
  overflow: hidden;
}

/* Separate the sensor's "Credential selection" dropdown from the field list below it. */
.sensor-credential-select-field {
  padding-bottom: 0.65rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--matmon-border);
}

/* The container/host credential-definition section had no layout of its own — give it the
   same grid spacing as the sensor credential section so the header/note/list don't crowd. */
.workspace-credential-section {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

/* Syntax-highlighting code editor (SensorParameterKind.ScriptEditor): a transparent
   textarea layered over a highlighted <pre>. Both must share identical metrics so the
   coloured text lines up exactly under the caret. */
.code-editor {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: #0d1117;
  overflow: hidden;
}

.code-editor-highlight,
.code-editor-input {
  margin: 0;
  padding: 0.7rem 0.85rem;
  font-family: var(--matmon-mono-font);
  font-size: 0.83rem;
  line-height: 1.55;
  tab-size: 2;
  -moz-tab-size: 2;
  white-space: pre;
  box-sizing: border-box;
}

.code-editor-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: #c9d1d9;
}

.code-editor-highlight code {
  font: inherit;
  white-space: pre;
}

.code-editor-input {
  position: relative;
  display: block;
  width: 100%;
  min-height: 16rem;
  background: transparent !important;
  color: transparent !important;
  caret-color: #e6edf3;
  border: 0 !important;
  border-radius: 0 !important;
  resize: vertical;
  outline: none;
  overflow: auto;
}

.code-editor-input::selection {
  background: rgba(120, 150, 255, 0.35);
}

.tok-comment { color: #8b949e; font-style: italic; }
.tok-string  { color: #a5d6ff; }
.tok-var     { color: #ffa657; }
.tok-number  { color: #79c0ff; }
.tok-keyword { color: #ff7b72; }

.sensor-threshold-help {
  margin-top: 0.15rem;
  color: var(--matmon-muted);
  font-size: 0.78rem;
}

.sensor-threshold-virtual-pill {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.sensor-threshold-orphan-pill {
  margin-left: 0.4rem;
  vertical-align: middle;
  border-color: color-mix(in srgb, var(--matmon-warning) 45%, transparent);
  color: var(--matmon-warning);
}

/* A channel that has stored config but is no longer reported by the sensor's latest run. */
.sensor-threshold-card[data-threshold-orphaned="true"] {
  opacity: 0.72;
}

.sensor-threshold-virtual-note {
  margin-top: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px dashed var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

[data-threshold-virtual="true"] {
  border-style: dashed;
}

.sensor-required {
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  color: var(--matmon-accent);
  background: rgba(95, 141, 255, 0.1);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
}

.sensor-threshold-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.sensor-threshold-rule {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 0.35rem;
}

.sensor-threshold-grid > label:nth-child(2) > span,
.sensor-threshold-grid > label:nth-child(3) > span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 700;
}

.sensor-threshold-grid > label:nth-child(2) > span::before,
.sensor-threshold-grid > label:nth-child(3) > span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.sensor-threshold-grid > label:nth-child(2) > span {
  color: var(--matmon-warning);
}

.sensor-threshold-grid > label:nth-child(2) > span::before {
  background: var(--matmon-warning);
}

.sensor-threshold-grid > label:nth-child(3) > span {
  color: var(--matmon-danger);
}

.sensor-threshold-grid > label:nth-child(3) > span::before {
  background: var(--matmon-danger);
}

.sensor-threshold-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.workspace-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;
}

.sensor-threshold-delete {
  align-self: center;
  min-height: 28px;
  padding: 0.18rem 0.35rem;
  font-size: 0.78rem;
}

.sensor-threshold-default {
  align-self: center;
  min-height: 28px;
  padding: 0.18rem 0.45rem;
  font-size: 0.78rem;
  border-color: rgba(95, 141, 255, 0.15);
}

.sensor-threshold-default.is-active {
  background: rgba(95, 141, 255, 0.14);
  border-color: rgba(95, 141, 255, 0.28);
  color: var(--matmon-foreground);
}

.sensor-threshold-delete .ui-icon {
  width: 0.82rem;
  height: 0.82rem;
}

.workspace-submit,
.workspace-secondary-submit,
.workspace-danger-submit,
.workspace-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}

.workspace-submit {
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.24);
  color: var(--matmon-foreground);
}

.workspace-submit .ui-icon,
.workspace-secondary-submit .ui-icon,
.workspace-danger-submit .ui-icon,
.workspace-action-link .ui-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.workspace-secondary-submit,
.workspace-action-link {
  background: var(--matmon-surface-soft);
  border-color: var(--matmon-border);
  color: var(--matmon-foreground);
}

.workspace-action-link.is-active,
.workspace-secondary-submit.is-active {
  background: rgba(95, 141, 255, 0.16);
  border-color: rgba(95, 141, 255, 0.24);
  color: var(--matmon-foreground);
}

.workspace-danger-submit {
  background: rgba(255, 107, 118, 0.14);
  border-color: rgba(255, 107, 118, 0.24);
  color: var(--matmon-danger);
}

.workspace-row-actions {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.tree-meta .workspace-row-actions,
.monitoring-list-side .workspace-row-actions {
  width: 100%;
  justify-content: flex-end;
}

.workspace-row-actions form {
  margin: 0;
}

.workspace-action-menu {
  position: relative;
  display: inline-flex;
}

.workspace-action-menu[open],
.workspace-action-menu.is-floating {
  z-index: 10000;
}

.workspace-action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.workspace-action-menu > summary::-webkit-details-marker {
  display: none;
}

.workspace-action-menu-panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  inset-inline-end: 0;
  z-index: 10000;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface);
  box-shadow: var(--matmon-shadow);
  display: grid;
  gap: 0.25rem;
}

/* The panel is JS-positioned (fixed). Until positionMenu has placed it and added
   .is-floating, keep it hidden synchronously — its default absolute spot (below the
   button) would otherwise flash for a frame before being moved or flipped above.
   visibility (not display) so it still has dimensions for the position math. */
.workspace-action-menu[open] > .workspace-action-menu-panel {
  visibility: hidden;
}

.workspace-action-menu.is-floating > .workspace-action-menu-panel {
  visibility: visible;
}

.workspace-action-menu-separator {
  height: 1px;
  margin: 0.08rem 0;
  background: color-mix(in srgb, var(--matmon-border) 88%, transparent);
}

.workspace-action-menu-link,
.workspace-action-menu-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 28px;
  padding: 0.26rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--matmon-border);
  background: var(--matmon-surface-soft);
  color: var(--matmon-foreground);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

button.workspace-action-menu-link {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.workspace-action-menu-panel form {
  margin: 0;
}

.workspace-action-menu-panel form .workspace-action-menu-link {
  width: 100%;
}

.workspace-action-menu-link:hover {
  background: rgba(95, 141, 255, 0.12);
  border-color: rgba(95, 141, 255, 0.22);
}

.workspace-action-menu-empty {
  justify-content: center;
  color: var(--matmon-muted);
}

.workspace-row.is-selected,
.workspace-probe-row.is-selected,
.workspace-template-row.is-selected {
  border-color: rgba(95, 141, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.08);
}

.workspace-code {
  margin: 0;
  padding: 0.7rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
  color: var(--matmon-foreground);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  line-height: 1.45;
}

.workspace-probe-row .probe-meta {
  word-break: break-word;
}

.notification-rule-list {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.55rem;
}

.notification-rule-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.7rem;
  border-radius: 8px;
  background: var(--matmon-surface-strong);
  border: 1px solid var(--matmon-border);
}

.notification-rule-main {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.notification-rule-name {
  font-weight: 700;
}

.notification-rule-meta {
  color: var(--matmon-muted);
  font-size: 0.8rem;
  word-break: break-word;
}

.notification-rule-side {
  display: grid;
  justify-items: end;
  gap: 0.5rem;
  text-align: right;
}

.notification-rule-state {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  color: var(--matmon-foreground);
  background: rgba(95, 141, 255, 0.14);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
}

.notification-rule-state.is-enabled {
  background: rgba(95, 141, 255, 0.2);
}

.notification-rule-state.is-disabled {
  background: rgba(255, 107, 118, 0.2);
}

.notification-rule-row.is-selected {
  border-color: rgba(95, 141, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(95, 141, 255, 0.08);
}

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

  .dashboard-status-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-status-chart {
    justify-content: start;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .graph-grid,
  .config-grid,
  .system-storage-grid {
    grid-template-columns: 1fr;
  }

  .sensor-highlight-card {
    flex-basis: 82vw;
    min-width: 82vw;
  }

  .workspace-grid,
  .workspace-editor-grid,
  .workspace-create-grid,
  .notification-settings-grid,
  .notification-rules-grid,
  .template-metric-grid,
  .template-editor-summary {
    grid-template-columns: 1fr;
  }

  .sensor-stats-grid,
  .sensor-detail-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-list-head,
  .monitoring-list-row {
    grid-template-columns: minmax(7rem, 0.55fr) minmax(13rem, 1.25fr) minmax(9rem, 0.75fr) minmax(12rem, 1fr) minmax(5rem, auto);
    min-width: 860px;
  }

  .monitoring-list-side {
    justify-items: end;
    text-align: right;
  }

  .map-designer-shell {
    grid-template-columns: 1fr;
  }

  .map-toolbox,
  .map-property-editor {
    min-height: auto;
    max-height: none;
  }

  .map-designer-workbench {
    max-height: 72vh;
  }

  .map-toolbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-designer-side-title {
    grid-column: 1 / -1;
  }

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

  .map-library-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block;
    min-height: 0;
  }

  .topbar {
    display: none;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 1px solid var(--matmon-topbar-border);
    border-bottom: 1px solid var(--matmon-topbar-border);
    box-shadow: none;
    z-index: 1000;
    overflow: visible;
    transform: none;
  }

  .app-shell.is-sidebar-open .topbar {
    display: block;
  }

  .sidebar-inner {
    min-height: 100%;
    gap: 0.45rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .sidebar-brand-block {
    padding-bottom: 0.2rem;
  }

  .brand-note {
    display: none;
  }

  .sidebar-alert-status {
    padding: 0.45rem 0.55rem;
  }

  .sidebar-alert-status-hint,
  .sidebar-alert-status-meta {
    display: none;
  }

  .system-probe-panel {
    display: block;
  }

  .system-probe-table {
    overflow-x: visible;
  }

  .system-probe-table .system-table-head {
    display: none;
  }

  .system-probe-table .system-probe-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.28rem;
    min-width: 0;
  }

  .system-probe-table .system-probe-row.has-actions {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .system-probe-table .system-table-row > span {
    white-space: normal;
  }

  .system-probe-table .system-probe-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sidebar-backdrop {
    display: none;
  }

  .mobile-nav-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    margin-bottom: 0.05rem;
  }

  .app-main {
    width: 100%;
    min-width: 0;
  }

  .app-main > main {
    padding-top: 0.05rem;
  }

  .topnav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .topnav-link,
  .sidebar-alert-status,
  .topnav-button,
  .topnav-user {
    flex: 0 0 auto;
    width: 100%;
    min-height: 28px;
    padding-block: 0.18rem;
    white-space: nowrap;
  }

  .topnav-form {
    width: 100%;
  }

  .sidebar-footer {
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .account-menu-trigger {
    min-height: 2rem;
    padding-block: 0.2rem;
  }

  .account-trigger-label {
    font-size: 0.5rem;
  }

  .account-trigger-name {
    font-size: 0.7rem;
  }

  .sidebar-footer-tools {
    width: 100%;
    max-width: 22rem;
  }

  .account-menu-panel {
    top: calc(100% + 0.45rem);
    bottom: auto;
  }
}

@media (max-width: 767.98px) {
  .workspace-summary-strip {
    display: none;
  }

  .app-content {
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
  }

  .storage-cleanup-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel {
    flex-direction: column;
  }

  .page-header,
  .panel-header,
  .graph-card-head,
  .dashboard-sensor-tile,
  .sensor-window-head,
  .graph-footer,
  .config-row,
  .auth-actions,
  .notification-rule-row,
  .probe-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 0.05rem;
    padding-bottom: 0.12rem;
  }

  .page-header.has-summary {
    grid-template-columns: 1fr;
  }

  .workspace-summary-strip {
    justify-content: flex-start;
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
  }

  .workspace-summary-card {
    width: 100%;
    justify-content: flex-start;
    padding: 0.45rem 0.5rem;
  }

  .dashboard-home-shell > .page-header.dashboard-header {
    grid-template-columns: 1fr;
  }

  .dashboard-header-summary.workspace-summary-card {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }

  .page-header-summary.workspace-summary-card {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }

  .dashboard-shell {
    gap: 0.45rem;
  }

  .panel-header {
    gap: 0.35rem;
  }

  .mode-chip {
    width: 100%;
    text-align: left;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-status-legend {
    grid-template-columns: 1fr;
  }

  .workspace-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .workspace-action-link,
  .workspace-submit,
  .workspace-secondary-submit,
  .workspace-danger-submit,
  .auth-submit {
    width: 100%;
    min-height: 42px;
  }

  .workspace-form-actions,
  .workspace-inline-actions,
  .page-actions,
  .workspace-row-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-form-actions > *,
  .workspace-inline-actions > *,
  .page-actions > *,
  .workspace-row-actions > * {
    width: 100%;
  }

  .workspace-row-actions form {
    width: 100%;
  }

  .map-view-toolbar,
  .map-switcher-form {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .map-switcher-form .workspace-select {
    width: 100%;
    min-width: 0;
  }

  .workspace-action-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .workspace-action-menu-panel {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .monitoring-tree .monitoring-tree-side .workspace-row-actions {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .monitoring-tree .monitoring-tree-side .workspace-row-actions > *,
  .monitoring-tree .monitoring-tree-side .workspace-action-menu,
  .monitoring-tree .monitoring-sensor-action-menu {
    width: auto;
  }

  .monitoring-tree .monitoring-tree-side .workspace-action-menu-panel,
  .monitoring-tree .monitoring-sensor-action-menu .workspace-action-menu-panel {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .monitoring-filter-bar {
    align-items: stretch;
  }

  .monitoring-view-switch,
  .monitoring-size-switch {
    width: 100%;
    display: grid;
  }

  .monitoring-view-switch .workspace-action-link {
    width: 100%;
  }

  .map-toolbox {
    grid-template-columns: 1fr;
  }

  .map-library-actions {
    width: 100%;
  }

  .map-library-actions > *,
  .map-library-actions form {
    width: 100%;
  }

  .public-map-shell {
    padding: 0.55rem;
  }

  .public-map-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .monitoring-view-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-size-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .monitoring-size-switch .workspace-action-link {
    width: 100%;
  }

  .monitoring-filter-field {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .monitoring-list-shell,
  .monitoring-tree {
    overflow-x: visible;
  }

  .monitoring-list-shell .monitoring-list-head,
  .monitoring-list-shell .monitoring-list-row {
    min-width: 0;
  }

  .monitoring-list-head {
    display: none;
  }

  .monitoring-list-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
    min-width: 0;
    margin-left: 0;
  }

  .monitoring-list-status,
  .monitoring-list-main,
  .monitoring-list-endpoint,
  .monitoring-list-info,
  .monitoring-list-side {
    width: 100%;
  }

  .monitoring-list-status {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .monitoring-list-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .monitoring-list-side,
  .monitoring-list-side .workspace-row-actions {
    justify-items: start;
    justify-content: flex-start;
    text-align: left;
  }

  .monitoring-list-side .workspace-row-actions {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .monitoring-list-side .workspace-row-actions > *,
  .monitoring-list-side .workspace-row-actions form,
  .monitoring-list-side .workspace-action-menu {
    width: auto;
  }

  .monitoring-list-side .workspace-action-menu-panel {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .tree-row,
  .monitoring-tree-row {
    margin-left: 0;
  }

  .monitoring-tree-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.2rem 0.35rem;
    padding: 0.42rem 0.5rem;
    border: 1px solid rgba(124, 142, 171, 0.13);
    border-radius: 8px;
    background: var(--matmon-surface-strong);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  }

  .monitoring-tree-row > * {
    min-width: 0;
  }

  .monitoring-tree-toggle,
  .tree-kind {
    flex: 0 0 auto;
    order: 1;
  }

  .tree-meta,
  .monitoring-tree-side,
  .monitoring-list-side,
  .tree-state,
  .notification-rule-side,
  .sensor-header-side {
    text-align: left;
    justify-items: start;
  }

  .monitoring-tree-side {
    justify-content: flex-end;
  }

  .tree-state {
    justify-content: flex-start;
  }

  .monitoring-tree-children {
    margin-left: 0.2rem;
    padding-left: 0.5rem;
  }

  .monitoring-tree-main {
    order: 2;
    flex: 1 1 min(100%, 16rem);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    white-space: normal;
  }

  .monitoring-tree-details {
    max-width: none;
    white-space: normal;
  }

  .monitoring-tree-meta {
    flex-wrap: wrap;
    white-space: normal;
  }

  .monitoring-tree-side {
    order: 3;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .monitoring-tree-side .workspace-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .monitoring-tree .workspace-action-menu-panel,
  .monitoring-tree .monitoring-sensor-action-menu .workspace-action-menu-panel {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .monitoring-sensor-strip,
  .monitoring-tree-sensor-level {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }

  .monitoring-tree .monitoring-sensor-chip,
  .monitoring-tree .monitoring-add-sensor-chip,
  .tree-sensor-chip,
  .tree-add-sensor {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .monitoring-tree .monitoring-sensor-chip-main {
    grid-template-areas:
      "icon name"
      "icon value"
      "meta meta";
    padding: 0.18rem 1.35rem 0.18rem 0.28rem;
  }

  .monitoring-tree .monitoring-sensor-meta,
  .monitoring-tree .monitoring-sensor-graph {
    display: none;
  }

  .monitoring-sensor-actions {
    position: static;
    display: flex !important;
    width: 100%;
    margin-top: 0.1rem;
    align-items: stretch;
    justify-content: flex-start;
  }

  .monitoring-sensor-action-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .monitoring-sensor-action-menu > summary {
    width: 100%;
    min-width: 0;
    min-height: 1.85rem;
    padding: 0.18rem 0.32rem;
    justify-content: flex-start;
    gap: 0.28rem;
  }

  .monitoring-sensor-action-menu > summary span {
    display: inline;
  }

  .tree-sensor-strip {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
  }

  .tree-sensor-chips {
    width: 100%;
    flex-direction: column;
  }

  .tree-sensor-chip {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .tree-add-sensor {
    width: 100%;
    margin-left: 0;
  }

  .sensor-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .sensor-card-meta {
    flex-direction: column;
  }

  .sensor-card-metric {
    justify-items: start;
    text-align: left;
  }

  .graph-footer {
    align-items: flex-start;
  }

  .dashboard-sensor-tile {
    grid-template-columns: 1fr;
  }

  .dashboard-sensor-side {
    display: grid;
    grid-template-columns: auto auto minmax(6rem, 1fr);
    align-items: center;
    justify-items: end;
    text-align: right;
  }

  .probe-result-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.45rem;
  }

  .probe-result-side {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
  }

  .dashboard-sensor-sparkline {
    width: 100%;
    min-width: 6rem;
  }

  .sensor-header {
    grid-template-columns: 1fr;
  }

  .sensor-header-side {
    min-width: 0;
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .sensor-highlights-strip {
    gap: 0.45rem;
  }

  .sensor-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .sensor-header-actions > * {
    width: 100%;
  }

  .sensor-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .sensor-chip {
    width: 100%;
  }

  .sensor-stats-grid {
    grid-template-columns: 1fr;
  }

  .sensor-window-head {
    align-items: flex-start;
  }

  .sensor-window-figure {
    gap: 0.3rem;
  }

  .sensor-window-summary,
  .sensor-window-mini {
    flex-direction: column;
    align-items: flex-start;
  }

  .sensor-window-tabs {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .sensor-window-tab {
    flex: 0 0 auto;
  }

  .sensor-channel-row,
  .sensor-observation-row {
    grid-template-columns: 1fr;
  }

  .sensor-threshold-grid,
  .sensor-threshold-rule {
    grid-template-columns: 1fr;
  }

  .discovery-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sensor-channel-side,
  .sensor-observation-side {
    justify-items: start;
    text-align: left;
  }

  .sensor-channel-actions {
    justify-content: flex-start;
  }

  .sensor-threshold-actions {
    justify-content: flex-start;
  }

  .probe-usage-header {
    grid-template-columns: 1fr;
  }

  .probe-usage-side {
    min-width: 0;
  }

  .probe-usage-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .probe-usage-toolbar-panel {
    padding: 0.75rem;
  }

  .probe-usage-toolbar {
    grid-template-columns: 1fr;
  }

  .probe-usage-view-switch {
    width: 100%;
  }

  .probe-usage-filter-field {
    min-width: 0;
    flex-basis: 100%;
  }

  .probe-usage-highlight-check {
    width: 100%;
    margin-bottom: 0;
  }

  .probe-usage-table,
  .probe-usage-group .probe-usage-table {
    min-width: 760px;
  }

  .probe-usage-group-summary {
    grid-template-columns: 1fr;
  }

  .probe-usage-group-summary-side {
    justify-items: start;
    text-align: left;
  }

  .probe-usage-sensor-row {
    grid-template-columns: 1fr;
  }

  .probe-usage-sensor-side {
    justify-items: start;
    text-align: left;
  }

  .probe-usage-sensor-actions {
    justify-content: flex-start;
  }

  .notification-rule-row {
    gap: 0.65rem;
  }

  .notification-rule-side {
    width: 100%;
  }

  .notification-rule-side .workspace-row-actions {
    justify-content: flex-start;
  }

  .auth-card {
    width: 100%;
    padding: 1rem 0.9rem;
  }

  .auth-form {
    gap: 0.8rem;
  }

  .auth-actions {
    gap: 0.6rem;
  }

  .auth-submit {
    justify-content: center;
  }

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

  .tree-meta,
  .probe-state {
    text-align: left;
  }

  .graph-card-head,
  .config-row dd {
    text-align: left;
  }

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

  .workspace-span-2 {
    grid-column: auto;
  }

  .probe-usage-summary {
    grid-template-columns: 1fr;
  }

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

  .sensor-create-step {
    grid-template-columns: 1fr;
  }

  .template-impact-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .probe-install-grid {
    grid-template-columns: 1fr;
  }

  .probe-install-header {
    grid-template-columns: 1fr;
  }

  .probe-install-summary.workspace-summary-card {
    width: 100%;
    justify-content: flex-start;
  }

  .probe-install-method-header {
    flex-direction: column;
  }

  .probe-install-panel summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .probe-install-panel summary small {
    width: 100%;
    margin-left: 1.7rem;
  }

  .template-impact-meta {
    justify-items: start;
    text-align: left;
  }

  .template-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .template-row-side {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
  }

  .template-impact-mini {
    justify-items: start;
    text-align: left;
  }

  .template-row .workspace-action-menu {
    width: auto;
  }

  .sensor-header {
    grid-template-columns: 1fr;
  }

  .sensor-header-side {
    justify-items: start;
    text-align: left;
  }

  .monitoring-filter-bar {
    align-items: stretch;
  }

  .monitoring-view-switch {
    width: 100%;
  }

  .monitoring-filter-field {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .workspace-tabs,
  .sensor-window-tabs {
    justify-content: flex-start;
  }

  .graph-metric,
  .config-row dd {
    text-align: left;
  }

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

  .event-row-actions {
    justify-content: flex-start;
  }

  .discovery-suggestion-list {
    padding-left: 0.5rem;
  }

  .discovery-suggestion-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .discovery-suggestion-row-readonly {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .discovery-suggestion-row .sensor-chip,
  .discovery-suggestion-row .event-row-path,
  .discovery-suggestion-row .event-row-message {
    display: none;
  }

  .system-table-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .system-probe-row.has-actions {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .system-probe-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .system-table-head {
    display: none;
  }

  .system-table-row > span {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .storage-cleanup-metrics {
    grid-template-columns: 1fr;
  }

  .discovery-check-grid {
    grid-template-columns: 1fr;
  }

  .panel,
  .monitoring-controls,
  .workspace-panel,
  .sensor-window-card,
  .graph-card,
  .tree-row,
  .monitoring-list-row,
  .workspace-row,
  .notification-rule-row,
  .sensor-parameter-card,
  .sensor-threshold-card {
    border-radius: 8px;
  }

  .panel-stack,
  .monitoring-controls {
    padding: 0.6rem 0.65rem;
  }

  .page-header {
    padding: 0.2rem 0.05rem 0.25rem;
  }

  .tree-row,
  .monitoring-tree-row,
  .event-row-summary,
  .monitoring-list-row,
  .sensor-channel-row,
  .sensor-observation-row {
    padding: 0.5rem 0.55rem;
  }

  .monitoring-tree-row {
    gap: 0.18rem;
    padding: 0.28rem 0.38rem;
  }

  .graph-card,
  .sensor-window-card {
    padding: 0.55rem;
  }

  .sensor-current-value strong {
    font-size: 1.6rem;
  }

  .metric-card strong {
    font-size: 1.2rem;
  }

  .topnav-link,
  .sidebar-alert-status,
  .topnav-button,
  .workspace-action-link,
  .workspace-tab,
  .workspace-submit,
  .workspace-secondary-submit,
  .workspace-danger-submit,
  .sensor-window-tab {
    min-height: 40px;
  }

  .tree-sensor-chip {
    padding: 0.5rem 0.55rem;
  }

  .event-row-body {
    padding: 0.38rem 0.42rem 0.44rem;
  }

  .event-row-field {
    padding: 0.3rem 0.35rem;
  }

  .sensor-card-title {
    font-size: 0.9rem;
  }

  .sensor-card-path,
  .sensor-chip,
  .panel-hint {
    font-size: 0.72rem;
  }
}

/* Alerts table ------------------------------------------------------------ */
/* Reuses the shared .monitoring-filter-bar / .monitoring-filter-field toolbar so the search looks
   identical to the other lists; just the spacing + a capped search width are alerts-specific. */
.alerts-toolbar {
  margin: 0.75rem 0 0.6rem;
}

.alerts-search-field {
  flex: 0 1 24rem;
  max-width: 24rem;
}

.alerts-sort-field {
  flex: 0 1 15rem;
  max-width: 15rem;
}

.alerts-bulkbar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.alerts-bulkbar-count { color: var(--matmon-muted); font-size: 0.82rem; }
.alerts-bulkbar-count strong { color: var(--matmon-text); }

/* Matches the shared data-table look (see .discovery-result-table): shaded sticky header,
   tight cells, same font + radius — so the Alerts table reads like the other lists. */
.alerts-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--matmon-border);
  border-radius: 9px;
  background: var(--matmon-surface);
}

.alerts-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.alerts-table th,
.alerts-table td {
  padding: 0.34rem 0.5rem;
  border-bottom: 1px solid var(--matmon-border);
  vertical-align: middle;
}

.alerts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--matmon-surface-strong);
  color: var(--matmon-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.alerts-table tbody tr:last-child td { border-bottom: none; }
.alerts-table tbody tr:hover { background: rgba(124, 142, 171, 0.06); }

.alerts-row td:first-child { border-left: 3px solid transparent; }
.alerts-row[data-state="error"] td:first-child { border-left-color: var(--matmon-danger); }
.alerts-row[data-state="warning"] td:first-child { border-left-color: var(--matmon-warning); }
.alerts-row[data-active="false"] td:first-child { border-left-color: var(--matmon-success); }

.alerts-col-check { width: 2.2rem; text-align: center; }
.alerts-col-time { white-space: nowrap; color: var(--matmon-muted); font-variant-numeric: tabular-nums; }
.alerts-col-actions { white-space: nowrap; text-align: right; }
.alerts-col-message { max-width: 24rem; }
.alerts-col-message span {
  display: inline-block;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.alerts-table tbody td.alerts-col-element {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.alerts-element-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.alerts-element-name { color: var(--matmon-text); font-weight: 600; }
.alerts-element-path { color: var(--matmon-muted); font-size: 0.72rem; }

.alerts-col-status { white-space: nowrap; }
.alerts-col-status .state-pill { margin-right: 0.25rem; }

.alerts-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface);
  color: var(--matmon-muted);
  cursor: pointer;
}
.alerts-action:hover { color: var(--matmon-text); border-color: var(--matmon-accent); }
.alerts-action svg { width: 0.95rem; height: 0.95rem; }
.alerts-action-ack:hover { color: var(--matmon-success); border-color: var(--matmon-success); }
.alerts-action + .alerts-action { margin-left: 0.3rem; }

.alerts-pager {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.alerts-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--matmon-border);
  border-radius: 6px;
  background: var(--matmon-surface);
  color: var(--matmon-text);
  cursor: pointer;
}
.alerts-pager-btn:disabled { opacity: 0.45; cursor: default; }
.alerts-pager-btn svg { width: 0.9rem; height: 0.9rem; }
.alerts-pager-info { color: var(--matmon-muted); font-size: 0.82rem; }
.alerts-pager-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  color: var(--matmon-muted);
  font-size: 0.8rem;
}
.alerts-pager-size select { width: auto; }

/* Acknowledged element state --------------------------------------------------
   Acknowledged = "handled". Shown as a separate blue "Ack" pill (next to the severity pill so both
   stay readable) plus a two-tone LEFT accent: the severity colour on top, ack-blue on the bottom —
   so Warning-Ack and Error-Ack stay distinct. The gradient is laid only on the left border via
   border-image-width (the other borders keep their normal colour). */
:root { --matmon-ack: #5f8dff; }

.state-pill[data-state="ack"] {
  background: rgba(95, 141, 255, 0.30);
}

/* Tree sensor chip — its left accent is driven by --tree-state-color (the severity colour). */
.monitoring-sensor-chip[data-acknowledged="true"] {
  border-left-color: transparent;
  border-image-source: linear-gradient(to bottom, var(--tree-state-color, #7c8eab) 0 50%, var(--matmon-ack) 50% 100%);
  border-image-slice: 1;
  border-image-width: 0 0 0 1;
}

/* Monitoring list row — its left accent is an explicit per-state colour. */
.monitoring-list-row[data-acknowledged="true"] {
  border-left-color: transparent;
  border-image-slice: 1;
  border-image-width: 0 0 0 1;
}
.monitoring-list-row[data-acknowledged="true"][data-state="warning"] {
  border-image-source: linear-gradient(to bottom, var(--matmon-warning) 0 50%, var(--matmon-ack) 50% 100%);
}
.monitoring-list-row[data-acknowledged="true"][data-state="error"] {
  border-image-source: linear-gradient(to bottom, var(--matmon-danger) 0 50%, var(--matmon-ack) 50% 100%);
}
.monitoring-list-row[data-acknowledged="true"][data-state="warning"] .monitoring-list-state-dot {
  background: linear-gradient(135deg, var(--matmon-warning) 0 50%, var(--matmon-ack) 50% 100%);
}
.monitoring-list-row[data-acknowledged="true"][data-state="error"] .monitoring-list-state-dot {
  background: linear-gradient(135deg, var(--matmon-danger) 0 50%, var(--matmon-ack) 50% 100%);
}

/* Alerts table row — same two-tone left accent (data-ack carries the acknowledged flag). */
.alerts-row[data-ack="true"] td:first-child {
  border-left-color: transparent;
  border-image-slice: 1;
  border-image-width: 0 0 0 1;
}
.alerts-row[data-ack="true"][data-state="warning"] td:first-child {
  border-image-source: linear-gradient(to bottom, var(--matmon-warning) 0 50%, var(--matmon-ack) 50% 100%);
}
.alerts-row[data-ack="true"][data-state="error"] td:first-child {
  border-image-source: linear-gradient(to bottom, var(--matmon-danger) 0 50%, var(--matmon-ack) 50% 100%);
}