/* Webmail por dentro: azul-noite só no menu lateral e na faixa de cima; o resto branco com
   letras azuis e destaque amarelo. As cores trocadas regra a regra do Elastic estão em
   pkbinder-cores.css; as variáveis --pk-* vêm de pkbinder-login.css. */
body, #layout, .popover, .ui-dialog, .form-control, .custom-select, .btn, button, input, select, textarea { font-family: var(--pk-sans); }
body { color: var(--pk-azul); }

/* ---------- Menu lateral ---------- */
#layout-menu { background: var(--pk-bg) !important; }
html:not(.layout-phone) #layout-menu { box-shadow: 4px 0 20px rgba(11,16,38,.18); z-index: 3; }
#layout-menu .popover-header { background-color: var(--pk-bg) !important; }
#taskmenu .special-buttons { background: var(--pk-bg) !important; }
#taskmenu a,
#taskmenu .action-buttons a { color: var(--pk-menu-texto); background: none; transition: all .2s ease; }
#taskmenu a:hover, #taskmenu a:focus,
#taskmenu .action-buttons a:hover, #taskmenu .action-buttons a:focus { color: var(--pk-yellow); background: rgba(255,203,5,.1); }
#taskmenu a.selected, #taskmenu a.selected:hover,
#taskmenu .action-buttons a.selected, #taskmenu .action-buttons a.selected:hover { color: var(--pk-tinta); background: var(--pk-yellow); font-weight: 600; }
#taskmenu a.logout, #taskmenu a.logout:hover { color: #ff8a94 !important; }

/* Tela larga: menu de 260 px com "pkbinder" em texto, como o logo do site */
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: italic 800 28px/1.2 var(--pk-head); letter-spacing: -.04em; }
html.layout-large #layout-menu .popover-header::before { content: "pk"; color: #fff; }
html.layout-large #layout-menu .popover-header::after { content: "binder"; color: var(--pk-yellow); }
html.layout-large #taskmenu::before {
  content: "Webmail"; display: block; margin: 2px 0 0; padding: 0 20px 14px; text-align: center;
  color: var(--pk-menu-texto); font: 500 12px/1.3 var(--pk-sans); letter-spacing: 2px; 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(195,201,228,.55); font: 700 10px/1 var(--pk-sans); letter-spacing: 1.5px; text-transform: uppercase;
}
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 8px 20px -8px rgba(255,203,5,.5); }
html.layout-large #taskmenu a.selected:hover { background: var(--pk-yellow-2); }
html.layout-large #taskmenu .special-buttons { width: 260px; padding: 10px 0 12px; border-top: 1px solid var(--pk-linha-escura); }
html.layout-large #taskmenu .special-buttons a { min-height: 40px; padding: 9px 14px; font-size: 13px; }

