/*
===============================================================================
  GENESIS VISION COMMAND CENTER (GVCC) - HUD avançado em tela cheia
===============================================================================
  Painel de controle estilo "command center" com toggles modulares,
  métricas em tempo real e seletor de modo de performance.
  Classes isoladas com prefix .gvcc-*
  Mantém identidade HUD: glassmorphism, glow neon, linhas finas, scanlines.
*/

/* ==========================================================================
   BOTÃO NO HEADER DA CÂMERA - toggle do Vision Command
   ========================================================================== */
.gct-btn.gvcc-header-btn{
  /* herda visual de .gct-btn */
}
/* Estado: painel expandido (visível inteiro) */
.gct-btn.gvcc-header-btn.gvcc-header-active{
  background: rgba(0, 240, 255, .35);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, .6);
}
/* Estado: painel minimizado (só ícones) - cor laranja */
.gct-btn.gvcc-header-btn.gvcc-header-mini{
  background: rgba(255, 170, 0, .35);
  border-color: #fa0;
  color: #fa0;
  box-shadow: 0 0 10px rgba(255, 170, 0, .6);
}


/* Botão close do painel - hover vermelho */
.gvcc-btn-icon.gvcc-close:hover{
  background: rgba(255, 0, 85, .25);
  border-color: #f05;
  color: #fff;
  box-shadow: 0 0 8px #f05;
}


/* ==========================================================================
   PAINEL PRINCIPAL - lateral direito flutuante
   Visível apenas com body.camera-maximized
   ========================================================================== */
.gvcc-panel{
  display: none;
  position: fixed;
  top: 70px;
  right: 16px;
  bottom: 16px;
  width: 280px;
  z-index: 250;
  background: linear-gradient(180deg, rgba(0, 10, 25, 0.92), rgba(0, 20, 45, 0.88));
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.25),
              0 0 0 1px rgba(0, 240, 255, 0.18),
              inset 0 1px 0 rgba(0, 240, 255, 0.15);
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  color: #e0f7ff;
  flex-direction: column;
  overflow: hidden;
  animation: gvccIn 0.4s cubic-bezier(.4,0,.2,1);
}
body.camera-maximized .gvcc-panel{ display: flex; }
/* Estado MINIMIZADO: apenas a barra superior (header) fica visível,
   o corpo todo (toggles, métricas, modos) é ocultado */
.gvcc-panel.gvcc-collapsed{
  bottom: auto;       /* não estica até o fim - altura do header apenas */
  height: auto;
  /* largura original mantida para manter o título legível */
}
.gvcc-panel.gvcc-collapsed .gvcc-body{
  display: none;
}
/* Inverte o chevron quando minimizado (aponta para cima/expansão) */
.gvcc-panel.gvcc-collapsed [data-act="collapse"] svg{
  transform: rotate(180deg);
}
@keyframes gvccIn{
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scanlines decorativas no painel inteiro */
.gvcc-panel::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 240, 255, 0.018) 0,
    rgba(0, 240, 255, 0.018) 1px,
    transparent 1px, transparent 4px
  );
  animation: gvccScan 6s linear infinite;
}
@keyframes gvccScan{
  to { background-position: 0 60px; }
}

/* ==========================================================================
   HEADER do painel
   ========================================================================== */
.gvcc-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.18), rgba(0, 240, 255, 0.06));
  border-bottom: 1px solid rgba(0, 240, 255, 0.35);
  flex-shrink: 0;
  z-index: 1;
  cursor: move;                /* alça de arraste */
  user-select: none;
  -webkit-user-select: none;
}
.gvcc-header:active{ cursor: grabbing; }
.gvcc-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}
.gvcc-title-icon{
  width: 14px; height: 14px;
  border: 1.5px solid #00f0ff;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 6px #00f0ff;
}
.gvcc-title-icon::after{
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(0, 240, 255, 0.6);
  border-radius: 50%;
  animation: gvccTitleIcon 2.5s linear infinite;
}
@keyframes gvccTitleIcon{
  to { transform: rotate(360deg); }
}
.gvcc-actions{ display: flex; gap: 4px; }
.gvcc-btn-icon{
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  transition: .2s;
}
.gvcc-btn-icon:hover{
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 8px #00f0ff;
}


/* ==========================================================================
   BODY do painel (scroll)
   ========================================================================== */
.gvcc-body{
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 12px;
  position: relative;
  z-index: 1;
}
.gvcc-body::-webkit-scrollbar{ width: 4px; }
.gvcc-body::-webkit-scrollbar-thumb{ background: rgba(0, 240, 255, 0.35); border-radius: 2px; }


/* ==========================================================================
   SEÇÕES E TÍTULOS
   ========================================================================== */
.gvcc-section{
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}
.gvcc-section:last-child{ border-bottom: none; margin-bottom: 0; }

