/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVIDADE
   mobile   < 640px
   tablet   640px · 1023px
   desktop  1024px · 1439px
   tv       ≥ 1440px
   ═══════════════════════════════════════════════════════════════════ */

/* ── Breakpoints como media queries ────────────────────────────────── */

/* Ocultar / mostrar por viewport */
.hide-mobile  { display: none !important; }
.show-mobile  { display: block !important; }

@media (min-width: 640px) {
  .hide-mobile  { display: revert !important; }
  .show-mobile  { display: none !important; }
  .hide-tablet  { display: none !important; }
  .show-tablet  { display: block !important; }
}

@media (min-width: 1024px) {
  .hide-tablet  { display: revert !important; }
  .show-tablet  { display: none !important; }
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* ── Grid responsivo ───────────────────────────────────────────────── */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* minmax(0, 1fr), nunca 1fr puro: 1fr é minmax(auto, 1fr) e a coluna cresce
   além da tela para caber no conteúdo mais largo (foi o que a lista de
   horários fez na tela da loja). Com 0 no mínimo, quem estoura é o conteúdo,
   dentro do cartão, e não o layout inteiro. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Formulários ────────────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Container ──────────────────────────────────────────────────────── */
.container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px)  { .container { padding-left: 24px; padding-right: 24px; max-width: 720px; } }
@media (min-width: 1024px) { .container { max-width: 1120px; } }
@media (min-width: 1440px) { .container { max-width: 1400px; } }

/* Distância de TV: os componentes fixam o próprio tamanho, então subir só o
   body não chegava neles. Aqui os textos de apoio sobem junto. */
@media (min-width: 1800px) {
  body { font-size: 17px; }
  .card, .d-card { font-size: 15px; }
  .eyebrow, .form-label { font-size: 13px; }
  .btn { font-size: 15px; }
  .btn-sm { font-size: 14px; }
}

/* ── TV (> 1440px) · texto e espaçamento maiores ───────────────────── */
@media (min-width: 1440px) {
  body   { font-size: 16px; }
  .btn   { padding: 12px 24px; font-size: 15px; }
  .card  { border-radius: 20px; }
}

/* ── Mobile: sem zoom no foco em inputs ─────────────────────────────── */
@media (max-width: 639px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
}

/* ── Tablets: ajustes de layout ─────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar-layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

/* ── Layout com sidebar ─────────────────────────────────────────────── */
.sidebar-layout {
  display: flex;
  min-height: 100dvh;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-content { flex: 1; overflow-y: auto; }

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .3s ease;
    width: 280px;
    height: 100dvh;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0,0,0,.5);
  }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .sidebar-content { margin-left: 0; }
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  height: 56px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
@media (min-width: 1024px) {
  .topbar { padding: 0 32px; }
}

