.ops-body {
  background: var(--ss-bg);
  height: 100%;
  overflow: hidden;
}

.ops-shell {
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.ops-sidebar {
  width: 252px;
  background: var(--ss-white);
  border-right: 1px solid var(--ss-border);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.ops-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.ops-brand-logo {
  width: 140px;
  height: auto;
}

.ops-brand-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 151, 167, 0.08);
  color: var(--ss-teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.ops-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ops-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--ss-radius-md);
  color: var(--ss-slate);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
}

.ops-nav-link:hover {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, 0.055);
}

.ops-nav-link.active {
  color: var(--ss-teal-deep);
  background: #F1F7F8;
  border-color: #DCECEF;
  font-weight: 650;
}

.ops-nav-link i {
  width: 18px;
  text-align: center;
}

.ops-sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-admin-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--ss-radius-md);
  border: 1px solid var(--ss-border);
  background: var(--ss-surface-soft);
}

.ops-admin-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-gradient-teal);
  color: #fff;
  font-weight: 700;
}

.ops-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ss-text-secondary);
  padding: 10px 12px;
  border-radius: var(--ss-radius-md);
}

.ops-signout:hover {
  background: var(--ss-hover);
}

.ops-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 28px 32px;
  overscroll-behavior: contain;
}

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

.ops-top-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  padding: 0 14px;
  min-height: 44px;
  width: min(460px, 100%);
}

.ops-top-search i,
.ops-top-icon {
  color: var(--ss-text-muted);
}

.ops-top-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: var(--ss-text);
}

.ops-topbar-actions {
  display: flex;
  gap: 10px;
}

.ops-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  background: var(--ss-white);
  text-decoration: none;
}

.ops-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ops-page-header h1 {
  margin: 0 0 4px;
  font-size: clamp(1.8rem, 2vw, 2.2rem);
}

.ops-page-header p {
  margin: 0;
  color: var(--ss-text-secondary);
}

.ops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ops-kpi-card,
.ops-panel {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
}

.ops-kpi-card {
  padding: 18px;
}

.ops-kpi-label {
  color: var(--ss-text-secondary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ops-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ss-text);
}

.ops-kpi-sub {
  margin-top: 10px;
  color: var(--ss-teal-deep);
  font-size: 12px;
  font-weight: 600;
}

.ops-grid-two,
.ops-grid-three {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.ops-grid-two {
  grid-template-columns: 1.2fr 1fr;
}

.ops-grid-three {
  grid-template-columns: 1.2fr 1fr .9fr;
}

.ops-panel {
  padding: 18px;
}

.ops-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ops-panel-header h2,
.ops-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ops-link-inline {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.ops-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ss-border);
}
.ops-list-row:first-child { border-top: 0; padding-top: 0; }

.ops-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 6px;
  flex: 0 0 auto;
}

