/* Entretrês · webmail — a tela de login com a cara da marca.
   Fundo preto quente, marca em negativo, botão no laranja da marca.
   Mira os seletores reais do elastic: #login-form + tabela interna.     */
:root{ --e3-paper:#0F0E0D; --e3-ink:#F2EFEA; --e3-laser:#EC4517; --e3-dust:#8A827B; }

body.task-login,
body.task-login #layout,
body.task-login #layout-content{ background:var(--e3-paper) !important; }
body.task-login #layout-content{ display:flex; align-items:center; justify-content:center; }

body.task-login #login-form{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  width:min(88vw,340px);
}
body.task-login #login-form table{ width:100%; border-collapse:separate; border-spacing:0; }

/* a marca, grande e respirando de leve */
body.task-login #logo{
  display:block; margin:0 auto 34px; width:min(58vw,210px); height:auto;
  transform-origin:50% 45%; animation:e3breath 6.5s 1s ease-in-out infinite;
}
@keyframes e3breath{0%,100%{transform:scale(1)}50%{transform:scale(1.016)}}
@media (prefers-reduced-motion:reduce){ body.task-login #logo{ animation:none; } }

/* tira os ícones dentro dos campos — a linha fica limpa */
body.task-login #login-form .input-group-prepend{ display:none !important; }

/* campos */
body.task-login #login-form input.form-control{
  background:#171512 !important; border:1px solid #2A2622 !important;
  color:var(--e3-ink) !important; border-radius:2px !important;
  height:48px !important; padding:0 14px !important; margin-bottom:12px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.9rem;
}
body.task-login #login-form input.form-control:focus{
  border-color:var(--e3-laser) !important;
  box-shadow:0 0 0 1px var(--e3-laser) !important; outline:none !important;
}
body.task-login #login-form input.form-control::placeholder{ color:#5C554F !important; }
body.task-login #login-form td.title{ display:none !important; }

/* o botão ENTRAR no laranja da marca (só na tela de login) */
body.task-login #login-form button.btn-primary,
body.task-login #login-form .btn.btn-primary,
body.task-login button.btn-primary{
  background:var(--e3-laser) !important; background-image:none !important;
  border:0 !important; color:#fff !important; border-radius:2px !important;
  width:100%; height:48px !important; margin-top:6px;
  text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:500;
}
body.task-login #login-form button.btn-primary:hover{ filter:brightness(1.08); }

/* o "Entretrês" do rodapé, discreto */
body.task-login #layout-footer, body.task-login .footer{ color:var(--e3-dust) !important; }

/* olho da senha */
body.task-login #login-form td.e3-haseye{ position:relative; }
body.task-login #login-form #rcmloginpwd{ padding-right:46px !important; }
body.task-login #login-form .e3-eye{
  position:absolute; right:8px; top:24px; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:0; padding:0; color:#8A827B; cursor:pointer;
}
body.task-login #login-form .e3-eye:hover{ color:var(--e3-laser); }
body.task-login #login-form .e3-eye svg{ width:20px; height:20px; display:block; }
body.task-login #login-form .e3-eye .ocultar{ display:none; }
body.task-login #login-form .e3-eye.on .ver{ display:none; }
body.task-login #login-form .e3-eye.on .ocultar{ display:block; }

/* ══════════════════════════════════════════════════════════════════
   PELE "FIO" — aplicação (caixa de entrada, leitura, pastas)
   Base: modo escuro nativo do elastic (forçado pelo e3.js).
   Aqui só o acabamento Entretrês: preto quente da marca, Space Grotesk,
   sem avatares, e o laranja como única cor de acento.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* preto da marca no lugar do cinza-azulado do dark padrão */
