:root{
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#0F172A;
  --site-header-height: 52px;
  --site-subheader-height: 40px;
  --primary:#2563EB;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;
  /* tipo dropdown active (adapted per theme) */
  --idx-tipo-active-bg: rgba(16,185,129,0.12);
  --idx-tipo-active-color: #065f46;
  --gap:0.5rem;
}

/* Global project scale: emulate 80% browser zoom for texts, images and layout.
   Uses preferred 'zoom' when supported, falls back to CSS transform with width compensation. */
:root {
  --project-scale: 0.8;
}
@supports (zoom: 1) {
  html { zoom: var(--project-scale); }
}
@supports not (zoom: 1) {
  /* Fallback for browsers without zoom (e.g. some Firefox builds) */
  html { -webkit-text-size-adjust: 100%; }
  body {
    transform: scale(var(--project-scale));
    transform-origin: 0 0;
    /* compensate the scaled content so viewport remains usable */
    width: calc(100% / var(--project-scale));
  }
  /* ensure fixed/full-bleed elements don't clip when scaled */
  .site-header, .site-subheader, .dtl-legend-bar {
    transform-origin: 0 0;
  }
}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
}
.container-lg {
  max-width: 1300px;
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  backdrop-filter: blur(4px);
  height: var(--site-header-height);
}

main {
  padding-top: calc(var(--site-header-height) + 16px);
  padding-bottom: 1.5rem;
}

/* secondary sub-header (detalhes page: back button + title) */
.site-subheader {
  position: fixed;
  top: var(--site-header-height);
  left: 0;
  right: 0;
  z-index: 1090;
  height: var(--site-subheader-height);
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
}

body.theme-light .site-subheader {
  border-bottom: 1px solid rgba(2,6,23,0.06);
}

/* when subheader is present, push main further down */
body:has(.site-subheader) main {
  padding-top: calc(var(--site-header-height) + var(--site-subheader-height) + 16px);
}

.site-logo {
  height: 32px;
  margin-right: 12px;
  display: inline-block;
}
.site-title {
  font-weight:600;
  letter-spacing: -0.2px;
}

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { background: var(--surface); border-radius: 8px; padding: 10px; display:flex; flex-direction:column; gap:6px; box-shadow:0 6px 18px rgba(15,23,42,0.06); min-width:0; }
.kpi-value { font-size: clamp(1rem, 2.2vw, 1.4rem); font-weight:700; line-height:1.1; }
.kpi-label { font-size:0.85rem; color:rgba(15,23,42,0.6); }

/* make KPI cards in the left column adapt their size fluidly */
.col-md-3 .kpi-card { width:100%; flex: 0 0 auto; }

/* compact KPI cards for very narrow left column */
.col-md-1 .kpi-card { padding: 6px; border-radius:6px; }
.col-md-1 .kpi-value { font-size: clamp(0.8rem, 1.8vw, 1rem); }
.col-md-1 .kpi-label { font-size:0.75rem; }

/* progress bars */
.progress-wrap { background: transparent; display:flex; gap:8px; align-items:center; }
.bar { height:14px; border-radius:8px; min-width:6px; position:relative; }
.bar .label { position:absolute; left:10px; top:-20px; font-size:12px; color:rgba(0,0,0,0.6); font-weight:600; }

/* filters */
.filters-panel { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.filters-panel .fw-semibold { margin-bottom:0; margin-right:8px; }
.filters-panel .filters-collapse { margin-top:0; }
.filters-toggle { border-radius:8px; padding:8px 10px; }
.filters-collapse { background:var(--surface); border-radius:10px; padding:10px; box-shadow:0 8px 20px rgba(2,6,23,0.06); max-height:320px; overflow:auto; }
.filters-actions { display:flex; gap:8px; align-items:center; }

/* regions layout */
.regions-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:12px; }
.region-card { border-radius:10px; background:var(--surface); box-shadow:0 8px 20px rgba(2,6,23,0.04); padding:12px; min-width:0; }
.region-header { font-weight:700; margin-bottom:8px; color:var(--text); }
.list-group-item { border-radius:8px; margin-bottom:6px; }
.list-group-item:hover { transform: translateY(-2px); transition: transform .12s ease; box-shadow:0 6px 16px rgba(2,6,23,0.06); }

@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .site-title { font-size:1rem; }
}
.bar {
  flex:1;
  height:20px;
  border-radius:6px;
  position:relative;
  min-width:6px;
}
.bar .label {
  position:absolute;
  left:8px;
  top:0;
  font-size:12px;
  line-height:20px;
  color:rgba(0,0,0,0.65);
  font-weight:600;
}
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.04) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius:6px;
}
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* slide-over (simple) */
.slide-over {
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:380px;
  max-width:95%;
  background:var(--surface);
  box-shadow: -8px 0 24px rgba(15,23,42,0.12);
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:1050;
  overflow:auto;
}
.slide-over.open { transform:translateX(0); }

