/* ==========================================================================
   Lucas Bots — Responsivo (responsive.css)
   Mobile First: 320px, 360px, 390px, 414px, 480px, tablets, desktop, grandes.
   ========================================================================== */

/* Rolagem horizontal fluida nas tabelas */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* --------------------------------------------------------------------------
   Sidebar: off-canvas no celular / fixa no desktop
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-102%);
    box-shadow: var(--shadow-lg);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }
}

@media (min-width: 992px) {
  .sidebar-backdrop {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Telas médias (tablets / pequenos notebooks)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .app-topbar {
    padding: 0.6rem 0.9rem;
  }

  .app-content {
    padding: 1rem !important;
  }

  .card-body {
    padding: 1.1rem;
  }

  .auth-visual .float-chip {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Celulares (<= 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Botões menores ganham área de toque adequada */
  .btn-sm {
    min-height: 44px;
  }

  /* Botões diretos de colunas cheias ocupam a largura toda */
  .col-12 > .btn {
    width: 100%;
  }

  /* Input groups quebram linha em vez de estourar a tela */
  .input-group {
    flex-wrap: wrap;
  }

  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .input-group-text {
    flex: 1 1 130px;
    min-width: 0;
    margin-bottom: 0.3rem;
    border-radius: 12px !important;
  }

  /* Cabeçalhos de card flexíveis */
  .card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Agrupamentos de botões */
  .btn-group {
    flex-wrap: wrap;
  }

  .btn-group .btn {
    border-radius: 12px !important;
    margin: 0.15rem;
  }

  /* Tabelas mais densas mas legíveis */
  .table td,
  .table th {
    padding: 0.7rem 0.75rem;
  }

  /* Página de auth: botões empilhados e espaçamento menor */
  .auth-cta .btn {
    width: 100%;
  }

  .auth-shell {
    padding: 1.75rem 1.1rem;
    gap: 2rem;
  }

  .auth-card {
    padding: 1.4rem;
  }

  /* Formulários em colunas de card */
  .card-body form .row > [class*="col-"] {
    padding-bottom: 0.15rem;
  }

  /* Início do cliente: botões do banner ocupam a largura toda */
  .onboarding-banner .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   UX incremental do cliente (sem impacto no restante do layout)
   -------------------------------------------------------------------------- */
/* Cartões de escolha do tipo de bot são <button>: herdam a tipografia do card */
.btn-tipo-bot {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Cards de resumo do Início envolvidos em links: mantêm a cor do tema */
a.text-decoration-none > .stat-card {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Telas pequenas (~480px e menores): ainda mais compacto
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .topbar-title {
    max-width: 34vw;
  }

  .app-topbar {
    gap: 0.6rem;
  }

  .stat-card {
    padding: 1rem;
    gap: 0.8rem;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }

  .stat-value {
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   Auth (login/cadastro): visual empilhado no mobile, 2 colunas no desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .auth-visual {
    display: none;
  }

  .auth-shell {
    text-align: center;
  }

  .auth-cta {
    justify-content: center;
  }

  .auth-benefits {
    justify-content: center;
  }

  .auth-brand {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Monitores grandes: limita a largura do conteúdo para legibilidade
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .app-content {
    max-width: 1480px;
    margin: 0 auto;
  }
}