/* Webmail por dentro no padrão do sistema da Souza Aguiar (as cores trocadas regra a regra estão em souza-cores.css) */
:root { --sa-blue-100: #e3eaf5; --sa-brass: #a9844c; --sa-stone-50: #faf8f4; --sa-escuro: #0b1330; --sa-escuro-2: #1a2a5c; }
body, #layout, .popover, .ui-dialog, .form-control, .btn, button, input, select, textarea { font-family: var(--sa-sans); }

/* Barra do menu: azul-marinho do sistema, item ativo com a faixa dourada (nos dois modos) */
@media screen and (min-width: 481px) {
  #layout-menu { background: linear-gradient(180deg, var(--sa-navy-950), var(--sa-navy-900)) !important; }
  #taskmenu .special-buttons { background: var(--sa-navy-900) !important; }
  #layout-menu .popover-header { background-color: transparent !important; }
  #layout-menu .popover-header img { max-height: 52px; width: auto; padding: .25rem 0; }
  #taskmenu a { color: rgba(255,255,255,.72); }
  #taskmenu a:hover, #taskmenu a:focus { color: #fff; background: rgba(255,255,255,.08); }
  #taskmenu a.selected, #taskmenu a.selected:hover { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--sa-brass-200); }
  #taskmenu a.selected:before { color: var(--sa-brass-200); }
  #taskmenu .action-buttons a, #taskmenu .action-buttons a:hover, #taskmenu a.theme { color: var(--sa-brass-200); }
  #taskmenu .action-buttons a:hover, #taskmenu a.theme:hover { background: rgba(255,255,255,.08); }
  #taskmenu a.logout, #taskmenu a.logout:hover { color: #ff8a80 !important; }
}
html.dark-mode #layout-menu { border-right: 1px solid #152052; }

/* Contagem de não lidas em dourado (nos dois modos) */
.listing li .unreadcount { background-color: var(--sa-brass-200); color: var(--sa-navy-900); font-weight: 700; }
#message-header h2.subject { font: 600 1.9rem/1.15 var(--sa-serif); }
div.message-part div.pre { font-family: var(--sa-sans); font-size: .95rem; line-height: 1.6; }

/* ---------- Modo claro ---------- */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer,
html:not(.dark-mode) .searchbar { background-color: var(--sa-stone-50); }
html:not(.dark-mode) #layout > div > .header { border-bottom-color: var(--sa-stone-200); }
html:not(.dark-mode) #layout > div > .header a.button:hover,
html:not(.dark-mode) .toolbar a.button:hover { background-color: var(--sa-stone-100); }
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing tr.selected td { background-color: var(--sa-blue-100); }
html:not(.dark-mode) .listing li.selected > a { color: var(--sa-navy-900); font-weight: 700; }
html:not(.dark-mode) .listing li a:hover,
html:not(.dark-mode) .listing tr:hover td { background-color: #f6f3ec; }
html:not(.dark-mode) .listing li.selected .unreadcount { background-color: var(--sa-navy-900); color: #fff; }
html:not(.dark-mode) #messagelist tr.focused > td:first-child { border-left-color: var(--sa-blue-500); }
html:not(.dark-mode) #message-header h2.subject { color: var(--sa-ink); }
html:not(.dark-mode) div.message-part div.pre { color: #3b4459; }
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .btn.mainaction,
html:not(.dark-mode) button.mainaction {
  background: var(--sa-navy-900); border-color: var(--sa-navy-900); color: #fff; border-radius: 10px;
  box-shadow: 0 8px 18px -10px rgba(11,22,64,.7);
}
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn.mainaction:hover,
html:not(.dark-mode) button.mainaction:hover { background: var(--sa-blue-600); border-color: var(--sa-blue-600); }
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-select:focus { border-color: var(--sa-blue-500); box-shadow: 0 0 0 .2rem rgba(43,98,176,.15); }

/* ---------- Modo escuro: azul-marinho profundo com detalhes dourados ---------- */
html.dark-mode .listing li.selected > a { color: var(--sa-brass-200); font-weight: 700; }
html.dark-mode .listing li a:hover,
html.dark-mode .listing tr:hover td { background-color: rgba(255,255,255,.04); }
html.dark-mode #message-header h2.subject { color: #f1f3f8; }
html.dark-mode #message-header a, html.dark-mode #messagebody a, html.dark-mode .formlinks a { color: #9fb8e8; }
html.dark-mode div.message-part div.pre { color: #dfe3ee; }
html.dark-mode .btn-primary,
html.dark-mode .btn.mainaction,
html.dark-mode button.mainaction { border-radius: 10px; }

/* Celular: o menu abre como lista, com o logo no cabeçalho azul-marinho */
html.layout-phone #layout-menu .popover-header { background-color: var(--sa-navy-950) !important; }
@media screen and (max-width: 480px) {
  html:not(.dark-mode) #taskmenu a.selected { color: var(--sa-navy-900); background: var(--sa-blue-100); box-shadow: inset 3px 0 0 var(--sa-brass); }
  html.dark-mode #taskmenu a.selected { color: var(--sa-brass-200); box-shadow: inset 3px 0 0 var(--sa-brass-200); }
}

/* Leitura: e-mails em HTML (boletins, tabelas) cabem na largura da tela em vez de cortar à direita */
#messagebody div.message-htmlpart { overflow-wrap: break-word; }
#messagebody div.message-htmlpart table { max-width: 100% !important; }
#messagebody div.message-htmlpart img { max-width: 100% !important; height: auto !important; }
div.message-part div.pre { overflow-wrap: anywhere; }
/* No celular, tabelas e blocos de largura fixa (640 px etc.) se ajustam à tela */
html.layout-phone #messagebody div.message-htmlpart table { width: auto !important; }
html.layout-phone #messagebody div.message-htmlpart td,
html.layout-phone #messagebody div.message-htmlpart th { width: auto !important; }
html.layout-phone #messagebody div.message-htmlpart div,
html.layout-phone #messagebody div.message-htmlpart p { max-width: 100% !important; box-sizing: border-box; }
@media screen and (max-width: 480px) {
  #message-header h2.subject { font-size: 1.5rem; }
  #message-header .contactphoto { width: 3rem; height: 3rem; }
}