@charset "UTF-8";
.no-dashboard-wrapper {
  padding: 24px;
  background: #f8fafc;
}

.no-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.no-dashboard-section {
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 16px 18px 20px;
}

.no-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.no-section-title {
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.no-section-divider {
  flex: 1;
  height: 1px;
  background: #dbe3ee;
}

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

@media (max-width: 1400px) {
  .no-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .no-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.no-kpi-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-height: 250px;
  padding: 1.25rem;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.no-kpi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
}
.no-kpi-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.no-kpi-card__title {
  margin: 0;
  color: #475467;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.no-kpi-card__description {
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}
.no-kpi-card__icon {
  display: inline-flex;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  text-transform: uppercase;
  color: #5b9cff;
  border-radius: 999px;
  background: rgba(91, 156, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 700;
}
.no-kpi-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.no-kpi-card__icon--blue {
  color: #5b9cff;
  background: rgba(91, 156, 255, 0.12);
}
.no-kpi-card__icon--orange {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
.no-kpi-card__icon--green {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}
.no-kpi-card__icon--red {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
.no-kpi-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-bottom: 12px;
  gap: 0.875rem;
}
.no-kpi-card__metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.no-kpi-card__value-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.no-kpi-card__value {
  color: #1f2937;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.no-kpi-card__value--secondary {
  color: #475467;
  font-size: 1.5rem;
  font-weight: 700;
}
.no-kpi-card__unit {
  color: #1f2937;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.no-kpi-card__label {
  color: #667085;
  font-size: 0.95rem;
  font-weight: 600;
}
.no-kpi-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.no-kpi-card__meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}
.no-kpi-card__meta-label {
  color: #667085;
}
.no-kpi-card__meta-value {
  color: #1f2937;
  font-weight: 700;
}
.no-kpi-card__chart {
  position: relative;
  height: 52px;
  margin-top: auto;
}
.no-kpi-card__sparkline {
  display: block;
  width: 100%;
  height: 34px;
}
.no-kpi-card__chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  color: #667085;
  font-size: 12px;
}
.no-kpi-card__sample {
  margin-top: 8px;
  color: #667085;
  font-size: 12px;
  line-height: 1.3;
}
.no-kpi-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  gap: 0;
}
.no-kpi-card__content .no-kpi-card__body {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.no-kpi-card__breakdown {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid #dbe3ee;
  gap: 8px;
}
.no-kpi-card__breakdown-chart {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}
.no-kpi-card__breakdown-legend {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.3rem;
}
.no-kpi-card__breakdown-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.no-kpi-card__breakdown-legend-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.no-kpi-card__breakdown-legend-label {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #667085;
}
.no-kpi-card__breakdown-legend-value {
  flex: 0 0 auto;
  color: #1f2937;
  font-weight: 700;
}
.no-kpi-card__breakdown-context {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  font-style: italic;
}
.no-kpi-card--blue .no-kpi-card__icon {
  color: #5b9cff;
  background: rgba(91, 156, 255, 0.12);
}
.no-kpi-card--orange .no-kpi-card__icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
.no-kpi-card--red .no-kpi-card__icon {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
.no-kpi-card--green .no-kpi-card__icon {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

@media (max-width: 767px) {
  .no-kpi-card {
    min-height: auto;
  }
}
.no-chart-surface {
  position: relative;
  width: 100%;
}

.no-request-timeline {
  position: relative;
  width: 100%;
  min-height: 320px;
}

.no-request-timeline__chart {
  display: block;
  width: 100%;
  min-height: 320px;
}

.no-chart-surface canvas,
.no-kpi-card__sparkline canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.no-chart-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 16px;
  text-align: center;
  color: #667085;
  border: 1px dashed #dbe3ee;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
}

@media (max-width: 768px) {
  .no-request-timeline,
  .no-request-timeline__chart {
    min-height: 260px;
  }
}
.no-activity-overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 24px;
}

.no-activity-overview__panel,
.no-activity-overview__summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.no-activity-overview__panel-view,
.no-activity-overview__summary-view {
  display: none;
}

.no-activity-overview__panel-view:not([hidden]),
.no-activity-overview__summary-view:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.no-activity-overview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.no-activity-overview__header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.no-activity-overview__title {
  color: #101828;
  font-size: 18px;
  font-weight: 600;
}

.no-activity-overview__description {
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.no-activity-overview__toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: #475467;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background-color: #f3f6fb;
  font-size: 12px;
  gap: 4px;
}

.no-activity-overview__toggle:hover {
  border-color: #c7d3e3;
  background-color: #f8fafc;
}

.no-activity-overview__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.no-activity-overview__summary-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background-color: #fff;
  gap: 4px;
}