.ops-status-dot.status-red { background: #ef4444; }
.ops-status-dot.status-yellow { background: #f59e0b; }
.ops-status-dot.status-green { background: #10b981; }
.ops-status-dot.status-indigo { background: #6366f1; }

.ops-metric-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ops-metric-stack .metric {
  background: var(--ss-surface-soft);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  padding: 14px;
}

.ops-metric-stack .metric-label { font-size: 12px; color: var(--ss-text-muted); }
.ops-metric-stack .metric-value { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }

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

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

.ops-table th,
.ops-table td {
  padding: 12px 10px;
  border-top: 1px solid var(--ss-border);
  vertical-align: middle;
}

.ops-table thead th {
  border-top: 0;
  color: var(--ss-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.ops-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ops-badge.healthy { background: rgba(16,185,129,.12); color: #0f9f6e; }
.ops-badge.warning { background: rgba(245,158,11,.12); color: #b45309; }
.ops-badge.suspended, .ops-badge.critical { background: rgba(239,68,68,.12); color: #b91c1c; }
.ops-badge.low { background: rgba(148,163,184,.15); color: #475569; }
.ops-badge.normal, .ops-badge.open { background: rgba(99,102,241,.12); color: #4f46e5; }
.ops-badge.high, .ops-badge.investigating { background: rgba(244,63,94,.12); color: #e11d48; }
.ops-badge.resolved { background: rgba(16,185,129,.12); color: #0f9f6e; }
.ops-badge.minor { background: rgba(0,151,167,.12); color: var(--ss-teal-deep); }
.ops-badge.major { background: rgba(245,158,11,.12); color: #b45309; }

.ops-health-ring {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(16,185,129,.15) 40%, rgba(16,185,129,.08) 41%, rgba(16,185,129,.08) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  font-size: 1.75rem;
}

.ops-detail-card {
  background: var(--ss-surface-soft);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  padding: 16px;
}

.ops-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.ops-mini-stat-label { color: var(--ss-text-muted); font-size: 12px; }
.ops-mini-stat-value { font-weight: 700; margin-top: 4px; }

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

.ops-note-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-note {
  padding: 12px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  background: var(--ss-surface-soft);
}

.ops-chart-shell {
  min-height: 260px;
}

.ops-empty {
  color: var(--ss-text-muted);
  font-size: 13px;
  padding: 16px 0;
}

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

@media (max-width: 960px) {
  .ops-body { height: auto; overflow: auto; }
  .ops-shell { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .ops-sidebar { width: 100%; height: auto; min-height: auto; overflow: visible; }
  .ops-main { height: auto; overflow: visible; padding: 18px; }
  .ops-topbar,
  .ops-page-header { flex-direction: column; align-items: stretch; }
  .ops-form-inline,
  .ops-form-grid,
  .ops-metric-stack,
  .ops-mini-stats,
  .ops-kpi-grid { grid-template-columns: 1fr; }
}

/* v1.4: Defensive Ops scroll ownership.
   The customer app globally owns body scrolling, so Ops explicitly owns
   its viewport and the main column remains scrollable on every Ops page. */
html:has(body.ops-body) {
  height: 100%;
  overflow: hidden;
}

body.shortsauce-app-body.ops-body,
body.ops-body {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.ops-body .ops-shell {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.ops-body .ops-main {
  height: 100vh !important;
  min-width: 0;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.ops-body .ops-sidebar {
  height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 960px) {
  html:has(body.ops-body) {
    height: auto;
    overflow: auto;
  }

  body.shortsauce-app-body.ops-body,
  body.ops-body {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }

  body.ops-body .ops-shell,
  body.ops-body .ops-main,
  body.ops-body .ops-sidebar {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* Security / privacy cues */
.ops-privacy-notice,
.ops-security-footnote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ss-text-muted);
  font-size: 12px;
}

.ops-privacy-notice {
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--ss-surface);
}

.ops-security-footnote {
  padding: 0 4px;
}


/* --------------------------------------------------------------------------
   Dedicated Ops authentication
   -------------------------------------------------------------------------- */
.ops-auth-body {
  min-height: 100vh;
  background: var(--ss-bg);
  overflow: auto;
}

.ops-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.ops-auth-card {
  width: min(440px, 100%);
  padding: 28px;
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-xl);
}

.ops-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.ops-auth-logo {
  width: 150px;
  height: auto;
}

.ops-auth-security-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ss-border);
  color: var(--ss-text-muted);
  font-size: 12px;
}

.ops-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ops-capability-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  background: var(--ss-surface-soft);
  font-size: 12px;
  word-break: break-word;
}

@media (max-width: 720px) {
  .ops-capability-grid {
    grid-template-columns: 1fr;
  }
}


/* Ops one-over: attention state + directory paging */
.ops-health-ring.attention {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}

.ops-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .ops-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Support Scenario 01 — Organization-scoped Link Investigation */
.ops-link-investigation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.ops-link-detail {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

.ops-row-selected td {
  background: rgba(18, 164, 176, 0.08);
}

.ops-break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ops-diagnosis {
  border: 1px solid rgba(18, 164, 176, 0.35);
  background: rgba(18, 164, 176, 0.08);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.ops-investigation-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ops-border, #dce3ec);
}

.ops-investigation-facts > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 0.58fr);
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--ops-border, #dce3ec);
  font-size: 0.82rem;
}

.ops-investigation-facts > div > span {
  color: var(--ops-muted, #64748b);
}

.ops-investigation-facts > div > strong {
  min-width: 0;
  text-align: right;
}

@media (max-width: 1199.98px) {
  .ops-link-investigation-grid {
    grid-template-columns: 1fr;
  }

  .ops-link-detail {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .ops-investigation-facts > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .ops-investigation-facts > div > strong {
    text-align: left;
  }
}


/* Support Scenario 02 — Analytics Investigation */
.ops-analytics-investigation {
  padding: 1rem;
}

.ops-analytics-reconciliation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.ops-analytics-reconciliation > div {
  border: 1px solid var(--ops-border, #dce3ec);
  border-radius: 10px;
  padding: 0.7rem;
  min-width: 0;
}

.ops-analytics-reconciliation span,
.ops-analytics-reconciliation strong {
  display: block;
}

.ops-analytics-reconciliation span {
  color: var(--ops-muted, #64748b);
  font-size: 0.75rem;
}

.ops-analytics-reconciliation strong {
  margin-top: 0.2rem;
  font-size: 1rem;
}

.ops-analytics-explanation,
.ops-analytics-retention-note {
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: rgba(18, 164, 176, 0.07);
  border: 1px solid rgba(18, 164, 176, 0.25);
  font-size: 0.8rem;
  line-height: 1.5;
}

.ops-analytics-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ops-analytics-breakdown {
  border: 1px solid var(--ops-border, #dce3ec);
  border-radius: 10px;
  padding: 0.75rem;
  min-width: 0;
}

.ops-analytics-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--ops-border, #dce3ec);
  font-size: 0.78rem;
}

.ops-analytics-breakdown-row:last-child {
  border-bottom: 0;
}

@media (max-width: 767.98px) {
  .ops-analytics-reconciliation,
  .ops-analytics-breakdown-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479.98px) {
  .ops-analytics-reconciliation,
  .ops-analytics-breakdown-grid {
    grid-template-columns: 1fr;
  }
}


/* Support Scenario 04 — Billing Investigation */
.ops-billing-diagnosis {
  border: 1px solid var(--ops-border, #d8e2ec);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: rgba(90, 116, 145, 0.06);
}

.ops-billing-diagnosis.warning {
  border-color: rgba(216, 150, 37, 0.45);
  background: rgba(245, 180, 57, 0.10);
}

.ops-billing-diagnosis.healthy {
  border-color: rgba(14, 158, 122, 0.35);
  background: rgba(14, 158, 122, 0.08);
}

.ops-transaction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ops-border, #dce3ec);
}

.ops-transaction-grid > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 0.58fr);
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--ops-border, #dce3ec);
  min-width: 0;
}

.ops-transaction-grid > div > span {
  color: var(--ops-muted, #64748b);
}

.ops-transaction-grid > div > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.ops-transaction-error {
  border-radius: 10px;
  background: rgba(216, 150, 37, 0.08);
  padding: 0.7rem 0.8rem;
}

.ops-grid-span-2 {
  grid-column: span 2;
}

@media (max-width: 991.98px) {
  .ops-grid-span-2 {
    grid-column: auto;
  }

  .ops-transaction-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .ops-transaction-grid > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .ops-transaction-grid > div > strong {
    text-align: left;
  }
}


/* Support Scenario 05 — Invitation / email investigation */
#invite-investigation .ops-table th,
#invite-investigation .ops-table td {
  vertical-align: top;
}

#invite-investigation .ops-table td {
  min-width: 120px;
}

#invite-investigation .ops-table td:first-child,
#invite-investigation .ops-table td:nth-child(4) {
  max-width: 260px;
}


/* Support Scenario 05A — Invitation investigation containment */
#invite-investigation {
  min-width: 0;
  overflow: hidden;
}

#invite-investigation .ops-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#invite-investigation .ops-invite-investigation-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}

#invite-investigation .ops-invite-investigation-table th,
#invite-investigation .ops-invite-investigation-table td {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#invite-investigation .ops-invite-investigation-table th:nth-child(1) { width: 18%; }
#invite-investigation .ops-invite-investigation-table th:nth-child(2) { width: 9%; }
#invite-investigation .ops-invite-investigation-table th:nth-child(3) { width: 14%; }
#invite-investigation .ops-invite-investigation-table th:nth-child(4) { width: 22%; }
#invite-investigation .ops-invite-investigation-table th:nth-child(5) { width: 18%; }
#invite-investigation .ops-invite-investigation-table th:nth-child(6) { width: 19%; }

#invite-investigation .ops-invite-investigation-table * {
  max-width: 100%;
}

/* ==========================================================================
   Ops UI Pass 01 — Navigation hierarchy, collapse, and interaction feedback
   ========================================================================== */
.ops-sidebar {
  transition:
    width 180ms ease,
    padding 180ms ease;
}

.ops-sidebar-brand-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
}

.ops-sidebar-brand-row .ops-brand {
  min-width: 0;
  flex: 1 1 auto;
}

.ops-sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -31px;
  z-index: 125;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--ss-text-secondary);
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 50%;
  cursor: pointer;
}

.ops-sidebar-toggle:hover,
.ops-sidebar-toggle:focus-visible {
  color: var(--ss-teal-deep);
  border-color: rgba(0, 151, 167, .42);
}

.ops-nav {
  gap: 18px;
}

.ops-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ops-nav-group-label {
  padding: 0 12px 4px;
  color: var(--ss-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ops-nav-link span,
.ops-sidebar-copy,
.ops-signout span,
.ops-brand-badge,
.ops-brand-logo {
  transition:
    opacity 120ms ease,
    width 180ms ease;
}

/* Collapsed desktop Ops navigation */
@media (min-width: 961px) {
  body.ops-sidebar-collapsed .ops-sidebar,
  .ops-sidebar.is-collapsed {
    width: 76px;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: visible !important;
  }

  .ops-sidebar.is-collapsed .ops-brand {
    justify-content: center;
    padding: 0;
  }

  .ops-sidebar.is-collapsed .ops-brand-logo {
    width: 30px;
    height: 34px;
    object-fit: cover;
    object-position: left center;
  }

  .ops-sidebar.is-collapsed .ops-brand-badge,
  .ops-sidebar.is-collapsed .ops-nav-group-label,
  .ops-sidebar.is-collapsed .ops-nav-link span,
  .ops-sidebar.is-collapsed .ops-sidebar-copy,
  .ops-sidebar.is-collapsed .ops-signout span {
    display: none !important;
  }

  .ops-sidebar.is-collapsed .ops-nav {
    gap: 10px;
  }

  .ops-sidebar.is-collapsed .ops-nav-group {
    gap: 5px;
  }

  .ops-sidebar.is-collapsed .ops-nav-group + .ops-nav-group {
    padding-top: 8px;
    border-top: 1px solid var(--ss-border);
  }

  .ops-sidebar.is-collapsed .ops-nav-link,
  .ops-sidebar.is-collapsed .ops-signout {
    justify-content: center;
    padding-left: 9px;
    padding-right: 9px;
  }

  .ops-sidebar.is-collapsed .ops-nav-link i,
  .ops-sidebar.is-collapsed .ops-signout i {
    width: auto;
    margin: 0;
    font-size: 15px;
  }

  .ops-sidebar.is-collapsed .ops-admin-card {
    justify-content: center;
    padding: 8px;
  }

  .ops-sidebar.is-collapsed .ops-admin-avatar {
    width: 34px;
    height: 34px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle {
    right: -27px;
  }
}

/* Top bar stays visible while the Ops work area scrolls. */
.ops-topbar {
  position: sticky;
  top: -20px;
  z-index: 90;
  margin: -20px -28px 18px;
  padding: 20px 28px 14px;
  background: color-mix(in srgb, var(--ss-bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--ss-border) 72%, transparent);
}

/* A result/action message should never appear silently above the current
   scroll position. Keep it directly beneath the sticky top bar. */
.ops-flash-region {
  position: sticky;
  top: 55px;
  z-index: 85;
}

.ops-flash-message {
  transition: opacity 180ms ease, transform 180ms ease;
}

.ops-flash-message.ops-flash-fade {
  opacity: .86;
}

/* Existing query-parameter detail pages currently place the selected record
   below long directories. Until they become dedicated pages, visibly focus
   and immediately scroll to the selected detail. */
.ops-selected-detail-focus {
  scroll-margin-top: 92px;
  outline: 2px solid rgba(0, 151, 167, .16);
  outline-offset: 4px;
}

@media (max-width: 960px) {
  .ops-sidebar-toggle {
    display: none;
  }

  .ops-topbar {
    position: relative;
    top: auto;
    margin: 0;
    padding: 0 0 18px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .ops-flash-region {
    position: static;
  }
}

/* ==========================================================================
   Ops UI Pass 01A — Collapsed sidebar polish
   Fixes the cropped brand/toggle behavior seen in the first shell pass.
   ========================================================================== */
.ops-sidebar {
  position: relative;
  z-index: 110;
}

.ops-sidebar-brand-row {
  flex: 0 0 auto;
}

.ops-brand {
  overflow: hidden;
}

.ops-brand-logo--icon {
  display: none;
  width: 30px;
  height: 34px;
  object-fit: contain;
}

.ops-sidebar-toggle {
  right: -14px;
  z-index: 140;
  box-shadow: none;
}

@media (min-width: 961px) {
  .ops-sidebar.is-collapsed .ops-brand {
    overflow: visible;
    justify-content: center;
  }

  .ops-sidebar.is-collapsed .ops-brand-logo--full {
    display: none;
  }

  .ops-sidebar.is-collapsed .ops-brand-logo--icon {
    display: block;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle {
    right: -14px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-footer {
    align-items: stretch;
  }

  .ops-sidebar.is-collapsed .ops-admin-card,
  .ops-sidebar.is-collapsed .ops-signout {
    min-width: 0;
  }

  .ops-sidebar.is-collapsed .ops-nav-group + .ops-nav-group {
    margin-top: 2px;
    padding-top: 10px;
  }
}

/* ==========================================================================
   Ops UI Pass 01B — Compact navigation + no-flash sidebar state
   ========================================================================== */
.ops-sidebar {
  width: 264px;
  flex: 0 0 264px;
  padding: 22px 18px 18px;
  gap: 18px;
}

.ops-sidebar-brand-row {
  min-height: 46px;
  padding-right: 30px;
}

.ops-sidebar-brand-row .ops-brand {
  gap: 10px;
}

.ops-brand-logo--full {
  width: 136px;
}

.ops-brand-badge {
  flex: 0 0 auto;
}

.ops-sidebar-toggle {
  top: 23px;
  right: -33px;
  transform: none;
}

/* Overview remains visible. Secondary areas collapse so a normal-height
   desktop menu starts without needing its own scroll position. */
.ops-nav {
  gap: 10px;
}

.ops-nav-group--primary {
  gap: 4px;
}

.ops-nav-disclosure {
  margin: 0;
}

.ops-nav-disclosure > summary {
  list-style: none;
}

.ops-nav-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ops-nav-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--ss-text-muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  user-select: none;
}

.ops-nav-group-summary:hover {
  color: var(--ss-text-secondary);
  background: var(--ss-hover);
}

.ops-nav-group-summary i {
  font-size: 9px;
  transition: transform 150ms ease;
}

.ops-nav-disclosure[open] .ops-nav-group-summary i {
  transform: rotate(180deg);
}

.ops-nav-group--nested {
  margin-top: 3px;
  gap: 4px;
}

/* Keep sidebar independently scrollable as a safety valve on short screens,
   but do not force a permanent scrollbar when the collapsed groups fit. */
body.ops-body .ops-sidebar {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-gutter: auto;
}

/* Apply saved collapsed width before opsShell.js loads, eliminating the
   expand-then-collapse pop when navigating between Ops pages. */
@media (min-width: 961px) {
  html.ops-sidebar-pref-collapsed .ops-sidebar {
    width: 76px;
    flex-basis: 76px;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: visible !important;
  }

  html.ops-sidebar-pref-collapsed .ops-brand-logo--full,
  html.ops-sidebar-pref-collapsed .ops-brand-badge,
  html.ops-sidebar-pref-collapsed .ops-nav-group-label,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary span,
  html.ops-sidebar-pref-collapsed .ops-nav-link span,
  html.ops-sidebar-pref-collapsed .ops-sidebar-copy,
  html.ops-sidebar-pref-collapsed .ops-signout span {
    display: none !important;
  }

  html.ops-sidebar-pref-collapsed .ops-brand-logo--icon {
    display: block;
  }

  html.ops-sidebar-pref-collapsed .ops-brand {
    justify-content: center;
    overflow: visible;
  }

  html.ops-sidebar-pref-collapsed .ops-nav-link,
  html.ops-sidebar-pref-collapsed .ops-signout,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary {
    justify-content: center;
    padding-left: 9px;
    padding-right: 9px;
  }

  html.ops-sidebar-pref-collapsed .ops-nav-group-summary i {
    font-size: 10px;
  }

  html.ops-sidebar-pref-collapsed .ops-sidebar-brand-row {
    padding-right: 0;
  }

  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle {
    right: -27px;
  }

  .ops-sidebar.is-collapsed .ops-nav-group-summary span {
    display: none !important;
  }

  .ops-sidebar.is-collapsed .ops-nav-group-summary {
    justify-content: center;
    padding-left: 9px;
    padding-right: 9px;
  }

  .ops-sidebar.is-collapsed .ops-nav-group-summary i {
    font-size: 10px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-brand-row {
    padding-right: 0;
  }
}

/* ==========================================================================
   Ops UI Pass 01C — Sidebar hierarchy + compact labels
   ========================================================================== */

/* Keep the collapse control completely outside the brand line. */
.ops-sidebar-brand-row {
  min-height: 48px;
  padding-right: 0;
}

.ops-sidebar-toggle {
  top: 74px;
  right: -14px;
  transform: none;
}

/* Dedicated compact brand mark; avoids cropping the horizontal wordmark. */
.ops-brand-mark {
  display: none;
  width: 30px;
  height: 34px;
  flex: 0 0 30px;
  background: url('/images/brand/shortsaucy-icon.png') center/contain no-repeat;
}

.ops-nav-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ops-nav-anchor {
  margin-top: 2px;
}

.ops-nav-group-summary {
  position: relative;
  gap: 10px;
  justify-content: flex-start;
}

.ops-nav-group-summary .ops-nav-group-icon {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  font-size: 13px;
}

.ops-nav-group-summary .ops-nav-group-chevron {
  width: auto;
  margin-left: auto;
  font-size: 9px;
  transition: transform 150ms ease;
}

.ops-nav-disclosure[open] .ops-nav-group-chevron {
  transform: rotate(180deg);
}

/* Existing rule rotated every icon in an open disclosure. Neutralize that
   now that summaries have a dedicated section icon + dedicated chevron. */
.ops-nav-disclosure[open] .ops-nav-group-summary .ops-nav-group-icon {
  transform: none !important;
}

/* One useful destination remains visible for each collapsed section:
   Support, Plans & Limits, and Settings. */
.ops-nav-disclosure:not([open]) + .ops-nav-anchor {
  display: flex;
}

@media (min-width: 961px) {
  .ops-sidebar.is-collapsed .ops-brand-logo--full,
  html.ops-sidebar-pref-collapsed .ops-brand-logo--full {
    display: none !important;
  }

  .ops-sidebar.is-collapsed .ops-brand-mark,
  html.ops-sidebar-pref-collapsed .ops-brand-mark {
    display: block;
  }

  .ops-sidebar.is-collapsed .ops-brand,
  html.ops-sidebar-pref-collapsed .ops-brand {
    justify-content: center;
    overflow: visible;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle,
  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle {
    top: 74px;
    right: -14px;
  }

  /* Collapsed group headers show meaningful section icons rather than bare
     chevrons. The chevron is hidden because there is no room for both. */
  .ops-sidebar.is-collapsed .ops-nav-group-summary .ops-nav-group-chevron,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary .ops-nav-group-chevron {
    display: none !important;
  }

  .ops-sidebar.is-collapsed .ops-nav-group-summary .ops-nav-group-icon,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary .ops-nav-group-icon {
    display: inline-block !important;
    width: auto;
    margin: 0;
    font-size: 14px;
  }

  /* Rich hover/focus labels make every compact icon self-explanatory. */
  .ops-sidebar.is-collapsed [data-collapsed-label],
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label] {
    position: relative;
    overflow: visible;
  }

  .ops-sidebar.is-collapsed [data-collapsed-label]::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]::after {
    content: attr(data-collapsed-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    z-index: 160;
    transform: translateY(-50%) translateX(-4px);
    width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    color: var(--ss-text);
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .ops-sidebar.is-collapsed [data-collapsed-label]:hover::after,
  .ops-sidebar.is-collapsed [data-collapsed-label]:focus-visible::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]:hover::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }

  /* Keep the compact section open/close action usable without turning the
     sidebar into an unexplained column of arrows. */
  .ops-sidebar.is-collapsed .ops-nav-group-summary,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary {
    min-height: 40px;
  }

  .ops-sidebar.is-collapsed .ops-nav-anchor,
  html.ops-sidebar-pref-collapsed .ops-nav-anchor {
    margin-top: 0;
  }
}

/* ==========================================================================
   Ops UI Pass 01D — Dedicated menu control + compact disclosure cues
   ========================================================================== */

/* The menu control now has its own row and never overlaps branding or links. */
.ops-sidebar-brand-row {
  min-height: 44px;
  padding: 0;
}

.ops-sidebar-menu-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 36px;
  margin-top: -6px;
}

.ops-sidebar-toggle {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  width: auto;
  min-width: 72px;
  height: 32px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-sidebar-toggle i {
  font-size: 13px;
}

.ops-sidebar-toggle-label {
  display: inline;
}

/* The compact section icon gets a small caret badge so it is visually obvious
   that more destinations live behind it. */
.ops-nav-group-summary .ops-nav-group-icon {
  position: relative;
}

@media (min-width: 961px) {
  .ops-sidebar.is-collapsed .ops-sidebar-menu-control,
  html.ops-sidebar-pref-collapsed .ops-sidebar-menu-control {
    justify-content: center;
    margin-top: -2px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle,
  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle {
    width: 40px;
    min-width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle-label,
  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle-label {
    display: none;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle i,
  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle i {
    font-size: 14px;
  }

  /* Restore a tiny disclosure caret beside section icons in compact mode. */
  .ops-sidebar.is-collapsed .ops-nav-group-summary,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary {
    position: relative;
  }

  .ops-sidebar.is-collapsed .ops-nav-group-summary .ops-nav-group-chevron,
  html.ops-sidebar-pref-collapsed .ops-nav-group-summary .ops-nav-group-chevron {
    display: block !important;
    position: absolute;
    right: 6px;
    bottom: 6px;
    margin: 0;
    font-size: 6px;
    opacity: .7;
  }

  .ops-sidebar.is-collapsed .ops-nav-disclosure[open] .ops-nav-group-summary,
  html.ops-sidebar-pref-collapsed .ops-nav-disclosure[open] .ops-nav-group-summary {
    color: var(--ss-teal-deep);
    background: rgba(0, 151, 167, .055);
  }

  /* A subtle connector communicates that the revealed icons belong to the
     section the user just expanded. */
  .ops-sidebar.is-collapsed .ops-nav-disclosure[open] .ops-nav-group--nested,
  html.ops-sidebar-pref-collapsed .ops-nav-disclosure[open] .ops-nav-group--nested {
    position: relative;
    margin-top: 2px;
    padding-top: 3px;
  }

  .ops-sidebar.is-collapsed .ops-nav-disclosure[open] .ops-nav-group--nested::before,
  html.ops-sidebar-pref-collapsed .ops-nav-disclosure[open] .ops-nav-group--nested::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 1px;
    transform: translateX(-50%);
    background: var(--ss-border);
  }
}

/* ==========================================================================
   Ops UI Pass 01E — Top Brand/Menu Alignment
   ========================================================================== */
.ops-sidebar-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0;
}

.ops-sidebar-brand-row .ops-brand {
  min-width: 0;
}

.ops-sidebar-menu-control {
  display: none !important;
}

.ops-sidebar-toggle {
  position: static;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.ops-sidebar-toggle:hover,
.ops-sidebar-toggle:focus-visible {
  color: var(--ss-teal-deep);
  background: var(--ss-hover);
  border-color: var(--ss-border);
}

.ops-sidebar-toggle i {
  font-size: 14px;
}

.ops-sidebar-toggle-label {
  display: none !important;
}

@media (min-width: 961px) {
  .ops-sidebar.is-collapsed .ops-sidebar-brand-row,
  html.ops-sidebar-pref-collapsed .ops-sidebar-brand-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
  }

  .ops-sidebar.is-collapsed .ops-sidebar-toggle,
  html.ops-sidebar-pref-collapsed .ops-sidebar-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .ops-sidebar.is-collapsed .ops-brand,
  html.ops-sidebar-pref-collapsed .ops-brand {
    justify-content: center;
  }
}



/* ==========================================================================
   Ops UI Pass 01F — Final sidebar width + faster compact labels
   ========================================================================== */

/* Give the expanded brand row enough room for the full ShortSaucy wordmark,
   OPS badge, and hamburger without clipping. */
.ops-sidebar {
  width: 286px;
  flex: 0 0 286px;
}

.ops-sidebar-brand-row {
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
}

.ops-sidebar-brand-row .ops-brand {
  overflow: visible;
}

.ops-brand-logo--full {
  width: 144px;
  flex: 0 0 auto;
}

.ops-brand-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Make compact hover/focus labels appear essentially immediately. */
@media (min-width: 961px) {
  .ops-sidebar.is-collapsed [data-collapsed-label]::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]::after {
    transition:
      opacity 20ms linear,
      transform 20ms linear,
      visibility 0s linear 20ms;
  }

  .ops-sidebar.is-collapsed [data-collapsed-label]:hover::after,
  .ops-sidebar.is-collapsed [data-collapsed-label]:focus-visible::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]:hover::after,
  html.ops-sidebar-pref-collapsed .ops-sidebar [data-collapsed-label]:focus-visible::after {
    transition-delay: 0s;
  }
}


/* ==========================================================================
   Ops UI Pass 02 — Organizations workspace navigation
   ========================================================================== */
.ops-org-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  backdrop-filter: blur(8px);
}

.ops-org-workspace-nav-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-org-workspace-nav-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-org-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ops-org-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-org-workspace-tab:hover {
  color: var(--ss-text);
  background: var(--ss-hover);
}

.ops-org-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, .055);
  border-color: rgba(0, 151, 167, .22);
}

.ops-org-tool-panel {
  scroll-margin-top: 116px;
}

.ops-org-tool-panel[hidden] {
  display: none !important;
}

.ops-org-tool-panel.is-active {
  animation: opsOrgPanelIn 120ms ease-out;
}

@keyframes opsOrgPanelIn {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Complimentary access uses the same focused-workspace pattern without
   forcing the customer list and selected record into competing columns. */
.ops-complimentary-customer-table th:nth-child(1) { width: 42%; }
.ops-complimentary-customer-table th:nth-child(2) { width: 34%; }
.ops-complimentary-customer-table th:nth-child(3) { width: 12%; }
.ops-complimentary-customer-table th:nth-child(4) { width: 12%; }

.ops-complimentary-customer-table td:first-child,
.ops-complimentary-customer-table td:nth-child(2) {
  overflow-wrap: anywhere;
}

.ops-complimentary-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  backdrop-filter: blur(8px);
  scroll-margin-top: 76px;
}

.ops-complimentary-workspace-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-complimentary-workspace-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-complimentary-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ops-complimentary-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-complimentary-workspace-tab:hover {
  color: var(--ss-text);
  background: var(--ss-hover);
}

.ops-complimentary-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, .055);
  border-color: rgba(0, 151, 167, .22);
}

.ops-complimentary-panel {
  scroll-margin-top: 116px;
}

.ops-complimentary-panel[hidden] {
  display: none !important;
}

.ops-complimentary-panel.is-active {
  animation: opsOrgPanelIn 120ms ease-out;
}

@media (max-width: 760px) {
  .ops-complimentary-workspace-nav {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .ops-complimentary-workspace-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ops-complimentary-workspace-tab {
    justify-content: flex-start;
  }
}

.ops-org-summary {
  scroll-margin-top: 116px;
}

@media (max-width: 960px) {
  .ops-org-workspace-nav {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .ops-org-workspace-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ops-org-workspace-tab {
    justify-content: center;
  }
}


/* ==========================================================================
   Ops UI Pass 02A — Compact organization summary
   ========================================================================== */
.ops-org-directory {
  margin-bottom: 16px;
}

.ops-org-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr) minmax(280px, .9fr);
  gap: 16px;
}

.ops-org-summary-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-org-summary-facts > div {
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid var(--ss-border);
}

.ops-org-summary-facts span,
.ops-org-summary-facts strong {
  display: block;
}

.ops-org-summary-facts span {
  color: var(--ss-text-muted);
  font-size: 11px;
}

.ops-org-summary-facts strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.ops-org-compact-list {
  display: grid;
  gap: 0;
}

.ops-org-compact-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ss-border);
  font-size: 12px;
}

.ops-org-compact-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.ops-org-compact-list span {
  color: var(--ss-text-muted);
}

.ops-org-usage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ops-org-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-org-action-grid .ops-note {
  margin: 0;
}

.ops-org-action-wide {
  grid-column: 1 / -1;
}

.ops-org-operational-form {
  display: grid;
  grid-template-columns: 180px minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 1320px) {
  .ops-org-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ops-org-summary-grid > :first-child {
    grid-column: 1 / -1;
  }

  .ops-org-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ops-org-summary-grid,
  .ops-org-action-grid,
  .ops-org-summary-facts {
    grid-template-columns: 1fr;
  }

  .ops-org-summary-grid > :first-child,
  .ops-org-action-wide {
    grid-column: auto;
  }

  .ops-org-operational-form {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Ops UI Pass 03 — Support workspace
   ========================================================================== */
.ops-support-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  backdrop-filter: blur(8px);
}

.ops-support-workspace-nav-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-support-workspace-nav-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-support-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ops-support-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-support-workspace-tab:hover {
  color: var(--ss-text);
  background: var(--ss-hover);
}

.ops-support-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, .055);
  border-color: rgba(0, 151, 167, .22);
}

.ops-support-panel {
  scroll-margin-top: 116px;
}

.ops-support-panel[hidden] {
  display: none !important;
}

.ops-support-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .95fr) minmax(260px, .7fr);
  gap: 16px;
}

.ops-support-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 14px;
}

