/* ═══════════════════════════════════════════════════════════════════════════════
   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;
}
/* Cabeçalhos laterais com controles de recolhimento */
#tab-principal .hud-section-title.hud-panel-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.hud-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0,228,255,.28);
  border-radius: 5px;
  background: rgba(0,228,255,.07);
  color: #9fe8ff;
  font: 700 20px/1 sans-serif;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.hud-panel-toggle:hover,
.hud-panel-toggle:focus-visible {
  background: rgba(0,228,255,.2);
  border-color: #00e4ff;
  color: #fff;
  outline: 2px solid rgba(0,228,255,.35);
  outline-offset: 2px;
}

/* SYSTEMS / AI MODELS recolhidos em trilhos laterais reabertos pelo botão */
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left {
  --hud-left-col: 42px;
  grid-template-columns: var(--hud-left-col) minmax(0,1fr) var(--hud-col) !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right {
  --hud-right-col: 42px;
  grid-template-columns: var(--hud-col) minmax(0,1fr) var(--hud-right-col) !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left.hud-side-panels-collapsed-right {
  grid-template-columns: 42px minmax(0,1fr) 42px !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left,
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right {
  overflow: hidden !important;
  padding: 5px 3px !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left .hud-section,
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right .hud-section {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left .hud-section > :not(.hud-panel-title),
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right .hud-section > :not(.hud-panel-title),
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left .hud-section-title > span,
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right .hud-section-title > span {
  display: none !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left .hud-panel-title,
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right .hud-panel-title {
  justify-content: center !important;
  min-height: 42px;
  padding: 0 !important;
  border-bottom: 0 !important;
  letter-spacing: 0 !important;
}
#tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-panel-toggle,
#tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-panel-toggle {
  width: 30px;
  height: 32px;
  font-size: 24px;
}
#tab-principal .hud-panel,
#tab-principal .hud-panel .hud-section,
#tab-principal .hud-panel-title,
#tab-principal .hud-panel-toggle {
  transition: width .24s ease, padding .24s ease, background .18s ease, border-color .18s ease;
}
#tab-principal .cockpit-iron { transition: grid-template-columns .24s ease; }

#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.hud-side-panels-collapsed-left,
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-right,
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-left.hud-side-panels-collapsed-right {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #tab-principal .cockpit-iron:not(.hud-side-panels-collapsed-left):not(.hud-side-panels-collapsed-right) { grid-template-areas: "orb" "bottom" !important; }
  #tab-principal .hud-left, #tab-principal .hud-right { display: none !important; }
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left,
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right {
    position: absolute !important;
    top: 8px;
    bottom: calc(var(--hud-bottom-h) + 8px);
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: auto !important;
    display: flex !important;
    z-index: 30;
  }
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-left .hud-left { left: 8px; right: auto; }
  #tab-principal .cockpit-iron.hud-side-panels-collapsed-right .hud-right { right: 8px; left: auto; }
  #tab-principal .hud-bottom { flex-wrap: wrap !important; }
  #tab-principal .hud-bottom-card { min-width: 220px !important; }
}