/* hamsn brand on Elastic — colours from hamsn.net: red #d7193e, navy #253964, ink #1d1d1b */

/* login screen: navy backdrop; logo + form read as one white card (they are siblings in Elastic's login.html) */
body.task-login { background: #253964; }
body.task-login #layout, body.task-login #layout-content { background: transparent; }
body.task-login #layout-content {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem 0; gap: 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .3));   /* one shadow around logo + form together */
}
body.task-login #logo {
  box-sizing: border-box; width: 26rem; max-width: 92vw; height: auto; max-height: none; margin: 0;
  position: static !important; top: auto !important;   /* Elastic nudges the logo down with position:relative */
  padding: 2.25rem calc((min(26rem, 92vw) - 200px) / 2) 1.25rem;   /* keeps the 200px wordmark at 1:1 */
  background: #fff; border-radius: 12px 12px 0 0; display: block;
  border: 0 !important; box-shadow: none !important; margin-bottom: -1px !important;   /* no seam against the form */
}
body.task-login #login-form {
  box-sizing: border-box; width: 26rem; max-width: 92vw; margin: 0 !important; position: static !important;
  padding: .5rem 2.25rem 2rem; background: #fff; border-radius: 0 0 12px 12px;
  border: 0 !important; box-shadow: none !important;
}
body.task-login #login-form .formbuttons .btn { width: 100%; }
body.task-login #login-footer, body.task-login #login-footer a { color: #6b7280; }

/* primary actions + accents everywhere */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, a.btn-primary,
.formbuttons .btn.mainaction, #login-form .btn.mainaction {
  background-color: #d7193e !important; border-color: #d7193e !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn.mainaction:hover, .btn.mainaction:focus {
  background-color: #b5142f !important; border-color: #b5142f !important;
}
.form-control:focus, input.form-control:focus {
  border-color: #d7193e !important; box-shadow: 0 0 0 .2rem rgba(215, 25, 62, .2) !important;
}
a, .link, a.link { color: #253964; }
html.dark-mode a, html.dark-mode .link { color: #e8899b; }

/* left menu: navy bar, red marker on the active item */
#layout-menu { background-color: #253964; }
#layout-menu .menu a, #layout-menu .popover-header { color: rgba(255, 255, 255, .8); }
#layout-menu .menu a:hover, #layout-menu .menu a.selected { color: #fff; background-color: rgba(255, 255, 255, .08); }
#layout-menu .menu a.selected { box-shadow: inset 4px 0 0 #d7193e; }

/* selected rows in mail / contact lists */
.listing li.selected > a, table.records-table tr.selected td, .listing li.selected,
table.records-table tr.selected { background-color: rgba(215, 25, 62, .08) !important; }
table.records-table tr.selected td:first-child { box-shadow: inset 3px 0 0 #d7193e; }

/* unread counters and the current message row */
.unreadcount, .listing li .unreadcount, .listing li.selected .unreadcount { background-color: #253964 !important; color: #fff !important; }
table.messagelist tr.selected td, table.messagelist tr.focused td { background-color: rgba(215, 25, 62, .06) !important; }
table.messagelist tr.selected td:first-child, table.messagelist tr.focused td:first-child { box-shadow: inset 3px 0 0 #d7193e !important; }