/* ═══ Interbiz Web — ajustes para celular e tablet (2026-11-01) ═══
   Carregado DEPOIS de app.css e de Interbiz.Web.styles.css (CSS isolado), por isso os seletores usam
   ".app-shell .x" (mesma força dos escopados) e vencem pela ordem, sem !important.
   Regras: alvo de toque >= 44 px, campo com fonte 16 px (o iOS não dá zoom ao focar), sem rolagem horizontal da página,
   altura real da tela (dvh) por causa da barra de endereço do celular. Cores vêm do tema (MainLayout.razor.css). */

html, body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
.app-shell { height: 100vh; height: 100dvh; }
.app-shell, .app-shell * { -webkit-tap-highlight-color: transparent; }

/* ── Tablet e celular (menu vira gaveta): shell ──────────────────────────── */
@media (max-width: 860px) {
    .app-shell .app-header { height: 52px; padding-left: max(0.5rem, env(safe-area-inset-left)); padding-right: max(0.5rem, env(safe-area-inset-right)); }
    .app-shell .mobile-toggle,
    .app-shell .header-icon-btn { width: 44px; height: 44px; font-size: 1.25rem; }
    .app-shell .brand-deco { display: none; }
    .app-shell .brand-nome { font-size: 0.9375rem; }
    .app-shell .user-nome { display: none; }
    .app-shell .user-card { margin-left: 0; }
    .app-shell .user-card-btn { min-height: 44px; padding: 0.2rem 0.5rem 0.2rem 0.3rem; }
    .app-shell .user-avatar { width: 32px; height: 32px; }

    /* rodapé de 22 px só atrapalha no celular: o espaço vai para o conteúdo */
    .app-shell .app-footer { display: none; }
    .app-shell .app-sidebar { top: 52px; bottom: 0; width: min(86vw, 320px) !important; overscroll-behavior: contain; }
    .app-shell .sidebar-backdrop { top: 52px; bottom: 0; }

    /* itens do menu lateral com altura de toque */
    .app-shell .app-sidebar a,
    .app-shell .app-sidebar button:not(.sidebar-toggle) { min-height: 44px; }
    .app-shell .sidebar-toggle { display: none; } /* recolher não existe na gaveta: fecha-se tocando fora */

    .app-shell .app-breadcrumb { height: 40px; padding: 0 0.75rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .app-shell .app-breadcrumb::-webkit-scrollbar { display: none; }
    .app-shell .breadcrumb-link { padding: 0.5rem 0; }

    .app-shell .cert-aviso { flex-wrap: wrap; gap: 0.4rem; padding: 6px 12px; font-size: 0.8125rem; text-align: center; }
    .app-shell .cert-aviso .btn { min-height: 36px; margin-left: 0 !important; }

    .app-shell .dropdown-item { padding: 0.75rem 1rem; }
}

/* ── Celular (<= 768 px): listas, formulários, campos, botões ────────────── */
@media (max-width: 768px) {
    /* campos: 44 px de altura e 16 px de fonte (evita o zoom automático do iOS) */
    .app-shell .form-field-input,
    .app-shell .form-field-select,
    .app-shell .form-control,
    .app-shell .form-select { height: 44px; min-height: 44px; font-size: 16px; padding-left: 0.75rem; padding-right: 0.75rem; }
    .app-shell textarea.form-control,
    .app-shell textarea.form-field-input { height: auto; min-height: 88px; }
    .app-shell .form-field { margin-bottom: 0.5rem; }
    .app-shell .form-field-label { font-size: 0.75rem; margin-top: 0.5rem; }
    .app-shell .form-field-error { font-size: 0.8125rem; }
    .app-shell .form-section { font-size: 0.8125rem; margin-top: 1.1rem; }
    .app-shell .form-checkbox { min-height: 44px; align-items: center; font-size: 0.875rem; }
    .app-shell .form-checkbox input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
    .app-shell .form-checkbox-group { flex-direction: column; align-items: stretch; gap: 0; }

    /* botões */
    .app-shell .btn { min-height: 44px; padding-left: 1rem; padding-right: 1rem; font-size: 0.9375rem; }
    .app-shell .btn-sm { min-height: 40px; font-size: 0.875rem; }
    .app-shell .btn-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* painel de lista */
    .app-shell .list-panel-toolbar { padding: 0.5rem 0.6rem; }
    .app-shell .list-panel-toolbar .d-flex,
    .app-shell .list-panel-toolbar .row { flex-wrap: wrap; gap: 0.4rem; }
    .app-shell .list-panel-toolbar input,
    .app-shell .list-panel-toolbar select,
    .app-shell .list-panel-toolbar .form-control,
    .app-shell .list-panel-toolbar .form-select { width: 100%; max-width: none; flex: 1 1 100%; }
    .app-shell .list-panel-toolbar .btn { flex: 1 1 auto; }
    .app-shell .list-panel-footer { padding: 0.35rem 0.6rem calc(0.35rem + env(safe-area-inset-bottom)); }
    .app-shell .list-panel-pager { gap: 0.4rem; font-size: 0.875rem; }

    /* cartões das listas: toque com resposta e respiro maior */
    .app-shell .list-panel-body table.table:not(.tabela-fixa) tr { padding: 10px 14px; }
    .app-shell .list-panel-body table.table:not(.tabela-fixa) tbody tr:active { background: var(--table-row-hover, #E0F2FE); }
    .app-shell .list-panel-body table.table:not(.tabela-fixa) td { font-size: 14px; min-height: 28px; }
    .app-shell .list-panel-body table.table:not(.tabela-fixa) td[data-label=""] { gap: 6px; flex-wrap: wrap; }

    /* campo sem valor não ocupa linha no cartão (ex.: CELULAR em branco) */
    .app-shell .list-panel-body table.table:not(.tabela-fixa) td:empty:not([data-label=""]) { display: none; }
    .app-shell input[type="file"] { width: 100%; max-width: 100%; font-size: 14px; }

    /* tabelas que ficam como tabela (tabela-fixa, sub-listas de formulário): rolam para o lado, com inércia */
    .app-shell .table-responsive { -webkit-overflow-scrolling: touch; }
    .app-shell .tabela-fixa th, .app-shell .tabela-fixa td { white-space: nowrap; }

    /* formulário */
    .app-shell .form-panel-header { padding: 0.5rem 0.75rem; }
    .app-shell .form-panel-toolbar { padding: 0.4rem 0.6rem; }
    .app-shell .form-panel-body { padding: 0.4rem 0.75rem 1rem; }
    .app-shell .form-panel-footer { padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom)); gap: 0.5rem; }
    .app-shell .form-panel-footer .btn { flex: 1 1 0; }
    .app-shell .tabctl { margin-left: -0.75rem; margin-right: -0.75rem; }
    .app-shell .tabctl-strip { scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .app-shell .tabctl-strip::-webkit-scrollbar { display: none; }
    .app-shell .tabctl-tab { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.875rem; scroll-snap-align: start; }
    .app-shell .tabctl-content { overflow: auto; }

    /* janelas (modais feitos à mão): quase tela cheia, com rolagem própria */
    .modal-card { width: calc(100vw - 1rem) !important; max-width: none !important; max-height: calc(100dvh - 1rem); overflow: auto; }
    .modal-dialog { margin: 0.5rem; max-width: none; }

    /* sugestões de autocompletar com altura de toque */
    .app-shell .list-group.position-absolute { max-height: 50dvh; overflow: auto; }
    .app-shell .list-group.position-absolute .list-group-item { padding: 0.75rem 1rem; font-size: 15px; }

    .app-shell .page-scroll { padding: 0.75rem; }
}

/* Telas muito estreitas (<= 380 px) */
@media (max-width: 380px) {
    .app-shell .brand-nome { font-size: 0.8125rem; }
    .app-shell .tabctl-tab { padding: 0.6rem 0.8rem; }
}

/* Aparelhos de toque sem mouse: sem efeitos de hover que ficam "grudados" depois do toque */
@media (hover: none) {
    .app-shell .tabctl-tab:hover { background: transparent; }
    .app-shell .header-icon-btn:hover { background: transparent; }
}