.ops-support-facts > div {
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid var(--ss-border);
}

.ops-support-facts span,
.ops-support-facts strong {
  display: block;
}

.ops-support-facts span {
  color: var(--ss-text-muted);
  font-size: 11px;
}

.ops-support-facts strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.ops-support-pii {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--ss-border);
}

.ops-support-update-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ops-support-reply-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 16px;
}

.ops-support-activity-list {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.ops-support-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}

.ops-support-activity-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 17px;
  bottom: -13px;
  width: 1px;
  background: var(--ss-border);
}

.ops-support-activity-item:last-child::before {
  display: none;
}

.ops-support-activity-marker {
  width: 9px;
  height: 9px;
  margin: 14px auto 0;
  border-radius: 50%;
  background: var(--ss-teal);
  border: 2px solid var(--ss-surface);
  box-shadow: 0 0 0 1px var(--ss-border);
  z-index: 1;
}

@media (max-width: 1320px) {
  .ops-support-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ops-support-summary-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .ops-support-workspace-nav {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .ops-support-workspace-tabs,
  .ops-support-summary-grid,
  .ops-support-reply-layout,
  .ops-support-update-controls,
  .ops-support-facts {
    grid-template-columns: 1fr;
  }

  .ops-support-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .ops-support-workspace-tab {
    justify-content: center;
  }

  .ops-support-summary-grid > :first-child {
    grid-column: auto;
  }
}


/* ==========================================================================
   Ops UI Pass 03A — Compact support stats + selected-case focus
   ========================================================================== */
.ops-support-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

.ops-support-stat {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-left: 1px solid var(--ss-border);
}

.ops-support-stat:first-child {
  border-left: 0;
}

.ops-support-stat span {
  color: var(--ss-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.ops-support-stat strong {
  color: var(--ss-text);
  font-size: 1.1rem;
  line-height: 1;
}

#support-case-toolbar {
  scroll-margin-top: 82px;
}

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

  .ops-support-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--ss-border);
  }

  .ops-support-stat:nth-child(4) {
    border-top: 1px solid var(--ss-border);
  }
}


