/**
 * Skin MultiCloud — derivada da Elastic (S15).
 *
 * ---------------------------------------------------------------------
 * POR QUE @import EM VEZ DE COPIAR O CSS DA ELASTIC
 * A Elastic é compilada de LESS, e a forma "correta" de trocar as cores
 * seria recompilar `colors.less`. Isso exigiria um build de LESS e
 * produziria uma CÓPIA completa do CSS do Roundcube — que precisaria ser
 * recompilada a cada atualização, sob pena de a skin ficar presa ao visual
 * de uma versão antiga enquanto o resto do webmail muda.
 *
 * Importar o CSS que a Elastic publicar e sobrescrever um punhado de
 * regras troca fidelidade total por manutenção quase nula: o
 * `docker compose pull` traz a Elastic nova e esta folha continua valendo.
 * O que está aqui é, deliberadamente, só o que carrega identidade —
 * logo, fundo da tela de login, barra de tarefas e botão primário.
 *
 * O @import é relativo a ESTE arquivo, então as URLs internas do CSS da
 * Elastic (fontes, ícones) continuam resolvendo a partir da pasta dela.
 *
 * `styles.min.css` ao lado é uma cópia idêntica: fora do modo de
 * desenvolvimento o Roundcube pede a versão minificada, e uma skin que só
 * traz `styles.css` carrega sem estilo nenhum.
 * ---------------------------------------------------------------------
 */

@import url("../../elastic/styles/styles.min.css");

/* ---------------------------------------------------------------------
 * Estes 7 tokens sao uma COPIA MANUAL do `:root` de
 * `public/assets/css/main.css`. O webmail roda noutro container e noutra
 * origem: nao ha como importar a folha do site, entao a unica coisa que
 * mantem as tres superficies na mesma cor e esta tabela -- e a disciplina
 * de mexer nas duas juntas.
 *
 * ⚠️ Ate a S34 elas tinham DIVERGIDO em silencio: `--mc-royal` era
 * `#0055ff` (o royal declarado no CLAUDE.md) enquanto o site ja usava
 * `#2563EB`/`#3B82F6` ha muitas sessoes, e `--mc-navy-800` e `--mc-ice`
 * nao tinham contrapartida nenhuma. O webmail era literalmente outro azul.
 * Alinhado ao SITE (decisao do usuario em 2026-09-15), que e a superficie
 * com contraste ja calculado e conferido em AA.
 *
 * origem de cada valor, em main.css:
 *   --mc-navy-900  ->  --bg-elev    #0F172A
 *   --mc-navy-800  ->  --royal-600  #1D4ED8   (era #1e3a8a, sem par)
 *   --mc-royal     ->  --royal      #2563EB   (era #0055ff)
 *   --mc-sky       ->  --accent-brand #60A5FA (S103: sem ciano; o nome fica porque a skin anderson redeclara)
 *   --mc-ice       ->  --text       #E6ECF7   (era #f8fafc, sem par)
 *   --mc-accent    ->  --accent-brand #60A5FA (S103)
 *   --mc-radius*   ->  0 (S99, quadrado; o site usa 4px/2px desde a S103)
 * --------------------------------------------------------------------- */
:root {
    --mc-navy-900: #0f172a;
    --mc-navy-800: #1d4ed8;
    --mc-royal:    #2563eb;
    --mc-sky:      #60a5fa;
    /* S103: cor de TEXTO/acento da marca sobre navy (royal claro). Copia manual
       de --accent-brand (#60A5FA) do main.css. --mc-sky fica so para fundo/brilho.
       A skin anderson redeclara --mc-accent com o ciano dela. */
    --mc-accent:   #60a5fa;
    --mc-ice:      #e6ecf7;

    /* Geometria. Ate a S52 a skin nao tinha token de raio nenhum e os
       valores viviam soltos em px -- o botao de recuperacao carregava um
       `8px` literal onde o sistema diz 9px (divida registrada na S50). */
    --mc-radius:    0; /* S99: quadrado */
    --mc-radius-sm: 0;

    /* --mc-royal-400 -> copia manual de --royal-400 (#3B82F6) do main.css,
       so para compor o gradiente do botao primario (--mc-grad). Nao existia
       token equivalente aqui antes da S87. */
    --mc-royal-400: #3b82f6;
    /* S103: triplet RGB dos tints/brilhos (copia manual de --rgb-royal do main.css); a skin anderson redeclara com o ciano dela. */
    --mc-tint:      59, 130, 246;
}

/* ---------------------------------------------------------------------
 * S87 — camada de tokens de DESIGN ("Dark Slate Luxury & Royal Blue Tech",
 * glassmorphism). Estes tokens sao de GEOMETRIA/MOVIMENTO/TIPOGRAFIA, nao
 * de cor de marca -- por isso vivem AQUI, na skin `multicloud`, e a skin
 * `anderson` os herda de graca pelo @import (so redeclara --mc-focus-ring
 * e --mc-grad, que dependem de cor). Regra da secao 6 da skill de frontend
 * ("mexeu na paleta de um, mexe no outro") continua valendo para --mc-*
 * de COR; esta tabela nova nao entra nela.
 * --------------------------------------------------------------------- */
