/* ===== Core tokens ===== */
:root {
  --bg-main: #050816;
  --bg-panel: #0b1220;
  --bg-panel-soft: #111827;
  --bg-chip: #111827;
  --border-soft: #1f2937;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --accent-orange: #fb923c;
  --accent-orange-soft: #f97316;
  --accent-blue: #38bdf8;
  --accent-pink: #e11d48;
  --status-ok: #22c55e;
  --status-partial: #eab308;
  --status-missing: #ef4444;
  --scrollbar-track: #020617;
  --scrollbar-thumb: #1f2937;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --transition-fast: 0.18s ease-out;
  --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  background: radial-gradient(circle at top, #020617 0, #020617 35%, #020617 100%),
              radial-gradient(circle at bottom right, rgba(248, 113, 113, 0.02), transparent 60%);
  color: var(--text-main);
}

/* Layout base */

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Sidebar */

.sidebar {
  background: radial-gradient(circle at top left, #020617 0, #020617 40%, #020617 100%);
  border-right: 1px solid rgba(15, 23, 42, 0.9);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.logo-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-orange) 0, #facc15 45%, #7c2d12 100%);
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.9);
}

.logo-text {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: #f9fafb;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

/* ===== NAV ITEM – estilo “Freepik” ===== */

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.nav-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* bolinha de status */
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: 0 0 10px currentColor;
}

.status-dot.ok {
  color: var(--status-ok);
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%);
}
.status-dot.partial {
  color: var(--status-partial);
  background: radial-gradient(circle, #fef9c3 0, #eab308 40%, #78350f 100%);
}
.status-dot.missing {
  color: var(--status-missing);
  background: radial-gradient(circle, #fee2e2 0, #ef4444 35%, #7f1d1d 100%);
}

/* ícone redondo (tipo o do mock) */
.nav-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #f97316 0, #fb923c 35%, #7c2d12 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fefce8;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.75);
}

/* bloco de texto – título + status embaixo */
.nav-item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nav-item-label-main {
  font-weight: 500;
  font-size: 13px;
  color: #e5e7eb;
}

.nav-item-label-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* sem texto extra à direita, igual ao mock */
.nav-item-status-text {
  display: none;
}

/* estados hover / active */

.nav-item:hover {
  background: radial-gradient(circle at left, rgba(56, 189, 248, 0.12), transparent 55%);
  border-color: rgba(55, 65, 81, 0.9);
  transform: translateX(2px);
  color: #e5e7eb;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(249, 115, 22, 0.3));
  border-color: rgba(56, 189, 248, 0.8);
  color: #f9fafb;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8), 0 16px 40px rgba(15, 23, 42, 1);
}

/* ===== MAIN / DASHBOARD – igual antes ===== */

.main {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.06), transparent 55%),
              radial-gradient(circle at bottom right, rgba(248, 113, 22, 0.09), transparent 65%),
              var(--bg-main);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.main-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.stack-summary {
  display: flex;
  gap: 10px;
}

.stack-chip {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 13px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(30, 64, 175, 0.8);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.95);
}

.chip-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chip-value {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

.module-dashboard {
  flex: 1;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.9), #020617 70%);
  border-radius: var(--radius-xl);
  padding: 20px 22px 22px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  
}

.module-dashboard--empty {
  align-items: center;
  justify-content: center;
}

.empty-state {
  font-size: 14px;
  color: var(--text-muted);
}

.module-overview {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 18px;
}

.overview-card {
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(55, 65, 81, 0.9);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.module-badge span:last-child {
  font-weight: 600;
}
.badge-ok { color: var(--status-ok); }
.badge-partial { color: var(--status-partial); }
.badge-missing { color: var(--status-missing); }

.overview-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.metric-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  font-size: 11px;
  color: var(--text-muted);
}
.metric-pill strong {
  color: #e5e7eb;
  font-weight: 500;
}

/* donut */

.donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut {
  --size: 120px;
  --thickness: 15px;
  --progress: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  background:
    conic-gradient(
      from 220deg,
      var(--accent-orange) calc(var(--progress) * 1%),
      rgba(31, 41, 55, 0.7) 0
    );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 36px rgba(249, 115, 22, 0.65);
}
.donut::before {
  content: "";
  position: absolute;
  width: calc(100% - var(--thickness) * 2);
  height: calc(100% - var(--thickness) * 2);
  border-radius: 50%;
  background: radial-gradient(circle, #020617 0, #020617 50%, #020617 100%);
  box-shadow: inset 0 0 30px rgba(15, 23, 42, 0.9);
}
.donut-label {
  position: relative;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.donut-label strong {
  display: block;
  font-size: 20px;
  color: #fef3c7;
}

/* itens + painéis laterais */

.items-section {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.items-grid {
  width:100% !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: flex-start;
}

.item-card {
  background: linear-gradient(145deg, #020617, #020617);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.9);
}

.item-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.item-title {
  font-size: 13px;
  font-weight: 500;
}
.item-status-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
}
.item-status-ok { color: var(--status-ok); }
.item-status-partial { color: var(--status-partial); }
.item-status-missing { color: var(--status-missing); }

.progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #020617;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 55, 0.9);
}
.progress-inner {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-orange-soft));
  transition: width 0.25s ease-out;
}

