/* ============================================================
   responsive.css — cobertura mobile/tablet COMPLETA
   Carregado DEPOIS de styles.css para sobrescrever quando preciso.

   Breakpoints:
     1280px → small desktop (encurta sidebar)
     1024px → tablet landscape
     768px  → tablet portrait / phone landscape
     480px  → phone portrait
   ============================================================ */

/* Safety nets globais */
img, svg, video, canvas { max-width: 100%; height: auto; }
.chart-wrap { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* ============================================================
   ≤ 1280px — small desktop
   ============================================================ */
@media (max-width: 1280px) {
  .sidebar { width: 220px; }
  .content { padding: 1.25rem; }
}

/* ============================================================
   ≤ 1024px — tablet landscape
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar { width: 210px; }
  .content { padding: 1rem; }

  /* Layout do IA: usa seletor de style inline porque o JS aplica inline */
  #content > div[style*="grid-template-columns: 1fr 280px"],
  #content > div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr 240px !important;
  }

  /* Stats e grids principais */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  /* PDV: já vira 1 coluna por regra existente em styles.css */

  /* Modal de confirmação não toma tela inteira ainda */
  .modal-lg, .modal-xl { max-width: 95vw; }

  /* Painel EJtech tab bar: rolagem horizontal em vez de wrap visual ruim */
  #content > div > div[style*="flex-wrap:wrap"][style*="border-bottom:1px solid"],
  #content > div > div[style*="flex-wrap: wrap"][style*="border-bottom:1px solid"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   ≤ 768px — tablet portrait / phone landscape
   ============================================================ */
@media (max-width: 768px) {
  /* Fonte base levemente menor */
  body { font-size: 13.5px; }

  /* Topbar — botão hamburger overlap + relógio menor */
  .topbar {
    padding: .85rem 1rem .85rem 3.75rem !important;
    gap: .5rem;
    min-height: 56px;
  }
  .topbar h1 { font-size: 1rem !important; }
  .topbar-actions { gap: .5rem; }
  .clock { font-size: .75rem; }
  .cash-status { font-size: .7rem; padding: .25rem .55rem; }

  /* Content */
  .content { padding: .85rem .75rem 5rem !important; }

  /* Hamburger melhor posicionado */
  .mobile-menu-toggle { top: 8px; left: 8px; width: 40px; height: 40px; }

  /* Sidebar como drawer (regra principal já em styles.css; reforço) */
  .sidebar { width: 80vw !important; max-width: 280px; }
  .sidebar-header { padding: 1rem 1rem 1rem 1rem !important; }
  .sidebar-nav a { padding: .8rem .9rem; font-size: .95rem; }
  .sidebar-footer { padding: .85rem 1rem; flex-wrap: wrap; gap: .5rem; }

  /* Cards & sections */
  .card { padding: .85rem; margin-bottom: .85rem; border-radius: 8px; }
  .section-title { font-size: 1rem; }

  /* STATS GRID: 2 cols em mobile (parece dashboard de app) */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
    margin-bottom: 1rem;
  }
  .stat-card { padding: .8rem .85rem; }
  .stat-value { font-size: 1.25rem !important; }
  .stat-label { font-size: .68rem; }
  .stat-meta { font-size: .72rem; }

  /* Grids genéricos empilham (regra existente reforçada) */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: .75rem; }
  .form-row, .form-row-3 { grid-template-columns: 1fr !important; gap: .65rem; }

  /* ===== TABELAS ===== */
  /* Scroll horizontal com sombra que indica "tem mais conteúdo pra direita" */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(white 30%, rgba(255,255,255,0)) 0 0 / 40px 100% no-repeat,
      linear-gradient(rgba(255,255,255,0), white 70%) 100% 0 / 40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 0 / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) 100% 0 / 14px 100% no-repeat,
      white;
    background-attachment: local, local, scroll, scroll, scroll;
  }
  .table-wrap table { min-width: 600px; }
  th, td { padding: .6rem .55rem; font-size: .8rem; }

  /* Toolbar das tabelas: empilha */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: .85rem;
    gap: .6rem;
  }
  .table-toolbar .filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .table-toolbar input,
  .table-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ===== PDV ===== */
  /* Layout single column (já em styles.css), mas refina: produtos depois cart */
  .pdv-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: .75rem;
  }
  .pdv-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
    max-height: 50vh;
  }
  .pdv-prod-card { padding: .55rem; }
  .pdv-prod-card .pname { font-size: .78rem; min-height: 2em; }
  .pdv-prod-card .pprice { font-size: .9rem; }
  .pdv-prod-card .pstock { font-size: .65rem; }
  .pdv-categories { gap: .3rem; }
  .pdv-cat-chip { font-size: .75rem; padding: .3rem .65rem; }
  .pdv-cart { max-height: 60vh; }
  .pdv-cart-header { padding: .75rem .85rem; font-size: .9rem; }
  .pdv-cart-item { padding: .55rem .85rem; }
  .pdv-cart-item .name { font-size: .8rem; }
  .pdv-totals { padding: .75rem; }
  .pdv-total-row.grand { font-size: 1.15rem; }
  .pdv-actions { padding: .65rem; flex-wrap: wrap; gap: .4rem; }
  .pdv-actions .btn { flex: 1 1 calc(50% - .2rem); font-size: .85rem; padding: .65rem .5rem; }

  /* ===== MODAL ===== */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    animation: modalSlideUp .25s ease;
  }
  @keyframes modalSlideUp { from { transform: translateY(100%); } }
  .modal-lg, .modal-xl { max-width: 100% !important; }
  .modal-header { padding: .9rem 1rem; }
  .modal-header h3 { font-size: 1rem; }
  .modal-body { padding: 1rem; }
  .modal-footer {
    padding: .85rem 1rem;
    flex-wrap: wrap-reverse;
    gap: .5rem;
  }
  .modal-footer .btn { flex: 1 1 auto; min-width: 0; }

  /* ===== TOASTS ===== */
  #toast-root {
    bottom: auto;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    align-items: stretch;
  }
  .toast { min-width: 0; width: 100%; }

  /* ===== IA (chat layout) ===== */
  /* O ia.js cria grid inline "1fr 280px" com altura 600px. Empilha vertical */
  #content > div[style*="grid-template-columns: 1fr 280px"],
  #content > div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: calc(100vh - 130px);
  }
  /* Painel de sugestões (sidebar do chat) — vira accordion encolhido */
  #content > div[style*="grid-template-columns: 1fr 280px"] > div:last-child,
  #content > div[style*="grid-template-columns:1fr 280px"] > div:last-child {
    max-height: 200px;
    border-right: none !important;
    border-top: 1px solid var(--border);
  }
  /* Main do chat — não fica em altura fixa */
  #content > div[style*="grid-template-columns: 1fr 280px"] > div:first-child,
  #content > div[style*="grid-template-columns:1fr 280px"] > div:first-child {
    border-right: none !important;
    min-height: 60vh;
  }
  #chat-messages { padding: 1rem !important; }

  /* ===== Painel EJtech tabs ===== */
  #content > div > div[style*="flex-wrap:wrap"][style*="border-bottom"],
  #content > div > div[style*="flex-wrap: wrap"][style*="border-bottom"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #content > div > div[style*="flex-wrap:wrap"][style*="border-bottom"] button,
  #content > div > div[style*="flex-wrap: wrap"][style*="border-bottom"] button {
    flex-shrink: 0;
    padding: .7rem 1rem !important;
    font-size: .85rem;
  }

  /* ===== Construtor (BusinessBuilder) — usa steps tipo wizard ===== */
  /* Os steps são geralmente cards horizontais; em mobile, deixa scroll horizontal */
  .builder-steps,
  div[style*="grid-template-columns: repeat(6"] {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
  }

  /* ===== Buttons / Inputs touch-friendly ===== */
  .btn { min-height: 38px; padding: .55rem 1rem; font-size: .875rem; }
  .btn-sm { min-height: 32px; padding: .4rem .7rem; font-size: .8rem; }
  .btn-lg { min-height: 46px; font-size: .95rem; }
  input, select, textarea {
    font-size: 16px; /* previne zoom automático no iOS */
    padding: .65rem .75rem;
  }
  /* exceções: search/filters em toolbars não precisam 16px */
  .table-toolbar input, .table-toolbar select { font-size: 14px; }

  /* Charts: altura adaptativa */
  .chart-wrap { height: 220px !important; }
  .chart-wrap.tall { height: 300px !important; }

  /* Receipt: maximiza largura */
  .receipt { max-width: 100%; }
}

