/**
 * Snowflox-overrides voor de Roundcube-skin (2026-09-16) — los bestand,
 * na de standaard styles.css geladen (zie templates/includes/layout.html),
 * zodat dit zonder de LESS-broncode/build-pipeline aan te hoeven raken
 * wint van Elastic's eigen regels. Doel: Roundcube nog meer laten opgaan
 * in Snowflox's eigen backoffice-chrome (het zit altijd in een same-origin
 * iframe binnen de "Mail"-pagina, nooit los bezocht).
 *
 * Verbergt de hele linker taskmenu-kolom (#layout-menu, in
 * templates/includes/menu.html — logo, mail/contacten/instellingen/nieuw
 * bericht-iconen, dark-mode-toggle, help/about, logout): sinds Snowflox's
 * eigen sidebar rechtstreeks naar diezelfde Roundcube-taken linkt (zie
 * MyMailboxes::getNavigationItems() in de Laravel-app) is deze kolom
 * volledig dubbelop. #layout is een flex-container (layout.less) —
 * #layout-menu is daarin een flex-item met een vaste breedte, dus
 * `display:none` laat de overige kolommen (sidebar/list/content) gewoon
 * opschuiven, geen verdere layout-aanpassing nodig. `a.task-menu-button`
 * (de mobiele hamburger die #layout-menu als popover opent) verbergen we
 * om dezelfde reden mee.
 *
 * Alleen binnen de Snowflox-iframe: Roundcube's eigen `html.iframe`-class
 * (layout.less) is iets anders — dat is Roundcube's EIGEN interne
 * frame-in-frame-mechanisme (bv. de berichtvoorbeeld-frame), niet "zit deze
 * hele app in Snowflox' iframe". Daarom zet layout.html een eigen
 * `snowflox-embedded`-class op <html> (window.self !== window.top,
 * synchroon vóór de eerste render). Zonder die scope zou iemand die
 * mail-app rechtstreeks (buiten Snowflox om) bezoekt geen enkele manier
 * meer hebben om tussen mail/contacten/instellingen te wisselen.
 */
html.snowflox-embedded #layout-menu,
html.snowflox-embedded a.task-menu-button {
    display: none !important;
}

/* Dunne, onopvallende scrollbars (macOS-overlay-stijl) i.p.v. de browser-
 * default — overal in de Roundcube-UI (taskmenu-kolom, mappenlijst,
 * berichtenlijst), niet per container los getarget. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, .5) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(127, 127, 127, .5);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(127, 127, 127, .7);
}

/* Figtree i.p.v. Roboto — matcht Snowflox's eigen Filament-paneel. Lokaal
 * gehost (net als de bestaande Roboto-fonts in deze map) i.p.v. een live
 * Google Fonts-fetch, zelfde overweging als Snowflox's eigen
 * SelfHostedFontProvider (geen extra externe requests). Eén variabel-font-
 * bestand per subset dekt alle gebruikte gewichten (400/500/600/700). */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html body {
    font-family: 'Figtree', Roboto, sans-serif !important;
}

/* Dark-mode achtergrond overschrijven naar Snowflox's eigen dark-mode-
 * achtergrond (#232833, zie Filament branding tokens) i.p.v. Elastic's
 * eigen @color-dark-background (#21292c) — anders was er een zichtbare
 * naad tussen de iframe-inhoud en de rest van het (donkere) Filament-
 * paneel eromheen. */
html.dark-mode body {
    background-color: #232833;
}

/* ---- Knoppen: vorm/schaduw matchen Filament's .fi-btn (theme.css) ----
 * De kleur klopte al (@color-main in colors.less is al #2ba6dd, exact
 * Snowflox's accentblauw) — alleen de vorm week af: Bootstrap's eigen
 * .btn-default heeft border-radius:.25rem (~3.5px) en font-weight:400,
 * Filament's .fi-btn gebruikt 9px radius, een subtiele ring-schaduw i.p.v.
 * een harde rand, en font-weight 500. Live gecontroleerd via
 * getComputedStyle() op een echte .fi-btn in het Filament-paneel. */
