/* =============================================================
   DB MÍDIAS — Roundcube Elastic custom skin layer
   Roundcube 1.6.19 | baseado no skin Elastic original
   Paleta derivada do tema principal DB Mídias
   ============================================================= */

:root {
  --db-navy: #081f45;
  --db-petrol: #0b4f6c;
  --db-blue: #0b63ce;
  --db-sky: #00b8e6;
  --db-cyan: #11d3ee;
  --db-ink: #23364d;
  --db-muted: #6f8094;
  --db-line: #dce6f1;
  --db-soft: #f3f7fd;
  --db-soft2: #f8fbff;
  --db-white: #ffffff;
  --db-grad: linear-gradient(135deg,#081f45 0%,#0b63ce 56%,#00b8e6 100%);
  --db-grad-action: linear-gradient(135deg,#0b63ce 0%,#008bdc 58%,#00b8e6 100%);
  --db-shadow: 0 12px 38px rgba(8,31,69,.12);
}

html, body { font-family: Roboto, "Segoe UI", Arial, sans-serif; }
body { color: var(--db-ink); background: var(--db-soft2); }
a { color: var(--db-blue); }
a:hover { color: var(--db-petrol); }

/* MENU PRINCIPAL */
#layout-menu {
  background: var(--db-grad) !important;
  box-shadow: 6px 0 24px rgba(8,31,69,.18);
}
#layout-menu .popover-header,
#layout-menu .special-buttons { background: transparent !important; }
#layout-menu .menu a,
#layout-menu .special-buttons a { color: rgba(255,255,255,.90) !important; }
#layout-menu .menu a:hover,
#layout-menu .special-buttons a:hover { background: rgba(255,255,255,.12) !important; color:#fff !important; }
#layout-menu .menu a.selected,
#layout-menu .menu li.selected > a {
  background: rgba(255,255,255,.18) !important;
  color:#fff !important;
  box-shadow: inset 3px 0 0 #66e7ff;
}

/* CABEÇALHOS E BARRAS */
#layout-list > .header,
#layout-content > .header,
#layout-sidebar > .header,
#layout-sidebar .header,
#layout-content .header {
  border-color: var(--db-line);
}
.header a.button:hover,
.toolbar a.button:hover,
.toolbar .dropbutton:hover { color: var(--db-blue) !important; }

/* LISTAGENS */
.listing li,
.listing tbody tr,
.messagelist tbody tr { border-color: #edf2f8; }
.listing li:hover,
.listing tbody tr:hover,
.messagelist tbody tr:hover { background: #eef7ff !important; }
.listing .selected,
.listing tr.selected,
.messagelist tr.selected { background: #e3f3ff !important; }

/* PESQUISA */
.searchbar,
#quicksearchbar {
  background: #fff !important;
  border: 1px solid var(--db-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 18px rgba(8,31,69,.05);
}
.searchbar:focus-within,
#quicksearchbar:focus-within {
  border-color: var(--db-blue) !important;
  box-shadow: 0 0 0 3px rgba(11,99,206,.12) !important;
}

/* CAMPOS */
.form-control, input, textarea, select {
  border-color: var(--db-line);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--db-blue) !important;
  box-shadow: 0 0 0 3px rgba(11,99,206,.12) !important;
}

/* BOTÕES */
.btn-primary,
button.btn-primary,
input.btn-primary,
#rcmloginsubmit {
  border: 0 !important;
  background: var(--db-grad-action) !important;
  color:#fff !important;
  box-shadow: 0 8px 22px rgba(11,99,206,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
#rcmloginsubmit:hover {
  background: linear-gradient(135deg,#081f45 0%,#0b63ce 100%) !important;
  box-shadow: 0 10px 26px rgba(8,31,69,.25);
  transform: translateY(-1px);
}

/* CARTÕES / PAINÉIS */
.ui-dialog,
.popover,
.menu.pagenav,
#layout-content,
#layout-list,
#layout-sidebar { border-color: var(--db-line); }
.ui-dialog { border-radius: 14px !important; overflow:hidden; box-shadow: var(--db-shadow) !important; }
.ui-dialog-titlebar { background: var(--db-grad) !important; color:#fff !important; border:0 !important; }

/* COMPOSIÇÃO */
.task-mail.action-compose #layout-content,
#compose-content { background: #fff; }
#compose-content .form-group label { color: var(--db-ink); font-weight: 500; }

/* LOGIN — identidade visual DB Mídias */
body.task-login {
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 12%, rgba(0,184,230,.22), transparent 28%),
    radial-gradient(circle at 12% 90%, rgba(11,99,206,.18), transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef7ff 46%,#e8f5fb 100%);
}
body.task-login:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(11,99,206,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,99,206,.035) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.7),transparent 80%);
}
body.task-login #layout-content {
  min-height:100vh;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}
