/*
 * Print Hermes — Layout Desktop
 * 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.
 */

@media (min-width: 960px) {

    /* ════════════════════════════════════════
       BODY / RAIZ
    ════════════════════════════════════════ */

    body {
        padding-bottom: 0 !important;
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    /* FIX BLUR: backdrop-filter dos modais fullscreen vaza para fora
       da viewport quando html não tem overflow definido. Isso criava
       o "blur fantasma" visível no canto direito da tela. */
    html {
        overflow: hidden;
    }

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

    header {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-top: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.07);
        background: #ffffff !important;
        /* FIX BLUR: box-shadow do header vazava para fora da viewport
           como gradiente esbranquiçado no canto direito. Trocado por
           border-bottom + overflow:clip que corta qualquer sombra interna. */
        box-shadow: none !important;
        overflow: clip;
        isolation: isolate;
    }

    /* FIX BLUR: shadow-sm dos botões redondos dentro do header
       contribuía para o vazamento — zeramos só no desktop. */
    header .shadow-sm {
        box-shadow: none !important;
    }

    header > div {
        max-width: 100% !important;
        padding: 12px 24px !important;
    }

    /* ════════════════════════════════════════
       BOTTOM NAV → SIDEBAR ESQUERDA
    ════════════════════════════════════════ */

    nav.fixed.bottom-0 {
        position: sticky !important;
        bottom: auto !important;
        top: 0 !important;
        left: 0 !important;
        width: 220px !important;
        height: calc(100dvh - 57px) !important;
        grid-column: 1;
        grid-row: 2;

        border-top: none !important;
        border-right: 1px solid rgba(0,0,0,0.07) !important;
        /* FIX BLUR: shadow da nav se espalhava como névoa no canto direito */
        box-shadow: none !important;
        padding-bottom: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 16px 10px !important;
        gap: 2px !important;
        overflow-y: auto;
    }

    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: 12px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        width: 100% !important;
        flex: none !important;
        text-align: left !important;
    }

    .app-nav-btn i {
        font-size: 16px !important;
        width: 20px !important;
        text-align: center;
        flex-shrink: 0;
    }

    .app-nav-btn span {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: .02em !important;
        text-transform: none !important;
    }

    .app-nav-btn.text-indigo-600 {
        background: #eef2ff !important;
        border-radius: 12px !important;
    }

    .app-nav-btn:hover {
        background: rgba(0,0,0,0.04) !important;
    }

    .app-nav-btn:active {
        transform: scale(0.98) !important;
    }

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

    /* ════════════════════════════════════════
       MAIN
    ════════════════════════════════════════ */

    main#mainWrap {
        grid-column: 2;
        grid-row: 2;
        max-width: 720px !important;
        padding: 28px 32px !important;
        align-self: start;
    }

    /* ════════════════════════════════════════
       BANNERS
    ════════════════════════════════════════ */

    #avisosErro {
        top: 57px !important;
        grid-column: 2;
    }

    #avisoOffline {
        grid-column: 2;
    }

    /* ════════════════════════════════════════
       STATUS POPOVER
    ════════════════════════════════════════ */

    #headerStatusPopover {
        top: 62px !important;
    }

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

    .cfg-modal {
        width: min(480px, 100vw) !important;
        left: auto !important;
        right: 0 !important;
        /* FIX BLUR: box-shadow espalhava blur fora da viewport — trocado por borda */
        box-shadow: none !important;
        border-left: 1px solid rgba(0,0,0,0.10) !important;
    }

    /* FIX BLUR: contém o backdrop-filter dos overlays fullscreen */
    #modalStatusImpressora,
    #modalArgox,
    #modalLogBLE,
    #modalConexaoLeitor,
    #modalSenhaConfig {
        overflow: clip;
    }

    #modalArgox > div,
    #modalStatusImpressora > div,
    #modalLogBLE > div,
    #modalConexaoLeitor > div,
    #modalSenhaConfig > div {
        max-width: 420px !important;
    }

    /* ════════════════════════════════════════
       TOAST
    ════════════════════════════════════════ */

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

    /* ════════════════════════════════════════
       BOAS-VINDAS
    ════════════════════════════════════════ */

    #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%;
    }

    /* ════════════════════════════════════════
       HOVER STATES (mouse)
    ════════════════════════════════════════ */

    .card-btn:hover {
        box-shadow: 0 6px 24px -6px rgba(0,0,0,0.13) !important;
        transform: translateY(-1px);
    }

    .card-btn:active {
        transform: translateY(0) scale(0.98) !important;
    }

    /* ════════════════════════════════════════
       SCROLLBAR
    ════════════════════════════════════════ */

    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

}