.btn {
    border-radius: 9px !important;
    font-weight: 500;
}
.btn-primary,
.btn-secondary,
.btn-danger {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #1e93c9 !important;
    border-color: #1e93c9 !important;
}

/* ---- Iconen: Font Awesome Solid (gevuld) -> Regular (dunne outline) ----
 * Zwaarder/gevulder dan de dunne Heroicons-outline-stijl die Snowflox's
 * eigen Filament-paneel overal gebruikt. Er is al een Regular-gewicht van
 * hetzelfde lettertype meegeleverd (fonts/fa-regular-400.woff2) — Roundcube
 * gebruikt 'm zelf ook al voor een deel van de iconen (bv. #taskmenu .mail,
 * envelope, folder) via `.font-icon-regular()` in de LESS-bron, maar de
 * meeste iconen vallen terug op het font-gewicht-900-default (Solid) via
 * de gedeelde `.font-icon-class`-mixin.
 *
 * Niet elk Solid-icoon heeft een Regular-tegenhanger in de gratis
 * Font Awesome-set (fa-regular-400 bevat maar 151 glyphs) — voor de
 * onderstaande selectors is dat expliciet gecontroleerd (fontTools,
 * cmap-vergelijking tegen alle 120 daadwerkelijk in deze skin gebruikte
 * iconen): elk icoon hieronder heeft wél een geldige Regular-glyph en
 * stond nog niet al expliciet op Regular. Iconen zonder Regular-glyph
 * (bv. search, times, chevron-left, users, lock — ruim 60% van het totaal)
 * blijven bewust Solid, anders renderen ze leeg. */
#identities-table td.mail:before,
#message-header .header-links a.html:before,
#responses-table td.name:before,
.folderlist li.sent a:before,
.googie_list li .googie_add_to_dict:before,
.html-editor .editor-toolbar .mce-i-html:before,
.listing.iconized li.forward > a:before,
.listing.iconized li.identities > a:before,
.listing.iconized li.responses > a:before,
.listing.iconized tr.calendar > td.section:before,
.listing.iconized tr.chat > td.section:before,
.listing.iconized tr.compose > td.section:before,
.menu a.calendar:before,
.menu a.chat:before,
.menu a.closewin:before,
.menu a.compose:before,
.menu a.copy:before,
.menu a.create:before,
.menu a.insertresponse:before,
.menu a.move:before,
.menu a.notes:before,
.menu a.responses:before,
.menu a.send:before,
.menu a.theme.dark:before,
.menu a.theme.light:before,
.menu a.threads:before,
.quota-widget:before,
.ui.alert.alert-success > i.icon:before,
.ui.alert.chat > i.icon:before,
a.button.icon.bounce:before,
a.button.icon.create:before,
a.button.icon.folders:before,
a.button.icon.send:before,
button.btn.bounce:before,
button.btn.create:before,
button.btn.folders:before,
button.btn.send:before,
table.table th.checkbox-cell.read:before {
    font-weight: 400 !important;
}

/* ---- Menu-tekstgrootte in touch-modus ----
 * Roundcube's eigen `html.touch`-detectie (widgets/lists.less) is niet aan
 * echte touch-hardware gekoppeld maar reageert (mede) op vensterbreedte —
 * Noud ziet 'm ook op een gewone desktop. Roundcube's eigen bronregel is
 * `html.touch .listing:not(.toolbar) li { font-size: 1.2rem }` — die
 * targeten we hier 1-op-1 terug (i.p.v. de eerdere, te smalle
 * `.popover .listing`-variant, die de map-/instellingen-navigatie
 * (.treelist.listing.folderlist, geen .popover-voorouder) niet dekte).
 * `.messagelist` (de berichtenlijst zelf) gebruikt <table>/<tr>, niet
 * <li> — blijft dus buiten schot en houdt zijn eigen, bewust grotere
 * touch-vriendelijke rijhoogte. */
