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

/* ---------------------------------------------------------------------------
   Identidade TrayHost sobre o skin Elastic do Roundcube.
   Só cor, tipografia e o rodapé — nada que mexa em comportamento, para as
   atualizações do Roundcube não brigarem com isto.
   --------------------------------------------------------------------------- */
:root {
    --color-main: #4f46e5;
    --color-main-dark: #4338ca;
    --color-link: #4f46e5;
    --color-btn-primary-background: #4f46e5;
    --color-btn-primary-background-hover: #4338ca;
    --color-checkbox: #4f46e5;
    --color-checkbox-checked: #4f46e5;
}

/* Fundo da tela de login: o mesmo quase-branco arroxeado do portal. */
#layout > .menu, .menu.footer { background: #14163a; }

body.task-login {
    background: #f6f7fc;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.task-login #layout-content { background: transparent; }

/* Cartão do formulário, no lugar da caixa achatada padrão. */
body.task-login .login-form {
    background: #fff;
    border: 1px solid #e7e9f5;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,22,58,.04), 0 14px 30px -12px rgba(20,22,58,.16);
    padding: 30px 28px 26px;
    max-width: 380px;
}

body.task-login #logo { max-width: 210px; margin-bottom: 6px; }

body.task-login input.form-control {
    border-radius: 10px !important;
    border-color: #dcdfef !important;
    background: #fcfcfe;
    font-size: 15px;
}
body.task-login input.form-control:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important;
}
body.task-login .input-group-prepend .input-group-text {
    border-radius: 10px 0 0 10px !important;
    border-color: #dcdfef !important;
    background: #f6f7fc;
    color: #9096b4;
}
body.task-login input.form-control { border-radius: 0 10px 10px 0 !important; }

body.task-login button.btn-primary,
body.task-login .buttons button {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    border-radius: 10px !important;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px rgba(79,70,229,.24), 0 6px 14px -6px rgba(79,70,229,.45);
    transition: background .15s ease, transform .12s ease;
}
body.task-login button.btn-primary:hover { background: #4338ca !important; transform: translateY(-1px); }

/* O "Roundcube Webmail" do rodapé some pelo product_name, no config.
   O link de suporte JÁ EXISTE no template (id=supportlink, alimentado por
   support_url) — só nasce com class="hidden". Mostrar o link de verdade é
   melhor que desenhar um texto com ::after: aquele não é clicável nem
   selecionável, e some para quem usa leitor de tela. */
body.task-login #supportlink.hidden {
    display: inline-block !important;
    visibility: visible !important;
    margin-top: 16px;
    font-size: 13.5px;
    color: #6b7194;
    text-decoration: none;
    border-bottom: 1px solid #dcdfef;
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
}
body.task-login #supportlink.hidden:hover {
    color: #4f46e5;
    border-color: #4f46e5;
}

body.task-login #login-footer,
body.task-login #layout-footer { text-align: center; }

/* Escolha de idioma na tela de login. */
body.task-login #escolha-idioma { margin-top: 16px; }
body.task-login #escolha-idioma label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9096b4;
    margin-bottom: 5px;
    font-weight: 600;
}
body.task-login #escolha-idioma select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dcdfef;
    border-radius: 10px;
    background: #fcfcfe;
    font-size: 14.5px;
    font-family: inherit;
    color: #14163a;
}
body.task-login #escolha-idioma select:focus {
    outline: 0;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Tela principal (caixa de entrada)

   Claro, como o portal do cliente. A barra escura de antes brigava com o
   resto da interface e engolia o logo.

   Só cor, espaço e peso de fonte: posição e tamanho de painel o Elastic
   calcula em JavaScript conforme a tela, e CSS disputando com ele quebra no
   celular sem avisar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Barra dos aplicativos: clara, com o item ativo na cor da marca. */
#layout-menu, #taskmenu {
    background: #fbfbfe;
    border-right: 1px solid #e7e9f5;
}
#taskmenu a {
    color: #6b7194;
    border-radius: 10px;
    margin: 2px 6px;
    transition: background .15s ease, color .15s ease;
}
#taskmenu a:hover { background: #eef0fa; color: #4f46e5; }
#taskmenu a.selected {
    background: #eef0fd;
    color: #4f46e5;
    font-weight: 600;
    box-shadow: none;
}
#taskmenu a.selected::before { color: #4f46e5; }

/* Logo da barra: espaço próprio, sem esmagar. */
#layout-menu .popover-header,
#taskmenu ~ .popover-header { background: transparent; }
#layout-menu #logo, #taskmenu #logo {
    max-width: 34px;
    height: auto;
    margin: 12px auto 6px;
    display: block;
}

/* Sair e modo escuro no rodapé da barra, discretos. */
#taskmenu a.logout { color: #b9455a; }
#taskmenu a.logout:hover { background: #fdeff1; color: #dc2626; }

/* Cabeçalhos das colunas. */
#layout-list > .header,
#layout-sidebar > .header,
#layout-content > .header {
    background: #fff;
    border-bottom: 1px solid #e7e9f5;
}
#layout > div > .header .header-title {
    font-weight: 700;
    letter-spacing: -.01em;
    color: #14163a;
}

/* Lista de mensagens. */
#messagelist tbody tr td.subject span.subject { color: #14163a; }
#messagelist tbody tr.unread td.subject span.subject { font-weight: 700; }
#messagelist tbody tr.selected td { background: #eef0fd; }
#messagelist tbody tr.selected td.subject span.subject { color: #4f46e5; }
#messagelist tbody tr:hover td { background: #f6f7fc; }

/* Pastas. */
#folderlist-content li.selected > a,
.folderlist li.selected > a {
    background: #eef0fd;
    color: #4f46e5;
    font-weight: 600;
}

/* Contadores de não lidas. */
.folderlist li a span.unreadcount,
#messagelist .unreadcount {
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
}

/* Barra de ferramentas. */
.toolbar a.button { border-radius: 9px; }
.toolbar a.button:hover { background: #eef0fd; color: #4f46e5; }

a { color: #4f46e5; }