/* small helpers */
.text-truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kbd { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.8rem; background:#f3f4f6; padding:2px 6px; border-radius:4px; }
/* enhance focus and hover for interactive list items */
.list-group-item-action:focus, .list-group-item-action:active { box-shadow: 0 4px 18px rgba(15,23,42,0.08); outline: 3px solid rgba(37,99,235,0.12); }
.list-group-item-action:hover { transform: translateY(-1px); transition: transform .12s ease; }

/* Dark theme variables and overrides */
:root.theme-dark, body.theme-dark {
  --bg: #0b0f12;
  --surface: #0f1720;
  --text: #e6eef8;
  --muted: rgba(230,238,248,0.6);
  --primary: #60a5fa;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
}

body.theme-dark {
  background: var(--bg);
  color: var(--text);
}
/* dark-theme tweaks for tipo dropdown active */
:root.theme-dark, body.theme-dark {
  --idx-tipo-active-bg: rgba(52,211,153,0.18);
  --idx-tipo-active-color: var(--success);
}

.site-header {
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--muted);
}

.site-header .site-title {
  color: var(--text);
  font-weight:700;
  letter-spacing:2px;
}

.bg-dark-hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  color: var(--text);
}

.card {
  background: var(--surface);
  color: var(--text);
}

.theme-dark .card {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.03);
}

.region-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.03);
}

.list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding-top: 14px;
  padding-bottom: 14px;
}

.list-group-item .badge {
  font-weight:700;
  letter-spacing:0.6px;
}

.badge.bg-danger {
  background: var(--danger) !important;
}
.badge.bg-warning {
  background: var(--warning) !important;
  color:#111 !important;
}
.badge.bg-success {
  background: var(--success) !important;
}

/* hero / headline adjustments */
.hero .h3 { font-weight:700; letter-spacing: -0.5px; }
.hero .small { color: var(--muted); }

/* active quick filter button */
.btn-group .btn.active {
  box-shadow: 0 6px 20px rgba(2,6,23,0.35);
}

/* transitions and accessibility */
:root, body {
  transition: background-color .28s ease, color .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root, body, .card, .list-group-item { transition: none !important; }
}

/* region header layout */
.region-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  margin-bottom:12px;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.region-header .region-title { font-weight:700; color:var(--text); text-transform: none; }
.region-header .region-count { font-size:0.75rem; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; }

/* list item improvements for contrast and spacing */
.list-group-item {
  background: transparent;
  color: var(--text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 12px;
  border-radius: 6px;
  margin-bottom:6px;
  border: 1px solid rgba(255,255,255,0.02);
}
.list-group-item .fw-semibold.small { color: var(--text); font-weight:600; }
.list-group-item .status-meta { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-size:0.82rem; color: var(--muted); }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 2px 6px rgba(0,0,0,0.35); }

/* badge fallback hidden (we use status-text + dot) */
.list-group-item .badge { display:none; }

/* hover */
.list-group-item:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2,6,23,0.45); background: rgba(255,255,255,0.01); }

/* hero tweaks */
.bg-dark-hero { padding: 18px; }
.hero .h3 { font-size: 1.6rem; }
.hero .small { font-size: 0.95rem; }

/* KPI group on hero (right) compact */
.hero .h4 { margin:0; font-weight:700; }
.hero .text-center .small { color:var(--muted); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; }

/* Ensure a sensible --muted exists for the light theme if not defined above */
:root { --muted: rgba(15,23,42,0.6); }

/* Light theme explicit variables to ensure consistent --muted and contrasts */
:root.theme-light, body.theme-light {
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted: rgba(15,23,42,0.6);
}

/* ensure .text-muted uses theme-aware muted variable */
.text-muted { color: var(--muted) !important; }

/* adjust outline-light button for light theme to keep contrast */
body.theme-light .btn-outline-light {
  color: #0F172A !important;
  border-color: rgba(2,6,23,0.3) !important;
  background: transparent !important;
}
body.theme-light .btn-outline-light:hover {
  color: #ffffff !important;
  background: #0F172A !important;
  border-color: #0F172A !important;
}

/* site-header light theme: ensure background and text are legible */
body.theme-light .site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(2,6,23,0.08);
  color: #0F172A;
}
body.theme-light .site-header #last-update {
  color: rgba(15,23,42,0.6) !important;
}

