/* Gladiator Webmail - Modo escuro (Catppuccin Mocha) */

html.dark-mode {
	scrollbar-color: #45475a #181825;
}
html.dark-mode:not(.touch) ::-webkit-scrollbar-track { background-color: #181825 !important; }
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color: #45475a !important; }

html.dark-mode body {
	color: #cdd6f4 !important;
	background-color: #1e1e2e !important;
}

html.dark-mode #logo { opacity: 1 !important; }

/* Panels */
html.dark-mode #layout-menu { background: #11111b !important; }
html.dark-mode #layout-sidebar { background-color: #1e1e2e !important; }
html.dark-mode #layout-list { background-color: #1e1e2e !important; }
html.dark-mode #layout-content { background-color: #1e1e2e !important; }

/* Folder list */
html.dark-mode #mailboxlist li > a,
html.dark-mode #mailboxlist li > span.listing {
	color: #cdd6f4 !important;
}
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode #mailboxlist li.selected {
	background-color: #313244 !important;
	box-shadow: inset 3px 0 0 #89b4fa;
	color: #89b4fa !important;
}
html.dark-mode #mailboxlist li:hover > a {
	background-color: #181825 !important;
}

/* Message list rows */
html.dark-mode #messagelist tbody tr {
	background-color: #1e1e2e !important;
}
html.dark-mode #messagelist tbody tr td {
	color: #cdd6f4 !important;
	/* A linha divisoria clara do modo normal (#ececef) fica muito visivel
	   sobre o fundo escuro, parecendo uma barra - aqui usamos um tom escuro
	   da mesma paleta (Surface0, Catppuccin Mocha). */
	border-bottom-color: #313244 !important;
}
html.dark-mode #messagelist tbody tr:hover {
	background-color: #181825 !important;
}
html.dark-mode #messagelist tbody tr.selected,
html.dark-mode #messagelist tbody tr.focused {
	background-color: #313244 !important;
	box-shadow: inset 3px 0 0 #89b4fa;
}
/* O proprio Elastic (nao o nosso CSS) pinta um fundo opaco proprio
   (#374549, um verde-acinzentado que nao e da nossa paleta) direto nos
   <td> das linhas selecionadas - isso ficava por CIMA do fundo #313244
   que a regra acima so aplicava na <tr>, escondendo nossa cor e criando
   descompasso com a border-bottom-color (#313244) definida acima pra
   TODAS as linhas: a "faixa" visivel embaixo da linha selecionada era
   esse descompasso entre o fundo real (#374549, do core) e a borda
   calculada pra outra cor (#313244, nossa). Forcamos o fundo do <td>
   tambem pra fechar o circulo. */
html.dark-mode #messagelist tbody tr.selected td,
html.dark-mode #messagelist tbody tr.focused td {
	background-color: #313244 !important;
	border-bottom-color: #313244 !important;
}
html.dark-mode #messagelist tbody tr.unread .subject,
html.dark-mode #messagelist tbody tr.unread .fromto {
	color: #ffffff !important;
}

/* Toolbar */
html.dark-mode #layout-topbar,
html.dark-mode .toolbar-container {
	background-color: #181825 !important;
}
html.dark-mode .toolbar .button,
html.dark-mode .toolbar-list .button {
	color: #cdd6f4 !important;
}
html.dark-mode .toolbar .button:hover,
html.dark-mode .toolbar-list .button:hover {
	background-color: #11111b !important;
}

/* Primary buttons */
html.dark-mode .button.mainaction,
html.dark-mode button.mainaction,
html.dark-mode .formbuttons button.mainaction {
	background-color: #89b4fa !important;
	color: #1e1e2e !important;
}
html.dark-mode .button.mainaction:hover,
html.dark-mode button.mainaction:hover {
	background-color: #a5c8fc !important;
}

/* Taskmenu */
html.dark-mode #taskmenu { background: #11111b !important; }
html.dark-mode #taskmenu a { color: #cdd6f4 !important; }
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
	background-color: #313244 !important;
	color: #89b4fa !important;
}
html.dark-mode #taskmenu a.compose:before,
html.dark-mode #taskmenu a.mail:before,
html.dark-mode #taskmenu a.contacts:before,
html.dark-mode #taskmenu a.settings:before,
html.dark-mode #taskmenu a.theme:before,
html.dark-mode #taskmenu a.about:before {
	background-color: #89b4fa !important;
}
html.dark-mode #taskmenu a.logout:before {
	background-color: #f38ba8 !important;
}
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout:hover {
	color: #f38ba8 !important;
}

