/* ============================================================================
   UNBOX MAIL — skin do Roundcube (standalone, sobre o engine Elastic)
   Implementação fiel ao protótipo v3 (Claude Design, feito sob o briefing).
   ----------------------------------------------------------------------------
   Carregado DEPOIS do styles.min.css do Elastic (ver templates/includes/layout.html).
   DARK é o padrão (classe html.dark-mode aplicada por default no layout.html).

   Duas camadas:
   • CHROME  — HTML que NÓS injetamos (rail logo, conta, busca, card, rodapé, login,
               empty-state). Usa as classes do protótipo → praticamente idêntico.
   • ENGINE  — partes renderizadas pelo Roundcube (#layout-menu, #mailboxlist,
               #messagelist, toolbar, forms). Mapeadas para o visual do protótipo.
   ============================================================================ */

/* ============================================================================
   1) TOKENS  —  :root = LIGHT · html.dark-mode = DARK (padrão aplicado)
   ============================================================================ */
:root {
  --bg0:#ececf1; --bg1:#ffffff; --bg2:#ffffff; --bg3:#f4f4f8; --bg4:#e6e6ec;
  --b1:#e4e4ec;  --b2:#d2d2dc;
  --t1:#111113;  --t2:#41414f;  --t3:#8a8a99;
  --inp:#f6f6fa; --inpb:#dcdce4; --ti:#111113;
  --og:rgba(249,115,22,.13); --og2:rgba(249,115,22,.24);
  --shadow:0 24px 60px rgba(17,17,19,.14);
  --soft:0 10px 28px rgba(17,17,19,.10);

  /* Marca (fixas) */
  --or:#f97316; --or2:#e06810;
  --bl:#3b82f6; --gr:#22c55e; --rd:#ef4444; --am:#f59e0b;
  --glow:0 0 0 4px var(--og);

  /* Geometria */
  --r-card:14px; --r-sm:10px; --r-pill:999px; --r-lg:20px;

  /* Layout (larguras do briefing) */
  --rail:84px; --sidebar:264px; --list:392px; --bar:64px;
  --row-pad:14px;

  /* Tipografia */
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

html.dark-mode {
  --bg0:#09090b; --bg1:#111113; --bg2:#16161a; --bg3:#1c1c21; --bg4:#232328;
  --b1:#232328;  --b2:#2c2c33;
  --t1:#eeeef3;  --t2:#c8c8d8;  --t3:#6a6a7a;
  --inp:#1c1c21; --inpb:#2c2c33; --ti:#eeeef3;
  --og:rgba(249,115,22,.16); --og2:rgba(249,115,22,.28);
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --soft:0 10px 30px rgba(0,0,0,.24);
}

/* ============================================================================
   2) BASE
   ============================================================================ */
html, body, .btn, button, input, select, textarea,
h1,h2,h3,h4,h5,h6,
#layout, #layout-menu, #layout-sidebar, #layout-list, #layout-content {
  font-family: var(--sans);
}
body { background: var(--bg0); color: var(--t1); }
::selection { background: var(--og2); }

*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--b2); border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--t3); background-clip:padding-box; }

/* scrollbar dos scrollers principais (lista de mensagens, pastas, conteúdo) → LARANJA */
#messagelist-content, #folderlist-content, .scroller,
.content.frame-content, .frame-content, html.iframe, html.iframe > body { scrollbar-color: var(--or) transparent !important; }
#messagelist-content::-webkit-scrollbar-thumb,
#folderlist-content::-webkit-scrollbar-thumb,
.frame-content::-webkit-scrollbar-thumb, .content.frame-content::-webkit-scrollbar-thumb,
html.iframe::-webkit-scrollbar-thumb, html.iframe body::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb { background: var(--or) !important; background-clip:padding-box; }
#messagelist-content::-webkit-scrollbar-thumb:hover,
.scroller::-webkit-scrollbar-thumb:hover { background: var(--or2) !important; }

/* fundos das regiões */
#layout, #layout-menu, #layout-sidebar, #layout-list, #layout-content { background: var(--bg0); }
#layout-sidebar { background: var(--bg1); border-right:1px solid var(--b1); }
#layout-list    { background: var(--bg2); border-right:1px solid var(--b1); }
#layout-content { background: var(--bg0); }

/* ============================================================================
   3) RAIL  —  #layout-menu / #taskmenu  (ENGINE mapeado p/ .rail do protótipo)
   ============================================================================ */
#layout-menu {
  width: 96px !important; flex: 0 0 96px !important;
  display:flex; flex-direction:column; align-items:stretch;
  padding:14px 13px !important;    /* respiro horizontal (inclui o lado direito) */
  background:linear-gradient(180deg,var(--bg1),var(--bg2)); border-right:1px solid var(--b1);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;            /* esconde a barra de rolagem que comia o respiro à direita */
}
#layout-menu::-webkit-scrollbar { width:0 !important; height:0 !important; display:none; }
/* garante que os itens fiquem inset (não encostem na borda direita) */
#layout-menu #taskmenu { width:100%; box-sizing:border-box; }
#layout-menu #taskmenu a { width:auto; max-width:100%; box-sizing:border-box; }
/* esconder o popover-header (logo duplicado + "Fechar") — só serve ao popup mobile */
#layout-menu .popover-header { display:none !important; }
/* sem fundos estranhos nas áreas internas do rail */
#layout-menu #taskmenu, #layout-menu #taskmenu .action-buttons,
#layout-menu #taskmenu .special-buttons { background:transparent; }
/* logo do topo (CHROME, injetado no menu.html) */
.unbox-rail-logo {
  height:42px; margin:6px 2px 14px; flex:0 0 auto;
  background:center/contain no-repeat url('../images/logo-compact-light.png');
}
html.dark-mode .unbox-rail-logo { background-image:url('../images/logo-compact-dark.png'); }

#layout-menu #taskmenu { flex:1; display:flex; flex-direction:column; gap:10px; overflow:visible; align-items:stretch; }
/* tira os grupos do posicionamento ABSOLUTO do Elastic → entram no fluxo da coluna do rail */
#layout-menu #taskmenu .action-buttons,
#layout-menu #taskmenu .special-buttons {
  position:static !important; right:auto !important; left:auto !important; bottom:auto !important;
  display:flex; flex-direction:column; gap:10px;
  width:auto; max-width:100%; box-sizing:border-box;
}
#layout-menu #taskmenu .special-buttons { margin-top:auto; }