/* ── Bottom nav (mobile) ────────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition);
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--p-ink); }
.bottom-nav-item:hover  { color: var(--ink-2); text-decoration: none; }

@media (min-width: 640px) { .bottom-nav { display: none; } }

/* Padding para não esconder conteúdo atrás do bottom-nav em mobile */
@media (max-width: 639px) {
  .page-content-mobile { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── Mobile-defensive: previne scroll horizontal global ── */
@media (max-width: 600px) {
  /* Cards reduzem padding pra caber em telas pequenas */
  .card { padding-left: 16px !important; padding-right: 16px !important; }
  /* Mas só aplica se o padding original era > 16. Use seletor mais específico abaixo se conflitar */
}
@media (max-width: 600px) {
  /* Conteúdo do dashboard nunca rola horizontalmente.
     "clip" e NÃO "hidden": pela especificação, overflow-x:hidden força
     overflow-y a computar como "auto", e isso transformava o .dash-main num
     contêiner de rolagem. Consequência medida no navegador: o sticky da
     .dash-topbar passava a ser resolvido contra o .dash-main (que nunca rola,
     pois cresce com o conteúdo) em vez da janela, a barra ficava 52px abaixo
     do lugar, POR CIMA dos cartões, e nunca grudava ao rolar.
     "clip" recorta igual sem criar contexto de rolagem, então overflow-y
     continua "visible" e o sticky volta a funcionar. */
  .dash-main, .dash-content {
    overflow-x: clip;
    max-width: 100vw;
  }
  /* Inputs respeitam container, sem width fixos que sangrem */
  .form-input { max-width: 100%; }
  /* Hours row em telas muito estreitas: empilha tempo embaixo */
}
@media (max-width: 420px) {
  .hours-row-grid {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "day toggle" "times times" !important;
    gap: 8px !important;
  }
  .hours-day { grid-area: day; }
  .hours-toggle { grid-area: toggle; justify-self: end; }
  .hours-times { grid-area: times; }
  .hours-lunch { padding-left: 0 !important; }
}

@media (max-width: 768px) {
  /* ── Tabela vira lista de blocos ──────────────────────────────────────────
     Numa tela de 390px uma tabela de seis colunas não cabe de jeito nenhum.
     Rolar para o lado só troca o problema de lugar: escondia justamente a
     coluna de status, que é a que interessa. Aqui cada linha vira um bloco e
     cada célula vira "rótulo à esquerda, valor à direita", com o rótulo vindo
     do data-label que o cabeçalho da coluna gerou. As colunas que ficavam
     escondidas no celular voltam, porque agora existe espaço para elas.      */
  .table-scroll { overflow-x: visible; }
  .table-scroll > table,
  .table-scroll > table > tbody { display: block; width: 100%; min-width: 0; }
  .table-scroll > table > thead { display: none; }

  .table-scroll > table > tbody > tr {
    display: block; position: relative;
    padding: 16px; border-bottom: 8px solid var(--surface-2);
  }
  .table-scroll > table > tbody > tr:last-child { border-bottom: none; }

  .table-scroll > table > tbody > tr > td {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-end; gap: 2px 12px;
    padding: 5px 0 !important; border: none !important;
    text-align: right !important; white-space: normal !important; width: auto !important;
  }
  .table-scroll > table > tbody > tr > td::before {
    content: attr(data-label); margin-right: auto; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-4);
  }

  /* Identidade da linha: nome, foto e e-mail ocupam a largura toda, sem rótulo. */
  .table-scroll > table > tbody > tr > td[data-cel="ident"] {
    display: block; padding: 0 0 8px !important; text-align: left !important;
  }
  .table-scroll > table > tbody > tr > td[data-cel="ident"]::before { content: none; }

  /* Ações viram uma faixa de botões no rodapé do bloco. */
  .table-scroll > table > tbody > tr > td[data-cel="acoes"] { margin-top: 6px; }
  /* Ícone solto no meio do vazio não parece botão: no toque ele ganha contorno
     e alvo de 38px, que é o mínimo confortável para o dedo. */
  .table-scroll > table > tbody > tr > td[data-cel="acoes"] .btn {
    border: 1px solid var(--line); min-width: 38px; min-height: 38px;
    justify-content: center;
  }
  .table-scroll > table > tbody > tr > td[data-cel="acoes"]::before { content: none; }
  .table-scroll > table > tbody > tr > td[data-cel="acoes"] > * { justify-content: flex-end; }

  /* Caixa de seleção no canto do bloco, fora do fluxo do texto. */
  .table-scroll > table > tbody > tr > td[data-cel="check"] {
    position: absolute; top: 14px; right: 14px; padding: 0 !important;
  }
  .table-scroll > table > tbody > tr > td[data-cel="check"]::before { content: none; }
  .table-scroll > table > tbody > tr > td[data-cel="check"] + td[data-cel="ident"] {
    padding-right: 30px !important;
  }

  .table-scroll > table > tbody > tr > td.hide-mobile { display: flex !important; }
  .table-scroll > table > tbody > tr > td[data-cel="ident"].hide-mobile { display: block !important; }
  .table-scroll > table > tbody > tr > td[colspan] { display: block; text-align: center !important; }

  /* Chips de filtro quebram linha em vez de sumirem na borda da tela. */
  .filtro-linha { flex-wrap: wrap; overflow-x: visible; }

  /* Equipe: pílula de papel e botões descem para uma linha própria. */
  .member-row { flex-wrap: wrap; }
  .member-actions { flex-basis: 100%; justify-content: flex-end; }
}

@media (max-width: 640px) {
  /* Cabeçalho da loja: os botões ganham linha própria. O bloco do nome é
     flex:1 com min-width:0 e, ao lado de um bloco de botões que não encolhe,
     colapsava a quase zero, deixando os selos (Entrega, Retirada) por baixo
     dos botões. */
  .store-hero-actions { flex: 1 1 100%; }
}

/* ── Tela baixa: capa de dobrável deitada, celular em paisagem ───────────────
   Nada no projeto reagia à ALTURA. Numa tela de 260px de altura o cabeçalho
   fixo mais a barra de baixo comiam quase tudo, e o botão flutuante de
   alternar mapa caía por cima do título da página. */
@media (max-height: 460px) {
  :root { --gh-h: 44px; --topbar-h: 36px; }
  .gh-bar { padding: 3px 8px; }
  .bottom-nav, .dash-bottom-nav { position: static; }
  body { padding-bottom: 0 !important; }
  .view-toggle { bottom: 8px; padding: 8px 14px; font-size: 13px; }
  .search-shell { height: auto; min-height: 60vh; overflow: visible; }
}

/* ── Ergonomia de toque ──────────────────────────────────────────────────────
   Vale por TIPO DE PONTEIRO, e não por largura: um tablet de 1024px é dedo, e
   um laptop de 1024px é mouse. A medição em 8 personas apontou o logo do
   cabeçalho com 28px, os botões pequenos com 27px, a caixa de aceite dos
   termos com 16px (que é onde o cadastro emperra) e campos de 20px de altura
   dentro de caixas que pareciam maiores do que a área que responde ao toque. */
@media (pointer: coarse) {
  .btn                 { min-height: 40px; min-width: 40px; }
  .btn-sm              { min-height: 36px; min-width: 36px; }
  .chip                { min-height: 36px; }   /* chips de categoria mediam 31px na loja pública */
  .rf-brand            { min-width: 40px; min-height: 40px; justify-content: center; }
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
  .form-input, textarea, select,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    min-height: 40px;
  }
  /* Link comum de texto: padding vertical em elemento inline aumenta a área
     que responde ao toque sem mexer na altura da linha, então o texto não
     anda de lugar. */
  a[href]:not(.btn):not(.dash-side-link):not(.gh-drop-link):not(.bottom-nav-item):not(.dash-bnav-item):not(.chip) {
    padding-block: 9px;   /* linha de 15 a 17px + 18 = 33 a 35px de alvo */
  }
}