body.task-login #logo {
  position:static !important;
  top:auto !important;
  width:min(440px,86vw) !important;
  max-width:440px !important;
  max-height:126px !important;
  object-fit:contain;
  margin:0 auto 18px;
  filter: drop-shadow(0 8px 18px rgba(8,31,69,.09));
}
.db-login-kicker {
  color:var(--db-petrol);
  text-transform:uppercase;
  letter-spacing:2.1px;
  font-weight:700;
  font-size:11px;
  margin:0 0 14px;
}
body.task-login #login-form {
  position:static !important;
  top:auto !important;
  width:min(410px,94vw) !important;
  max-width:410px !important;
  margin:0 !important;
  padding:28px 28px 22px;
  text-align:left;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,230,241,.9);
  border-radius:18px;
  box-shadow:0 22px 60px rgba(8,31,69,.14);
  backdrop-filter:blur(12px);
}
body.task-login #login-form:before {
  content:"Acesse seu Webmail";
  display:block;
  color:var(--db-navy);
  font-size:21px;
  line-height:1.25;
  font-weight:700;
  margin-bottom:4px;
}
body.task-login #login-form:after {
  content:"DB Mídias • Publicidades e Eventos";
  display:block;
  text-align:center;
  margin-top:17px;
  color:#8a99aa;
  font-size:11px;
  letter-spacing:.25px;
}
body.task-login #login-form .row { margin-bottom:14px; }
body.task-login #login-form label {
  color:#43546a;
  font-size:12px;
  font-weight:700;
  letter-spacing:.25px;
}
body.task-login #login-form .form-control {
  height:48px;
  border:1px solid var(--db-line);
  border-radius:10px;
  background:#f8fbff;
  color:#24364b;
  font-size:15px;
  padding:0 14px;
}
body.task-login #login-form .form-control:focus { background:#fff; }
body.task-login #rcmloginsubmit {
  width:100%;
  min-height:48px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.55px;
  margin-top:5px;
}
body.task-login #login-footer {
  text-align:center;
  font-size:11px;
  margin-top:10px;
  color:#8b98a8;
}
body.task-login #login-footer > div { background:transparent; padding:.5rem; margin-top:.5rem; }

/* senha com botão olho */
.db-password-wrap { position:relative; }
.db-password-wrap input { padding-right:48px !important; }
.db-pass-toggle {
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#63768c;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.db-pass-toggle:hover { background:#e9f3ff; color:var(--db-blue); }
.db-pass-toggle:focus { outline:2px solid rgba(11,99,206,.25); }
.db-pass-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* =========================================================
   DB MÍDIAS - REMOVER ÍCONES NATIVOS DOS INPUTS DO ELASTIC
   ========================================================= */

body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-addon {
    display: none !important;
}

/* Faz o input ocupar toda a largura após remover o ícone */
body.task-login #login-form .input-group > .form-control {
    border-radius: 12px !important;
    width: 100% !important;
}

/* Remove qualquer pseudo-ícone legado */
body.task-login #login-form .input-group:before,
body.task-login #login-form .input-group:after {
    display: none !important;
    content: none !important;
}

/* PAINEL DIREITO VAZIO / WATERMARK */
#layout-content > .iframe-wrapper,
#layout-content > .content-frame { background:#fff; }

