/*
 * MBH Mail — restrained navy / blue polish for Roundcube Elastic.
 * Load AFTER Elastic's normal stylesheet; no JavaScript or new dependencies.
 * Selectors verified against the public production CSS on 2026-09-09:
 * https://mail.mbhpharma.com/static.php/skins/elastic/styles/styles.min.css?s=1786265143
 *
 * Deliberately preserves Elastic's widths, heights, responsive visibility,
 * scrolling, z-index, icon fonts, editor/message iframes and semantic alerts.
 * Roundcube's html.dark-mode class remains the only color-mode authority.
 */

html {
  --mbh-canvas: #f3f6fb;
  --mbh-surface: #ffffff;
  --mbh-surface-soft: #f7f9fc;
  --mbh-text: #172b49;
  --mbh-muted: #52627a;
  --mbh-border: #dce4ef;
  --mbh-field-border: #8191a7;
  --mbh-blue: #1d4ed8;
  --mbh-blue-hover: #1e40af;
  --mbh-blue-text: #ffffff;
  --mbh-selected: #e6efff;
  --mbh-selected-text: #173d91;
  --mbh-unread: #f6f9ff;
  --mbh-focus: #1d4ed8;
  --mbh-nav: #10233f;
  --mbh-nav-hover: #1c365b;
  --mbh-nav-selected: #244b7d;
  --mbh-nav-text: #edf4ff;
  --mbh-nav-accent: #9bccff;
}

html.dark-mode {
  --mbh-canvas: #111c2e;
  --mbh-surface: #17253a;
  --mbh-surface-soft: #1c2d45;
  --mbh-text: #e6edf7;
  --mbh-muted: #acbbd0;
  --mbh-border: #344963;
  --mbh-field-border: #7086a3;
  --mbh-blue: #2661cf;
  --mbh-blue-hover: #2e6cdf;
  --mbh-selected: #244268;
  --mbh-selected-text: #d5e7ff;
  --mbh-unread: #1c304c;
  --mbh-focus: #9bccff;
  --mbh-nav: #0c182b;
  --mbh-nav-hover: #1c3150;
  --mbh-nav-selected: #23456f;
}

/* UI surfaces only: no overrides to .message-htmlpart or message body styles. */
html:not(.dark-mode) body,
html.dark-mode body {
  color: var(--mbh-text);
  background-color: var(--mbh-canvas);
}

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: var(--mbh-surface);
  border-color: var(--mbh-border);
}

html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  color: var(--mbh-text);
  background-color: var(--mbh-surface-soft);
  border-color: var(--mbh-border);
}

html:not(.dark-mode) #layout > div > .header a.button,
html.dark-mode #layout > div > .header a.button,
html:not(.dark-mode) #layout > div > .footer a.button,
html.dark-mode #layout > div > .footer a.button {
  color: var(--mbh-text);
}

/* Keep the existing responsive rail/popover dimensions and all menu items. */
html:not(.dark-mode) #layout-menu,
html.dark-mode #layout-menu,
html.dark-mode.layout-phone #layout-menu {
  background-color: var(--mbh-nav);
  border-color: var(--mbh-border);
}

html #layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header,
html #layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
  /* Elastic itself uses !important for these two background declarations. */
  background-color: var(--mbh-nav) !important;
}

html #taskmenu a,
html.dark-mode #taskmenu a {
  color: var(--mbh-nav-text);
  border-color: transparent !important;
  border-radius: .45rem;
}

html #taskmenu a:not(.disabled):hover,
html #taskmenu a:not(.disabled):focus,
html.dark-mode #taskmenu a:not(.disabled):hover,
html.dark-mode #taskmenu a:not(.disabled):focus {
  color: var(--mbh-nav-text);
  background-color: var(--mbh-nav-hover);
}

html #taskmenu a.selected,
html #taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
  color: var(--mbh-nav-text);
  background-color: var(--mbh-nav-selected);
}

html #taskmenu .action-buttons a,
html.dark-mode #taskmenu .action-buttons a {
  color: var(--mbh-nav-accent);
}

html.dark-mode #taskmenu .special-buttons a:not(:focus):not(.selected) {
  background-color: var(--mbh-nav);
}

/* The original logout, flagged/deleted, disabled and alert styles stay intact. */
html:not(.dark-mode) .menu.toolbar a:not(.disabled),
html.dark-mode .menu.toolbar a:not(.disabled) {
  color: var(--mbh-text);
  border-radius: .4rem;
}

html:not(.dark-mode) .menu.toolbar a:not(.disabled):hover,
html:not(.dark-mode) .menu.toolbar a:not(.disabled):focus,
html.dark-mode .menu.toolbar a:not(.disabled):hover,
html.dark-mode .menu.toolbar a:not(.disabled):focus {
  color: var(--mbh-selected-text);
  background-color: var(--mbh-selected);
}