html.touch .listing:not(.toolbar) li,
html.touch .popover .listing li a {
    font-size: 14px !important;
    line-height: 33px !important;
}
html.touch .popover .listing li a {
    padding: 0 .5em !important;
}

/* ---- Afgeknipte knoplabels in de berichtwerkbalk ("Beantwoor…") ----
 * #toolbar-menu (de altijd-zichtbare werkbalk boven een geopend bericht —
 * ondanks de misleidende `aria-hidden="true"` op het element zelf, dat
 * hoort bij het dubbele gebruik als los popupmenu op kleinere schermen)
 * heeft `max-width:84px` op elke knop staan. Prima voor Engelse labels
 * ("Reply"), niet voor de Nederlandse vertalingen ("Beantwoorden",
 * "Beantwoord iedereen") — die werden met text-overflow:ellipsis
 * afgekapt. Geen JS-strijd nodig zoals eerst gedacht (het bleek geen
 * herberekening te zijn) — gewoon max-width loslaten en de knop op de
 * inhoud laten sizen, zoals width:auto normaal al zou doen. */
#toolbar-menu.toolbar > li,
#toolbar-menu.toolbar > li > a {
    max-width: none !important;
}
/* Zelfde max-width:84px zat ook op de GENESTE <a> binnen een splitsknop
 * (li > .dropbutton > a.reply-all/.forward) — de regel hierboven ving
 * alleen li > a rechtstreeks, niet deze kleinkinderen, dus "Beantwoord
 * iedereen"/"Doorsturen" bleven alsnog afgekapt tot dit apart gefixt werd. */
#toolbar-menu.toolbar .dropbutton > a {
    max-width: none !important;
}

/* ---- Werkbalk-knoppen (Beantwoorden/Beantwoord iedereen/Doorsturen/
 * Verwijder/Markeren/Meer) herstijld als losse knoppen, exact zoals
 * Filament's fi-ac-btn-action.fi-btn.fi-size-md ("Terug naar overzicht" op
 * de Mail-pagina) qua vorm (9px radius, ring-schaduw, 500-gewicht) — maar
 * met de kleinere fi-size-sm-maatvoering (button.css in
 * vendor/filament/support): gap-1/px-2.5/py-1.5 i.p.v. md's gap-1.5/px-3/
 * py-2, en 16px-iconen (fi-size-sm's size-4) i.p.v. md's 20px — Noud vond
 * de eerste (md-)versie nog te groot. Waarden via getComputedStyle() op
 * die echte Filament-knop opgehaald, niet gegokt.
 * De iconen zelf (reply/reply-all/forward/trash/tag/ellipsis) hebben geen
 * Font Awesome Regular-glyph (zie eerdere sectie) — vervangen door de
 * ECHTE Heroicons-SVG's die Filament zelf ook gebruikt
 * (vendor/blade-ui-kit/blade-heroicons/resources/svg/o-*.svg), als CSS
 * mask-image + background-color:currentColor. Puur CSS, geen JS, overleeft
 * updates. Bewust smal gescoped op de 7 specifieke knop-classes
 * (.reply/.reply-all/.forward/.delete/.markmessage/.more/.dropdown) i.p.v.
 * een brede "alle iconen in #toolbar-menu"-selector — anders krijgt bv.
 * .compose (die al prima gaat sinds de eerdere FA-Regular-ronde) ineens
 * een leeg zwart blokje (achtergrondkleur zonder masker). Sluit ook
 * `.hidden-big`/`.hidden-large` uit (Roundcube's eigen kleine-scherm-
 * klonen van Selecteer/Conversaties/Opties): die moeten via een aparte
 * regel hieronder juist `display:none` blijven op een normaal/groot
 * scherm, maar zaten aanvankelijk NIET in deze :not()-lijst — met gelijke
 * `!important` wint dan de hoogste CSS-specificiteit, en drie `:not()`
 * hier (`.dropdown`/`.compose`/eventueel meer) wegen zwaarder dan de één
 * `.hidden-big`-class in de aparte regel, dus die kloon bleef zichtbaar
 * i.p.v. verborgen. Nu hier al uitgesloten, dus geen specificiteitswedstrijd
 * meer nodig. */
