/* CliniHub — responsividade das telas operacionais (04/07/2026).
   Foco: agenda custom, modais, e conforto de tabelas em telas pequenas. */

/* Agenda: botao de filtros (aparece so no mobile) */
#agFiltrosBtn{display:none;width:100%;background:#EFF6FF;color:#1E3A8A;border:1px solid #DBEAFE;border-radius:10px;padding:11px;font-weight:700;font-size:.92rem;cursor:pointer}

@media (max-width: 820px){
  /* Agenda no celular: simples — só o seletor de profissional + os agendamentos */
  #agLayout{display:flex !important;flex-direction:column;gap:10px}
  #agFiltrosBtn{display:none !important}
  #agAside{order:1;display:block !important;gap:0}
  #agAside > div{display:none !important}
  #agAside > #agCardProf{display:block !important;margin:0}
  #agCalWrap{order:2}
  /* Modais custom da agenda: ocupam quase a tela toda */
  #agNovoBg > div, #agModalBg > div{
    width:96% !important; max-width:96% !important;
  }
  /* FullCalendar: toolbar quebra em linhas e cabe */
  .fc .fc-toolbar.fc-header-toolbar{
    flex-direction:column; gap:8px; align-items:stretch;
  }
  .fc .fc-toolbar-title{ font-size:1.05rem; text-align:center; }
  .fc .fc-button{ padding:6px 9px; font-size:.8rem; }
  /* Tabelas do Filament: rolagem horizontal confortável + fonte menor */
  .fi-ta-table{ font-size:.82rem; }
  .fi-ta-ctn{ -webkit-overflow-scrolling:touch; }
  /* Formulários densos: campos empilham */
  .fi-fo-component-ctn .grid{ grid-template-columns:1fr !important; }
  /* Cabeçalho e paddings mais enxutos */
  .fi-main{ padding:12px !important; }
  .fi-header-heading{ font-size:1.25rem !important; }
}
@media (max-width: 520px){
  .fc .fc-timegrid-slot-label{ font-size:.62rem; }
  .fi-main{ padding:8px !important; }
}

/* Recebimentos e tabelas largas: em telas muito estreitas, colunas toggleable ficam ocultas por padrão do Filament;
   aqui garantimos que a tabela role suave e o cabeçalho não empurre o layout. */
@media (max-width: 640px){
  .fi-ta-header-toolbar{ flex-wrap:wrap; gap:6px; }
  .fi-ta-actions{ flex-wrap:wrap; }
  .fi-modal-window{ width:96vw !important; max-width:96vw !important; }
}

/* Telas de PC menores (notebooks 821–1200px): filtros da agenda mais estreitos
   e barra de botoes do calendario nunca estoura (quebra em linha se faltar espaco) */
@media (min-width:821px) and (max-width:1200px){
  #agLayout{grid-template-columns:200px 1fr !important;gap:10px !important}
  .fc .fc-toolbar.fc-header-toolbar{flex-wrap:wrap;gap:8px}
}

/* ===== v5 (08/07/2026) — mobile: colapso de grids lado-a-lado + legibilidade =====
   Regras SO valem <=640px (desktop intacto). !important vence o estilo inline. */
@media (max-width:640px){
  /* grids de conteudo em 2/3 colunas (paineis/graficos/forms inline) empilham no celular */
  .fi-main [style*="grid-template-columns:1fr 1fr"],
  .fi-main [style*="grid-template-columns:1.6fr 1fr"],
  .fi-main [style*="grid-template-columns:1.2fr 1fr"],
  .fi-main [style*="grid-template-columns:2fr 1fr"],
  .fi-main [style*="grid-template-columns:260px 1fr"],
  .fi-main [style*="grid-template-columns:250px 1fr"]{ grid-template-columns:1fr !important; }
  /* legibilidade: fontes inline < .7rem sobem para ~11.8px */
  .fi-main [style*="font-size:.6rem"],
  .fi-main [style*="font-size:.62rem"],
  .fi-main [style*="font-size:.63rem"],
  .fi-main [style*="font-size:.64rem"],
  .fi-main [style*="font-size:.66rem"],
  .fi-main [style*="font-size:.68rem"]{ font-size:.74rem !important; }
  /* alvos de toque >=40px em botoes/acoes custom */
  .fi-main .ch-btn,.fi-main .fi-btn,.fi-main button[onclick],.fi-main a[onclick]{ min-height:40px; }
  /* nenhuma tabela custom estoura a largura da viewport */
  .fi-main table{ max-width:100% !important; }
  /* paddings inline generosos ficam enxutos */
  .fi-main [style*="padding:20px"],
  .fi-main [style*="padding:22px"],
  .fi-main [style*="padding:24px"]{ padding:14px !important; }
}