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

/* ─── Skin Larvon — overrides de cor em cima do elastic (plano 237) ───────
 * Não reescreve nada do elastic, só sobrepõe seletor por seletor. O elastic
 * usa hex hardcoded (não custom properties) nos componentes do Bootstrap 4,
 * então a sobreposição é por seletor + !important onde o elastic também usa
 * hex direto sem especificidade extra. */

/* ─── Fontes (Inter self-hosted, plano 246 — sem chamada externa em runtime) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

:root {
  --larvon-navy: #0b4881;
  --larvon-navy-hover: #083a68;
  --larvon-navy-dark: #061a33;
  --larvon-bg: #f3f6fb;
  --larvon-border: #dce5f0;
  --larvon-text: #1a1a1a;
  --larvon-text-muted: #374151;
  --larvon-success: #0a7a4f;
  --larvon-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  font-family: var(--larvon-font);
  font-size: 14px;
  color: var(--larvon-text);
}
/* O elastic (bootstrap.min.css) força Roboto em .popover,body,button,input,
 * select,textarea — sobrescreve pra Inter valer em toda a UI, não só no que
 * não tem essa regra. */
html, body, button, input, select, textarea, .popover {
  font-family: var(--larvon-font);
}

/* Botões primários (criar mensagem, enviar, salvar…) */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--larvon-navy) !important;
  border-color: var(--larvon-navy) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--larvon-navy-hover) !important;
  border-color: var(--larvon-navy-hover) !important;
}

/* Links */
a { color: var(--larvon-navy); }
a:hover { color: var(--larvon-navy-hover); }

/* Pasta/mensagem selecionada na lista */
.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td {
  background-color: #ebf3fb;
  color: var(--larvon-navy);
}

/* Barra lateral (taskmenu) — navy escuro, ícones claros, logo branco no topo */
#taskmenu,
#layout-menu .popover-header,
#layout-menu .header {
  background-color: var(--larvon-navy-dark);
}
/* logo.png já é a variante pra fundo escuro (wordmark branco + alpha real,
 * mesmo arquivo usado no painel de login) — sem chip, sem filter. */
#taskmenu a.button,
#taskmenu a.button .inner {
  color: #e8f0fa;
}
/* item ativo destacado (bloco de cor da marca sobre o navy escuro do menu) */
#taskmenu a.button.selected {
  background-color: var(--larvon-navy);
  color: #ffffff;
}

/* .tabsbar/.header.toolbar/.contentbox são barras coladas na borda do
 * layout (largura cheia) — arredondar dá um "flutuando" errado nelas; como
 * não tem credencial real pra logar e validar isso na caixa autenticada
 * (README: "não há credencial de teste"), tirado daqui em vez de arriscar.
 * .searchbar é um widget contido, não uma barra de borda a borda — mantido. */
.searchbar,
.propform fieldset {
  border-color: var(--larvon-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(6, 26, 51, 0.06);
}

/* Não-lidas em negrito (elastic já usa .unread; reforça o peso da fonte nova) */
.messagelist tr.unread td,
.messagelist tr.unread .subject {
  font-weight: 600;
}

/* ─── Tela de login — split-screen (plano 246, login.html reorganizado) ──
 * ≥1024px: painel de marca à esquerda (45%, min 420px) + cartão centralizado
 * (h e v) à direita, título/subtítulo DENTRO do cartão, logo de topo oculta
 * (a marca já aparece no painel esquerdo — sem isso duplicava a logo/título
 * flutuando ACIMA do cartão, revisão do dono 2026-09-27).
 * <1024px: coluna única, logo colorido uma vez no topo (fora do cartão),
 * cartão com margem. */
body.task-login,
body.task-login #layout-content {
  background-color: var(--larvon-bg);
}

body.task-login #login-screen {
  /* #layout (elastic base) é display:flex — sem width:100% aqui o
   * #login-screen encolhe pro tamanho do conteúdo em vez de ocupar a tela
   * toda, e os 45%/55% do painel/cartão passam a ser % de um total menor
   * (card ficava fora do centro). */
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Painel de marca (só desktop) */
body.task-login #login-brand {
  display: none;
}

body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 2rem 1rem;
}

/* Logo solta acima do cartão — só existe (visualmente) no mobile, ver
 * media query <1024px logo abaixo. No desktop fica display:none: a marca
 * já está inteira no painel esquerdo, repetir aqui duplicava. */
body.task-login #logo {
  /* O elastic base põe #logo com position:relative;top:144px (pensado pro
   * layout original dele) — sem zerar isso a logo "cai" visualmente longe
   * de onde o DOM a colocou. */
  position: static;
  top: auto;
  display: none;
  margin: 0 auto 1.5rem;
  text-align: center;
  max-width: 170px;
  max-height: none;
  height: auto;
  opacity: 1;
}

body.task-login #login-card {
  width: 400px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid var(--larvon-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(6, 26, 51, 0.06), 0 8px 24px rgba(6, 26, 51, 0.06);
}

