/* ===== Lumios Webmail — tema escuro elegante (azul) ===== */
:root {
  --lx-accent: #3b82f6;
  --lx-accent-hover: #2563eb;
  --lx-accent-soft: rgba(59,130,246,.16);
  --lx-bg: #0f1826;
  --lx-panel: #16202f;
  --lx-panel-2: #1b2736;
  --lx-border: #273449;
  --lx-text: #e6edf5;
  --lx-muted: #93a1b2;
}

/* ---- Fundo geral ---- */
html.dark-mode,
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode .page-box { background-color: var(--lx-bg) !important; color: var(--lx-text) !important; }

/* ---- Painéis (barra lateral, lista, conteúdo) ---- */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-sidebar .scroller,
html.dark-mode #layout-menu,
html.dark-mode .menu { background-color: var(--lx-panel) !important; border-color: var(--lx-border) !important; }

html.dark-mode #layout-list,
html.dark-mode #layout-list .scroller,
html.dark-mode #messagelist-content { background-color: var(--lx-panel-2) !important; }

html.dark-mode #layout-content,
html.dark-mode .content,
html.dark-mode #messagecontframe { background-color: var(--lx-bg) !important; }

/* ---- Cabeçalhos / barras de título ---- */
html.dark-mode .header,
html.dark-mode .boxtitle,
html.dark-mode .header-title,
html.dark-mode #messagelistcontainer .header,
html.dark-mode .toolbar { background-color: var(--lx-panel) !important; border-color: var(--lx-border) !important; color: var(--lx-text) !important; }

/* ---- Lista de mensagens ---- */
html.dark-mode .listing tbody tr,
html.dark-mode .listing li { border-color: var(--lx-border) !important; }
html.dark-mode .listing tbody tr:hover,
html.dark-mode .listing li:hover { background-color: rgba(255,255,255,.03) !important; }
html.dark-mode .listing tbody tr.selected,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.focused.selected td { background-color: var(--lx-accent-soft) !important; color: var(--lx-text) !important; }
/* barra azul na mensagem selecionada */
html.dark-mode .messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--lx-accent); }

/* mensagens não lidas */
html.dark-mode .messagelist tr.unread td.subject span.subject { font-weight: 700; color: #fff !important; }
html.dark-mode .messagelist tr td.flags .unread,
html.dark-mode span.unread-children { color: var(--lx-accent) !important; }

/* ---- Pasta selecionada na sidebar ---- */
html.dark-mode .folderlist li.selected > a,
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .listing li.selected > a { background-color: var(--lx-accent-soft) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--lx-accent); }

/* ---- Links e acentos ---- */
html.dark-mode a,
html.dark-mode .listing .subject a { color: var(--lx-text); }
html.dark-mode a.active,
html.dark-mode .pagenav a:hover { color: var(--lx-accent) !important; }

/* substitui o ciano padrão por azul */
html.dark-mode .boxtitle,
html.dark-mode .ui.alert.boxinformation,
html.dark-mode .listing li a .inner,
html.dark-mode .watermark { color: var(--lx-text); }

/* ---- Botões ---- */
html.dark-mode .btn-primary,
html.dark-mode button.btn.btn-primary,
html.dark-mode .ui.button.primary {
  background-color: var(--lx-accent) !important;
  border-color: var(--lx-accent) !important;
  color: #fff !important;
}
html.dark-mode .btn-primary:hover,
html.dark-mode button.btn.btn-primary:hover { background-color: var(--lx-accent-hover) !important; border-color: var(--lx-accent-hover) !important; }

/* botão "Criar email" em destaque */
html.dark-mode a.button.compose,
html.dark-mode .toolbarmenu a.compose,
html.dark-mode #taskmenu a.compose,
html.dark-mode a.compose.button {
  background-color: var(--lx-accent) !important;
  color: #fff !important;
}

/* ---- Menu de tarefas (barra lateral esquerda estreita) ---- */
html.dark-mode #taskmenu,
html.dark-mode #layout-menu { background-color: #0c131f !important; }
html.dark-mode #taskmenu a { color: var(--lx-muted) !important; }
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover { color: var(--lx-accent) !important; }
html.dark-mode #taskmenu a.selected { box-shadow: inset 3px 0 0 var(--lx-accent); background-color: rgba(59,130,246,.08) !important; }

/* ---- Campos / busca ---- */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .searchbar,
html.dark-mode .searchfield {
  background-color: #0e1724 !important;
  border-color: var(--lx-border) !important;
  color: var(--lx-text) !important;
}
html.dark-mode input:focus,
html.dark-mode textarea:focus { border-color: var(--lx-accent) !important; box-shadow: 0 0 0 2px var(--lx-accent-soft) !important; }

/* ---- Área de leitura da mensagem ---- */
html.dark-mode #messageheader,
html.dark-mode .message-partheaders { background-color: var(--lx-panel) !important; border-color: var(--lx-border) !important; border-radius: 8px; }
html.dark-mode #messageheader .subject,
html.dark-mode .message-subject { color: #fff !important; }

/* ---- Tela de LOGIN ---- */
html.dark-mode #layout.layout-login,
body.task-login { background: radial-gradient(1200px 600px at 50% -10%, #17263d 0%, var(--lx-bg) 60%) !important; }
.task-login #login-form,
html.dark-mode .task-login .box-inner {
  background-color: var(--lx-panel) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}
.task-login .btn-primary,
.task-login button[type=submit] { background-color: var(--lx-accent) !important; border-color: var(--lx-accent) !important; }

/* ===== Reforços v2 — seleção e acabamento ===== */
/* Seleção de mensagem bem visível com barra azul */
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected,
html.dark-mode .messagelist tbody tr.selected td {
  background-color: rgba(59,130,246,.20) !important;
}
html.dark-mode .messagelist tbody tr.selected,
html.dark-mode .listing li.selected {
  box-shadow: inset 4px 0 0 var(--lx-accent) !important;
}
html.dark-mode .messagelist tr.selected td.subject a,
html.dark-mode .listing li.selected a { color: #fff !important; font-weight:600; }

/* Barra de ferramentas superior — ícones ativos em azul */
html.dark-mode .toolbar a.button:hover,
html.dark-mode .toolbarmenu a:hover { color: var(--lx-accent) !important; }

/* Divisores de painéis mais sutis */
html.dark-mode #layout-sidebar { border-right: 1px solid var(--lx-border) !important; }
html.dark-mode #layout-list { border-right: 1px solid var(--lx-border) !important; }

/* Cabeçalho da mensagem (área de leitura) como cartão */
html.dark-mode .boxtitle,
html.dark-mode #messageheader,
html.dark-mode .message-partheaders,
html.dark-mode .messageheaderbox,
html.dark-mode #messagepreview .header {
  background-color: var(--lx-panel) !important;
  border: 1px solid var(--lx-border) !important;
  border-radius: 10px !important;
  margin: 8px !important;
  padding: 10px 14px !important;
}
html.dark-mode .subject, html.dark-mode .message-subject { color:#fff !important; font-weight:600 !important; }

/* Nome do remetente / links de contato em azul */
html.dark-mode .rcmContactAddress,
html.dark-mode .adr a, html.dark-mode .fromto a { color: var(--lx-accent) !important; }

/* Paginação e rótulos */
html.dark-mode .pagenav .countdisplay { color: var(--lx-muted) !important; }

/* Scrollbar discreta */
html.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #2b3b52; border-radius: 6px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--lx-accent); }
html.dark-mode ::-webkit-scrollbar-track { background: transparent; }