/* ==========================================================================
   Ops UI Pass 04 — Billing workspace
   ========================================================================== */
.ops-billing-stats-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

.ops-billing-stat {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-left: 1px solid var(--ss-border);
}

.ops-billing-stat:first-child {
  border-left: 0;
}

.ops-billing-stat span {
  color: var(--ss-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.ops-billing-stat strong {
  color: var(--ss-text);
  font-size: 1rem;
  line-height: 1;
}

.ops-billing-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  backdrop-filter: blur(8px);
}

.ops-billing-workspace-nav-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-billing-workspace-nav-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-billing-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ops-billing-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-billing-workspace-tab:hover {
  color: var(--ss-text);
  background: var(--ss-hover);
}

.ops-billing-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, .055);
  border-color: rgba(0, 151, 167, .22);
}

.ops-billing-panel {
  scroll-margin-top: 116px;
}

.ops-billing-panel[hidden] {
  display: none !important;
}

/* Summary no longer stretches the detail card across three arbitrary columns. */
.ops-billing-panel[data-ops-billing-panel="summary"] > .ops-panel {
  max-width: none;
}

.ops-billing-panel[data-ops-billing-panel="payments"] > .ops-panel {
  width: 100%;
}

.ops-billing-diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .ops-billing-stats-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-billing-stat:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--ss-border);
  }

  .ops-billing-stat:nth-child(n+4) {
    border-top: 1px solid var(--ss-border);
  }
}

