/* ─────────────────────────────────────────────────────────────
   UnityHub — responsivo mobile/tablet
   Funciona junto com a sidebar fixa existente (w-64 / ml-64 / left-64)
   sem precisar reescrever cada página.

   Breakpoints:
     ≤ 1023px  (lg-) → sidebar vira drawer com hambúrguer
     ≤ 767px   (md-) → cards full-width, header compacto, tabelas com scroll horizontal
   ───────────────────────────────────────────────────────────── */

/* ===== HAMBURGER + DRAWER (≤ 1023px) =====
   Specificity reforçada com html.[any] body { ... } pois Tailwind via CDN
   gera regras com peso parecido. !important em transform/margin/left para
   garantir override de qualquer classe utilitária. */
@media (max-width: 1023px) {
  /* Botão hambúrguer flutuante (injetado por hub-shared.js) */
  .hub-hamburger {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 60;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(60, 30, 110, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.1s;
  }
  .hub-hamburger:active { transform: scale(0.94); }
  .hub-hamburger:hover  { background: #fff; }
  html.dark .hub-hamburger {
    background: rgba(20, 22, 30, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .hub-hamburger svg { width: 22px; height: 22px; stroke: #3c1e6e; }
  html.dark .hub-hamburger svg { stroke: #c4b5fd; }

  /* Overlay escuro quando drawer aberto */
  .hub-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(8, 12, 24, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.hub-drawer-open .hub-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Esconde a sidebar fora da tela; mostra como drawer quando body.hub-drawer-open
     Combina !important no transform com visibility para garantir que NÃO ocupe espaço visualmente. */
  html body > aside,
  html body aside.dash-sidebar,
  html body aside[class*="w-64"][class*="fixed"] {
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 50 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    width: min(280px, 84vw) !important;
  }
  html body.hub-drawer-open > aside,
  html body.hub-drawer-open aside.dash-sidebar,
  html body.hub-drawer-open aside[class*="w-64"][class*="fixed"] {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }

  /* Remove margem esquerda 256px do conteúdo principal */
  html body main,
  html body main[class*="ml-64"] {
    margin-left: 0 !important;
  }

  /* Header: sem deslocamento esquerdo + espaço para o hambúrguer */
  html body header,
  html body header[class*="fixed"],
  html body header[class*="left-64"] {
    left: 0 !important;
    right: 0 !important;
    padding-left: 4rem !important;
    padding-right: 1rem !important;
  }

  /* Remove margem do main em conta.html / cadastro / login (que não usam ml-64) */
  /* (nada a fazer — já são fluidos) */
}

/* ===== MOBILE PURO (≤ 767px) ===== */
@media (max-width: 767px) {
  /* Header mais compacto */
  header.fixed.left-64 .w-96,
  header[class*="left-64"] .w-96 {
    width: 100% !important;
    max-width: none !important;
  }

  /* Encolhe paddings dos containers principais */
  main .p-8, main[class*="p-8"]    { padding: 1rem !important; }
  main .px-8, main[class*="px-8"]  { padding-left: 1rem !important; padding-right: 1rem !important; }
  main .py-8                       { padding-top: 1rem !important; padding-bottom: 1rem !important; }

  /* Cards/grids de KPI: força 1 ou 2 colunas em vez de 4+ */
  main .grid.grid-cols-4,
  main .grid.grid-cols-3,
  main [class*="grid-cols-4"],
  main [class*="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  main .grid.grid-cols-2,
  main [class*="grid-cols-2"] {
    gap: 0.75rem !important;
  }
  /* Grid 380px+1fr (DRE, perfil paciente) → empilha vertical */
  main .grid.grid-cols-\[380px_1fr\],
  main [class*="grid-cols-[380px"] {
    grid-template-columns: 1fr !important;
  }

  /* Tabelas com scroll horizontal embrulhado se necessário */
  main table {
    min-width: 0;
    font-size: 0.78rem;
  }
  main .overflow-x-auto, main .overflow-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Esconde busca do header (sobra espaço — usuário usa busca da tela) */
  header.fixed .w-96 input[type="search"] { font-size: 14px; }

  /* Tipografia mais sóbria */
  h1.text-3xl, h1.text-4xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
  h2.text-2xl              { font-size: 1.25rem !important; }
  .text-7xl                { font-size: 2.5rem !important; }
  .text-6xl                { font-size: 2rem !important; }
  .text-5xl                { font-size: 1.75rem !important; }

  /* Tabs/abas com scroll horizontal */
  .flex.gap-4.border-b, .flex.gap-2.border-b, [class*="tab-pill"]:first-of-type {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .flex.gap-4.border-b::-webkit-scrollbar { display: none; }

  /* Modais com largura total + scroll */
  [class*="rounded-2xl"][class*="bg-white"][class*="max-w-"],
  [class*="modal"] [class*="max-w-"] {
    max-width: calc(100vw - 1.5rem) !important;
    width: 100% !important;
  }

  /* Botões muito pequenos crescem para target touch (mín. 44x44) */
  button:not(.no-touch-grow), a.btn, .brand-gradient {
    min-height: 38px;
  }

  /* Esconde texto auxiliar do usuário logado (mantém apenas avatar) */
  header [data-hub-user-name] { display: none; }
  header .text-right          { display: none; }

  /* Form fields ocupam linha inteira por default */
  .grid.grid-cols-2 > input,
  .grid.grid-cols-3 > input,
  .grid.grid-cols-2 > select,
  .grid.grid-cols-3 > select {
    grid-column: 1 / -1;
  }
}

/* ===== TABLET (768px – 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Cards 4-col viram 2x2 em tablet */
  main .grid.grid-cols-4, main [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Drawer mobile: garante que sidebar tenha scroll interno em telas baixas ===== */
@media (max-width: 1023px) {
  aside.dash-sidebar, body > aside:first-of-type {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Print: esconde sidebar/header/hambúrguer ===== */
@media print {
  .hub-hamburger, .hub-drawer-overlay,
  aside.dash-sidebar, body > aside:first-of-type,
  header.fixed { display: none !important; }
  main.ml-64, main[class*="ml-64"] { margin: 0 !important; }
}