html.dark-mode{ --e3-paper:#0F0E0D; --laser:#EC4517; }
html.dark-mode body:not(.task-login),
html.dark-mode #layout,
html.dark-mode #layout > .content,
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list{ background-color:#0F0E0D !important; }
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header,
html.dark-mode .toolbar{ background-color:#0F0E0D !important; }

/* tipografia da direção Fio */
html.dark-mode body:not(.task-login){
  font-family:'Space Grotesk',system-ui,sans-serif;
}
html.dark-mode #messagelist td.subject,
html.dark-mode .listing li a{ font-family:'Space Grotesk',system-ui,sans-serif; letter-spacing:-.005em; }

/* uma cor só de acento: laranja em tudo que era azul */
html.dark-mode{ accent-color:#EC4517; }
html.dark-mode .btn.btn-primary,
html.dark-mode a.btn.btn-primary,
html.dark-mode button.btn-primary{
  background-color:#EC4517 !important; border-color:#EC4517 !important; color:#fff !important;
}
html.dark-mode .btn.btn-primary:hover{ filter:brightness(1.08); }
/* links e ícones ativos */
html.dark-mode a{ color:#F2EFEA; }
html.dark-mode .toolbar a.button.selected,
html.dark-mode .toolbar a.button:hover{ color:#EC4517 !important; }

/* pasta ativa: fio laranja à esquerda, sem bloco azul */
html.dark-mode .treelist li.selected > a,
html.dark-mode .treelist li a.selected{
  background:transparent !important; color:#F2EFEA !important;
  box-shadow:inset 3px 0 0 #EC4517 !important;
}
/* contador de não lidas: laranja discreto */
html.dark-mode .treelist li a .unreadcount,
html.dark-mode .unreadcount{
  background:rgba(236,69,23,.16) !important; color:#EC4517 !important;
}

/* mensagem selecionada na lista: fio laranja, fundo quase igual */
html.dark-mode #messagelist tr.selected > td,
html.dark-mode .listing li.selected > a{
  background-color:#1B1815 !important; color:#F2EFEA !important;
}
html.dark-mode #messagelist tr.selected td.subject{
  box-shadow:inset 3px 0 0 #EC4517;
}
/* não lidas: marcador laranja em vez de azul */
html.dark-mode #messagelist tr.unread td.subject a,
html.dark-mode #messagelist tr.unread td.flags .flag span{ color:#EC4517 !important; }
html.dark-mode #messagelist tr.unread td.subject{ font-weight:600; }

/* SEM avatares (direção Fio): esconde as fotos de contato na lista/leitura */
html.dark-mode .contactphoto,
html.dark-mode span.contactphoto,
html.dark-mode #messagelist .contact,
html.dark-mode .message-partheaders .contactphoto{ display:none !important; }

/* fios finos no lugar de blocos: divisórias discretas */
html.dark-mode #messagelist tr td{ border-color:rgba(242,239,234,.07) !important; }
html.dark-mode .listing li{ border-color:rgba(242,239,234,.07) !important; }

/* barra superior / logo E3 respira leve */
html.dark-mode #layout-menu .popover-header img,
html.dark-mode .menu img.logo{ filter:none; }

/* ─── acentos: os seletores REAIS do elastic (do print do Pietro) ───
   Trocam o azul #37beff do tema pelo laranja da marca, nos pontos certos. */
/* botão "Criar email" (ação flutuante) */
.floating-action-buttons a.button,
html.dark-mode .floating-action-buttons a.button{
  background:#EC4517 !important; color:#fff !important;
}
.floating-action-buttons a.button:hover{ filter:brightness(1.08); }

/* contador de não lidas nas pastas */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
html.dark-mode .unreadcount{
  background:rgba(236,69,23,.18) !important; color:#EC4517 !important; font-weight:600 !important;
}

/* bolinha de mensagem não lida (era amarela/azul) → laranja */
.messagelist tr.unread td.subject span.subject a::before,
#messagelist .unread:before,
.unread:before,
html.dark-mode .unread::before{ color:#EC4517 !important; }

/* pasta selecionada: fio laranja à esquerda */
.folderlist li.selected > a,
.listing li.selected > a,
html.dark-mode .folderlist li.selected > a{
  box-shadow:inset 3px 0 0 #EC4517 !important;
}

/* itens de menu ativos/selecionados, seletor de data, interruptores */
.popupmenu .listing li.selected,
.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before{
  background:#EC4517 !important; border-color:#EC4517 !important;
}

/* mensagem selecionada na lista de e-mails */
#messagelist tr.selected td,
.messagelist tr.selected td{ background:#1B1815 !important; }
#messagelist tr.selected td.subject{ box-shadow:inset 3px 0 0 #EC4517 !important; }

/* "Criar email" no menu de tarefas (era #37beff azul) */
#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover{ color:#EC4517 !important; }