.item-checks {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.item-checks li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.item-checks li span.icon {
  font-size: 10px;
}

.btn-ghost {
  align-self: flex-end;
  margin-top: 4px;
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  color: var(--text-muted);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-ghost:hover {
  background: rgba(30, 64, 175, 0.5);
  color: #e5e7eb;
  border-color: rgba(59, 130, 246, 0.9);
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.panel {
  background: radial-gradient(circle at top, #020617, #020617 65%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-size: 13px;
  font-weight: 500;
}
.panel-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.files-table th,
.files-table td {
  padding: 4px 4px;
  text-align: left;
}
.files-table th {
  color: var(--text-muted);
  font-weight: 500;
}
.files-table tr:nth-child(odd) td {
  background: rgba(15, 23, 42, 0.7);
}
.files-table tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.4);
}
.file-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

.btn-copy {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.btn-copy:hover {
  background: rgba(59, 130, 246, 0.6);
  color: #e5e7eb;
  border-color: rgba(59, 130, 246, 0.9);
  transform: translateY(-1px);
}

/* Logs */

.logs-console {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  background: radial-gradient(circle at top left, #020617, #020617 60%);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  color: #9ca3af;
  overflow: auto;
  max-height: 190px;
  white-space: pre-wrap;
}
.logs-console::-webkit-scrollbar {
  width: 6px;
}
.logs-console::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

/* stack status */

.stack-status-ok { color: var(--status-ok); }
.stack-status-partial { color: var(--status-partial); }
.stack-status-missing { color: var(--status-missing); }

/* Responsivo leve */

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .module-overview {
    grid-template-columns: minmax(0, 1fr);
  }
  .items-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .sidebar {
    padding-inline: 10px;
  }
  .nav-item {
    padding-inline: 6px;
  }
  .nav-item-text {
    display: none; /* em telas muito pequenas só fica bolinha+ícone */
  }
}

/* BOLA DO ÍCONE + STATUS */
.status-ball {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin-right: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Verde / Amarelo / Vermelho – escopado só para .status-ball */
.status-ball.status-ok {
  background: linear-gradient(135deg, #00ff95, #1ed760);
  box-shadow: 0 0 10px rgba(0,255,149,0.6);
}

.status-ball.status-partial {
  background: linear-gradient(135deg, #ffb400, #ff8800);
  box-shadow: 0 0 10px rgba(255,180,0,0.5);
}

.status-ball.status-missing {
  background: linear-gradient(135deg, #ff4d4d, #aa0000);
  box-shadow: 0 0 10px rgba(255,0,0,0.4);
}


/* Dependências */
.dependencies-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
}
.dependencies-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.dependencies-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.dependencies-badge.dep-ok {
  background: rgba(0,255,149,0.12);
  color: #00ff95;
}
.dependencies-badge.dep-partial {
  background: rgba(255,180,0,0.12);
  color: #ffb400;
}
.dependencies-badge.dep-missing {
  background: rgba(255,77,77,0.12);
  color: #ff4d4d;
}

/* Playbook */
.playbook-panel {
  margin-top: 16px;
}
.playbook-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0 4px;
}
.playbook-block {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.playbook-block:first-child {
  border-top: none;
}
.playbook-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.playbook-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.playbook-checks li {
  padding: 2px 0;
}

/* ===== Composição do módulo (schema.items + weight) ===== */

.module-composition {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(55, 65, 81, 0.9);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-composition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.module-composition-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.module-composition-summary {
  font-size: 11px;
}

.module-composition-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-composition-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.mci-name {
  color: #e5e7eb;
}

.mci-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.mci-weight {
  color: var(--text-muted);
}

.mci-status {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 55, 0.9);
}

.mci-status-ok {
  color: var(--status-ok);
}

.mci-status-partial {
  color: var(--status-partial);
}

.mci-status-missing {
  color: var(--status-missing);
}
/* HOTFIX 2025-11-29 – ajuste de layout dos cards (composição x arquivos/logs) */
.items-section {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

.items-grid {
  width:100% !important;
  min-width: 0;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* HOTFIX 2025-11-29 – layout Kernel: composição x arquivos/logs */
.items-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.items-grid {
  width:100% !important;
  flex: 0 0 60%;
  min-width: 0;
}

.right-column {
  flex: 1 0 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* HOTFIX 2025-11-29 – reduzir largura do card Composição do Módulo */
.items-grid {
  width:100% !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.items-grid .panel:nth-child(1) {
  max-width: 600px;     /* diminui a composição */
  width: 100%;
}

.right-column {
  margin-top: 0;
}
/* HOTFIX 2025-11-29 – alinhamento Composição x Arquivos/Logs no dashboard do módulo */
.module-dashboard .items-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* coluna esquerda: Composição + FastAPI Core */
.module-dashboard .items-grid {
  width:100% !important;
  flex: 0 0 60%;
  max-width: 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* coluna direita: Arquivos do módulo + Logs */
.module-dashboard .right-column {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ===============================
   Kernel detail – grid + scroll
   =============================== */
.kernel-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
}

.kernel-detail-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Scroll vertical para quando tiver mais cards */
.kernel-detail-scroll {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: 6px;
}

/* Scrollbar discreta */
.kernel-detail-scroll::-webkit-scrollbar {
  width: 6px;
}
.kernel-detail-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.kernel-detail-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

/* ========= Ajuste fino da UI v2 para alinhar colunas ========= */

/* Deixa a coluna esquerda mais estreita (Composição + FastAPI) */
.items-section {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
}

/* Limita a largura máxima dos cards de itens para não estourar */
.items-grid {
  width:100% !important;
  max-width: 100%;
}

/* Painéis da coluna direita sobem e se alinham ao topo */
.right-column {
  justify-content: flex-start;
}

/* Ativa scroll vertical APENAS se necessário */
.items-section { display: flex; gap: 32px; align-items: flex-start; }

/* Scroll discreto */
.items-section::-webkit-scrollbar {
  width: 6px;
}
.items-section::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.items-section::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}


/* === Ajuste fino Kernel: alinhamento e altura da área técnica === */

/* Deixa a coluna esquerda um pouco menor para abrir espaço à direita */
.items-section {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

/* Coluna da direita sempre colada no topo dos itens (Arquivos / Logs) */
.right-column {
  align-self: flex-start;
  justify-content: flex-start;
  padding-top: 0;
}

/* Se a área encher de cards, ativa scroll interno discreto */
.module-dashboard {
  
}

.items-section { display: flex; gap: 32px; align-items: flex-start; }

.items-section::-webkit-scrollbar {
  width: 6px;
}
.items-section::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.items-section::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}


/* === Devon Stack v2 – Fix scroll lateral dos módulos === */
.sidebar {
  overflow-y: auto;
}

.sidebar-nav { overflow-y: auto; padding-right: 4px; }
/* ===== Kernel mini cards (donuts por módulo) ===== */
.kernel-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.kernel-items-grid .item-card {
  max-width: 210px;
  min-height: 210px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.kernel-items-grid .item-header {
  width: 100%;
  text-align: center;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kernel-items-grid .item-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.kernel-items-grid .item-status-pill {
  margin: 0 auto;
  font-size: 11px;
  padding: 2px 8px;
}

.kernel-items-grid .donut-wrapper-module {
  margin: 10px 0 4px 0;
  display: flex;
  justify-content: center;
}

.kernel-items-grid .donut {
  width: 95px;
  height: 95px;
}

.kernel-items-grid .donut-label strong {
  font-size: 20px;
}

.kernel-items-grid .donut-caption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
/* =====================================================
   GRID UNIFICADA — Kernel + módulos em cards iguais
   ===================================================== */

.kernel-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 260px;
    gap: 24px;
    width: 100%;
}

.kernel-items-grid .item-card,
.kernel-card {
    width: 100%;
    height: 260px;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Título */
.kernel-items-grid .item-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
}

/* Status */
.kernel-items-grid .item-status-pill {
    font-size: 11px;
    padding: 3px 10px;
    margin-bottom: 6px;
}

/* Donut */
.kernel-items-grid .donut-wrapper-module {
    margin-top: 8px;
    margin-bottom: 8px;
}

.kernel-items-grid .donut {
    width: 95px !important;
    height: 95px !important;
}

/* Label do % */
.kernel-items-grid .donut-label strong {
    font-size: 22px !important;
}

/* Legenda da latência */
.kernel-items-grid .donut-caption {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 6px;
}
/* Kernel – grid padronizada de donuts */
.kernel-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.kernel-items-grid .item-card {
  height: 240px;
  max-width: 240px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.kernel-items-grid .item-header {
  text-align: center;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kernel-items-grid .item-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.kernel-items-grid .item-status-pill {
  font-size: 11px;
  padding: 3px 10px;
}

.kernel-items-grid .donut-wrapper-module {
  margin: 10px 0 6px 0;
}

.kernel-items-grid .donut {
  width: 95px;
  height: 95px;
}

.kernel-items-grid .donut-label strong {
  font-size: 22px;
}

.kernel-items-grid .donut-caption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ============================
   Kernel – cards compactos (donut)
   ============================ */

.kernel-modules-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.kernel-module-card {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.kernel-module-card .item-header {
  width: 100%;
  margin-bottom: 6px;
}

.kernel-module-card .donut-wrapper {
  margin: 4px 0;
}

.kernel-module-card .donut {
  margin: 0 auto;
}

.kernel-module-card .donut-label {
  font-size: 14px;
}

.kernel-module-card div {
  text-align: center;
}

/* Kernel – cards compactos lado a lado */
.module-dashboard .items-section .kernel-modules-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.module-dashboard .items-section .kernel-modules-grid .kernel-module-card {
  flex: 0 0 220px;
  max-width: 220px;
}

/* Kernel: cards compactos em grid horizontal */
.module-dashboard.kernel-view .items-section .items-grid {
  width:100% !important;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.module-dashboard.kernel-view .items-section .items-grid .kernel-module-card {
  flex: 0 0 220px;
  max-width: 220px;
}

/* KERNEL DASHBOARD – cards lado a lado */
.items-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
}

.items-section .items-grid {
  width:100% !important;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.items-section .right-column {
  flex: 0 0 320px;
}

.module-dashboard::after,
.items-section::after,
.right-column::after,
.content-area::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.module-dashboard,
.items-section,
.right-column,
.content-area {
    overflow: visible !important;
}


/* KERNEL: cards em grid + coluna direita fixa */
.module-dashboard.kernel-view .items-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
}

.module-dashboard.kernel-view .items-section .items-grid {
  width:100% !important;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.module-dashboard.kernel-view .items-section .right-column {
  flex: 0 0 320px;
}

/* MÓDULOS PADRÃO: volta pro grid 2 colunas (composição + arquivos/logs) */
.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: flex-start;
}

.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.module-dashboard:not(.kernel-view) .items-section .right-column {
  flex: 0 0 auto;
}

/* ===============================================
   =============================================== */

.module-dashboard:not(.kernel-view) .panel,
.module-dashboard:not(.kernel-view) .overview-card,
.module-dashboard:not(.kernel-view) .item-card {
    min-height: 210px !important;   /* altura base */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Ajuste extra para evitar compressão */
.module-dashboard:not(.kernel-view) .panel {
    padding: 14px 16px;
}

/* Garantir que esquerda e direita alinhem verticalmente */
.module-dashboard:not(.kernel-view) .items-section {
    align-items: flex-start !important;
}

.module-dashboard.kernel-view .items-section {
  display: grid !important;
  grid-template-columns: repeat(3, 220px) 320px; /* 3 cards + coluna direita */
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 24px;
  row-gap: 24px;
}

/* Grid dos cards do Kernel: 3 por linha, já no tamanho atual (220px) */
.module-dashboard.kernel-view .items-section .items-grid {
  width:100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 220px);
  grid-auto-rows: auto;
  gap: 24px;
}

/* Coluna de resumo grudada na direita do dashboard */
.module-dashboard.kernel-view .items-section .right-column {
  width: 320px;
  max-width: 320px;
}


/* ============================================================
   FIX FINAL 2025-12-02 — Kernel e Módulos Padronizados
   ============================================================ */


/* --------------------------
   1) KERNEL (dashboard donuts)
   -------------------------- */

.module-dashboard.kernel-view .items-section {
  display: grid !important;

  /* 3 donuts + coluna direita */
  grid-template-columns: 220px 220px 220px 320px;

  column-gap: 28px;
  row-gap: 28px;

  justify-content: flex-start;
  align-items: flex-start;
}

/* grid dos donuts */
.module-dashboard.kernel-view .items-grid {
  width:100% !important;
  display: contents !important; /* faz cada card ocupar sua coluna real */
}

.module-dashboard.kernel-view .item-card {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
}


/* coluna direita do Kernel */
.module-dashboard.kernel-view .right-column {
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* remove qualquer lixo herdado */
.module-dashboard.kernel-view .items-section * {
  overflow: visible !important;
}



/* -------------------------------
   2) MÓDULOS PADRÃO (Infra, Voice)
   ------------------------------- */

.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  align-items: flex-start;
}

/* cards da coluna esquerda (composição + checks) */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* cards da coluna direita (arquivos + logs) */
.module-dashboard:not(.kernel-view) .right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* altura uniforme dos cards de módulo (somente módulos padrão) */
.module-dashboard:not(.kernel-view) .panel {
  min-height: 210px;
}


/* elimina interferências herdadas de patches anteriores */
.module-dashboard:not(.kernel-view) .items-section * {
  overflow: visible !important;
}






/* Todos os dashboards (Kernel + módulos) usam o mesmo grid 2.1 / 1.0
   do bloco superior STATUS / CONCLUSÃO, sem scroll interno nem recorte. */
.module-dashboard .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) !important;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Coluna esquerda: cards técnicos / donuts / composição */
.module-dashboard .items-section .items-grid {
  width:100% !important;
  min-width: 0;
}

/* Coluna direita: painéis sempre colados à borda direita */
.module-dashboard .items-section .right-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* Para TODOS os módulos que NÃO são Kernel (.kernel-view),
   a coluna esquerda vira uma coluna vertical de painéis em largura cheia. */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex !important;
  gap: 18px;
  width: 100%;
}

/* Painéis da coluna esquerda ocupam 100% da coluna (sem max-width) */
.module-dashboard:not(.kernel-view) .items-section .items-grid .panel,
.module-dashboard:not(.kernel-view) .items-section .items-grid .overview-card {
  width: 100% !important;
  max-width: none !important;
}

/* Anula o hotfix antigo que limitava o primeiro card da coluna esquerda */
.module-dashboard:not(.kernel-view) .items-section .items-grid .panel:nth-child(1) {
  max-width: none !important;
}


/* A linha inteira vira um grid real de 2 colunas (igual ao topo) */
.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 22px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* A coluna esquerda deve ser uma pilha vertical ocupando 100% da coluna */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex !important;
  width: 100% !important;
  gap: 18px !important;
}

/* Todos os cards da coluna esquerda ficam iguais */
.module-dashboard:not(.kernel-view) .items-section .items-grid .panel,
.module-dashboard:not(.kernel-view) .items-section .items-grid .overview-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* A coluna direita fica estável e alinhada à borda */
.module-dashboard:not(.kernel-view) .items-section .right-column {
  width: 100% !important;
  display: flex !important;
  gap: 18px !important;
}

   (Igual à largura do bloco STATUS MISSING / topo do módulo)  */
.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 22px !important;
}

/* Coluna esquerda vira uma pilha vertical ocupando 100% da coluna */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex !important;
  gap: 18px !important;
  width: 100% !important;
}

/* Todos os cards da coluna esquerda – COMPOSIÇÃO, Docker, Nginx, etc. */
.module-dashboard:not(.kernel-view) .items-section .items-grid .panel,
.module-dashboard:not(.kernel-view) .items-section .items-grid .overview-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

   para terem EXATAMENTE o mesmo tamanho do bloco STATUS MISSING */

/* Primeiro: garantir que a linha abaixo do STATUS é grid 2/1 */
.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  width: 100% !important;
  gap: 22px !important;
}

/* Coluna esquerda = coluna cheia */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  gap: 18px !important;
}

/* ESTA É A LINHA QUE FALTAVA.
   Força .panel a ter o mesmo width do bloco STATUS (que usa .section-block) */
.module-dashboard:not(.kernel-view) .items-section .items-grid .panel {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Alguns módulos usam .card-row também */
.module-dashboard:not(.kernel-view) .items-section .items-grid .card-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.module-dashboard .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) !important;
  align-items: flex-start;
  column-gap: 24px;
}

.module-dashboard .items-grid,
.module-dashboard .right-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.module-dashboard .items-grid .panel,
.module-dashboard .right-column .panel {
  width: 100%;
  max-width: 100%;
}


.module-dashboard .items-section {
  display: grid !important;
  grid-template-columns: 72% 28% !important;
  gap: 24px !important;
  width: 100% !important;
}

.module-dashboard .items-grid,
.module-dashboard .right-column {
  width: 100% !important;
}

.module-dashboard .items-grid .panel,
.module-dashboard .right-column .panel {
  width: 100% !important;
  max-width: 100% !important;
}


.module-dashboard .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) !important;
  align-items: flex-start;
  gap: 24px !important;
  width: 100% !important;
}

/* garantir que os panels ocupem a coluna inteira */
.module-dashboard .items-grid,
.module-dashboard .right-column {
  width: 100% !important;
  max-width: 100% !important;
}

.module-dashboard .items-grid .panel,
.module-dashboard .right-column .panel {
  width: 100% !important;
  max-width: 100% !important;
}


/* FIX REAL – aplica no container correto que envolve COMPOSIÇÃO + ARQUIVOS + LOGS */
.module-dashboard .module-content {
    display: grid !important;
    grid-template-columns: 2.15fr 1fr !important; /* mesma proporção do topo */
    gap: 26px !important;
    width: 100% !important;
    align-items: flex-start !important;
}

/* força todos os cards a ocuparem a coluna inteira */
.module-dashboard .module-content .panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ====== FIX GLOBAL — GRID PADRÃO DOS CARDS DA STACK ====== */
.stack-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    grid-gap: 24px;
    width: 100%;
}

.stack-card {
    height: 100%;
    min-height: 220px;
    border-radius: 14px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
}

.stack-card > * {
    flex: 1;
}
/* CLEAN OVERRIDE 2025-12-02 – layout módulos padrão (não afeta Kernel) */

.module-dashboard:not(.kernel-view) .items-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* Coluna esquerda: composição + cards técnicos, todos no mesmo grid */
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

/* Cards com “cara” igual – mesma base de altura */
.module-dashboard:not(.kernel-view) .items-section .items-grid > * {
  min-height: 220px;
  box-sizing: border-box;
}
.module-dashboard:not(.kernel-view) .items-section .items-grid {
  width:100% !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.module-dashboard:not(.kernel-view) .items-section .items-grid > * {
  width: 100%;
  box-sizing: border-box;
}

.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;  /* 50% / 50% */
  gap: 24px;
  align-items: flex-start;
}

/* colunas esquerda e direita com mesma largura */
.module-dashboard:not(.kernel-view) .items-section .items-grid,
.module-dashboard:not(.kernel-view) .items-section .right-column {
  width: 100% !important;
  max-width: none !important;
}

/* todos os cards ocupam 100% da coluna */
.module-dashboard:not(.kernel-view) .items-section .items-grid > *,
.module-dashboard:not(.kernel-view) .items-section .right-column > * {
  width: 100% !important;
  box-sizing: border-box;
}

.module-dashboard:not(.kernel-view) .items-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}

/* cards da esquerda NÃO podem esticar */
.module-dashboard:not(.kernel-view) .items-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* coluna da direita também fixa */
.module-dashboard:not(.kernel-view) .right-column {
    width: 100% !important;
    max-width: 100% !important;
}

/* desativa overrides antigos quebrados */
.module-dashboard:not(.kernel-view) .items-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

/* GRID REAL – 2 colunas iguais para módulos padrão */
.module-dashboard:not(.kernel-view) .items-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}

/* cards da coluna esquerda – largura automática e igual */
.module-dashboard:not(.kernel-view) .items-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

/* coluna da direita mantém a largura do Kernel */
.module-dashboard:not(.kernel-view) .right-column {
    width: 100% !important;
    max-width: 100% !important;
}

/* FIX REAL — impedir que conteúdo interno estoure a largura */
.module-dashboard:not(.kernel-view) .items-grid,
.module-dashboard:not(.kernel-view) .items-grid * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* garantir que listas internas nunca empurrem o card */
.module-composition *,
.mc-items *,
.mc-items li,
.mc-items span {
    max-width: 100% !important;
    white-space: normal !important;
}


/* FIX 2025-12-02 – Largura igual de todos os cards (exceto Kernel) */

/* 1) items-section vira FLEX com 2 colunas iguais */
.module-dashboard:not(.kernel-view) .items-section {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
}

/* 2) Esquerda (items-grid) e direita (right-column) ocupam o MESMO espaço */
.module-dashboard:not(.kernel-view) .items-section .items-grid,
.module-dashboard:not(.kernel-view) .items-section .right-column {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* 3) Cada card preenche 100% da coluna onde está */
.module-dashboard:not(.kernel-view) .items-section .items-grid > *,
.module-dashboard:not(.kernel-view) .items-section .right-column > * {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 4) Mata qualquer width fixo que sobrou na right-column */
.module-dashboard:not(.kernel-view) .right-column {
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* === Devon Stack v2 – LAYOUT FIX 2025-12-02 ===================== */
/* Força a área de cards do módulo (abaixo do overview) a ser 2 colunas iguais */

.module-dashboard .items-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: flex-start;
}

/* Cada coluna vira uma coluna vertical de cards com espaçamento padrão */
.module-dashboard .items-grid,
.module-dashboard .right-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Em telas menores, volta pra 1 coluna pra não quebrar nada */
@media (max-width: 1100px) {
  .module-dashboard .items-section {
    grid-template-columns: 1fr !important;
  }
}
/* === FIX KERNEL DASHBOARD – 2025-12-02 ========================= */
/* Kernel usa layout próprio, NÃO segue grid dos módulos comuns    */

.kernel-view .items-section {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

/* Cards do Kernel continuam em grid interno (3 por linha) */
.kernel-view .items-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 24px !important;
}

/* Coluna da direita fixa ao lado dos cards */
.kernel-view .right-column {
  flex: 0 0 320px;
  max-width: 320px;
}

/* Mobile: Kernel fica em coluna única */
@media (max-width: 1100px) {
  .kernel-view .items-section {
    flex-direction: column !important;
  }
  .kernel-view .right-column {
    flex: 0 0 auto;
    max-width: 100%;
  }
}
/* === FIX DEFINITIVO KERNEL DASHBOARD – 2025-12-02 ================ */
/* Cards do Kernel à esquerda em grid 3xN, coluna de resumo à direita */

.kernel-view .items-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

/* Grid interno dos cards do Kernel (3 colunas fluidas) */
.kernel-view .items-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Mata as larguras fixas de 220px impostas via JS */
.kernel-view .items-grid .item-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Coluna da direita (Resumo + Containers) fixa no espaço dela */
.kernel-view .right-column {
  width: 100% !important;
  max-width: 320px !important;
}

/* Mobile: Kernel empilha tudo em uma coluna */
@media (max-width: 1100px) {
  .kernel-view .items-section {
    grid-template-columns: 1fr !important;
  }
  .kernel-view .right-column {
    max-width: 100% !important;
  }
}
/* === Devon Stack v2 – FIX MÓDULOS (exceto Kernel) – 2025-12-02 ==== */
/* Aplica apenas quando NÃO estiver em modo kernel-view                */

.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: flex-start;
}