/* Scrollbar accents on custom containers */
html.dark-mode #layout-sidebar ::-webkit-scrollbar-thumb,
html.dark-mode #layout-list ::-webkit-scrollbar-thumb {
	background-color: #45475a !important;
}

/* Logout inside message toolbar 'Mais' menu */
html.dark-mode #message-menu a.logout {
	color: #f38ba8 !important;
}

/* Horizontal top nav items */
html.dark-mode #layout-menu .popover-header {
	border-right: 1px solid #313244 !important;
}
html.dark-mode #taskmenu > a,
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode #gladiator-extra-popup a {
	color: #cdd6f4 !important;
}
html.dark-mode #taskmenu > a:hover,
html.dark-mode #taskmenu .action-buttons a:hover,
html.dark-mode #gladiator-extra-popup a:hover {
	background-color: #313244 !important;
	color: #89b4fa !important;
}
html.dark-mode #taskmenu a.logout,
html.dark-mode #gladiator-extra-popup a.logout {
	color: #f38ba8 !important;
}

/* Generic form controls, popups and alerts (settings, compose, filters, contacts) */
html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
	background-color: #313244 !important;
	border-color: #45475a !important;
	color: #cdd6f4 !important;
}
html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus {
	background-color: #3a3d54 !important;
	border-color: #89b4fa !important;
	color: #ffffff !important;
}

html.dark-mode .popover,
html.dark-mode .popover-header,
html.dark-mode .popupmenu:not(#gladiator-extra-popup) {
	background-color: #181825 !important;
	border-color: #313244 !important;
	color: #cdd6f4 !important;
}

html.dark-mode #messagestack .alert-danger  { background-color: #f38ba8 !important; color: #1e1e2e !important; }
html.dark-mode #messagestack .alert-success { background-color: #a6e3a1 !important; color: #1e1e2e !important; }
html.dark-mode #messagestack .alert-warning { background-color: #f9e2af !important; color: #1e1e2e !important; }
html.dark-mode #messagestack .alert-info    { background-color: #89b4fa !important; color: #1e1e2e !important; }

html.dark-mode .message-partheaders,
html.dark-mode #messageheader,
html.dark-mode #composeheaders,
html.dark-mode #mailview-right #messageheader {
	background-color: #181825 !important;
	border-color: #313244 !important;
}

html.dark-mode ::selection {
	background-color: #45475a;
	color: #ffffff;
}

/* Login page */
html.dark-mode body.login,
body.login.dark-mode {
	background-color: #1e1e2e !important;
}
html.dark-mode #login-form .box-inner,
body.login.dark-mode #login-form .box-inner {
	background-color: #181825 !important;
	border-color: #313244 !important;
}

/* Widgets panel - dark */
html.dark-mode #gladiator-widgets {
	background-color: #181825 !important;
	border-color: #313244 !important;
}
html.dark-mode #gladiator-widgets .gw-card {
	background: #1e1e2e !important;
	border-color: #313244 !important;
}
html.dark-mode #gladiator-widgets .gw-card h4 {
	color: #a6adc8 !important;
}
html.dark-mode #gladiator-widgets .gw-body {
	color: #cdd6f4 !important;
}
html.dark-mode #gladiator-widgets .gw-weather-main {
	color: #89b4fa !important;
}
html.dark-mode #gladiator-widgets .gw-weather-desc {
	color: #cdd6f4 !important;
}
html.dark-mode #gladiator-widgets .gw-weather-details,
html.dark-mode #gladiator-widgets .gw-weather-loc,
html.dark-mode #gladiator-widgets .gw-quote-author {
	color: #a6adc8 !important;
}
html.dark-mode #gladiator-widgets .gw-news-list li {
	border-color: #313244 !important;
}
html.dark-mode #gladiator-widgets .gw-news-list a {
	color: #cdd6f4 !important;
}
html.dark-mode #gladiator-widgets .gw-news-list a:hover {
	color: #89b4fa !important;
}

