/* Webmail por dentro no padrão do sistema CBS da TWB: menu lateral azul-noite com o item
   ativo verde-água, faixa superior escura e cartões claros. As cores trocadas regra a regra
   do Elastic estão em twb-cores.css; as variáveis --twb-* vêm de twb-login.css. */
body, #layout, .popover, .ui-dialog, .form-control, .custom-select, .btn, button, input, select, textarea { font-family: var(--twb-sans); }
body { color: var(--twb-text); }

/* ---------- Menu lateral (como o sidebar do sistema) ---------- */
#layout-menu { background: var(--twb-navy) !important; }
/* sombra sobre as pastas só com o menu fixo (no celular ele é gaveta e o Elastic controla a camada) */
html:not(.layout-phone) #layout-menu { box-shadow: 4px 0 20px rgba(0,0,0,.18); z-index: 3; }
#layout-menu .popover-header { background-color: var(--twb-navy) !important; }
#taskmenu .special-buttons { background: var(--twb-navy) !important; }
/* "Criar email" é um item como os outros; só fica em destaque quando selecionado (tela de escrever) */
#taskmenu a,
#taskmenu .action-buttons a { color: rgba(255,255,255,.8); background: none; transition: all .2s ease; }
#taskmenu a:hover, #taskmenu a:focus,
#taskmenu .action-buttons a:hover, #taskmenu .action-buttons a:focus { color: var(--twb-teal); background: rgba(157,213,212,.1); }
#taskmenu a.selected, #taskmenu a.selected:hover,
#taskmenu .action-buttons a.selected, #taskmenu .action-buttons a.selected:hover { color: var(--twb-navy); background: var(--twb-teal); font-weight: 600; }
#taskmenu a.logout, #taskmenu a.logout:hover { color: #f87171 !important; }

/* Tela larga: menu de 260 px como o sidebar do sistema, com "TWBMAIL" em texto
   (TWB verde-água + MAIL branco, igual ao "TWBCBS") e itens em linha */
html.layout-large #layout-menu { width: 260px; min-width: 260px; }
html.layout-large #layout-menu .popover-header {
  display: block !important; height: auto; padding: 22px 20px 0 !important; text-align: center; white-space: nowrap;
  font-size: 0; line-height: 1;   /* some o espaço que o HTML deixa entre o logo escondido e o botão */
}
html.layout-large #layout-menu .popover-header img { display: none; }
html.layout-large #layout-menu .popover-header::before,
html.layout-large #layout-menu .popover-header::after { font: 800 28px/1.2 var(--twb-sans); letter-spacing: 1px; }
html.layout-large #layout-menu .popover-header::before { content: "TWB"; color: var(--twb-teal); }
html.layout-large #layout-menu .popover-header::after { content: "MAIL"; color: #fff; }
/* subtítulo embaixo, no lugar do nome do módulo do sistema */
html.layout-large #taskmenu::before {
  content: "E-mail corporativo"; display: block; margin: 2px 0 0; padding: 0 20px 14px; text-align: center;
  color: var(--twb-teal); font: 400 13px/1.3 var(--twb-sans); letter-spacing: 1px; text-transform: uppercase;
}
html.layout-large #taskmenu .action-buttons { display: block; padding: 0; }
html.layout-large #taskmenu .action-buttons::before {
  content: "Menu"; display: block; padding: 14px 30px 8px; text-align: left;
  color: rgba(157,213,212,.4); font: 700 10px/1 var(--twb-sans); letter-spacing: 1.5px; text-transform: uppercase;
}
/* Itens em linha, recuados: o selecionado vira um cartão verde-água arredondado */
html.layout-large #taskmenu a {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: none; height: auto; min-height: 42px;
  margin: 2px 16px; padding: 10px 14px; border: 0; border-radius: 10px;
  text-align: left; font-size: 14px; line-height: 1.3;
}
html.layout-large #taskmenu a:before { float: none !important; width: 18px !important; margin: 0 !important; font-size: 16px; line-height: 1; text-align: center; }
html.layout-large #taskmenu a span.inner { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.layout-large #taskmenu a.selected { box-shadow: 0 4px 15px rgba(157,213,212,.25); }
html.layout-large #taskmenu a.selected:hover { background: #b5e1e0; }
html.layout-large #taskmenu .special-buttons { width: 260px; padding: 10px 0 12px; border-top: 1px solid rgba(157,213,212,.1); }
html.layout-large #taskmenu .special-buttons a { min-height: 40px; padding: 9px 14px; font-size: 13px; }

