/* ── SJ Solutions — interface logada (layout Elastic nativo + visual) ─ */

:root {
    --sj-blue: #4b5563;
    --sj-blue-dark: #374151;
    --sj-blue-deep: #1f2937;
    --sj-blue-soft: #f3f4f6;
    --sj-blue-muted: #e5e7eb;
    --sj-ink: #1f2937;
    --sj-text: #64748b;
    --sj-text-muted: #94a3b8;
    --sj-border: #e5e7eb;
    --sj-surface: #ffffff;
    --sj-surface-alt: #f8fafc;
    --sj-sidebar-bg: #f3f4f6;
    --sj-topbar-wine: #991b1b;
    --sj-topbar-h: 60px;
    --sj-topbar-h-mobile: 52px;
    --sj-radius-sm: 10px;
    --sj-radius-md: 14px;
    --sj-radius-pill: 999px;
    --sj-shadow-sm: 0 1px 3px rgba(30, 41, 59, 0.06);
    --sj-shadow-md: 0 8px 24px rgba(30, 41, 59, 0.08);
}

body:not(.task-login) {
    font-family: Inter, "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--sj-ink);
}

body:not(.task-login) #layout {
    background: var(--sj-surface-alt);
}

body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
    background: var(--sj-surface);
}

body:not(.task-login) #layout-sidebar {
    border-right: 1px solid var(--sj-border);
}

body:not(.task-login) #layout-list {
    border-right: 1px solid var(--sj-border);
}

/* ── Menu lateral (taskmenu) ─────────────────────────────────────────── */

@media screen and (min-width: 769px) {
    #layout-menu.sj-layout-menu {
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #111827 0%, #1f2937 28%, #374151 58%, #111827 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 4px 0 24px rgba(7, 21, 37, 0.22);
        width: 92px !important;
    }

    #layout-menu.sj-layout-menu .popover-header.sj-menu-header {
        display: none !important;
    }

    #layout-menu.sj-layout-menu .sj-menu-brand {
        display: flex;
        justify-content: center;
        padding: 0.85rem 0.45rem 0.7rem;
        margin-bottom: 0.15rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #layout-menu.sj-layout-menu .sj-menu-brand .sj-menu-icon {
        display: block;
        margin: 0 auto;
        width: 74px;
        height: 74px;
        max-height: 74px !important;
        max-width: 74px !important;
        padding: 0 !important;
        border-radius: 18px;
        object-fit: cover;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    #layout-menu.sj-layout-menu #taskmenu {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 0.45rem 0.55rem;
        gap: 0.1rem;
    }

    #layout-menu.sj-layout-menu #taskmenu .action-buttons {
        position: static !important;
        order: 0;
        width: 100%;
        margin: 0 0 0.55rem;
        padding: 0 0 0.55rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: transparent !important;
    }

    #layout-menu.sj-layout-menu #taskmenu .action-buttons a.compose {
        width: 100% !important;
        min-height: 40px;
        margin: 0;
        border-radius: var(--sj-radius-sm) !important;
        background: linear-gradient(180deg, #6b7280 0%, var(--sj-blue) 100%) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 4px 14px rgba(75, 85, 99, 0.35) !important;
        font-weight: 600;
    }

    #layout-menu.sj-layout-menu #taskmenu .action-buttons a.compose:hover {
        background: linear-gradient(180deg, var(--sj-blue) 0%, var(--sj-blue-dark) 100%) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(75, 85, 99, 0.4) !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a:not(.compose),
    #layout-menu.sj-layout-menu #taskmenu a:not(.compose) span.inner {
        color: rgba(255, 255, 255, 0.9) !important;
        opacity: 1;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a:not(.compose):before {
        color: rgba(255, 255, 255, 0.92) !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a {
        width: 100% !important;
        border-radius: 8px;
        margin: 0;
        transition: color 0.15s ease, background 0.15s ease;
    }

    #layout-menu.sj-layout-menu #taskmenu a.compose:before,
    #layout-menu.sj-layout-menu #taskmenu a.compose span.inner {
        color: #fff !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a:hover:not(.compose),
    #layout-menu.sj-layout-menu #taskmenu a:focus:not(.compose) {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a.selected:not(.compose) {
        background: rgba(75, 85, 99, 0.28) !important;
        box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.25);
    }

    #layout-menu.sj-layout-menu #taskmenu a.selected:not(.compose):before,
    #layout-menu.sj-layout-menu #taskmenu a.selected:not(.compose) span.inner {
        color: #fff !important;
        font-weight: 600;
    }

    #layout-menu.sj-layout-menu #taskmenu .special-buttons {
        position: static !important;
        margin-top: auto;
        padding-top: 0.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent !important;
    }
}

.sj-menu-brand {
    display: none;
}

@media screen and (min-width: 1201px) {
    #layout-menu.sj-layout-menu {
        width: 102px !important;
    }

    #layout-menu.sj-layout-menu #taskmenu a {
        padding: 0.5rem 0.15rem 0.55rem !important;
    }
}

html.layout-phone #layout-menu.sj-layout-menu .popover-header.sj-menu-header {
    height: auto !important;
    line-height: normal;
    padding: 0.75rem 0.5rem !important;
    background: #1f2937 !important;
}

html.layout-phone #layout-menu.sj-layout-menu {
    background: linear-gradient(180deg, #111827 0%, #1f2937 35%, #374151 100%) !important;
}

html.layout-phone #layout-menu.sj-layout-menu #taskmenu a:not(.compose),
html.layout-phone #layout-menu.sj-layout-menu #taskmenu a:not(.compose) span.inner,
html.layout-phone #layout-menu.sj-layout-menu #taskmenu a:not(.compose):before {
    color: #fff !important;
}

html.layout-phone #layout-menu.sj-layout-menu .sj-menu-icon--mobile {
    max-height: 52px !important;
    max-width: 52px !important;
    border-radius: 14px;
}

#layout-menu.sj-layout-menu,
#layout-menu.sj-layout-menu .popover,
#layout-menu.sj-layout-menu #taskmenu,
#layout-menu.sj-layout-menu #taskmenu .special-buttons {
    background: linear-gradient(180deg, #111827 0%, #1f2937 28%, #374151 58%, #111827 100%) !important;
}

#layout-menu.sj-layout-menu #taskmenu a:not(.compose),
#layout-menu.sj-layout-menu #taskmenu a:not(.compose) span.inner,
#layout-menu.sj-layout-menu #taskmenu a:not(.compose):before,
html.dark-mode #layout-menu.sj-layout-menu #taskmenu a:not(.compose),
html.dark-mode #layout-menu.sj-layout-menu #taskmenu a:not(.compose) span.inner,
html.dark-mode #layout-menu.sj-layout-menu #taskmenu a:not(.compose):before {
    color: #fff !important;
}

#layout-menu.sj-layout-menu #taskmenu a.compose {
    background: #4b5563 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#layout-menu.sj-layout-menu #taskmenu a.compose:hover {
    background: #374151 !important;
}

#layout-menu.sj-layout-menu #taskmenu a.logout,
#layout-menu.sj-layout-menu #taskmenu a.sj-support-link,
#layout-menu.sj-layout-menu #taskmenu a.sj-site-link,
#layout-menu.sj-layout-menu #taskmenu a.settings,
#layout-menu.sj-layout-menu #taskmenu a.contacts,
#layout-menu.sj-layout-menu #taskmenu a.mail {
    color: #fff !important;
}