html:not(.dark-mode) .menu.toolbar a.selected,
html.dark-mode .menu.toolbar a.selected {
  color: var(--mbh-selected-text);
  background-color: var(--mbh-selected);
}

html:not(.dark-mode) .searchbar,
html.dark-mode .searchbar {
  background-color: var(--mbh-surface-soft);
  border-color: var(--mbh-border);
}

html:not(.dark-mode) .searchbar input,
html:not(.dark-mode) .searchbar a,
html.dark-mode .searchbar input,
html.dark-mode .searchbar a {
  color: var(--mbh-text);
}

html .searchbar:focus-within {
  box-shadow: inset 0 -2px var(--mbh-focus);
}

/* Preserve row geometry and all flag/attachment/thread-expansion controls. */
html:not(.dark-mode) .messagelist tr:not(.flagged):not(.deleted) td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td {
  color: var(--mbh-text);
  border-bottom-color: var(--mbh-border);
}

html:not(.dark-mode) .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html:not(.dark-mode) .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html:not(.dark-mode) .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
  color: var(--mbh-muted);
}

html .messagelist tr.unread:not(.selected):not(.flagged):not(.deleted) td {
  background-color: var(--mbh-unread);
}

html .messagelist tr.unread td.subject span.subject {
  font-weight: 700;
}

html:not(.dark-mode) .listing tr.selected td,
html.dark-mode .listing tr.selected td {
  background-color: var(--mbh-selected);
}

html:not(.dark-mode) .messagelist tr.selected:not(.flagged):not(.deleted) td,
html:not(.dark-mode) .messagelist tr.selected:not(.flagged):not(.deleted) td.subject a,
html.dark-mode .messagelist tr.selected:not(.flagged):not(.deleted) td,
html.dark-mode .messagelist tr.selected:not(.flagged):not(.deleted) td.subject a {
  color: var(--mbh-selected-text);
}

html:not(.dark-mode) .folderlist li.selected > a,
html.dark-mode .folderlist li.selected > a {
  color: var(--mbh-selected-text);
  background-color: var(--mbh-selected);
  font-weight: 700;
}

html:not(.dark-mode) .folderlist li.mailbox .unreadcount,
html.dark-mode .folderlist li.mailbox .unreadcount {
  color: var(--mbh-blue-text);
  background-color: var(--mbh-blue);
  border-radius: .5rem;
  font-weight: 700;
}

/* Forms and compose chrome; never recolor the authored message/editor iframe. */
html:not(.dark-mode) .form-control,
html.dark-mode .form-control {
  color: var(--mbh-text);
  background-color: var(--mbh-surface);
  border-radius: .45rem;
}

html:not(.dark-mode) .form-control:not(.is-invalid),
html.dark-mode .form-control:not(.is-invalid),
html:not(.dark-mode) .multi-input:not(.is-invalid) > .content,
html.dark-mode .multi-input:not(.is-invalid) > .content {
  border-color: var(--mbh-field-border);
}

html:not(.dark-mode) .form-control:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid),
html:not(.dark-mode) .recipient-input.focus,
html.dark-mode .recipient-input.focus {
  border-color: var(--mbh-focus);
  box-shadow: 0 0 0 2px var(--mbh-selected);
}

html:not(.dark-mode) .recipient-input li.recipient,
html.dark-mode .recipient-input li.recipient,
html:not(.dark-mode) .html-editor .editor-toolbar,
html.dark-mode .html-editor .editor-toolbar {
  background-color: var(--mbh-surface-soft);
  border-color: var(--mbh-field-border);
}

/* Compose remains full-width; modest text/chip spacing scales on phones too. */
html .recipient-input li.recipient .name {
  line-height: 1.35;
  padding: 4px;
}

html .html-editor > .googie_edit_layer,
html .html-editor > textarea {
  font-size: 1rem;
  line-height: 1.6;
}

html:not(.dark-mode) .btn-primary,
html.dark-mode .btn-primary {
  color: var(--mbh-blue-text);
  background-color: var(--mbh-blue);
  border-color: var(--mbh-blue);
  border-radius: .45rem;
}

html:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled):hover,
html:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled):focus,
html.dark-mode .btn-primary:not(:disabled):not(.disabled):hover,
html.dark-mode .btn-primary:not(:disabled):not(.disabled):focus {
  color: var(--mbh-blue-text);
  background-color: var(--mbh-blue-hover);
  border-color: var(--mbh-blue-hover);
}

/* Visible keyboard focus without changing Elastic's tab order or handlers. */
html #taskmenu a:focus-visible {
  outline: 2px solid var(--mbh-nav-accent);
  outline-offset: -3px;
}

html .menu.toolbar a:focus-visible,
html .folderlist li a:focus-visible,
html .btn:focus-visible {
  outline: 2px solid var(--mbh-focus);
  outline-offset: -2px;
}

