/* ========== Root, theme & density ========== */
:root {
  --radius: 14px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .08);
}

html[data-density="compact"] .table-sm> :not(caption)>*>* {
  padding: .3rem .4rem;
}

html[data-density="compact"] .input-group-sm>.form-control,
html[data-density="compact"] .form-select,
html[data-density="compact"] .btn-sm {
  padding-top: .2rem;
  padding-bottom: .2rem;
}

/* Rounded cards / sections */
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.accordion .accordion-item {
  border: none;
}

.accordion-button {
  border-radius: 0 !important;
}

/* Navbar polish */
.navbar .navbar-brand i {
  font-size: 1.15rem;
}

/* Health dot — controlled by JS via .ok / .bad */
.health-card .health-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-secondary-color);
  /* neutral by default */
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .12) inset, 0 0 10px rgba(0, 0, 0, .1);
}

/* green when OK, red when problem */
.health-card .health-dot.ok {
  background: var(--bs-success);
}

.health-card .health-dot.bad {
  background: var(--bs-danger);
}


/* Tables: sticky head & compact borders */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg);
}

.table thead {
  border-bottom: 1px solid var(--bs-border-color);
}

.table> :not(caption)>*>* {
  vertical-align: middle;
}

/* Overflow shadows for scrollable containers (JS toggles classes) */
.table-responsive {
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}

.table-responsive.is-scrolled-start {
  mask-image: linear-gradient(to right, black 0, black calc(100% - 12px), transparent 100%);
}

.table-responsive.is-scrolled-end {
  mask-image: linear-gradient(to right, transparent 0, black 12px, black 100%);
}

/* Pre blocks */
pre {
  background: var(--bs-tertiary-bg);
  border-radius: 10px;
  padding: .75rem;
  border: 1px solid var(--bs-border-color);
}

/* Footer */
.site-footer {
  background: var(--bs-body-bg);
}

/* Buttons & utilities */
.btn .bi {
  margin-right: .35rem;
}

/* Make first column narrow-friendly */
.w-1 {
  width: 1%;
  white-space: nowrap;
}

/* Slightly denser tabs bar and nicer corners */
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .6rem .8rem;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--bs-primary);
  font-weight: 600;
}

/* Global loading spacing */
#global-loading {
  display: none;
}

#global-loading.show {
  display: block;
}

/* Toasts: hard-pinned to bottom-right corner */
#toast-container {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;

  margin: 0 !important;
  padding: 1rem !important;

  width: auto;
  /* allow toast's own width (e.g., 350px in Bootstrap) */
  max-width: 100vw;
  /* safety on tiny screens */
  pointer-events: none;
  z-index: 3000;
}

#toast-container .toast {
  pointer-events: auto;
  margin: 0.25rem 0 0 0;
  /* stack vertically */
}

@supports (inset: 0) {

  /* If the browser supports logical inset, keep it exact as well */
  #toast-container {
    inset: auto 0 0 auto !important;
  }
}