/* ── Colunas internas ────────────────────────────────────────────────── */

#layout-sidebar .header {
    background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
    border-bottom: 1px solid #e5e7eb;
}

#layout-sidebar .header .username {
    color: #3f1519;
    font-weight: 600;
    font-size: 0.88rem;
}

#layout-list .header,
#layout-content > .header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

#layout-list .header .toolbar a,
#layout-content > .header .toolbar a,
#layout-content > .header .menu.toolbar li > a,
#mailtoolbar a {
    color: #475569 !important;
}

#layout-list .header .toolbar a:hover,
#layout-content > .header .toolbar a:hover,
#layout-content > .header .menu.toolbar li > a:hover,
#mailtoolbar a:hover {
    color: #1e293b !important;
    background-color: rgba(75, 85, 99, 0.08) !important;
}

/* ── Botões internos (toolbars) ─────────────────────────────────────── */

body:not(.task-login) #layout-list > .header > ul.menu.toolbar.popupmenu,
body:not(.task-login) #layout-content > .header > ul.menu.toolbar.popupmenu {
    display: none !important;
}

@media screen and (min-width: 769px) {
    /* Lista — ícones circulares compactos */
    body:not(.task-login) #layout-list > .header > ul.menu.toolbar:not(.popupmenu) li > a,
    body:not(.task-login) #layout-list > .header .toolbar.menu a,
    body:not(.task-login) #layout-list > .header > a.button.icon.toolbar-button {
        width: 2.125rem !important;
        height: 2.125rem !important;
        min-width: 2.125rem !important;
        max-width: 2.125rem !important;
        border-radius: 50% !important;
        border: 1px solid transparent;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    body:not(.task-login) #layout-list > .header .toolbar a .inner,
    body:not(.task-login) #layout-list > .header a.toolbar-button .inner {
        display: none !important;
    }

    body:not(.task-login) #layout-list > .header > ul.menu.toolbar:not(.popupmenu) li > a:before,
    body:not(.task-login) #layout-list > .header .toolbar.menu a:before,
    body:not(.task-login) #layout-list > .header > a.button.icon:before {
        float: none !important;
        margin: 0 !important;
        font-size: 1rem !important;
    }

    /* Leitura — ícones circulares (padrão) */
    body:not(.task-login) #layout-content > .header > ul.menu.toolbar:not(.popupmenu) li > a,
    body:not(.task-login) #layout-content > .header > a.button.icon {
        width: 2.125rem !important;
        height: 2.125rem !important;
        min-width: 2.125rem !important;
        max-width: 2.125rem !important;
        border-radius: 50% !important;
        border: 1px solid transparent;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    body:not(.task-login) #layout-content > .header .toolbar a .inner,
    body:not(.task-login) #layout-content > .header a.toolbar-button .inner {
        display: none !important;
    }

    body:not(.task-login) #layout-content > .header > ul.menu.toolbar:not(.popupmenu) li > a:before,
    body:not(.task-login) #layout-content > .header > a.button.icon:before {
        float: none !important;
        margin: 0 !important;
        font-size: 1rem !important;
    }

    /* Hover / ativo */
    body:not(.task-login) #layout-list > .header .toolbar a:not(.disabled):hover,
    body:not(.task-login) #layout-list > .header > a.button.icon:not(.disabled):hover,
    body:not(.task-login) #layout-content > .header .toolbar a:not(.disabled):hover,
    body:not(.task-login) #layout-content > .header > a.button.icon:not(.disabled):hover {
        background: var(--sj-blue-soft) !important;
        border-color: var(--sj-blue-muted) !important;
        color: var(--sj-blue-dark) !important;
    }

    body:not(.task-login) #layout-list > .header .toolbar a.disabled,
    body:not(.task-login) #layout-content > .header .toolbar a.disabled {
        opacity: 0.38;
        cursor: default;
    }

    /* Dropbuttons — responder / encaminhar */
    body:not(.task-login) #layout-content > .header .dropbutton {
        display: inline-flex;
        align-items: stretch;
        height: 2.125rem;
        border: 1px solid var(--sj-border);
        border-radius: var(--sj-radius-sm);
        overflow: hidden;
        background: var(--sj-surface);
        box-shadow: var(--sj-shadow-sm);
    }

    body:not(.task-login) #layout-content > .header .dropbutton:hover {
        border-color: #d4a5a5;
        background: var(--sj-blue-soft);
    }

    body:not(.task-login) #layout-content > .header .dropbutton > a {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    body:not(.task-login) #layout-content > .header .dropbutton > a:first-child {
        width: 2.125rem !important;
        min-width: 2.125rem !important;
    }

    body:not(.task-login) #layout-content > .header .dropbutton > a.dropdown {
        width: 1.25rem !important;
        min-width: 1.25rem !important;
        max-width: 1.25rem !important;
        background: rgba(15, 23, 42, 0.04) !important;
    }

    body:not(.task-login) #layout-content > .header .dropbutton > a.dropdown:before {
        display: none !important;
    }

    body:not(.task-login) #layout-content > .header .dropbutton > a.dropdown:after {
        content: "\f0d7";
        font-family: Icons, "Font Awesome 5 Free" !important;
        font-weight: 900;
        font-size: 0.65rem;
        color: var(--sj-text-muted);
    }

    body:not(.task-login) #layout-list > .header > ul.menu.toolbar:not(.popupmenu),
    body:not(.task-login) #layout-content > .header > ul.menu.toolbar:not(.popupmenu) {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
        min-width: 0;
        gap: 0.15rem;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }

    body:not(.task-login) #layout-list > .header > ul.menu.toolbar:not(.popupmenu) > li,
    body:not(.task-login) #layout-content > .header > ul.menu.toolbar:not(.popupmenu) > li {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: auto !important;
    }

    html.layout-large body:not(.task-login) #layout-content > .header > ul#toolbar-menu > li:has(> a.hidden-large),
    html.layout-normal body:not(.task-login) #layout-content > .header > ul#toolbar-menu > li:has(> a.hidden-big) {
        display: none !important;
    }
}

/* Desktop largo — toolbar de leitura com ícone + texto (estilo ribbon) */
@media screen and (min-width: 1201px) {
    html.layout-large body:not(.task-login) #layout-content > .header > ul#toolbar-menu:not(.popupmenu) li > a:not(.dropdown) {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 2rem !important;
        padding: 0 0.7rem 0 0.55rem !important;
        border-radius: var(--sj-radius-sm) !important;
        gap: 0.35rem;
        font-size: 0.8125rem;
        font-weight: 500;
        border: 1px solid transparent;
    }

    html.layout-large body:not(.task-login) #layout-content > .header > ul#toolbar-menu:not(.popupmenu) li > a:not(.dropdown) .inner {
        display: inline !important;
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
    }

    html.layout-large body:not(.task-login) #layout-content > .header > ul#toolbar-menu:not(.popupmenu) li > a:not(.dropdown):before {
        flex-shrink: 0;
    }

    html.layout-large body:not(.task-login) #layout-content > .header .dropbutton {
        height: 2rem;
    }

    html.layout-large body:not(.task-login) #layout-content > .header .dropbutton > a:first-child {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 0.45rem 0 0.55rem !important;
    }

    html.layout-large body:not(.task-login) #layout-content > .header .dropbutton > a:first-child .inner {
        display: inline !important;
        font-size: 0.8125rem;
        font-weight: 500;
    }
}