/* ---------- Faixa superior escura (cabeçalho do sistema) ---------- */
#layout > div > .header { background-color: var(--twb-navy); color: #fff; border-bottom: 0; box-shadow: 0 2px 10px rgba(2,15,38,.25); z-index: 2; }
#layout > div > .header .header-title { color: #fff; font-weight: 600; }
#layout > div > .header a.button,
#layout > div > .header .toolbar a.button,
#layout > div > .header .menu a { color: rgba(255,255,255,.85); }
#layout > div > .header a.button:hover,
#layout > div > .header .toolbar a.button:hover,
#layout > div > .header .menu a:hover { color: var(--twb-teal); background-color: rgba(157,213,212,.1); }
#layout > div > .header a.button.disabled,
#layout > div > .header a.disabled,
#layout > div > .header a.button.disabled:hover { color: rgba(255,255,255,.32); background: none; }
#layout > div > .header a.dropbutton:after,
#layout > div > .header .dropbutton a.dropdown:after { color: rgba(255,255,255,.6); }
#layout > div > .header .dropbutton a.dropdown:hover { background-color: rgba(157,213,212,.1); }
/* o Elastic separa os itens com uma linha clara (útil só no menu do celular) */
html:not(.layout-phone):not(.layout-small) #layout > div > .header li,
html:not(.layout-phone):not(.layout-small) #layout > div > .header a { border-bottom-color: transparent !important; }