#toolbar-menu.toolbar > li > a:not(.dropdown):not(.compose):not(.hidden-big):not(.hidden-large),
#toolbar-menu.toolbar > li > .dropbutton {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    border-radius: 9px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    color: #18181b;
    font-size: 14px;
    font-weight: 500;
    height: auto !important;
    line-height: 1.2;
}
html.dark-mode #toolbar-menu.toolbar > li > a:not(.dropdown):not(.compose):not(.hidden-big):not(.hidden-large),
html.dark-mode #toolbar-menu.toolbar > li > .dropbutton {
    background-color: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    color: #e6e9f0;
}
#toolbar-menu.toolbar > li > a.disabled,
#toolbar-menu.toolbar > li > .dropbutton.disabled {
    opacity: .4;
}
/* Hover-feedback — ontbrak helemaal. Voor de splitsknoppen (Beantwoord
 * iedereen/Doorsturen) NIET op de geneste <a> zelf zetten: die is met
 * `display:inline-flex` maar zo groot als zijn eigen inhoud (icoon+label),
 * dus een hover-achtergrond dáár kleurt alleen een smal tekst-eiland i.p.v.
 * de hele knop-pil — precies wat Noud terecht terugmeldde. In plaats
 * daarvan de hover op de `.dropbutton`-span zelf (de daadwerkelijke,
 * volledige knop-pil) en de binnenste <a>'s expliciet transparant houden,
 * ook tijdens hover. */
#toolbar-menu.toolbar > li > a:not(.disabled):not(.dropdown):hover {
    background-color: rgba(0, 0, 0, .04) !important;
}
#toolbar-menu.toolbar .dropbutton:not(.disabled) > a:not(.disabled):hover {
    background-color: transparent !important;
}
#toolbar-menu.toolbar > li > .dropbutton:not(.disabled):hover {
    background-color: rgba(0, 0, 0, .04) !important;
}
html.dark-mode #toolbar-menu.toolbar > li > a:not(.disabled):not(.dropdown):hover {
    background-color: rgba(255, 255, 255, .08) !important;
}
html.dark-mode #toolbar-menu.toolbar > li > .dropbutton:not(.disabled):hover {
    background-color: rgba(255, 255, 255, .08) !important;
}
/* Roundcube's eigen mobiele/kleine-scherm-klonen (Selecteer/Conversaties/
 * Opties) mogen niet als pil meegaan zodra ze via display:none al verborgen
 * horen te zijn op een groot scherm. */
#toolbar-menu.toolbar > li > a.hidden-big,
#toolbar-menu.toolbar > li > a.hidden-large {
    display: none !important;
}
/* Zelfde soort klasse, maar dan op de <li> zelf i.p.v. de <a> erin — trof
 * de opstel-pagina's "Opties en bijlages"-knop (`UI.show_sidebar()`, puur
 * bedoeld voor smalle schermen waar het opties-paneel niet standaard
 * zichtbaar is). Op een groot scherm hoort 'ie niet te tonen — de opties-
 * sidebar staat daar al permanent open via een andere, niet aangeraakte
 * responsieve regel. Zonder deze fix bleef de knop zichtbaar én leek 'm
 * niets te doen (klikken opende een al-open paneel opnieuw). Geen
 * specificiteitsgevecht nodig zoals eerder bij de a-variant: dit target
 * de <li> zelf, een ander element dan waar de brede pil-basisregel
 * (`> li > a`) op werkt, dus geen conflict. */