/* Mobile — kebab visível */
html.layout-phone body:not(.task-login) #layout-list > .header a.toolbar-list-button,
html.layout-small body:not(.task-login) #layout-list > .header a.toolbar-list-button,
html.layout-phone body:not(.task-login) #layout-content > .header a.toolbar-menu-button,
html.layout-small body:not(.task-login) #layout-content > .header a.toolbar-menu-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.125rem !important;
    height: 2.125rem !important;
    border-radius: 50% !important;
}

#layout-sidebar .listing li a,
#layout-list .listing li a,
.folderlist li a {
    color: #374151;
}

.listing li.selected,
.listing li.selected:focus,
.listing li.selected > a {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}

.listing li.selected {
    box-shadow: inset 3px 0 0 #9ca3af;
}

.folderlist li.selected > a {
    font-weight: 600;
    color: #1f2937 !important;
}

.messagelist tr.selected td {
    background-color: var(--sj-blue-soft) !important;
}

.messagelist tr.selected td.subject {
    box-shadow: inset 3px 0 0 var(--sj-blue);
}

.messagelist tr.unread td.subject span {
    font-weight: 600;
    color: #0f172a;
}

.messagelist tr:hover td {
    background: #f8fafc !important;
}

.messagelist tr.flagged td.subject span {
    color: #d97706;
}

#message-header .subject {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.35rem;
    font-weight: 500;
}

.message-htmlpart a,
.message-part a {
    color: #4b5563;
}

.button.btn-primary,
a.button.btn-primary,
button.btn-primary {
    background-color: #4b5563;
    border-color: #374151;
}

.button.btn-primary:hover,
a.button.btn-primary:hover,
button.btn-primary:hover {
    background-color: #374151;
    border-color: #374151;
}

.searchbar input:focus {
    border-color: #d4a5a5;
    box-shadow: 0 0 0 0.15rem rgba(75, 85, 99, 0.18);
}

.quota-widget .count {
    color: #64748b;
    font-weight: 600;
}

body.task-mail #layout-sidebar .listing li a,
body.task-mail #layout-list .listing li a,
body.task-mail #layout-list .messagelist td,
body.task-mail #layout-list .messagelist td a,
body.task-mail #layout-content .header a:not(.btn-primary),
body.task-mail .popupmenu .listing a {
    color: #475569;
}

body.task-mail #layout-sidebar .listing li a:hover,
body.task-mail #layout-list .listing li a:hover,
body.task-mail #layout-list .messagelist tr:hover td,
body.task-mail .popupmenu .listing a:hover {
    color: #1e293b;
}

body.task-mail .popupmenu .listing li.selected a,
body.task-mail #layout-list .menu.toolbar a.selected:not(.compose),
body.task-mail #layout-content > .header .menu.toolbar a.selected:not(.compose),
body.task-mail #mailtoolbar a.selected {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
}

/* ── Refinamentos: pastas, lista, busca, leitura ───────────────────── */

#layout-sidebar .header {
    min-height: 52px;
    padding: 0 0.75rem;
}

#layout-sidebar .header .username {
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#layout-sidebar .scroller,
#layout-sidebar #folderlist-content {
    padding: 0.35rem 0.5rem 0.75rem 0.65rem;
}

.folderlist li a {
    border-radius: 0 var(--sj-radius-pill) var(--sj-radius-pill) 0;
    margin-right: 0.35rem;
    padding-right: 0.65rem;
    font-size: 0.875rem;
    line-height: 2.15rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.folderlist li a:hover {
    background: var(--sj-surface-alt) !important;
}

.folderlist li.selected > a {
    background: var(--sj-blue-soft) !important;
}

.folderlist li .unreadcount,
.folderlist li .count {
    background: var(--sj-blue) !important;
    color: #fff !important;
    border-radius: var(--sj-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 1.35rem;
    padding: 0 0.35rem;
    line-height: 1.35rem;
}

#layout-list .header,
#layout-content > .header {
    min-height: 52px;
    background: var(--sj-surface);
    box-shadow: var(--sj-shadow-sm);
}

#layout-list .searchbar {
    padding: 0.55rem 0.65rem 0.5rem;
    background: var(--sj-surface-alt);
    border-bottom: 1px solid var(--sj-border);
}

#layout-list .searchbar form {
    display: flex;
    align-items: center;
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-pill);
    padding: 0 0.35rem 0 0;
    box-shadow: var(--sj-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#layout-list .searchbar form:focus-within {
    border-color: #d4a5a5;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.12);
}

#layout-list .searchbar input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.9rem;
    padding: 0.55rem 0.65rem;
}

#layout-list .searchbar form:before {
    color: var(--sj-text-muted);
    margin-left: 0.75rem;
}

/* Lista de mensagens */
.messagelist tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

.messagelist td {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    vertical-align: top;
}

.messagelist td.subject {
    line-height: 1.35;
}

.messagelist td.subject span.fromto {
    display: block;
    font-size: 0.875rem;
    color: var(--sj-ink);
    margin-bottom: 0.15rem;
}

.messagelist td.subject span.subject {
    display: block;
    font-size: 0.8125rem;
    color: var(--sj-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messagelist td.subject span.date,
.messagelist td.subject span.size {
    color: var(--sj-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.messagelist tr.unread td.subject span.fromto {
    color: var(--sj-ink);
}

.messagelist tr.unread td.subject span.subject {
    color: #334155;
}

body:not(.task-login) #layout-content .iframe-wrapper {
    background: var(--sj-surface-alt);
}

#message-header .subject {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sj-ink);
    padding: 1.1rem 1.25rem 0.85rem;
    line-height: 1.3;
}

#message-header > .header {
    padding: 0.5rem 1.25rem 1rem;
    color: var(--sj-text);
    font-size: 0.875rem;
}

#message-content {
    padding: 0 1.25rem 1.75rem;
    line-height: 1.6;
    font-size: 0.9375rem;
}

#layout-list > .footer,
#layout-list > .pagenav,
#layout-list .footer {
    background: var(--sj-surface);
    border-top: 1px solid var(--sj-border);
    color: var(--sj-text-muted);
    font-size: 0.8125rem;
}

/* Popups e menus */
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected {
    background-color: var(--sj-blue) !important;
    color: #fff !important;
}

/* Modo escuro */
html.dark-mode body:not(.task-login) {
    color: #e2e8f0;
}

html.dark-mode body:not(.task-login) #layout {
    background: #0f172a;
}

html.dark-mode body:not(.task-login) #layout-sidebar,
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode #layout-sidebar .header {
    background: #1e293b;
    border-bottom-color: #334155;
}

html.dark-mode #layout-sidebar .header .username {
    color: #d4a5a5;
}

html.dark-mode #layout-list .header,
html.dark-mode #layout-content > .header {
    background: #1e293b;
    border-bottom-color: #334155;
    box-shadow: none;
}

html.dark-mode #layout-list .searchbar {
    background: #0f172a;
    border-bottom-color: #334155;
}

html.dark-mode #layout-list .searchbar form {
    background: #334155;
    border-color: #475569;
}

html.dark-mode #layout-list .searchbar input {
    color: #f1f5f9;
}

html.dark-mode .folderlist li a {
    color: #cbd5e1;
}

html.dark-mode .folderlist li a:hover {
    background: #334155 !important;
}

html.dark-mode .folderlist li.selected > a,
html.dark-mode .listing li.selected > a {
    background: rgba(75, 85, 99, 0.22) !important;
    color: #d4a5a5 !important;
}

