/*
 * Promtek Mail — colour refinements for the stock Elastic layout.
 *
 * Main-window rules change colour states only. The framed-message rules are
 * deliberately limited to Roundcube's own message header and pane canvas;
 * authored email content is left alone.
 */

html:not(.iframe) body:not(.task-login) {
  --promtek-link: #bd6412;
  --promtek-link-hover: #8e4708;
  --promtek-info-soft: #fff4e6;
}

html.dark-mode:not(.iframe) body:not(.task-login) {
  --promtek-link: #ee9a3a;
  --promtek-link-hover: #ffc077;
  --promtek-info-soft: #2a231b;
}

/* Remove Elastic's blue focus outlines from the three main panes. */
html:not(.iframe) body:not(.task-login) #layout-sidebar.focused,
html:not(.iframe) body:not(.task-login) #layout-list.focused,
html:not(.iframe) body:not(.task-login) #layout-content.focused,
html:not(.iframe) body:not(.task-login) #layout-sidebar:focus-within,
html:not(.iframe) body:not(.task-login) #layout-list:focus-within,
html:not(.iframe) body:not(.task-login) #layout-content:focus-within {
  border-color: var(--promtek-border) !important;
  outline-color: var(--promtek-accent) !important;
}

/* Message metadata and header actions are UI chrome, not message content. */
html:not(.iframe) body.task-mail #message-header a,
html:not(.iframe) body.task-mail #message-header a:visited,
html:not(.iframe) body.task-mail #message-header a::before,
html:not(.iframe) body.task-mail #message-header .header-links a,
html:not(.iframe) body.task-mail #message-header .header-links a::before,
html:not(.iframe) body.task-mail #message-header .extwin,
html:not(.iframe) body.task-mail #message-header .extwin::before {
  color: var(--promtek-link) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html:not(.iframe) body.task-mail #message-header a:hover,
html:not(.iframe) body.task-mail #message-header a:hover::before,
html:not(.iframe) body.task-mail #message-header a:focus-visible,
html:not(.iframe) body.task-mail #message-header a:focus-visible::before {
  color: var(--promtek-link-hover) !important;
  background-color: var(--promtek-info-soft) !important;
  outline-color: var(--promtek-accent) !important;
}

/* Keep menus, popovers, dialogs, and their selected rows on the warm palette. */
html:not(.iframe) body:not(.task-login) .popupmenu,
html:not(.iframe) body:not(.task-login) .popover,
html:not(.iframe) body:not(.task-login) .popover-body,
html:not(.iframe) body:not(.task-login) .dropdown-menu,
html:not(.iframe) body:not(.task-login) .ui-menu,
html:not(.iframe) body:not(.task-login) .ui-dialog,
html:not(.iframe) body:not(.task-login) .ui-dialog-content {
  color: var(--promtek-text) !important;
  background-color: var(--promtek-header) !important;
  border-color: var(--promtek-border) !important;
}

html:not(.iframe) body:not(.task-login) .popupmenu a,
html:not(.iframe) body:not(.task-login) .dropdown-menu a,
html:not(.iframe) body:not(.task-login) .ui-menu-item-wrapper {
  color: var(--promtek-text) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html:not(.iframe) body:not(.task-login) .popupmenu a:hover,
html:not(.iframe) body:not(.task-login) .popupmenu a:focus,
html:not(.iframe) body:not(.task-login) .popupmenu a.selected,
html:not(.iframe) body:not(.task-login) .dropdown-menu a:hover,
html:not(.iframe) body:not(.task-login) .dropdown-menu a:focus,
html:not(.iframe) body:not(.task-login) .dropdown-menu a.selected,
html:not(.iframe) body:not(.task-login) .ui-menu-item-wrapper.ui-state-active {
  color: var(--promtek-selection-ink) !important;
  background-color: var(--promtek-selection) !important;
  border-color: var(--promtek-accent) !important;
}

/* Native Bootstrap/Elastic active controls otherwise retain their blue fill. */
html:not(.iframe) body:not(.task-login) .custom-control-input:checked ~ .custom-control-label::before,
html:not(.iframe) body:not(.task-login) .custom-control-input:indeterminate ~ .custom-control-label::before,
html:not(.iframe) body:not(.task-login) .page-item.active .page-link,
html:not(.iframe) body:not(.task-login) .progress-bar,
html:not(.iframe) body:not(.task-login) .badge-info {
  color: var(--promtek-accent-ink) !important;
  background-color: var(--promtek-accent) !important;
  border-color: var(--promtek-accent) !important;
}

html:not(.iframe) body:not(.task-login) .page-link,
html:not(.iframe) body:not(.task-login) .nav-link.active,
html:not(.iframe) body:not(.task-login) .list-group-item.active {
  color: var(--promtek-text) !important;
  background-color: var(--promtek-selection) !important;
  border-color: var(--promtek-border) !important;
}

html:not(.iframe) body:not(.task-login) ::selection {
  color: var(--promtek-selection-ink);
  background-color: var(--promtek-info-soft);
}

/*
 * Roundcube renders an opened message in a separate iframe. Define the same
 * warm palette inside that document so Elastic's blue-gray defaults cannot
 * leak into the reading pane.
 */
html.iframe body.task-mail {
  --promtek-accent: #ec8a1a;
  --promtek-link: #bd6412;
  --promtek-link-hover: #8e4708;
  --promtek-content: #ffffff;
  --promtek-border: #e7e1da;
  --promtek-text: #2b241f;
  --promtek-muted: #746b62;
  --promtek-info-soft: #fff4e6;
  color: var(--promtek-text) !important;
  background-color: var(--promtek-content) !important;
}

html.iframe.dark-mode body.task-mail {
  --promtek-link: #ee9a3a;
  --promtek-link-hover: #ffc077;
  --promtek-content: #17140f;
  --promtek-border: #2d2721;
  --promtek-text: #f6f2ec;
  --promtek-muted: #9a9188;
  --promtek-info-soft: #2a231b;
}

html.iframe body.task-mail #layout-content,
html.iframe body.task-mail .frame-content {
  color: var(--promtek-text) !important;
  background-color: var(--promtek-content) !important;
  border-color: var(--promtek-border) !important;
}

html.iframe body.task-mail #message-header,
html.iframe body.task-mail #message-header > .header {
  color: var(--promtek-text) !important;
  background-color: transparent !important;
  border-color: var(--promtek-border) !important;
}

html.iframe body.task-mail #message-header .header-summary,
html.iframe body.task-mail #message-header .header-summary span,
html.iframe body.task-mail #message-header .header-headers,
html.iframe body.task-mail #message-header .header-links {
  color: var(--promtek-muted) !important;
}

html.iframe body.task-mail #message-header a,
html.iframe body.task-mail #message-header a:visited,
html.iframe body.task-mail #message-header a::before,
html.iframe body.task-mail #message-header .extwin,
html.iframe body.task-mail #message-header .extwin::before {
  color: var(--promtek-link) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html.iframe body.task-mail #message-header a:hover,
html.iframe body.task-mail #message-header a:hover::before,
html.iframe body.task-mail #message-header a:focus-visible,
html.iframe body.task-mail #message-header a:focus-visible::before {
  color: var(--promtek-link-hover) !important;
  background-color: var(--promtek-info-soft) !important;
  outline-color: var(--promtek-accent) !important;
}

/* The user chose a no-avatar interior; remove both real and fallback photos. */
html.iframe body.task-mail #message-header .contactphoto,
html.iframe body.task-mail #message-header img.contactphoto {
  display: none !important;
}