#toolbar-menu.toolbar > li.hidden-big {
    display: none !important;
}

/* Tekst weg, icoon blijft — Verwijder/Markeren: Noud vond de knoppenbalk
 * nog te breed, en bij deze twee zegt het icoon (prullenbak/label) al
 * genoeg. Label blijft wel in de DOM (visueel verborgen, niet display:none)
 * voor schermlezers — dezelfde clip-techniek als het dropdown-chevron
 * hierboven. */
#toolbar-menu.toolbar > li > a.delete,
#toolbar-menu.toolbar > li > a.print,
#toolbar-menu.toolbar > li > a.markmessage {
    padding: 10px !important;
}
#toolbar-menu.toolbar > li > a.delete .inner,
#toolbar-menu.toolbar > li > a.print .inner,
#toolbar-menu.toolbar > li > a.markmessage .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Splitsknoppen (Beantwoord iedereen/Doorsturen): de span.dropbutton wordt
 * de knop-pil, de twee <a>'s erbinnen worden transparant en delen dezelfde
 * rij. */
#toolbar-menu.toolbar .dropbutton > a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
}
#toolbar-menu.toolbar .dropbutton > a.dropdown {
    margin-left: 2px;
    opacity: .6;
}
#toolbar-menu.toolbar .dropbutton > a.dropdown .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Iconen als SVG-masker i.p.v. Font Awesome-glyph — alleen op deze 7
 * specifieke knop-classes, zie uitleg hierboven. Kleur is bewust NIET
 * currentColor: Filament's eigen `.fi-btn > .fi-icon` staat op een lichter
 * grijs (`text-gray-400`, oklch(0.705 0.015 286.067) ≈ #9ca3af) i.p.v. de
 * volle knoptekstkleur — live opgehaald via getComputedStyle() op een
 * echte Filament-knop, Roundcube's iconen stonden zonder deze regel te
 * zwart/te fel t.o.v. de rest van Snowflox. */
#toolbar-menu.toolbar > li a.reply:before,
#toolbar-menu.toolbar > li a.reply-all:before,
#toolbar-menu.toolbar > li a.forward:before,
#toolbar-menu.toolbar > li a.delete:before,
#toolbar-menu.toolbar > li a.print:before,
#toolbar-menu.toolbar > li a.markmessage:before,
#toolbar-menu.toolbar > li a.more:before,
#toolbar-menu.toolbar > li a.dropdown:before {
    content: "" !important;
    display: inline-block !important;
    float: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background-color: #9ca3af;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
#toolbar-menu.toolbar > li a.dropdown:before {
    width: 14px !important;
    height: 14px !important;
}
#toolbar-menu.toolbar > li a.reply:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.reply-all:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.forward:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.delete:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.print:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.markmessage:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6h.008v.008H6V6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6h.008v.008H6V6Z'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.more:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.dropdown:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); }

/* ---- Button-group-look (à la Bootstrap .btn-group) voor de twee sets ----
 * Set 1: Beantwoorden/Beantwoord iedereen/Doorsturen. Set 2: Verwijder/
 * Markeren/Meer. Roundcube's eigen <li>'s staan al zonder gap tegen elkaar
 * aan (geverifieerd met getBoundingClientRect() — de zichtbare afstand
 * kwam puur van elke knop's eigen afgeronde hoeken + losse ring-schaduw),
 * dus "samenvoegen" is alleen: per set de losse radius/schaduw vervangen
 * door een gedeelde rand (border i.p.v. box-shadow), alleen de buitenste
 * hoeken van de EERSTE en LAATSTE knop van elke set afronden, en de
 * middelste knop(pen) vierkant laten. Elke knop krijgt top/bottom/right-
 * rand; alleen de eerste van een set krijgt ook een linker-rand — de
 * volgende knop's (impliciete) linkerkant valt daar precies overheen, dus
 * geen dubbele/dikkere lijn op de naad. `:has()` selecteert de juiste
 * .dropbutton (reply-all vs. forward) zonder op DOM-volgorde te hoeven
 * gokken.
 *
 * `!important` op de randen bleek nodig: Roundcube's eigen
 * `.menu.toolbar a` heeft `border: 0px !important` (getMatchedCSSRules
 * bevestigde dit) — zonder !important hier bleven de scheidingslijntjes
 * tussen de knoppen dus onzichtbaar, ook al leek de regel te "matchen". */