:root {
    /* Raio: cards 14px (== --mc-radius, ja existia), controles 10px (novo,
       INPUTS/botoes/selects -- ate aqui so existia --mc-radius-sm=9px para
       paineis pequenos), pill para badge/contador/botao primario/busca. */
    --mc-radius-md:   0;
    --mc-radius-pill: 0;

    /* Sombras em camadas (S87) -- suaves e "empilhadas" (Y grande, blur
       grande, spread negativo), no espirito do --shadow do site
       (`0 18px 50px -20px rgba(2,8,23,.8)`), mas em 3 pesos porque o
       webmail tem mais tipo de superficie elevada (linha de lista, card de
       leitura, dialogo modal) do que o site. */
    --mc-shadow-sm: 0 2px 8px rgba(2, 8, 23, .10);
    --mc-shadow-md: 0 10px 28px -10px rgba(2, 8, 23, .35);
    --mc-shadow-lg: 0 20px 46px -14px rgba(2, 8, 23, .45);

    /* Transicao unica para hover/foco/tema -- 180ms, dentro da faixa
       150-200ms da spec. */
    --mc-transition: 180ms ease;

    /* Mesma pilha de fontes do site (`--font` em main.css) -- SEM fonte
       externa: o site ja usa system-ui como primeira opcao, entao aqui e
       so copiar, nunca acrescentar um `@import`/`<link>` de CDN. */
    --mc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Anel de foco -- espelha --mc-sky (royal-400 family do login/logo
       claro; sky no escuro-sobre-navy). Literal, nao var(), porque rgba()
       nao aceita variavel de cor dentro de si sem color-mix() (suporte
       recente demais para depender aqui) -- troque os DOIS juntos se
       --mc-sky mudar (mesma disciplina do quadro de cores acima). */
    --mc-focus-ring: 0 0 0 3px rgba(var(--mc-tint), .38);

    /* Gradiente DECORATIVO -- mesma formula do --grad do site
       (`linear-gradient(135deg, var(--royal-400), var(--sky))`). Uso
       restrito a superficie SEM texto em cima (linha de destaque do topo
       do cartao de login) -- ver --mc-grad-btn abaixo para o motivo de nao
       usar este em botao. */
    --mc-grad: linear-gradient(135deg, var(--mc-royal-400), var(--mc-royal)); /* S103: royal only */

    /* ⚠️ MEDIDO por CDP nesta sessao (S87): texto branco sobre a ponta CLARA
       de --mc-grad (--mc-sky, #60a5fa) da so 2,14:1 -- reprova AA (min. 3:1
       ate para texto grande). --mc-grad é só para decoração, nunca para
       fundo de botão com texto em cima. --mc-grad-btn usa as DUAS cores
       "sólidas" da tabela de marca (--mc-navy-800 e --mc-royal, já testadas
       como par de fundo escuro no resto desta folha) -- 6,70:1 e 5,17:1
       contra branco, folga confortável nas duas pontas. Na skin `anderson`
       isto resolve sozinho: --mc-navy-800/--mc-royal já são os tons dela. */
    --mc-grad-btn: linear-gradient(135deg, var(--mc-navy-800), var(--mc-royal));
}

/* Tipografia do sistema em toda a skin -- especificidade igual a de uma
   regra de elemento da elastic (empate), mas esta vem DEPOIS no arquivo
   (o @import entra primeiro), entao vence por ordem de cascata sem
   precisar de !important. */
html, body, input, select, textarea, button {
    font-family: var(--mc-font);
}

/* --- Tela de login: CLARO e ESCURO ---------------------------------- */
/* O Roundcube já resolve o modo sozinho, inclusive aqui: `color_mode_init()`
   (skins/elastic/ui.js) roda em toda página, lê o cookie `colorMode` e, na
   falta dele, `prefers-color-scheme`, e põe `dark-mode` no <html>. O que o
   login não tem é o BOTÃO — ele mora no #taskmenu, que só existe depois de
   entrar; quem o repõe aqui é o plugin `multicloud_links`, gravando o MESMO
   cookie, para a escolha feita na porta valer dentro da sessão.

   Por isso o tema claro é a BASE desta folha e o escuro vem sob
   `html.dark-mode`: seguir o sistema do cliente é o comportamento do próprio
   Roundcube depois do login, e a tela de entrada não tem por que divergir.
   ⚠️ Até a S23 o login era escuro à força, e o CSS de marca vivia fora de
   `html.dark-mode` de propósito. Não é mais assim — regra de login sem tema
   declarado agora atinge OS DOIS.                                          */

.task-login #layout,
.task-login #layout-content {
    background: linear-gradient(160deg, #f8fafc 0%, #eef3fb 55%, #e2eaf7 100%);
}

html.dark-mode .task-login #layout,
html.dark-mode .task-login #layout-content {
    background: linear-gradient(160deg, var(--mc-navy-900) 0%, #132043 55%, var(--mc-navy-800) 100%);
}

/* A marca é o que este webmail tem de diferente do webmail genérico do
   provedor — então ela aparece. A elastic limita o logo a 100px de altura e
   ainda o deixa em `opacity: .8`; a S15 apertou para 64px, e o resultado era
   um logo pequeno e apagado no meio da tela. Aqui quem manda é a LARGURA
   (o lockup é 214×52, ~4:1: limitar pela altura desperdiça a tela), com a
   opacidade de volta a 1.                                                  */
.task-login #logo {
    max-height: 120px;
    max-width: min(78vw, 360px);
    height: auto;
    top: 12vh;
    opacity: 1;
    margin-bottom: .85rem;
}

/* Tela baixa (notebook 768p com a barra do navegador, celular deitado): o
   logo cede espaço antes do formulário — abaixo de ~640px de altura o
   conjunto logo+cartão não cabia e a caixa saía da dobra.                  */
@media (max-height: 640px) {
    .task-login #logo {
        max-width: min(62vw, 260px);
        top: 6vh;
        margin-bottom: .5rem;
    }
}

/* O SRC do logo não é problema de CSS: o ui.js troca por
   `rcmail.env.additional_logos.dark`, alimentado pela chave `*[dark]` do
   `skin_logo`. O padrão (`*`) é a arte de FUNDO CLARO — wordmark navy.
   ⚠️ No brand kit o sufixo `-light` diz a PALETA (fundo claro) e no Roundcube
   o sufixo `-dark` diz o MODO: a tradução inverte o sufixo, e é por isso que
   quem copia os arquivos é o `gen_brand.php --icons`, não a mão.           */

/* Cartão — claro */
.task-login #login-form {
    padding: 1.5rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--mc-radius);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    color: var(--mc-navy-900);
}

/* Cartão — escuro (vidro navy) */
html.dark-mode .task-login #login-form {
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(var(--mc-tint), .18);
    box-shadow: 0 18px 40px rgba(2, 8, 23, .45);
    color: var(--mc-ice);
}