/* ---------- Faixa superior azul ---------- */
#layout > div > .header { background-color: var(--pk-azul); color: #fff; border-bottom: 0; box-shadow: 0 2px 10px rgba(11,16,38,.2); 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,.88); }
#layout > div > .header a.button:hover,
#layout > div > .header .toolbar a.button:hover,
#layout > div > .header .menu a:hover { color: var(--pk-yellow); background-color: rgba(255,203,5,.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(255,203,5,.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: #fff; border-bottom: 1px solid var(--pk-borda); }
.searchbar input { font-family: var(--pk-sans); color: var(--pk-azul); }
.searchbar input::placeholder { color: #7a84ab; }
.searchbar a:before, .searchbar form:before { color: var(--pk-muted); }

/* Rodapés (paginação) */
#layout > div > .footer { background-color: #fff; border-top: 1px solid var(--pk-borda); }
#layout > div > .footer .pagenav a { color: var(--pk-muted); }
#layout > div > .footer .pagenav .pagenav-text, #layout > div > .footer .pagenav input { border-radius: 8px; color: var(--pk-azul); }

/* ---------- Pastas ---------- */
#layout-sidebar, #layout-list, #layout-content, #layout-content .iframe-wrapper { background-color: #fff; }
.folderlist li.mailbox > a { color: var(--pk-azul); transition: background .2s ease; }
.folderlist li.mailbox > a:before { color: var(--pk-muted); }
.folderlist li.mailbox > a:hover { background-color: var(--pk-selecao); }
.folderlist li.mailbox.selected,
.folderlist li.mailbox.selected > a { background-color: var(--pk-yellow); color: var(--pk-tinta); font-weight: 600; }
.folderlist li.mailbox.selected > a:before { color: var(--pk-tinta); }
.folderlist li.mailbox.selected .unreadcount { background-color: var(--pk-azul); color: #fff; }
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(42,79,201,.5); }
.listing li .unreadcount { background-color: var(--pk-azul); color: #fff; font-weight: 700; border-radius: 10px; }
#layout-sidebar .header-title.username { font-size: 13px; }

/* ---------- Lista de mensagens ---------- */
.messagelist tr td { border-color: #eef0f7; }
.messagelist tr:hover td { background-color: var(--pk-claro); }
.listing tr.selected td, .messagelist tr.selected td { background-color: var(--pk-selecao); }
.messagelist tr.selected td:first-child, .messagelist tr.focused td:first-child { box-shadow: inset 3px 0 0 var(--pk-yellow); }
.messagelist td.subject span.subject a { color: var(--pk-azul); }
.messagelist tr.unread td.subject span.subject a { color: var(--pk-azul); font-weight: 700; }
.messagelist td.subject span.msgicon.status.unread:before { color: #e0a800; }
.messagelist td.subject span.fromto, .messagelist td.subject span.date, .messagelist td.subject span.size { color: var(--pk-muted); }
.messagelist tr.flagged td, .messagelist tr.flagged td a, .messagelist tr.flagged td span.fromto { color: var(--pk-red); }

/* Leitura */
#message-header h2.subject { color: var(--pk-azul); font: 800 1.5rem/1.25 var(--pk-head); }
#message-header .header-links a, #messagebody a { color: var(--pk-link); }
div.message-part div.pre { font-family: var(--pk-sans); font-size: .95rem; line-height: 1.6; color: var(--pk-azul); }
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; }

/* ---------- Botões, campos e menus ---------- */
.btn-primary, .btn.mainaction, button.mainaction {
  background: var(--pk-botao); border-color: transparent; color: var(--pk-tinta); border-radius: 8px; font-weight: 700;
}
.btn-primary:hover, .btn.mainaction:hover, button.mainaction:hover,
.btn-primary:focus, .btn.mainaction:focus, button.mainaction:focus { filter: brightness(1.04); border-color: transparent; color: var(--pk-tinta); }
.btn-secondary { background: #fff; border-color: var(--pk-borda); color: var(--pk-azul); border-radius: 8px; }
.btn-secondary:hover { background: var(--pk-claro); border-color: #cdd3e6; color: var(--pk-azul); }
.form-control:focus, .custom-select:focus { border-color: var(--pk-yellow); box-shadow: 0 0 0 3px rgba(255,203,5,.25); }
.popover { border-radius: 10px; border-color: var(--pk-borda); box-shadow: 0 10px 40px rgba(11,16,38,.15); }
.ui-dialog { border-radius: 12px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { border-bottom: 2px solid var(--pk-yellow); }
.ui-dialog .ui-dialog-title { color: var(--pk-azul); font-weight: 700; }
.floating-action-buttons a.button { background: var(--pk-botao); color: var(--pk-tinta); box-shadow: 0 6px 20px rgba(255,159,28,.45); }

/* ---------- Celular: o menu abre como gaveta azul ---------- */
html.layout-phone #layout-menu .popover-header { background-color: var(--pk-bg) !important; padding-left: 1.25rem !important; font-size: 0; }
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: italic 800 22px/1 var(--pk-head); letter-spacing: -.04em; }
html.layout-phone #layout-menu .popover-header::before { content: "pk"; color: #fff; order: 1; }
html.layout-phone #layout-menu .popover-header::after { content: "binder"; color: var(--pk-yellow); 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: var(--pk-linha-escura) !important; }
html.layout-phone #taskmenu a:before { color: inherit; }

/* No celular, tabelas e blocos de largura fixa 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 div.message-part div.pre { font-size: 1rem; }