.no-activity-overview__summary-label {
  color: #667085;
  font-size: 12px;
}

.no-activity-overview__summary-value {
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.no-activity-overview__summary-help,
.no-activity-overview__empty-copy,
.no-activity-overview__summary-copy {
  color: #475467;
  font-size: 12px;
}

.no-activity-overview__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  border: 1px dashed #dbe3ee;
  border-radius: 14px;
  background-color: #f8fafc;
}

.no-activity-overview__empty-title {
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1100px) {
  .no-activity-overview {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .no-activity-overview__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .no-activity-overview__toggle {
    align-self: flex-start;
  }
}
@media (max-width: 640px) {
  .no-activity-overview__summary-grid {
    grid-template-columns: 1fr;
  }
}
.no-technical-explorer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.no-technical-explorer__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.no-technical-explorer__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  color: #475467;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.no-technical-explorer__tab[aria-pressed=true] {
  color: #2f6fe4;
  border-color: rgba(47, 111, 228, 0.28);
  background: rgba(91, 156, 255, 0.1);
}

.no-technical-explorer__description {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.no-technical-explorer__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.no-technical-explorer__search,
.no-technical-explorer__page-size {
  min-height: 40px;
  padding: 0.65rem 0.85rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}
.no-technical-explorer__search:focus,
.no-technical-explorer__page-size:focus {
  border-color: rgba(47, 111, 228, 0.5);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(91, 156, 255, 0.1);
}
.no-technical-explorer__search,
.no-technical-explorer__page-size {
  width: 100%;
}

.no-technical-explorer__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.no-technical-explorer__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-technical-explorer__action:hover {
  background: rgba(91, 156, 255, 0.05);
}
.no-technical-explorer__action:disabled, .no-technical-explorer__action[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
}
.no-technical-explorer__action {
  white-space: nowrap;
}

.no-technical-explorer__flush-help {
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}

.no-technical-explorer__table-wrap {
  overflow-x: auto;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background: #fff;
}

.no-technical-explorer__table {
  width: 100%;
  border-collapse: collapse;
}
.no-technical-explorer__table th,
.no-technical-explorer__table td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e9eef5;
  font-size: 13px;
}
.no-technical-explorer__table th {
  white-space: nowrap;
  color: #475467;
  background: #fff;
  font-weight: 700;
}
.no-technical-explorer__table td {
  color: #1f2937;
}
.no-technical-explorer__table tbody tr:hover {
  background: rgba(91, 156, 255, 0.04);
}

.no-technical-explorer__sort-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  cursor: pointer;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  gap: 0.35rem;
}
.no-technical-explorer__sort-button--asc::after {
  content: "↑";
  font-size: 11px;
}
.no-technical-explorer__sort-button--desc::after {
  content: "↓";
  font-size: 11px;
}

.no-technical-explorer__empty {
  padding: 16px;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.no-technical-explorer__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.no-technical-explorer__pagination-summary {
  color: #667085;
  font-size: 13px;
}

.no-technical-explorer__pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.no-technical-explorer__pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-technical-explorer__pagination-button:hover {
  background: rgba(91, 156, 255, 0.05);
}
.no-technical-explorer__pagination-button:disabled, .no-technical-explorer__pagination-button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
}

.no-technical-explorer__row {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.no-technical-explorer__row--success {
  background: rgba(34, 197, 94, 0.08);
}
.no-technical-explorer__row--success:hover {
  background: rgba(34, 197, 94, 0.12);
}

.no-technical-explorer__row--warning {
  background: rgba(245, 158, 11, 0.1);
}
.no-technical-explorer__row--warning:hover {
  background: rgba(245, 158, 11, 0.14);
}

.no-technical-explorer__row--danger {
  background: rgba(239, 68, 68, 0.1);
}
.no-technical-explorer__row--danger:hover {
  background: rgba(239, 68, 68, 0.14);
}

.no-technical-explorer__row-link {
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: #2f6fe4;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 960px) {
  .no-technical-explorer__toolbar {
    grid-template-columns: 1fr;
  }
  .no-technical-explorer__actions {
    width: 100%;
  }
}
/**
 * -----------------------------------------------------------------------------
 * Cache Observability Component
 * -----------------------------------------------------------------------------
 * Compact, analysis-focused layout for the cache dashboard tab.
 * -----------------------------------------------------------------------------
 */
.no-section-description {
  margin-bottom: 8px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.no-cache-runtime-health {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.no-cache-runtime-health__section-title {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}
.no-cache-runtime-health__disabled-help {
  margin-top: 8px;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}
.no-cache-runtime-health__main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.no-cache-runtime-health__main-column, .no-cache-runtime-health__side-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.no-cache-environment-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.14);
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.14);
}
.no-cache-environment-notice__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #1f2937;
  border-radius: 50%;
  background: #fff;
  font-weight: 700;
}
.no-cache-environment-notice__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-cache-environment-notice__title {
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}
.no-cache-environment-notice__message {
  color: #475467;
  font-size: 13px;
  line-height: 1.6;
}