/* Sem `backdrop-filter` (navegador antigo) o fundo translúcido deixaria o
   degradê atravessar o cartão e o texto perderia contraste — fallback opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.dark-mode .task-login #login-form {
        background: #132043;
    }
}

html.dark-mode .task-login #login-form .propform .title,
html.dark-mode .task-login #login-form label {
    color: rgba(248, 250, 252, .82);
}

html.dark-mode .task-login #login-form input.form-control,
html.dark-mode .task-login #login-form select.form-control {
    background-color: rgba(2, 8, 23, .55);
    border-color: rgba(148, 163, 184, .35);
    color: var(--mc-ice);
}

html.dark-mode .task-login #login-form input.form-control::placeholder {
    color: rgba(248, 250, 252, .45);
}

html.dark-mode .task-login #login-form input.form-control:focus {
    background-color: rgba(2, 8, 23, .7);
    border-color: var(--mc-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--mc-tint), .25);
    color: var(--mc-ice);
}

/* O autofill do Chrome pinta o campo de branco por dentro e ignora
   `background-color`; só o inset shadow o cobre. Sem isto, o cartão escuro
   aparece com dois campos brancos assim que o navegador preenche o login.  */
html.dark-mode .task-login #login-form input.form-control:-webkit-autofill,
html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:hover,
html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px #132043;
    -webkit-text-fill-color: var(--mc-ice);
    caret-color: var(--mc-ice);
}

/* Rodapé e links da porta de entrada */
.task-login #layout-content > .footer,
.task-login #layout > div > .footer {
    background: transparent;
    color: rgba(15, 23, 42, .6);
}

html.dark-mode .task-login #layout-content > .footer,
html.dark-mode .task-login #layout > div > .footer {
    color: rgba(248, 250, 252, .7);
}

.task-login #login-form a,
.task-login .multicloud-login-links a {
    color: var(--mc-royal);
}

html.dark-mode .task-login #login-form a,
html.dark-mode .task-login .multicloud-login-links a {
    color: var(--mc-accent);
}

/* --- Seletor de tema no login --------------------------------------- */
/* Âncora, e não <button>, de propósito: o `bootstrap_style()` do ui.js
   carimba `.btn .btn-secondary` em TODO <button> da página, e o seletor
   viraria um botão cinza de formulário no meio do rodapé.

   O rótulo é escolhido por CSS a partir de `html.dark-mode`, nunca por JS:
   a classe é posta pelo ui.js na inicialização, e um rótulo montado por
   script nosso dependeria de quem roda primeiro — erraria justamente na
   primeira carga, que é a única que o usuário vê.                         */
.multicloud-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem 1rem;
    flex-wrap: wrap;
}

.multicloud-theme-toggle {
    cursor: pointer;
    user-select: none;
}

html:not(.dark-mode) .multicloud-theme-toggle .mc-theme-on-dark,
html.dark-mode .multicloud-theme-toggle .mc-theme-on-light {
    display: none;
}

/* --- "Esqueceu a senha?" embutido no cartão (S50) --------------------- */
/* O gatilho vive na sua PRÓPRIA `.multicloud-login-links` (plugin
   `multicloud_recover`, separado do plugin do tema) — por isso duas linhas
   empilhadas em vez de uma só; a margem abaixo é só para não colarem. */
.multicloud-login-links + .multicloud-login-links {
    margin-top: .5rem;
}

/* O painel fica DENTRO do #login-form existente (não é um <form> novo — ver
   o comentário de classe do plugin) e some via o atributo `hidden`, não uma
   classe — nada aqui pode usar `display` sem `:not([hidden])`, senão o
   painel voltaria a aparecer sempre (mesma armadilha do `main.css`,
   `.tenant-domains`). */
.task-login #login-form .multicloud-recover:not([hidden]) {
    display: block;
    margin-top: .75rem;
    padding: .9rem 1rem;
    text-align: left;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--mc-radius-sm);
    background: rgba(15, 23, 42, .035);
}

/* ⚠️ DEFEITO DA S50, corrigido na S52: o painel nao declarava fundo nenhum
   e herdava um claro da Elastic, entao no tema ESCURO ele saia BRANCO
   dentro do cartao escuro. Nada dentro do painel estava errado -- os
   rotulos (rgba(248,250,252,.82)) e os campos (rgba(2,8,23,.55)) estavam
   corretos, so estavam pousados na superficie errada: o rotulo sumia e o
   campo virava cinza chapado. Faltava superficie PROPRIA ao painel.
   Como o tema claro e a BASE desta folha, a regra acima atinge os dois
   temas -- por isso o escuro precisa desta contrapartida explicita. */
html.dark-mode .task-login #login-form .multicloud-recover:not([hidden]) {
    border-color: rgba(var(--mc-tint), .18);
    background: rgba(2, 8, 23, .35);
}

.task-login #login-form .multicloud-recover__intro {
    font-size: .85rem;
    color: rgba(15, 23, 42, .65);
    margin: 0 0 .85rem;
}

html.dark-mode .task-login #login-form .multicloud-recover__intro {
    color: rgba(248, 250, 252, .65);
}

.task-login #login-form .multicloud-recover__field {
    margin-bottom: .75rem;
}

.task-login #login-form .multicloud-recover__field label {
    display: block;
    font-size: .8rem;
    margin-bottom: .25rem;
}

.task-login #login-form .multicloud-recover__consent {
    margin: .5rem 0 .85rem;
    font-size: .8rem;
    line-height: 1.4;
}

.task-login #login-form .multicloud-recover__consent label {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    cursor: pointer;
}

.task-login #login-form .multicloud-recover__consent input {
    margin-top: .2rem;
}

.task-login #login-form .multicloud-recover__msg {
    min-height: 1.2em;
    font-size: .85rem;
    margin: 0 0 .5rem;
}

.multicloud-recover__msg--ok {
    color: var(--mc-royal);
}