/* Coluna ESQUERDA: composição + cards técnicos */
.module-dashboard:not(.kernel-view) .items-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Coluna DIREITA: arquivos, logs, dependências, etc. */
.module-dashboard:not(.kernel-view) .right-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Todos os cards ocupam 100% da coluna */
.module-dashboard:not(.kernel-view) .items-grid > *,
.module-dashboard:not(.kernel-view) .right-column > * {
  width: 100% !important;
}

/* Mobile: empilha tudo em uma coluna */
@media (max-width: 1100px) {
  .module-dashboard:not(.kernel-view) .items-section {
    grid-template-columns: 1fr !important;
  }
}
/* === Devon Stack v2 – FULL CARD ALIGN (módulos comuns) – 2025-12-02 */

/* TOPO: Status + Progresso (dois cards iguais lado a lado) */
.module-dashboard:not(.kernel-view) .module-overview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Todos os overview-cards ocupam totalmente a coluna */
.module-dashboard:not(.kernel-view) .module-overview .overview-card {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
}

/* CORPO: duas colunas iguais (esquerda = cards técnicos, direita = painéis) */
.module-dashboard:not(.kernel-view) .items-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: flex-start !important;
}

/* Coluna ESQUERDA – composição + itens */
.module-dashboard:not(.kernel-view) .items-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* Coluna DIREITA – arquivos, logs, dependências etc. */
.module-dashboard:not(.kernel-view) .right-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* TODOS os cards (topo e corpo) ocupam 100% da coluna e têm altura uniforme */
.module-dashboard:not(.kernel-view) .items-grid > *,
.module-dashboard:not(.kernel-view) .right-column > *,
.module-dashboard:not(.kernel-view) .items-grid .item-card,
.module-dashboard:not(.kernel-view) .right-column .panel {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
}