.no-cache-health {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.no-cache-health__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.no-cache-health__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 128px;
  padding: 14px 16px;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  gap: 10px;
}
.no-cache-health__card--ok {
  border-left: 4px solid #22c55e;
}
.no-cache-health__card--warning {
  border-left: 4px solid #f59e0b;
}
.no-cache-health__card--modules, .no-cache-health__card--signals {
  border-left: 4px solid #5b9cff;
}
.no-cache-health__label {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}
.no-cache-health__value {
  color: #101828;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.no-cache-health__hint {
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}
.no-cache-health__modules, .no-cache-health__signals {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
}
.no-cache-health__module, .no-cache-health__signal {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.no-cache-health__module-status, .no-cache-health__signal-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.no-cache-health__module-status--enabled, .no-cache-health__signal-icon--enabled {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.14);
}
.no-cache-health__module-status--disabled, .no-cache-health__signal-icon--disabled {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
}
.no-cache-health__module-name, .no-cache-health__signal-label {
  min-width: 0;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.no-cache-health__module-value {
  margin-left: auto;
  padding-left: 6px;
  white-space: nowrap;
  color: #475467;
  font-size: 13px;
}

.no-cache-activity-trend,
.no-cache-score,
.no-cache-behavior,
.no-cache-insights,
.no-cache-records {
  padding: 16px;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.no-cache-activity-trend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.no-cache-activity-trend__header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.no-cache-activity-trend__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.no-cache-activity-trend__description {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-activity-trend__chart-surface {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe3ee;
  border-radius: calc(14px - 4px);
  background: #fff;
}
.no-cache-activity-trend__chart {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 250px;
}
.no-cache-activity-trend__summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.no-cache-activity-trend__summary-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #dbe3ee;
  border-radius: calc(14px - 4px);
  background: #fff;
  gap: 6px;
}
.no-cache-activity-trend__summary-label {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}
.no-cache-activity-trend__summary-value {
  color: #101828;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
}
.no-cache-activity-trend__summary-meta {
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}

.no-cache-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.no-cache-score__gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.no-cache-score__gauge-ring {
  --no-cache-score-percent: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#f59e0b calc(var(--no-cache-score-percent) * 1%), #e9eef5 0);
}
.no-cache-score__gauge-ring::before {
  position: absolute;
  width: 108px;
  height: 108px;
  margin: auto;
  content: "";
  border-radius: 50%;
  background: #fff;
  inset: 0;
}
.no-cache-score__gauge-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.no-cache-score__value {
  color: #101828;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.no-cache-score__unit {
  margin-top: 4px;
  color: #475467;
  font-size: 13px;
}
.no-cache-score__breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.no-cache-score__breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-cache-score__breakdown-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.no-cache-score__breakdown-label {
  color: #1f2937;
  font-weight: 600;
}
.no-cache-score__breakdown-value {
  white-space: nowrap;
  color: #475467;
}
.no-cache-score__progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e9eef5;
}
.no-cache-score__progress-bar {
  --no-cache-progress: 0;
  display: block;
  width: calc(var(--no-cache-progress) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9fcf7a 0%, #f59e0b 70%, #ef8a62 100%);
}

.no-cache-behavior {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.no-cache-behavior__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.no-cache-behavior__description {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-behavior__status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: calc(14px - 4px);
  background: rgba(34, 197, 94, 0.14);
}
.no-cache-behavior__status--warning {
  border-color: rgba(245, 158, 11, 0.14);
  background: rgba(245, 158, 11, 0.14);
}
.no-cache-behavior__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #1f2937;
  border-radius: 50%;
  background: #fff;
  font-weight: 700;
}
.no-cache-behavior__status-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.no-cache-behavior__status-copy strong {
  color: #1f2937;
}
.no-cache-behavior__status-copy span {
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}
.no-cache-behavior__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
}
.no-cache-behavior__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #dbe3ee;
  border-radius: calc(14px - 4px);
  background: #fff;
  gap: 10px;
}
.no-cache-behavior__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.no-cache-behavior__card-title {
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}
.no-cache-behavior__card-state {
  padding: 4px 10px;
  white-space: nowrap;
  color: #475467;
  border-radius: 999px;
  background: #f3f6fb;
  font-size: 13px;
}
.no-cache-behavior__metric-value {
  color: #101828;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.no-cache-behavior__metric-label {
  margin-top: 2px;
  color: #475467;
  font-size: 13px;
}
.no-cache-behavior__visual {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-width: 0;
  margin-top: 8px;
}
.no-cache-behavior__visual-chart {
  display: flex;
  overflow: visible;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px;
}
.no-cache-behavior__tooltip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 12px);
  left: 50%;
  visibility: hidden;
  width: min(240px, 90vw);
  padding: 10px 12px;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  transform: translate(-50%, 0);
  pointer-events: none;
  opacity: 0;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.24);
}
.no-cache-behavior__tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.no-cache-behavior__ring {
  --no-cache-hit: 0;
  --no-cache-miss: 0;
  --no-cache-uncacheable: 0;
  position: relative;
  display: flex;
  overflow: visible;
  flex: 0 0 160px;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  cursor: help;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0 calc(var(--no-cache-hit) * 1%), #5b9cff calc(var(--no-cache-hit) * 1%) calc((var(--no-cache-hit) + var(--no-cache-miss)) * 1%), #f59e0b calc((var(--no-cache-hit) + var(--no-cache-miss)) * 1%) calc((var(--no-cache-hit) + var(--no-cache-miss) + var(--no-cache-uncacheable)) * 1%), #e9eef5 calc((var(--no-cache-hit) + var(--no-cache-miss) + var(--no-cache-uncacheable)) * 1%) 100%);
}
.no-cache-behavior__ring::before {
  position: absolute;
  width: 112px;
  height: 112px;
  margin: auto;
  content: "";
  border-radius: 50%;
  background: #fff;
  inset: 0;
}
.no-cache-behavior__ring span {
  position: relative;
  z-index: 1;
  color: #101828;
  font-size: 2rem;
  font-weight: 800;
}
.no-cache-behavior__ring.is-empty {
  background: #e9eef5;
}
.no-cache-behavior__ring:focus .no-cache-behavior__tooltip, .no-cache-behavior__ring:focus-within .no-cache-behavior__tooltip, .no-cache-behavior__ring:hover .no-cache-behavior__tooltip {
  visibility: visible;
  transform: translate(-50%, -8px);
  opacity: 1;
}
.no-cache-behavior__tooltip-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  gap: 8px;
}
.no-cache-behavior__tooltip-title {
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
}
.no-cache-behavior__tooltip-text {
  color: #475467;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-behavior__tooltip-list {
  margin: 0;
  padding-left: 18px;
}
.no-cache-behavior__tooltip-list li {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-behavior__legend {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  gap: 12px;
}
.no-cache-behavior__legend-item {
  display: flex;
  align-items: center;
  color: #475467;
  font-size: 13px;
  gap: 8px;
}
.no-cache-behavior__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.no-cache-behavior__legend-dot--good {
  background: #22c55e;
}
.no-cache-behavior__legend-dot--mid {
  background: #5b9cff;
}
.no-cache-behavior__legend-dot--warn {
  background: #f59e0b;
}
.no-cache-behavior__details {
  padding-top: 8px;
  border-top: 1px solid #dbe3ee;
}
.no-cache-behavior__details summary {
  cursor: pointer;
  color: #1f2937;
  font-weight: 600;
}
.no-cache-behavior__details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.no-cache-behavior__details-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
}
.no-cache-behavior__details-item span {
  color: #475467;
  font-size: 13px;
}
.no-cache-behavior__details-item strong {
  color: #101828;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.no-cache-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.no-cache-insights__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-cache-insights__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #e9eef5;
}
.no-cache-insights__bullet {
  color: #f59e0b;
  font-size: 0.85rem;
  line-height: 1.5;
}
.no-cache-insights__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.no-cache-insights__title {
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.no-cache-insights__text {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-insights__empty {
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}

.no-cache-records__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 16px;
}
.no-cache-records__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.no-cache-records__description {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}
.no-cache-records__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.no-cache-records__export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-cache-records__export:hover, .no-cache-records__export:focus {
  text-decoration: none;
  background: #f3f6fb;
}
.no-cache-records__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.no-cache-records__search {
  width: 100%;
  max-width: 360px;
}
.no-cache-records__search-input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}
.no-cache-records__search-input::placeholder {
  color: #667085;
}
.no-cache-records__table-wrap {
  overflow-x: auto;
}
.no-cache-records__table {
  width: 100%;
  border-collapse: collapse;
}
.no-cache-records__table th,
.no-cache-records__table td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  color: #1f2937;
  border-bottom: 1px solid #e9eef5;
  font-size: 13px;
}
.no-cache-records__table th {
  color: #475467;
  background: #f3f6fb;
  font-weight: 700;
}
.no-cache-records__details-button {
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-cache-records__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.no-cache-records__results, .no-cache-records__page-status {
  color: #475467;
  font-size: 13px;
}
.no-cache-records__pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}
.no-cache-records__page-button {
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-cache-records__page-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.no-cache-records__modal {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
  inset: 0;
}
.no-cache-records__modal[hidden] {
  display: none !important;
}
.no-cache-records__modal-dialog {
  overflow: auto;
  width: min(960px, 100%);
  max-height: 90vh;
  border: 1px solid #dbe3ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
}
.no-cache-records__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #dbe3ee;
}
.no-cache-records__modal-title {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}
.no-cache-records__modal-close {
  cursor: pointer;
  color: #1f2937;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
}
.no-cache-records__modal-body {
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 16px;
}
.no-cache-records__modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.no-cache-records__modal-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #f3f6fb;
}
.no-cache-records__modal-grid > div strong {
  color: #475467;
  font-size: 13px;
}
.no-cache-records__modal-grid > div span {
  color: #1f2937;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.no-cache-records__payload {
  margin: 0;
  padding: 14px;
  white-space: pre-wrap;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #f3f6fb;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.no-cache-records-modal-open {
  overflow: hidden;
}

