/* SanWeb — webmail (tema Elastic). Vermelho SanWeb no lugar do azul, fundo de servidores no login. */
:root { --sw-vermelho: #c70f19; --sw-escuro: #1f2329; }

/* Tela de login */
body.task-login { background: #f0f3f6 url('fundo.webp') center / cover no-repeat fixed !important; }
body.task-login #layout-content { background: transparent !important; }
body.task-login #login-form {
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(20,30,45,.14);
  padding: 32px 28px !important; animation: sw-entra .6s cubic-bezier(.2,.8,.2,1) both;
}
body.task-login #logo { max-height: 64px; margin-bottom: 12px; }
@keyframes sw-entra { from { opacity: 0; transform: translateY(14px); } }

/* Botões principais e destaques em vermelho */
.btn-primary, .button.mainaction, button.mainaction, .formbuttons .btn-primary, .ui-dialog .btn-primary {
  background-color: var(--sw-vermelho) !important; border-color: var(--sw-vermelho) !important; color: #fff !important;
  border-radius: 8px !important; transition: filter .2s, box-shadow .2s, transform .15s;
}
.btn-primary:hover, .button.mainaction:hover { filter: brightness(1.1); box-shadow: 0 6px 16px rgba(199,15,25,.28); }
.btn:active, .button:active { transform: scale(.97); }
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--sw-vermelho) !important; box-shadow: 0 0 0 3px rgba(199,15,25,.12) !important;
}
a, .link, .listing li a:hover { color: var(--sw-vermelho); }

/* Menu lateral escuro com item ativo vermelho */
#layout-menu { background: var(--sw-escuro) !important; }
#layout-menu .selected, #layout-menu a.selected { color: #fff !important; background: var(--sw-vermelho) !important; border-radius: 10px; }
#layout-menu a:hover { color: #fff !important; }
.listing li.selected, .listing tr.selected td, table.records-table tr.selected td { background-color: rgba(199,15,25,.10) !important; color: inherit !important; }
.listing li.selected > a, .listing li.focused > a { border-left: 3px solid var(--sw-vermelho); }
.unread .subject a, .msglist tr.unread td.subject span.subject a { color: var(--sw-escuro); }
.menu a.active:hover, .toolbar a:hover { color: var(--sw-vermelho) !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* v2 — dentro da caixa */
#layout-menu .popover-header img, #layout-menu #logo { max-height: 40px !important; margin: 10px auto !important; display: block; }
#layout-menu a.compose, #layout-menu a.compose:before { color: #fff !important; }
#layout-menu a.compose { background: var(--sw-vermelho) !important; border-radius: 10px; margin: 6px 4px; }
#layout-menu a.compose:hover { filter: brightness(1.1); }
#folderlist-content li.selected > a, #folderlist-content li.selected > div, .listing li.selected > a {
  background-color: rgba(199,15,25,.08) !important; color: var(--sw-vermelho) !important;
}
#folderlist-content li.selected > a:before { color: var(--sw-vermelho) !important; }
.header-title, .toolbar a.button:hover:before { color: inherit; }

/* v3 — respiro no menu escuro, sem encostar na borda */
#layout-menu .menu { padding: 0 7px !important; }
#layout-menu .menu a, #layout-menu a.compose {
  margin: 5px 0 !important; padding-left: 2px !important; padding-right: 2px !important;
  border-radius: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#layout-menu .menu a span.inner, #layout-menu a.compose span.inner { font-size: .72rem; }
/* v4 — ícones maiores e "S." inteiro no topo */
#layout-menu .menu a:before, #layout-menu a.compose:before { font-size: 1.55rem !important; line-height: 1.6 !important; margin-bottom: 2px; }
#layout-menu .menu a, #layout-menu a.compose { padding-top: 10px !important; padding-bottom: 8px !important; }
#layout-menu .popover-header { padding-top: 14px !important; height: auto !important; }
#layout-menu #logo { max-height: 38px !important; width: auto !important; }
/* v5 — "Configurações" vira "Config" no menu lateral (Sandro) */
#layout-menu a.settings span.inner { font-size: 0 !important; }
#layout-menu a.settings span.inner::after { content: "Config"; font-size: .72rem; }
/* v6 — "S." centralizado no topo e botões com a mesma margem dos dois lados */
#layout-menu .popover-header { display: flex !important; align-items: center; justify-content: center; height: 64px !important; padding: 0 !important; margin: 4px 0 6px !important; }
#layout-menu .popover-header img, #layout-menu #logo { max-height: 34px !important; width: auto !important; margin: 0 auto !important; display: block; }
#layout-menu .menu { box-sizing: border-box; width: 100% !important; padding: 0 7px !important; }
#layout-menu .menu a, #layout-menu a.compose { box-sizing: border-box; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
#layout-menu .special-buttons { width: 100% !important; box-sizing: border-box; background: transparent !important; }
#layout-menu .special-buttons a { width: 100% !important; box-sizing: border-box; }