/* Bavar Group: brand red for actions, accent red for links. Elastic light + dark mode. */
:root {
  --bavar-red: #e30613;
  --bavar-red-deep: #9f0710;
  --bavar-accent: #c20512;
  --bavar-tint: rgba(227, 6, 19, 0.08);
}
html.dark-mode {
  --bavar-accent: #ff3341;
  --bavar-tint: rgba(255, 51, 65, 0.14);
}

/* Primary actions: login, send, save, compose */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
#layout-menu a.compose,
.floating-action-buttons a.button {
  background-color: var(--bavar-red) !important;
  border-color: var(--bavar-red) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
#layout-menu a.compose:hover {
  background-color: var(--bavar-red-deep) !important;
  border-color: var(--bavar-red-deep) !important;
}
.btn-primary:focus,
.form-control:focus,
.custom-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.25) !important;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--bavar-red) !important;
}

/* Links: in messages and forms only (toolbar icons keep Elastic's neutral colours) */
#messagebody a,
.message-htmlpart a,
.formcontent a,
.formlinks a,
#layout-content .boxcontent a {
  color: var(--bavar-accent);
}

/* Active section in the left menu and the selected folder */
#layout-menu a.selected {
  background-color: var(--bavar-tint) !important;
}
#folderlist-content li.selected > a,
#folderlist-content li.selected > a:before,
.treelist li.selected > a,
.treelist li.selected > a:before {
  color: var(--bavar-accent) !important;
}

/* Selected rows in folder and message lists */
.listing li.selected,
.listing li.selected > a,
table.records-table tr.selected td,
table.records-table tr.focused td {
  background-color: var(--bavar-tint) !important;
}
.listing li.selected,
table.records-table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--bavar-red);
}

/* Unread counts and flags */
.unreadcount,
.listing li .unreadcount {
  background-color: var(--bavar-red) !important;
  color: #fff !important;
}
table.messagelist tr.unread td.subject span.subject a {
  color: inherit;
}

/* Switches and checkboxes when on */
.custom-switch .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before,
input.form-check-input:checked {
  background-color: var(--bavar-red) !important;
  border-color: var(--bavar-red) !important;
}