@media (max-width: 900px) {
  .ops-billing-workspace-nav {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .ops-billing-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-billing-workspace-tab {
    justify-content: center;
  }

  .ops-billing-diagnostics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ops-billing-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-billing-stat {
    border-top: 1px solid var(--ss-border);
  }

  .ops-billing-stat:nth-child(-n+2) {
    border-top: 0;
  }

  .ops-billing-stat:nth-child(odd) {
    border-left: 0;
  }
}

/* ========================================================================== 
   Gate 5C — purposeful narrow-screen Ops density
   ========================================================================== */

@media (max-width: 760px) {
  body.ops-body .ops-main {
    padding: 12px;
    scroll-padding-top: 78px;
  }

  body.ops-body .ops-topbar {
    position: sticky;
    top: -12px;
    z-index: 100;
    margin: -12px -12px 18px;
    padding: 12px;
    background: color-mix(in srgb, var(--ss-bg) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ss-border) 78%, transparent);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    backdrop-filter: blur(12px);
  }

  body.ops-body .ops-top-search input {
    min-width: 0;
  }

  .ops-page-header {
    gap: 8px;
    margin-bottom: 14px;
  }

  .ops-page-header h1 {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1.08;
  }

  .ops-page-header p {
    max-width: 44rem;
    line-height: 1.5;
  }

  .ops-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .ops-panel-header {
    gap: 8px;
    margin-bottom: 12px;
  }

  .ops-panel-header h2 {
    font-size: 1rem;
  }

  .ops-form-inline,
  .ops-form-grid {
    gap: 10px !important;
  }

  .ops-dashboard-stats-strip,
  .ops-settings-stats-strip,
  .ops-access-stats-strip,
  .ops-moderation-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ops-dashboard-stats-strip .ops-kpi-card,
  .ops-settings-stats-strip .ops-kpi-card,
  .ops-access-stats-strip .ops-kpi-card,
  .ops-moderation-stats-strip .ops-kpi-card {
    min-width: 0;
    padding: 12px;
    border-left: 0;
    border-top: 1px solid var(--ss-border);
  }

  .ops-dashboard-stats-strip .ops-kpi-card:nth-child(-n + 2),
  .ops-settings-stats-strip .ops-kpi-card:nth-child(-n + 2),
  .ops-access-stats-strip .ops-kpi-card:nth-child(-n + 2),
  .ops-moderation-stats-strip .ops-kpi-card:nth-child(-n + 2) {
    border-top: 0;
  }

  .ops-dashboard-stats-strip .ops-kpi-card:nth-child(even),
  .ops-settings-stats-strip .ops-kpi-card:nth-child(even),
  .ops-access-stats-strip .ops-kpi-card:nth-child(even),
  .ops-moderation-stats-strip .ops-kpi-card:nth-child(even) {
    border-left: 1px solid var(--ss-border);
  }

  .ops-kpi-label,
  .ops-kpi-sub {
    overflow-wrap: anywhere;
  }

  .ops-dashboard-primary-grid .d-flex.align-items-center {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px !important;
  }

  .ops-dashboard-primary-grid .ops-health-ring {
    width: 56px;
    height: 56px;
  }

  .ops-dashboard-primary-grid .ops-metric-stack,
  .ops-health-signals-panel .ops-grid-three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ops-dashboard-primary-grid .ops-metric-stack .metric,
  .ops-health-signals-panel .ops-detail-card {
    min-width: 0;
    padding: 10px;
  }

  .ops-health-overall-panel .ops-grid-three {
    grid-template-columns: 1fr !important;
  }

  .ops-table-wrap {
    overflow: visible;
  }

  .ops-table[data-ops-mobile-cards="true"],
  .ops-table[data-ops-mobile-cards="true"] tbody {
    display: block;
    width: 100%;
  }

  .ops-table[data-ops-mobile-cards="true"] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .ops-table[data-ops-mobile-cards="true"] tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ss-border);
  }

  .ops-table[data-ops-mobile-cards="true"] tbody tr:first-child {
    padding-top: 2px;
  }

  .ops-table[data-ops-mobile-cards="true"] tbody tr:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  .ops-table[data-ops-mobile-cards="true"] td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    overflow-wrap: anywhere;
  }

  .ops-table[data-ops-mobile-cards="true"] td:first-child {
    grid-column: 1 / -1;
  }

  .ops-table[data-ops-mobile-cards="true"] td::before {
    content: attr(data-mobile-label);
    display: block;
    margin-bottom: 3px;
    color: var(--ss-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ops-table[data-ops-mobile-cards="true"] td[colspan] {
    grid-column: 1 / -1;
  }

  .ops-users-workspace-nav,
  .ops-tiers-workspace-nav,
  .ops-api-workspace-nav {
    position: sticky;
    top: 58px;
    z-index: 70;
  }
}

@media (max-width: 420px) {
  body.ops-body .ops-topbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .ops-topbar-actions {
    gap: 5px;
  }

  .ops-topbar-actions .ops-top-icon {
    width: 38px;
    height: 38px;
  }

  .ops-dashboard-primary-grid .d-flex.align-items-center {
    grid-template-columns: 1fr;
  }

  .ops-dashboard-primary-grid .ops-health-ring {
    display: none;
  }
}

/* Gate 5B — narrow Ops navigation behaves as an overlay drawer. */
.ops-mobile-menu-button,
.ops-mobile-sidebar-backdrop {
  display: none;
}

@media (max-width: 960px) {
  html:has(body.ops-body),
  body.shortsauce-app-body.ops-body,
  body.ops-body {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.ops-body .ops-shell {
    display: block;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.ops-body .ops-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1060;
    width: min(84vw, 300px);
    min-width: min(84vw, 300px);
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: none;
  }

  body.ops-body .ops-sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: 12px 0 36px rgba(15, 23, 42, 0.24);
  }

  body.ops-body .ops-main {
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 14px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ops-body .ops-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .ops-mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--ss-text-secondary);
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm);
  }

  .ops-mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  .ops-mobile-sidebar-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ops-body .ops-sidebar,
  .ops-mobile-sidebar-backdrop {
    transition: none;
  }
}