/* Sem isto a mensagem de sucesso ficava com --mc-royal tambem no escuro:
   3,36:1 sobre o cartao escuro (~#101a31), reprova AA (min. 4,5:1 para texto
   normal). Mesmo par que os links do cartao ja usam (--mc-royal no claro,
   --mc-sky no escuro, linhas 190-198) -- aqui simplesmente faltava a
   contrapartida. Com --mc-sky da 8,10:1. */
html.dark-mode .multicloud-recover__msg--ok {
    color: var(--mc-accent);
}

.multicloud-recover__msg--error {
    color: #dc2626;
}

html.dark-mode .multicloud-recover__msg--error {
    color: #fca5a5;
}

.task-login #login-form .multicloud-recover__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Âncora estilizada como o botão primário do login (`.button.mainaction`),
   NUNCA um <button> real — ver o comentário no plugin sobre o
   `bootstrap_style()` do ui.js. */
.multicloud-recover__submit {
    display: inline-block;
    padding: .5rem 1.1rem;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-royal);
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.multicloud-recover__submit:hover {
    background: #0047d6;
}

.multicloud-recover__submit.is-busy {
    opacity: .6;
    pointer-events: none;
}

html.dark-mode .multicloud-recover__submit {
    background: var(--mc-navy-800);
}

html.dark-mode .multicloud-recover__submit:hover {
    background: var(--mc-royal);
}

/* --- Barra de tarefas: segue o tema ---------------------------------- */
/* A elastic mantém a barra ESCURA mesmo no tema claro (`#layout-menu` em
   #2f3a3f) e a S15 só trocou aquele cinza por navy. Desde a S23.1 o webmail
   tem os dois temas de verdade, então a barra acompanha: clara no claro,
   navy no escuro. É o que permite o avatar ter duas artes com sentido —
   sobre uma barra sempre navy, a variante de fundo claro só perderia
   contraste.

   ⚠️ A barra tem `width: 42px` no desktop. Qualquer coisa que se ponha aqui
   precisa fazer sentido nesse espaço — foi o lockup horizontal espremido
   nesses 42px que motivou a troca por avatar.                              */

/* Claro */
html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #layout > #layout-menu {
    background-color: #eef3fb;
    border-right: 1px solid rgba(15, 23, 42, .08);
}

html:not(.dark-mode) #taskmenu a {
    color: #334155;
    border-bottom-color: rgba(15, 23, 42, .06) !important;
}

html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover {
    color: #fff;
    background: var(--mc-royal);
}

html:not(.dark-mode) #taskmenu .special-buttons {
    background-color: #e2eaf7;
}

html:not(.dark-mode) #taskmenu .action-buttons a {
    color: var(--mc-navy-800);
}

html:not(.dark-mode) #taskmenu .action-buttons a:hover {
    color: #fff;
    background: var(--mc-royal);
}

html:not(.dark-mode) #layout-menu .popover-header {
    background-color: #e2eaf7;
}

/* Escuro */
html.dark-mode #layout-menu,
html.dark-mode #layout > #layout-menu {
    background-color: var(--mc-navy-900);
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu a.button.selected,
html.dark-mode #layout-menu a.button:hover {
    color: var(--mc-accent);
}

/* O avatar. A elastic limita a imagem do cabeçalho a 78px de largura e ainda
   aplica `opacity: .8` no modo escuro; num símbolo de 42px de barra isso
   deixa a marca apagada e desalinhada. Aqui ele é quadrado, centrado e
   opaco. O SRC (claro × escuro) vem do `skin_logo`, não daqui: `*` e
   `*[dark]`.                                                              */
#layout-menu .popover-header img,
#layout-menu #logo {
    max-height: 34px;
    max-width: 34px;
    padding: 0;
    opacity: 1;
}

/* --- Botão primário -------------------------------------------------- */
.btn-primary {
    background: var(--mc-royal);
    border-color: var(--mc-royal);
    color: #fff;
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition), box-shadow var(--mc-transition), transform var(--mc-transition);
}

.btn-primary:hover:not(:disabled),
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: #0047d6;
    border-color: #0047d6;
}

/* ⚠️ CORRIGIDO NA S87: o anel de foco era rgba(0,85,255,.45) -- um QUARTO
   azul, nem --mc-royal (#2563eb) nem --mc-sky (#60a5fa) -- divergência
   registrada em docs/WEBMAIL.md desde a S34 e citada em
   skin/anderson/styles/styles.css como "dívida existente e não desta
   sessão". Esta sessão é a que fecha: agora usa --mc-focus-ring, a mesma
   família royal-400/sky que o site usa em --ring. A skin `anderson` já
   sobrescrevia este seletor com o tom dela própria (cyan) -- nada muda lá. */
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: var(--mc-focus-ring);
}

/* Botão de ação PRIMÁRIA de destaque (entrar no login, enviar no compose):
   a elastic marca os dois com a mesma classe `.button.mainaction`. Pill +
   gradiente da marca -- os botões secundários (`.btn-primary` sem
   `.mainaction`, ex.: "Salvar" de Preferências) ficam no --mc-radius-md
   sólido acima, mais discretos, para o CTA de destaque não virar ruído
   repetido pela tela inteira. */
.button.mainaction.btn-primary {
    background: var(--mc-grad-btn);
    border-color: transparent;
    border-radius: var(--mc-radius-pill);
    box-shadow: var(--mc-shadow-sm);
}

.button.mainaction.btn-primary:hover:not(:disabled) {
    box-shadow: var(--mc-shadow-md);
}

/* --- Modo escuro ----------------------------------------------------- */
/* A Elastic já traz modo escuro; aqui só se alinha o azul, senão o botão
   primário volta a ser o ciano padrão dela dentro do tema escuro.       */
html.dark-mode .btn-primary {
    background-color: var(--mc-navy-800);
    border-color: var(--mc-navy-800);
    color: var(--mc-ice);
}

html.dark-mode .button.mainaction.btn-primary {
    background: var(--mc-grad-btn);
}

