/* =====================================================
   Sellou Mail — Prototype UI
   Inspirado em interfaces modernas de webmail
   ===================================================== */

:root {
    --sellou-green: #008440;
    --sellou-green-dark: #006d35;
    --sellou-green-light: #35dd48;

    --sellou-bg: #f5f7f6;
    --sellou-panel: #ffffff;
    --sellou-border: #e3e8e6;
    --sellou-text: #202827;
    --sellou-muted: #778582;

    --sellou-radius-sm: 10px;
    --sellou-radius-md: 14px;
    --sellou-radius-lg: 18px;

    --sellou-shadow:
        0 1px 2px rgba(16, 33, 23, .04),
        0 8px 26px rgba(16, 33, 23, .05);
}

/* Base */

html,
body {
    background: var(--sellou-bg) !important;
}

#layout {
    gap: 8px;
    padding: 8px;
    background: var(--sellou-bg) !important;
}

/* Três painéis principais */

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
    background: var(--sellou-panel) !important;
    border: 1px solid var(--sellou-border) !important;
    box-shadow: var(--sellou-shadow);
    overflow: hidden;
}

#layout-menu {
    border-radius: var(--sellou-radius-lg) !important;
}

#layout-sidebar {
    border-radius: var(--sellou-radius-lg) !important;
}

#layout-list {
    border-radius: var(--sellou-radius-lg) !important;
}

#layout-content {
    border-radius: var(--sellou-radius-lg) !important;
}

/* Cabeçalhos */

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
.listbox > .header {
    min-height: 58px;
    padding-left: 14px;
    padding-right: 14px;
    background: var(--sellou-panel) !important;
    border-bottom: 1px solid var(--sellou-border) !important;
}

/* Logo */

#layout-menu > .popover-header {
    background: var(--sellou-panel) !important;
    border-bottom: 1px solid var(--sellou-border) !important;
}

#layout-menu img#logo {
    background: transparent !important;
}

/* Menu lateral */

#taskmenu {
    background: var(--sellou-panel) !important;
}

#taskmenu a {
    margin: 5px 7px;
    border-radius: var(--sellou-radius-sm);
    color: #5c6966 !important;
    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

#taskmenu a:hover {
    background: rgba(0, 132, 64, .08) !important;
    color: var(--sellou-green) !important;
}

#taskmenu a.selected {
    background: rgba(0, 132, 64, .12) !important;
    color: var(--sellou-green) !important;
}

#taskmenu a.button-compose {
    margin: 10px 8px 12px;
    background: var(--sellou-green) !important;
    color: #ffffff !important;
    border-radius: 12px;
}

#taskmenu a.button-compose:hover {
    background: var(--sellou-green-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Pastas */

#mailboxlist {
    padding: 8px;
}

#mailboxlist li {
    margin-bottom: 3px;
}

#mailboxlist li > a {
    border-radius: 9px;
    padding-top: 9px;
    padding-bottom: 9px;
    color: #52615e !important;
}

#mailboxlist li > a:hover {
    background: rgba(0, 132, 64, .07) !important;
}

#mailboxlist li.selected > a {
    background: var(--sellou-green) !important;
    color: #ffffff !important;
}

/* Pesquisa */

.searchbar,
#quicksearchbar,
#searchmenulink {
    border-radius: 12px !important;
}

#quicksearchbox,
.searchbar input {
    border-radius: 12px !important;
    background: #f7f9f8 !important;
    border-color: var(--sellou-border) !important;
}

#quicksearchbox:focus,
.searchbar input:focus {
    border-color: var(--sellou-green-light) !important;
    box-shadow: 0 0 0 3px rgba(53, 221, 72, .14) !important;
}

/* Toolbar */

.toolbar a,
.toolbar button,
#toolbar a,
#toolbar button {
    border-radius: 9px !important;
    transition:
        background-color .18s ease,
        color .18s ease;
}

.toolbar a:hover,
.toolbar button:hover,
#toolbar a:hover,
#toolbar button:hover {
    background: rgba(0, 132, 64, .08) !important;
    color: var(--sellou-green) !important;
}

/* Lista de mensagens */

#messagelist {
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    padding: 5px 7px;
}

#messagelist tbody tr {
    background: #ffffff !important;
    border-radius: 11px;
    transition:
        background-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

#messagelist tbody tr td {
    background: transparent !important;
    border-top: 1px solid var(--sellou-border) !important;
    border-bottom: 1px solid var(--sellou-border) !important;
}

#messagelist tbody tr td:first-child {
    border-left: 1px solid var(--sellou-border) !important;
    border-radius: 11px 0 0 11px;
}

#messagelist tbody tr td:last-child {
    border-right: 1px solid var(--sellou-border) !important;
    border-radius: 0 11px 11px 0;
}

#messagelist tbody tr:hover {
    background: rgba(0, 132, 64, .045) !important;
}

#messagelist tbody tr.selected,
#messagelist tbody tr.selected td {
    background: rgba(0, 132, 64, .10) !important;
    color: var(--sellou-text) !important;
}

#messagelist .subject {
    color: var(--sellou-text) !important;
}

#messagelist .adr,
#messagelist .date,
#messagelist .from {
    color: var(--sellou-muted) !important;
}

/* Checkboxes */

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sellou-green);
}

/* Área de leitura */

#messagecontent,
#messagebody,
.message-part,
.message-htmlpart {
    background: #ffffff !important;
}

#message-header,
#messageheader,
#messageheaders,
.message-header,
.message-headers {
    margin: 12px;
    padding: 16px;
    background: #ffffff !important;
    border: 1px solid var(--sellou-border) !important;
    border-radius: var(--sellou-radius-md);
    box-shadow: 0 3px 12px rgba(16, 33, 23, .04);
}

