/* CFC 29 colours (logo blue #0c72b5, logo red #be1629, outils navy #1b2b4a) over Elastic's defaults. */
a, .btn-link, .link { color: #0c72b5; }

.btn-primary, .button.mainaction, .btn.btn-primary,
.formbuttons .btn-primary, #layout-menu a.compose {
  background-color: #0c72b5 !important;
  border-color: #0c72b5 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .button.mainaction:hover { background-color: #095a8f !important; border-color: #095a8f !important; }

.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: #0c72b5 !important;
  box-shadow: 0 0 0 .2rem rgba(12, 114, 181, .25) !important;
}

/* Side menu in outils' navy, the current section marked in the logo's blue. */
#layout-menu { background-color: #1b2b4a; }
#layout-menu .menu a, #layout-menu .special-buttons a { color: #dfe7f2; }
#layout-menu .menu a.selected, #layout-menu .menu a:hover { color: #fff; background-color: #0c72b5; }
#layout-menu .popover-header { background-color: #1b2b4a; }
/* The logo has a white background: give it a white tile in the dark menu. */
#layout-menu #logo, #layout-menu .popover-header img { background: #fff; border-radius: 6px; padding: 4px; }

/* Selected message or folder: pale blue with the logo's red edge. */
.listing li.selected, .listing li.selected > a, table.records-table tr.selected td,
table.messagelist tr.selected td { background-color: #e6f1f9 !important; }
.listing li.selected > a, table.messagelist tr.selected td:first-child { box-shadow: inset 3px 0 0 #be1629; }
.listing li.unread > a .unreadcount, .unreadcount { background-color: #0c72b5; color: #fff; }
table.messagelist tr.flagged td, table.messagelist tr.flagged td a { color: #be1629; }

/* Login page: soft company background, wide logo above the form. */
body.task-login { background: linear-gradient(160deg, #f4f7fb 0%, #e6eef7 100%); }
body.task-login #layout-content { background: transparent; }
body.task-login #logo { max-width: 320px; max-height: none; width: 100%; height: auto; margin-bottom: 1rem; }
body.task-login form#login-form { background: #fff; border-radius: 12px; padding: 1.5rem 1.5rem 1rem; box-shadow: 0 4px 18px rgba(27, 43, 74, .12); }

/* Dark mode keeps Elastic's dark palette; only the accents follow the company colours. */
html.dark-mode body.task-login { background: #161b22; }
html.dark-mode body.task-login form#login-form { background: #21262d; box-shadow: none; }
/* The logo's text is black: keep it on a white tile in dark mode. */
html.dark-mode body.task-login #logo { background: #fff; border-radius: 10px; padding: 8px; }
html.dark-mode .listing li.selected, html.dark-mode table.messagelist tr.selected td { background-color: #1f3b57 !important; }
html.dark-mode body.task-login #logo { filter: none; opacity: 1; }