#toolbar-menu.toolbar > li > a.reply,
#toolbar-menu.toolbar > li > .dropbutton:has(a.reply-all),
#toolbar-menu.toolbar > li > .dropbutton:has(a.forward),
#toolbar-menu.toolbar > li > a.delete,
#toolbar-menu.toolbar > li > a.print,
#toolbar-menu.toolbar > li > a.markmessage,
#toolbar-menu.toolbar > li > a.more {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    border-right: 1px solid rgba(0, 0, 0, .1) !important;
}
html.dark-mode #toolbar-menu.toolbar > li > a.reply,
html.dark-mode #toolbar-menu.toolbar > li > .dropbutton:has(a.reply-all),
html.dark-mode #toolbar-menu.toolbar > li > .dropbutton:has(a.forward),
html.dark-mode #toolbar-menu.toolbar > li > a.delete,
html.dark-mode #toolbar-menu.toolbar > li > a.print,
html.dark-mode #toolbar-menu.toolbar > li > a.markmessage,
html.dark-mode #toolbar-menu.toolbar > li > a.more {
    border-color: rgba(255, 255, 255, .12);
}
#toolbar-menu.toolbar > li > a.reply,
#toolbar-menu.toolbar > li > a.delete {
    border-left: 1px solid rgba(0, 0, 0, .1) !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
}
html.dark-mode #toolbar-menu.toolbar > li > a.reply,
html.dark-mode #toolbar-menu.toolbar > li > a.delete {
    border-left-color: rgba(255, 255, 255, .12);
}
#toolbar-menu.toolbar > li > .dropbutton:has(a.forward),
#toolbar-menu.toolbar > li > a.more {
    border-top-right-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
}

/* ---- Werkbalk op een smaller scherm: horizontaal scrollen i.p.v. omslaan ----
 * #toolbar-menu's <li>'s zijn van zichzelf inline-block, dus ze wikkelen
 * standaard naar een tweede regel zodra ze niet meer allemaal passen — maar
 * de omringende .header heeft een vaste hoogte + overflow:hidden (Roundcube
 * zelf), dus die tweede regel werd afgesneden i.p.v. gewoon getoond: de
 * pillen leken over elkaar heen te vallen op een smaller venster. Nu blijft
 * de rij altijd één regel (flex + nowrap) en scrollt 'm horizontaal door
 * als niet alles past — de al-bestaande dunne/onopvallende scrollbar-
 * override (bovenaan dit bestand) maakt dat ook visueel rustig. */
#toolbar-menu.toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto;
    overflow-y: hidden;
}
#toolbar-menu.toolbar > li {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    flex-shrink: 0;
}

/* Roundcube's eigen .dropbutton/.dropbutton>a hadden nog een vaste
 * height/min-height (van vóór de pil-herstijling) die de knop-pil van
 * Beantwoord iedereen/Doorsturen 74px hoog maakte i.p.v. de 36px van de
 * andere knoppen — zag eruit als een tweede, afwijkende rij. */
#toolbar-menu.toolbar .dropbutton,
#toolbar-menu.toolbar .dropbutton > a {
    height: auto !important;
    min-height: 0 !important;
}