/* ==========================================================================
   Ops UI Pass 05 — Health / Access / Moderation focused workspaces
   ========================================================================== */

/* Compact KPI strips: retain existing card markup but remove excessive height. */
.ops-access-stats-strip,
.ops-moderation-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

.ops-access-stats-strip .ops-kpi-card,
.ops-moderation-stats-strip .ops-kpi-card {
  border: 0;
  border-left: 1px solid var(--ss-border);
  border-radius: 0;
  padding: 12px 14px;
}

.ops-access-stats-strip .ops-kpi-card:first-child,
.ops-moderation-stats-strip .ops-kpi-card:first-child {
  border-left: 0;
}

.ops-access-stats-strip .ops-kpi-label,
.ops-moderation-stats-strip .ops-kpi-label {
  margin-bottom: 3px;
  font-size: 11px;
}

.ops-access-stats-strip .ops-kpi-value,
.ops-moderation-stats-strip .ops-kpi-value {
  font-size: 1.15rem;
}

.ops-access-stats-strip .ops-kpi-sub,
.ops-moderation-stats-strip .ops-kpi-sub {
  display: none;
}

/* Health signal cards are compact; the current status remains readable. */
.ops-health-signals-panel .ops-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.ops-health-signals-panel .ops-detail-card {
  padding: 11px 13px;
}

/* Shared selected-record toolbars. */
.ops-health-workspace-nav,
.ops-access-workspace-nav,
.ops-moderation-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
  backdrop-filter: blur(8px);
  scroll-margin-top: 82px;
}

.ops-health-workspace-nav-copy,
.ops-access-workspace-nav-copy,
.ops-moderation-workspace-nav-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-health-workspace-nav-copy strong,
.ops-access-workspace-nav-copy strong,
.ops-moderation-workspace-nav-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-health-workspace-tabs,
.ops-access-workspace-tabs,
.ops-moderation-workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ops-health-workspace-tab,
.ops-access-workspace-tab,
.ops-moderation-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-health-workspace-tab:hover,
.ops-access-workspace-tab:hover,
.ops-moderation-workspace-tab:hover {
  color: var(--ss-text);
  background: var(--ss-hover);
}

.ops-health-workspace-tab.active,
.ops-access-workspace-tab.active,
.ops-moderation-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0, 151, 167, .055);
  border-color: rgba(0, 151, 167, .22);
}

/* Health: incident detail/timeline no longer compete in three columns. */
.ops-health-incident-workspace {
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
}
.ops-health-incident-workspace [data-ops-health-panel="timeline"] {
  grid-column: 1 / -1;
}
.ops-health-incident-workspace [hidden] {
  display: none !important;
}

/* Access: one selected-staff operation at a time. */
.ops-access-selected-workspace {
  display: block;
}
.ops-access-selected-workspace > [data-ops-access-panel] {
  width: 100%;
}
.ops-access-selected-workspace [hidden],
.ops-access-history[hidden] {
  display: none !important;
}

/* Moderation: keep Create Case available, focus selected case tools one at a time. */
.ops-moderation-workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}
.ops-moderation-workspace [data-ops-moderation-panel="create"] {
  display: block;
}
.ops-moderation-workspace [data-ops-moderation-panel="timeline"] {
  grid-column: 1 / -1;
}
.ops-moderation-workspace [hidden] {
  display: none !important;
}

/* The creation panels remain useful but shouldn't dominate selected-record workflows. */
.ops-health-create-panel {
  align-self: start;
}

@media (max-width: 1100px) {
  .ops-health-signals-panel .ops-grid-three,
  .ops-health-incident-workspace,
  .ops-moderation-workspace {
    grid-template-columns: 1fr;
  }

  .ops-health-incident-workspace [data-ops-health-panel="timeline"],
  .ops-moderation-workspace [data-ops-moderation-panel="timeline"] {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .ops-health-workspace-nav,
  .ops-access-workspace-nav,
  .ops-moderation-workspace-nav {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .ops-health-workspace-tabs,
  .ops-access-workspace-tabs,
  .ops-moderation-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-health-workspace-tab,
  .ops-access-workspace-tab,
  .ops-moderation-workspace-tab {
    justify-content: center;
  }
}


/* ==========================================================================
   Ops UI Pass 05A — Space refinement
   Health / Access Control / Moderation
   ========================================================================== */

/* -------------------- Platform Health -------------------- */

/* Component status belongs in a compact monitoring grid, not one full-width
   card per signal. Override the generic <=1320 one-column behavior here. */
.ops-health-overall-panel .ops-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px;
  margin-bottom: 0;
}

.ops-health-overall-panel .ops-detail-card {
  padding: 12px 14px;
  min-height: 0;
}

.ops-health-overall-panel .ops-detail-card .small.mt-2 {
  margin-top: 5px !important;
  line-height: 1.35;
}

.ops-health-overall-panel .ops-panel-header {
  margin-bottom: 10px;
}

/* Operational pressure is numeric summary information. Fit more of it into
   each row while keeping the labels readable. */
.ops-health-signals-panel .ops-grid-three {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px;
}

.ops-health-signals-panel .ops-detail-card {
  padding: 10px 12px;
}

.ops-health-signals-panel .fs-4 {
  font-size: 1.25rem !important;
  margin-top: 2px;
}

/* Incident Summary & Update are one workflow. Use the width instead of
   stacking the detail card and edit form vertically. */
.ops-health-detail-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: 14px;
  align-items: start;
}

.ops-health-detail-panel > .ops-panel-header {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.ops-health-detail-panel > .ops-detail-card,
.ops-health-detail-panel > form.ops-detail-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100%;
}

