/* CD-S5 · Elastic in den Farben der Marke, kein nachgebauter Skin (Michael 2026-11-02).
 *
 * Elastic kennt keine CSS-Variablen, also zaehlt hier jede Regel eine Stelle auf, an der der Skin
 * sein Blau (#37beff, #00acff) fest eingebacken hat, gelesen in Roundcube 1.7.4.
 *
 * Der Modus haengt an html.dark-mode (Cookie colorMode), NICHT an prefers-color-scheme, dem die
 * semantischen Rollen aus tokens.css folgen. Deshalb die vier --rc-*-Aliase auf die Primitive, je
 * Modus genau die Stufe, die --accent* dort traegt. Kein neuer Wert. */
@import url("brand/tokens.css");
@import url("brand/fonts.css");

:root {
  --rc-accent: var(--c-indigo-800);
  --rc-accent-strong: var(--c-indigo-900);
  --rc-accent-ink: var(--c-n-0);
  --rc-accent-tint: var(--c-indigo-100);
}
html.dark-mode {
  --rc-accent: var(--c-indigo-400);
  --rc-accent-strong: var(--c-indigo-300);
  --rc-accent-ink: var(--c-indigo-950);
  --rc-accent-tint: var(--c-indigo-900);
}

body, button, input, select, textarea, .btn, .form-control {
  font-family: var(--font-body);
}

/* Seitenleiste: in beiden Modi die Marke selbst */
#layout-menu,
#layout-menu .popover-header,
#taskmenu .special-buttons,
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu .special-buttons {
  background-color: var(--c-indigo-800) !important;
}
#taskmenu a,
#taskmenu .action-buttons a,
#taskmenu .special-buttons a,
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode #taskmenu .special-buttons a {
  color: var(--c-n-0);
}
#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu .action-buttons a:hover,
#taskmenu .special-buttons a:hover,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu .action-buttons a:hover,
html.dark-mode #taskmenu .special-buttons a:hover {
  color: var(--c-n-0);
  background: var(--c-indigo-700);
}

#taskmenu a.logout, #taskmenu a.logout:hover {
  color: var(--c-n-0) !important;
}

/* Auswahl in Listen */
.listing li.selected, .listing tr.selected td,
ul.treelist li.selected > a, ul.treelist li.selected > div > a,
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td {
  background-color: var(--rc-accent-tint);
}
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td {
  color: var(--c-n-100);
}

/* Links */
a, .btn-link, html.dark-mode a, html.dark-mode .btn-link,
.ui.alert a:not(.btn) {
  color: var(--rc-accent);
}
a:hover, .btn-link:hover, html.dark-mode a:hover, html.dark-mode .btn-link:hover {
  color: var(--rc-accent-strong);
}

/* Primaerer Knopf */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled,
div.tox .tox-dialog__footer .tox-button,
html.dark-mode .btn-primary {
  color: var(--rc-accent-ink);
  background: var(--rc-accent);
  border-color: var(--rc-accent);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
div.tox .tox-dialog__footer .tox-button:hover,
html.dark-mode .btn-primary:hover {
  color: var(--rc-accent-ink);
  background: var(--rc-accent-strong);
  border-color: var(--rc-accent-strong);
}

/* Der Skin nimmt den zweiten Knopf als Teal-Grau, und genau dort steht "Mit mipla-Konto anmelden" */
.btn-secondary, .btn-secondary:disabled {
  color: var(--c-n-0);
  background: var(--c-n-600);
  border-color: var(--c-n-600);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
  color: var(--c-n-0);
  background: var(--c-n-700);
  border-color: var(--c-n-700);
}
html.dark-mode .btn-secondary {
  color: var(--c-n-100);
  background: var(--c-n-700);
  border-color: var(--c-n-500);
}
html.dark-mode .btn-secondary:hover {
  color: var(--c-n-100);
  background: var(--c-n-600);
}

/* Markierte und aktive Menuepunkte */
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.googie_list li.googie_list_onhover,
#messagestack .alert-info.information,
html.dark-mode .popover .menu li a:not(.disabled):hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .popupmenu .listing li.selected {
  color: var(--rc-accent-ink);
  background-color: var(--rc-accent);
}
.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active {
  color: var(--rc-accent-ink) !important;
  background: var(--rc-accent) !important;
}
.ui-datepicker .ui-datepicker-days-cell-over a {
  color: var(--rc-accent);
  background: var(--rc-accent-tint);
}

/* Ordnerliste: ungelesen */
.folderlist li.mailbox.recent > a,
html.dark-mode .folderlist li.mailbox.recent > a {
  color: var(--rc-accent);
}
.folderlist li.mailbox.recent > a > .unreadcount,
html.dark-mode .folderlist li.mailbox.recent > a > .unreadcount {
  color: var(--rc-accent-ink);
  background: var(--rc-accent);
}
.quota-widget .value {
  background-color: var(--rc-accent);
}

/* Fokus und Schalter */
.form-control:focus,
.recipient-input.focus,
.multi-input > .content.focused,
.custom-file-input:focus ~ .custom-file-label,
html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode .recipient-input.focus {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 2px var(--rc-accent-tint);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--rc-accent);
  border-color: var(--rc-accent);
}

/* Zitate in der Lesefenster-Ansicht (das Iframe-freie Rendern erbt das Skin-Blau) */
.message-htmlpart blockquote, .message-part blockquote {
  color: var(--rc-accent);
  border-left-color: var(--rc-accent);
}