/* 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;
}

/* Scheidingslijn rechts van de balk. Op een donkere balk doet de kleur zelf het
   werk, dus daar staat er standaard geen lijn (transparant). Een WITTE balk
   loopt zonder lijn naadloos over in de witte mappenkolom ernaast; zet dan
   --brand-sidebar-border op #d4dbde, precies de lijn die elastic tussen zijn
   eigen kolommen gebruikt. */
html:not(.dark-mode) #layout-menu {
    border-right: 1px solid var(--brand-sidebar-border, transparent);
}

/* Het onderste blok (donkere modus / over / uitloggen) staat absoluut
   gepositioneerd over de balk heen en is precies even breed, dus zijn
   achtergrond dékt die rand af — de lijn stopte daardoor halverwege. In de
   donkere modus valt dat niet op omdat elastic dat blok daar transparant maakt.
   Een eigen border-right lost het niet op: het blok heeft geen vaste breedte en
   wordt er 1px breder van, wat een dubbele lijn geeft. Een inset-schaduw tekent
   binnen dezelfde doos en valt dus exact samen met de rand hierboven. */
html:not(.dark-mode) #taskmenu .special-buttons {
    box-shadow: inset -1px 0 0 var(--brand-sidebar-border, transparent);
}

/* Tekst en pictogrammen in de balk. Elastic zet die hard op wit, wat klopt op
   een donkere balk maar onleesbaar is op een lichte. Zonder --brand-sidebar-text
   blijft het wit, dus donkere balken merken hier niets van.
   Uitloggen blijft rood: elastic zet dat met !important en dat laten we zo. */
html:not(.dark-mode) #taskmenu a,
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 {
    color: var(--brand-sidebar-text, #fff);
}

/* Hover en actief item. De standaard is een lichte sluier over de merkkleur —
   dat werkt op elke donkere balk zonder dat er per merk een kleur bedacht hoeft
   te worden. Op een WITTE balk is een witte sluier onzichtbaar; zet dan
   --brand-sidebar-hover op een tint uit de eigen huisstijl. */
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: var(--brand-sidebar-hover, rgba(255, 255, 255, .14));
}

/* De accent-knop in de balk (Opstellen) volgt het merk. Uitloggen blijft rood:
   dat is een waarschuwingskleur, geen merkkleur.

   Op een WITTE balk is de knopkleur niet altijd de juiste keuze: die is gekozen
   voor tekst óp een gevulde knop, niet voor een pictogram op wit. Het goud van
   Trimsalon haalt zo 2,4:1 en het lichtblauw van BoekMijnTaxi 2,5:1, ruim onder
   de 3:1 die een pictogram nodig heeft. Zet in dat geval sidebar_accent op de
   diepere merkkleur; zonder die sleutel blijft het gewoon de knopkleur. */
html:not(.dark-mode) #taskmenu .action-buttons a,
html:not(.dark-mode) #taskmenu .action-buttons a:hover {
    color: var(--brand-sidebar-accent, var(--brand-accent, #37beff));
}