.table-report { width: 100%; min-width: 1400px; border-collapse: collapse; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; font-size: 13px; }
.table-report th, .table-report td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dee2e6; border-right: 1px solid #dee2e6; vertical-align: middle; }
.table-report th:last-child, .table-report td:last-child { border-right: none; }
.table-report th { background: #f8f9fa; font-weight: 600; color: #495057; white-space: nowrap; }
.table-report tbody tr:hover { background: #f8f9fa; }
.status-success, .status-failure, .status-pending { display: inline-block; padding: .25rem .5rem; border-radius: .2rem; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #fff !important; }
.status-success { background: var(--bs-success, #34c38f) !important; }
.status-failure { background: var(--bs-danger, #f46a6a) !important; }
.status-pending { background: var(--bs-warning, #f1b44c) !important; }
.json-log { margin: 0; padding: 10px 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow-y: auto; }
.json-log .json-key { color: #b91c1c; font-weight: 600; }
.json-log .json-string { color: #379FFF; font-weight: 600; }
.json-log .json-number { color: #15803d; font-weight: 600; }

/* SVG <text> positions by baseline, not visual center, so an ApexCharts
   donut's center label sits a few px below where it should — dominant-baseline
   re-anchors it to true vertical middle. */
.apexcharts-datalabel-value { dominant-baseline: middle; }

/* json-editor: colors the JSON *inside* the actual textarea instead of a
   separate preview box — a transparent-text textarea sits on top of a
   .json-log backdrop that renders the same text colorized; json-editor-preview.js
   copies the textarea's own font/padding/border onto the backdrop so both
   line up character-for-character. */
.json-editor-wrap { position: relative; }
.json-editor-wrap textarea.json-editor { position: relative; z-index: 1; background: transparent; color: transparent; caret-color: var(--bs-body-color, #495057); }
.json-editor-wrap textarea.json-editor::selection { background: rgba(13, 110, 253, .25); }
.json-log.json-editor-backdrop { position: absolute; inset: 0; z-index: 0; max-height: none; overflow: hidden; pointer-events: none; background: transparent; border-color: transparent; word-break: break-word; color: var(--bs-body-color, #495057); }
.table-report tfoot td { font-weight: 700; background: #f8f9fa; }

.loader {
  width: 32px;
  --b: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%, #556ee6) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
    radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: loader-spin 1s infinite steps(10);
  display: inline-block;
  vertical-align: middle;
}
@keyframes loader-spin { to { transform: rotate(1turn); } }
.loader-sm { width: 16px; --b: 3px; }

/* Main panel background: theme.css defaults several surfaces to a light
   grey (page body, card headers, table-light thead, footer), which reads
   as boxes-inside-boxes against the white card bodies. Flatten all of them
   to pure white so the whole panel sits flush. */
:root[data-bs-theme="light"] {
    --bs-body-bg: #fff;
    --bs-tertiary-bg: #fff;
    --bs-footer-bg: #fff;
}
:root[data-bs-theme="light"] .table-light {
    --bs-table-bg: #fff;
}