html.dark-mode .messagelist tr:hover td {
    background: #334155 !important;
}

html.dark-mode .messagelist tr.selected td {
    background: rgba(75, 85, 99, 0.18) !important;
}

html.dark-mode .messagelist td.subject span.fromto {
    color: #f1f5f9;
}

html.dark-mode .messagelist td.subject span.subject {
    color: #94a3b8;
}

html.dark-mode #message-header .subject {
    color: #f1f5f9;
    border-bottom-color: #334155;
}

html.dark-mode body:not(.task-login) #layout-content .iframe-wrapper {
    background: #0f172a;
}

/* Login — nunca herdar fundo da interface logada */
body.task-login #layout {
    background: transparent !important;
}

body.task-login #layout-content.sj-login-card {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.07) 48%,
        rgba(255, 255, 255, 0.05) 100%
    ) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Shell estilo referência — topbar + 3 colunas (Elastic intacto)
   ══════════════════════════════════════════════════════════════════════ */

body.sj-app-shell:not(.task-login) #layout {
    flex-wrap: wrap;
    align-content: stretch;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.sj-app-shell:not(.task-login) #sj-topbar {
    flex: 0 0 100%;
    width: 100%;
    order: -10;
}

body.sj-app-shell:not(.task-login) #layout-menu,
body.sj-app-shell:not(.task-login) #layout-sidebar,
body.sj-app-shell:not(.task-login) #layout-list,
body.sj-app-shell:not(.task-login) #layout-content {
    height: calc(100dvh - var(--sj-topbar-h));
    max-height: calc(100dvh - var(--sj-topbar-h));
    min-height: 0;
}

/* Topbar Bdente — vermelho forte só aqui */
.sj-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--sj-topbar-h);
    min-height: var(--sj-topbar-h);
    padding: 0 0.85rem 0 0.55rem;
    background: var(--sj-topbar-wine) !important;
    color: #fff;
    box-shadow: 0 2px 12px rgba(63, 21, 25, 0.35);
    z-index: 200;
}

.sj-topbar__start {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 0;
}

.sj-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    padding: 0.2rem 0.35rem 0.2rem 0.15rem;
    border-radius: var(--sj-radius-md);
    background: transparent;
    border: none;
    transition: opacity 0.15s ease;
}

.sj-topbar__brand:hover {
    background: transparent;
    opacity: 0.92;
    text-decoration: none;
    color: inherit;
}

.sj-topbar__logo-img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.sj-topbar__logo-img--horizontal {
    width: auto;
    height: 40px;
    max-width: min(200px, 38vw);
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
}

.sj-topbar__editorial {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    line-height: 1.2;
}

.sj-topbar__company {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    white-space: nowrap;
}

.sj-topbar__tagline {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.sj-topbar__nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 0 0 auto;
}

.sj-topbar__links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}

.sj-topbar__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--sj-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sj-topbar__link-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff !important;
    text-decoration: none !important;
}

.sj-topbar__link-icon {
    flex-shrink: 0;
    opacity: 0.92;
}

.sj-topbar__end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.sj-topbar__menu {
    display: none !important;
}

.sj-topbar__nav-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
    float: none !important;
    padding: 0 !important;
}

.sj-topbar__nav-item span.inner {
    display: none !important;
}

.sj-topbar__nav-item:before {
    color: #fff !important;
    margin: 0 !important;
    float: none !important;
}

.sj-topbar__nav-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.sj-topbar__nav-item.selected {
    background: rgba(255, 255, 255, 0.22) !important;
}

.sj-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 180px;
    padding: 0.2rem 0.55rem 0.2rem 0.2rem;
    border-radius: var(--sj-radius-pill);
    background: rgba(255, 255, 255, 0.14);
}

.sj-topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #fff;
    color: var(--sj-topbar-wine);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sj-topbar__email {
    font-size: 0.78rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sj-topbar__logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    border-radius: 50% !important;
    color: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
    float: none !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.sj-topbar__logout:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.sj-topbar__logout span.inner {
    display: none !important;
}

#sj-topbar a.sj-topbar__logout:before,
.sj-topbar__logout:before {
    content: "\f011" !important;
    font-family: 'Icons' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: block !important;
    float: none !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    font-size: 1.05rem !important;
    line-height: 1.1rem !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* Desktop: menu lateral estreito some (nav no topbar) */
@media screen and (min-width: 1025px) {
    body.sj-app-shell #layout-menu.sj-layout-menu {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
    }
}

@media screen and (max-width: 1024px) {
    .sj-topbar__menu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 50% !important;
        color: #fff !important;
    }

    .sj-topbar__menu span.inner {
        display: none !important;
    }

    .sj-topbar__nav {
        display: none;
    }

    .sj-topbar__tagline {
        display: none;
    }

    .sj-topbar__company {
        font-size: 0.85rem;
    }

    .sj-topbar__logo-img--horizontal {
        height: 34px;
        max-width: min(170px, 46vw);
    }

    .sj-topbar__link-btn span {
        display: none;
    }

    .sj-topbar__link-btn {
        padding: 0.45rem;
        width: 2.15rem;
        height: 2.15rem;
        justify-content: center;
    }

    .sj-topbar__email {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .sj-topbar__editorial {
        display: none;
    }

    .sj-topbar__links {
        display: none;
    }

    .sj-topbar__logo-img--horizontal {
        height: 30px;
        max-width: min(140px, 52vw);
    }
}

/* ── Pastas (sidebar) ─────────────────────────────────────────────── */

body.sj-app-shell.task-mail #layout-sidebar {
    background: var(--sj-sidebar-bg) !important;
    border-right: 1px solid #e5e7eb;
}

@media screen and (min-width: 769px) {
    body.sj-app-shell.task-mail #layout-sidebar {
        flex: 0 0 220px;
        width: 220px;
        min-width: 200px;
        max-width: 260px;
    }
}

@media screen and (min-width: 769px) {
    body.sj-app-shell.task-mail #layout-sidebar > .header {
        display: none;
    }
}

body.sj-app-shell #layout-sidebar .scroller,
body.sj-app-shell #layout-sidebar #folderlist-content {
    padding: 0.65rem 0.45rem 0.5rem 0.55rem;
}

body.sj-app-shell .folderlist li a {
    border-radius: var(--sj-radius-sm);
    margin: 0.1rem 0.25rem;
    padding: 0 0.65rem;
    line-height: 2.35rem;
    font-size: 0.875rem;
    font-weight: 500;
}

body.sj-app-shell .folderlist li.selected > a {
    background: #f3f4f6 !important;
    color: #3f1519 !important;
    box-shadow: none;
    font-weight: 600;
}

body.sj-app-shell .folderlist li .unreadcount,
body.sj-app-shell .folderlist li .count {
    background: #e5e7eb !important;
    color: #374151 !important;
    font-weight: 700;
    border-radius: var(--sj-radius-pill);
}

body.sj-app-shell #layout-sidebar > .footer {
    padding: 0.5rem 0.65rem 0.75rem;
    background: transparent;
    border-top: none;
}

body.sj-app-shell #layout-sidebar .quota-widget {
    background: #fff;
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-md);
    padding: 0.65rem 0.75rem;
    box-shadow: var(--sj-shadow-sm);
    font-size: 0.8rem;
    color: var(--sj-text);
}

/* ── Lista — Escrever + toolbar pills ───────────────────────────────── */

