/* HostBring touches on top of Roundcube's Elastic skin.
   Colours (buttons, links, selected rows, popups, dark mode) come from the rebuilt skin CSS in
   ../elastic (scripts/build-elastic-colors.sh: #ed3865 main, #c42d55 links). Only add rules here that
   the skin colours cannot express, so light mode, dark mode and popups stay consistent.
   DM Sans: OFL, fonts/OFL-LICENSE. */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }

html, body, input, select, textarea, button, .btn, .popupmenu, .listing {
  font-family: "DM Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Dark sidebar: the selected section in bright brand pink (as prominent as Logout), with a pink bar */
#layout-menu .menu a.selected, html.dark-mode #layout-menu .menu a.selected {
  color: #ff8aa8 !important;
  background-color: #3d4b51;
  box-shadow: inset 3px 0 0 #ed3865;
}
#layout-menu .menu a:not(.selected):not(.logout):hover { color: #ffc2d1; }

/* Compose: white on pink in light and dark mode */
#layout-menu .menu a.compose, html.dark-mode #layout-menu .menu a.compose,
#layout-menu .menu a.compose:hover, html.dark-mode #layout-menu .menu a.compose:hover {
  background-color: #ed3865 !important; color: #fff !important;
}

/* Login page */
#login-form .formbuttons button { width: 100%; }
#logo { max-height: 60px; }
/* Sidebar inside webmail: icon only, centred and not stretched */
#layout-menu #logo { width: 44px; height: 44px; max-height: 44px; object-fit: contain; margin: 0 auto; }