/* hero background adaptation for light theme */
body.theme-light .bg-dark-hero {
  background: linear-gradient(180deg,#f8fafc,#ffffff);
  border: 1px solid rgba(2,6,23,0.04);
  color: var(--text);
}

/* Light-theme fixes: increase contrast for hero and muted text */
body.theme-light, :root.theme-light {
  --text: #0F172A;
  --muted: rgba(15,23,42,0.6);
  --surface: #FFFFFF;
}

/* Hero card on light theme (explicit) */
body.theme-light .bg-dark-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(2,6,23,0.04);
  color: var(--text);
}

/* Headline + small description contrast */
body.theme-light .hero .h3 { color: var(--text); }
body.theme-light .hero .small { color: var(--muted); }

/* Ensure text-muted maps to theme-aware color */
body.theme-light .text-muted { color: var(--muted) !important; }

/* Buttons styled as outline-light must remain readable on light bg */
body.theme-light .btn-outline-light {
  color: var(--text);
  border-color: rgba(2,6,23,0.08);
  background: transparent;
}

/* Dark theme: form inputs (search, text, select) */
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
body.theme-dark .form-control::placeholder {
  color: var(--muted);
}
body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: rgba(255,255,255,0.07);
  color: var(--text);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
}
/* hide native clear-button icon that browsers add to type=search in dark mode */
body.theme-dark input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}

/* ============================================================
   INDEX PAGE — specific styles
   ============================================================ */

/* Last-update two-line block in header */
.idx-last-update-wrap {
  line-height: 1.2;
}
.idx-last-update-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  text-transform: uppercase;
}
.idx-last-update-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Theme toggle icon button */
.idx-theme-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
}

/* KPI values in hero */
.idx-kpi-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  margin-bottom: 2px;
}
.idx-kpi-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

/* KPI percent stacked above count */
.idx-kpi-value {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.idx-kpi-percent {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.75rem;
  font-weight: 600;
  color: inherit;
  line-height: 1;
}
.idx-kpi-count {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.75;
  line-height: 1;
}
.idx-kpi-sublabel {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
  line-height: 1;
}

/* Filters bar */
.idx-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--dtl-border);
  border-radius: 10px;
  padding: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  --idx-filter-control-height: 28px;
}

.idx-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--idx-filter-control-height);
}
.idx-search-icon {
  position: absolute;
  left: 8px;
  color: var(--muted);
  pointer-events: none;
}
.idx-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1;
  padding: 6px 8px 6px 28px;
  min-height: var(--idx-filter-control-height);
  box-sizing: border-box;
}
.idx-search-input::placeholder {
  color: var(--muted);
}
.idx-search-input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.4);
}

.idx-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.idx-filters-right > .d-flex {
  align-items: center;
  min-height: var(--idx-filter-control-height);
}

.idx-filter-section-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
  min-height: var(--idx-filter-control-height);
  padding: 0 2px;
}

.idx-filter-sep {
  display: inline-block;
  align-self: center;
  width: 1px;
  height: var(--idx-filter-control-height);
  background: var(--dtl-border);
}

/* Legenda toggle + panel */
.idx-legend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--idx-filter-control-height);
  padding: 3px 10px;
  border: 1px solid var(--dtl-border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
  box-sizing: border-box;
}
.idx-legend-toggle:hover,
.idx-legend-toggle:focus {
  color: var(--text);
  background: var(--dtl-surface2);
  outline: none;
}
.idx-legend-toggle.active {
  color: var(--text);
  background: var(--dtl-surface2);
  border-color: rgba(96, 165, 250, 0.35);
}

