/* Shared Ops shell.
 * This is the single visual source used by both the Vue routes under /ops/*
 * and the server-rendered operational pages.
 */

/* Scope responsive overrides to the independently deployed release page. */
.xr-scope[data-surface="ops"] .shell.ops-shell .component-versions.ops-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.component-deployments > .panel { margin-bottom: var(--xr-space-4); }
.component-deployments .ops-card strong { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .xr-scope[data-surface="ops"] .shell.ops-shell:has(.component-deployments) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .xr-scope[data-surface="ops"] .shell.ops-shell:has(.component-deployments) > .sidebar {
    position: relative !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: var(--xr-space-3);
  }
  .shell.ops-shell:has(.component-deployments) .sidebar :is(.subbrand, .ops-nav-section-label, .sidebar-user) { display: none; }
  .shell.ops-shell:has(.component-deployments) .ops-nav { display: flex; overflow-x: auto; flex: none; }
  .shell.ops-shell:has(.component-deployments) .ops-nav-section { display: flex; flex: none; }
  .shell.ops-shell:has(.component-deployments) .nav-item { white-space: nowrap; }
  .xr-scope[data-surface="ops"] .shell.ops-shell:has(.component-deployments) :is(.main, .content) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .xr-scope[data-surface="ops"] .shell.ops-shell:has(.component-deployments) .content { padding: var(--xr-space-3) !important; }
  .xr-scope[data-surface="ops"] .shell.ops-shell .component-deployments .ops-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .component-deployments .panel { overflow-x: auto; }
  .component-deployments .ops-status-row { flex-wrap: wrap; gap: var(--xr-space-3); }
}

.xr-scope[data-surface="ops"].ops-layout,
.xr-scope[data-surface="ops"] .shell.ops-shell {
  min-width: 1180px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(944px, 1fr) !important;
  background: var(--xr-bg);
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar, .shell.ops-shell > .sidebar) {
  position: sticky !important;
  z-index: 20;
  top: 0;
  box-sizing: border-box;
  width: 236px;
  height: 100vh !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  border-right: 1px solid var(--xr-side-border);
  color: var(--xr-side-text);
  background: var(--xr-side-bg);
}

.xr-scope[data-surface="ops"] :is(.ops-brand, .shell.ops-shell .brand) {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 8px;
  color: var(--xr-side-text);
  text-decoration: none;
}

.xr-scope[data-surface="ops"] :is(.ops-brand, .shell.ops-shell .brand) img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.xr-scope[data-surface="ops"] .ops-brand span,
.xr-scope[data-surface="ops"] .ops-brand strong,
.xr-scope[data-surface="ops"] .ops-brand small {
  display: block;
}

.xr-scope[data-surface="ops"] :is(.ops-brand strong, .shell.ops-shell .brand span) {
  color: var(--xr-side-text);
  font-size: var(--xr-type-body);
  font-weight: 750;
}

.xr-scope[data-surface="ops"] :is(.ops-brand small, .shell.ops-shell .subbrand) {
  margin: 3px 0 0;
  color: var(--xr-side-muted);
  font-size: var(--xr-type-caption);
  font-weight: 500;
}

.xr-scope[data-surface="ops"] .shell.ops-shell .subbrand {
  padding-left: 54px;
  margin-bottom: 18px;
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav, .shell.ops-shell .ops-nav) {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav p, .shell.ops-shell .ops-nav-section-label) {
  margin: 20px 12px 8px;
  color: var(--xr-side-muted);
  font-size: var(--xr-type-caption);
  font-weight: 500;
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav a, .shell.ops-shell .nav-item) {
  min-height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--xr-space-3);
  margin: 0;
  padding: 0 12px;
  border-radius: var(--xr-radius-control);
  color: var(--xr-side-text);
  background: transparent;
  font-size: var(--xr-type-body);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--xr-duration-fast) var(--xr-ease-standard),
    background-color var(--xr-duration-fast) var(--xr-ease-standard);
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav a, .shell.ops-shell .nav-item):hover {
  color: var(--xr-white);
  background: var(--xr-side-border);
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav a.is-active, .shell.ops-shell .nav-item.is-active) {
  color: var(--xr-ink);
  background: var(--xr-lime);
  font-weight: 700;
}

.xr-scope[data-surface="ops"] :is(.ops-sidebar nav a.is-active, .shell.ops-shell .nav-item.is-active):hover {
  color: var(--xr-ink);
  background: var(--xr-lime);
}

.xr-scope[data-surface="ops"] .ops-sidebar-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--xr-space-3);
  padding: var(--xr-space-4) var(--xr-space-3) 0;
  border-top: 1px solid var(--xr-side-border);
}

.xr-scope[data-surface="ops"] .ops-sidebar-foot span,
.xr-scope[data-surface="ops"] .ops-sidebar-foot b,
.xr-scope[data-surface="ops"] .ops-sidebar-foot small {
  display: block;
}

.xr-scope[data-surface="ops"] .ops-sidebar-foot b {
  overflow: hidden;
  color: var(--xr-side-text);
  font-size: var(--xr-type-body-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-scope[data-surface="ops"] .ops-sidebar-foot small {
  margin-top: var(--xr-space-1);
  color: var(--xr-side-muted);
  font-size: var(--xr-type-caption);
}

.xr-scope[data-surface="ops"] .ops-sidebar-foot > a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--xr-radius-xs);
  color: var(--xr-side-muted);
}

.xr-scope[data-surface="ops"] :is(.ops-main, .shell.ops-shell > .main) {
  min-width: 944px;
}

.xr-scope[data-surface="ops"] :is(.ops-topbar, .shell.ops-shell .topbar) {
  position: sticky;
  z-index: 10;
  top: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 var(--xr-space-8);
  border-bottom: 1px solid var(--xr-border);
  background: color-mix(in srgb, var(--xr-surface) 94%, transparent);
  backdrop-filter: blur(10px);
}

.xr-scope[data-surface="ops"] .ops-topbar > div {
  display: flex;
  align-items: center;
  gap: var(--xr-space-2);
  color: var(--xr-text-muted);
  font-size: var(--xr-type-body-sm);
}

.xr-scope[data-surface="ops"] .ops-topbar b {
  color: var(--xr-text);
}

.xr-scope[data-surface="ops"] .ops-topbar > a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: var(--xr-space-2);
  padding: 0 var(--xr-space-3);
  border: 1px solid var(--xr-border);
  border-radius: var(--xr-radius-control);
  color: var(--xr-ink);
  background: var(--xr-surface);
  font-size: var(--xr-type-body-sm);
  font-weight: 650;
  text-decoration: none;
}

.xr-scope[data-surface="ops"] .ops-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xr-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xr-green) 18%, transparent);
}

.xr-scope[data-surface="ops"] .shell.ops-shell .content {
  min-width: 944px;
  padding: 24px !important;
}