/* ==========================================================================
   BarberAI OS - Celular e tablet
   ==========================================================================

   Por que este arquivo existe: main.css - onde mora o esqueleto do app
   (sidebar, topbar, tabelas, formularios) - nao tinha NENHUMA media query.
   No celular a sidebar de 260px comia metade da tela e o conteudo ficava
   espremido no que sobrava.

   Carregado por ultimo de proposito: as regras aqui precisam vencer as dos
   outros arquivos sem depender de !important espalhado.

   Breakpoints:
     <= 1024px  tablet: sidebar vira gaveta
     <=  640px  celular: topbar compacta, botoes so com icone
     <=  400px  celular pequeno
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botao de menu e fundo escuro - so aparecem quando a gaveta existe
   -------------------------------------------------------------------------- */

.btn-menu {
  display: none;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  /* 44px e o minimo que um dedo acerta sem erro. Botao menor que isso
     em barra de navegacao vira fonte de toque errado. */
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.btn-menu:active { background: var(--bg-card-hover); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;

  /* CRITICO: um elemento com opacity:0 CONTINUA recebendo toque. Como este
     aqui e inset:0 (cobre a tela toda) e fica acima do conteudo, sem esta
     linha ele engole todo toque da pagina - o app parece travado, embora
     esteja funcionando por baixo. Foi exatamente o que aconteceu. */
  pointer-events: none;
}

.sidebar-backdrop.visivel {
  opacity: 1;
  /* Aberto ele PRECISA receber o toque: e tocando nele que o menu fecha. */
  pointer-events: auto;
}

/* ==========================================================================
   TABLET E CELULAR (<= 1024px): a sidebar vira gaveta
   ========================================================================== */

@media (max-width: 1024px) {

  .btn-menu { display: flex; }
  /* :not([hidden]) para o atributo hidden do HTML continuar valendo.
     "display: block" sozinho vence o "[hidden] { display: none }" da folha
     do navegador (autor ganha do UA na mesma especificidade), e o fundo
     ficava presente na tela mesmo fechado. */
  .sidebar-backdrop:not([hidden]) { display: block; }

  /* A sidebar sai da tela e volta deslizando. transform em vez de "left"
     porque transform e animado pela GPU - em celular fraco, animar "left"
     engasga visivelmente. */
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: min(280px, 85vw);
    box-shadow: none;
  }

  body.menu-aberto .app-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }

  /* Sem a sidebar ocupando espaco, o conteudo usa a largura toda */
  .app-main { margin-left: 0; }

  /* Trava o fundo enquanto a gaveta esta aberta, senao a pagina rola
     por baixo do menu quando o dedo escorrega */
  body.menu-aberto { overflow: hidden; }

  .app-topbar { padding: 0 16px; gap: 10px; }

  .page-title {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-left { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; }
  .topbar-right { gap: 8px; flex-shrink: 0; }

  .app-content, .app-main > div { padding: 18px 16px; }
}

/* ==========================================================================
   CELULAR (<= 640px)
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- Topbar ---------- */

  .app-topbar {
    padding: 0 12px;
    /* iPhone com notch: sem isto, o titulo fica embaixo do recorte */
    padding-top: env(safe-area-inset-top, 0);
    height: auto;
    min-height: var(--topbar-height);
  }

  .page-title { font-size: 15px; }

  /* Os dois botoes da direita viram so icone. O texto continua no HTML
     para quem usa leitor de tela - some visualmente, nao semanticamente. */
  #topbar-wa-connect-btn .rotulo,
  #btn-new-appointment .rotulo { display: none; }

  #topbar-wa-connect-btn,
  #btn-new-appointment {
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .topbar-usuario { padding-right: 8px; }
  .topbar-usuario-nome { display: none; }

  /* ---------- Conteudo ---------- */

  .app-content, .app-main > div { padding: 14px 12px; }

  .section-header, .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ---------- Tabelas: rolagem propria, nunca a pagina ---------- */

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
    width: calc(100% + 24px);
  }

  .app-table { min-width: 560px; }
  .app-table th, .app-table td { padding: 10px 8px; font-size: 13px; }

  /* ---------- Formularios ---------- */

  .form-row { flex-direction: column; gap: 0; }

  /* 16px NAO e capricho: abaixo disso o Safari do iPhone da zoom sozinho
     ao focar o campo, e a tela fica torta ate o usuario dar pinch de volta. */
  .form-input, .form-select, .form-textarea {
    font-size: 16px;
    padding: 12px 14px;
  }

  /* ---------- Botoes: alvo de dedo ---------- */

  .btn { min-height: 42px; padding: 10px 16px; }
  .btn-sm { min-height: 38px; }
  .btn-xs { min-height: 32px; padding: 6px 10px; }

  .modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .modal-actions .btn { width: 100%; }
  .modal-actions.space-between { flex-direction: column-reverse; }
  .modal-actions.space-between > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .modal-actions.space-between > div .btn { width: 100%; margin: 0 !important; }

  /* ---------- Modal quase tela cheia ---------- */

  .modal-overlay { padding: 0; align-items: flex-end; }

  .modal-window {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* Sobe de baixo, como o padrao de celular - e mais perto do polegar */
    animation: subir 0.25s ease;
  }

  @keyframes subir {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .modal-body { max-height: calc(92vh - 70px); overflow-y: auto; }
  .modal-close-btn { width: 44px; height: 44px; font-size: 26px; }

  /* ---------- Agenda ---------- */

  .agenda-toolbar, .agenda-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .agenda-toolbar .btn { flex: 1 1 auto; }

  .cal-cell { min-height: 44px; }
  .cal-head { padding: 8px 6px; }
  .cal-head-avatar { width: 26px; height: 26px; }

  /* ---------- Cartoes e listas ---------- */

  .setting-item-card, .crm-client-card, .followup-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .setting-item-card .btn, .crm-client-card .btn { width: 100%; }

  /* ---------- Chat ---------- */

  .chat-container, .chat-window { height: auto; min-height: 60vh; }
}

/* ==========================================================================
   CELULAR PEQUENO (<= 400px)
   ========================================================================== */

@media (max-width: 400px) {
  .app-topbar { padding: 0 8px; gap: 6px; }
  .page-title { font-size: 14px; }
  .app-content, .app-main > div { padding: 12px 10px; }
  .topbar-right { gap: 6px; }
  #topbar-wa-connect-btn, #btn-new-appointment { padding: 0 10px; min-width: 40px; }
}

/* ==========================================================================
   Telas de toque em geral (independe da largura)
   ========================================================================== */

@media (hover: none) {
  /* Efeito de hover em tela de toque "gruda": o navegador mantem o estado
     depois do toque ate tocar em outro lugar. Some para nao confundir. */
  .btn:hover { transform: none; }
  .nav-item:hover:not(.active) { background: transparent; }
  .app-table tbody tr:hover { background: transparent; }
}

/* Deitado num celular baixinho: a gaveta precisa rolar por dentro */
@media (max-height: 480px) and (max-width: 1024px) {
  .app-sidebar { overflow-y: auto; padding: 14px 12px; }
  .sidebar-nav { gap: 2px; }
  .nav-item { padding: 8px 12px; }
}

/* Quem prefere menos animacao (acessibilidade do sistema) */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .sidebar-backdrop, .modal-window { transition: none; animation: none; }
}