#message-header a,
#messageheader a,
#messageheaders a {
    color: var(--sellou-green) !important;
}

/* Conteúdo da mensagem em card */

#messagecontframe,
.iframe-wrapper {
    margin: 0 12px 12px;
    border: 1px solid var(--sellou-border) !important;
    border-radius: var(--sellou-radius-md);
    overflow: hidden;
    background: #ffffff !important;
}

/* Botões */

.btn-primary,
button.mainaction,
input.mainaction,
.button.mainaction {
    background: var(--sellou-green) !important;
    border-color: var(--sellou-green) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}

.btn-primary:hover,
button.mainaction:hover,
input.mainaction:hover,
.button.mainaction:hover {
    background: var(--sellou-green-dark) !important;
    border-color: var(--sellou-green-dark) !important;
}

/* Notificações */

#messagestack .alert-info,
#messagestack .info,
#messagestack .notice,
#messagestack .notification,
.alert-info {
    background: var(--sellou-green) !important;
    border-color: var(--sellou-green-light) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
}

/* Rodapés */

#layout-sidebar .footer,
#layout-list .footer,
.listing-info,
.pagenav,
.quota-widget {
    background: var(--sellou-panel) !important;
    border-top: 1px solid var(--sellou-border) !important;
}

/* Scrollbar */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--sellou-green) #e8eeec;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #e8eeec;
}

::-webkit-scrollbar-thumb {
    background: var(--sellou-green);
    border-radius: 10px;
    border: 2px solid #e8eeec;
}

/* =====================================================
   Modo escuro
   ===================================================== */

html.dark-mode {
    --sellou-bg: #171f21;
    --sellou-panel: #202a2d;
    --sellou-border: #344145;
    --sellou-text: #e8eeee;
    --sellou-muted: #9bafb3;
}

html.dark-mode body,
html.dark-mode #layout {
    background: var(--sellou-bg) !important;
}

html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #taskmenu {
    background: var(--sellou-panel) !important;
}

html.dark-mode #quicksearchbox,
html.dark-mode .searchbar input {
    background: #263235 !important;
    color: var(--sellou-text) !important;
}

html.dark-mode #messagelist tbody tr {
    background: #222d30 !important;
}

html.dark-mode #messagelist tbody tr.selected,
html.dark-mode #messagelist tbody tr.selected td {
    background: rgba(0, 132, 64, .25) !important;
}

html.dark-mode #message-header,
html.dark-mode #messageheader,
html.dark-mode #messageheaders,
html.dark-mode .message-header,
html.dark-mode .message-headers {
    background: #222d30 !important;
}

html.dark-mode #messagecontframe,
html.dark-mode .iframe-wrapper {
    background: #222d30 !important;
}

html.dark-mode * {
    scrollbar-color: var(--sellou-green) #263235;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #263235;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    border-color: #263235;
}

/* Mobile */

@media screen and (max-width: 768px) {
    #layout {
        padding: 0;
        gap: 0;
    }

    #layout-menu,
    #layout-sidebar,
    #layout-list,
    #layout-content {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none;
    }
}

/* =====================================================
   Sellou Mail — correções do protótipo
   ===================================================== */

/* Contadores de mensagens não lidas */
#mailboxlist .unreadcount,
#mailboxlist .count,
#mailboxlist .badge,
.folderlist .unreadcount,
.folderlist .count,
.folderlist .badge,
.badge-primary,
.badge.bg-primary {
    background: #008440 !important;
    background-color: #008440 !important;
    border-color: #008440 !important;
    color: #ffffff !important;
}

/* Contador dentro da pasta selecionada */
#mailboxlist li.selected .unreadcount,
#mailboxlist li.selected .count,
#mailboxlist li.selected .badge {
    background: #35DD48 !important;
    background-color: #35DD48 !important;
    color: #102117 !important;
}

/* Cabeçalho da logo no modo claro */
html:not(.dark-mode) #layout-menu > .popover-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e3e8e6 !important;
}

html:not(.dark-mode) #layout-menu > .popover-header img#logo {
    background: transparent !important;
}

/* Rodapé do menu no modo claro */
html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #taskmenu .taskmenu-footer,
html:not(.dark-mode) #taskmenu .footer,
html:not(.dark-mode) #taskmenu .button-darkmode,
html:not(.dark-mode) #taskmenu .button-logout,
html:not(.dark-mode) #taskmenu a.button-darkmode,
html:not(.dark-mode) #taskmenu a.button-logout {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #e3e8e6 !important;
}

/* Fundo inferior completo no modo claro */
html:not(.dark-mode) #taskmenu {
    background-color: #ffffff !important;
}

/* Botões inferiores no modo claro */
html:not(.dark-mode) #taskmenu a.button-darkmode {
    color: #667572 !important;
}

html:not(.dark-mode) #taskmenu a.button-logout {
    color: #d73b3e !important;
}


/* =====================================================
   Correção do botão Modo escuro no tema claro
   ===================================================== */

html:not(.dark-mode) #taskmenu a.button-darkmode,
html:not(.dark-mode) #taskmenu .button-darkmode,
html:not(.dark-mode) #taskmenu a.button-darkmode:hover,
html:not(.dark-mode) #taskmenu a.button-darkmode:focus,
html:not(.dark-mode) #taskmenu a.button-darkmode.selected {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #5f6f72 !important;
}

html:not(.dark-mode) #taskmenu a.button-darkmode::before,
html:not(.dark-mode) #taskmenu a.button-darkmode .inner,
html:not(.dark-mode) #taskmenu .button-darkmode::before,
html:not(.dark-mode) #taskmenu .button-darkmode .inner {
    color: #5f6f72 !important;
}