/* item do rail = ícone em cima + label embaixo */
#layout-menu #taskmenu a {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:54px; height:auto; padding:8px 2px;
  border:1px solid transparent; border-radius:14px; color:var(--t2);
}
#layout-menu #taskmenu a .inner {
  position:static !important; width:auto !important; height:auto !important; margin:0 !important;
  clip:auto !important; clip-path:none !important; -webkit-clip-path:none !important; overflow:visible !important;
  font-weight:700; line-height:1.1; white-space:nowrap; color:inherit;
  font-size:0;  /* esconde o texto longo do Roundcube; o curto entra via ::after */
}
/* labels curtos (iguais ao protótipo) — cabem no rail e não cortam */
#layout-menu #taskmenu a .inner::after { font-size:10.5px; font-weight:700; line-height:1.1; display:block; }
#layout-menu #taskmenu a.compose  .inner::after { content:"Criar"; }
#layout-menu #taskmenu a.mail      .inner::after { content:"E-mail"; }
#layout-menu #taskmenu a.contacts  .inner::after { content:"Contatos"; }
#layout-menu #taskmenu a.settings  .inner::after { content:"Ajustes"; }
#layout-menu #taskmenu a.theme     .inner::after { content:"Tema"; }
#layout-menu #taskmenu a.logout    .inner::after { content:"Sair"; }
/* Suporte (substitui o "Sobre"): mostra o texto real do .inner + ícone SVG próprio */
#layout-menu #taskmenu a.support .inner { font-size:10.5px !important; }
/* esconde o glifo VAZIO do Elastic (::before) que criava o espaço acima do ícone */
#layout-menu #taskmenu a.support::before { content:none !important; display:none !important; }
#layout-menu #taskmenu a.support svg { width:20px; height:20px; display:block; flex:0 0 auto; }
#layout-menu #taskmenu a:hover { background:var(--bg3); color:var(--t1); }
#layout-menu #taskmenu a.selected { background:var(--og); color:var(--or); border-color:var(--og2); }
#layout-menu #taskmenu a.logout:hover { background:rgba(239,68,68,.12); color:var(--rd); border-color:rgba(239,68,68,.3); }

/* "Criar" (compose) sólido laranja — com respiro CLARO em volta */
#layout-menu #taskmenu .action-buttons {
  display:flex !important; flex-direction:column;
  margin:14px 0 20px !important;   /* respiro visível: acima (do logo) e abaixo (do E-mail) */
}
#layout-menu #taskmenu a.compose {
  background:var(--or); color:#fff; border-color:var(--or); box-shadow:0 6px 16px rgba(249,115,22,.3);
  min-height:60px; padding:10px 4px;   /* folga interna */
}
#layout-menu #taskmenu a.compose:hover { background:var(--or2); color:#fff; }
#layout-menu #taskmenu a.compose .inner { color:#fff; }

/* ============================================================================
   4) SIDEBAR  —  cabeçalho de conta + busca + pastas + card + rodapé
   ============================================================================ */
/* cabeçalho de conta (CHROME via mail.html) */
#layout-sidebar > .header {
  display:flex !important; align-items:center; gap:13px;
  height:68px; min-height:68px; max-height:68px; overflow:visible;
  padding:0 16px !important; border-bottom:1px solid var(--b1);
}
/* botão "voltar" é só do mobile — fora no desktop */
#layout-sidebar > .header .back-list-button { display:none !important; }
/* avatar removido a pedido — sem o quadrado laranja */
#layout-sidebar > .header::before { display:none !important; content:none !important; }
#layout-sidebar > .header .username {
  flex:1 1 auto; min-width:0; margin:0 !important; padding:0 !important;
  font-size:13px; font-weight:600; color:var(--t1); line-height:1.25;
  text-align:left !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis;
}
#layout-sidebar > .header .username::after {
  content:"Unbox Mail Workspace"; display:block; text-align:left !important;
  font-size:11px; font-weight:500; color:var(--t3); margin:2px 0 0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* o "kebab" (ações de pasta) — quadrado certinho com ícone centralizado (área clicável = ícone) */
#layout-sidebar > .header .sidebar-menu {
  flex:0 0 auto; width:36px !important; height:36px !important;
  min-width:36px; min-height:36px; max-height:36px; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:9px; color:var(--t3); line-height:1 !important; overflow:visible;
}
#layout-sidebar > .header .sidebar-menu .inner { display:none !important; }
#layout-sidebar > .header .sidebar-menu::before {
  position:static !important; top:auto !important; bottom:auto !important; transform:none !important;
  margin:0 !important; padding:0 !important; line-height:1 !important; vertical-align:middle !important;
  display:inline-flex; align-items:center; justify-content:center;
}
#layout-sidebar > .header .sidebar-menu:hover { background:var(--bg3); color:var(--t1); }

/* busca de pastas (CHROME) */
.unbox-side-search { padding:14px 16px 8px; }   /* recuo 16px = alinha com o e-mail acima */
.unbox-input {
  width:100%; height:46px; border:1px solid var(--inpb); border-radius:var(--r-sm);
  background:var(--inp); color:var(--ti); padding:0 16px; font:500 13px var(--sans);
  display:flex; align-items:center; gap:14px;          /* respiro entre ícone e texto */
  cursor:text;                                          /* clicar em qualquer ponto = focar (label) */
}
.unbox-input .ic { pointer-events:none; }              /* clicar na lupa também foca o input */
.unbox-input input {
  flex:1; min-width:0; padding:6px 10px; margin:0; line-height:1.2; color:var(--ti); font:inherit;
  /* zera a aparência/borda padrão do navegador — sem frame branco em nenhum estado */
  -webkit-appearance:none; appearance:none;
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
}
.unbox-input input:focus, .unbox-input input:focus-visible {
  outline:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important;
}
.unbox-input input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ti); font:inherit; }
.unbox-input input::placeholder { color:var(--t3); }
.unbox-input:focus-within { border-color:rgba(249,115,22,.5); box-shadow:0 0 0 3px var(--og); }
.unbox-input .ic { color:var(--t3); flex:0 0 auto; display:inline-flex; }

/* PASTAS — #mailboxlist (ENGINE) mapeado p/ .folder do protótipo */
#mailboxlist { padding:4px 7px; display:flex; flex-direction:column; gap:1px; }
#mailboxlist li { position:relative; }
#mailboxlist li > a {
  display:flex; align-items:center; gap:7px; min-height:36px;
  padding:0 10px 0 30px !important;   /* gutter da seta menor → ícone mais perto */
  border-radius:9px; color:var(--t2); border:1px solid transparent; font-size:13px;
}
/* indentação por nível (preserva a árvore) — soma ao gutter base */
#mailboxlist li[aria-level="2"] > a { padding-left:46px !important; }
#mailboxlist li[aria-level="3"] > a { padding-left:62px !important; }
#mailboxlist li[aria-level="4"] > a { padding-left:78px !important; }

/* alinhamento vertical: ícone (::before) e título no centro da linha */
#mailboxlist li > a { align-items:center !important; }
#mailboxlist li > a::before {
  position:static !important; top:auto !important; align-self:center !important;
  vertical-align:middle !important; line-height:1 !important; margin-top:0 !important; margin-bottom:0 !important;
}

