/* ═══════════════════════════════════════════════════════════════════════════════
   COCKPIT FLUIDO (14/09/2026) — o HUD cabe em QUALQUER tela sem escala por JS.

   Antes: grade fixa (280px / 1fr / 280px), painéis com max-height em vh e overflow hidden, linha de baixo com
   altura mínima em px, e um "auto-ajuste" em JS que encolhia o painel inteiro como uma imagem (quebrava em
   notebook, em 125 % de escala do Windows, ao redimensionar, e uma medição 0x0 apagava o cockpit).
   Agora: colunas, alturas, anéis, paddings e fontes em unidades de tela (vw/vh + clamp). A grade é sempre
   100 % da janela; a linha de baixo tem altura proporcional; os painéis laterais compactam por vh e, no limite,
   rolam por dentro. Carregada DEPOIS de style.css/agenda.css → vence os !important antigos por ordem.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --hud-col: clamp(186px, 14.6vw, 292px);
  --hud-gap: clamp(6px, 0.8vw, 12px);
  --hud-bottom-h: clamp(150px, 28vh, 310px);
  --hud-widget-pad: clamp(3px, 0.75vh, 8px);
  --hud-section-gap: clamp(4px, 1.1vh, 12px);
  --hud-ring: clamp(34px, 5vh, 52px);
  --hud-fs-title: clamp(6.5px, 0.78vh, 8px);
  --hud-fs-value: clamp(10px, 1.25vh, 13px);
  --hud-fs-label: clamp(6px, 0.66vh, 7px);
  --hud-fs-sub: clamp(6px, 0.7vh, 7.5px);
}

/* ── grade raiz ── */
#tab-principal .cockpit-iron {
  position: relative !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  height: 100% !important; max-height: 100% !important; min-height: 0 !important;
  flex: 1 1 auto !important; transform: none !important; zoom: 1 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: var(--hud-col) minmax(0, 1fr) var(--hud-col) !important;
  grid-template-rows: minmax(0, 1fr) var(--hud-bottom-h) !important;
  grid-template-areas: "left orb right" "bottom bottom bottom" !important;
  padding: clamp(8px, 1.6vh, 26px) clamp(8px, 0.8vw, 16px) clamp(8px, 1.2vh, 18px) !important;
  gap: var(--hud-gap) !important;
  overflow: hidden !important;
}
#tab-principal .cockpit-iron > * { min-width: 0; min-height: 0; }

/* ── painéis laterais: altura = a linha da grade; compactam por vh; no limite rolam por dentro ── */
#tab-principal .cockpit-iron .hud-panel {
  max-height: 100% !important; min-height: 0 !important; height: auto !important; align-self: stretch !important;
  overflow-y: auto !important; overflow-x: hidden !important; min-width: 0 !important;
  padding: clamp(6px, 1.1vh, 12px) clamp(6px, 0.5vw, 10px) !important;
  gap: var(--hud-section-gap) !important;
  scrollbar-width: thin;
}
#tab-principal .hud-panel .hud-section { padding: 0 clamp(4px, 0.6vw, 16px) !important; gap: var(--hud-section-gap) !important; }
#tab-principal .hud-panel .hud-section + .hud-section { margin-top: clamp(6px, 1.4vh, 20px) !important; }
#tab-principal .hud-section + .hud-section::before { margin: clamp(2px, 0.6vh, 8px) 0 !important; }
#tab-principal .hud-section-title { font-size: var(--hud-fs-title) !important; padding: clamp(3px, 0.5vh, 6px) clamp(6px, 0.6vw, 14px) clamp(4px, 0.9vh, 10px) !important; margin-bottom: clamp(1px, 0.4vh, 4px) !important; }