.ops-health-detail-panel .ops-note-list {
  gap: 7px;
}

.ops-health-detail-panel label.ops-note {
  padding: 8px 10px;
}

/* -------------------- Access Control -------------------- */

/* Protected Authority is small; staff creation benefits from more width.
   Keep them side-by-side at normal desktop sizes. */
.ops-access-onboarding-grid {
  grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr) !important;
  align-items: start;
}

.ops-access-onboarding-grid > .ops-panel {
  margin-bottom: 0;
}

.ops-access-onboarding-grid > .ops-panel:first-child .ops-note {
  padding: 12px;
}

.ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-panel-header {
  margin-bottom: 10px;
}

/* Staff creation inputs are short, so use four columns where appropriate. */
.ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid > div:nth-child(1),
.ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid > div:nth-child(2) {
  grid-column: span 2;
}

/* Capability group cards are information-dense but benefit from a tighter
   internal rhythm. */
.ops-access-onboarding-grid .ops-capability-option {
  padding: 8px 10px;
}

.ops-access-directory {
  margin-top: 0;
}

/* -------------------- Moderation -------------------- */

.ops-moderation-boundary-note {
  padding: 10px 12px;
}

.ops-moderation-boundary-note .ops-note {
  padding: 9px 11px;
}

.ops-moderation-boundary-note .small.mt-1 {
  margin-top: 3px !important;
}

/* Case facts and review controls are part of the same selected case. Put them
   beside one another instead of creating another long vertical page. */
.ops-moderation-workspace [data-ops-moderation-panel="case"] {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: start;
}

.ops-moderation-workspace [data-ops-moderation-panel="case"] > .ops-panel-header {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.ops-moderation-workspace [data-ops-moderation-panel="case"] > .ops-detail-card,
.ops-moderation-workspace [data-ops-moderation-panel="case"] > form.ops-detail-card {
  margin-top: 0 !important;
  height: 100%;
}

.ops-moderation-workspace [data-ops-moderation-panel="case"] .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ops-moderation-workspace [data-ops-moderation-panel="case"] .ops-mini-stat-value {
  font-size: .95rem;
}

/* Responsive fallbacks */
@media (max-width: 1180px) {
  .ops-health-overall-panel .ops-grid-three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ops-health-signals-panel .ops-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .ops-health-detail-panel,
  .ops-moderation-workspace [data-ops-moderation-panel="case"] {
    grid-template-columns: 1fr;
  }

  .ops-health-detail-panel > .ops-panel-header,
  .ops-moderation-workspace [data-ops-moderation-panel="case"] > .ops-panel-header {
    grid-column: auto;
  }

  .ops-access-onboarding-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .ops-health-overall-panel .ops-grid-three,
  .ops-health-signals-panel .ops-grid-three {
    grid-template-columns: 1fr !important;
  }

  .ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid,
  .ops-moderation-workspace [data-ops-moderation-panel="case"] .ops-mini-stats {
    grid-template-columns: 1fr;
  }

  .ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid > div:nth-child(1),
  .ops-access-onboarding-grid > .ops-panel:nth-child(2) .ops-form-grid > div:nth-child(2) {
    grid-column: auto;
  }
}


/* ==========================================================================
   Ops UI Pass 05B — Workflow + density refinement
   ========================================================================== */

/* -------------------- Moderation -------------------- */

/* Create Case is now an on-demand full-width workspace, not a permanent
   neighbor of the selected case. */
.ops-moderation-create-shell {
  margin: 16px 0;
  scroll-margin-top: 96px;
}

.ops-moderation-create-shell[hidden] {
  display: none !important;
}

.ops-moderation-create-shell > .ops-panel {
  width: 100%;
  max-width: none;
}

.ops-moderation-create-shell .ops-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.ops-moderation-create-shell .ops-form-grid > div[style*="grid-column:1 / -1"] {
  grid-column: 1 / -1 !important;
}

/* A selected moderation case owns the full working width. */
.ops-moderation-workspace {
  display: block !important;
}

.ops-moderation-workspace > [data-ops-moderation-panel] {
  width: 100%;
}

.ops-moderation-workspace [data-ops-moderation-panel="case"] {
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
}

.ops-moderation-workspace [data-ops-moderation-panel="enforcement"],
.ops-moderation-workspace [data-ops-moderation-panel="timeline"] {
  width: 100%;
}

/* -------------------- Access Control -------------------- */

/* Protected Authority returns to its own compact position above staff creation.
   It remains restricted to Protected Owner / Ops Administrators in markup. */
.ops-access-onboarding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ops-access-protected-authority .ops-panel {
  margin: 0;
}

.ops-access-protected-authority .ops-note-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

.ops-access-protected-authority .ops-note {
  margin: 0;
  padding: 10px 12px;
}

/* Give Create Staff the full width and use it. */
.ops-access-create-staff .ops-panel {
  margin: 0;
}

.ops-access-create-staff .ops-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 12px;
}

.ops-access-create-staff .ops-form-grid > div:nth-child(1),
.ops-access-create-staff .ops-form-grid > div:nth-child(2),
.ops-access-create-staff .ops-form-grid > div:nth-child(3),
.ops-access-create-staff .ops-form-grid > div:nth-child(4) {
  grid-column: span 1 !important;
}

.ops-access-create-staff .ops-form-grid > div[style*="grid-column:1 / -1"] {
  grid-column: 1 / -1 !important;
}

/* Capability groups should use width instead of a long single column. */
.ops-access-create-staff .ops-detail-card {
  padding: 10px 12px;
}

/* Compress common access-control informational cards. */
.ops-access-directory .ops-panel-header,
.ops-access-selected-workspace .ops-panel-header {
  margin-bottom: 10px;
}

.ops-access-selected-workspace .ops-detail-card,
.ops-access-history .ops-detail-card,
.ops-access-history .ops-note {
  padding: 10px 12px;
}

.ops-access-selected-workspace .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ops-access-selected-workspace .ops-mini-stat-value {
  font-size: .95rem;
}

/* -------------------- Health / Incidents -------------------- */

/* The selected incident summary and update use the full width as a practical
   two-column workbench instead of two narrow vertical columns. */
.ops-health-incident-workspace {
  display: block !important;
}

.ops-health-detail-panel {
  width: 100%;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 16px;
}

.ops-health-incident-summary-card {
  min-width: 0;
}

.ops-health-incident-summary-card .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ops-health-incident-summary-card .ops-mini-stat-value {
  font-size: .95rem;
}

.ops-health-incident-update-form {
  min-width: 0;
}

/* Put Status + Severity beside each other, then use compact controls below. */
.ops-health-incident-update-form > .mb-2:nth-of-type(1),
.ops-health-incident-update-form > .mb-2:nth-of-type(2) {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 5px);
}

.ops-health-incident-update-form > .mb-2:nth-of-type(1) {
  margin-right: 6px;
}

.ops-health-incident-update-form textarea {
  min-height: 82px;
}

.ops-health-incident-update-form .ops-note-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ops-health-incident-update-form label.ops-note {
  margin: 0;
}

@media (max-width: 1180px) {
  .ops-moderation-workspace [data-ops-moderation-panel="case"],
  .ops-health-detail-panel {
    grid-template-columns: 1fr;
  }

  .ops-access-create-staff .ops-form-grid,
  .ops-moderation-create-shell .ops-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .ops-access-create-staff .ops-form-grid,
  .ops-moderation-create-shell .ops-form-grid,
  .ops-access-selected-workspace .ops-mini-stats,
  .ops-health-incident-summary-card .ops-mini-stats,
  .ops-health-incident-update-form .ops-note-list {
    grid-template-columns: 1fr !important;
  }

  .ops-health-incident-update-form > .mb-2:nth-of-type(1),
  .ops-health-incident-update-form > .mb-2:nth-of-type(2) {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}


/* ==========================================================================
   Ops UI Pass 05C — Access Control cascade/layout correction
   ========================================================================== */

/* Pass 05A contained an earlier two-column rule with !important. Explicitly
   override it so Protected Authority actually sits above Create Staff. */
.ops-access-onboarding-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

.ops-access-protected-authority,
.ops-access-create-staff {
  width: 100%;
  min-width: 0;
}

/* Protected Authority is intentionally compact, not half of a split screen. */
.ops-access-protected-authority .ops-panel {
  padding-bottom: 12px;
}

.ops-access-protected-authority .ops-note-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 420px));
}