/* DARK MODE — mantém identidade sem sacrificar legibilidade */
html.dark-mode body:not(.task-login) { --db-line:#344a5b; --db-ink:#e6f0f7; --db-soft:#18242d; --db-soft2:#111b22; }
html.dark-mode #layout-menu { background:linear-gradient(160deg,#061a38,#083a69 58%,#086a8c) !important; }
html.dark-mode .searchbar,
html.dark-mode #quicksearchbar { background:#1e2a33 !important; }

@media (max-width: 768px) {
  body.task-login #layout-content { padding:22px 14px; justify-content:flex-start; padding-top:8vh; }
  body.task-login #login-form { padding:24px 20px 20px; border-radius:15px; }
  body.task-login #logo { width:min(360px,88vw) !important; margin-bottom:12px; }
}

/* =============================================================
   LOGIN 2.0 — inspirado no layout institucional AVEP, identidade DB Mídias
   ============================================================= */
body.task-login {
  margin:0 !important;
  min-height:100vh;
  background:#fff !important;
  overflow:hidden;
}
body.task-login:before{display:none !important;}
body.task-login #layout-content.db-login-shell {
  min-height:100vh;
  display:grid !important;
  grid-template-columns:minmax(360px, 53vw) minmax(440px, 47vw);
  padding:0 !important;
  margin:0 !important;
  align-items:stretch;
  background:#fff !important;
}
.db-login-brand {
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding:64px 6vw 72px;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.10), transparent 20%),
    radial-gradient(circle at 11% 88%, rgba(0,220,255,.18), transparent 28%),
    linear-gradient(145deg,#062b58 0%,#0a4b84 48%,#00a9d9 100%);
  color:#fff;
}
.db-login-brand:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,24,51,.05),rgba(3,24,51,.2));
}
.db-brand-watermark {
  position:absolute;
  right:-4vw;
  top:3vh;
  width:min(47vw,680px);
  height:min(62vh,650px);
  background:url(../images/logo_db_vetor.png) center/contain no-repeat;
  opacity:.105;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.08));
  animation:dbFloat 7s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.db-brand-watermark:before,
.db-brand-watermark:after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.055);
}
.db-brand-watermark:before{width:92px;height:92px;left:8%;bottom:15%;}
.db-brand-watermark:after{width:58px;height:58px;right:10%;top:12%;}
@keyframes dbFloat {
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-14px,0) rotate(1deg)}
}
.db-brand-copy {position:relative;z-index:2;max-width:660px;}
.db-brand-badge {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 16px;
  margin-bottom:26px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.65px;
  color:#fff;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
}
.db-brand-copy h2 {
  margin:0 0 14px;
  color:#fff;
  font-size:clamp(46px,5.4vw,78px);
  line-height:.98;
  letter-spacing:-2.5px;
  font-weight:800;
}
.db-brand-copy p {
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.5;
}
.db-login-access {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px clamp(36px,6vw,110px);
  background:#fff;
}
.db-login-access-inner {width:min(520px,100%);}
body.task-login #logo {
  position:static !important;
  display:block;
  width:min(410px,86%) !important;
  max-width:410px !important;
  max-height:122px !important;
  object-fit:contain;
  margin:0 auto 34px !important;
  filter:none !important;
}
body.task-login #login-form {
  position:static !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:34px 34px 24px !important;
  background:#f8fbff !important;
  border:1px solid #e5edf6 !important;
  border-radius:20px !important;
  box-shadow:0 22px 55px rgba(8,31,69,.12) !important;
  backdrop-filter:none !important;
}
body.task-login #login-form:before,
body.task-login #login-form:after{display:none !important;}
.db-login-heading h2 {
  margin:0 0 6px;
  color:var(--db-navy);
  font-size:clamp(28px,2.1vw,36px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-1px;
}
.db-login-heading p {
  margin:0 0 26px;
  color:#6d7f92;
  font-size:14px;
  line-height:1.45;
}
body.task-login #login-form .row {margin-bottom:12px;}
body.task-login #login-form label {display:none !important;}
body.task-login #login-form .form-control {
  height:56px !important;
  border:1px solid #d6e2ef !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#27384d !important;
  font-size:16px !important;
  padding:0 15px !important;
  box-shadow:0 2px 8px rgba(8,31,69,.025);
}
body.task-login #login-form .form-control:focus {
  border-color:#0b63ce !important;
  box-shadow:0 0 0 3px rgba(11,99,206,.12) !important;
}
body.task-login #rcmloginsubmit {
  width:100%;
  min-height:56px !important;
  margin-top:6px !important;
  border-radius:12px !important;
  background:linear-gradient(90deg,#1260bf 0%,#087caf 58%,#05b9d9 100%) !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.35px;
  box-shadow:0 12px 24px rgba(7,93,161,.22) !important;
}
body.task-login #rcmloginsubmit:hover {
  transform:translateY(-1px);
  filter:brightness(.98);
}
.db-password-wrap {position:relative;}
.db-password-wrap input {padding-right:110px !important;}
.db-pass-toggle {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  min-width:92px;
  height:40px;
  gap:6px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6d7e90;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.db-pass-toggle:hover {background:#eef6ff;color:var(--db-blue);}
.db-pass-toggle svg {width:16px;height:16px;}
.db-pass-label{line-height:1;}
.db-login-security {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #e3eaf2;
  color:#7c8c9d;
  font-size:11px;
}
.db-lock {
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  background:#0b63ce;
  color:#fff;
  font-size:10px;
}
body.task-login #login-footer {margin-top:9px;color:#95a2af;font-size:10px;}

/* =========================================================
   DB MÍDIAS - LOGO DA BARRA LATERAL INTERNA
   Remove completamente a marca original do Roundcube
   ========================================================= */

#layout-menu .logo,
#layout-menu #logo,
#layout-menu .menu-logo,
#layout-menu > a.logo {
    background: transparent !important;
    background-image: url(../images/logo_db_vetor.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 52px auto !important;
}

/* Oculta imagem original */
#layout-menu .logo img,
#layout-menu #logo img {
    display: none !important;
}

/* Remove pseudo-elementos do Elastic */
#layout-menu .logo::before,
#layout-menu .logo::after,
#layout-menu #logo::before,
#layout-menu #logo::after,
#layout-menu > a.logo::before,
#layout-menu > a.logo::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

#layout-menu .logo:before,
#layout-menu .logo:after {
    font-family: initial !important;
    font-size: 0 !important;
}