/* SETA (treetoggle) — laranja, centralizada na vertical (top:50%), na mesma linha do ícone/título */
#mailboxlist li > .treetoggle {
  /* top FIXO no centro da PRIMEIRA linha (36px → 18px). NÃO usar 50%: quando a pasta
     está expandida, o <li> engloba as subpastas e 50% jogaria a seta lá pra baixo. */
  position:absolute !important; left:7px; top:18px !important; transform:translateY(-50%) !important;
  width:18px; height:18px; bottom:auto !important;
  display:flex !important; align-items:center; justify-content:center;
  color:var(--or) !important; z-index:2; cursor:pointer; margin:0 !important; padding:0 !important;
  line-height:1 !important;
}
#mailboxlist li[aria-level="2"] > .treetoggle { left:23px; }
#mailboxlist li[aria-level="3"] > .treetoggle { left:39px; }
#mailboxlist li > .treetoggle::before {
  color:var(--or) !important; line-height:1 !important; vertical-align:middle !important; margin:0 !important;
}
#mailboxlist li a .unreadcount {
  font:600 11px var(--mono); color:#fff; background:var(--or);
  border-radius:var(--r-pill); padding:0 8px; margin-left:auto;
  /* centraliza a flag verticalmente na linha (estava colada no topo) */
  align-self:center !important; margin-top:0 !important; margin-bottom:0 !important;
  position:static !important; top:auto !important;
  display:inline-flex; align-items:center; justify-content:center; height:18px; line-height:1;
}
#mailboxlist li a:hover { background:var(--bg3); color:var(--t1); }
#mailboxlist li.selected > a {
  background:var(--og); color:var(--or); border-color:var(--og2); font-weight:600;
}
#mailboxlist li.selected > a .unreadcount { background:var(--or); color:#fff; }

/* SIDEBAR como coluna flex: header/busca/rodapé fixos, lista de pastas ROLA (rodapé não some) */
#layout-sidebar {
  display:flex !important; flex-direction:column !important;
  height:100% !important; max-height:100%; min-height:0; overflow:hidden !important;
  /* coluna de pastas mais estreita (desktop) — no mobile as regras de @media sobrescrevem */
  flex:0 0 240px !important; width:240px !important; max-width:240px !important; min-width:0 !important;
}
/* COMPOSE: painel "Opções e anexos" (sidebar direita) — mais largo que a coluna de pastas,
   e rótulos com espaço pra não quebrar. Só existe no compose, não afeta a lista de pastas. */
#layout-sidebar.sidebar-right {
  flex:0 0 350px !important; width:350px !important; max-width:350px !important; min-width:0 !important;
}
#compose-options .form-group.row { flex-wrap:nowrap !important; align-items:center; }
#compose-options .form-group.row > label.col-form-label {
  flex:1 1 auto !important; width:auto !important; max-width:none !important;
  padding-right:10px; white-space:normal; line-height:1.25;
}
#compose-options .form-group.row > .col-6:not(label) {
  flex:0 0 auto !important; width:auto !important; max-width:none !important; text-align:right;
}
#compose-options .custom-select { min-width:120px; }
#layout-sidebar > .header,
#layout-sidebar > .unbox-side-search,
#layout-sidebar > .footer { flex:0 0 auto !important; }
#layout-sidebar > #folderlist-content {
  flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
}

/* card de Armazenamento + rodapé "Desenvolvido por" (CHROME via mail.html) */
#layout-sidebar > .footer.unbox-sidebar-footer {
  flex:0 0 auto !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  height:auto !important; max-height:none !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border-top:0 !important;
  position:static !important; overflow:visible !important;
}
#layout-sidebar > .footer.unbox-sidebar-footer > * { flex:0 0 auto; width:auto; }
.side-card { margin:10px 14px 16px; padding:15px 16px; border:1px solid var(--b1); border-radius:var(--r-card); background:var(--bg2); }
.side-card h4 { margin:0 0 8px; font-size:12px; font-weight:600; color:var(--t2); display:flex; justify-content:space-between; }
.side-card h4 span { color:var(--or); font:600 11px var(--mono); }
.store-text { font-size:12.5px; color:var(--t2); margin-bottom:10px; }
.store-text b { color:var(--t1); font-weight:700; }
.bar-track { height:6px; border-radius:var(--r-pill); background:var(--bg4); overflow:hidden; }
.bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--or),var(--am)); }
.side-foot { padding:0 16px 16px; }
.side-foot .by { font-size:10.5px; color:var(--t3); margin-bottom:1px; line-height:1.2; }   /* "Desenvolvido por" bem perto da logo */
/* logo nova "unbox </>": claro p/ fundo escuro, escuro p/ fundo claro */
.side-foot .logo { height:22px; width:96px; opacity:.95; background:left center/contain no-repeat url('../images/logo_unbox_dark.png'); }
html.dark-mode .side-foot .logo { background-image:url('../images/logo_unbox_light.png'); }
.side-foot .ver { margin-top:6px; font:600 10px var(--mono); color:var(--t3); }

/* ============================================================================
   5) LISTA DE MENSAGENS  —  #messagelist (ENGINE)  → visual .msg do protótipo
   (linha de 2 níveis: remetente·hora / assunto·anexo·estrela + ponto não-lida)
   AJUSTE FINO previsto após 1º print — estrutura da <table> é do engine.
   ============================================================================ */
#messagelist-content { padding:8px; }
.messagelist { background:transparent; border:0; }
#messagelist tbody tr {
  border:1px solid transparent; border-radius:12px; background:transparent; color:var(--t2);
}
#messagelist tbody tr:hover { background:var(--bg3); border-color:var(--b1); }
/* respiro vertical entre as mensagens (10px em cima e embaixo de cada linha) */
#messagelist tbody tr > td { padding-top:10px !important; padding-bottom:10px !important; }
/* texto base: remetente / assunto / data */
#messagelist .fromto, #messagelist .fromto .adr span { font-size:12px; font-weight:600; color:var(--t2); }
#messagelist td.subject .subject a, #messagelist td.subject .subject a span { font-size:14px; color:var(--t3); font-weight:400; }
#messagelist .date { font:600 11px var(--mono); color:var(--t3); }
/* respiro superior da data/hora (cobre posicionamento absoluto E em fluxo) */
#messagelist td.subject .date { top:12px !important; margin-top:6px !important; }

/* === NÃO LIDA → remetente LARANJA + negrito + DOT laranja na frente === */
#messagelist tr.message.unread .fromto,
#messagelist tr.message.unread .fromto .adr span { color:var(--or) !important; font-weight:700 !important; }
#messagelist tr.message.unread td.subject .subject a,
#messagelist tr.message.unread td.subject .subject a span { color:var(--t1) !important; font-weight:700 !important; }
#messagelist tr.message.unread td.subject .fromto::before {
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--or) !important; margin-right:8px; vertical-align:middle;
}
/* LIDA: Roundcube remove a classe .unread ao abrir → some o dot e o negrito automaticamente */

/* remover os "dots" BRANCOS padrão do Elastic (status de TODA linha) — mantém só o laranja,
   e preserva as setinhas de respondida/encaminhada (não mexe no glifo delas) */
#messagelist .msgicon.status:not(.replied):not(.forwarded):not(.replied-forwarded)::before {
  display:none !important; content:none !important;
}

