/* =========================================================
   CJM TECNOLOGIAS — ROUNDCUBE PREMIUM UI V3
   Compatível com Roundcube 1.6.x / skin Elastic
   ========================================================= */

:root {
  --cjm-blue: #08a7df;
  --cjm-blue-light: #38c6f4;
  --cjm-blue-dark: #087dac;
  --cjm-bg: #0d171c;
  --cjm-nav: #101c21;
  --cjm-panel: #15242a;
  --cjm-panel-alt: #192a31;
  --cjm-hover: rgba(8, 167, 223, 0.08);
  --cjm-selected: rgba(8, 167, 223, 0.18);
  --cjm-border: rgba(157, 203, 221, 0.14);
  --cjm-text: #eef7fa;
  --cjm-muted: #8fa7b1;
}

/* Base */
html,
body,
#layout,
#layout-content,
#layout-list,
#layout-sidebar,
#layout-menu {
  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
}

body:not(.task-login),
#layout,
#layout-content {
  background-color: var(--cjm-bg) !important;
}

/* =========================================================
   NAVEGAÇÃO LATERAL
   ========================================================= */

#layout-menu,
#taskmenu {
  position: relative;
  border-color: var(--cjm-border) !important;
  background:
    linear-gradient(
      180deg,
      #0d191e 0%,
      #111f25 100%
    ) !important;
}

#layout-menu {
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.16);
}

/* Substitui a logo padrão do Roundcube */
body:not(.task-login) #logo,
body:not(.task-login) #layout-menu #logo,
body:not(.task-login) #layout-menu .logo {
  background-color: #0f1d22 !important;
  background-image: url(
    "https://webmail.cjmtecnologias.com.br/skins/cjm/images/logo-login.png"
  ) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 62px auto !important;
  border-bottom: 1px solid var(--cjm-border) !important;
}

/* Esconde uma possível imagem original dentro da logo */
body:not(.task-login) #logo img,
body:not(.task-login) #layout-menu .logo img {
  opacity: 0 !important;
}

/* Atalhos da lateral */
#taskmenu a,
#taskmenu a:visited {
  position: relative;
  color: #a9bec7 !important;
  transition:
    color 0.18s ease,
    background-color 0.18s ease !important;
}

#taskmenu a:hover {
  color: #ffffff !important;
  background-color: rgba(8, 167, 223, 0.08) !important;
}

#taskmenu a.selected,
#taskmenu a.selected:hover {
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 167, 223, 0.24),
      rgba(8, 167, 223, 0.05)
    ) !important;
}

#taskmenu a.selected::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--cjm-blue);
  box-shadow: 0 0 13px rgba(8, 167, 223, 0.75);
}

/* Mantém itens desabilitados visualmente corretos */
#taskmenu a.disabled {
  opacity: 0.45 !important;
}

/* =========================================================
   PAINEL DA CONTA E DAS PASTAS
   ========================================================= */

#layout-sidebar {
  border-color: var(--cjm-border) !important;
  background-color: var(--cjm-panel) !important;
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.1);
}

#layout-sidebar > .header,
#layout-sidebar .header {
  min-height: 64px;
  padding-top: 0 !important;
  border-color: var(--cjm-border) !important;
  background:
    linear-gradient(
      135deg,
      #172b34,
      #132229
    ) !important;
}

#layout-sidebar > .header a,
#layout-sidebar > .header span {
  color: var(--cjm-text) !important;
}

#mailboxlist,
#folderlist {
  background-color: var(--cjm-panel) !important;
}

#mailboxlist li,
#mailboxlist li a {
  border-color: var(--cjm-border) !important;
}

#mailboxlist li a,
#mailboxlist li a:visited {
  color: #c6d6dc !important;
  transition:
    background-color 0.16s ease,
    color 0.16s ease !important;
}

#mailboxlist li a:hover {
  color: #ffffff !important;
  background-color: var(--cjm-hover) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > a:hover {
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 167, 223, 0.28),
      rgba(8, 167, 223, 0.07)
    ) !important;
  box-shadow:
    inset 3px 0 0 var(--cjm-blue) !important;
}

#mailboxlist li.selected > a::before {
  color: #ffffff !important;
}

#mailboxlist .unread > a,
#mailboxlist .unread > a span {
  color: #f3fbfe !important;
  font-weight: 600 !important;
}

/* =========================================================
   LISTA DE MENSAGENS
   ========================================================= */

#layout-list {
  border-color: var(--cjm-border) !important;
  background-color: #122127 !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.08);
}

#layout-list > .header,
#layout-list .header,
#messagelist-header,
.menu.toolbar,
.toolbar {
  border-color: var(--cjm-border) !important;
  background-color: #17272e !important;
}

#messagelist,
#messagelist tbody,
#messagelist tbody tr,
#messagelist td,
#messagelist th {
  border-color: var(--cjm-border) !important;
  background-color: #122127 !important;
}

#messagelist tbody tr td {
  transition:
    background-color 0.14s ease,
    color 0.14s ease !important;
}

#messagelist tbody tr:hover td {
  background-color: rgba(8, 167, 223, 0.07) !important;
}