/* =======================================================================
 * S87 — MODERNIZAÇÃO "Dark Slate Luxury & Royal Blue Tech" (glassmorphism)
 * ⚠️ TUDO abaixo desta linha é aditivo (S87). Nada acima foi removido; onde
 * uma regra precisou mudar de valor, a edição ficou registrada no lugar
 * original (--mc-royal-400, o novo bloco de tokens, .btn-primary acima).
 * Seletores confirmados AO VIVO por CDP contra os dois webmails de
 * produção (ver docs/WEBMAIL.md, seção "Skin moderna (S87)") -- não são
 * suposição sobre a Elastic 1.7.4.
 * ======================================================================= */

/* --- Login: grupo de campo com ícone integrado, 48px ------------------ */
/* A Elastic monta o campo como <td class="input input-group input-group-lg">
   com um <span class="input-group-prepend"><i class="input-group-text
   icon ..."></i></span> e o <input> como irmãos diretos, dentro de um
   Bootstrap input-group. Virar "grupo arredondado com célula de ícone
   tintada" é reformar as bordas dos DOIS: prepend fecha só a ponta
   esquerda, input só a direita -- como já são elementos separados do
   Bootstrap, não precisa recriar o grupo, só fechar os cantos certos. */
.task-login #login-form .input-group-lg .input-group-prepend,
.task-login #login-form .input-group-lg .input-group-prepend .input-group-text {
    border-top-left-radius: var(--mc-radius-md);
    border-bottom-left-radius: var(--mc-radius-md);
    background: rgba(37, 99, 235, .08);
    color: var(--mc-royal);
    border-color: rgba(15, 23, 42, .08);
}

.task-login #login-form .input-group-lg input.form-control {
    border-top-right-radius: var(--mc-radius-md);
    border-bottom-right-radius: var(--mc-radius-md);
    min-height: 48px;
    transition: border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.task-login #login-form .input-group-lg input.form-control:focus {
    box-shadow: var(--mc-focus-ring);
}

html.dark-mode .task-login #login-form .input-group-lg .input-group-prepend,
html.dark-mode .task-login #login-form .input-group-lg .input-group-prepend .input-group-text {
    background: rgba(var(--mc-tint), .10);
    color: var(--mc-accent);
    border-color: rgba(148, 163, 184, .35);
}

/* Realce sutil no topo do cartão de login -- "luxury" sem enfeite pesado:
   uma linha de 2px em gradiente de marca, só decorativa (aria-hidden não
   se aplica a ::before, mas não carrega texto nem foco). */
.task-login #login-form {
    position: relative;
    overflow: hidden;
}

.task-login #login-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mc-grad);
}

/* --- Barra de tarefas: item ativo vira PILL com acento de marca -------- */
/* Os botões do #taskmenu já são quase quadrados (coluna de 42px) -- um
   raio "pill" (999px) num alvo quase quadrado dá um círculo/pílula cheio,
   o efeito de "indicador ativo" pedido na spec, sem esticar a coluna.
   ⚠️ CORRIGIDO na revisão final: a margem original era `2px 5px`
   (vertical+horizontal) -- medido por CDP, o `<a>` já vem da Elastic com
   78px de largura EXATOS (a coluna inteira, sem folga), então margem
   HORIZONTAL só empurra a caixa 5px para a direita sem encolhê-la (margem
   nunca entra no box-sizing) -- toda a coluna passava 5px do limite direito
   do trilho (`#layout-menu`, `overflow` corta essa sobra, dando a aparência
   de "bolha cortada"). Só margem VERTICAL: a pill fica do mesmo tamanho do
   trilho (como já era antes desta folha), cantos arredondados sem
   extrapolar. */
#taskmenu a {
    border-radius: var(--mc-radius-pill);
    margin: 2px 0;
    transition: background-color var(--mc-transition), color var(--mc-transition);
}

html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover {
    box-shadow: var(--mc-shadow-sm);
}

html.dark-mode #taskmenu a.selected {
    background: var(--mc-royal);
    color: #fff;
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus-visible {
    background: rgba(var(--mc-tint), .14);
}

/* ⚠️ ACHADO na mesma revisão: no tema ESCURO, os itens de baixo (Modo
   claro/escuro, Sobre, Sair -- `.special-buttons a`, nativos da Elastic)
   vinham com um fundo PERMANENTE (`rgb(33,41,44)`, cinza-chumbo da própria
   Elastic, não um token nosso) -- sem seleção nem hover. Antes desta folha
   dar raio de pill a cada item isso passava batido (a faixa inteira já era
   escura); com o raio, cada ícone virou uma "bolha" permanente visível,
   sem relação com estado (selecionado/hover). Zerado explicitamente --
   quem sinaliza estado continua sendo só `.selected`/`:hover`/
   `:focus-visible` acima. `!important` medido como necessário (sem ele o
   cinza da Elastic continuava vencendo, mesmo com `html.dark-mode
   #taskmenu .special-buttons a` de especificidade alta). */
html.dark-mode #taskmenu .special-buttons a {
    background-color: transparent !important;
}

/* ⚠️ ACHADO na revisão: rótulo truncado com reticências em "Configurações"
   (e "Modo escuro" raspando o limite) -- medido por CDP: a coluna do
   `#taskmenu a` tem 78px (`layout-large`, ≥1024px) e o `.inner` de
   "Configurações" no tamanho herdado da Elastic (12,6px) precisa de
   84,5px, mais que a caixa de conteúdo inteira (78px, sem padding no
   próprio `<a>`). Correção: reduzir para 11px (escala do sistema, não um
   valor solto -- é o degrau abaixo de 12,6px na progressão que a Elastic já
   usa nesta mesma folha para texto secundário) cabe SOZINHO ("Configurações"
   ≈ 73,8px medido); a quebra de 2 linhas abaixo é rede de segurança para
   fonte real ligeiramente diferente da medida em headless, não o mecanismo
   principal. Abaixo de 1024px a Elastic já esconde o rótulo (rail vira
   ícone-só, `layout-small`) -- isto aqui só atinge a faixa onde o rótulo É
   mostrado. */