@media (max-width: 1400px) {
  .no-cache-runtime-health__main-grid {
    grid-template-columns: 1fr;
  }
  .no-cache-health__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .no-cache-health__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .no-cache-activity-trend__summary-grid {
    grid-template-columns: 1fr;
  }
  .no-cache-behavior__grid, .no-cache-behavior__details-grid {
    grid-template-columns: 1fr;
  }
  .no-cache-behavior__visual {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .no-cache-health__grid {
    grid-template-columns: 1fr;
  }
  .no-cache-activity-trend__chart {
    height: 220px;
  }
  .no-cache-score__gauge-ring {
    width: 132px;
    height: 132px;
  }
  .no-cache-score__gauge-ring::before {
    width: 94px;
    height: 94px;
  }
  .no-cache-score__value {
    font-size: 2rem;
  }
  .no-cache-records__modal-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * -----------------------------------------------------------------------------
 * Database Observability Component
 * -----------------------------------------------------------------------------
 * Analysis-focused layout for the database dashboard tab.
 * -----------------------------------------------------------------------------
 */
.no-database-observability {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.no-database-observability__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.no-database-observability__disabled-help {
  margin-top: 8px;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}
.no-database-observability__main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.no-database-observability__main-column, .no-database-observability__side-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.no-db-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.no-db-overview-card {
  display: flex;
  flex-direction: column;
  min-height: 128px;
  padding: 16px 18px;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  gap: 10px;
}
.no-db-overview-card__title {
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}
.no-db-overview-card__value {
  letter-spacing: -0.02em;
  color: #101828;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
}
.no-db-overview-card__description {
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}

.no-db-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  gap: 14px;
}
.no-db-panel--full {
  margin-top: 4px;
}
.no-db-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.no-db-panel__header--split {
  align-items: center;
}
.no-db-panel__content {
  min-width: 0;
}
.no-db-panel__title {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 700;
}

.no-db-threshold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  white-space: nowrap;
  color: #b45309;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  font-size: 12px;
  font-weight: 700;
}

.no-db-route-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-db-route-cell__path {
  word-break: normal;
  color: #667085;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.no-db-route-trigger,
.no-db-modal-trigger {
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: #5b9cff;
  border: 0;
  background: transparent;
}
.no-db-route-trigger:hover, .no-db-route-trigger:focus,
.no-db-modal-trigger:hover,
.no-db-modal-trigger:focus {
  color: #1d4ed8;
}

.no-db-table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.no-db-hotspots {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.no-db-hotspots__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.no-db-hotspots__label {
  margin: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}
.no-db-hotspots__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 8px;
}
.no-db-hotspots__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  background: #f3f6fb;
}
.no-db-hotspots__main {
  word-break: normal;
  color: #101828;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.no-db-hotspots__meta {
  color: #667085;
  font-size: 12px;
}

.no-db-records-table thead th.is-sortable {
  cursor: pointer;
  user-select: none;
}

.no-db-table-empty-state {
  margin-top: 10px;
}

.no-db-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.no-db-pagination__status {
  min-width: 80px;
  text-align: center;
}

.no-dashboard-chart--database-pressure, .no-dashboard-chart--database-scatter {
  min-height: 320px;
}

.no-db-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.no-db-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.no-db-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: min(1120px, 100vw - 48px);
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.no-db-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #dbe3ee;
}
.no-db-modal__title {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 700;
}
.no-db-modal__close {
  cursor: pointer;
  color: #667085;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}
.no-db-modal__body {
  overflow: auto;
  padding: 20px;
}
.no-db-modal__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.no-db-modal__summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #e9eef5;
  border-radius: 12px;
  background: #f3f6fb;
}
.no-db-modal__summary-label {
  color: #667085;
  font-size: 12px;
}
.no-db-modal__summary-value {
  color: #101828;
  font-size: 14px;
}

