/**
 * 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");

:root {
    --mc-navy-900: #0f172a;
    --mc-navy-800: #1e3a8a;
    --mc-royal:    #0055ff;
    --mc-sky:      #38bdf8;
    --mc-ice:      #f8fafc;
}

/* --- Tela de login -------------------------------------------------- */
/* O primeiro contato do cliente com a marca. Fundo escuro da paleta, com
   o mesmo degradê do símbolo em diagonal, como no portal.               */
.task-login #layout,
.task-login #layout-content {
    background: linear-gradient(160deg, var(--mc-navy-900) 0%, #132043 55%, var(--mc-navy-800) 100%);
}

.task-login #logo {
    max-height: 64px;
    top: 14vh;
}

.task-login #login-form {
    padding: 1.5rem 1.25rem 1.25rem;
    background: rgba(248, 250, 252, .97);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(2, 8, 23, .45);
}

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

/* --- Barra de tarefas ----------------------------------------------- */
/* A Elastic usa #2f3a3f (cinza-esverdeado). Trocar por navy é o que faz o
   webmail "parecer" da MultiCloud depois do login, e não só na porta.   */
#layout-menu,
#layout > #layout-menu {
    background-color: var(--mc-navy-900);
}

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

/* --- Botão primário -------------------------------------------------- */
.btn-primary {
    background: var(--mc-royal);
    border-color: var(--mc-royal);
    color: #fff;
}

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

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 85, 255, .45);
}

/* --- 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 .btn-primary:hover:not(:disabled) {
    background-color: var(--mc-royal);
    border-color: var(--mc-royal);
}