/* =====================================================================
   Camada responsiva (mobile-first overrides). Carregada por último para
   ajustar layouts desktop-first (grids/paddings inline) ao celular.
   As telas usam grids via `style` inline; aqui colapsamos por substring.
   ===================================================================== */

@media (max-width:768px){
  /* Grids multi-coluna colapsam: 3+ colunas -> 2; 2 colunas/ratios -> 1 */
  [style*="repeat(4,"], [style*="repeat(4 ,"], [style*="repeat(3,"],
  [style*="repeat(auto-fit"], [style*="repeat(auto-fill"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  [style*="repeat(2,"], [style*="1fr 1fr"],
  [style*="1.2fr"], [style*="1.3fr"], [style*="1.4fr"], [style*="1.5fr"],
  [style*="1.6fr"], [style*="1.7fr"], [style*="1.8fr"], [style*="1.9fr"], [style*="2fr"],
  [style*="320px"], [style*="340px"], [style*="360px"], [style*="380px"]{
    grid-template-columns:1fr !important;
  }

  /* Respiro: containers com padding grande encolhem */
  .shell__content [style*="padding:24px"]{ padding:16px !important; }
  .shell__content [style*="padding:28px"]{ padding:18px !important; }
  .shell__content [style*="padding:32px"]{ padding:18px !important; }

  /* Nada deve exigir largura mínima que estoure 375px */
  .shell__content [style*="min-width:340px"],
  .shell__content [style*="min-width:360px"],
  .shell__content [style*="min-width:400px"],
  .shell__content [style*="max-width:340px"]{ min-width:0 !important; }

  /* Títulos grandes ficam proporcionais */
  .shell__content h1[style*="font-size:28px"],
  .shell__content h1[style*="font-size:26px"]{ font-size:22px !important; }

  /* ---- Inbox: master-detail (lista <-> thread) ---- */
  .inbox{ height:calc(100svh - 58px - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  .shell__content:has(.inbox){ padding-bottom:0 !important; }
  .inbox__col1{ width:100% !important; border-right:none !important; }
  .inbox__col3{ display:none !important; }
  .inbox--list .inbox__col2{ display:none !important; }
  .inbox--thread .inbox__col1{ display:none !important; }
  .inbox__back{ display:inline-flex !important; }

  /* ---- Kanban (Leads): empilha as etapas em 1 coluna ---- */
  [data-controller="kanban"]{ height:auto !important; padding:16px !important; }
  [data-controller="kanban"] > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  [data-controller="kanban"] [data-stage-id]{ min-width:0 !important; }

  /* ---- CRM: master-detail (lista <-> perfil) ---- */
  .crm{ height:calc(100svh - 58px - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  .shell__content:has(.crm){ padding-bottom:0 !important; }
  .crm__col1{ width:100% !important; border-right:none !important; }
  .crm--list .crm__col2{ display:none !important; }
  .crm--detail .crm__col1{ display:none !important; }
  .crm__back{ display:inline-flex !important; }
}

/* Botão "voltar" do CRM só existe no mobile */
.crm__back{ display:none; }

@media (max-width:768px){
  /* ---- Agenda: empilha sidebar + calendário ---- */
  .agenda{ flex-direction:column !important; height:auto !important; }
  .agenda__sidebar{ width:100% !important; border-right:none !important; border-bottom:1px solid var(--border) !important; }
  .agenda__week{ min-height:600px; }
}

/* Botão "voltar" da inbox só existe no mobile */
.inbox__back{ display:none; }