/* Mobile: empilha tudo em uma coluna */
@media (max-width: 1100px) {
  .module-dashboard:not(.kernel-view) .module-overview {
    grid-template-columns: 1fr !important;
  }
  .module-dashboard:not(.kernel-view) .items-section {
    grid-template-columns: 1fr !important;
  }
}
/* === Ajuste Donut – Módulos (exceto Kernel) – 2025-12-02 ======== */
/* Segundo card do topo (donut) vira card próprio: título, círculo, descrição */

.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Título acima do círculo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::before {
  content: "Conclusão do módulo";
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #fff);
  margin-bottom: 12px;
}

/* Wrapper do donut em coluna, centralizado */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2) .donut-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Só o número dentro do círculo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2) .donut-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2) .donut-label span {
  display: none !important;
}

/* Texto abaixo do círculo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::after {
  content: "Conclusão do módulo";
  font-size: 12px;
  color: var(--text-muted, #a0a7c0);
  margin-top: 10px;
}
/* === Devon – Donut title = nome real do módulo – 2025-12-02 ===== */

/* Substitui o título por conteúdo real do módulo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::before {
  content: attr(data-module-title) !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main, #fff);
  margin-bottom: 12px;
}

/* Data attribute gerado no HTML dinâmico (injeção via CSS) */
.module-dashboard:not(.kernel-view) {
  --module-name: "";
}