/* === SELECIONADA + FOCADA → fundo, BARRA esquerda e textos LARANJA === */
#messagelist tbody tr.message.selected, #messagelist tbody tr.message.selected td,
#messagelist tbody tr.message.focused,  #messagelist tbody tr.message.focused td {
  background: var(--og) !important;
}
/* mata qualquer indicador BRANCO do Elastic (outline / box-shadow / border) */
#messagelist tbody tr.message.selected, #messagelist tbody tr.message.focused { outline:0 !important; box-shadow:none !important; }
#messagelist tbody tr.message.selected td, #messagelist tbody tr.message.focused td {
  outline:0 !important; box-shadow:none !important;
  border-top-color:var(--og2) !important; border-bottom-color:var(--og2) !important; border-left-color:transparent !important;
}
/* BARRA laranja na borda esquerda do CONTEÚDO (td.subject) — onde estava a branca */
#messagelist tbody tr.message.selected td.subject,
#messagelist tbody tr.message.focused td.subject {
  box-shadow: inset 3px 0 0 0 var(--or) !important;
}
/* textos da linha selecionada: BRANCOS — força em TODO o conteúdo (mata o azul do truncado "...") */
#messagelist tbody tr.message.selected td.subject,
#messagelist tbody tr.message.selected td.subject *,
#messagelist tbody tr.message.focused td.subject,
#messagelist tbody tr.message.focused td.subject * { color:var(--t1) !important; }
/* data fica no cinza mono padrão (especificidade maior que o * acima) */
#messagelist tbody tr.message.selected td.subject .date,
#messagelist tbody tr.message.focused td.subject .date { color:var(--t3) !important; }

/* === FLAG ATIVA → linha INTEIRA pintada de VERMELHO (diferencia da seleção, que é laranja) === */
#messagelist tbody tr.message.flagged, #messagelist tbody tr.message.flagged td { background:rgba(239,68,68,.12) !important; }
#messagelist tbody tr.message.flagged td {
  border-top-color:rgba(239,68,68,.24) !important; border-bottom-color:rgba(239,68,68,.24) !important; border-left-color:transparent !important;
}
#messagelist tbody tr.message.flagged td.subject { box-shadow: inset 3px 0 0 0 var(--rd) !important; }
#messagelist tbody tr.message.flagged td.subject,
#messagelist tbody tr.message.flagged td.subject .fromto,
#messagelist tbody tr.message.flagged td.subject .fromto *,
#messagelist tbody tr.message.flagged td.subject span.subject,
#messagelist tbody tr.message.flagged td.subject span.subject a,
#messagelist tbody tr.message.flagged td.subject span.subject a * { color:var(--t1) !important; }
#messagelist tbody tr.message.flagged td.subject .date { color:var(--t3) !important; }

/* PRESERVA a cor dos ÍCONES em QUALQUER linha (inclusive pintadas: flag/selecionada/focada).
   Tem que setar nos elementos INTERNOS (svg/.ic-*) com `*`, senão o `td.subject * { color }`
   da linha pintada vence a cor herdada do botão e os ícones ficam cinza/brancos. */
#messagelist tbody tr.message td.subject .unbox-rowicons .unbox-readbtn,
#messagelist tbody tr.message td.subject .unbox-rowicons .unbox-readbtn *,
#messagelist tbody tr.message td.subject .unbox-rowicons span.flag,
#messagelist tbody tr.message td.subject .unbox-rowicons span.flag *,
#messagelist tbody tr.message td.subject .unbox-rowicons span.attachment,
#messagelist tbody tr.message td.subject .unbox-rowicons span.attachment * { color:var(--t3) !important; }
/* e-mail NÃO LIDO → carta laranja (mesmo selecionado) */
#messagelist tbody tr.message.unread td.subject .unbox-rowicons .unbox-readbtn,
#messagelist tbody tr.message.unread td.subject .unbox-rowicons .unbox-readbtn * { color:var(--or) !important; }
/* FLAG ATIVA → bandeira vermelha (mesmo selecionado) */
#messagelist tbody tr.message.flagged td.subject .unbox-rowicons span.flag,
#messagelist tbody tr.message.flagged td.subject .unbox-rowicons span.flag * { color:var(--rd) !important; }

/* estrela sinalizada / anexo */
#messagelist td.flag .flagged, #messagelist .flagged .flag::before { color:var(--am); }
#messagelist .attachment, #messagelist td.attachment span { color:var(--t3); }

/* ===== ÍCONES INLINE na linha do ASSUNTO (design "Ícones da linha") =====
   O JS (mail.html) move clipe+bandeira nativos e injeta a carta DENTRO da 2ª linha
   (.unbox-l2) do td.subject. A janela de hover foi removida. */
.listing-hover-menu { display:none !important; }
/* td.flags original fica escondido (movemos o conteúdo p/ a linha do assunto) */
#messagelist td.flags { display:none !important; }

/* respiro à direita da linha (data + ícones não colam na borda do card) */
#messagelist td.subject { padding-right:14px !important; }

/* linha 2 = [assunto (trunca) ........ ícones fixos]. width:100% mantém como 2ª linha do flex-wrap */
#messagelist td.subject .unbox-l2 {
  width:100%; display:flex; align-items:center; gap:8px; min-width:0;
}
#messagelist td.subject .unbox-l2 > span.subject {
  flex:1 1 auto; width:auto !important; min-width:0;   /* trunca antes dos ícones */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#messagelist td.subject .unbox-rowicons {
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:6px;
}

/* base: FRAME discreto SEMPRE da mesma cor (theme-aware via --bg3: claro no light, escuro no dark).
   O frame NUNCA muda de cor por estado — só o ÍCONE muda. */
#messagelist .unbox-rowicons .unbox-readbtn,
#messagelist .unbox-rowicons span.flag,
#messagelist .unbox-rowicons span.attachment {
  border:0; margin:0; padding:0; flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  color:var(--t3); background:var(--bg3);
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
#messagelist .unbox-rowicons .unbox-readbtn, #messagelist .unbox-rowicons span.flag { cursor:pointer; }
#messagelist .unbox-rowicons span.attachment { cursor:default; }
/* TODOS os wrappers internos preenchem o frame e centralizam o SVG (corrige a bandeira torta) */
#messagelist .unbox-rowicons span.flag > span,
#messagelist .unbox-rowicons .unbox-flagico,
#messagelist .unbox-rowicons .ic-line,
#messagelist .unbox-rowicons .ic-fill {
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
#messagelist .unbox-rowicons span.flag > span { width:100%; height:100%; }
/* ícones MAIORES (sobrescreve width/height=15 dos SVGs) e centrados */
#messagelist .unbox-rowicons svg { width:18px !important; height:18px !important; display:block; }
/* o ALVO do clique tem que ser o botão/flag (que tem data-action-link), não o SVG interno —
   assim o widget pula a seleção da linha e UM clique já executa a ação */
#messagelist .unbox-rowicons .unbox-readbtn *,
#messagelist .unbox-rowicons span.flag * { pointer-events:none; }
/* clipe / relatório de entrega (DSN) / criptografia: glifos NATIVOS usam float:left+margin
   do font-icon do Elastic → desalinhavam no frame. Aqui centralizamos. */
#messagelist .unbox-rowicons span.attachment > span,
#messagelist .unbox-rowicons span.attachment > span::before,
#messagelist .unbox-rowicons span.attachment::before {
  float:none !important; margin:0 !important; width:auto !important; line-height:1 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* hover: leve mudança só no hover (não por estado) */
#messagelist .unbox-rowicons .unbox-readbtn:hover,
#messagelist .unbox-rowicons span.flag:hover { color:var(--t1); background:var(--bg4); }

