/* =====================================================================
   VORTEK — tema da marca para Roundcube Elastic
   Azul Vortek #0F2D5C · Azul Profundo #0a1f40 · Laranja Energia #F05A28
   Carregado APÓS o styles.css do Elastic (apenas overrides).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@500&display=swap');

:root{
  --vk-navy:#0F2D5C; --vk-navy-deep:#0a1f40; --vk-iface:#1d3a68;
  --vk-orange:#F05A28; --vk-orange-600:#E1431A; --vk-steel:#345fa1; --vk-steel-300:#8dafdd;
}

/* =====================================================================
   1) TELA DE LOGIN — split hero (navy | formulário branco)
   ===================================================================== */
body.task-login{ background:var(--vk-navy-deep); }

body.task-login #layout{
  position:fixed; inset:0; width:100%; height:100%; max-width:none;
  margin:0; padding:0; border:0; box-shadow:none; background:transparent;
}
body.task-login #layout-menu,
body.task-login #layout-sidebar{ display:none !important; }

body.task-login #layout-content.vortek-login{
  position:absolute; inset:0; width:100%; max-width:none; height:100%;
  margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent;
  display:flex; flex-direction:row; overflow:auto;
}

/* ---- HERO (esquerda) ---- */
.vortek-hero{
  flex:1 1 52%; position:relative; overflow:hidden; color:#fff;
  padding:clamp(32px,5vw,64px);
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(1100px 480px at 18% 8%, rgba(240,90,40,.20), transparent 58%),
    linear-gradient(157deg,#173a6b 0%, var(--vk-navy) 46%, var(--vk-navy-deep) 100%);
}
.vortek-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 28% 26%, #000, transparent 72%);
          mask-image:radial-gradient(circle at 28% 26%, #000, transparent 72%);
}
.vortek-hero-top{ position:relative; }
.vortek-hero-logo{ width:clamp(170px,18vw,240px); height:auto; display:block; }
.vortek-hero-mid{ position:relative; }
.vortek-hero-tagline{
  margin:0; max-width:16ch; color:#fff; font-weight:700;
  font-size:clamp(24px,3vw,36px); line-height:1.18; letter-spacing:-.6px;
}
.vortek-hero-tagline::after{
  content:""; display:block; width:68px; height:4px; margin-top:24px;
  border-radius:2px; background:var(--vk-orange);
}
.vortek-hero-foot{
  position:relative; color:rgba(255,255,255,.55);
  font:500 12.5px/1 'Roboto Mono',ui-monospace,monospace; letter-spacing:.4px;
}

/* ---- FORMULÁRIO (direita) ---- */
.vortek-loginwrap{
  flex:1 1 48%; background:#fff; display:flex; align-items:center; justify-content:center;
  padding:40px 32px;
}
.vortek-login-card{ width:100%; max-width:368px; font-family:'Inter',sans-serif; }
.vortek-card-logo{ height:34px; width:auto; margin-bottom:30px; display:block; }
.vortek-card-title{ margin:0 0 6px; color:var(--vk-navy); font-weight:800; font-size:26px; letter-spacing:-.5px; }
.vortek-card-sub{ margin:0 0 26px; color:#6f809e; font-size:15px; }

/* inputs */
body.task-login .vortek-login-card .propform,
body.task-login .vortek-login-card table.propform{ width:100%; border:0; background:none; box-shadow:none; }
body.task-login .vortek-login-card input,
body.task-login .vortek-login-card input.form-control{
  width:100%; height:48px; box-sizing:border-box; margin:0;
  border:1.5px solid #d0d5dd; border-radius:10px; padding:0 14px; background:#fff;
  color:var(--vk-navy); font:500 15px 'Inter',sans-serif; box-shadow:none;
  transition:border-color .15s, box-shadow .15s;
}
body.task-login .vortek-login-card input.form-control:focus{
  border-color:var(--vk-steel); box-shadow:0 0 0 4px rgba(52,95,161,.16); outline:0;
}
body.task-login .vortek-login-card label{
  display:block; margin:16px 0 7px; color:var(--vk-iface);
  font:600 13px 'Inter',sans-serif;
}

/* botão ENTRAR */
body.task-login #rcmloginsubmit,
body.task-login .vortek-login-card button.btn-primary,
body.task-login .vortek-login-card input.btn-primary{
  margin-top:26px !important; width:100%; height:50px; border:0; border-radius:10px;
  background:linear-gradient(135deg,var(--vk-orange),var(--vk-orange-600)) !important;
  color:#fff !important; font:700 16px 'Inter',sans-serif; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(240,90,40,.6);
  transition:filter .15s, box-shadow .15s, transform .08s;
}
body.task-login #rcmloginsubmit:hover{ filter:brightness(1.06); box-shadow:0 12px 30px -10px rgba(240,90,40,.66); }
body.task-login #rcmloginsubmit:active{ transform:translateY(1px); }

body.task-login #login-footer{ margin-top:24px; color:#a6b4ce; font:400 12px 'Inter',sans-serif; text-align:left; }

/* responsivo */
@media (max-width:820px){
  body.task-login #layout-content.vortek-login{ flex-direction:column; }
  .vortek-hero{ flex:0 0 auto; min-height:34vh; }
  .vortek-loginwrap{ flex:1 1 auto; }
}
@media (max-width:480px){
  .vortek-hero{ min-height:24vh; padding:24px; }
  .vortek-hero-tagline{ font-size:20px; }
  .vortek-hero-tagline::after{ margin-top:14px; }
}

/* =====================================================================
   2) ACENTO DA MARCA NO APP (pós-login) — conservador
   ===================================================================== */
html.dark-mode body, body{ --color-main-action:var(--vk-orange); }

/* botões primários -> laranja da marca */
.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary,
a.btn.btn-primary{
  background-color:var(--vk-orange) !important;
  border-color:var(--vk-orange-600) !important;
  color:#fff !important;
}
.btn.btn-primary:hover,
button.btn.btn-primary:hover{ background-color:var(--vk-orange-600) !important; }

/* item selecionado nas listas -> barra lateral laranja */
.listing li.selected > a,
.messagelist tr.selected > td,
.listing tr.selected > td{ box-shadow:inset 3px 0 0 0 var(--vk-orange); }

/* =====================================================================
   3) CAIXA DE ENTRADA — toques "estilo Gmail"
   ===================================================================== */
/* avatares do remetente (identicon) sempre redondos */
body.task-mail .contactphoto img,
body.task-mail .contactphoto,
.messagelist .contactphoto img{ border-radius:50% !important; object-fit:cover; }

/* lista de mensagens: linhas mais espaçadas e divisórias suaves */
body.task-mail #messagelist td,
body.task-mail table.messagelist td{ padding-top:10px; padding-bottom:10px; border-color:#eef0f4; }
body.task-mail #messagelist tr:hover td,
body.task-mail table.messagelist tr:hover td{ background:#f4f6fb; }
body.task-mail #messagelist tr.selected td,
body.task-mail table.messagelist tr.selected td{ background:#e9eef9; box-shadow:inset 3px 0 0 var(--vk-orange); }

/* não lidas: assunto em negrito navy (destaque tipo Gmail) */
body.task-mail #messagelist tr.unread td.subject,
body.task-mail table.messagelist tr.unread span.subject{ color:var(--vk-navy); font-weight:700; }

/* botão "Escrever" estilo Gmail: pill arredondado + sombra */
body.task-mail a.compose,
body.task-mail .compose.btn,
body.task-mail .toolbar a.compose,
body.task-mail #layout-list a.compose{
  border-radius:24px !important;
  box-shadow:0 6px 16px -6px rgba(240,90,40,.5);
  font-weight:700;
}

/* cabeçalho do e-mail aberto: avatar grande redondo */
body.task-mail .message-partheaders .contactphoto img,
body.task-mail #messageheader .contactphoto img{ width:44px; height:44px; border-radius:50%; }

/* =====================================================================
   4) AVATARES na lista (injetados por vortek.js)
   ===================================================================== */
.vk-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; min-width:36px; border-radius:50%;
  color:#fff; font:700 15px/1 'Inter',sans-serif; text-transform:uppercase;
  margin-right:12px; flex:0 0 auto; vertical-align:middle; box-shadow:0 1px 2px rgba(10,12,16,.12);
}
/* alinha o conteudo da celula com o avatar */
body.task-mail #messagelist td.vk-has-avatar{ display:flex; align-items:center; }
body.task-mail #messagelist td.vk-has-avatar > *:not(.vk-avatar){ min-width:0; }

/* =====================================================================
   5) BOTAO "ESCREVER" estilo Gmail (FAB/pill destacado)
   ===================================================================== */
body.task-mail a.compose{
  background:linear-gradient(135deg,var(--vk-orange),var(--vk-orange-600)) !important;
  color:#fff !important; border:0 !important; border-radius:24px !important;
  padding:0 18px !important; height:44px !important; min-width:44px;
  font:700 14px/44px 'Inter',sans-serif !important;
  box-shadow:0 6px 18px -6px rgba(240,90,40,.55) !important;
}
body.task-mail a.compose:hover{ filter:brightness(1.06); }

/* =====================================================================
   6) LISTA arejada + CABECALHO claro
   ===================================================================== */
body.task-mail #messagelist tbody td{ padding-top:11px !important; padding-bottom:11px !important; }
body.task-mail #messagelist tbody tr{ border-bottom:1px solid #eef0f4; }
body.task-mail #messagelist tbody tr:hover{ background:#f6f8fc !important; }
body.task-mail #messagelist tbody tr.selected{ background:#e9eef9 !important; }
body.task-mail #messagelist tbody tr.unread .subject{ font-weight:700; color:var(--vk-navy); }

/* cabecalhos/toolbars mais claros e clean */
body.task-mail .toolbar{ background:#ffffff; border-bottom:1px solid #eef0f4; }
body.task-mail #layout-list .header,
body.task-mail #layout-content .header{ background:#ffffff; }