/*
 * Print Hermes — Layout Desktop (Estilo Painel)
 * Adicione APÓS tailwind.printhermes.css no index.html:
 * <link rel="stylesheet" href="/static/assets/css/desktop.css">
 *
 * Nenhuma função JS é alterada. Mobile/PWA/Capacitor intocados.
 * Só entra em ação em telas ≥ 960px.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

@media (min-width: 960px) {

    /* ════════════════════════════════════════
       ALINHAMENTO DO TÍTULO E TAG WEB
    ════════════════════════════════════════ */
    #headerAppName {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    #_pwa_badge {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-left: 6px !important; /* Espaço entre o nome e a tag */
        margin-top: -2px !important; /* Ajuste fino para alinhar visualmente com o texto */
    }

    /* ════════════════════════════════════════
       APP SHELL / RAIZ (FIX PARA HEADER E SIDEBAR)
    ════════════════════════════════════════ */

    /* Trava o scroll global da janela */
    html, body {
        height: 100vh !important;
        overflow: hidden !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
        background: #F4F6F9 !important;
        display: grid !important;
        grid-template-columns: 248px 1fr !important;
        /* Header, Avisos de Erro, Offline, Área Principal */
        grid-template-rows: 60px auto auto 1fr !important; 
    }

    h1, h2, h3, .font-black {
        font-weight: 900 !important;
        letter-spacing: -0.015em !important;
    }

    /* ════════════════════════════════════════
       HEADER
    ════════════════════════════════════════ */

    header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: relative !important; /* Sobrescreve o sticky e fixed */
        top: auto !important;
        height: 60px !important;
        border-bottom: 1px solid rgba(0,0,0,0.07) !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        z-index: 50 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    header > div {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    header .shadow-sm { box-shadow: none !important; }
    #headerAppName { font-size: 13px !important; font-weight: 900 !important; }

    /* ════════════════════════════════════════
       SIDEBAR (NAV)
    ════════════════════════════════════════ */

    nav.fixed.bottom-0 {
        grid-column: 1 !important;
        grid-row: 2 / -1 !important;
        position: relative !important; /* Remove o position original */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important; 
        min-height: 0 !important; /* Essencial para o scroll do grid funcionar */
        overflow-y: auto !important; /* Scroll independente */
        border-top: none !important;
        border-right: 1px solid rgba(0,0,0,0.07) !important;
        box-shadow: none !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 16px 0 !important;
        z-index: 40 !important;
    }

    nav.fixed.bottom-0 > div {
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: 0 !important;
    }

    .app-nav-btn {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 9px 18px !important;
        margin: 1px 16px !important;
        border-radius: 14px !important;
        width: calc(100% - 32px) !important;
        flex: none !important;
        text-align: left !important;
        color: #6b7280 !important;
        border: 1px solid transparent !important;
    }

    .app-nav-btn i { font-size: 11px !important; width: 15px !important; text-align: center; flex-shrink: 0; }
    .app-nav-btn span { font-size: 13px !important; font-weight: 700 !important; letter-spacing: normal !important; text-transform: none !important; }

    .app-nav-btn.text-indigo-600, .app-nav-btn.text-purple-500 { background: #eef2ff !important; color: #4f46e5 !important; border-color: #c7d2fe !important; }
    .app-nav-btn:hover:not(.text-indigo-600):not(.text-purple-500) { background: #F0F2F6 !important; color: #111827 !important; }
    .app-nav-btn:active { transform: scale(0.98) !important; }

    #badgeOffline { right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; position: absolute; }

    /* ════════════════════════════════════════
       MAIN (ÁREA CENTRAL)
    ════════════════════════════════════════ */

    main#mainWrap {
        grid-column: 2 !important;
        grid-row: 4 !important;
        position: relative !important;
        height: 100% !important;
        min-height: 0 !important; /* Essencial para o scroll do grid funcionar */
        overflow-y: auto !important; /* Scroll independente */
        max-width: 1080px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 28px 32px 100px 32px !important; /* Padding extra no rodapé */
        align-self: stretch !important;
    }

    /* ════════════════════════════════════════
       BANNERS & POPOVERS
    ════════════════════════════════════════ */

    #avisosErro {
        grid-column: 2 !important;
        grid-row: 2 !important;
        position: static !important; /* Remove o sticky original */
        width: 100% !important;
        max-width: 1080px !important;
        margin: 0 auto !important;
        top: auto !important;
        z-index: 10 !important;
    }
    
    #avisoOffline {
        grid-column: 2 !important;
        grid-row: 3 !important;
        position: static !important;
        width: 100% !important;
        max-width: 1080px !important;
        margin: 0 auto !important;
        z-index: 10 !important;
    }

    #headerStatusPopover {
        top: 68px !important;
        right: 20px !important;
        position: fixed !important;
    }

    /* ════════════════════════════════════════
       CARDS E CAIXAS
    ════════════════════════════════════════ */

    .card-btn, .bg-white.rounded-3xl.border, #cameraSection, #tecladoSection, #bleStatusPanel, #resultadoAuditoria > .bg-white, #resultadoChecagemSimples > .bg-white, #resultadoChecagemDetalhada > .bg-white {
        border-radius: 24px !important;
        border: 1px solid rgba(0,0,0,0.07) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        background: #ffffff !important;
    }

    .card-btn:hover { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.08) !important; transform: translateY(-1px); }
    .card-btn:active { transform: translateY(0) scale(0.98) !important; }

    /* ════════════════════════════════════════
       MODAIS DE CONFIGURAÇÃO (cfg-modal)
    ════════════════════════════════════════ */

    .cfg-modal {
        width: min(440px, 100vw) !important;
        left: auto !important;
        right: 0 !important;
        box-shadow: -4px 0 24px rgba(0,0,0,0.05) !important;
        border-left: 1px solid rgba(0,0,0,0.10) !important;
        height: 100vh !important; 
    }

    #modalStatusImpressora, #modalArgox, #modalLogBLE, #modalConexaoLeitor, #modalSenhaConfig { overflow: clip; }
    #modalArgox > div, #modalStatusImpressora > div, #modalLogBLE > div, #modalConexaoLeitor > div, #modalSenhaConfig > div {
        max-width: 440px !important;
        border-radius: 28px !important;
    }
    .cfg-input { font-family: inherit !important; }

    #toastContainer { bottom: 24px !important; right: 24px !important; }

    #boasVindasOverlay > div.flex-1 { max-width: 520px; margin: 0 auto; width: 100%; }
    #boasVindasOverlay > div.flex-shrink-0:last-child { max-width: 520px; margin: 0 auto; width: 100%; }

    /* ════════════════════════════════════════
       SCROLLBAR
    ════════════════════════════════════════ */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
}