#messagelist tbody tr.selected td,
#messagelist tbody tr.selected:hover td {
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 167, 223, 0.19),
      rgba(8, 167, 223, 0.09)
    ) !important;
}

#messagelist tbody tr.selected td:first-child {
  box-shadow:
    inset 3px 0 0 var(--cjm-blue) !important;
}

/* Mensagens não lidas */
#messagelist .unread td,
#messagelist .unread span,
#messagelist .unread a {
  color: #f0f9fc !important;
  font-weight: 600 !important;
}

/* Remetente, data e tamanho */
#messagelist .fromto,
#messagelist .date,
#messagelist .size {
  color: #8fc3d5 !important;
  font-weight: 400 !important;
}

/* Assunto */
#messagelist .subject {
  letter-spacing: -0.01em;
}

/* =========================================================
   ÁREA DE LEITURA
   ========================================================= */

#layout-content,
#layout-content .content,
#messagecontent,
.iframe-wrapper {
  border-color: var(--cjm-border) !important;
  background-color: #14242a !important;
}

#layout-content > .header,
#layout-content .header {
  border-color: var(--cjm-border) !important;
  background:
    linear-gradient(
      180deg,
      #18292f,
      #15242a
    ) !important;
}

/* =========================================================
   BARRAS E BOTÕES
   ========================================================= */

.menu.toolbar a.button,
.toolbar a.button {
  color: #96aab3 !important;
  border-radius: 8px !important;
  transition:
    color 0.16s ease,
    background-color 0.16s ease !important;
}

.menu.toolbar a.button:hover,
.menu.toolbar a.button:focus,
.toolbar a.button:hover,
.toolbar a.button:focus {
  color: #ffffff !important;
  background-color: rgba(8, 167, 223, 0.12) !important;
}

.menu.toolbar a.button.disabled,
.toolbar a.button.disabled {
  color: #61747c !important;
  opacity: 0.65 !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:hover {
  color: #ffffff !important;
  border-color: var(--cjm-blue-dark) !important;
  background:
    linear-gradient(
      135deg,
      var(--cjm-blue),
      var(--cjm-blue-dark)
    ) !important;
  box-shadow:
    0 8px 20px rgba(8, 167, 223, 0.18) !important;
}

/* =========================================================
   CAMPOS E PESQUISA
   ========================================================= */

.form-control,
select.form-control,
.searchbar input,
#quicksearchbar input {
  color: #edf8fc !important;
  border-color: rgba(157, 203, 221, 0.26) !important;
  border-radius: 8px !important;
  background-color: rgba(7, 17, 21, 0.44) !important;
}

.form-control:focus,
.searchbar input:focus,
#quicksearchbar input:focus {
  border-color: var(--cjm-blue) !important;
  box-shadow:
    0 0 0 0.18rem rgba(8, 167, 223, 0.15) !important;
}

a,
a:focus,
a:hover,
.btn-link {
  color: var(--cjm-blue) !important;
}

/* =========================================================
   RODAPÉS DAS COLUNAS
   ========================================================= */

#layout-sidebar > .footer,
#layout-list > .footer,
#layout-content > .footer {
  border-color: var(--cjm-border) !important;
  background-color: #132228 !important;
}

/* =========================================================
   BARRAS DE ROLAGEM
   ========================================================= */

* {
  scrollbar-color:
    var(--cjm-blue-dark)
    #122127;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #122127;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid #122127;
  border-radius: 999px;
  background: var(--cjm-blue-dark);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--cjm-blue);
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 767.98px) {
  body:not(.task-login) #logo,
  body:not(.task-login) #layout-menu #logo,
  body:not(.task-login) #layout-menu .logo {
    background-size: 52px auto !important;
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    box-shadow: none !important;
  }
  
  /* =========================================================
   CORREÇÃO FINAL DO MENU LATERAL
   ========================================================= */

/* Substitui diretamente a imagem original do Roundcube */
body:not(.task-login) #layout-menu .popover-header #logo {
  content: url(
    "https://webmail.cjmtecnologias.com.br/skins/cjm/images/logo-login.png"
  ) !important;
  display: block !important;
  width: 68px !important;
  height: 60px !important;
  margin: 0 auto !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  opacity: 1 !important;
  background: #0f1d22 !important;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.28));
}

/* Cabeçalho que contém a logo */
body:not(.task-login) #layout-menu .popover-header {
  height: 60px !important;
  min-height: 60px !important;
  border-bottom: 1px solid rgba(157, 203, 221, 0.14) !important;
  background: #0f1d22 !important;
}

/* Força a exibição dos atalhos principais */
body:not(.task-login) #taskmenu > a.mail,
body:not(.task-login) #taskmenu > a.contacts,
body:not(.task-login) #taskmenu > a.settings {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mantém os botões especiais na parte inferior */
body:not(.task-login) #taskmenu > .special-buttons {
  margin-top: auto !important;
}

/* Seleção do módulo atual */
body:not(.task-login) #taskmenu > a.selected {
  color: #ffffff !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 167, 223, 0.24),
      rgba(8, 167, 223, 0.05)
    ) !important;
}