/* CARTA: lida = contorno cinza · NÃO lida = preenchida LARANJA (só o ícone muda) */
#messagelist .unbox-rowicons .unbox-readbtn .ic-fill { display:none; }
#messagelist tr.unread .unbox-rowicons .unbox-readbtn { color:var(--or); }
#messagelist tr.unread .unbox-rowicons .unbox-readbtn .ic-line { display:none; }
#messagelist tr.unread .unbox-rowicons .unbox-readbtn .ic-fill { display:inline-flex; }

/* BANDEIRA: esconde glifo nativo. sem flag = contorno cinza · com flag = VERMELHA (só o ícone muda) */
#messagelist .unbox-rowicons span.flag > span::before { content:none !important; }
#messagelist .unbox-rowicons .unbox-flagico .ic-fill { display:none; }
#messagelist tr.flagged .unbox-rowicons span.flag { color:var(--rd); }
#messagelist tr.flagged .unbox-rowicons .unbox-flagico .ic-line { display:none; }
#messagelist tr.flagged .unbox-rowicons .unbox-flagico .ic-fill { display:inline-flex; }

/* cabeçalho da lista */
#layout-list > .header, #messagelist-header.header {
  min-height:var(--bar); background:var(--bg1); border-bottom:1px solid var(--b1); color:var(--t1);
}
/* botões do topo da lista — laranja só no HOVER e quando o dropdown está REALMENTE aberto */
#messagelist-header a:hover,
#messagelist-header a[aria-expanded="true"],
#messagelist-header .toolbar-button:hover {
  color:var(--or) !important;
}
#messagelist-header a:hover { background:var(--og); }

/* ============================================================================
   6) TOOLBAR / BOTÕES / INPUTS / BADGES  (ENGINE)
   ============================================================================ */
.btn, button.btn, .button.btn, a.btn, input.btn {
  height:40px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--b2);
  background:transparent; color:var(--t2); font:700 12.5px var(--sans);
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px; line-height:1; vertical-align:middle; white-space:nowrap;
}
/* garante rótulo centralizado em qualquer botão (inclusive avisos como "Editar") */
.btn .inner, .btn > span, .btn > i { display:inline-flex; align-items:center; line-height:1; }
.btn:hover { color:var(--or); background:var(--og); border-color:var(--og2); }
.btn.btn-primary, .btn-primary {
  background:var(--or) !important; border-color:var(--or) !important; color:#fff !important;
  box-shadow:0 6px 16px rgba(249,115,22,.28);
}
.btn.btn-primary:hover, .btn-primary:hover { background:var(--or2) !important; border-color:var(--or2) !important; }
.btn.btn-danger:hover, .btn.delete:hover { color:var(--rd); background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }

/* toolbar de ações (leitura) */
.toolbar a.button, #messagetoolbar a.button { color:var(--t2); border-radius:var(--r-sm); }
.toolbar a.button:hover { color:var(--or); background:var(--og); }

/* inputs / form controls */
.form-control, input.form-control, select.custom-select, textarea.form-control,
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {
  background:var(--inp); border:1px solid var(--inpb); border-radius:var(--r-sm); color:var(--ti); font-family:var(--sans);
}
.form-control:focus, input:focus, select:focus, textarea:focus, .searchbar:focus-within {
  border-color:rgba(249,115,22,.5) !important; box-shadow:0 0 0 3px var(--og) !important; outline:0;
}
::placeholder { color:var(--t3); }
.searchbar, #mailsearchform.searchbar { background:var(--inp); border:1px solid var(--inpb); border-radius:var(--r-sm); }

/* ---- barra de busca de mensagens (wrapper .searchbar dentro de #layout-list) ---- */
#layout-list .searchbar, #layout-list .searchbar.menu, .searchbar.menu {
  margin:16px 20px 14px !important;        /* desencosta das divisórias (16 topo / 20 laterais) */
  height:46px !important; min-height:46px !important;   /* mesma altura da busca de pastas */
  padding:0 12px !important;               /* respiro interno horizontal */
  display:flex !important; align-items:center;          /* centraliza conteúdo na vertical */
  background:var(--inp) !important; border:1px solid var(--inpb) !important; border-radius:var(--r-sm) !important;
  overflow:hidden;
}
/* input ocupa a altura cheia e o texto fica centralizado/respirado */
#mailsearchform { height:44px !important; padding:0 8px !important; line-height:44px; }
/* remover a lupa da DIREITA (botão submit a.button.search) — a busca ainda funciona com Enter */
#layout-list .searchbar a.button.search,
#layout-list .searchbar a[href="#search"] { display:none !important; }
/* lupa da ESQUERDA é o form::before — descer 8px p/ centralizar na vertical */
#layout-list .searchbar form { position:relative; }
#layout-list .searchbar form::before { position:relative !important; top:6px !important; }
#layout-list .searchbar:focus-within { border-color:rgba(249,115,22,.5) !important; box-shadow:0 0 0 3px var(--og); }
/* todos os elementos internos com o MESMO fundo do campo (sem áreas escuras nos ícones) */
#layout-list .searchbar .button, #layout-list .searchbar a, #layout-list .searchbar a.button,
#layout-list .searchbar .input-group-text, #layout-list .searchbar input,
#layout-list .searchbar input.form-control, #layout-list .searchbar select,
#mailsearchform {
  background:transparent !important; border-color:transparent !important; box-shadow:none !important;
}
#layout-list .searchbar .button:hover, #layout-list .searchbar a:hover { color:var(--or) !important; background:var(--og) !important; }

a { color:var(--or); }
a:hover { color:var(--or2); }
:focus-visible { outline-color:var(--or); }

.badge, .pill {
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border-radius:var(--r-pill); font-size:11px; font-weight:700; background:var(--og); color:var(--or);
}
.badge.am,.label-warning{ background:rgba(245,158,11,.14); color:var(--am); }
.badge.bl,.label-info   { background:rgba(59,130,246,.14); color:var(--bl); }
.badge.gr,.label-success{ background:rgba(34,197,94,.14);  color:var(--gr); }
.badge.rd,.label-danger { background:rgba(239,68,68,.14);  color:var(--rd); }

/* ============================================================================
   7) LEITURA / COMPOSE / AJUSTES  (ENGINE — refino + iframe via embed.css)
   ============================================================================ */