body.sj-app-shell .sj-list-compose {
    padding: 0.75rem 0.75rem 0.35rem;
    background: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
}

body.sj-app-shell .sj-compose-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 1rem !important;
    border-radius: var(--sj-radius-pill) !important;
    background: linear-gradient(180deg, #6b7280 0%, var(--sj-blue) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(75, 85, 99, 0.35) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    float: none !important;
}

body.sj-app-shell .sj-compose-pill:before {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
}

body.sj-app-shell .sj-compose-pill span.inner {
    display: inline !important;
    color: #fff !important;
    font-weight: 600;
}

body.sj-app-shell .sj-compose-pill:hover {
    background: linear-gradient(180deg, var(--sj-blue) 0%, var(--sj-blue-dark) 100%) !important;
    transform: translateY(-1px);
}

body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: auto;
    height: auto !important;
    max-height: none !important;
    padding: 0.45rem 0.65rem 0.55rem;
    background: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
    box-shadow: none;
}

body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome .header-title {
    display: none !important;
}

@media screen and (min-width: 769px) {
    body.sj-app-shell.task-mail #layout-list.sj-mail-list > .header.sj-list-chrome .task-menu-button,
    body.sj-app-shell.task-mail #layout-list.sj-mail-list > .header.sj-list-chrome .back-sidebar-button,
    body.sj-app-shell.task-mail #layout-list.sj-mail-list > .header.sj-list-chrome a.toolbar-button.refresh {
        display: none !important;
    }
}

/* Toolbar lista — pills com texto (referência) */
@media screen and (min-width: 769px) {
    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        flex: 1;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.select,
    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.options {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 2.1rem !important;
        padding: 0 0.85rem !important;
        border-radius: var(--sj-radius-pill) !important;
        border: 1.5px solid var(--sj-blue) !important;
        background: #fff !important;
        color: var(--sj-blue) !important;
        font-weight: 600;
        float: none !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.select .inner,
    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.options .inner {
        display: inline !important;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--sj-blue) !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.select:before,
    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.options:before {
        display: none !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.threads {
        display: none !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.select:hover,
    body.sj-app-shell #layout-list.sj-mail-list > .header .toolbar.menu a.options:hover {
        background: var(--sj-blue-soft) !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header > ul#toolbar-list-menu:not(.popupmenu) {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-left: auto;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header > ul#toolbar-list-menu:not(.popupmenu) li > a {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 2.1rem !important;
        padding: 0 0.85rem !important;
        border-radius: var(--sj-radius-pill) !important;
        border: 1.5px solid var(--sj-blue) !important;
        background: #fff !important;
        color: var(--sj-blue) !important;
    }

    body.sj-app-shell #layout-list.sj-mail-list > .header > ul#toolbar-list-menu:not(.popupmenu) li > a .inner {
        display: inline !important;
        font-size: 0.8125rem;
        font-weight: 600;
    }
}

/* Busca abaixo da toolbar */
body.sj-app-shell #layout-list .searchbar {
    padding: 0.5rem 0.75rem;
    background: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
}

body.sj-app-shell #layout-list .searchbar form {
    background: var(--sj-surface-alt);
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

/* Lista de mensagens — cards leves */
body.sj-app-shell .messagelist tbody tr {
    border-bottom: 1px solid #eef2f7;
    transition: background 0.12s ease;
}

body.sj-app-shell .messagelist tr.selected td {
    background: var(--sj-blue-soft) !important;
}

body.sj-app-shell .messagelist tr.selected td.subject {
    box-shadow: inset 4px 0 0 var(--sj-blue);
}

body.sj-app-shell .messagelist td.subject span.fromto {
    font-weight: 600;
    font-size: 0.875rem;
}

body.sj-app-shell .messagelist td.subject span.subject {
    font-size: 0.8125rem;
    color: var(--sj-text);
}

body.sj-app-shell .messagelist td.subject span.date {
    float: right;
    font-size: 0.75rem;
    color: var(--sj-text-muted);
    font-weight: 500;
}

/* Menu de contexto — botão direito na lista de mensagens */
body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing {
    min-width: 220px;
    padding: 0.35rem;
}

body.sj-app-shell .popover:has(#messagelist-context-menu) .popover-body,
body.sj-app-shell .popover-body #messagelist-context-menu {
    padding: 0;
}

body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li > a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--sj-radius-sm);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--sj-ink);
}

body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li > a .inner {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
}

body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li > a:not(.disabled):hover,
body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li > a.active:hover {
    background: var(--sj-blue-soft);
    color: var(--sj-blue-dark);
}

body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li.separator {
    margin: 0.25rem 0.35rem;
    border-top: 1px solid var(--sj-border);
}

body.sj-app-shell #messagelist-context-menu.sj-context-menu ul.menu.listing > li > a.delete:not(.disabled):hover {
    background: #f3f4f6;
    color: #374151;
}

body.sj-app-shell .messagelist tbody tr {
    cursor: context-menu;
}

/* Leitura — painel limpo */
body.sj-app-shell #layout-content > .header {
    background: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
    padding: 0.35rem 0.5rem;
}

body.sj-app-shell #layout-content .iframe-wrapper {
    padding: 0.75rem;
    background: var(--sj-surface-alt);
}

body.sj-app-shell #message-header .subject {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sj-ink);
}

body.sj-app-shell #message-content,
body.sj-app-shell .message-htmlpart,
body.sj-app-shell .message-part {
    background: #fff;
    border-radius: var(--sj-radius-md);
    border: 1px solid var(--sj-border);
    box-shadow: var(--sj-shadow-sm);
}

body.sj-app-shell #message-content {
    margin: 0 0.75rem 1rem;
    padding: 1rem 1.15rem;
}

/* Esconde compose duplicado no menu lateral (desktop) */
@media screen and (min-width: 1025px) {
    body.sj-app-shell #layout-menu #taskmenu .action-buttons {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Compose — novo e-mail
   ══════════════════════════════════════════════════════════════════════ */

body.sj-app-shell.task-mail.action-compose #layout-content.sj-compose-main {
    background: var(--sj-surface-alt);
}

body.sj-app-shell.task-mail.action-compose #layout-content.sj-compose-main > .header.sj-compose-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.45rem 1rem;
    background: var(--sj-surface);
    border-bottom: 1px solid var(--sj-border);
    box-shadow: var(--sj-shadow-sm);
}

body.sj-app-shell.task-mail.action-compose .sj-compose-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sj-ink);
    letter-spacing: -0.01em;
}

body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.38rem 0.8rem 0.38rem 0.65rem;
    border-radius: var(--sj-radius-pill);
    border: 1px solid var(--sj-border);
    background: var(--sj-surface-alt);
    color: var(--sj-ink);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn:hover,
body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn:focus {
    background: var(--sj-blue-soft);
    border-color: var(--sj-blue-muted);
    color: var(--sj-blue-dark);
}