/* ---- Opstel-werkbalk (Opslaan / Bijvoegen / Ondertekening / Reacties) ----
 * zelfde #toolbar-menu, hergebruikt door Roundcube voor de Opstellen-
 * pagina. "Opslaan" staat na de hidden-big-fix hierboven alleen (geen
 * groep nodig, blijft de standaard losse pil uit de basisregel).
 * Bijvoegen/Ondertekening/Reacties worden samen één button-group, zelfde
 * Bootstrap-.btn-group-techniek als de berichtwerkbalk.
 *
 * "Versleutel" (Mailvelope/PGP) staat hieronder VERBORGEN, niet alleen
 * icoon-only: die knop kan sowieso nooit werken zonder dat de gebruiker
 * zelf de losse Mailvelope-browserextensie installeert (geen Roundcube-
 * plugin die je serverzijdig aan/uit zet — het is core Elastic-markup,
 * `program/js/app.js`'s `check_mailvelope()` toggled 'm client-side op
 * basis van `window.mailvelope`), dus voor iedereen zonder die extensie
 * pure ruis. `.responses` is nu het laatste, rechts-afgeronde lid van de
 * groep i.p.v. `.encrypt`. Let op: `a.encrypt` zit zelf ook weer in een
 * `span.dropbutton` (net als reply-all/forward) — dus `:has(a.encrypt)`
 * zonder directe-kind-combinator, niet `:has(> a.encrypt)` (dat mist 'm,
 * eerst fout gedaan en live getest gevonden: `element.matches()` gaf
 * `false` voor de `>`-variant, `true` zonder). */
#toolbar-menu.toolbar > li:has(a.encrypt) {
    display: none !important;
}
#toolbar-menu.toolbar > li > a.attach,
#toolbar-menu.toolbar > li > a.signature,
#toolbar-menu.toolbar > li > a.responses {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    border-right: 1px solid rgba(0, 0, 0, .1) !important;
    padding: 10px !important;
}
html.dark-mode #toolbar-menu.toolbar > li > a.attach,
html.dark-mode #toolbar-menu.toolbar > li > a.signature,
html.dark-mode #toolbar-menu.toolbar > li > a.responses {
    border-color: rgba(255, 255, 255, .12) !important;
}
#toolbar-menu.toolbar > li > a.attach {
    border-left: 1px solid rgba(0, 0, 0, .1) !important;
    border-top-left-radius: 9px !important;
    border-bottom-left-radius: 9px !important;
}
html.dark-mode #toolbar-menu.toolbar > li > a.attach {
    border-left-color: rgba(255, 255, 255, .12) !important;
}
#toolbar-menu.toolbar > li > a.responses {
    border-top-right-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
}

/* Tekst weg, icoon blijft (label blijft in de DOM, visueel verborgen). */
#toolbar-menu.toolbar > li > a.attach .inner,
#toolbar-menu.toolbar > li > a.signature .inner,
#toolbar-menu.toolbar > li > a.responses .inner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* SVG-iconen i.p.v. FA-glyph voor attach/signature (geen Regular-
 * tegenhanger, zelfde methode als eerder) — .responses heeft die al wél
 * (font-weight 400 bevestigd via getComputedStyle), dus daar volstaat de
 * bestaande Font Awesome-glyph. .encrypt (Mailvelope) staat hierboven
 * verborgen, dus geen icoon-override meer nodig. */
#toolbar-menu.toolbar > li a.attach:before,
#toolbar-menu.toolbar > li a.signature:before {
    content: "" !important;
    display: inline-block !important;
    float: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background-color: #9ca3af;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
#toolbar-menu.toolbar > li a.attach:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13'/%3E%3C/svg%3E"); }
#toolbar-menu.toolbar > li a.signature:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E"); }

/* Kolomkoppen (#layout > div > .header) in lichte modus op dezelfde
 * achtergrond als de rest van Snowflox (#f1f1f1) i.p.v. Elastic's #f4f4f4.
 * Donkere modus laat 'm transparant (al goed). */
html:not(.dark-mode) #layout > div > .header {
    background-color: #f1f1f1;
}