#messagecontent, .messageview { background:var(--bg0); color:var(--t2); }
/* corpo do e-mail aberto: padding interno de 25px (texto não cola na borda do fundo branco) */
.rcmBody, #message-content .rcmBody, .message-htmlpart .rcmBody { padding:25px !important; box-sizing:border-box; }
.messageheader, #messageheader { background:var(--bg1); border-bottom:1px solid var(--b1); color:var(--t1); }
.messageheader .subject { color:var(--t1); font-weight:700; }
/* ===== MENSAGEM ABERTA: barra de anexos do topo ===== */
/* tira o fundo destacado da barra (fica = fundo do e-mail) */
#messageheader .attachmentslist, #attachment-list, .attachmentslist.toolbar, .message-attachments,
.attachmentslist {
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* margem entre os anexos */
#attachment-list li, .attachmentslist li, .message-attachments li { margin:0 10px 8px 0 !important; }
/* cada "chip" de anexo discreto */
.attachmentslist li { border-radius:var(--r-sm); transition:background .15s, color .15s, border-color .15s; }
/* HOVER laranja nos anexos */
.attachmentslist li:hover { background:var(--og) !important; border-color:var(--og2) !important; }
.attachmentslist li:hover, .attachmentslist li:hover a, .attachmentslist li:hover .attachment-name,
.attachmentslist li:hover span, .attachmentslist li:hover .size { color:var(--or) !important; }
.attachmentslist li:hover a::before { color:var(--or) !important; }

/* corpo branco do e-mail com cantos arredondados (o branco é o iframe da mensagem) */
.rcmBody, #message-htmlpart1, .message-htmlpart .rcmBody { border-radius:14px !important; overflow:hidden; }
/* CARD da mensagem = o .message-htmlpart (#message-htmlpart1): fundo BRANCO + UMA borda + sombra.
   O fundo do iframe (cinza no light / escuro no dark) fica de backdrop e ajuda a delimitar. */
#message-htmlpart1, .message-htmlpart {
  background:#fff !important;
  border:1px solid var(--b1) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.10) !important;
}
html:not(.dark-mode) #message-htmlpart1, html:not(.dark-mode) .message-htmlpart {
  border-color:var(--b2) !important; box-shadow:0 3px 14px rgba(17,17,19,.12) !important;
}
/* a .rcmBody INTERNA não leva borda/sombra (senão vira a linha dupla) e fica transparente sobre o branco */
.message-htmlpart .rcmBody, #message-htmlpart1 .rcmBody { border:0 !important; box-shadow:none !important; background:transparent !important; }
#messagecontframe, .iframe-wrapper, #message-content, #messagebody { border-radius:14px !important; overflow:hidden; }

/* margem entre o corpo branco e os cards de anexo
   IMPORTANTE: os cards são IRMÃOS do .message-htmlpart (não filhos), então a margem
   tem que ir no .message-htmlpart (o container do quadro branco). */
#messagebody > .message-htmlpart, #message-content > .message-htmlpart {
  display:block !important; margin-bottom:26px !important;
}
.rcmBody { display:block !important; float:none !important; }

/* card de anexo = QUADRADO estilo GALERIA: imagem COBRE o card; nome/ações sobrepostos; lado a lado */
#messagebody p.image-attachment, .message-htmlpart p.image-attachment, p.image-attachment, .image-attachment {
  position:relative !important; display:inline-block !important; vertical-align:top; float:none !important; box-sizing:border-box;
  width:96px !important; height:96px !important; aspect-ratio:1/1;
  min-width:0 !important; min-height:0 !important; max-width:96px !important; max-height:none !important;
  margin:0 9px 9px 0 !important; padding:0 !important;
  background:var(--bg3) !important; border:1px solid var(--b1) !important; border-radius:10px !important; overflow:hidden !important;
}
/* a IMAGEM cobre todo o card (object-fit: cover) */
#messagebody p.image-attachment .image-link, p.image-attachment .image-link, .image-attachment .image-link {
  position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important;
}
#messagebody p.image-attachment .image-thumbnail, p.image-attachment .image-thumbnail, .image-attachment .image-thumbnail {
  width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; border-radius:0 !important; display:block;
}
/* nome (overlay no topo, com gradiente p/ leitura) */
p.image-attachment .image-filename, .image-attachment .image-filename {
  position:absolute !important; top:0; left:0; right:0; z-index:2; padding:5px 8px; margin:0 !important;
  font-size:10px !important; font-weight:600; color:#fff !important; text-align:left;
  background:linear-gradient(180deg, rgba(0,0,0,.7), transparent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* tamanho (overlay topo-direita) */
p.image-attachment .image-filesize, .image-attachment .image-filesize {
  position:absolute !important; top:6px; right:8px; z-index:3; font-size:9px !important; color:#fff !important; display:block !important;
}
/* ações = SÓ ÍCONE, sobrepostas embaixo COM padding (sobem da borda) */
p.image-attachment .attachment-links, .image-attachment .attachment-links {
  position:absolute !important; bottom:0; left:0; right:0; z-index:3; padding:14px 0 9px;
  display:flex !important; gap:6px; justify-content:center; font-size:0 !important;
  background:linear-gradient(0deg, rgba(0,0,0,.6), transparent);
}
p.image-attachment .attachment-links a, .image-attachment .attachment-links a { font-size:0 !important; display:inline-flex; align-items:center; line-height:1; }
p.image-attachment .attachment-links a::before, .image-attachment .attachment-links a::before {
  font-size:20px !important; color:#fff !important; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
p.image-attachment .attachment-links a:hover::before { color:var(--or) !important; }
p.image-attachment br, .image-attachment br { display:none !important; }

#compose-content, .compose-content { background:var(--bg0); }
.composeoptions, #composeoptions { background:var(--bg2); border-bottom:1px solid var(--b1); }
.recipient, .compose-recipient, .ac-chip { background:var(--og); color:var(--or); border-radius:var(--r-pill); font-weight:600; }

/* COMPOSE: campo de destinatário (Para/Cc/Cco) com FOCO LARANJA (era azul) */
.recipient-input:focus-within, .recipient-input.focus,
.compose-headers .recipient-input:focus-within,
#compose-content .recipient-input:focus-within,
td.editfield .recipient-input:focus-within {
  border-color: rgba(249,115,22,.5) !important;
  box-shadow: 0 0 0 3px var(--og) !important; outline: 0 !important;
}
.recipient-input input:focus, .recipient-input textarea:focus { box-shadow:none !important; outline:0 !important; }

/* COMPOSE: botão "Abrir em nova janela" — rótulo centralizado verticalmente */
a.button.extwin, .extwin, #compose-content .footer .button, .compose .button.extwin {
  display:inline-flex !important; align-items:center !important; justify-content:center; gap:8px; line-height:1;
}
a.button.extwin .inner, .extwin .inner { display:inline-flex; align-items:center; line-height:1; }

/* ====== AJUSTES (settings) ====== */
/* item selecionado nas listas (categorias/seções): AZUL → LARANJA */
body.task-settings .listing li.selected,
body.task-settings .listing li.selected > a,
body.task-settings .listbox .listing li.selected > a,
body.task-settings #sections-table tr.selected,
body.task-settings #settings-menu li.selected a { background: var(--og) !important; }
body.task-settings .listing li.selected > a,
body.task-settings .listing li.selected > a *,
body.task-settings #sections-table tr.selected td,
body.task-settings #sections-table tr.selected span { color: var(--or) !important; }

/* seções do formulário: respiro interno + fundo unificado (conteúdo não cola na borda) */
.formcontainer fieldset, .propform fieldset,
body.task-settings .formcontent fieldset, body.task-settings fieldset {
  background:var(--bg1) !important; border:1px solid var(--b1) !important; border-radius:var(--r-card) !important;
  padding:16px 22px !important; margin:0 0 14px !important;
}
body.task-settings legend, .propform legend { color:var(--t1) !important; font-weight:700; padding:0 0 10px !important; border:0; }
/* o conteúdo do form respira da borda */
body.task-settings .formcontent, body.task-settings #preferences-details .boxcontent { padding:8px 4px; }

/* ====== CONTATOS (addressbook): item selecionado AZUL → LARANJA ====== */
body.task-addressbook .listing li.selected,
body.task-addressbook .listing li.selected > a,
body.task-addressbook #directorylist li.selected > a,
body.task-addressbook #contacts-table tr.selected,
body.task-addressbook #contacts-table tr.selected td { background: var(--og) !important; }
body.task-addressbook .listing li.selected > a,
body.task-addressbook .listing li.selected > a *,
body.task-addressbook #contacts-table tr.selected td,
body.task-addressbook #contacts-table tr.selected td * { color: var(--or) !important; }

/* TRAVA: ocultar troca de skin nos Ajustes (reforço; real = dont_override no server) */
.propform select[name="_skin"], #rcmfd_skin, tr:has(#rcmfd_skin), .form-group:has(#rcmfd_skin) { display:none !important; }

/* switches/toggles em laranja */
.pretty.p-switch input:checked ~ .state.p-primary label:after, input.form-check-input:checked {
  background-color:var(--or) !important; border-color:var(--or) !important;
}

/* accent LARANJA em controles nativos (checkbox / radio / select / range) */
:root, html, body { accent-color: var(--or); }
input[type="checkbox"], input[type="radio"], select, .form-check-input { accent-color: var(--or) !important; }

/* Bootstrap CUSTOM-SWITCH (toggles do #searchmenu e dos Ajustes) → LARANJA
   o azul fica no trilho = label.custom-control-label::before */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--or) !important; border-color: var(--or) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--or) !important; box-shadow: 0 0 0 3px var(--og) !important;
}
.custom-control-input:active ~ .custom-control-label::before { background-color: var(--og2) !important; }