/* Match Elastic's phone/tablet modes; no fixed widths/heights or hiding rules. */
html.layout-phone .popover-header,
html.layout-small .popover-header,
html.dark-mode.layout-phone .popover-header,
html.dark-mode.layout-small .popover-header {
  color: var(--mbh-nav-text);
  background-color: var(--mbh-nav);
  border-color: var(--mbh-border);
}

/* Authentication controls inherit the palette, keeping the existing logo. */
html:not(.dark-mode) #login-footer,
html.dark-mode #login-footer {
  color: var(--mbh-muted);
}

html:not(.dark-mode) #login-footer > div,
html.dark-mode #login-footer > div {
  background-color: var(--mbh-surface-soft);
  border: 1px solid var(--mbh-border);
  border-radius: .65rem;
}

/* Leave high-contrast/forced-color decisions to the browser and native theme. */
@media (forced-colors: active) {
  html .menu.toolbar a:focus-visible,
  html .folderlist li a:focus-visible,
  html #taskmenu a:focus-visible,
  html .btn:focus-visible {
    outline-color: Highlight;
  }
}

/* A clearer workspace hierarchy without replacing Elastic's pane behaviour. */
html:not(.iframe) body:not(.action-print) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html #layout-sidebar > .header .username { font-weight: 650; }
html #folderlist-content { padding: .65rem .4rem; }
html .folderlist li > a { border-radius: .6rem; }
html #layout-sidebar .folderlist li > a { font-size: 14px; }
html #taskmenu a.compose,
html.dark-mode #taskmenu a.compose {
  color: #fff;
  background: #1d4ed8;
  border-radius: .75rem;
  box-shadow: 0 4px 14px #08182f33;
}
html #taskmenu a.compose:hover,
html.dark-mode #taskmenu a.compose:hover { color: #fff; background: #1e40af; }
html #taskmenu a.logout,
html.dark-mode #taskmenu a.logout { color: #ffb4b4; }
html:not(.dark-mode) #mailtoolbar a.delete:not(.disabled) { color: #b42338; }
html.dark-mode #mailtoolbar a.delete:not(.disabled) { color: #ffb4b4; }
html #messagelist td.subject { padding-top: .65rem; padding-bottom: .65rem; }
html #messagelist td.subject span.subject { font-size: 15px; line-height: 1.5; }
html #messagelist td.subject span.fromto { font-size: 14px; line-height: 1.5; }
html #messagelist tr.unread:not(.selected) td.subject { box-shadow: inset 3px 0 var(--mbh-blue); }
html #messagelist tr.selected td.subject { box-shadow: inset 3px 0 var(--mbh-focus); }
html #layout-content > .header { box-shadow: 0 1px 3px #08182f08; }

/* The sign-in screen is a compact, readable card, not an empty dark canvas. */
html body.task-login #layout {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: radial-gradient(ellipse at 20% 0%, #d8e6ff 0, transparent 55%), var(--mbh-canvas);
}
html.dark-mode body.task-login #layout {
  background: radial-gradient(ellipse at 20% 0%, #213d66 0, transparent 55%), var(--mbh-canvas);
}
html body.task-login #layout-content {
  flex: none;
  width: min(100%, 470px);
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 38px;
  border: 1px solid var(--mbh-border);
  border-radius: 24px;
  background: var(--mbh-surface);
  box-shadow: 0 24px 64px #08182f24;
}
html body.task-login #logo {
  display: block;
  width: min(100%, 355px);
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 auto 30px;
  opacity: 1;
}
html body.task-login #login-form { width: 100%; max-width: none; margin: 0; }
html body.task-login #logo,
html body.task-login #login-form { position: static; top: auto; }
html body.task-login #login-form .input-group { margin-bottom: 14px; }
html body.task-login #login-form .input-group-text {
  min-width: 48px;
  justify-content: center;
  color: var(--mbh-muted);
  background: var(--mbh-surface-soft);
  border-color: var(--mbh-field-border);
  border-radius: 10px 0 0 10px;
}
html body.task-login #login-form .form-control {
  min-height: 48px;
  height: 48px;
  font-size: 16px;
  border-radius: 0 10px 10px 0;
}
html body.task-login #rcmloginsubmit {
  min-height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
  box-shadow: 0 5px 16px #1d4ed829;
}
html body.task-login #login-footer { margin-top: 22px; font-size: 13px; line-height: 1.6; }
html:not(.dark-mode) body.task-login #login-footer a { color: #1d4ed8; }
html.dark-mode body.task-login #login-footer a { color: #9bccff; }
@media (max-width: 480px) {
  html body.task-login #layout { padding: 18px; }
  html body.task-login #layout-content { padding: 28px 22px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html .btn, html #taskmenu a { transition: none; }
}
@media print {
  html body, html #layout-content { color: #000; background: #fff; box-shadow: none; }
}