/* =====================================================================
   OTIMIZAÇÃO PARA CELULAR
   Alvos de toque ≥ 44px, áreas seguras (notch), teclado sem zoom,
   modal em folha inferior e tabelas roláveis.
   ===================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

.app {
  min-height: 100dvh;
}

button,
.btn,
.nav-item,
[role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 900px) {
  /* ---------- área segura do aparelho ---------- */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ---------- topo fixo, sempre acessível ---------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }

  /* ---------- alvos de toque ---------- */
  .btn {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 14.5px;
  }

  .btn-sm {
    min-height: 38px;
    font-size: 13.5px;
  }

  .nav-item {
    min-height: 48px;
    font-size: 15px;
  }

  /* ---------- formulários sem zoom no iPhone ---------- */
  input,
  select,
  textarea {
    font-size: 16px !important;
    min-height: 46px;
    padding: 12px 14px;
  }

  textarea {
    min-height: 90px;
  }

  .field span,
  label {
    font-size: 13px;
  }

  /* ---------- modais como folha inferior ---------- */
  .modal-root {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: sheet-up 220ms ease-out;
  }

  .modal-body {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .modal-foot {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .modal-foot .btn {
    flex: 1;
  }

  @keyframes sheet-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }

  /* ---------- tabelas roláveis, sem quebrar o layout ---------- */
  .table-wrap {
    margin: 0 -16px;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .table {
    font-size: 13.5px;
    min-width: 560px;
  }

  .table th,
  .table td {
    padding: 11px 12px;
    white-space: nowrap;
  }

  .table th:first-child,
  .table td:first-child {
    position: sticky;
    left: 0;
    background: var(--panel);
    z-index: 1;
  }

  /* ---------- senha grande e legível ---------- */
  .ticket {
    padding: 22px 16px;
  }

  .ticket-number {
    font-size: clamp(64px, 22vw, 96px);
    line-height: 0.95;
  }

  .ticket-hint {
    font-size: 14.5px;
  }

  /* ---------- cartões e ações ---------- */
  .card {
    border-radius: 14px;
  }

  .card-head {
    padding: 14px 16px;
  }

  .view {
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
  }

  .row .btn {
    flex: 1 1 auto;
  }

  .stat-grid {
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-card .stat-value {
    font-size: 26px;
  }

  /* fila: cada linha vira um cartão tocável */
  .queue-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }

  .queue-row .queue-actions {
    display: flex;
    gap: 8px;
  }

  .queue-row .queue-actions .btn {
    flex: 1;
  }

  /* agenda: células maiores para o dedo */
  .agenda-cell {
    min-height: 64px;
  }

  /* evita que o teclado cubra o campo focado */
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-bottom: 120px;
  }
}

@media (max-width: 560px) {
  .sidebar {
    width: min(86vw, 320px);
  }

  .topbar-actions .btn span.label {
    display: none;
  }

  .modal {
    max-height: 94dvh;
  }

  .form-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Celular na horizontal: menos altura, mais largura */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    position: static;
  }

  .modal {
    max-height: 96dvh;
  }
}


/* ---------- tabelas de cadastro viram cartões no celular ---------- */
@media (max-width: 700px) {
  .topbar { gap: 8px; }
  .topbar-title { min-width: 0; flex: 1 1 auto; }
  .topbar-title h1 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; }
  .topbar-actions .btn { padding: 8px 10px; font-size: 12.5px; min-height: 38px; }

  .table-wrap { margin: 0; padding: 0 12px 12px; overflow-x: visible; }
  .table { display: block; min-width: 0; font-size: 14px; }
  .table thead { display: none; }
  .table tbody { display: block; }
  .table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--panel) 60%, transparent);
  }
  .table tr.is-inactive { opacity: 0.55; }
  .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    position: static;
    background: transparent;
  }
  .table td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .table td[data-label=""]::before,
  .table td:not([data-label])::before { content: none; }
  .table td.cell-actions-td { display: block; padding-top: 10px; }
  .table .cell-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .table .cell-actions .btn { width: 100%; min-height: 42px; padding: 8px 6px; font-size: 12.5px; }
}


/* ---------- topo em telas estreitas: ações na segunda linha ---------- */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .topbar-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar-title h1 {
    font-size: 17px;
    white-space: normal;
    line-height: 1.2;
  }
  .topbar-title { flex: 1 1 100%; order: 1; }
  .topbar-actions {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    flex-wrap: nowrap;
    gap: 8px;
    order: 2;
  }
  #theme-toggle { order: 2; }
  #shop-toggle { order: 2; }
  .topbar-actions .btn {
    flex: 0 1 auto;
  }
}


/* ---------------------------- barra inferior ---------------------------- */
.bottom-bar { display: none; }

@media (max-width: 700px) {
  .bottom-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }

  .bb-item {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 7px 2px 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bb-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bb-item.selected {
    color: var(--accent);
    background: rgba(192, 23, 30, 0.1);
  }

  .bb-item:active { transform: scale(0.96); }

  /* espaço para a barra não cobrir o conteúdo */
  .view { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .modal-body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}


/* a barra inferior já tem "Mais": o hambúrguer vira redundante */
@media (max-width: 700px) {
  #menu-toggle { display: none !important; }
  .topbar-title { flex: 1 1 auto; }
}


/* ---------------------------- agenda no celular ---------------------------- */
@media (max-width: 700px) {
  /* navegação de data com alvo grande */
  .agenda-toolbar { gap: 8px; }
  .agenda-toolbar .btn,
  .agenda-toolbar button { min-height: 44px; min-width: 44px; }
  .agenda-toolbar input[type="date"] { min-height: 44px; font-size: 15px; }

  /* abas dia/semana/mês */
  .agenda-modes .btn,
  .agenda-modes button { min-height: 42px; padding: 9px 14px; font-size: 13.5px; }

  /* lista do dia: cada agendamento é um cartão tocável */
  .appt-row,
  .agendamento-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    min-height: 64px;
    border-radius: 12px;
  }

  .appt-row .appt-hora,
  .agendamento-row .appt-hora {
    font-size: 16px;
    font-weight: 700;
    min-width: 52px;
  }

  .appt-row .appt-acoes,
  .agendamento-row .appt-acoes {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }

  .appt-row .appt-acoes .btn,
  .agendamento-row .appt-acoes .btn {
    min-height: 40px;
    padding: 8px 10px;
  }

  /* visão de mês: células maiores para o dedo */
  .agenda-cell { min-height: 68px; }
  .agenda-cell .cell-dia { font-size: 12.5px; }
}

/* botão de novo agendamento fixo no rodapé da agenda */
@media (max-width: 700px) {
  .agenda-cta {
    position: sticky;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 20;
    margin: 12px 0;
  }
  .agenda-cta .btn { width: 100%; min-height: 50px; font-size: 15.5px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
}