/* ============================================
   PWA — visual de aplicativo no celular
   (barra inferior, aviso de instalação, avisos de atualização/offline)
   Carregado depois do style.css. Usa as variáveis de lá, com valores reservas
   para funcionar também no login e na vistoria.
   ============================================ */

:root {
    --pwa-primary: var(--primary, #10b981);
    --pwa-primary-dark: var(--primary-dark, #059669);
    --pwa-text: var(--text-main, #1e293b);
    --pwa-muted: var(--text-muted, #64748b);
    --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pwa-bottom-nav-h: 64px;
}

/* ── Toque de aplicativo ─────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 991.98px) {
    a, button, .btn, .nav-link, [role="button"] { -webkit-tap-highlight-color: transparent; }
    .btn:active, .pwa-bnav-item:active, .shortcut-chip:active { transform: scale(.97); }
}

html.pwa-standalone body { overscroll-behavior-y: none; }
html.pwa-standalone .sidebar,
html.pwa-standalone .top-navbar,
.pwa-bnav { -webkit-user-select: none; user-select: none; }

/* iPhone dá zoom ao focar campo com fonte < 16px — no app isso atrapalha muito. */
@media (max-width: 991.98px) {
    html.pwa-ios input:not([type="checkbox"]):not([type="radio"]),
    html.pwa-ios select,
    html.pwa-ios textarea,
    html.pwa-ios .select2-container .select2-selection,
    html.pwa-ios .select2-search__field { font-size: 16px !important; }
}

/* Menu lateral no celular respeita a área do "notch" e da barra de gestos */
@media (max-width: 991.98px) {
    .sidebar {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: var(--pwa-safe-bottom);
    }
}

/* ── Barra de navegação inferior (celular) ───── */
.pwa-bnav { display: none; }

@media (max-width: 991.98px) {
    .pwa-bnav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030; /* abaixo do menu lateral (1050) e dos modais */
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        height: calc(var(--pwa-bottom-nav-h) + var(--pwa-safe-bottom));
        padding: 0 max(6px, env(safe-area-inset-right, 0px)) var(--pwa-safe-bottom) max(6px, env(safe-area-inset-left, 0px));
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid rgba(226, 232, 240, .9);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .06);
    }

    body.has-pwa-bnav .content-p,
    body.has-pwa-bnav .workspace-native-content {
        padding-bottom: calc(var(--pwa-bottom-nav-h) + var(--pwa-safe-bottom) + 20px) !important;
    }

    body.has-pwa-bnav .toast-container { top: calc(12px + env(safe-area-inset-top, 0px)); }

    /* Com a barra inferior, o ícone de "Início" do topo fica repetido */
    body.has-pwa-bnav .navbar-actions > a[title="Início"] { display: none; }
}

/* Telas bem estreitas: o nome da filial cortado polui o topo; fica só a inicial */
@media (max-width: 430px) {
    body.has-pwa-bnav .top-navbar .filial-name { display: none; }
}

.pwa-bnav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1px;
    text-decoration: none;
    transition: color .2s ease, transform .15s ease;
    position: relative;
}

.pwa-bnav-item i { font-size: 19px; line-height: 1; transition: transform .2s ease; }
.pwa-bnav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pwa-bnav-item:hover { color: var(--pwa-text); }

.pwa-bnav-item.active { color: var(--pwa-primary-dark); }
.pwa-bnav-item.active i { transform: translateY(-1px); }
.pwa-bnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    width: 28px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--pwa-primary);
}