body.task-login #login-card-header {
  margin-bottom: 1.5rem;
  text-align: left;
}
body.task-login #login-card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--larvon-text);
  margin: 0;
}
body.task-login #login-card-subtitle {
  font-size: 14px;
  color: var(--larvon-text-muted);
  margin: 0.35rem 0 0;
}

/* O <form> em si não é mais o cartão visível (o cartão é #login-card, que
 * também abriga o header título/subtítulo) — sem caixa própria aqui.
 * O elastic base põe #login-form com position:relative;top:180px (mesmo
 * truque de centralização vertical do #logo, pensado pro layout antigo
 * dele) — como é position:relative (não absolute), o deslocamento NÃO
 * conta pra altura do #login-card (que é só a caixa em volta), sobrando
 * botão/rodapé "flutuando" fora do cartão. Zerar o top resolve. */
body.task-login #login-form {
  position: static;
  top: auto;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

body.task-login .propform legend {
  color: var(--larvon-text);
}

/* Campos: label à esquerda acima do input, sem caixinha de ícone (o elastic
 * injeta um .input-group-prepend com ícone ANTES do input em
 * init_login_form — escondido; nenhum ícone dentro do input também, opção
 * mais limpa). Altura ≥48px, raio 8px, foco com anel da marca.
 * O elastic (skins/elastic/ui.js) esconde o <td.title> via display:none
 * inline e empilha label+input lado a lado numa table — os !important
 * abaixo revertem isso (só !important vence style inline). */
body.task-login .propform table,
body.task-login .propform tbody,
body.task-login .propform tr,
body.task-login .propform td {
  display: block !important;
  width: 100% !important;
}
body.task-login .propform .input-group-prepend {
  display: none;
}
body.task-login .propform table td.title {
  padding-bottom: 6px;
  text-align: left;
}
body.task-login .propform table td.title label {
  font-weight: 500;
  color: var(--larvon-text);
  font-size: 14px;
}
body.task-login .propform table td.input {
  padding-bottom: 1rem;
  position: relative;
}
body.task-login .propform input.form-control {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--larvon-border);
  padding: 0 0.9rem;
  box-sizing: border-box;
  font-size: 15px;
}
body.task-login .propform input.form-control:focus {
  outline: none;
  border-color: var(--larvon-navy);
  box-shadow: 0 0 0 2px rgba(11, 72, 129, 0.25);
}
body.task-login #rcmloginpwd {
  padding-right: 2.75rem;
}

/* Botão mostrar/ocultar senha — alvo de toque ≥40px (id/aria setados via
 * script no login.html) */
body.task-login #login-pwd-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--larvon-text-muted);
  cursor: pointer;
}
body.task-login #login-pwd-toggle:hover,
body.task-login #login-pwd-toggle.is-visible {
  color: var(--larvon-navy);
}
body.task-login #login-pwd-toggle:focus-visible {
  outline: 2px solid var(--larvon-navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* O init_login_form do elastic adiciona a classe Bootstrap .text-uppercase
 * no botão (que é !important no Bootstrap — precisa !important pra vencer)
 * — devolve caixa normal ("Entrar", não "ENTRAR"). */
body.task-login .btn-primary,
body.task-login #rcmloginsubmit {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: none !important;
  margin-top: 8px;
}

/* Mensagens de erro do Roundcube (contraste AA em fundo claro) */
body.task-login #message,
body.task-login .ui.alert.error,
body.task-login .message.error {
  color: #b3261e;
  background-color: #fdecea;
  border: 1px solid #f5c2c0;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 13px;
}

body.task-login #login-footer {
  text-align: center;
  margin-top: 1.5rem;
}
body.task-login #login-help {
  font-size: 13px;
  color: var(--larvon-text-muted);
  margin: 0 0 0.5rem;
}
body.task-login #login-meta {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

body.task-login .support-link {
  color: var(--larvon-navy);
}

@media (min-width: 1024px) {
  /* Painel de marca navy, 45% da tela (mínimo 420px) */
  body.task-login #login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    min-width: 420px;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--larvon-navy-dark) 0%, var(--larvon-navy) 100%);
    box-sizing: border-box;
    padding: 4rem;
  }
  #login-brand-inner {
    max-width: 440px;
  }
  #login-brand-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 2.5rem;
  }
  #login-brand-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 0.75rem;
  }
  #login-brand-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 1.75rem;
  }
  #login-brand-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #e8f0fa;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #login-brand-list li {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.4;
  }
  #login-brand-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
  }
  #login-brand-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 2.5rem 0 0;
  }

  body.task-login #layout-content {
    width: 55%;
    min-height: 100vh;
  }
}

@media (max-width: 1023.98px) {
  /* Logo colorido uma vez no topo, fora/acima do cartão */
  body.task-login #logo {
    display: block;
  }
  /* A margem já vem do padding do #layout-content (2rem 1rem) — o
   * max-width:calc(100% - 32px) da regra base SOMAVA outra margem em cima
   * dessa, sobrando ~250px de input em 375px de tela. max-width:100% usa só
   * a margem do #layout-content (alvo ~305px de input em 375px). */
  body.task-login #login-card {
    max-width: 100%;
    padding: 20px;
  }
}