/* Tema Carteira Pronta sobre o Elastic, nos modos claro e escuro. As cores são as do tema salvo em
   Personalização (configuracoes.dados.cores): marinho #0F172A, ação #0369A1, sucesso #059669.
   O Roundcube não lê as variáveis do app; se o tema do site mudar, troque aqui. */
:root { --cp-marinho: #0F172A; --cp-marinho-2: #1E293B; --cp-marinho-3: #0A1020; --cp-acao: #0369A1; --cp-acao-esc: #075985; --cp-claro: #38BDF8; }

/* ---------- Comum aos dois modos ---------- */

/* Login */
body.task-login { background: linear-gradient(160deg, #0F172A, #0A1020) !important; }
body.task-login #layout-content { background: transparent !important; }
body.task-login #logo { max-width: 280px; max-height: 60px; margin: 0 auto 28px; }
body.task-login #login-form { background: #FFFFFF !important; border-radius: 14px; padding: 32px 28px; box-shadow: 0 30px 60px -30px #00000099; }
body.task-login #login-form input.form-control { background-color: #FFFFFF !important; color: #0F172A !important; border-color: #CBD5E1 !important; font-size: 16px; min-height: 48px; }
body.task-login #login-form .input-group-text { background-color: #F1F5F9 !important; color: #475569 !important; border-color: #CBD5E1 !important; }
body.task-login #login-form input::placeholder { color: #64748B !important; }
body.task-login #login-footer, body.task-login #login-footer a { color: #94A3B8 !important; }
body.task-login .formbuttons .btn { width: 100%; min-height: 48px; font-size: 16px; }

/* Botões principais */
.btn-primary, .btn.btn-primary, a.btn-primary, .formbuttons .btn.mainaction, .btn.mainaction { background-color: var(--cp-acao) !important; border-color: var(--cp-acao) !important; color: #FFFFFF !important; }
.btn-primary:hover, .btn.btn-primary:hover, .formbuttons .btn.mainaction:hover, .btn.mainaction:hover { background-color: var(--cp-acao-esc) !important; border-color: var(--cp-acao-esc) !important; }

/* Menu lateral marinho */
#layout-menu { background-color: var(--cp-marinho) !important; }
#layout-menu #logo { max-width: 100%; max-height: 40px; padding: 10px 6px; }
#layout-menu .menu a { color: #CBD5E1 !important; }
#layout-menu .menu a:before { color: #94A3B8 !important; }
#layout-menu .menu a:hover { background-color: var(--cp-marinho-2) !important; color: #FFFFFF !important; }
#layout-menu .menu a.selected { background-color: #38BDF81F !important; color: var(--cp-claro) !important; }
#layout-menu .menu a.selected:before { color: var(--cp-claro) !important; }
#layout-menu a.compose { background-color: var(--cp-acao) !important; color: #FFFFFF !important; }
#layout-menu a.compose:before { color: #FFFFFF !important; }
#layout-menu a.compose:hover { background-color: var(--cp-acao-esc) !important; }

/* Contador de não lidas */
.unreadcount, .listing li .unreadcount { background-color: var(--cp-acao) !important; color: #FFFFFF !important; }

/* ---------- Modo claro ---------- */
html:not(.dark-mode) a { color: var(--cp-acao-esc); }
html:not(.dark-mode) #layout-sidebar .listing li.selected, html:not(.dark-mode) #layout-sidebar .listing li.selected > a { background-color: #E0F2FE !important; color: var(--cp-acao-esc) !important; }
html:not(.dark-mode) #layout-sidebar .listing li.selected > a { box-shadow: inset 3px 0 0 var(--cp-acao); }
html:not(.dark-mode) table.messagelist tr.selected td, html:not(.dark-mode) table.messagelist tr.selected:hover td { background-color: #E0F2FE !important; }
html:not(.dark-mode) table.messagelist tr.unread td span.subject a, html:not(.dark-mode) table.messagelist tr.unread td .subject a { color: var(--cp-marinho) !important; }
html:not(.dark-mode) table.messagelist td span.subject a, html:not(.dark-mode) table.messagelist td .subject a { color: #334155; }
html:not(.dark-mode) table.messagelist tr.unread td.subject:before, html:not(.dark-mode) table.messagelist tr.unread span.msgicon.status { color: var(--cp-acao) !important; }
html:not(.dark-mode) input.form-control:focus, html:not(.dark-mode) textarea.form-control:focus, html:not(.dark-mode) select.form-control:focus { border-color: var(--cp-acao) !important; box-shadow: 0 0 0 .2rem #0369A133 !important; }

/* ---------- Modo escuro: marinho no lugar do cinza ---------- */
html.dark-mode body, html.dark-mode #layout { background-color: var(--cp-marinho-3) !important; }
html.dark-mode #layout-menu { background-color: var(--cp-marinho-3) !important; border-right: 1px solid #FFFFFF14; }
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content { background-color: var(--cp-marinho) !important; border-color: #FFFFFF14 !important; }
html.dark-mode .header, html.dark-mode .footer, html.dark-mode .toolbar-list-button, html.dark-mode #layout-content .header { background-color: var(--cp-marinho) !important; border-color: #FFFFFF14 !important; }
html.dark-mode .header .header-title, html.dark-mode #layout-sidebar .header .header-title, html.dark-mode .header-title { color: #E2E8F0 !important; }
html.dark-mode .toolbar a, html.dark-mode .toolbar a:before, html.dark-mode .header a.button, html.dark-mode .header a.button:before { color: #CBD5E1 !important; }
html.dark-mode .toolbar a.disabled, html.dark-mode .toolbar a.disabled:before { color: #64748B !important; }
html.dark-mode a { color: var(--cp-claro); }
html.dark-mode #layout-sidebar .listing li a { color: #CBD5E1 !important; }
html.dark-mode #layout-sidebar .listing li a:before { color: #94A3B8 !important; }
html.dark-mode #layout-sidebar .listing li:hover > a { background-color: var(--cp-marinho-2) !important; }
html.dark-mode #layout-sidebar .listing li.selected > a { background-color: #38BDF81A !important; color: var(--cp-claro) !important; box-shadow: inset 3px 0 0 var(--cp-claro); }
html.dark-mode table.messagelist tr td, html.dark-mode table.messagelist tr { background-color: var(--cp-marinho) !important; border-color: #FFFFFF12 !important; }
html.dark-mode table.messagelist tr:hover td { background-color: var(--cp-marinho-2) !important; }
html.dark-mode table.messagelist tr.selected td, html.dark-mode table.messagelist tr.selected:hover td { background-color: #0369A12E !important; }
html.dark-mode table.messagelist td span.subject a, html.dark-mode table.messagelist td .subject a { color: #94A3B8 !important; }
html.dark-mode table.messagelist tr.unread td span.subject a, html.dark-mode table.messagelist tr.unread td .subject a { color: #FFFFFF !important; font-weight: 600; }
html.dark-mode table.messagelist td .fromto, html.dark-mode table.messagelist td span.adr, html.dark-mode table.messagelist td .adr span { color: #CBD5E1 !important; }
html.dark-mode table.messagelist td span.date, html.dark-mode table.messagelist td .date, html.dark-mode table.messagelist td span.size { color: #94A3B8 !important; }
html.dark-mode .searchbar, html.dark-mode .searchbar input, html.dark-mode input.form-control, html.dark-mode textarea.form-control, html.dark-mode select.form-control, html.dark-mode .input-group-text {
  background-color: var(--cp-marinho-3) !important; color: #E2E8F0 !important; border-color: #FFFFFF24 !important; }
html.dark-mode .popover, html.dark-mode .popover-body, html.dark-mode .ui-dialog, html.dark-mode .modal-content { background-color: var(--cp-marinho-2) !important; color: #E2E8F0 !important; }