/* Tips popup - dark */
html.dark-mode #gladiator-tips {
	background: #181825 !important;
	border-color: #313244 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode #gladiator-tips .gt-close {
	color: #a6adc8 !important;
}
html.dark-mode #gladiator-tips .gt-close:hover {
	color: #cdd6f4 !important;
}
html.dark-mode #gladiator-tips h4 {
	color: #89b4fa !important;
}
html.dark-mode #gladiator-tips p {
	color: #cdd6f4 !important;
}

/* Fase 3: menu de Configuracoes em grade - dark */
html.dark-mode body.task-settings #settings-menu > li > a {
	background-color: #313244 !important; /* Surface0 */
	color: #cdd6f4 !important; /* Text */
}
html.dark-mode body.task-settings #settings-menu > li > a:before {
	background-color: #45475a !important; /* Surface1 */
	color: #89b4fa !important; /* Blue */
}
html.dark-mode body.task-settings #settings-menu > li > a:hover {
	background-color: #45475a !important; /* Surface1 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html.dark-mode body.task-settings #settings-menu > li.selected > a,
html.dark-mode body.task-settings #settings-menu > li > a.selected {
	background-color: #45475a !important; /* Surface1 */
	box-shadow: inset 0 0 0 2px #89b4fa !important;
}

html.dark-mode #messagelist tbody tr td.subject .gladiator-list-preview {
	color: #7f849c !important; /* Overlay1 */
}

/* Painel "Opcoes da pesquisa" (#searchmenu) no modo escuro - o ajuste de
   cores feito em gladiator-app.css usa o azul da marca (#0B119C), bom
   demais pro modo claro mas quase invisivel aqui (texto escuro sobre
   fundo escuro, caixas brancas destoando do resto); usa o mesmo azul ja
   estabelecido nos outros destaques do modo escuro (#89b4fa), nao o
   navy do modo claro. */
html.dark-mode #searchmenu .proplist .custom-control-label {
	color: #cdd6f4 !important; /* Text */
}

html.dark-mode #searchmenu .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #89b4fa !important;
	background-color: #89b4fa !important;
}

html.dark-mode #searchmenu .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 0.2rem rgba(137, 180, 250, 0.25) !important;
}

html.dark-mode #searchmenu .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: #89b4fa !important;
}

html.dark-mode #searchmenu .input-group-text {
	background: #313244 !important; /* Surface0 */
	border: 1px solid #45475a !important;
	color: #bac2de !important; /* Subtext1 */
}

html.dark-mode #searchmenu select.pretty-select {
	background-color: #1e1e2e !important; /* Base */
	border: 1px solid #45475a !important;
	color: #cdd6f4 !important; /* Text */
}

html.dark-mode #searchmenu select.pretty-select:focus {
	border-color: #89b4fa !important;
	box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.2) !important;
}

html.dark-mode #searchmenu .formbuttons button.search {
	background: #89b4fa !important;
	border-color: #89b4fa !important;
	color: #1e1e2e !important;
}

html.dark-mode #searchmenu .formbuttons button.search:hover {
	background: #74a8f7 !important;
	border-color: #74a8f7 !important;
}

/* O fundo do PAINEL em si (nao so os campos individuais Tipo/Data/Escopo,
   que ja tinham fundo proprio) continuava branco, forcado sem guarda de
   modo escuro em gladiator-app.css (pro cartao flutuante no modo claro)
   - sobrava branco visivel nos espacos entre os interruptores. */
html.dark-mode #searchmenu {
	background: #1e1e2e !important; /* Base */
	border-color: #45475a !important; /* Surface1 */
}

/* A barra de busca movida pra barra superior tambem ficava branca sem
   guarda de modo escuro - destoava do resto da barra (escura). */
html.dark-mode #taskmenu .gladiator-topbar-search {
	background: #313244 !important; /* Surface0 */
	border-color: #45475a !important; /* Surface1 */
}

html.dark-mode #taskmenu .gladiator-topbar-search input#mailsearchform {
	color: #cdd6f4 !important; /* Text */
}

html.dark-mode #taskmenu .gladiator-topbar-search input#mailsearchform::placeholder {
	color: #9399b2 !important; /* Overlay2 */
}

html.dark-mode #taskmenu .gladiator-topbar-search a.button {
	color: #bac2de !important; /* Subtext1 */
}

html.dark-mode #taskmenu .gladiator-topbar-search a.button:hover {
	background: #45475a !important; /* Surface1 */
	color: #89b4fa !important;
}

html.dark-mode #taskmenu .gladiator-topbar-search a.button.search {
	color: #89b4fa !important;
}