.no-db-routes-empty-state {
  margin-top: 10px;
}

.no-db-routes-table thead th.is-sortable,
.no-db-records-table thead th.is-sortable {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.no-db-routes-table thead th.is-sortable span,
.no-db-records-table thead th.is-sortable span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.no-db-routes-table thead th.is-sortable:hover, .no-db-routes-table thead th.is-sortable:focus,
.no-db-records-table thead th.is-sortable:hover,
.no-db-records-table thead th.is-sortable:focus {
  color: #5b9cff;
}
.no-db-routes-table thead th.is-sortable[aria-sort=ascending] span::after,
.no-db-records-table thead th.is-sortable[aria-sort=ascending] span::after {
  content: "↑";
  color: #5b9cff;
  font-size: 12px;
  line-height: 1;
}
.no-db-routes-table thead th.is-sortable[aria-sort=descending] span::after,
.no-db-records-table thead th.is-sortable[aria-sort=descending] span::after {
  content: "↓";
  color: #5b9cff;
  font-size: 12px;
  line-height: 1;
}

.no-db-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.no-db-table-tools--routes {
  margin-bottom: 6px;
}
.no-db-table-tools__search {
  flex: 1 1 320px;
}
.no-db-table-tools .form-text,
.no-db-table-tools input[type=search] {
  min-height: 42px;
  padding: 10px 14px;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
}
.no-db-table-tools .form-text:focus,
.no-db-table-tools input[type=search]:focus {
  border-color: #5b9cff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.no-db-table-tools__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.no-db-routes-pagination,
.no-db-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.no-db-routes-pagination__status,
.no-db-routes-pagination .no-db-routes-pagination__status,
.no-db-pagination__status,
.no-db-pagination .no-db-routes-pagination__status {
  min-width: 90px;
  text-align: center;
  color: #667085;
  font-size: 13px;
}

.no-db-table-tools__actions .button,
.no-db-routes-pagination .button,
.no-db-pagination .button {
  min-width: 94px;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: #101828;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  font-weight: 700;
}

.no-db-table-tools__actions .button:hover,
.no-db-table-tools__actions .button:focus,
.no-db-routes-pagination .button:hover,
.no-db-routes-pagination .button:focus,
.no-db-pagination .button:hover,
.no-db-pagination .button:focus {
  color: #5b9cff;
  border-color: #5b9cff;
  background: #f3f6fb;
}

.no-db-table-tools__actions .button:disabled,
.no-db-routes-pagination .button:disabled,
.no-db-pagination .button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 1200px) {
  .no-db-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .no-database-observability__main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .no-db-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .no-db-table-tools {
    align-items: stretch;
  }
  .no-db-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  .no-db-modal__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    margin: 10px auto;
  }
  .no-db-modal__summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
.no-explorer-modal-open {
  overflow: hidden;
}

.no-explorer-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.no-explorer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
}