.idx-legend-panel {
  background: var(--surface);
  border: 1px solid var(--dtl-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 6px;
}
.idx-legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
@media (max-width: 720px) {
  .idx-legend-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.idx-legend-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.idx-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idx-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.idx-legend-item .idx-status-dot {
  margin-top: 4px;
}
.idx-legend-item strong {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.idx-legend-item p,
.idx-legend-text {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.idx-legend-text strong {
  font-weight: 600;
  color: var(--text);
}

/* Situação filter buttons */
.idx-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  min-height: var(--idx-filter-control-height);
  line-height: 1;
  box-sizing: border-box;
}
.idx-status-btn:hover {
  background: var(--dtl-surface2);
  color: var(--text);
}
.idx-status-btn.active {
  background: var(--dtl-surface2);
  color: var(--text);
}

.idx-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.idx-status-dot--op  { background: rgb(52,211,153); }
.idx-status-dot--deg { background: rgb(251,191,36); }
.idx-status-dot--off { background: rgb(248,113,113); }

/* Tipo dropdown button */
.idx-tipo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
  min-height: var(--idx-filter-control-height);
  line-height: 1;
  box-sizing: border-box;
}
.idx-tipo-btn:hover,
.idx-tipo-btn:focus {
  background: var(--dtl-surface2);
  color: var(--text);
  box-shadow: none;
  outline: none;
}
.idx-tipo-btn::after {
  display: none; /* remove bootstrap caret, keep custom icon */
}

/* Tipo dropdown menu */
.idx-tipo-menu {
  background: var(--surface);
  border: 1px solid var(--dtl-border);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.idx-tipo-item {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--text);
  border-radius: 5px;
  padding: 6px 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .1s;
}
.idx-tipo-item:hover {
  background: var(--dtl-surface2);
  color: var(--success);
}
.idx-tipo-item.active {
  color: var(--idx-tipo-active-color);
  background: var(--idx-tipo-active-bg);
  font-weight: 600;
  border-radius: 6px;
}
.idx-tipo-alias {
  font-size: 0.72rem;
  opacity: 0.55;
  font-weight: 400;
}
body.theme-light .idx-tipo-menu {
  box-shadow: 0 8px 24px rgba(2,6,23,0.12);
}

/* Result count line */
.idx-result-count {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 4px 2px 8px;
  font-family: Inter, system-ui, sans-serif;
}
.idx-result-tipo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text);
}

/* Region cards: tribunal name and status text */
.list-group-item .fw-semibold.small {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
}
.status-text {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.region-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
}

/* Light theme overrides for index-specific components */
body.theme-light .idx-tipo-menu {
  background: #fff;
  border-color: rgba(2,6,23,0.08);
}
body.theme-light .idx-tipo-item {
  color: #0F172A;
}
body.theme-light .idx-tipo-item:hover {
  background: rgba(2,6,23,0.04);
}
/* ensure selected dropdown item is readable per theme */
body.theme-light .idx-tipo-item.active {
  color: var(--idx-tipo-active-color);
  background: var(--idx-tipo-active-bg);
  border-radius: 6px;
}
body.theme-dark .idx-tipo-item.active {
  color: var(--idx-tipo-active-color);
  background: var(--idx-tipo-active-bg);
  border-radius: 6px;
}

/* stronger selector to override bootstrap defaults for dropdown active item */
.idx-tipo-menu .idx-tipo-item.active {
  color: var(--idx-tipo-active-color) !important;
  background: var(--idx-tipo-active-bg);
  border-radius: 6px;
}

/* ensure variants when dropdown is shown / focused also display the green text */
.idx-tipo-menu.show .idx-tipo-item.active,
.idx-tipo-menu.show .idx-tipo-item.active:focus,
.idx-tipo-menu.show .idx-tipo-item.active * {
  color: var(--idx-tipo-active-color) !important;
}

/* make quick-status active button more visible in dark theme */
body.theme-dark .idx-status-btn.active {
  background: rgba(52,211,153,0.16);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(52,211,153,0.06);
}
body.theme-light .idx-filters-bar {
  background: #fff;
}
body.theme-light .idx-search-input {
  color: #0F172A;
}

/* ============================================================
   DETALHES PAGE — specific styles
   ============================================================ */

/* CSS vars for dot colors — override per theme */
:root {
  --dtl-dot-ok:   #22c55e;
  --dtl-dot-err:  #ef4444;
  --dtl-dot-none: #64748b;
  --dtl-dot-pend: var(--primary);
  --dtl-surface2: rgba(2,6,23,0.04);
  --dtl-border:   rgba(2,6,23,0.07);
  --dtl-query-bg: rgba(2,6,23,0.04);
  --dtl-query-color: rgba(15,23,42,0.55);
}
body.theme-dark {
  --dtl-surface2: rgba(255,255,255,0.025);
  --dtl-border:   rgba(255,255,255,0.05);
  --dtl-query-bg: rgba(255,255,255,0.025);
  --dtl-query-color: rgba(230,238,248,0.45);
}

/* Legend bar */
.dtl-legend-bar {
  position: fixed;
  top: calc(var(--site-header-height) + var(--site-subheader-height));
  left: 0; right: 0;
  z-index: 1080;
  height: 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--dtl-border);
  display: flex;
  align-items: center;
}

body:has(.dtl-legend-bar) main {
  padding-top: calc(var(--site-header-height) + var(--site-subheader-height) + 36px + 16px);
}

.dtl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.dtl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.dtl-dot--ok   { background: var(--dtl-dot-ok); }
.dtl-dot--err  { background: var(--dtl-dot-err); }
.dtl-dot--none { background: var(--dtl-dot-none); }
.dtl-dot--pendente { background: var(--dtl-dot-pend); }