/* ════════════════════════════════════════
   WINDOW CONTROLS OVERLAY (PWA NATIVO DESKTOP)
════════════════════════════════════════ */

@media (min-width: 960px) and (display-mode: window-controls-overlay) {
    
    body {
        /* Usa max() para garantir que a linha nunca fique menor que 60px e amasse o conteúdo */
        grid-template-rows: max(60px, env(titlebar-area-height, 60px)) auto auto 1fr !important;
    }

    header {
        /* Mesma trava de altura mínima de 60px para o header */
        height: max(60px, env(titlebar-area-height, 60px)) !important;
        -webkit-app-region: drag !important; 
        background-color: #ffffff !important; 
        padding: 0 !important;
    }

    header > div {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important; 
        
        /* max() garante 20px de padding MÍNIMO ou o tamanho exato dos botões do SO (Mac ou Windows) */
        padding-left: max(20px, env(titlebar-area-x, 20px)) !important;
        padding-right: max(20px, calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px))) !important;
    }

    /* Proteção para os cliques funcionarem */
    header button,
    header a,
    header input,
    header select,
    .no-drag,
    #headerStatusPopover {
        -webkit-app-region: no-drag !important;
    }
}

/* ════════════════════════════════════════
       MODAIS DE CONFIGURAÇÃO (cfg-modal)
    ════════════════════════════════════════ */

    .cfg-modal {
        width: min(440px, 100vw) !important;
        left: auto !important;
        right: 0 !important;
        /* Começa com a sombra transparente para não vazar na tela */
        box-shadow: -4px 0 24px rgba(0,0,0,0) !important; 
        border-left: 1px solid rgba(0,0,0,0.10) !important;
        height: 100vh !important; 
        /* Anima tanto o slide quanto o fade da sombra suavemente */
        transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease !important; 
    }

    /* A sombra só aparece de verdade quando o modal está aberto */
    .cfg-modal.open {
        box-shadow: -4px 0 24px rgba(0,0,0,0.06) !important; 
    }

    #modalStatusImpressora, #modalArgox, #modalLogBLE, #modalConexaoLeitor, #modalSenhaConfig { overflow: clip; }
    #modalArgox > div, #modalStatusImpressora > div, #modalLogBLE > div, #modalConexaoLeitor > div, #modalSenhaConfig > div {
        max-width: 440px !important;
        border-radius: 28px !important;
    }
    .cfg-input { font-family: inherit !important; }

    #toastContainer { bottom: 24px !important; right: 24px !important; }

    #boasVindasOverlay > div.flex-1 { max-width: 520px; margin: 0 auto; width: 100%; }
    #boasVindasOverlay > div.flex-shrink-0:last-child { max-width: 520px; margin: 0 auto; width: 100%; }