.no-explorer-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: min(1420px, 100vw - 24px);
  height: min(94vh, 980px);
  margin: 12px auto;
  border: 1px solid #dbe3ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.no-explorer-modal__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem 0.5rem;
  gap: 16px;
}

.no-explorer-modal__heading {
  min-width: 0;
}

.no-explorer-modal__title {
  margin: 0;
  word-break: normal;
  color: #101828;
  font-size: 1.8rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.no-explorer-modal__subtitle,
.no-explorer-modal__detail-description {
  margin: 0.3rem 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.no-explorer-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-explorer-modal__close:hover {
  background: rgba(91, 156, 255, 0.05);
}
.no-explorer-modal__close:disabled, .no-explorer-modal__close[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
}
.no-explorer-modal__close {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.25rem;
}

.no-explorer-modal__top {
  flex: 0 0 auto;
  padding: 0 1rem 0.45rem;
}

.no-explorer-modal__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.no-explorer-modal__summary-card {
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #e9eef5;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0.85rem 0.95rem;
  gap: 0.85rem;
  border-radius: 14px;
  box-shadow: none;
}

.no-explorer-modal__summary-icon {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 48px;
  height: 48px;
  color: #2f6fe4;
  border-radius: 999px;
  background: rgba(91, 156, 255, 0.08);
  font-size: 22px;
  font-weight: 700;
}

.no-explorer-modal__summary-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  min-width: 0;
  text-align: left;
  gap: 0.18rem;
}

.no-explorer-modal__summary-label,
.no-explorer-modal__payload-label {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.no-explorer-modal__summary-value {
  word-break: normal;
  color: #1f2937;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.no-explorer-modal__content {
  display: grid;
  overflow: hidden;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.7fr) minmax(370px, 0.9fr);
  min-width: 0;
  min-height: 0;
  padding: 0 1rem 1rem;
  gap: 1rem;
}

.no-explorer-modal__table-panel,
.no-explorer-modal__detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.no-explorer-modal__table-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.55rem;
  gap: 0.75rem;
}