/* Pega o texto do H1 e injeta como atributo via CSS trick */
.module-dashboard:not(.kernel-view) h1 {
  counter-reset: module-name var(--module-name);
}

/* Bottom text continua “Conclusão do módulo” */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::after {
  content: "Conclusão do módulo";
  font-size: 12px;
  color: var(--text-muted, #a0a7c0);
  margin-top: 10px;
}
/* === Ajuste final donut – título único em cima =================== */

/* Título fixo acima do círculo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::before {
  content: "Conclusão do módulo" !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main, #fff);
  margin-bottom: 12px;
}

/* Remove texto de baixo do círculo */
.module-dashboard:not(.kernel-view) .module-overview > .overview-card:nth-child(2)::after {
  content: "" !important;
  margin-top: 0 !important;
}
/* === Portas no header (ao lado de STACK / LATÊNCIA) === */
.stack-chip-ports .chip-value {
  display: flex;
  gap: 6px;
}

.port-pill {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- PORTAS INDIVIDUAIS NO HEADER --- */
.ports-container {
  display: flex;
  gap: 8px;
}

.port-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
}

.port-ok {
  background: rgba(0,200,0,0.12);
  border-color: rgba(0,200,0,0.4);
  color: #00e673;
}

.port-missing {
  background: rgba(200,0,0,0.12);
  border-color: rgba(200,0,0,0.4);
  color: #ff5c5c;
}

.port-partial {
  background: rgba(200,150,0,0.12);
  border-color: rgba(200,150,0,0.4);
  color: #ffd966;
}


/* ==========================================================
   FIX LAYOUT SIDEBAR (menu truncado)
   - Aumenta largura mínima do menu
   - Garante espaço para label e status
   - Impede texto esmagado
   ========================================================== */

.sidebar {
  min-width: 240px !important;   /* antes era estreito demais */
  width: 240px !important;
}

.nav-item-left {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow: visible;
  white-space: nowrap;
}

.nav-item-text {
  display: flex;
  flex-direction: column;
  overflow: visible;
  white-space: nowrap;
}

.nav-item-label-main,
.nav-item-label-sub {
  overflow: visible;
  white-space: nowrap;
}

/* ==========================================================
   FIX STATUS BALL (bolinha das letras no menu)
   - Garante círculo visível atrás da letra
   - Não mexe em cores de status-* já existentes
   ========================================================== */

.status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-sizing: border-box;
}