body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn span.inner {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn:before {
    font-size: 0.95rem;
    opacity: 0.9;
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .sj-compose-cancel-btn {
    margin-left: 0.15rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--sj-radius-pill);
    border: 1px solid var(--sj-border);
    background: transparent;
    color: var(--sj-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .sj-compose-cancel-btn:hover,
body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .sj-compose-cancel-btn:focus {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-wrap: wrap;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar > a,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar > span.dropbutton {
    display: inline-flex;
    align-items: center;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.72rem;
    border-radius: var(--sj-radius-pill);
    border: 1px solid var(--sj-border);
    background: var(--sj-surface);
    color: var(--sj-ink);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button:hover,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options:hover,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses:hover {
    background: var(--sj-blue-soft);
    border-color: var(--sj-blue-muted);
    color: var(--sj-blue-dark);
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button:before,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options:before,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses:before {
    font-size: 0.95rem;
    opacity: 0.85;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button span.inner,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options span.inner,
body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses span.inner {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar .spacer {
    display: none;
}

body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0.85rem 1rem 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form > form > .formcontent.scroller,
body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form > form .formcontent.scroller {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-compose #compose-headers.sj-compose-headers {
    flex-shrink: 0;
    margin-bottom: 0.65rem;
    padding: 0.35rem 1rem 0;
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-md);
    box-shadow: var(--sj-shadow-sm);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .form-group.row {
    align-items: center;
    margin: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--sj-border);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .form-group.row:last-child {
    border-bottom: 0;
}

body.sj-app-shell.task-mail.action-compose .compose-headers label.col-form-label {
    flex: 0 0 4.5rem;
    max-width: 4.5rem;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sj-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.sj-app-shell.task-mail.action-compose .compose-headers .col-10 {
    flex: 1;
    max-width: calc(100% - 4.5rem);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .form-control,
body.sj-app-shell.task-mail.action-compose .compose-headers .custom-select,
body.sj-app-shell.task-mail.action-compose .compose-headers .recipient-input {
    border: 1px solid transparent;
    border-radius: var(--sj-radius-sm);
    background: var(--sj-surface-alt);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body.sj-app-shell.task-mail.action-compose .compose-headers .form-control:focus,
body.sj-app-shell.task-mail.action-compose .compose-headers .custom-select:focus,
body.sj-app-shell.task-mail.action-compose .compose-headers .recipient-input:focus-within {
    border-color: var(--sj-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.12);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .input-group .input-group-text.icon {
    border: 0;
    background: transparent;
    color: var(--sj-text);
    border-radius: var(--sj-radius-sm);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .input-group .input-group-text.icon:hover {
    background: var(--sj-blue-soft);
    color: var(--sj-blue-dark);
}

body.sj-app-shell.task-mail.action-compose .compose-headers .recipient-input li.recipient {
    border-radius: var(--sj-radius-pill);
    border-color: var(--sj-blue-muted);
    background: var(--sj-blue-soft);
    color: var(--sj-blue-deep);
    font-weight: 500;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 220px;
    margin-bottom: 0.65rem;
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-md);
    box-shadow: var(--sj-shadow-sm);
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox-tinymce {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 220px !important;
    height: 100% !important;
    max-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-editor-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-sidebar-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-edit-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-edit-area__iframe {
    height: 100% !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body textarea#composebody {
    flex: 1;
    min-height: 220px;
    max-height: 100%;
    border: 0;
    border-radius: 0;
    padding: 1rem 1.1rem;
    resize: none;
    background: transparent;
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body textarea#composebody::-webkit-scrollbar {
    width: 8px;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body textarea#composebody::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body textarea#composebody::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body textarea#composebody::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-editor-header {
    border-bottom: 1px solid var(--sj-border) !important;
    box-shadow: none !important;
}

body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-toolbar-overlord,
body.sj-app-shell.task-mail.action-compose #composebodycontainer.sj-compose-body .tox .tox-toolbar__primary {
    background: var(--sj-surface-alt) !important;
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    margin: 0 0 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--sj-surface);
    border: 1px solid var(--sj-border);
    border-radius: var(--sj-radius-md);
    box-shadow: var(--sj-shadow-sm);
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .btn.send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.55rem 1.65rem;
    border: 0;
    border-radius: var(--sj-radius-pill);
    background: linear-gradient(135deg, var(--sj-blue) 0%, var(--sj-blue-dark) 100%);
    box-shadow: 0 4px 14px rgba(75, 85, 99, 0.35);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .btn.send:hover,
body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .btn.send:focus {
    background: linear-gradient(135deg, var(--sj-blue-dark) 0%, var(--sj-blue-deep) 100%);
    box-shadow: 0 6px 18px rgba(75, 85, 99, 0.42);
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .float-right .btn-link {
    color: var(--sj-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .float-right .btn-link:hover {
    color: var(--sj-blue-dark);
}

/* Painel lateral — anexos e opções */
body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar {
    background: var(--sj-surface);
    border-left: 1px solid var(--sj-border);
    max-width: 320px;
}

body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar > .header {
    min-height: 52px;
    padding: 0.45rem 0.85rem;
    background: var(--sj-surface-alt);
    border-bottom: 1px solid var(--sj-border);
}

body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar > .header .header-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sj-ink);
}

body.sj-app-shell.task-mail.action-compose #compose-attachments {
    margin: 0.85rem;
    padding: 0.85rem;
    background: var(--sj-surface-alt);
    border: 1px dashed var(--sj-border);
    border-radius: var(--sj-radius-md);
}

body.sj-app-shell.task-mail.action-compose #compose-attachments .upload-form .btn.attach {
    width: 100%;
    border-radius: var(--sj-radius-pill);
    border: 1px solid var(--sj-blue-muted);
    background: var(--sj-blue-soft);
    color: var(--sj-blue-dark);
    font-size: 0.8rem;
    font-weight: 600;
}

body.sj-app-shell.task-mail.action-compose #compose-attachments .upload-form .btn.attach:hover {
    background: var(--sj-blue-muted);
    border-color: var(--sj-blue);
    color: var(--sj-blue-deep);
}

body.sj-app-shell.task-mail.action-compose #compose-attachments .attachmentslist li {
    border-radius: var(--sj-radius-sm);
    border: 1px solid var(--sj-border);
    background: #fff;
    margin-bottom: 0.4rem;
}

body.sj-app-shell.task-mail.action-compose #compose-options {
    padding: 0.85rem;
}

body.sj-app-shell.task-mail.action-compose #compose-options .form-group.row {
    margin-bottom: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--sj-border);
}

body.sj-app-shell.task-mail.action-compose #compose-options .form-group.row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

body.sj-app-shell.task-mail.action-compose #compose-options label.col-form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sj-text);
}

body.sj-app-shell.task-mail.action-compose #compose-options .custom-select,
body.sj-app-shell.task-mail.action-compose #compose-options .form-check-input {
    border-radius: var(--sj-radius-sm);
}

@media screen and (min-width: 1025px) {
    body.sj-app-shell.task-mail.action-compose #layout-content.sj-compose-main > .header.sj-compose-header .task-menu-button {
        display: none !important;
    }

    body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar {
        order: 2;
    }
}

@media screen and (max-width: 768px) {
    body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn span.inner {
        display: none;
    }

    body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn {
        padding: 0.42rem 0.55rem;
    }

    body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form {
        padding: 0.5rem 0.5rem 0;
    }

    body.sj-app-shell.task-mail.action-compose #compose-headers.sj-compose-headers {
        padding: 0.25rem 0.65rem 0;
        border-radius: var(--sj-radius-sm);
    }

    body.sj-app-shell.task-mail.action-compose .compose-headers label.col-form-label {
        flex: 0 0 3.25rem;
        max-width: 3.25rem;
        font-size: 0.72rem;
    }

    body.sj-app-shell.task-mail.action-compose .compose-headers .col-10 {
        max-width: calc(100% - 3.25rem);
    }

    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button span.inner,
    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options span.inner,
    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses span.inner {
        display: none;
    }

    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.button,
    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.options,
    body.sj-app-shell.task-mail.action-compose #messagetoolbar.sj-compose-toolbar a.responses {
        padding: 0.42rem 0.55rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile / tablet — layout SJ (mobile-first)
   Elastic usa html.layout-phone (≤480px) e html.layout-small (≤768px)
   ══════════════════════════════════════════════════════════════════════ */

html.layout-phone body.sj-app-shell:not(.task-login),
html.layout-small body.sj-app-shell:not(.task-login) {
    --sj-topbar-h: var(--sj-topbar-h-mobile);
}

html.layout-phone body.sj-app-shell:not(.task-login) #layout,
html.layout-small body.sj-app-shell:not(.task-login) #layout {
    flex-wrap: wrap;
    align-content: stretch;
}

html.layout-phone body.sj-app-shell:not(.task-login) #sj-topbar,
html.layout-small body.sj-app-shell:not(.task-login) #sj-topbar {
    height: var(--sj-topbar-h-mobile);
    min-height: var(--sj-topbar-h-mobile);
    padding: 0 0.45rem 0 0.35rem;
    gap: 0.35rem;
}

html.layout-phone body.sj-app-shell:not(.task-login) #layout-menu,
html.layout-small body.sj-app-shell:not(.task-login) #layout-menu {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu antigo oculto — só abre como overlay pelo hambúrguer da topbar */
html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu:not(.popover),
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu:not(.popover) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media screen and (max-width: 768px) {
    body.sj-app-shell #layout-menu.sj-layout-menu:not(.popover) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover:not(.hidden),
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--sj-topbar-h-mobile) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 250;
    overflow: auto;
    flex: 1 1 auto !important;
}

@media screen and (max-width: 768px) {
    body.sj-app-shell #layout-menu.sj-layout-menu.popover:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: var(--sj-topbar-h-mobile) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 250;
        overflow: auto;
        flex: 1 1 auto !important;
    }
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover .sj-menu-brand,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover .sj-menu-brand {
    display: none !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu {
    display: block !important;
    width: 100% !important;
    position: static !important;
    padding: 0.35rem 0 !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 0.75rem 1rem !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    text-align: left !important;
    float: none !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a:before,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a:before {
    float: none !important;
    width: 1.25rem !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a span.inner,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a span.inner {
    display: inline !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .special-buttons,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .special-buttons {
    position: static !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding-top: 0.35rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.layout-phone body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .action-buttons a.compose,
html.layout-small body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .action-buttons a.compose {
    width: calc(100% - 1.25rem) !important;
    margin: 0.5rem 0.65rem !important;
    border-radius: var(--sj-radius-pill) !important;
    justify-content: center !important;
}

@media screen and (max-width: 768px) {
    body.sj-app-shell #layout-menu.sj-layout-menu.popover .sj-menu-brand {
        display: none !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu {
        display: block !important;
        width: 100% !important;
        position: static !important;
        padding: 0.35rem 0 !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        text-align: left !important;
        float: none !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a:before {
        float: none !important;
        width: 1.25rem !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu a span.inner {
        display: inline !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .special-buttons {
        position: static !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        padding-top: 0.35rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    body.sj-app-shell #layout-menu.sj-layout-menu.popover #taskmenu .action-buttons a.compose {
        width: calc(100% - 1.25rem) !important;
        margin: 0.5rem 0.65rem !important;
        border-radius: var(--sj-radius-pill) !important;
        justify-content: center !important;
    }
}

html.layout-phone body.sj-app-shell:not(.task-login) #layout-sidebar,
html.layout-small body.sj-app-shell:not(.task-login) #layout-sidebar,
html.layout-phone body.sj-app-shell:not(.task-login) #layout-list,
html.layout-small body.sj-app-shell:not(.task-login) #layout-list,
html.layout-phone body.sj-app-shell:not(.task-login) #layout-content,
html.layout-small body.sj-app-shell:not(.task-login) #layout-content {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: calc(100dvh - var(--sj-topbar-h-mobile)) !important;
    max-height: calc(100dvh - var(--sj-topbar-h-mobile)) !important;
}

html.layout-phone body.sj-app-shell #menu-overlay.popover-overlay,
html.layout-small body.sj-app-shell #menu-overlay.popover-overlay {
    z-index: 240;
}

/* Lista de e-mails — ocupa tela inteira abaixo da topbar */
html.layout-phone body.sj-app-shell #layout-list:not(.hidden),
html.layout-small body.sj-app-shell #layout-list:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}

html.layout-phone body.sj-app-shell #layout-list #messagelist-content.scroller,
html.layout-small body.sj-app-shell #layout-list #messagelist-content.scroller {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html.layout-phone body.sj-app-shell .messagelist td.subject,
html.layout-small body.sj-app-shell .messagelist td.subject {
    padding-right: 0.65rem;
}

html.layout-phone body.sj-app-shell .messagelist td.subject span.subject,
html.layout-small body.sj-app-shell .messagelist td.subject span.subject {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.1rem;
}

html.layout-phone body.sj-app-shell .messagelist td.subject span.date,
html.layout-small body.sj-app-shell .messagelist td.subject span.date {
    float: none;
    display: block;
    margin-top: 0.15rem;
    text-align: left;
}

@media screen and (max-width: 768px) {
    body.sj-app-shell #layout-list:not(.hidden) {
        display: flex !important;
        flex-direction: column !important;
    }

    body.sj-app-shell #layout-list #messagelist-content.scroller {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.sj-app-shell .messagelist td.subject span.fromto {
        font-size: 0.9rem;
    }

    body.sj-app-shell .messagelist td.subject span.subject {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.sj-app-shell .messagelist td.subject span.date {
        float: none;
        display: block;
        text-align: left;
        margin-top: 0.12rem;
    }
}

/* Menu duplicado nos painéis — topbar já tem hambúrguer */
html.layout-phone body.sj-app-shell #layout-list > .header .task-menu-button,
html.layout-small body.sj-app-shell #layout-list > .header .task-menu-button,
html.layout-phone body.sj-app-shell #layout-content > .header .task-menu-button,
html.layout-small body.sj-app-shell #layout-content > .header .task-menu-button,
html.layout-phone body.sj-app-shell #layout-sidebar > .header .task-menu-button,
html.layout-small body.sj-app-shell #layout-sidebar > .header .task-menu-button {
    display: none !important;
}

/* Cabeçalhos internos — visual SJ no mobile */
html.layout-phone body.sj-app-shell #layout > div > .header,
html.layout-small body.sj-app-shell #layout > div > .header {
    background: var(--sj-surface) !important;
    border-bottom: 1px solid var(--sj-border) !important;
    color: var(--sj-ink) !important;
    min-height: 48px;
    height: auto !important;
    max-height: none !important;
    line-height: 1.3;
    padding: 0.35rem 0.45rem !important;
}

html.layout-phone body.sj-app-shell #layout > div > .header a.button,
html.layout-small body.sj-app-shell #layout > div > .header a.button {
    color: var(--sj-blue) !important;
}

html.layout-phone body.sj-app-shell #layout > div > .header a.button:before,
html.layout-small body.sj-app-shell #layout > div > .header a.button:before {
    font-size: 1.35rem !important;
}

/* Nome da pasta visível no mobile */
html.layout-phone body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome .header-title,
html.layout-small body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome .header-title {
    display: block !important;
    flex: 1;
    margin: 0 !important;
    padding: 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--sj-ink);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.layout-phone body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome,
html.layout-small body.sj-app-shell #layout-list.sj-mail-list > .header.sj-list-chrome {
    flex-wrap: nowrap;
    align-items: center;
}

html.layout-phone body.sj-app-shell .sj-list-compose,
html.layout-small body.sj-app-shell .sj-list-compose {
    padding: 0.65rem 0.65rem 0.3rem;
}

html.layout-phone body.sj-app-shell .sj-compose-pill,
html.layout-small body.sj-app-shell .sj-compose-pill {
    min-height: 46px;
    font-size: 0.88rem !important;
}

html.layout-phone body.sj-app-shell #layout-list .searchbar,
html.layout-small body.sj-app-shell #layout-list .searchbar {
    padding: 0.45rem 0.65rem;
}