.no-explorer-modal__table-heading,
.no-explorer-modal__detail-heading {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: 0.2rem;
}

.no-explorer-modal__table-caption {
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

.no-explorer-modal__panel-title {
  color: #101828;
  font-size: 1.05rem;
  font-weight: 700;
}

.no-explorer-modal__table-controls {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding-bottom: 0.75rem;
  gap: 0.5rem;
}

.no-explorer-modal__search-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

.no-explorer-modal__search {
  min-height: 40px;
  padding: 0.65rem 0.85rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
}
.no-explorer-modal__search:focus {
  border-color: rgba(47, 111, 228, 0.5);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(91, 156, 255, 0.1);
}
.no-explorer-modal__search {
  width: 100%;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 0.9rem;
  border-radius: 12px;
  font-size: 13px;
}

.no-explorer-modal__toolbar-button,
.no-explorer-modal__pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  color: #1f2937;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.no-explorer-modal__toolbar-button:hover,
.no-explorer-modal__pager:hover {
  background: rgba(91, 156, 255, 0.05);
}
.no-explorer-modal__toolbar-button:disabled, .no-explorer-modal__toolbar-button[aria-disabled=true],
.no-explorer-modal__pager:disabled,
.no-explorer-modal__pager[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
}
.no-explorer-modal__toolbar-button,
.no-explorer-modal__pager {
  min-width: 118px;
  height: 40px;
  min-height: 40px;
  padding: 0 0.85rem;
  border-radius: 12px;
  font-size: 13px;
}

.no-explorer-modal__table-shell {
  display: flex;
  overflow: hidden;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.no-explorer-modal__table-wrap {
  overflow: auto;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  background: #fff;
}

.no-explorer-modal__table {
  width: 100%;
  border-collapse: collapse;
}
.no-explorer-modal__table th,
.no-explorer-modal__table td {
  padding: 0.8rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e9eef5;
  font-size: 13px;
}
.no-explorer-modal__table th {
  position: sticky;
  z-index: 1;
  top: 0;
  white-space: nowrap;
  color: #475467;
  background: #f8fafc;
  font-weight: 700;
}
.no-explorer-modal__table td {
  color: #1f2937;
}

.no-explorer-modal__row {
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.no-explorer-modal__row:hover {
  background: rgba(91, 156, 255, 0.05);
}
.no-explorer-modal__row.is-active {
  background: rgba(91, 156, 255, 0.08);
  box-shadow: inset 3px 0 0 #2f6fe4;
}

.no-explorer-modal__pagination {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.8rem;
  gap: 0.75rem;
}

.no-explorer-modal__page-label {
  color: #667085;
  font-size: 13px;
}

.no-explorer-modal__detail-panel {
  padding-left: 1rem;
  border-left: 1px solid #e9eef5;
}

.no-explorer-modal__detail-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  gap: 0.75rem;
}

.no-explorer-modal__scroll-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  font-size: 11px;
  color: #2f6fe4;
  background: rgba(91, 156, 255, 0.08);
  font-weight: 800;
}

.no-explorer-modal__detail-shell {
  display: flex;
  overflow: hidden;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0.75rem;
}

.no-explorer-modal__detail-topbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
}

.no-explorer-modal__dataset-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  font-size: 11px;
  flex: 0 0 auto;
  color: #667085;
  border: 1px solid #e9eef5;
  background: #fff;
  font-weight: 800;
}

.no-explorer-modal__dataset-badge[data-dataset-type=slow_endpoints] {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
}

.no-explorer-modal__dataset-badge[data-dataset-type=ajax_endpoints] {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.1);
}

.no-explorer-modal__dataset-badge[data-dataset-type=external_requests] {
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
}