/* Botão central "+" */
.pwa-bnav-fab { color: var(--pwa-text); }
.pwa-bnav-fab .pwa-fab-circle {
    width: 50px; height: 50px;
    margin-top: -22px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #34d399, var(--pwa-primary) 45%, #047857);
    box-shadow: 0 8px 20px rgba(16, 185, 129, .4), 0 0 0 4px #fff;
}
.pwa-bnav-fab .pwa-fab-circle i { font-size: 20px; color: #fff; }

/* ── Painel de ações rápidas (offcanvas inferior) ─ */
.pwa-actions-sheet.offcanvas-bottom {
    height: auto;
    max-height: 80vh;
    border: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: var(--pwa-safe-bottom);
}
.pwa-actions-sheet .offcanvas-header { padding: 10px 20px 4px; flex-direction: column; align-items: stretch; }
.pwa-actions-sheet .pwa-sheet-handle { margin: 0 auto 12px; }
.pwa-actions-sheet .offcanvas-title { font-size: 16px; font-weight: 700; color: var(--pwa-text); }
.pwa-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 4px 16px;
}
.pwa-action {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px;
    border-radius: 16px;
    background: #f8fafc;
    color: var(--pwa-text);
    text-decoration: none;
    font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2;
    transition: background .15s ease, transform .15s ease;
}
.pwa-action:active { transform: scale(.96); background: #f1f5f9; }
.pwa-action-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
}
.pwa-c-green  { background: #d1fae5; color: #059669; }
.pwa-c-blue   { background: #dbeafe; color: #2563eb; }
.pwa-c-violet { background: #ede9fe; color: #7c3aed; }
.pwa-c-amber  { background: #fef3c7; color: #d97706; }
.pwa-c-rose   { background: #ffe4e6; color: #e11d48; }
.pwa-c-slate  { background: #e2e8f0; color: #334155; }

/* ── Banner "Instale o app" ──────────────────── */
.pwa-install-banner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + var(--pwa-safe-bottom));
    z-index: 1035; /* acima da barra inferior, abaixo do menu lateral e das folhas */
    max-width: 460px;
    margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 12px 14px;
    background: #0f172a;
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .35);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .25s ease;
    font-family: inherit;
}
.pwa-install-banner.show { transform: translateY(0); opacity: 1; }
body.has-pwa-bnav .pwa-install-banner { bottom: calc(var(--pwa-bottom-nav-h) + 12px + var(--pwa-safe-bottom)); }
@media (min-width: 992px) { body.has-pwa-bnav .pwa-install-banner { bottom: 20px; } }

.pwa-install-icon { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; }
.pwa-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pwa-install-text strong { font-size: 14px; }
.pwa-install-text span { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-btn {
    border: 0; border-radius: 11px; padding: 9px 16px;
    font: inherit; font-size: 13px; font-weight: 700; color: #fff;
    background: var(--pwa-primary);
    flex-shrink: 0;
}
.pwa-install-close {
    border: 0; background: transparent; color: #64748b;
    font-size: 22px; line-height: 1; padding: 0 2px 2px; flex-shrink: 0;
}

/* Botão "Instalar app" no topo (aparece só quando o navegador permite) */
.pwa-install-nav[hidden] { display: none !important; }

/* ── Passo a passo do iPhone (folha inferior) ─── */
.pwa-sheet-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
}
.pwa-sheet-backdrop.show { opacity: 1; }
.pwa-sheet {
    width: 100%; max-width: 480px;
    background: #fff; color: var(--pwa-text);
    border-radius: 24px 24px 0 0;
    padding: 10px 22px calc(22px + var(--pwa-safe-bottom));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1);
    font-family: inherit;
}
.pwa-sheet-backdrop.show .pwa-sheet { transform: translateY(0); }
.pwa-sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: #e2e8f0; margin: 0 auto 16px; }
.pwa-sheet h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.pwa-sheet ol { margin: 0 0 20px; padding-left: 20px; color: #475569; font-size: 15px; line-height: 1.6; }
.pwa-sheet ol svg { vertical-align: -3px; color: #2563eb; }
.pwa-sheet-btn {
    width: 100%; border: 0; border-radius: 14px; padding: 14px;
    font: inherit; font-weight: 700; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, var(--pwa-primary), var(--pwa-primary-dark));
}

/* ── Aviso "Nova versão disponível" ──────────── */
.pwa-toast {
    position: fixed;
    left: 50%;
    top: calc(12px + env(safe-area-inset-top, 0px));
    z-index: 10000;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 16px;
    background: #0f172a; color: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    transform: translate(-50%, -150%);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
    white-space: nowrap;
}
.pwa-toast.show { transform: translate(-50%, 0); }
.pwa-toast-icon { color: var(--pwa-primary); font-size: 16px; }
.pwa-toast-btn {
    border: 0; border-radius: 999px; padding: 7px 14px;
    font: inherit; font-size: 13px; font-weight: 700; color: #fff;
    background: var(--pwa-primary);
}

/* ── Aviso "Sem conexão" ─────────────────────── */
.pwa-offline {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--pwa-safe-bottom));
    z-index: 10000;
    padding: 8px 16px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 20px rgba(239, 68, 68, .35);
    transform: translate(-50%, 200%);
    transition: transform .3s ease;
    white-space: nowrap;
}
.pwa-offline.show { transform: translate(-50%, 0); }
@media (max-width: 991.98px) {
    body.has-pwa-bnav .pwa-offline { bottom: calc(var(--pwa-bottom-nav-h) + 12px + var(--pwa-safe-bottom)); }
}

/* ── Não aparece dentro de iframe nem na impressão ─ */
body.app-embed .pwa-bnav,
body.app-embed .pwa-install-banner { display: none !important; }

@media print {
    .pwa-bnav, .pwa-install-banner, .pwa-toast, .pwa-offline, .pwa-sheet-backdrop, .pwa-actions-sheet { display: none !important; }
    body.has-pwa-bnav .content-p { padding-bottom: 0 !important; }
}