/* ==========================================================================
   H3 MAIL — ACABAMENTO DA SIDEBAR / CORREÇÃO
   ========================================================================== */


/* --------------------------------------------------------------------------
   Logo centralizada na largura da sidebar
   -------------------------------------------------------------------------- */

@media (min-width: 881px) {

    html body.mail-app
    .topbar
    .topbar-brand {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        align-self: stretch !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        background: var(--nav-bg) !important;

        /*
        | Linha inferior fina e discreta.
        | No tema claro usa o cinza do próprio sistema.
        | No tema escuro também acompanha o border do tema.
        */
        border-bottom:
            1px
            solid
            var(--border)
            !important;
    }

    html body.mail-app
    .topbar
    .topbar-brand
    .brand-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body.mail-app
    .topbar
    .topbar-brand
    .brand-logo {
        display: block !important;

        margin:
            0
            auto !important;
    }
}


/* --------------------------------------------------------------------------
   WhatsApp — mesmo SVG e mesmo tamanho dos demais módulos
   -------------------------------------------------------------------------- */

html body.mail-app
.main-nav
.support-nav-link
.folder-icon {
    width: 20px !important;
    height: 20px !important;

    flex:
        0
        0
        20px !important;

    display: grid !important;
    place-items: center !important;
}

/*
| Configurações, Contatos, Caixa de Entrada etc. usam SVG de 18px.
| O WhatsApp agora segue exatamente a mesma regra.
*/

html body.mail-app
.main-nav
.support-nav-link
.folder-icon svg {
    width: 18px !important;
    height: 18px !important;

    display: block !important;
}


/* --------------------------------------------------------------------------
   Divisores da sidebar
   -------------------------------------------------------------------------- */

/*
| Mesma aparência clara e fina em todos os divisores.
*/

html body.mail-app
.main-nav
.nav-divider {
    height: 1px !important;

    background:
        rgba(255, 255, 255, .07)
        !important;
}

/* =========================================================
   DIVISÃO CORRETA ENTRE LOGO E CONTEÚDO
   ========================================================= */

@media (min-width: 881px) {

    /* Remove a borda clara que atravessa a topbar inteira */
    html body.mail-app .topbar {
        border-bottom: 0 !important;
    }

    /* Linha da área da logo/sidebar */
    html body.mail-app
    .topbar
    .topbar-brand {
        border-bottom: 1px solid #2b2c35 !important;
    }

    /* Recria a linha normal apenas no restante da topbar */
    html body.mail-app
    .topbar::after {
        content: "";

        position: absolute;
        z-index: 10;

        left: var(--nav-w);
        right: 0;
        bottom: 0;

        height: 1px;

        background: var(--border);

        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {

    html body.mail-app
    .topbar
    .topbar-brand {
        border-bottom:
            1px
            solid
            var(--border)
            !important;
    }
}

/* Font Awesome local: ícones reais de fonte para os módulos da sidebar. */

html body.mail-app
.main-nav
.folder-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-grid;
    place-items: center;
    text-align: center;
}

html body.mail-app
.main-nav
.folder-icon i {
    display: block;
    width: 18px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

html body.mail-app
.main-nav
.support-nav-link
.folder-icon i {
    font-size: 17px;
}