/* webmail_branding — merkkleuren over de elastic-skin heen.
 *
 * Bewust klein gehouden: alleen de twee plekken die het merk dragen, de
 * inlogknop en de balk links. De rest van de skin blijft ongemoeid, zodat een
 * Roundcube-update niets stukmaakt.
 *
 * Elke waarde heeft de originele elastic-kleur als fallback. Ontbreekt een
 * variabele, dan ziet dat deel er dus gewoon uit als standaard-Roundcube.
 */

/* --- Hoofdknop (o.a. de INLOGGEN-knop) ------------------------------------ */

.btn-primary,
#rcmloginsubmit {
    background-color: var(--brand-accent, #37beff);
    border-color: var(--brand-accent, #37beff);
    color: var(--brand-accent-text, #fff);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
#rcmloginsubmit:hover,
#rcmloginsubmit:focus {
    background-color: var(--brand-accent-dark, #1eb6ff);
    border-color: var(--brand-accent-dark, #1eb6ff);
    color: var(--brand-accent-text, #fff);
}

/* De focusring van elastic is hardblauw; neutraal maken zodat hij bij elk
   merk past zonder per merk een vijfde kleur te hoeven instellen. */
.btn-primary:focus,
#rcmloginsubmit:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .18);
}

/* --- Balk links ----------------------------------------------------------- */
/* Alleen in de lichte modus: de donkere modus heeft een eigen, doordachte
   kleurzetting (#layout-menu wordt daar juist transparant gemaakt) en die
   moeten we niet overschrijven. */

html:not(.dark-mode) #layout-menu,
html:not(.dark-mode) #taskmenu .special-buttons {
    background-color: var(--brand-sidebar, #2f3a3f);
}

/* Het logoblok bovenaan zet elastic zelf met !important, dus hier ook. */
html:not(.dark-mode) #layout-menu .popover-header {
    background-color: var(--brand-sidebar, #2f3a3f) !important;
}

/* Hover en actief item: een lichte sluier over de merkkleur. Zo hoeft er per
   merk geen aparte hover-kleur bedacht te worden en klopt het contrast altijd. */
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover {
    background-color: rgba(255, 255, 255, .14);
}

/* De accent-knop in de balk (Opstellen) volgt het merk. Uitloggen blijft rood:
   dat is een waarschuwingskleur, geen merkkleur. */
html:not(.dark-mode) #taskmenu .action-buttons a,
html:not(.dark-mode) #taskmenu .action-buttons a:hover {
    color: var(--brand-accent, #37beff);
}