.gvcc-section-title{
  font-size: 9px;
  letter-spacing: 2.5px;
  color: rgba(0, 240, 255, 0.75);
  margin-bottom: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gvcc-section-title::before{
  content: '';
  width: 6px; height: 6px;
  background: #00f0ff;
  border-radius: 50%;
  box-shadow: 0 0 4px #00f0ff;
}


/* ==========================================================================
   GRID DE TOGGLES (módulos)
   ========================================================================== */
.gvcc-toggle-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.gvcc-toggle{
  position: relative;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 8px;
  padding: 8px 4px 6px;
  cursor: pointer;
  transition: .25s;
  color: rgba(0, 240, 255, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}
.gvcc-toggle:hover{
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.4);
}
.gvcc-toggle-icon{
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .25s;
}
.gvcc-toggle-icon svg{
  width: 100%; height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gvcc-toggle-label{
  font-weight: 600;
  font-size: 9px;
}

/* Estado: ATIVO - glow neon + animação leve */
.gvcc-toggle.gvcc-active{
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5),
              inset 0 0 8px rgba(0, 240, 255, 0.15);
}
.gvcc-toggle.gvcc-active .gvcc-toggle-icon{
  filter: drop-shadow(0 0 4px #00f0ff);
  animation: gvccIconPulse 2s ease-in-out infinite;
}
@keyframes gvccIconPulse{
  50% { transform: scale(1.08); }
}
.gvcc-toggle.gvcc-active::before{
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  background: #0f8;
  border-radius: 50%;
  box-shadow: 0 0 4px #0f8;
  animation: gvccDotBlink 1.5s infinite;
}
@keyframes gvccDotBlink{
  50% { opacity: 0.4; }
}

/* Estado: CARREGANDO - spinner circular */
.gvcc-toggle.gvcc-loading{
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.4);
  color: rgba(0, 240, 255, 0.85);
}
.gvcc-toggle.gvcc-loading .gvcc-toggle-icon::after{
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid rgba(0, 240, 255, 0.2);
  border-top-color: #00f0ff;
  border-radius: 50%;
  animation: gvccSpin 0.8s linear infinite;
}
@keyframes gvccSpin{
  to { transform: rotate(360deg); }
}

/* Estado: ERRO - borda vermelha sutil */
.gvcc-toggle.gvcc-error{
  background: rgba(255, 0, 85, 0.08);
  border-color: rgba(255, 0, 85, 0.55);
  color: #f88;
}
.gvcc-toggle.gvcc-error::before{
  content: '!';
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px;
  font-weight: 900;
  color: #f05;
  text-shadow: 0 0 4px #f05;
}

/* Estado: ALTO CONSUMO - alerta amarelo */
.gvcc-toggle.gvcc-warn::before{
  content: '⚠';
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px;
  color: #fa0;
  text-shadow: 0 0 4px #fa0;
}


/* ==========================================================================
   PAINEL DE MÉTRICAS - cards pequenos translúcidos
   ========================================================================== */
.gvcc-metrics{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.gvcc-metric-card{
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: .25s;
  position: relative;
  overflow: hidden;
}
.gvcc-metric-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
}
.gvcc-metric-label{
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(0, 240, 255, 0.7);
  font-family: 'Orbitron';
}
.gvcc-metric-value{
  font-size: 14px;
  font-weight: 900;
  color: #00f0ff;
  font-family: 'Orbitron';
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.gvcc-metric-value.gvcc-warn{ color: #fa0; text-shadow: 0 0 4px rgba(255,170,0,0.5); }
.gvcc-metric-value.gvcc-danger{ color: #f05; text-shadow: 0 0 4px rgba(255,0,85,0.5); }


/* ==========================================================================
   SELETOR DE MODO DE PERFORMANCE
   ========================================================================== */
.gvcc-perf-modes{
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 3px;
}
.gvcc-perf-btn{
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(0, 240, 255, 0.6);
  cursor: pointer;
  font-family: 'Orbitron';
  font-size: 9px;
  letter-spacing: 1px;
  padding: 6px 4px;
  border-radius: 5px;
  transition: .2s;
}
.gvcc-perf-btn:hover{ color: #00f0ff; }
.gvcc-perf-btn.gvcc-active{
  background: rgba(0, 240, 255, 0.18);
  color: #00f0ff;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}


/* ==========================================================================
   OVERLAY DE DETECÇÕES (canvas sobre o vídeo)
   Bounding boxes com borda neon + linhas conectando ao painel
   ========================================================================== */
.gvcc-detect-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 180;
  display: none;
}
body.camera-maximized .gvcc-detect-overlay{ display: block; }
.gvcc-detect-overlay canvas{
  width: 100%;
  height: 100%;
  display: block;
}


/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
body.light-theme .gvcc-panel{
  background: linear-gradient(180deg, rgba(238, 242, 246, 0.97), rgba(221, 228, 235, 0.94));
  border-color: rgba(0, 136, 200, 0.45);
  color: #18222f;
  box-shadow: 0 12px 40px rgba(0, 136, 200, 0.25);
}
body.light-theme .gvcc-title{ color: #004870; }
body.light-theme .gvcc-toggle{ background: rgba(0, 168, 222, 0.04); border-color: rgba(0, 136, 200, 0.2); }
body.light-theme .gvcc-toggle.gvcc-active{
  background: rgba(0, 168, 222, 0.18);
  border-color: #0088c8;
  color: #0088c8;
}
body.light-theme .gvcc-metric-value{ color: #0088c8; }
body.light-theme .gvcc-perf-btn.gvcc-active{ background: rgba(0, 168, 222, 0.18); color: #0088c8; }


@media (max-width: 768px){
  .gvcc-panel{ width: 240px; }
  .gvcc-toggle-list{ grid-template-columns: repeat(3, 1fr); }
}