/* ⚠️ CORRIGIDO DUAS VEZES na mesma revisão, ambas medidas por CDP, não
   supostas:
   1) a primeira tentativa somou quebra de linha (`white-space: normal`)
      "de segurança" -- isso fez "Configurações" quebrar em 2 linhas (34px
      de altura) e estourar por BAIXO da caixa de 58px do botão
      (`overflow: hidden` corta a segunda linha pela metade, TROCANDO
      reticências horizontais por corte vertical, não corrigindo nada).
      Removida a quebra: só tamanho de fonte, sem `white-space`.
   2) 11px ainda não bastava -- medido em 81px de largura (não os ~74px
      estimados por escala linear a partir de 12,6px; a Elastic também
      reflui o `letter-spacing`/kerning de um jeito que a conta de
      proporção simples não captura), ainda maior que os 78px da coluna.
      10px mede 73,6px, com folga real dentro dos 78px.
   "Configurações" é a pior label (mais longa); testar sempre por ela.
   Abaixo de 1024px a Elastic já esconde o rótulo (`layout-small`,
   ícone-só) -- confirmado que fica assim: nada aqui reativa texto lá. */
#taskmenu a .inner {
    font-size: 10px;
}

/* --- Lista de pastas: item ativo em pill, contador não-lido em pill ---- */
#mailboxlist li.mailbox > a {
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition);
}

html:not(.dark-mode) #mailboxlist li.mailbox.selected > a,
html:not(.dark-mode) #mailboxlist li.mailbox > a:hover {
    background: rgba(37, 99, 235, .10);
    color: var(--mc-navy-900);
}

html.dark-mode #mailboxlist li.mailbox.selected > a,
html.dark-mode #mailboxlist li.mailbox > a:hover {
    background: rgba(var(--mc-tint), .14);
    color: var(--mc-ice);
}

#mailboxlist .unreadcount {
    border-radius: var(--mc-radius-pill);
    padding: .05rem .5rem;
    background: var(--mc-royal);
    color: #fff;
    font-weight: 600;
}

html.dark-mode #mailboxlist .unreadcount {
    background: var(--mc-sky);
    color: var(--mc-navy-900);
}

/* --- Lista de mensagens: toque ≥44px, hover/selecionado, não-lida ------ */
#messagelist tbody tr.message {
    transition: background-color var(--mc-transition);
}

#messagelist tbody tr.message td {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

html:not(.dark-mode) #messagelist tbody tr.message:hover {
    background: rgba(37, 99, 235, .05);
}

html:not(.dark-mode) #messagelist tbody tr.message.selected,
html:not(.dark-mode) #messagelist tbody tr.message.selected:hover {
    background: rgba(37, 99, 235, .12);
}

html.dark-mode #messagelist tbody tr.message:hover {
    background: rgba(var(--mc-tint), .06);
}

html.dark-mode #messagelist tbody tr.message.selected,
html.dark-mode #messagelist tbody tr.message.selected:hover {
    background: rgba(var(--mc-tint), .14);
}

/* Não-lida: peso maior + ponto de marca antes do assunto.
   ⚠️ CORRIGIDO na revisão (achado por CDP): a primeira versão usava
   `.subject::before`, e `.subject` é o nome de DUAS classes diferentes no
   mesmo `<tr>` -- o `<td class="subject">` externo (que a Elastic reordena
   por flex para o CANTO SUPERIOR ESQUERDO da linha) E o `<span
   class="subject">` interno, logo antes do link (posição visual correta).
   O seletor batia nos DOIS, dando dois pontos na mesma linha não-lida. A
   correção qualifica por TAG (`td.subject` vs `span.subject`), então só o
   span interno recebe o ponto -- confirmado via `elementFromPoint` e
   `getComputedStyle(el,'::before').content` num par lido/não-lido reais. */
#messagelist tbody tr.message.unread .subject > a {
    font-weight: 700;
}

/* Reset do indicador nativo da Elastic (`.msgicon.status`) -- ele é um
   `<span>` VAZIO por padrão (sem conteúdo/tamanho em CSS puro), mas ainda
   assim é o elemento que a Elastic usa para marcar leitura; desligar por
   completo evita qualquer marca dela (ex.: ao vivo, com CSS/fonte que a
   nossa suíte headless não carregou igual à produção) brigar com a nossa.
   Um indicador só, o nosso: ponto de marca no `span.subject` interno. */
#messagelist tbody tr.message .msgicon.status {
    display: none;
}

#messagelist tbody tr.message.unread td.subject > span.subject::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mc-royal);
    margin-right: .45rem;
    vertical-align: middle;
}

html.dark-mode #messagelist tbody tr.message.unread td.subject > span.subject::before {
    background: var(--mc-sky);
}

/* --- Linha sinalizada (flagged): SÓ o ícone da bandeira fica vermelho ---
   ⚠️ SUBSTITUI a correção anterior desta sessão ("linha inteira em
   #dc2626/#fca5a5" -- pedido do dono na revisão: cor de leitura normal,
   inclusive negrito de não-lida, intacta; só a bandeira sinaliza).
   ⚠️ ACHADO na mesma revisão: `color: inherit` no `<tr>` SOZINHO não basta
   -- medido por CDP: o link do remetente (`td.subject span.subject a`)
   continuava vermelho mesmo com o `<tr>` neutralizado, porque a Elastic
   não pinta só por herança (`tr.flagged { color }`), ela tem uma regra
   que acerta o `<a>` DIRETAMENTE (direto sempre vence herdado, não importa
   a especificidade de quem herdaria) -- provavelmente algo como
   `.message.flagged .subject a`. Por isso o `<a>`, `.rcmContactAddress`,
   `.date` e `.size` precisam do MESMO `color: inherit` cada um, direto no
   elemento, para herdarem de fato do `<tr>` já neutralizado logo acima. */