/* dropdown POPOVER custom (Tipo/Data/Escopo) → scrollbar + hover/selecionado LARANJA */
.popover-body, .popover .scroller, .popover.select-menu .popover-body { scrollbar-color: var(--or) transparent; }
.popover-body::-webkit-scrollbar-thumb,
.popover.select-menu *::-webkit-scrollbar-thumb,
.popover .listing::-webkit-scrollbar-thumb { background: var(--or) !important; }
.popover.select-menu .listing li a:hover { background: var(--og) !important; color: var(--or) !important; }
.popover.select-menu .listing li a.selected { color: var(--or) !important; }

/* ============================================================================
   8) LOGIN  —  CENTRALIZADO / clean (design Login.html)
   ============================================================================ */
html.task-login, body.task-login, html.dark-mode body.task-login { height:100%; min-height:100%; }
/* CRÍTICO: qualquer transform/filter/perspective num ANCESTRAL faz o position:fixed
   abaixo se ancorar nele em vez da viewport (e o #layout da Elastic usa transform
   nas animações). Zeramos isso no login pra o overlay fixo voltar a ser viewport-relative. */
html.task-login, body.task-login, body.task-login #layout, body.task-login #layout-content {
  transform:none !important; filter:none !important; perspective:none !important;
  -webkit-transform:none !important; -webkit-filter:none !important;
  will-change:auto !important; backdrop-filter:none !important; contain:none !important;
}
body.task-login #layout {
  display:block !important; position:static !important; min-height:100vh; width:100%; margin:0; padding:0;
  background:var(--bg0);
}
/* OVERLAY À PROVA DE BALA: #layout-content vira um painel fixo do tamanho da
   viewport e centraliza o formulário via flex. Independe TOTALMENTE do layout
   da Elastic (min-height/padding/flex que ela injeta no #layout não afetam). */
#layout-content.unbox-login {
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important; min-height:100vh !important; max-width:none !important;
  margin:0 !important; padding:32px 20px !important; box-sizing:border-box !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  transform:none !important; overflow:auto !important; z-index:50 !important;
  border:0 !important; box-shadow:none !important;
  background:
    radial-gradient(900px 600px at 78% 12%, rgba(249,115,22,.10), transparent 60%),
    var(--bg0) !important;
}
/* O FORM SE CENTRALIZA SOZINHO, fixo na viewport — independe de onde o #layout-content
   esteja ou do que a Elastic faça com ele. Já confirmamos: NENHUM ancestral tem transform,
   então o fixed se ancora na tela e o translate(-50%,-50%) crava o centro. */
.unbox-login #login-form.login-box, .unbox-login .login-box {
  position:fixed !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important; -webkit-transform:translate(-50%,-50%) !important;
  width:calc(100vw - 40px) !important; max-width:400px !important;
  max-height:calc(100vh - 48px) !important; overflow:auto !important;
  margin:0 !important; padding:0 !important; min-height:0 !important; height:auto !important;
  display:block !important; text-align:left !important; background:transparent !important;
  z-index:51 !important;
}

/* esconde os "quadradinhos" de ícone (labels do loginform) — fica limpo, só placeholders */
.unbox-login #login-form label, .unbox-login #login-form .col-form-label,
.unbox-login #login-form .input-group-prepend, .unbox-login #login-form .input-group-text { display:none !important; }

/* CRÍTICO: os inputs HIDDEN (_token/_task/_action/_timezone/_url) têm class form-control —
   o Bootstrap os deixa display:block e minha regra os inchava em 52px → ~350px de espaço vazio.
   Forçar display:none neles remove o "padding fantasma" do topo. */
.unbox-login #login-form input[type="hidden"], #login-form input[type="hidden"] {
  display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;
}

/* logo (wordmark) */
.unbox-login .lb-logo {
  height:72px; margin:0 auto 40px;
  background:center/contain no-repeat url('../images/logo-wordmark-dark.png');
}
html:not(.dark-mode) .unbox-login .lb-logo { background-image:url('../images/logo-wordmark-light.png'); }

/* títulos */
.unbox-login .lb-title { font-size:26px; font-weight:700; margin:0 0 7px; color:var(--t1); text-align:left; }
.unbox-login .sub { color:var(--t3); font-size:13.5px; margin:0 0 30px; text-align:left; }

/* loginform: empilha label/campo (anula grid do Bootstrap) */
.unbox-login #login-form .form-group, .unbox-login #login-form .form-group.row { display:block !important; margin:0 0 4px !important; }
.unbox-login #login-form [class*="col-"], .unbox-login #login-form .col-form-label { width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; }
.unbox-login #login-form label { display:block; font-size:12px; font-weight:600; color:var(--t2); margin:0 0 8px; text-align:left; }
.unbox-login #login-form .form-control, .unbox-login #login-form input:not([type="checkbox"]):not([type="submit"]) {
  width:100% !important; height:52px !important; background:var(--inp) !important; border:1px solid var(--inpb) !important;
  border-radius:var(--r-sm) !important; color:var(--t1) !important; padding:0 14px !important; margin-bottom:18px !important; font:600 14px var(--sans) !important;
}
.unbox-login #login-form .form-control:focus, .unbox-login #login-form input:focus {
  border-color:rgba(249,115,22,.5) !important; box-shadow:0 0 0 3px var(--og) !important; outline:0;
}
.unbox-login #login-form input::placeholder { color:var(--t3); font-weight:500; }

