/* ============================================================
   Fan Selector - Graficos Responsivos
   Estrategia mobile-first para graficos Plotly:
     - Em telas >= 480px: grafico visivel, botao mobile oculto
     - Em telas < 480px:  grafico oculto, botao "Ver grafico" visivel
     - Modal fullscreen abre via callback expandir-btn (ja existente)
     - Aviso de rotacao aparece em portrait < 768px
   ============================================================ */

/* ── Controle de visibilidade por breakpoint ─────────────────── */

/* Botao desktop (Expandir): visivel em >= 480px, oculto em < 480px */
.graph-btn-desktop {
  display: inline-flex !important;
}

/* Botao mobile (Ver grafico): oculto por padrao */
.graph-btn-mobile {
  display: none !important;
}

/* Grafico: visivel por padrao */
.graph-hide-xs {
  display: block;
}

/* Container que envolve o botao mobile — oculto por padrao */
.graph-show-xs {
  display: none !important;
}

/* ── Em telas muito pequenas (< 480px) ──────────────────────── */
@media (max-width: 479.98px) {

  /* Oculta o grafico */
  .graph-hide-xs {
    display: none !important;
  }

  /* Mostra o botao mobile */
  .graph-btn-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    min-height: 52px;
  }

  /* Mostra a coluna que contem o botao mobile */
  .graph-show-xs {
    display: block !important;
  }

  /* Oculta o botao desktop */
  .graph-btn-desktop {
    display: none !important;
  }

  /* Placeholder quando grafico esta oculto */
  .graph-hide-xs + .graph-placeholder-xs {
    display: flex;
  }
}

/* ── Modal fullscreen — melhorias para mobile ────────────────── */

/* Em mobile, o modal ocupa a tela toda */
@media (max-width: 767.98px) {
  #modal-grafico-expandido .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  #modal-grafico-expandido .modal-content {
    border-radius: 0 !important;
    height: 100dvh;        /* dynamic viewport height — correto em mobile */
    min-height: 100dvh;
  }

  #modal-grafico-expandido .modal-body {
    padding: 0 !important;
    flex: 1;
  }

  #modal-grafico-expandido #modal-grafico-graph {
    height: calc(100dvh - 60px) !important;  /* desconta o header do modal */
  }

  /* Header do modal mais compacto */
  #modal-grafico-expandido .modal-header {
    padding: 10px 16px;
    min-height: 52px;
  }
}

/* Em landscape mobile: aproveita a largura total */
@media (max-width: 767.98px) and (orientation: landscape) {
  #modal-grafico-expandido #modal-grafico-graph {
    height: calc(100dvh - 52px) !important;
  }
}

/* ── Aviso de rotacao ────────────────────────────────────────── */
/* Sub-fase 1.6d: .aviso-rotacao-overlay definido inteiramente em
   assets/styles.css (design toast-pill). A definição full-screen
   (inset:0) foi removida daqui para eliminar o conflito de
   top/right corrigido na Sub-fase 1.7.                          */

/* .aviso-rotacao-inner: wrapper legado da versão full-screen.
   display:contents torna o div transparente ao layout — icon,
   texto e botão fechar herdam o flex-row do toast-pill pai.     */
.aviso-rotacao-inner {
  display: contents;
}

/* Botao fechar do aviso */
.aviso-rotacao-fechar-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease;
  padding: 0;
}

.aviso-rotacao-fechar-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/*
  O aviso de rotacao so aparece em portrait em telas pequenas.
  Porem a visibilidade real e controlada pelo callback Python
  (Input aviso-rotacao-fechar -> Output aviso-rotacao style).
  O CSS abaixo e apenas o estado inicial para quando nao houver
  interacao do usuario ainda.
*/
@media (max-width: 767.98px) and (orientation: portrait) {
  /* Nao forcamos display:flex aqui — o callback controla isso */
  /* O aviso e acionado pelo callback apos o primeiro calculo */
}

/* ── Graficos em tabs — altura minima em desktop ─────────────── */
@media (min-width: 480px) {
  .graficos-tabs .dcc-graph {
    min-height: 300px;
  }
}

/* ── Tabs de graficos — scroll horizontal em mobile ──────────── */
@media (max-width: 767.98px) {
  .graficos-tabs .react-tabs__tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .graficos-tabs .react-tabs__tab-list::-webkit-scrollbar {
    display: none;
  }

  .graficos-tabs .react-tabs__tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Tabela espectro acustico — responsiva ───────────────────── */
.espectro-tabela-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  #espectro-acustico-tabela table {
    font-size: 11px !important;
  }

  #espectro-acustico-tabela th,
  #espectro-acustico-tabela td {
    padding: 4px 6px !important;
    min-width: 36px;
  }
}