/* ==========================================================
   RESTAURA STATUS BALL DINÂMICA (UI v0.1 STYLE)
   ========================================================== */

.status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  box-sizing: border-box;
  color: #fff;
  transition: background-color 0.3s ease;
}

/* DONE (verde) */
.status-ok {
  background: #00b050 !important;
}

/* PARTIAL (laranja) */
.status-partial {
  background: #ff8c00 !important;
}

/* MISSING (vermelho) */
.status-missing {
  background: #cc0000 !important;
}

/* ==========================================================
   P1 MENU — cores das bolinhas pelo status REAL
   (escopo: apenas sidebar)
   ========================================================== */

.sidebar .status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  box-sizing: border-box;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* DONE (verde) */
.sidebar .status-ball[data-status="ok"] {
  background: #00b050 !important;
}

/* PARTIAL (laranja) */
.sidebar .status-ball[data-status="partial"] {
  background: #ff8c00 !important;
}

/* MISSING (vermelho) */
.sidebar .status-ball[data-status="missing"] {
  background: #cc0000 !important;
}

/* ==========================================================
   FIX DEFINITIVO: garantir que as cores originais prevaleçam
   ========================================================== */

.status-ball {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* Verde */
.status-ball.status-ok {
  background-color: #22c55e !important;
}

/* Amarelo/Laranja */
.status-ball.status-partial {
  background-color: #ff8c00 !important;
}

/* Vermelho */
.status-ball.status-missing {
  background-color: #ef4444 !important;
}
/* ==========================================================
   RESTAURAÇÃO — BOLINHAS DO MENU (status-ball)
   ========================================================== */

.sidebar .status-ball {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 0 10px currentColor;
  transition: 0.2s ease-out;
}

/* DONE (verde) */
.sidebar .status-ball[data-status="ok"],
.sidebar .status-ball.status-ok {
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%);
  color: #22c55e;
}