.no-explorer-modal__detail-meta-wrap {
  overflow: auto;
  scrollbar-width: thin;
  flex: 0 0 auto;
  min-height: 0;
  max-height: 44%;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  background: #fff;
}

.no-explorer-modal__detail-meta {
  display: flex;
  flex-direction: column;
}

.no-explorer-modal__meta-row {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  border-bottom: 1px solid #e9eef5;
}

.no-explorer-modal__meta-row:last-child {
  border-bottom: 0;
}

.no-explorer-modal__meta-label-cell,
.no-explorer-modal__meta-value-cell {
  padding: 0.75rem 0.85rem;
  font-size: 13px;
  line-height: 1.45;
}

.no-explorer-modal__meta-label-cell {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475467;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
}

.no-explorer-modal__meta-value-cell {
  word-break: normal;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.no-explorer-modal__meta-value-cell.is-route {
  color: #2f6fe4;
  font-weight: 700;
}

.no-explorer-modal__payload-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0.45rem;
}

.no-explorer-modal__payload-wrap {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.65rem;
  border: 1px solid #e9eef5;
  border-radius: 16px;
  background: #0f172a;
}

.no-explorer-modal__payload {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  padding: 0.9rem;
  resize: none;
  color: #e2e8f0;
  border: 0;
  border-radius: 12px;
  background: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
}

.no-explorer-modal__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.no-explorer-modal__status.is-success {
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
}

.no-explorer-modal__status.is-info {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
}

.no-explorer-modal__status.is-warning {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.no-explorer-modal__status.is-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.14);
}

.no-explorer-modal__path-route {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.no-explorer-modal__path-value {
  word-break: normal;
  color: #1f2937;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.no-explorer-modal__path-divider {
  width: 100%;
  height: 1px;
  background: #e9eef5;
}

.no-explorer-modal__route-value {
  word-break: normal;
  color: #2f6fe4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.no-explorer-modal__empty,
.no-explorer-modal__empty-inline {
  padding: 1rem;
  color: #667085;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .no-explorer-modal__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .no-explorer-modal__content {
    overflow: auto;
    grid-template-columns: 1fr;
  }
  .no-explorer-modal__detail-panel {
    padding-left: 0;
    border-left: 0;
  }
  .no-explorer-modal__detail-meta-wrap {
    max-height: 280px;
  }
}
@media (max-width: 720px) {
  .no-explorer-modal__dialog {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    margin: 6px auto;
  }
  .no-explorer-modal__summary {
    grid-template-columns: 1fr;
  }
  .no-explorer-modal__table-controls {
    grid-template-columns: 1fr;
  }
  .no-explorer-modal__toolbar-button,
  .no-explorer-modal__pager {
    width: 100%;
    min-width: 0;
  }
  .no-explorer-modal__meta-row {
    grid-template-columns: 1fr;
  }
  .no-explorer-modal__meta-label-cell {
    border-bottom: 1px solid #e9eef5;
  }
}
.no-explorer-modal__meta-row.is-primary .no-explorer-modal__meta-label-cell {
  background: #f8fafc;
}

/**
 * -----------------------------------------------------------------------------
 * Unified Dashboard Range Selector
 * -----------------------------------------------------------------------------
 * Shared pill-style range selector used across dashboard tabs.
 * -----------------------------------------------------------------------------
 */
.no-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-top: 0;
}
.no-dashboard-header__spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.no-dashboard-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.no-range-selector {
  display: inline-flex;
  flex: 0 0 auto;
}
.no-range-selector__wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  background: #f3f6fb;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.no-range-selector__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 74px;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  color: #475467;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  appearance: none;
}
.no-range-selector__item:link, .no-range-selector__item:visited, .no-range-selector__item:hover, .no-range-selector__item:focus, .no-range-selector__item:active {
  text-decoration: none !important;
}
.no-range-selector__item:hover, .no-range-selector__item:focus {
  color: #1f2937;
  outline: none;
  background: #fff;
}
.no-range-selector__item.is-active {
  color: #fff;
  background: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}

@media (max-width: 767px) {
  .no-dashboard-header__actions {
    justify-content: flex-start;
    width: 100%;
  }
  .no-range-selector {
    width: 100%;
  }
  .no-range-selector__wrapper {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .no-range-selector__item {
    flex: 0 0 auto;
    min-width: 68px;
    height: 40px;
    padding: 0 16px;
  }
}
.no-dashboard-page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.no-dashboard-page-title__main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.no-dashboard-page-title__text {
  color: #1f2937;
  font-size: 22px;
  font-weight: 700;
}

.no-dashboard-page-title__subtext {
  color: #6b7280;
  font-size: 14px;
}
