/* Webmail na identidade da marca. As variáveis --m-* vêm de marca-<marca>.css */

body { font-family: var(--m-font); }

/* ---------- Login ---------- */
body.task-login { background: var(--m-fundo); color: var(--m-tinta); }
body.task-login #layout,
body.task-login #layout-content { background: transparent; }

body.task-login #layout-content {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 100vh; padding: max(32px, 14vh) 16px 24px;
}
body.task-login #logo {
  display: block; width: 260px; max-width: 72%; height: auto; max-height: 72px;
  margin: 0 auto 28px; object-fit: contain;
}
body.task-login #login-form {
  width: 100%; max-width: 400px; margin: 0;
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .08);
  padding: 28px 24px 20px;
}
body.task-login #login-form table { width: 100%; }
body.task-login #login-form td.input { padding: 0 0 12px; }
body.task-login #login-form .form-control {
  height: 48px; font-size: 1rem; font-family: var(--m-font); color: var(--m-tinta);
  border-color: rgba(0, 0, 0, .14);
}
body.task-login #login-form .input-group-text {
  background: var(--m-fundo); color: var(--m-tinta); border-color: rgba(0, 0, 0, .14);
  border-radius: 10px 0 0 10px;
}
body.task-login #login-form .input-group > .form-control:last-child { border-radius: 0 10px 10px 0; }
body.task-login #rcmloginsubmit {
  height: 48px; margin-top: 4px; border-radius: 10px;
  font-family: var(--m-font-titulo); font-size: 1rem; font-weight: 600;
  text-transform: none !important; letter-spacing: 0;
}
/* td.input tem padding embaixo, então o olho centraliza pela altura do campo (48px) */
body.task-login .olhinho-btn { top: 24px; }
body.task-login #login-footer {
  margin-top: 16px; color: var(--m-tinta); opacity: .6;
  font-family: var(--m-font); font-size: .875rem;
}

/* ---------- Cor principal da marca no lugar do azul do elastic ---------- */
a, .btn-link { color: var(--m-link); }

.btn-primary,
.btn-primary.disabled, .btn-primary:disabled,
.floating-action-buttons a.button,
.quota-widget .value,
#messagestack .alert-info.information,
.folderlist li.mailbox.recent > a > .unreadcount,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--m-marca); border-color: var(--m-marca); color: var(--m-btn-texto);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active {
  background-color: var(--m-marca-700) !important; border-color: var(--m-marca-700) !important;
  color: var(--m-btn-texto) !important;
}

.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active,
.googie_list li.googie_list_onhover {
  background-color: var(--m-marca) !important; color: var(--m-btn-texto) !important;
}

/* Menu lateral fica no tom escuro da marca, com o símbolo branco e "Criar email" em tom claro */
#layout-menu { background-color: var(--m-tinta); }
#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover { color: var(--m-claro); }

.listing li.selected, .listing tr.selected td,
ul.treelist li.selected > a, ul.treelist li.selected > div > a,
.table-widget table.options-table tr.selected td {
  background-color: var(--m-claro); color: var(--m-tinta);
}

.form-control:focus,
.recipient-input.focus,
.multi-input > .content.focused,
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--m-marca);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--m-marca) 25%, transparent);
}
.input-group-text input:focus { border-color: var(--m-marca) !important; }