/* PARTIAL (laranja) */
.sidebar .status-ball[data-status="partial"],
.sidebar .status-ball.status-partial {
  background: radial-gradient(circle, #fde68a 0, #f59e0b 40%, #78350f 100%);
  color: #f59e0b;
}

/* MISSING (vermelho) */
.sidebar .status-ball[data-status="missing"],
.sidebar .status-ball.status-missing {
  background: radial-gradient(circle, #fecaca 0, #ef4444 40%, #7f1d1d 100%);
  color: #ef4444;
}
/* ==========================================================
   OVERRIDE FINAL — cores reais das bolinhas do MENU
   (sempre vence qualquer definição anterior)
   ========================================================== */

.sidebar .status-ball[data-status="ok"],
.sidebar .status-ball.status-ok {
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%) !important;
  color: #22c55e !important;
}

.sidebar .status-ball[data-status="partial"],
.sidebar .status-ball.status-partial {
  background: radial-gradient(circle, #fef9c3 0, #eab308 40%, #78350f 100%) !important;
  color: #eab308 !important;
}

.sidebar .status-ball[data-status="missing"],
.sidebar .status-ball.status-missing {
  background: radial-gradient(circle, #fee2e2 0, #ef4444 35%, #7f1d1d 100%) !important;
  color: #ef4444 !important;
}

/* ==========================================================
   OVERRIDE SUPREMO — Sidebar (cores automáticas por status)
   ========================================================== */

.sidebar .status-ball {
  background: #000 !important; /* base neutra */
}

/* MISSING = vermelho */
.sidebar .status-ball[data-status="missing"],
.sidebar .status-ball.status-missing {
  background: radial-gradient(circle, #fee2e2 0, #ef4444 35%, #7f1d1d 100%) !important;
  color: #ef4444 !important;
}

/* PARTIAL = laranja */
.sidebar .status-ball[data-status="partial"],
.sidebar .status-ball.status-partial {
  background: radial-gradient(circle, #fef9c3 0, #eab308 40%, #78350f 100%) !important;
  color: #eab308 !important;
}

/* OK = verde */
.sidebar .status-ball[data-status="ok"],
.sidebar .status-ball.status-ok {
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%) !important;
  color: #22c55e !important;
}

/* ==========================================================
   FINAL — Sidebar status-ball (status em MAIÚSCULO)
   ========================================================== */

/* MISSING = vermelho */
.sidebar .status-ball[data-status="MISSING"],
.sidebar .status-ball.status-MISSING {
  background: radial-gradient(circle, #fee2e2 0, #ef4444 35%, #7f1d1d 100%) !important;
  color: #ef4444 !important;
}

/* PARTIAL = laranja */
.sidebar .status-ball[data-status="PARTIAL"],
.sidebar .status-ball.status-PARTIAL {
  background: radial-gradient(circle, #fef9c3 0, #eab308 40%, #78350f 100%) !important;
  color: #eab308 !important;
}

/* OK = verde (DONE) */
.sidebar .status-ball[data-status="OK"],
.sidebar .status-ball.status-OK {
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%) !important;
  color: #22c55e !important;
}
/* ==========================================================
   STATUS BALL – cores 100% opacas e sincronizadas com status
   ok (DONE)   -> verde
   partial     -> laranja
   missing     -> vermelho
   ========================================================== */

.status-ball {
  opacity: 1;              /* tira efeito "apagado" */
}

/* MISSING = vermelho */
.status-ball.status-missing {
  background-color: #dc2626;
  color: #ffffff;
}

/* PARTIAL = laranja/amarelo */
.status-ball.status-partial {
  background-color: #f97316;
  color: #111827;
}

/* DONE/OK = verde */
.status-ball.status-ok {
  background-color: #16a34a;
  color: #ffffff;
}

/* destaque leve no módulo ativo (opcional) */
.nav-item.active .status-ball {
  filter: brightness(1.1);
}
/* === FINAL STATUS BALL OVERRIDE – 2025-12-03 ===================
   Sidebar: cores 100% sincronizadas com o status real
   MISSING (vermelho) / PARTIAL (laranja) / DONE-OK (verde)
   =============================================================== */

.sidebar .nav-item .status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  box-sizing: border-box;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 8px rgba(15,23,42,0.8);
  background: #020617 !important; /* base neutra */
}

/* --------- MISSING = vermelho --------- */
.sidebar .nav-item .status-ball.status-missing,
.sidebar .nav-item .status-ball[data-status="missing"],
.sidebar .nav-item .status-ball[data-status="MISSING"] {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* --------- PARTIAL = laranja ---------- */
.sidebar .nav-item .status-ball.status-partial,
.sidebar .nav-item .status-ball[data-status="partial"],
.sidebar .nav-item .status-ball[data-status="PARTIAL"] {
  background: #f97316 !important;
  color: #111827 !important;
}

/* --------- DONE / OK = verde ---------- */
.sidebar .nav-item .status-ball.status-ok,
.sidebar .nav-item .status-ball[data-status="ok"],
.sidebar .nav-item .status-ball[data-status="OK"],
.sidebar .nav-item .status-ball[data-status="done"],
.sidebar .nav-item .status-ball[data-status="DONE"] {
  background: #22c55e !important;
  color: #ffffff !important;
}

/* Destaque leve no módulo ativo */
.sidebar .nav-item.active .status-ball {
  filter: brightness(1.1);
}
/* === Devon Stack v2 – STATUS BALL CLEAN OVERRIDE (2025-12-03) === */
/* Cores 100% opacas, sincronizadas com status, sem alterar layout */

.sidebar .status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 0 10px currentColor;
  opacity: 1;
}

/* MISSING = vermelho */
.sidebar .status-ball.status-missing,
.sidebar .status-ball[data-status="missing"],
.sidebar .status-ball[data-status="MISSING"] {
  background: radial-gradient(circle, #fee2e2 0, #ef4444 40%, #7f1d1d 100%);
  color: #fecaca;
}

/* PARTIAL = amarelo / laranja */
.sidebar .status-ball.status-partial,
.sidebar .status-ball[data-status="partial"],
.sidebar .status-ball[data-status="PARTIAL"] {
  background: radial-gradient(circle, #fef9c3 0, #eab308 40%, #78350f 100%);
  color: #fef3c7;
}

/* OK / DONE = verde */
.sidebar .status-ball.status-ok,
.sidebar .status-ball[data-status="ok"],
.sidebar .status-ball[data-status="OK"],
.sidebar .status-ball[data-status="done"],
.sidebar .status-ball[data-status="DONE"] {
  background: radial-gradient(circle, #bbf7d0 0, #22c55e 40%, #14532d 100%);
  color: #dcfce7;
}

/* === STATUS BALL RESET 2025-12-03 — Sidebar menu === */
/* Base da bolinha (K, F, I, ...), sem cor fixa */
.sidebar .status-ball {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  box-sizing: border-box;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 10px currentColor;
  background: #111827;
  opacity: 1;
}

/* ===== MISSING = vermelho ===== */
.sidebar .status-ball.status-missing,
.sidebar .status-ball[data-status="missing"],
.sidebar .status-ball[data-status="MISSING"] {
  background: #ef4444 !important;
  color: #fee2e2 !important;
}

/* ===== PARTIAL = amarelo/laranja ===== */
.sidebar .status-ball.status-partial,
.sidebar .status-ball[data-status="partial"],
.sidebar .status-ball[data-status="PARTIAL"] {
  background: #eab308 !important;
  color: #0b1120 !important;
}

/* ===== OK/DONE = verde ===== */
.sidebar .status-ball.status-ok,
.sidebar .status-ball.status-done,
.sidebar .status-ball[data-status="ok"],
.sidebar .status-ball[data-status="OK"],
.sidebar .status-ball[data-status="done"],
.sidebar .status-ball[data-status="DONE"] {
  background: #22c55e !important;
  color: #ecfdf5 !important;
}

/* Leve destaque no módulo ativo */
.nav-item.active .status-ball {
  filter: brightness(1.1);
}
/* FIX 2025-12-05 – Logs recentes: scroll interno no card */
.module-dashboard .panel .logs-console {
  max-height: 190px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Scroll universal para TODOS os painéis de logs */
.panel .dependencies-list,
.panel .logs-list,
.panel .logs-body,
.panel .logs-wrapper,
.panel pre {
    max-height: 260px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* ===== FastAPI Integrations Card – 2025-12-08 ===== */
.module-fastapi-wrapper {
  margin-top: 16px;
}

.module-fastapi-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.fastapi-row {
  display: grid;
  grid-template-columns: 2.2fr 2fr auto;
  align-items: center;
  font-size: 12px;
}

.fastapi-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity: 0.9;
}

.fastapi-label {
  opacity: 0.8;
}

.fastapi-status {
  justify-self: flex-end;
  font-weight: 600;
}

.fastapi-status-done {
  color: #22c55e;
}

.fastapi-status-partial {
  color: #f97316;
}

.fastapi-status-missing {
  color: #ef4444;
}


/* ===== FastAPI Integrations Panel ===== */
.fastapi-integrations-panel {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--bg-panel);
  border-radius: 24px;
  border: 1px solid var(--border-soft);
}

.fastapi-panel-header {
  margin-bottom: 16px;
}

.fastapi-panel-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e5e7eb;
}

.fastapi-panel-subtitle {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-top: 4px;
}

.fastapi-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.fastapi-module-card {
  background: var(--bg-panel-soft);
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
}

.fastapi-module-card h3 {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #f9fafb;
}

.fastapi-routes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fastapi-route-item {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(55,65,81,0.9);
}

.fastapi-route-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.fastapi-method {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #10b981;
  color: #022c22;
  text-transform: uppercase;
}

.fastapi-path {
  font-size: 0.8rem;
  color: #e5e7eb;
}

.fastapi-desc {
  font-size: 0.78rem;
  color: #9ca3af;
}

.fastapi-module-empty,
.fastapi-empty-global {
  font-size: 0.8rem;
  color: #9ca3af;
}


/* ---- Lista de rotas FastAPI por módulo ---- */
.fastapi-routes-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.fastapi-method {
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 6px;
}

.fastapi-path {
  font-family: monospace;
}

.fastapi-desc {
  opacity: 0.75;
}
/* PATCH 2025-12-09 – Layout da coluna direita do Kernel + FastAPI card */
.kernel-view .right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: flex-start;
  max-width: 380px;
}

.kernel-view .right-column .panel {
  width: 100%;
}

/* Painel "FastAPI endpoints por módulo" no Kernel */
.kernel-fastapi-card {
  max-height: 280px;
  overflow-y: auto;
}
/* PATCH – FastAPI panel layout fix */
.kernel-fastapi-card {
  position: relative;
  width: 100%;
  max-width: 380px;

  /* card real */
  background: var(--surface-2);
  border-radius: 12px;
  padding: 20px;

  /* scroll interno */
  max-height: 320px;
  overflow-y: auto;

  /* sombra igual aos outros cards */
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

/* garantir que as seções dentro dele fiquem organizadas */
.kernel-fastapi-card .fastapi-section {
  margin-bottom: 16px;
}

.kernel-fastapi-card h4 {
  margin: 0 0 6px 0;
  font-size: 15px;
  color: var(--text-normal);
}

.kernel-fastapi-card ul {
  margin: 0;
  padding-left: 12px;
}

.kernel-fastapi-card li {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.3;
}
.kernel-view .right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 380px;
  width: 380px;
}

/* ===== Kernel – FastAPI endpoints por módulo (card com scroll) ===== */
.fastapi-kernel-scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 8px;
}

.fastapi-section {
  margin-bottom: 12px;
}

.fastapi-section h4 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

/* ===== Kernel – FastAPI endpoints por módulo (card fix) ===== */
.kernel-fastapi-card {
  max-height: 260px;
  overflow-y: auto;
}

.kernel-fastapi-card .dependencies-list {
  display: block;
  padding-right: 8px;
}

.kernel-fastapi-card .fastapi-section {
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.kernel-fastapi-card .fastapi-section:last-child {
  border-bottom: none;
}

/* PATCH 2025-12-10 – Scroll seguro para cards com conteúdo longo (FastAPI, etc.) */
.kernel-card-content {
  overflow-x: auto;
}

/* === Kernel – FastAPI endpoints card (altura fixa + scroll) === */
.panel.kernel-fastapi-card {
  display: flex;
  flex-direction: column;
  max-height: 260px; /* mesma ideia do card de Logs recentes */
}

.panel.kernel-fastapi-card .panel-header {
  flex: 0 0 auto;
}

.panel.kernel-fastapi-card .dependencies-list {
  margin-top: 12px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 8px; /* espaço pro scroll interno */
}

/* espaçamento entre blocos de módulo dentro do card FastAPI */
.panel.kernel-fastapi-card .fastapi-section + .fastapi-section {
  margin-top: 10px;
}

.panel.kernel-fastapi-card .fastapi-section h4 {
  margin-bottom: 4px;
}
/* PATCH 2025-12-10 – Kernel FastAPI card: mesmo comportamento do card de Logs */
.panel.kernel-fastapi-card {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow: hidden;
}

/* Conteúdo longo rola dentro do card, não estoura a coluna */
.panel.kernel-fastapi-card .dependencies-list {
  flex: 1 1 auto;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px;
  box-sizing: border-box;
}
/* PATCH 2025-12-10 – Scroll do FastAPI igual ao "Logs recentes" */
.panel.kernel-fastapi-card .dependencies-list::-webkit-scrollbar {
  width: 6px;
}

.panel.kernel-fastapi-card .dependencies-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}
/* PATCH 2025-12-10 – Organização do card "FastAPI endpoints por módulo" */
.panel.kernel-fastapi-card {
  font-size: 11px;
}

/* título de cada módulo (voice, fastapi_core, infra...) */
.panel.kernel-fastapi-card .fastapi-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 6px 0 4px;
}

/* lista de endpoints dentro do card */
.panel.kernel-fastapi-card .dependencies-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* cada linha de endpoint vira um “chip” legível */
.panel.kernel-fastapi-card .dependencies-list li {
  margin-bottom: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(55,65,81,0.9);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* PATCH 2025-12-10 – Esconder FastAPI endpoints em módulos MISSING */
.module-dashboard:not(.kernel-view):has(.module-badge.badge-missing) .panel:has(.module-fastapi-wrapper) {
  display: none;
}

/* PATCH 2025-12-10 – FastAPI OFF quando módulo estiver MISSING */
.module-dashboard:not(.kernel-view) .module-badge.badge-missing ~ .items-section .panel.fastapi-panel,
.module-dashboard:not(.kernel-view) .module-badge.badge-missing ~ .items-section .panel.kernel-fastapi-card,
.module-dashboard:not(.kernel-view) .module-badge.badge-missing ~ .items-section .panel:has(.module-fastapi-wrapper)
{
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* Mensagem padrão para módulos sem router */
.fastapi-empty-off {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.8;
}

/* PATCH 2025-12-10 – FastAPI OFF para módulos MISSING */
.panel.fastapi-off {
  opacity: 0.45;
}

.fastapi-empty-off {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}