/* esquerda: widgets */
#tab-principal .hud-left .hud-widget { padding: var(--hud-widget-pad) clamp(6px, 0.5vw, 10px) !important; gap: clamp(5px, 0.5vw, 8px) !important; }
#tab-principal .hud-widget-gauge { padding: var(--hud-widget-pad) clamp(6px, 0.5vw, 10px) var(--hud-widget-pad) clamp(8px, 0.7vw, 14px) !important; gap: clamp(6px, 0.6vw, 10px) !important; }
#tab-principal .gauge-ring, #tab-principal .gauge { width: var(--hud-ring) !important; height: var(--hud-ring) !important; }
#tab-principal .hud-left .widget-value { font-size: var(--hud-fs-value) !important; }
#tab-principal .widget-label { font-size: var(--hud-fs-label) !important; margin-bottom: clamp(1px, 0.2vh, 2px) !important; }
#tab-principal .hud-left .widget-sub { font-size: var(--hud-fs-sub) !important; }
#tab-principal .gauge-value, #tab-principal .gauge-pct { font-size: clamp(8px, 1vh, 11px) !important; }
#tab-principal .hud-widget-net { padding: var(--hud-widget-pad) clamp(6px, 0.5vw, 10px) !important; gap: clamp(3px, 0.5vh, 6px) !important; }
#tab-principal .hud-widget-mini { padding: clamp(3px, 0.55vh, 6px) clamp(6px, 0.5vw, 10px) !important; }

/* direita: modelos + esquadrão (grade que se refaz pela largura da coluna) */
#tab-principal .hud-right .entity-list:not(.aiox-squad-grid) .entity-row { padding: clamp(2px, 0.4vh, 4px) 6px !important; font-size: clamp(7px, 0.85vh, 9px) !important; }
#tab-principal .aiox-squad-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(36px, 2.4vw, 48px), 1fr)) !important; gap: clamp(2px, 0.3vw, 3px) !important; }
#tab-principal .aiox-agent { padding: clamp(2px, 0.4vh, 4px) 1px clamp(2px, 0.35vh, 3px) !important; }
#tab-principal .aiox-agent svg, #tab-principal .aiox-agent img { width: clamp(11px, 1.7vh, 18px) !important; height: clamp(11px, 1.7vh, 18px) !important; }
#tab-principal .aiox-agent > span, #tab-principal .aiox-agent > div { font-size: clamp(5.5px, 0.7vh, 7.5px) !important; line-height: 1.15 !important; }

/* ── linha de baixo: altura proporcional; cards nunca estouram ── */
#tab-principal .hud-bottom { min-height: 0 !important; height: 100% !important; max-height: 100% !important; gap: var(--hud-gap) !important; align-items: stretch !important; }
#tab-principal .hud-bottom-card { min-height: 0 !important; height: 100% !important; max-height: 100% !important; overflow: hidden !important; box-sizing: border-box !important; padding: clamp(6px, 1.1vh, 14px) clamp(8px, 0.7vw, 16px) !important; gap: clamp(3px, 0.6vh, 6px) !important; }
#tab-principal .conclave-gauges { gap: clamp(6px, 0.8vw, 16px) !important; margin: clamp(2px, 0.5vh, 8px) 0 !important; }
#tab-principal .conclave-gauge { padding: clamp(3px, 0.6vh, 8px) clamp(6px, 0.7vw, 12px) !important; gap: clamp(2px, 0.4vh, 5px) !important; }
#tab-principal .cg-ring { width: var(--hud-ring) !important; height: var(--hud-ring) !important; }
#tab-principal .cg-label { font-size: clamp(6px, 0.7vh, 8px) !important; }
#tab-principal .kg-mini { height: clamp(26px, 4.6vh, 50px) !important; margin: clamp(2px, 0.4vh, 4px) 0 !important; }
#tab-principal .brain-mini-icon { width: clamp(22px, 3vh, 32px) !important; height: clamp(22px, 3vh, 32px) !important; }
#tab-principal .obsidian-details .obs-detail { padding: clamp(2px, 0.4vh, 5px) 6px !important; font-size: clamp(7px, 0.85vh, 9px) !important; }
#tab-principal .hud-bottom .hud-ingest-btn { padding: clamp(4px, 0.7vh, 8px) 10px !important; margin-top: clamp(2px, 0.4vh, 4px) !important; }
#tab-principal .hud-bottom .metric-item { padding: clamp(2px, 0.5vh, 6px) 4px !important; }
#tab-principal .hud-bottom .metric-value { font-size: clamp(9px, 1.1vh, 12px) !important; }
#tab-principal .hud-bottom .metric-label { font-size: clamp(5px, 0.6vh, 6.5px) !important; }
#tab-principal .metric-voice-mic .mic-fab { width: clamp(28px, 4vh, 44px) !important; height: clamp(28px, 4vh, 44px) !important; }
#tab-principal .metric-voice-mic .mic-fab svg { width: clamp(11px, 1.6vh, 16px) !important; height: clamp(11px, 1.6vh, 16px) !important; }
#tab-principal .hud-bottom .hud-qbtn { padding: clamp(3px, 0.6vh, 6px) 4px !important; font-size: clamp(5.5px, 0.65vh, 7px) !important; }
#tab-principal .hud-bottom .hud-qbtn svg { width: clamp(9px, 1.2vh, 12px) !important; height: clamp(9px, 1.2vh, 12px) !important; }