html.layout-phone body.sj-app-shell .messagelist td,
html.layout-small body.sj-app-shell .messagelist td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

html.layout-phone body.sj-app-shell #layout-list > .header a.toolbar-list-button,
html.layout-small body.sj-app-shell #layout-list > .header a.toolbar-list-button,
html.layout-phone body.sj-app-shell #layout-content > .header a.toolbar-menu-button,
html.layout-small body.sj-app-shell #layout-content > .header a.toolbar-menu-button {
    background: var(--sj-blue-soft) !important;
    color: var(--sj-blue) !important;
}

/* Compose mobile */
html.layout-phone body.sj-app-shell.task-mail.action-compose #layout-content.sj-compose-main,
html.layout-small body.sj-app-shell.task-mail.action-compose #layout-content.sj-compose-main {
    background: var(--sj-surface-alt);
}

html.layout-phone body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions,
html.layout-small body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions {
    display: flex !important;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-bottom: 0;
    border-radius: var(--sj-radius-md) var(--sj-radius-md) 0 0;
    box-shadow: 0 -4px 16px rgba(30, 41, 59, 0.08);
}

html.layout-phone body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .btn.send,
html.layout-small body.sj-app-shell.task-mail.action-compose .formbuttons.sj-compose-actions .btn.send {
    flex: 1 1 auto;
    min-width: 140px;
}