/* ============================================================
   ≤ 480px — phone portrait
   ============================================================ */
@media (max-width: 480px) {
  body { font-size: 13px; }

  /* Login compacto */
  .login-screen { padding: .75rem; }
  .login-card { padding: 1.5rem 1.25rem !important; }
  .login-logo h1 { font-size: 1.4rem; }
  .login-logo p { font-size: .85rem; }

  /* Topbar */
  .topbar h1 { font-size: .95rem; }
  .clock { display: none; } /* relógio some pra economizar espaço */

  /* Stats em 2 cols mantém — mas com fonte menor */
  .stat-value { font-size: 1.1rem !important; }
  .stat-label { font-size: .65rem; }
  .stat-meta { font-size: .68rem; }

  /* Card padding bem reduzido */
  .card { padding: .75rem .8rem; }

  /* PDV — cards de produto menores ainda */
  .pdv-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
  .pdv-prod-card { padding: .5rem; }
  .pdv-prod-card .pname { font-size: .72rem; }
  .pdv-prod-card .pprice { font-size: .85rem; }
  .pdv-cart-items { font-size: .8rem; }

  /* Sidebar drawer ocupa mais largura */
  .sidebar { width: 85vw !important; max-width: 300px; }

  /* Modais menos border-radius */
  .modal { border-radius: 12px 12px 0 0; }

  /* Tables: célula mais apertada */
  th, td { padding: .5rem .4rem; font-size: .75rem; }

  /* Botões de ação na tabela menores */
  .btn-sm { padding: .35rem .55rem; font-size: .75rem; min-height: 28px; }

  /* Inputs */
  input, select, textarea { padding: .6rem .65rem; }
}

/* ============================================================
   Landscape phone (altura curta) — chat e modal não devem
   sufocar com height fixo
   ============================================================ */
@media (max-height: 500px) and (max-width: 920px) {
  .modal { max-height: 92vh; }
  #chat-messages { min-height: 200px; }
  .pdv-grid { max-height: 40vh; }
  .pdv-cart { max-height: 45vh; }
}

/* ============================================================
   Touch device: scroll mais "macio" + tap target maior em links
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .pdv-cat-chip,
  .sidebar-nav a,
  .table-toolbar button,
  .modal-close { -webkit-tap-highlight-color: rgba(37, 99, 235, .15); }
  /* Remove hover effect que fica "stuck" em touch */
  .pdv-prod-card:hover { transform: none; }
  .sidebar-nav a:hover { background: inherit; }
  .sidebar-nav a:hover.active { background: var(--primary); color: white; }
}

/* ============================================================
   Print — mantém regra existente intacta (definida em styles.css)
   ============================================================ */