/* Create Staff uses the full page width. */
.ops-access-create-staff .ops-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start;
}

.ops-access-capabilities-field,
.ops-access-reason-field {
  grid-column: 1 / -1 !important;
}

.ops-access-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ops-access-capability-grid .ops-detail-card {
  margin: 0 !important;
  min-width: 0;
}

.ops-access-capability-grid label {
  margin-bottom: 8px !important;
}

/* Keep the creation action compact and aligned with the reason field. */
.ops-access-reason-field textarea {
  min-height: 76px;
}

/* Subsequent Access Control areas should use content density rather than tall
   empty cards. */
.ops-access-directory .ops-table-wrap {
  margin-top: 4px;
}

.ops-access-selected-workspace > [data-ops-access-panel] {
  min-height: 0;
}

.ops-access-selected-workspace .ops-note-list,
.ops-access-history .ops-note-list {
  gap: 8px;
}

@media (max-width: 1180px) {
  .ops-access-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ops-access-create-staff .ops-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .ops-access-create-staff .ops-form-grid,
  .ops-access-capability-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   Ops UI Pass 05D — Access Control capability spacing
   ========================================================================== */

/* The capability cards were technically fitting in three columns, but the
   descriptions and approval badges were too compressed. Use two wider columns
   so the permissions are easier to scan and understand. */
.ops-access-capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
}

.ops-access-capability-grid .ops-detail-card {
  padding: 12px 14px !important;
}

.ops-access-capability-grid .ops-capability-option {
  padding: 9px 0;
}

.ops-access-capability-grid .ops-capability-option + .ops-capability-option {
  border-top: 1px solid var(--ss-border);
}

.ops-access-capability-grid .ops-capability-option label,
.ops-access-capability-grid .ops-capability-option .small {
  line-height: 1.45;
}

/* Give the identity fields a little more room as well. */
.ops-access-create-staff .ops-form-grid {
  column-gap: 14px !important;
}

@media (max-width: 900px) {
  .ops-access-capability-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   Ops UI Pass 06 — Lighter page polish
   Users / Plans & Limits / API / Logs / Settings / Dashboard
   ========================================================================== */

/* Shared compact selected-record toolbars. */
.ops-users-workspace-nav,
.ops-tiers-workspace-nav,
.ops-api-workspace-nav {
  position: sticky;
  top: 58px;
  z-index: 72;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ss-surface) 96%, transparent);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-md);
}

.ops-users-workspace-nav-copy,
.ops-tiers-workspace-nav-copy,
.ops-api-workspace-nav-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.ops-users-workspace-tabs,
.ops-tiers-workspace-tabs,
.ops-api-workspace-tabs {
  display: flex;
  gap: 4px;
}

.ops-users-workspace-tab,
.ops-tiers-workspace-tab,
.ops-api-workspace-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: var(--ss-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ops-users-workspace-tab.active,
.ops-tiers-workspace-tab.active,
.ops-api-workspace-tab.active {
  color: var(--ss-teal-deep);
  background: rgba(0,151,167,.055);
  border-color: rgba(0,151,167,.22);
}

.ops-users-workspace,
.ops-tiers-workspace,
.ops-api-workspace {
  display: block !important;
}

.ops-users-workspace > [data-ops-users-panel],
.ops-tiers-workspace > [data-ops-tiers-panel],
.ops-api-workspace > [data-ops-api-panel] {
  width: 100%;
}

.ops-users-workspace [hidden],
.ops-tiers-workspace [hidden],
.ops-api-workspace [hidden] {
  display: none !important;
}

/* Users: compact profile facts and signals. */
.ops-users-workspace .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.ops-users-workspace .ops-note-list {
  gap: 8px;
}

/* Plans: summary should read quickly; change forms can use wider rows. */
.ops-tiers-workspace [data-ops-tiers-panel="summary"] .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.ops-tiers-workspace [data-ops-tiers-panel="changes"] {
  display: grid;
  grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr);
  gap: 14px;
}
.ops-tiers-workspace [data-ops-tiers-panel="changes"] > .ops-panel-header {
  grid-column: 1 / -1;
}

/* API: each selected workspace tool gets the full width. */
.ops-api-workspace [data-ops-api-panel="summary"] .ops-mini-stats {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

/* Logs: entry detail should not consume half the screen until selected. */
.ops-logs-workspace {
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
  align-items: start;
}
.ops-log-detail-panel .ops-mini-stats {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Settings KPI cards are reference numbers; use one compact strip. */
.ops-settings-stats-strip,
.ops-dashboard-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px,1fr));
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

.ops-settings-stats-strip .ops-kpi-card,
.ops-dashboard-stats-strip .ops-kpi-card {
  border: 0;
  border-left: 1px solid var(--ss-border);
  border-radius: 0;
  padding: 12px 14px;
}
.ops-settings-stats-strip .ops-kpi-card:first-child,
.ops-dashboard-stats-strip .ops-kpi-card:first-child {
  border-left: 0;
}
.ops-settings-stats-strip .ops-kpi-value,
.ops-dashboard-stats-strip .ops-kpi-value {
  font-size: 1.2rem;
}
.ops-settings-stats-strip .ops-kpi-sub,
.ops-dashboard-stats-strip .ops-kpi-sub {
  margin-top: 2px;
  font-size: 10px;
}

/* Settings is mostly reference material; tighten cards and lists. */
.ops-settings-primary-grid,
.ops-settings-secondary-grid {
  gap: 12px;
}
.ops-settings-primary-grid .ops-note,
.ops-settings-secondary-grid .ops-note,
.ops-settings-primary-grid .ops-detail-card,
.ops-settings-secondary-grid .ops-detail-card {
  padding: 10px 12px;
}

/* Overview already works; just reduce the vertical footprint. */
.ops-dashboard-primary-grid {
  gap: 12px;
}
.ops-dashboard-primary-grid .ops-panel {
  padding: 14px;
}
.ops-dashboard-primary-grid .ops-list-row {
  padding: 9px 0;
}

@media (max-width: 1100px) {
  .ops-tiers-workspace [data-ops-tiers-panel="changes"],
  .ops-logs-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ops-users-workspace-nav,
  .ops-tiers-workspace-nav,
  .ops-api-workspace-nav {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .ops-users-workspace-tabs,
  .ops-tiers-workspace-tabs,
  .ops-api-workspace-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .ops-users-workspace-tab,
  .ops-tiers-workspace-tab,
  .ops-api-workspace-tab {
    justify-content: center;
  }
}


/* ==========================================================================
   Ops UI Pass 06A — Dashboard donut sizing
   ========================================================================== */

/* The donut is categorical context, not a primary dashboard visualization.
   Keep its responsive canvas inside a deliberately narrow centered frame so
   Chart.js cannot scale it to the full panel width. */
.ops-error-types-panel {
  min-height: 0;
}

.ops-chart-shell--donut {
  position: relative;
  width: min(100%, 420px);
  min-height: 220px;
  margin: 0 auto;
}

.ops-chart-shell--donut canvas {
  display: block;
  width: 100% !important;
  max-width: 420px !important;
  max-height: 250px !important;
  margin: 0 auto;
}

/* The 7-day activity chart should stay compact as well. */
.ops-chart-shell--compact {
  max-height: 240px;
}

.ops-chart-shell--compact canvas {
  max-height: 220px !important;
}

@media (max-width: 640px) {
  .ops-chart-shell--donut {
    width: min(100%, 320px);
    min-height: 190px;
  }

  .ops-chart-shell--donut canvas {
    max-width: 320px !important;
    max-height: 210px !important;
  }
}

/* Gate 5C final cascade: these rules intentionally follow every legacy Ops
   responsive pass so older page-specific fallbacks cannot undo mobile UX. */
@media (max-width: 760px) {
  body.ops-body .ops-main {
    padding: 14px;
    scroll-padding-top: 82px;
  }

  body.ops-body .ops-topbar {
    top: -14px;
    margin: -14px -14px 18px;
    padding: 14px;
  }

  .ops-health-signals-panel .ops-grid-three,
  .ops-dashboard-primary-grid .ops-metric-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ops-users-workspace-nav,
  .ops-tiers-workspace-nav,
  .ops-api-workspace-nav {
    position: sticky;
    top: 58px;
    z-index: 70;
  }
}