html.layout-phone body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar,
html.layout-small body.sj-app-shell.task-mail.action-compose #layout-sidebar.sj-compose-sidebar {
    max-width: 100% !important;
    border-left: 0;
}

html.layout-phone body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn span.inner,
html.layout-small body.sj-app-shell.task-mail.action-compose .sj-compose-back-btn span.inner {
    display: inline !important;
}

html.layout-phone body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form,
html.layout-small body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form {
    padding-bottom: 0;
}

html.layout-phone body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form > form,
html.layout-small body.sj-app-shell.task-mail.action-compose #compose-content.sj-compose-form > form {
    overflow: auto;
}

/* Leitura de mensagem — iframe ocupa tela */
html.layout-phone body.sj-app-shell.task-mail #layout-content .iframe-wrapper,
html.layout-small body.sj-app-shell.task-mail #layout-content .iframe-wrapper {
    padding: 0;
    background: var(--sj-surface);
}

html.layout-phone body.sj-app-shell.task-mail #layout-content > .header,
html.layout-small body.sj-app-shell.task-mail #layout-content > .header {
    flex-wrap: nowrap;
}

/* ── Bdente: interior cinza + marca d'água na prévia ───────────────── */

body.sj-app-shell.task-mail #layout-content > .header {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none;
}

body.sj-app-shell.task-mail #layout-content > .header a,
body.sj-app-shell.task-mail #layout-content > .header .toolbar a,
body.sj-app-shell.task-mail #layout-content > .header .menu.toolbar li > a,
body.sj-app-shell.task-mail #layout-content > .header a:before {
    color: #4b5563 !important;
}

body.sj-app-shell.task-mail #layout-content > .header .toolbar a:not(.disabled):hover,
body.sj-app-shell.task-mail #layout-content > .header > a.button.icon:not(.disabled):hover,
body.sj-app-shell.task-mail #layout-content > .header .menu.toolbar li > a:not(.disabled):hover {
    background: #e5e7eb !important;
    border-color: transparent !important;
    color: #1f2937 !important;
}

body.sj-app-shell.task-mail #layout-content > .header .toolbar a.active,
body.sj-app-shell.task-mail #layout-content > .header .menu.toolbar a.selected {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}

body.sj-app-shell.task-mail #layout-content > .header .dropbutton {
    background: #fff !important;
    border-color: #d1d5db !important;
}

body.sj-app-shell.task-mail #layout-content > .header .dropbutton > a {
    color: #374151 !important;
}

body.sj-app-shell.task-mail #layout-content .iframe-wrapper {
    background: #f8f9fa !important;
    position: relative;
}

body.sj-app-shell.task-mail #layout-content .iframe-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/logo.png) center 42% no-repeat;
    background-size: min(280px, 52%) auto;
    opacity: 0.07;
    filter: grayscale(100%);
    pointer-events: none;
    z-index: 0;
}

body.sj-app-shell.task-mail #layout-content .iframe-wrapper iframe,
body.sj-app-shell.task-mail #layout-content #message-header,
body.sj-app-shell.task-mail #layout-content #message-content {
    position: relative;
    z-index: 1;
}

body.sj-app-shell.task-mail #message-header .subject {
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

body.sj-app-shell.task-mail #message-header > .header {
    color: #64748b;
    background: #fff;
}

body.sj-app-shell.task-mail #message-content,
body.sj-app-shell.task-mail .message-htmlpart,
body.sj-app-shell.task-mail .message-part {
    border-color: #e5e7eb;
}

/* Sidebar de pastas — cinza neutro */
body.sj-app-shell.task-mail #layout-sidebar {
    background: #f3f4f6 !important;
    border-right-color: #e5e7eb !important;
}

body.sj-app-shell.task-mail #layout-sidebar .folderlist li a:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}

body.sj-app-shell.task-mail #layout-sidebar .folderlist li.selected > a {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    box-shadow: inset 3px 0 0 #9ca3af;
}

/* Botão Escrever — cinza escuro, sem vermelho */
body.sj-app-shell .sj-compose-pill {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 4px 14px rgba(55, 65, 81, 0.28) !important;
}

body.sj-app-shell .sj-compose-pill:hover {
    background: linear-gradient(180deg, #4b5563 0%, #374151 100%) !important;
}

/* ── Leitura de mensagem — rolagem suave (layout intacto) ───────────── */
/* Não aplicar em action-compose (novo e-mail). */

html.iframe body.task-mail {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-show #layout-content,
html.iframe body.task-mail #layout-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content,
html.iframe body.task-mail #layout-content > .content.frame-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

body.sj-app-shell.task-mail:not(.action-compose):not(.action-show) #layout-content .iframe-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar,
html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar {
    width: 8px;
}

body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-track,
html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-thumb,
html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}

body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-thumb:hover,
html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

html.dark-mode body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content,
html.dark-mode html.iframe body.task-mail #layout-content > .content.frame-content {
    scrollbar-color: #475569 #1e293b;
}

html.dark-mode body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-track,
html.dark-mode html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark-mode body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-thumb,
html.dark-mode html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-thumb {
    background: #475569;
    border-color: #1e293b;
}

html.dark-mode body.sj-app-shell.task-mail.action-show #layout-content > .content.frame-content::-webkit-scrollbar-thumb:hover,
html.dark-mode html.iframe body.task-mail #layout-content > .content.frame-content::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}