/* card agenda */
#tab-principal .hud-agenda { gap: clamp(2px, 0.4vh, 4px) !important; }
#tab-principal .hud-agenda-ring { width: clamp(28px, 3.9vh, 42px) !important; height: clamp(28px, 3.9vh, 42px) !important; font-size: clamp(7px, 0.85vh, 9px) !important; }
#tab-principal .hud-agenda-next { padding: clamp(3px, 0.5vh, 5px) 8px !important; gap: clamp(6px, 0.6vw, 10px) !important; }
#tab-principal .hud-agenda-next-title { font-size: clamp(10px, 1.15vh, 12px) !important; }
#tab-principal .hud-agenda-next-sub, #tab-principal .hud-agenda-row { font-size: clamp(8px, 0.9vh, 9.5px) !important; }
#tab-principal .hud-agenda-pend { font-size: clamp(7px, 0.85vh, 9px) !important; }
#tab-principal .hud-agenda-open { padding: clamp(2px, 0.4vh, 4px) 8px !important; font-size: clamp(6.5px, 0.75vh, 8px) !important; }

/* ── centro: esfera proporcional à altura livre (nunca maior que a área do centro) ── */
#tab-principal .cockpit-iron .avatar-container { width: min(46vw, calc((100vh - var(--nav-h)) * 0.6)) !important; height: min(46vw, calc((100vh - var(--nav-h)) * 0.6)) !important; }
#tab-principal .orb-ring-1 { width: min(40vh, 40vw) !important; height: min(40vh, 40vw) !important; }
#tab-principal .orb-ring-2 { width: min(46vh, 46vw) !important; height: min(46vh, 46vw) !important; }
#tab-principal .orb-ring-3 { width: min(52vh, 52vw) !important; height: min(52vh, 52vw) !important; }

/* ── telas baixas: prioridade — o que é secundário some antes de qualquer coisa rolar ── */
@media (max-height: 900px) {
  #tab-principal .hud-agenda-list .hud-agenda-row:nth-child(n+2) { display: none !important; }   /* 1 linha só */
}
/* notebooks 1366x768 (medido: sobravam 59px à esquerda e 24px à direita) */
@media (max-height: 820px) {
  #tab-principal #widget-network { display: none !important; }
  #tab-principal .hud-panel .hud-section + .hud-section { margin-top: clamp(4px, 0.8vh, 8px) !important; }
  #tab-principal .hud-section + .hud-section::before { display: none !important; }
  #tab-principal .aiox-squad-grid { gap: 2px !important; }
  #tab-principal .aiox-agent { padding: 2px 1px 1px !important; }
  #tab-principal .hud-right .entity-list:not(.aiox-squad-grid) .entity-row { padding: 2px 5px !important; }
}
@media (max-height: 760px) {
  #tab-principal .hud-agenda-list { display: none !important; }
}
/* 1280x720 (medido: 25px à esquerda, 103px à direita → esquadrão em 5 colunas e sem o clima) */
@media (max-height: 740px) {
  #tab-principal #widget-weather { display: none !important; }
  #tab-principal .aiox-squad-grid { grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)) !important; }
  #tab-principal .aiox-agent > span, #tab-principal .aiox-agent > div { font-size: 5px !important; }
  #tab-principal .aiox-agent svg, #tab-principal .aiox-agent img { width: 10px !important; height: 10px !important; }
  #tab-principal .hud-left .hud-widget, #tab-principal .hud-widget-gauge { padding-top: 2px !important; padding-bottom: 2px !important; }
}
/* ── telas estreitas: colunas laterais menores; muito estreitas (< 1100px) → só centro + linha de baixo ── */
@media (max-width: 1280px) { :root { --hud-col: clamp(168px, 13.5vw, 220px); } }
@media (max-width: 1100px) {
  #tab-principal .cockpit-iron { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "orb" "bottom" !important; }
  #tab-principal .hud-left, #tab-principal .hud-right { display: none !important; }
  #tab-principal .hud-bottom { flex-wrap: wrap !important; }
  #tab-principal .hud-bottom-card { min-width: 220px !important; }
}