body {
  font-family: "Source Sans Pro", system-ui, sans-serif;
}

.sidebar-wrapper {
  display: flex;
  min-height: calc(100vh - 57px);
  flex-direction: column;
}

.sidebar-utility {
  margin-top: auto;
}

.metric-tile {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.02));
}

.metric-tile .metric-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.35rem;
}

.metric-tile .metric-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.app-sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.status {
  display: none;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.status.show { display: block; }
.status.ok { background: rgba(25, 135, 84, 0.12); color: #146c43; }
.status.err { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.status.info { background: rgba(13, 110, 253, 0.1); color: #0a58ca; }

.codebox {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.75rem;
  min-height: 160px;
  padding: 1rem;
  white-space: pre-wrap;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

.clickable-row {
  cursor: pointer;
}

.badge.ready { background: rgba(25, 135, 84, 0.14); color: #146c43; }
.badge.warn { background: rgba(255, 193, 7, 0.2); color: #997404; }
.badge.muted { background: rgba(13, 110, 253, 0.12); color: #0a58ca; }
.badge.err { background: rgba(220, 53, 69, 0.14); color: #b02a37; }

tr.selected > * {
  background-color: rgba(13, 110, 253, 0.08) !important;
}

.table td,
.table th {
  vertical-align: middle;
}

.content-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
}

.small-box h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.75rem 1rem 0.35rem;
}

.progress-xs {
  height: 0.35rem;
}

.section-card {
  min-height: 100%;
}

.mini-chart {
  height: 220px;
  display: flex;
  align-items: end;
  gap: 0.75rem;
  padding-top: 1rem;
}

.mini-chart-bar {
  flex: 1 1 0;
  border-radius: 0.75rem 0.75rem 0.25rem 0.25rem;
  background: linear-gradient(180deg, rgba(13, 110, 253, 0.95), rgba(13, 110, 253, 0.45));
  min-height: 18%;
  position: relative;
}

.mini-chart-bar.success {
  background: linear-gradient(180deg, rgba(25, 135, 84, 0.95), rgba(25, 135, 84, 0.45));
}

.mini-chart-bar.warning {
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.95), rgba(255, 193, 7, 0.5));
}

.mini-chart-bar.danger {
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.95), rgba(220, 53, 69, 0.5));
}

.mini-chart-label {
  position: absolute;
  inset: auto 0 -1.75rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}