.dtl-period {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* period select — green tones matching idx-tipo-item.active */
.dtl-period .form-select {
  min-width: 150px;
  background: var(--idx-tipo-active-bg);
  color: var(--idx-tipo-active-color);
  border-color: transparent;
  box-shadow: none;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 6px;
  transition: box-shadow .12s ease;
}
.dtl-period .form-select:focus,
.dtl-period .form-select:hover {
  outline: none;
  border-color: rgba(16,185,129,0.18);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.08);
}

/* Platform card */
.dtl-platform-card {
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--dtl-border);
  margin-bottom: 16px;
  overflow: hidden;
}

.dtl-platform-head {
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border-bottom: 1px solid var(--dtl-border);
  color: var(--text);
  letter-spacing: 0.01em;
}

.dtl-platform-body {
  padding: 0;
}

/* Query section (sub-group inside a platform) */
.dtl-query-section {
  padding: 0;
}

.dtl-query-section + .dtl-query-section {
  border-top: 1px solid var(--dtl-border);
}

.dtl-query-label {
  padding: 7px 16px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--dtl-query-color);
  background: var(--dtl-query-bg);
  text-transform: uppercase;
}

/* Each key row */
.dtl-line-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--dtl-border);
}
.dtl-line-row:last-child {
  border-bottom: none;
}

.dtl-key-label {
  flex-shrink: 0;
  min-width: 100px;
  max-width: 180px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtl-dots {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3px;
  overflow: visible;
  min-width: 0;
}

.dtl-dot-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: default;
}

/* On narrow screens: break the row into two lines.
   Line 1: key label (left) + suffix (right).
   Line 2: dots at full available width — they wrap internally as needed. */
@media (max-width: 640px) {
  .dtl-line-row {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .dtl-key-label {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 55%;
    order: 1;
  }
  .dtl-suffix {
    flex: 1 0 auto;
    min-width: 0;
    justify-content: flex-end;
    order: 2;
  }
  .dtl-dots {
    flex: 0 0 100%;
    order: 3;
    gap: 2px;
  }
  .dtl-dot-box { width: 8px; height: 8px; }
}

.dtl-no-data {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Uptime / suffix */
.dtl-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  min-width: 120px;
  justify-content: flex-end;
}

.dtl-uptime {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.dtl-fail-count {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.dtl-badge-err {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--dtl-dot-err);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.dtl-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Typography — JetBrains Mono para dados técnicos */
/* Subtítulo "Detalhes — tjsp" */
#title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* "ÚLTIMA ATUALIZAÇÃO: ..." no header */
#last-update {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Nome do endpoint (key): cnj, doc, legado… */
.dtl-key-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* % uptime e contagem de falhas */
.dtl-uptime,
.dtl-fail-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ===== OCORRÊNCIAS ===== */
.ocorrencias-section {
  padding: 0.25rem 0;
}

.ocorrencias-divider {
  border: none;
  border-top: 1px solid var(--dtl-border);
  opacity: 1;
  margin: 0;
}

.ocorrencias-divider--start {
  margin-bottom: 3.5rem;
}

.ocorrencias-divider--end {
  margin-top: 3.5rem;
}

.ocorrencias-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ocorrencias-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.ocorrencias-count {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.ocorrencias-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ocorrencia-item {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 2rem 2.5rem;
  align-items: start;
  padding: 1.5rem 1.25rem;
}

.ocorrencia-alert {
  background: var(--surface);
  border: 1px solid var(--dtl-border);
  border-left: 3px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body:not(.theme-dark) .ocorrencia-alert,
body.theme-light .ocorrencia-alert {
  background: #fff;
  border: 1px solid var(--dtl-border);
  border-left: 3px solid rgba(2,6,23,0.18);
  box-shadow: none;
}

.ocorrencia-alert .ocorrencia-item {
  border: none;
  background: transparent;
  border-radius: 0;
  margin: 0;
}

.ocorrencia-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.3rem;
}

.ocorrencia-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ocorrencia-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ocorrencia-status--ongoing {
  color: var(--warning);
}
.ocorrencia-status--ongoing .ocorrencia-status-dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
}

.ocorrencia-status--resolved {
  color: var(--success);
}
.ocorrencia-status--resolved .ocorrencia-status-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.15);
}

.ocorrencia-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ocorrencia-meta-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ocorrencia-meta-value {
  font-size: 0.78rem;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.35;
}

.ocorrencia-content {
  min-width: 0;
}

.ocorrencia-titulo {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.ocorrencia-descricao {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ocorrencia-descricao p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .ocorrencia-item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}