/* Ajustes responsivos */
@media (max-width: 980px) {
  body.task-login {overflow:auto;}
  body.task-login #layout-content.db-login-shell {
    grid-template-columns:1fr;
    min-height:100vh;
  }
  .db-login-brand {
    min-height:300px;
    padding:42px 28px 38px;
    align-items:flex-end;
  }
  .db-brand-watermark {
    width:64vw;
    height:330px;
    right:-8vw;
    top:-15px;
  }
  .db-brand-copy h2 {font-size:48px;}
  .db-login-access {min-height:auto;padding:42px 22px 56px;}
  body.task-login #logo {width:min(360px,82%) !important;margin-bottom:24px !important;}
}
@media (max-width: 560px) {
  .db-login-brand{min-height:245px;padding:30px 20px 28px;}
  .db-brand-badge{margin-bottom:16px;min-height:31px;font-size:10px;}
  .db-brand-copy h2{font-size:38px;letter-spacing:-1.3px;}
  .db-brand-copy p{font-size:14px;}
  .db-login-access{padding:30px 14px 42px;}
  body.task-login #login-form{padding:26px 18px 20px !important;border-radius:16px !important;}
  body.task-login #logo{width:min(320px,88%) !important;}
  .db-pass-toggle{min-width:78px;font-size:0;}
  .db-pass-label{display:none;}
  .db-password-wrap input{padding-right:54px !important;}
}

/* =============================================================
   DB MÍDIAS - CORREÇÃO FINAL DA LOGO INTERNA
   A imagem agora vem diretamente de templates/includes/menu.html.
   Não usar background-image no #logo para evitar sobreposição.
   ============================================================= */
body:not(.task-login) #layout-menu #logo {
  display:block !important;
  position:static !important;
  width:58px !important;
  max-width:58px !important;
  height:auto !important;
  max-height:58px !important;
  margin:8px auto 6px !important;
  padding:0 !important;
  object-fit:contain !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}
body:not(.task-login) #layout-menu #logo::before,
body:not(.task-login) #layout-menu #logo::after,
body:not(.task-login) #layout-menu .popover-header::before,
body:not(.task-login) #layout-menu .popover-header::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
body:not(.task-login) #layout-menu .popover-header {
  min-height:72px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
}

/* Remove definitivamente os ícones nativos à esquerda dos campos do login */
body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-addon,
body.task-login #login-form .input-group > span.icon,
body.task-login #login-form .input-group > .icon {
  display:none !important;
}
body.task-login #login-form .input-group > .form-control,
body.task-login #login-form .input-group > .db-password-wrap {
  width:100% !important;
  flex:1 1 100% !important;
  border-radius:12px !important;
}