/* BeYou - tema do webmail. Herda o tema Elastic e troca a identidade visual. */
@import url("../../elastic/styles/styles.css");

:root {
  --beyou-roxo: #201143;
  --beyou-roxo-claro: #4b3488;
  --beyou-limao: #d9fa56;

  --color-main: #4b3488;
  --color-main-dark: #201143;
  --color-main-darker: #150b2c;
  --color-link: #4b3488;
  --color-link-hover: #201143;

  --color-btn-primary-background: #4b3488;
  --color-btn-primary-background-hover: #201143;
  --color-btn-primary: #ffffff;

  --color-checkbox-checked: #4b3488;
  --color-checkbox-focus: #4b3488;

  --color-layout-header-background: #201143;
  --color-taskmenu-background: #201143;
  --color-taskmenu-button-selected: #d9fa56;
  --color-taskmenu-button-selected-background: rgba(217, 250, 86, .12);
  --color-taskmenu-button-action-background: #d9fa56;
  --color-taskmenu-button-action: #201143;

  --color-message-link: #4b3488;
  --color-spinner-dark: #4b3488;
}

/* Tela de entrada com o roxo da marca */
#layout-content.login-content,
body.task-login #layout > #layout-content {
  background: linear-gradient(160deg, #201143 0%, #3a2270 55%, #4b3488 100%);
}

body.task-login #login-form .box-inner {
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(20, 8, 60, .35);
}

body.task-login #login-form img.logo,
#layout-sidebar #logo img,
.logo img {
  max-height: 58px;
  width: auto;
}

/* Botao principal com o verde-limao da marca no hover */
body.task-login #login-form .button.mainaction:hover,
.button.mainaction:hover {
  background-color: #d9fa56;
  color: #201143;
  border-color: #d9fa56;
}

/* Barra lateral de tarefas */
#taskmenu a.selected,
#taskmenu a:hover {
  color: #d9fa56;
}

/* Cabecalho das listas */
.header-title,
#layout-list .header {
  color: #201143;
}

/* --- Ajustes finos da identidade BeYou --- */

/* Logo da tela de entrada: o arquivo e grande, entao limitamos a altura */
#logo,
body.task-login #logo,
img#logo {
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto 20px auto;
}

/* Botoes principais (Bootstrap) com o roxo da marca */
.btn-primary,
.button.mainaction,
body.task-login .btn-primary {
  background-color: var(--beyou-roxo-claro, #4b3488) !important;
  border-color: var(--beyou-roxo-claro, #4b3488) !important;
  color: #fff !important;
}
.btn-primary:hover,
.button.mainaction:hover,
.btn-primary:focus {
  background-color: var(--beyou-limao, #d9fa56) !important;
  border-color: var(--beyou-limao, #d9fa56) !important;
  color: var(--beyou-roxo, #201143) !important;
}

/* Links e foco dos campos */
a, a:hover { color: #4b3488; }
.form-control:focus {
  border-color: #4b3488;
  box-shadow: 0 0 0 .2rem rgba(75, 52, 136, .25);
}

/* Vale tambem quando o navegador esta em modo escuro */
html.dark-mode {
  --color-main: #d9fa56;
  --color-link: #d9fa56;
  --color-taskmenu-background: #150b2c;
}
html.dark-mode .btn-primary {
  background-color: #d9fa56 !important;
  border-color: #d9fa56 !important;
  color: #201143 !important;
}