/* ==========================================================
   CONGA STATUS MATRIX - homepage only, activated by body.csm-active
   ========================================================== */

#csm-root { position: relative; margin: 0 0 2rem; font-size: 1rem; line-height: 1.5rem; }
#csm-root[hidden], #csm-card[hidden] { display: none; }

/* Status colours - shared by dots and card badges */
#csm-root [data-status="operational"]          { --csm-c: #2fcc66; }
#csm-root [data-status="degraded_performance"] { --csm-c: #f1c40f; }
#csm-root [data-status="partial_outage"]       { --csm-c: #e67e22; }
#csm-root [data-status="major_outage"]         { --csm-c: #e74c3c; --csm-fg: #fff; }
#csm-root [data-status="under_maintenance"]    { --csm-c: #3498db; --csm-fg: #fff; }

/* ---------- Legend ---------- */

#csm-root .csm-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e8e8e8; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: #fff;
}
#csm-root .csm-legend-item { display: flex; align-items: center; gap: 0.5rem; color: #6c6c6c; font-size: 0.875rem; }

/* ---------- Table ---------- */

#csm-root .csm-table-wrap { overflow-x: auto; border: 1px solid #e8e8e8; border-radius: 0 0 4px 4px; background: #fff; }
#csm-root table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#csm-root th,
#csm-root td { padding: 0.875rem 1rem; border-top: 1px solid #f0f0f0; text-align: center; vertical-align: middle; }
#csm-root thead th { border-top: 0; color: #3c3c3c; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
#csm-root .csm-service { width: 34%; min-width: 220px; color: #6c6c6c; text-align: left; }
#csm-root tbody tr:not(.csm-group-row):hover { background: #fafafa; }
#csm-root td[data-region] { cursor: pointer; }

/* ---------- Pillar / group rows ---------- */

#csm-root .csm-group-row > * { padding-top: 1rem; padding-bottom: 1rem; background: #fafafa; }
#csm-root .csm-group-row th.csm-service { padding: 0; color: #1c1c1c; font-size: 0.9375rem; font-weight: 600; }
#csm-root .csm-group-static { display: block; padding: 1rem; }

/* Shared reset for the two button types */
#csm-root .csm-toggle,
#csm-root .csm-detail-btn {
  margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#csm-root .csm-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 1rem; }
#csm-root .csm-toggle:focus-visible,
#csm-root .csm-detail-btn:focus-visible { outline: 2px solid #3498db; outline-offset: -2px; }

#csm-root .csm-chevron {
  flex: none; width: 0; height: 0;
  border: 4px solid transparent; border-right: 0; border-left: 5px solid currentColor;
  transition: transform 0.12s ease;
}
#csm-root .csm-toggle[aria-expanded="true"] .csm-chevron { transform: rotate(90deg); }

/* ---------- Status dots ---------- */

#csm-root .csm-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--csm-c, #cfcfcf); vertical-align: middle;
}
#csm-root .csm-group-row .csm-dot { width: 12px; height: 12px; }
#csm-root .csm-na { color: #cfcfcf; }

#csm-root .csm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Uptime detail card ---------- */

#csm-card {
  position: absolute; z-index: 40;
  width: 440px; max-width: calc(100vw - 2rem); padding: 1.25rem;
  border-radius: 8px; background: #202020; color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
#csm-card.csm-open { opacity: 1; visibility: visible; }
#csm-card.csm-all { width: 560px; }

#csm-card .csm-card-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
#csm-card .csm-card-sub { margin: 0 0 1rem; color: #8c8c8c; font-size: 0.8125rem; }
#csm-card .csm-card-region + .csm-card-region { margin-top: 1.125rem; }
#csm-card .csm-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }

#csm-card .csm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--csm-c, #cfcfcf); color: var(--csm-fg, #202020);
  font-size: 11px; font-weight: 700; line-height: 1;
}

#csm-card .csm-card-region-name { font-size: 0.9375rem; font-weight: 600; }
#csm-card .csm-card-status { margin-left: auto; color: #b4b4b4; font-size: 0.8125rem; }
#csm-card .csm-card-bar svg { display: block; width: 100%; height: 34px; }
#csm-card .csm-card-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.375rem; color: #8c8c8c; font-size: 0.8125rem; }
#csm-card .csm-rule { flex: 1 1 auto; height: 1px; background: #3a3a3a; }
#csm-card .csm-card-nodata { padding: 0.5rem 0; color: #8c8c8c; font-size: 0.8125rem; }
#csm-card a { color: #7fb8ea; }
#csm-card .csm-card-hint { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid #333; color: #7c7c7c; font-size: 0.75rem; }

#csm-card .csm-card-close {
  position: absolute; top: 0.625rem; right: 0.625rem;
  width: 28px; height: 28px; border: 0; border-radius: 4px;
  background: transparent; color: #8c8c8c; font-size: 18px; line-height: 1; cursor: pointer;
}
#csm-card .csm-card-close:hover { background: #2e2e2e; color: #fff; }
#csm-card:not(.csm-pinned) .csm-card-close { display: none; }

/* Hide the native component list ONLY after the matrix renders */
body.csm-active .components-section { display: none; }

/* ---------- Responsive ---------- */

@media screen and (max-width: 650px) {
  #csm-root th,
  #csm-root td,
  #csm-root .csm-toggle,
  #csm-root .csm-group-static { padding: 0.75rem 0.625rem; }
  #csm-root .csm-service { min-width: 160px; }
  #csm-card { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #csm-root .csm-chevron, #csm-card { transition: none; }
}