/* botão entrar */
.unbox-login #login-form .btn-primary, .unbox-login #login-form button[type="submit"], .unbox-login #login-form input[type="submit"] {
  width:100% !important; height:54px !important; border:0 !important; border-radius:var(--r-sm) !important; cursor:pointer; margin-top:8px;
  background:var(--or) !important; color:#fff !important; font:700 14.5px var(--sans) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px;
  box-shadow:0 8px 22px rgba(249,115,22,.32) !important;
}
.unbox-login #login-form .btn-primary:hover, .unbox-login #login-form button[type="submit"]:hover {
  background:var(--or2) !important; box-shadow:0 10px 26px rgba(249,115,22,.4) !important;
}

/* rodapé */
.unbox-login #login-footer { margin-top:22px; text-align:center; font-size:11.5px; color:var(--t3); }
.unbox-login #login-footer .login-ver { display:block; margin-top:3px; font:600 10px var(--mono); color:var(--t3); letter-spacing:.2px; }
.unbox-login .foot { margin-top:12px; text-align:center; font-size:11.5px; color:var(--t3); }
.unbox-login .foot b { color:var(--t2); font-weight:600; }

/* selo "Desenvolvido por" + logo Unbox (link p/ unboxtecnologia.com.br) */
.unbox-login .login-credit {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  margin-top:26px; text-decoration:none; opacity:.9; transition:opacity .2s;
}
.unbox-login .login-credit:hover { opacity:1; }
.unbox-login .login-credit .by { font-size:10.5px; color:var(--t3); line-height:1; }
.unbox-login .login-credit .logo {
  height:20px; width:88px;
  background:center/contain no-repeat url('../images/logo_unbox_dark.png');
}
html.dark-mode .unbox-login .login-credit .logo { background-image:url('../images/logo_unbox_light.png'); }

/* esconde logo padrão do Elastic no login */
body.task-login #layout-content > .header, body.task-login .login-form > .logo { display:none; }

/* ============================================================================
   9) TRANSIÇÕES
   ============================================================================ */
#layout-menu,#layout-sidebar,#layout-list,#layout-content,.btn,#mailboxlist li a,#messagelist tbody tr,.form-control {
  transition: background .2s, color .2s, border-color .2s;
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================================
   10) MOBILE — Etapa 1: coluna única funcional (≤768px)
   Nosso CSS de desktop usa larguras fixas com !important que atropelam o mobile
   nativo do Elastic. Aqui devolvemos o comportamento de "um pane por vez":
   rail slim fixo à esquerda + só o pane .selected visível (o JS do Elastic já
   alterna .selected ao navegar: lista → mensagem → voltar).
   Breakpoints alinhados ao Elastic: small 480–768 · phone ≤480.
   ============================================================================ */
/* CRÍTICO: tudo escopado a html:not(.iframe). Os iframes de mensagem/compose/ajustes
   também têm um #layout-content interno — sem esse escopo, as regras de posição
   vazavam pra dentro e empurravam a mensagem pra direita (o "espaço verde"). */
@media screen and (max-width: 768px) {
  html:not(.iframe), html:not(.iframe) body { min-width: 0 !important; overflow: hidden !important; }

  /* container vira referência p/ os panes absolutos */
  html:not(.iframe) #layout { position: relative !important; display: block !important; height: 100% !important; width: 100% !important; overflow: hidden !important; }

  /* rail slim, SEMPRE visível à esquerda — display:flex forçado anula o display:none
     que o Elastic aplica no modo phone (app_menu(false)). */
  html:not(.iframe) #layout-menu {
    display: flex !important; flex-direction: column !important;
    position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 72px !important; flex: none !important; height: 100% !important;
    transform: none !important; visibility: visible !important; opacity: 1 !important;
    padding: 12px 8px !important; z-index: 60 !important;
  }
  html:not(.iframe) #layout-menu.popover { position: absolute !important; left: 0 !important; box-shadow: none !important; }

  /* remove o botão hambúrguer (não precisamos: o rail está sempre à vista) */
  html:not(.iframe) a.task-menu-button { display: none !important; }
  /* esconde a logo duplicada/deformada do popover-header.
     O Elastic faz `html.layout-phone #layout-menu .popover-header { display:flex !important }`,
     então precisamos vencer com a MESMA especificidade (e carregando depois) + variantes. */
  html:not(.iframe) #layout-menu .popover-header,
  html.layout-phone #layout-menu .popover-header,
  html.layout-small #layout-menu .popover-header,
  html.layout-phone .popover-header, html.layout-small .popover-header { display: none !important; }
  /* qualquer <img> de logo solta no rail (ex.: #logo do object name=logo) */
  html:not(.iframe) #layout-menu img, html:not(.iframe) #layout-menu #logo { display: none !important; }
  /* mata o overlay/backdrop do popover que travava os cliques */
  html:not(.iframe) .popover-overlay, html:not(.iframe) .menu-overlay { display: none !important; }

  /* sidebar / list / content: ocupam a área à direita do rail.
     NÃO forçamos display — o Elastic alterna a visibilidade via classe .hidden
     (screen_resize_small_all/show_content/show_list/show_sidebar). */
  html:not(.iframe) #layout-sidebar, html:not(.iframe) #layout-list, html:not(.iframe) #layout-content {
    position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    left: 72px !important; width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; flex: none !important; border: 0 !important;
  }
  /* garante que o pane escondido pelo Elastic realmente suma (id+classe vence) */
  html:not(.iframe) #layout-sidebar.hidden, html:not(.iframe) #layout-list.hidden, html:not(.iframe) #layout-content.hidden { display: none !important; }

  /* botões de navegação nativos do Elastic visíveis (voltar/pastas) */
  html:not(.iframe) #layout-list  > .header .back-sidebar-button,
  html:not(.iframe) #layout-content > .header .back-list-button { display: inline-flex !important; }

  /* remove o FAB azul flutuante — já temos "Criar" fixo no rail */
  html:not(.iframe) .floating-action-buttons { display: none !important; }

  /* rail: ícones centralizados verticalmente (robusto) */
  html:not(.iframe) #layout-menu #taskmenu a {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    min-height: 50px !important; padding: 9px 3px !important; gap: 4px !important;
  }
  html:not(.iframe) #layout-menu #taskmenu a::before { line-height: 1 !important; margin: 0 !important; }
  html:not(.iframe) #layout-menu #taskmenu a .inner { display: block !important; }
  html:not(.iframe) #layout-menu #taskmenu a .inner::after { font-size: 9px; }
}

/* ---- phone ≤480: rail ainda mais slim p/ sobrar espaço de leitura ---- */
@media screen and (max-width: 480px) {
  html:not(.iframe) #layout-menu {
    display: flex !important; flex-direction: column !important;
    width: 60px !important; max-width: 60px !important; padding: 10px 5px !important;
    transform: none !important; visibility: visible !important; opacity: 1 !important;
  }
  html:not(.iframe) #layout-sidebar, html:not(.iframe) #layout-list, html:not(.iframe) #layout-content { left: 60px !important; }
  html:not(.iframe) #layout-menu .unbox-rail-logo { transform: scale(.85); }
}