/* ============================================================
   Fan Selector - Estilos das Abas de Graficos e Botoes de Acao
   ============================================================ */

/* Abas: definidas em assets/css/tabs.css (Sub-fase 1.5c) */

/* ── Botoes de acao flutuantes (ponto de operacao) ───────── */
.page-action-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 900;
}

.action-btn {
  background: var(--color-brand-blue) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition-base) !important;
  white-space: nowrap;
  color: var(--color-white) !important;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-white) !important;
}

/* Ação secundária do FAB — azul escuro da paleta (tom mais sóbrio no cluster) */
.action-btn--secondary {
  background: var(--color-brand-dark) !important;
}

/* AG-Grid: migrado para assets/css/aggrid.css (Sub-fase 1.6a) */

/* ── Formulario labels modernos ──────────────────────────── */
.form-label-modern {
  display: block;
  margin-bottom: 4px;
}

/* ── Responsividade pagina principal ─────────────────────── */
@media (max-width: 768px) {
  .page-action-buttons {
    bottom: 16px;
    right: 16px;
  }

  .action-btn {
    font-size: 11px !important;
    padding: 7px 12px !important;
  }

  .react-tabs__tab {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ── Espaço de segurança abaixo dos FABs (mobile/tablet) ─── */
/* Os FABs são fixed bottom-right; sem este padding o último card
   da página fica parcialmente oculto atrás deles ao rolar até o fim. */
@media (max-width: 991.98px) {
  .page-ponto-operacao {
    padding-bottom: 120px;
  }
}