#messagelist tbody tr.message.flagged {
    color: inherit;
    background: rgba(220, 38, 38, .045);
}

/* ⚠️ `!important` aqui É um dos casos que a especificidade da Elastic
   força (medido, não suposto): mesmo com o seletor batendo
   (`element.matches(...)` confirmado por CDP) e especificidade MAIOR que
   qualquer coisa plausível da Elastic, a cor vermelha nativa continuava
   vencendo -- só some com `!important`, então a Elastic deve estar usando
   `!important` ela mesma neste ponto (comum em utilitário de status).
   ⚠️ ACHADO no MESMO teste: `color: inherit` no `<a>` sozinho não bastava
   porque quem tem a cor DIRETA não é só o `<a>` -- é a cadeia inteira
   `td.subject` (o `<td>` externo, o MESMO da ambiguidade do ponto não-lido
   acima) E o `<span class="subject">` interno, cada um com regra própria
   da Elastic. `color: inherit` no `<a>` herdava do pai mais próximo
   (`span.subject`), que continuava vermelho -- por isso os DOIS
   ancestrais entram na lista abaixo, não só as folhas. */
/* ⚠️ ACHADO na revisão seguinte (mesma sessão): a linha do REMETENTE (1ª
   linha da lista widescreen) continuava vermelha mesmo com tudo acima --
   medido por CDP subindo a cadeia de ancestrais a partir de
   `.rcmContactAddress`: ELA e `.adr` (o `<span>` que a envolve) e
   `.fromto` (o `<span>` que envolve o `.adr`) tinham `color` DIRETO,
   vermelho, cada um -- `.rcmContactAddress` já herdava corretamente da
   regra acima, só que herdava de `.adr`/`.fromto`, que eu não tinha
   neutralizado ainda. */
#messagelist tbody tr.message.flagged td.subject,
#messagelist tbody tr.message.flagged td.subject span.subject,
#messagelist tbody tr.message.flagged td.subject span.subject a,
#messagelist tbody tr.message.flagged .fromto,
#messagelist tbody tr.message.flagged .adr,
#messagelist tbody tr.message.flagged .rcmContactAddress,
#messagelist tbody tr.message.flagged .date,
#messagelist tbody tr.message.flagged .size {
    color: inherit !important;
}

html.dark-mode #messagelist tbody tr.message.flagged {
    background: rgba(252, 165, 165, .05);
}

/* Ícone da bandeira -- sempre vermelho, tom AA-seguro nos dois temas (o
   `#ff5552` nativo da Elastic já não reprova AA aqui porque não carrega
   TEXTO, só o próprio glifo do ícone; mantemos um tom equivalente e
   documentado em vez do literal da Elastic, para não depender de um valor
   de terceiro sem registro). */
#messagelist tbody tr.message td.flags .flag .flagged,
#messagelist tbody tr.message td.flags .flagged {
    color: #dc2626;
}

html.dark-mode #messagelist tbody tr.message td.flags .flag .flagged,
html.dark-mode #messagelist tbody tr.message td.flags .flagged {
    color: #fca5a5;
}

/* --- Barra de ferramentas: botões "ghost" arredondados ----------------- */
#toolbar-menu.toolbar a,
#toolbar-menu.toolbar .dropbutton a {
    border-radius: var(--mc-radius-md);
    transition: background-color var(--mc-transition);
}

html:not(.dark-mode) #toolbar-menu.toolbar a:hover {
    background: rgba(37, 99, 235, .08);
}

html.dark-mode #toolbar-menu.toolbar a:hover {
    background: rgba(var(--mc-tint), .12);
}

/* Busca: campo em pill. `#mailsearchform` é o container que a Elastic
   monta em torno do <input> de busca rápida (confirmado por CDP). */
#mailsearchform,
#mailsearchform input.form-control {
    border-radius: var(--mc-radius-pill);
}

/* --- Painel de leitura como "card" ------------------------------------- */
/* O iframe de pré-visualização (`#messagecontframe`) carrega esta MESMA
   folha (Roundcube renderiza toda página, inclusive frames, sob a skin
   ativa -- confirmado por CDP: o <link> de #message-header aponta para
   `skins/multicloud/styles/styles.min.css`), então estes seletores valem
   DENTRO do frame também, sem configuração extra. */
#message-header {
    padding: 1rem 1.25rem .75rem;
}

#message-header .subject {
    font-weight: 700;
}

.message-part,
#messagebody {
    font-size: .95rem;
    line-height: 1.6;
}

/* --- Campos de formulário (compose, configurações, tudo que usa
   Bootstrap .form-control): raio de controle + anel de foco da marca --- */
.form-control {
    border-radius: var(--mc-radius-md);
    transition: border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.form-control:focus {
    box-shadow: var(--mc-focus-ring);
}

/* Chips de destinatário do compose -- BEST-EFFORT, não confirmado ao vivo
   nesta sessão (falta de tempo para abrir o combobox de destinatários por
   CDP). Regra inerte se a classe não bater com o DOM real -- sem risco de
   quebrar nada; ver "Não pôde ser validado" em docs/WEBMAIL.md. */
.recipient,
ul.recipient-rows li,
.form-group .taglist .tag {
    border-radius: var(--mc-radius-pill);
    padding: .15rem .6rem;
}

/* --- Diálogos e menus popover: cantos, sombra, vidro no escuro --------- */
.ui-dialog,
.popupmenu,
.popover {
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-lg);
}

.ui-dialog .ui-dialog-titlebar {
    border-top-left-radius: var(--mc-radius);
    border-top-right-radius: var(--mc-radius);
}