/* Busca logo abaixo da faixa */
.searchbar { background-color: #f8fafc; border-bottom: 1px solid var(--twb-borda); }
.searchbar input { font-family: var(--twb-sans); color: var(--twb-text); }
.searchbar input::placeholder { color: #94a3b8; }
.searchbar a:before, .searchbar form:before { color: #64748b; }

/* Rodapés (paginação) no cinza claro do sistema */
#layout > div > .footer { background-color: #f8f9fa; border-top: 1px solid var(--twb-borda); }
#layout > div > .footer .pagenav a { color: #475569; }
#layout > div > .footer .pagenav .pagenav-text, #layout > div > .footer .pagenav input { border-radius: 8px; }

/* ---------- Pastas: item ativo verde-água, como no menu do sistema ---------- */
.folderlist li.mailbox > a { color: var(--twb-text); transition: background .2s ease; }
.folderlist li.mailbox > a:before { color: #475569; }
.folderlist li.mailbox > a:hover { background-color: rgba(157,213,212,.15); }
.folderlist li.mailbox.selected,
.folderlist li.mailbox.selected > a { background-color: var(--twb-teal); color: var(--twb-navy); font-weight: 600; }
.folderlist li.mailbox.selected > a:before { color: var(--twb-navy); }
/* sem a faixa azul-clara que o Elastic põe à esquerda do item clicado (foco);
   pelo teclado o foco aparece como um contorno verde-água discreto */
html:not(.touch) .listing li > a:focus,
html:not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td { border-left-color: transparent; }
html:not(.touch) .listing li > a:focus-visible { box-shadow: inset 0 0 0 2px rgba(157,213,212,.7); }
.listing li .unreadcount { background-color: var(--twb-navy); color: #fff; font-weight: 700; border-radius: 10px; }
#layout-sidebar .header-title.username { font-size: 13px; }

/* ---------- Lista de mensagens ---------- */
.messagelist tr td { border-color: #f1f5f9; }
.messagelist tr:hover td { background-color: #f5f7fa; }
.listing tr.selected td, .messagelist tr.selected td { background-color: var(--twb-teal-claro); }
.messagelist tr.selected td:first-child, .messagelist tr.focused td:first-child { box-shadow: inset 3px 0 0 var(--twb-teal); }
.messagelist tr.unread td.subject span.subject a { color: var(--twb-navy); font-weight: 700; }
.messagelist td.subject span.msgicon.status.unread:before { color: var(--twb-blue); }
.messagelist td.subject span.fromto, .messagelist td.subject span.date, .messagelist td.subject span.size { color: var(--twb-muted); }
.messagelist tr.flagged td, .messagelist tr.flagged td a, .messagelist tr.flagged td span.fromto { color: var(--twb-danger); }

/* Painel de leitura e telas internas sobre o fundo cinza-claro do sistema */
#layout-content, #layout-content .iframe-wrapper { background-color: var(--twb-fundo); }
#message-header h2.subject { color: var(--twb-navy); font: 700 1.5rem/1.25 var(--twb-sans); }
#message-header .header-links a, #messagebody a { color: var(--twb-blue); }
div.message-part div.pre { font-family: var(--twb-sans); font-size: .95rem; line-height: 1.6; color: #334155; }

/* ---------- Botões, campos e menus ---------- */
.btn-primary, .btn.mainaction, button.mainaction {
  background: var(--twb-navy); border-color: var(--twb-navy); color: #fff; border-radius: 8px; font-weight: 600;
  box-shadow: 0 4px 15px rgba(2,15,38,.25);
}
.btn-primary:hover, .btn.mainaction:hover, button.mainaction:hover,
.btn-primary:focus, .btn.mainaction:focus, button.mainaction:focus { background: var(--twb-navy-hover); border-color: var(--twb-navy-hover); }
.btn-secondary { background: #fff; border-color: var(--twb-borda); color: #475569; border-radius: 8px; }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: var(--twb-navy); }
.form-control:focus, .custom-select:focus { border-color: var(--twb-teal); box-shadow: 0 0 0 3px rgba(157,213,212,.25); }
.popover { border-radius: 10px; border-color: var(--twb-borda); box-shadow: 0 10px 40px rgba(0,0,0,.15); }
.ui-dialog { border-radius: 12px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { border-bottom: 2px solid var(--twb-teal); }
.ui-dialog .ui-dialog-title { color: var(--twb-navy); font-weight: 700; }
.floating-action-buttons a.button { background: var(--twb-navy); box-shadow: 0 6px 20px rgba(2,15,38,.4); }

/* ---------- Celular: o menu abre como gaveta azul-noite ---------- */
html.layout-phone #layout-menu .popover-header { background-color: var(--twb-navy) !important; padding-left: 1.25rem !important; font-size: 0; }
/* "TWBMAIL" em texto, como no menu do computador */
html.layout-phone #layout-menu .popover-header img { display: none; }
html.layout-phone #layout-menu .popover-header::before,
html.layout-phone #layout-menu .popover-header::after { display: block; font: 800 22px/1 var(--twb-sans); letter-spacing: 1px; }   /* o Elastic esconde o :before aqui */
html.layout-phone #layout-menu .popover-header::before { content: "TWB"; color: var(--twb-teal); order: 1; }
html.layout-phone #layout-menu .popover-header::after { content: "MAIL"; color: #fff; order: 2; }
html.layout-phone #layout-menu .popover-header a.button.icon.cancel { order: 3; font-size: 1rem; color: #fff; }
html.layout-phone #taskmenu a { border-bottom-color: rgba(157,213,212,.12) !important; }
html.layout-phone #taskmenu a:before { color: inherit; }

/* Leitura: fundo branco e e-mails em HTML (boletins, tabelas) cabendo na largura da tela.
   Links longos quebram pelo branding_quebrar_longas; as palavras normais ficam inteiras. */
body.action-show #layout-content, body.action-preview #layout-content,
body.action-show #layout-content .frame-content, body.action-preview #layout-content .frame-content { background-color: #fff; }
#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: break-word; }
/* 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; }
html.layout-phone #message-header h2.subject { font-size: 1.3rem; }
html.layout-phone #message-header .contactphoto { width: 3rem; height: 3rem; }
html.layout-phone div.message-part div.pre { font-size: 1rem; }