/* Conceito Mail: marca + visual estilo Gmail sobre o skin Elastic do Roundcube.
   Paleta e contrastes em brand/kit.png
   marinho #2957A5 | azul médio #006DB5 | céu #0098DB | noite #0B1B3A | névoa #F4F7FC
   Neutros do tema claro (inspirados no Gmail): fundo #F6F8FC, cartão #FFF, ícone #444746, texto #1F1F1F, apoio #5F6368,
   seleção #D4E5F6 (tom claro do azul médio). Vale para telas normal e larga (não para celular/tablet pequeno). Usa CSS aninhado (Chrome 120+, Firefox 117+, Safari 17.2+). */

/* ============ login (todos os temas): fundo da marca ============ */
html.login-page, body.task-login {
  background: #0B1B3A url("fundo.jpg") center / cover no-repeat !important;
}
html body.task-login .btn-primary,
html body.task-login .btn-primary:focus {
  background: #0098DB !important;
  border-color: #0098DB !important;
  color: #0B1B3A !important;
  font-weight: 700;
}
html body.task-login .btn-primary:hover { background: #33ADE2 !important; border-color: #33ADE2 !important; }

/* no tema claro o Elastic pinta #layout de branco por cima do fundo: deixa transparente em qualquer tema */
html body.task-login #layout,
html body.task-login #layout-content { background: transparent !important; }
html body.task-login a, html body.task-login .formfooter, html body.task-login .footer { color: #BFE6F8 !important; }

/* foco visível em todos os temas */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #0098DB !important;
  outline-offset: 1px;
}

/* ============ tema escuro: só garante contraste da marca ============ */
html.dark-mode #layout-menu, html.dark-mode #layout-menu .popover-header { background-color: #0B1B3A !important; }
/* o botão Escrever em pílula é do tema claro; no escuro o menu já tem "Criar email" */
html.dark-mode .conceito-compose { display: none !important; }

/* ============ tema claro, tela larga: visual estilo Gmail ============ */
html:not(.layout-small):not(.layout-phone):not(.dark-mode) {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* fora do login: o login tem fundo próprio (azul-noite) definido acima */
  body:not(.task-login), body:not(.task-login) #layout { background: #F6F8FC !important; }

  /* --- barra de apps (esquerda): clara, ícones cinza, item atual em pílula --- */
  #layout-menu, #layout-menu .popover-header {
    background: #F6F8FC !important;
    border: 0 !important;
  }
  #layout-menu .popover-header img { max-width: 60px; max-height: 40px; padding: 0; }
  #taskmenu, #layout-menu .special-buttons, #layout-menu .menu { background: transparent !important; }
  #taskmenu .action-buttons { display: none; }          /* "Criar email" vira o botão Escrever da coluna de pastas */
  #taskmenu a, #layout-menu a.about, #layout-menu a.logout, #layout-menu a.theme {
    color: #444746 !important;
    border-radius: 16px;
    margin: 2px 6px;
  }
  #taskmenu a:hover, #layout-menu .special-buttons a:hover { background: #E9EEF6 !important; }
  #taskmenu a.selected { background: #D4E5F6 !important; color: #0B1B3A !important; font-weight: 600; }
  #layout-menu a.logout { color: #B3261E !important; }

  /* --- coluna de pastas --- */
  #layout-sidebar { background: #F6F8FC !important; border: 0 !important; }
  #layout-sidebar > .header { background: transparent !important; border: 0 !important; }
  #layout-sidebar .header-title.username {
    font-size: 12px; font-weight: 400; color: #5F6368 !important;
  }
  .conceito-compose {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 12px 14px; height: 56px; padding: 0 24px 0 16px;
    border-radius: 16px; background: #D4E5F6; color: #0B1B3A !important;
    font-size: 14px; font-weight: 600; text-decoration: none !important; width: fit-content;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    transition: box-shadow .15s, background .15s;
  }
  .conceito-compose:hover { background: #C5DCF1; box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); }
  .conceito-compose .cc-ico {
    width: 24px; height: 24px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
  }

  ul.treelist li, ul.treelist li > a { border: 0 !important; }
  ul.treelist li > a {
    height: 32px; border-radius: 0 16px 16px 0; margin-right: 12px; color: #1F1F1F !important;
  }
  ul.treelist li:not(.selected) > a:hover { background: #E9EEF6 !important; }
  ul.treelist li.selected > a { background: #D4E5F6 !important; color: #0B1B3A !important; font-weight: 700; }
  ul.treelist li > a:before { color: #444746 !important; }
  ul.treelist li.selected > a:before { color: #0B1B3A !important; }
  ul.treelist .unreadcount { background: transparent !important; color: #1F1F1F !important; font-weight: 700; font-size: 12px; }
  #layout-sidebar > .footer { background: transparent !important; border: 0 !important; }

  /* --- cartões: lista e leitura --- */
  body:not(.task-login) #layout-list, body:not(.task-login) #layout-content {
    background: #FFF !important; border: 0 !important; border-radius: 16px;
    margin: 0 8px 8px 0; overflow: hidden;
  }
  body:not(.task-login) #layout-list > .header, body:not(.task-login) #layout-content > .header {
    background: #FFF !important; border-bottom: 1px solid #EDEDED !important;
  }
  /* barras de ferramentas: ícones cinza como no Gmail (o azul fica para o item atual e o primário) */
  #layout-list .toolbar a, #layout-content .toolbar a, .header a.button.icon { color: #444746 !important; border-radius: 16px; }
  #layout-list .toolbar a.disabled, #layout-content .toolbar a.disabled { color: #9AA0A6 !important; }
  #layout-list .toolbar a:not(.disabled):hover, #layout-content .toolbar a:not(.disabled):hover { background: #E9EEF6 !important; }
  .header a.button.icon:hover { background: #E9EEF6 !important; }
  .header a.button.icon.disabled { color: #9AA0A6 !important; opacity: .7; }

  /* busca em pílula */
  .searchbar { background: #EAF1FB !important; border: 0 !important; border-radius: 24px; margin: 8px 12px; min-height: 46px; }
  .searchbar input[type=text], .searchbar input { background: transparent !important; color: #1F1F1F !important; }
  .searchbar:focus-within { background: #FFF !important; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }

  /* linhas da lista: lidas em névoa, não lidas em branco e negrito */
  table.messagelist tr td { border-color: #F1F3F4 !important; color: #5F6368; }
  table.messagelist tr.unread td { background: #FFF !important; color: #1F1F1F; font-weight: 700; }
  table.messagelist tr:not(.unread) td { background: #F2F6FC !important; }
  table.messagelist tr:hover td { box-shadow: inset 0 -1px 0 #DADCE0, 0 1px 3px rgba(60, 64, 67, .2); }
  table.messagelist tr.selected td, table.messagelist tr.focused td { background: #D4E5F6 !important; color: #0B1B3A; }
  #layout-list > .footer { background: #FFF !important; border-top: 1px solid #EDEDED !important; }
}