html.dark-mode .ui-dialog,
html.dark-mode .popupmenu,
html.dark-mode .popover {
    background-color: rgba(15, 23, 42, .96);
    border-color: rgba(var(--mc-tint), .16);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.dark-mode .popupmenu,
    html.dark-mode .popover {
        background-color: rgba(15, 23, 42, .82);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* --- Scrollbars finas --------------------------------------------------- */
#layout-sidebar .scroller,
#messagelist-content,
#message-content,
.ui-dialog-content {
    scrollbar-width: thin;
}

#layout-sidebar .scroller::-webkit-scrollbar,
#messagelist-content::-webkit-scrollbar,
#message-content::-webkit-scrollbar,
.ui-dialog-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#layout-sidebar .scroller::-webkit-scrollbar-thumb,
#messagelist-content::-webkit-scrollbar-thumb,
#message-content::-webkit-scrollbar-thumb,
.ui-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .4);
    border-radius: var(--mc-radius-pill);
}

html.dark-mode #layout-sidebar .scroller::-webkit-scrollbar-thumb,
html.dark-mode #messagelist-content::-webkit-scrollbar-thumb,
html.dark-mode #message-content::-webkit-scrollbar-thumb,
html.dark-mode .ui-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
}

/* --- Mobile (≤480px): alvo de toque ≥44px ------------------------------ */
@media (max-width: 480px) {
    #taskmenu a {
        min-width: 44px;
        min-height: 44px;
    }

    #messagelist tbody tr.message td {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    /* O plugin multicloud_showpass fixa 40px (2.5rem) com `!important` em
       CADA declaração (ver o cabeçalho do próprio CSS do plugin -- medido
       por CDP contra o `bootstrap_style()` da elastic). Vencer isso aqui
       também exige `!important`; sem ele esta regra perde por especificidade
       igual + ordem (o plugin carrega depois da skin). Comentado por ser
       exatamente o caso que a skill de frontend descreve como aceitável:
       especificidade que a própria cadeia de !important força. */
    .mc-showpass-toggle {
        width: 44px !important;
        min-width: 44px !important;
    }
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: var(--mc-royal);
    border-color: var(--mc-royal);
}

/* ---------------------------------------------------------------------
 * S99: cantos quadrados — pedido do dono.
 * Todos os raios da UI do webmail (menu lateral, contadores de pasta,
 * botoes, inputs, selects, paginacao, busca, popovers, dialogos, lista,
 * toolbar, switches) viram 0, nas duas marcas (a anderson herda este
 * bloco pelo @import da multicloud). Os tokens --mc-radius* acima ja
 * estao em 0; este bloco cobre os raios FIXOS da Elastic (.3rem, .25rem,
 * .5rem...), que nao passam por token. `!important` porque a Elastic
 * tem seletores de alta especificidade e ate `!important` proprio.
 * PRESERVADOS (pedido do dono): imagens/logos (`img`, `svg`, badge "AS"
 * = #layout-menu #logo) e a foto de contato (.contactphoto, #contactpic).
 * O ponto de nao-lido da lista (::before) nao e tocado: pseudo-elementos
 * so entram para o switch. Se o foco ficar feio sem raio, o teto aceito
 * e 2px — mas 0 e o padrao.
 * --------------------------------------------------------------------- */
*:not(img):not(svg):not(.contactphoto):not(#contactpic):not(#logo):not(.mc-keep-radius),
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
    border-radius: 0 !important;
}

/* ---------------------------------------------------------------------
 * S103: botoes com degrade por tipo e animacao so de CSS (mesmo desenho do
 * .btn do site): o degrade desliza no hover, um brilho (::after) varre o
 * botao, ele sobe 2px e :active afunda. Raios seguem em 0 (S99; o teto
 * aceito e 2px). Branco sobre #2563eb = 5,17:1 e sobre #1d4ed8 = 6,70:1;
 * sobre o vermelho #dc2626 = 4,83:1 e #991b1b = 8,3:1.
 * Especificidade: as regras de hover/active da S34 usam o SHORTHAND
 * `background` (0,3,0), que zera size/position -- por isso o `html` na
 * frente destes seletores (0,3,1+).
 * --------------------------------------------------------------------- */
.btn-primary, .btn-danger, .button.mainaction.btn-primary {
    position: relative; overflow: hidden; isolation: isolate;
    background-image: var(--mc-grad-btn);
    background-size: 200% 100%; background-position: 0 0; background-repeat: no-repeat;
    transition: transform var(--mc-transition), box-shadow var(--mc-transition), background-position .4s ease;
}
.btn-danger { background-image: linear-gradient(135deg, #dc2626, #991b1b); border-color: #dc2626; color: #fff; }
.btn-primary::after, .btn-danger::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .30) 50%, transparent 65%);
    transform: translateX(-130%); transition: transform .6s ease;
}
html .btn-primary:hover:not(:disabled), html .btn-primary:focus-visible:not(:disabled),
html .btn-danger:hover:not(:disabled), html .btn-danger:focus-visible:not(:disabled) {
    background-image: var(--mc-grad-btn); background-size: 200% 100%; background-position: 100% 0;
    transform: translateY(-2px); box-shadow: var(--mc-shadow-md);
}
html .btn-danger:hover:not(:disabled) { background-image: linear-gradient(135deg, #dc2626, #991b1b); }
html .btn-primary:not(:disabled):not(.disabled):active, html .btn-primary:not(:disabled):not(.disabled).active,
html .btn-danger:not(:disabled):active {
    background-size: 200% 100%; background-position: 100% 0; transform: translateY(0) scale(.98);
}
.btn-primary:hover:not(:disabled)::after, .btn-primary:focus-visible:not(:disabled)::after,
.btn-danger:hover:not(:disabled)::after, .btn-danger:focus-visible:not(:disabled)::after { transform: translateX(130%); }
.btn-primary:disabled, .btn-danger:disabled { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-danger { transition: box-shadow var(--mc-transition); }
    html .btn-primary:hover:not(:disabled), html .btn-primary:focus-visible:not(:disabled),
    html .btn-danger:hover:not(:disabled), html .btn-danger:focus-visible:not(:disabled),
    html .btn-primary:not(:disabled):not(.disabled):active, html .btn-danger:not(:disabled):active { transform: none; background-position: 0 0; }
    .btn-primary::after, .btn-danger::after { display: none; }
}