/* NEXXT-thema voor Roundcube Elastic: zijbalk "Schemer", lichte weergave scherm 5 "Linear-rustig" (09-11-2026).
   Alleen kleuren; de indeling van Roundcube blijft ongewijzigd. Leesvenster blijft wit (licht).
   Nachtblauw #1b1f27, NEXXT-blauw #36a9e1, rood #d7263d. */

/* ---------- Zijbalk (licht en donker) ---------- */
@media screen and (min-width: 481px) {
  /* verloop "Logo en uitgang" (versie 2): blauwe gloed achter het logo, zwak rood schijnsel bij Uitloggen.
     #layout krijgt exact dezelfde lagen (gloed op 39px = midden van de 78px-balk), zodat de bocht naadloos doorloopt. */
  #layout-menu, #layout {
    background-color: #15181e;
    background-image:
      radial-gradient(90px 130px at 39px 0%, rgba(56, 159, 211, .45) 0%, rgba(56, 159, 211, 0) 70%),
      radial-gradient(110px 150px at 39px 100%, rgba(215, 38, 61, .22) 0%, rgba(215, 38, 61, 0) 70%),
      linear-gradient(180deg, #1b1f27 0%, #1b1f27 55%, #15181e 100%);
    background-repeat: no-repeat;
  }
  #layout-menu .popover-header { background: transparent !important; }
  /* logo 34px zoals in de mockup; opvulling houdt het vak exact 78x58 */
  #layout-menu .popover-header #logo {
    width: 34px; height: 34px; max-width: none; max-height: none;
    padding: 12px 22px; box-sizing: content-box; object-fit: contain;
  }
  #taskmenu .special-buttons { background: transparent; }
  #taskmenu a, #taskmenu a:focus { color: #ffffff; }
  #taskmenu a.selected, #taskmenu a.selected:hover, #taskmenu a:hover,
  #taskmenu .action-buttons a:hover, #taskmenu a:focus { background-color: rgba(255, 255, 255, .07); }
  /* Opstellen: rood icoon, wit label, geen vlak of streep */
  #taskmenu a.compose, #taskmenu .action-buttons a.compose { color: #ffffff; background-color: transparent; }
  html #taskmenu a.compose::before, html #taskmenu .action-buttons a.compose::before { color: #ff4d63; }
  #taskmenu a.compose:hover, #taskmenu a.compose:focus { background-color: rgba(255, 255, 255, .07); }
  #taskmenu a.logout { color: #ff6b68; }
  /* "bochtje" zoals Clevergig: werkvlak met ronde hoek linksboven tegen de zijbalk.
     Alleen een afronding; maten en indeling blijven gelijk. De container erachter
     krijgt de kleur van de zijbalk op die hoogte, zodat de hoek de zijbalk laat doorlopen. */
  /* bocht op de kolom die direct naast de zijbalk staat: normaal de mappenkolom,
     in het opstelvenster (zijkolom staat daar rechts) het schrijfvak */
  body:not(.action-compose) #layout-sidebar,
  body.action-compose #layout-content { border-top-left-radius: 52px 46px;  /* iets minder bocht (Ayham); blijft binnen de 58px-kopbalk */ overflow: hidden; }
}

/* ---------- Lichte weergave: scherm 5 "Linear-rustig" (gekozen 09-11-2026) ---------- */
/* Bovenbalken: wit, blauwe iconen, dunne neutrale rand (geen rode lijn) */
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-content > .header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e9ed;
}
html:not(.dark-mode) .header .header-title { color: #1b1f27; }
html:not(.dark-mode) #layout-sidebar > .header a.button,
html:not(.dark-mode) #layout-list > .header a.button,
html:not(.dark-mode) #layout-content > .header a.button,
html:not(.dark-mode) #layout-content > .header .toolbar a,
html:not(.dark-mode) #layout-list > .header .toolbar a { color: #3a4256; }  /* neutraal; blauw alleen bij aanwijzen */
html:not(.dark-mode) #layout-content > .header .toolbar a.disabled,
html:not(.dark-mode) #layout-list > .header .toolbar a.disabled { color: #3a4256; opacity: .45; }
html:not(.dark-mode) #layout-sidebar > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header .toolbar a:not(.disabled):hover { background-color: #f0f6fa; color: #176b9e; }

/* Mappenkolom: effen koel neutraal, zichtbare maar rustige lijnen */
html:not(.dark-mode) #layout-sidebar { background: #ffffff; }  /* wit (Ayham 09-11; was #f7f9fa) */
html:not(.dark-mode) #layout-sidebar .scroller { background: transparent; }
html:not(.dark-mode) #layout-sidebar > .footer { background: #ffffff; border-top-color: #dce3e7; }
html:not(.dark-mode) #layout-sidebar .listing li { border-bottom-color: #dce3e7; }
html:not(.dark-mode) #layout-sidebar .listing li > a:hover { background-color: #f0f4f6; }
/* opslagbalk in NEXXT-blauw i.p.v. Roundcube-lichtblauw */
html:not(.dark-mode) #layout-sidebar .quota-widget .bar { background-color: #e8edef; }
html:not(.dark-mode) #layout-sidebar .quota-widget .bar .value { background-color: #36a9e1; opacity: 1; }
/* geselecteerde map: versie 5 "Duotoon" - hele rij lichtblauw, icoon wit in een echt blauw rondje.
   Het icoon-blok (zwevend, 20.64px + 7px marge) wordt een rondje van 24px + 3.64px marge:
   samen even breed, dus de tekst blijft exact op zijn plek. */
html:not(.dark-mode) #layout-sidebar .listing li.selected > a,
html:not(.dark-mode) #layout-sidebar .listing li.selected > a:hover {
  background-color: #e4f1ff;   /* versie 5 'Hemelsblauw' (Ayham 09-11) */
  border-left-color: transparent;
  color: #0b4f8a;
  font-weight: 600;
}
/* alle map-iconen even groot (14px); vak blijft 20.64px breed zodat niets verschuift */
#layout-sidebar .listing li > a::before { font-size: 14px; width: 20.64px; }
/* geselecteerde map: blauwe cirkel (24px) als apart element ACHTER het icoon, gecentreerd op het icoonvak
   (icoonmidden = 7px opvulling + 10.31px = 17.31px vanaf de binnenkant van de rand). Het icoon zelf blijft in zijn eigen vak
   (masker in nexxt_icons.css), dus maten en tekstpositie veranderen niet. */
html:not(.dark-mode) #layout-sidebar .listing li.selected > a { position: relative; isolation: isolate; }
html:not(.dark-mode) #layout-sidebar .listing li.selected > a::before { color: #ffffff; }  /* wit icoon in blauwe cirkel */
html:not(.dark-mode) #layout-sidebar .listing li.selected > a::after {
  content: "";
  position: absolute;
  left: 5.31px; top: 50%;          /* gemeten vanaf de binnenkant van de 2px-rand: icoonmidden = 7 + 10.31 = 17.31px, min 12 */
  width: 24px; height: 24px; margin-top: -12px;
  border-radius: 50%;
  background: #1565c0;   /* hemelsblauwe cirkel */
  z-index: -1;
}
html:not(.dark-mode) .listing li .unreadcount,
html:not(.dark-mode) #mailboxlist .unreadcount { background-color: #36a9e1; color: #1b1f27; }

/* Maillijst: neutrale selectie (geen zijstreep), rustige lijnen, blauwe stip alleen voor ongelezen */
html:not(.dark-mode) .messagelist tr.selected td,
html:not(.dark-mode) .messagelist tr.selected.focused td,
html:not(.dark-mode) .listing tr.selected td { background-color: #f2f6f8; }
html:not(.dark-mode) .messagelist tr:not(.selected):hover td { background-color: #f8fafb; }
/* focus-rij: geen babyblauw streepje (breedte blijft, kleur transparant), wel een zachte tint */
html:not(.dark-mode) table.messagelist tr.focused > td,
html:not(.dark-mode) table.listing tr.focused > td,
html:not(.dark-mode) .listing li.focused > a { border-left-color: transparent !important; }
/* geen tint voor de focus-rij: Roundcube zet die bij het laden op de bovenste mail, wat als voorselectie oogt */
html:not(.dark-mode) .messagelist td { border-bottom-color: #eef2f5; }
html:not(.dark-mode) .messagelist .msgicon.status::before { color: #c3c9d6; }
html:not(.dark-mode) .messagelist tr.unread .msgicon.status::before,
html:not(.dark-mode) .messagelist tr.unread span.msgicon.status { color: #176b9e; }
html:not(.dark-mode) .messagelist .msgicon.status.replied::before,
html:not(.dark-mode) .messagelist .msgicon.status.forwarded::before { color: #6a7385; }
/* rustige scrollbalken */
html:not(.dark-mode) #layout-list .scroller, html:not(.dark-mode) #layout-sidebar .scroller { scrollbar-color: #d2dadf transparent; }
/* lege toestand: het Roundcube-doosje is vervangen door een NEXXT-teken in skins/elastic/images (zie geheugen) */
html:not(.dark-mode) .messagelist tr.flagged td,
html:not(.dark-mode) .messagelist tr.flagged td a { color: #d7263d; }

/* Accentkleur: links, knoppen, schakelaars, focus */
html:not(.dark-mode) a, html:not(.dark-mode) .link { color: #176b9e; }
/* Geopende mail: niet alles blauw. Afzender = donkere tekst, hulplinks = grijs (blauw bij aanwijzen),
   links in de mail zelf blijven NEXXT-blauw. */
html:not(.dark-mode) #message-header .adr a.rcmContactAddress { color: #1b1f27; font-weight: 500; }
html:not(.dark-mode) #message-header .adr a.rcmaddcontact,
html:not(.dark-mode) #message-header .header-links a,
html:not(.dark-mode) .header-links a,
html:not(.dark-mode) h2.subject a.extwin,
html:not(.dark-mode) #attachment-list a.filename,
html:not(.dark-mode) .attachmentslist a.filename { color: #5c6478; }
html:not(.dark-mode) #message-header .adr a:hover,
html:not(.dark-mode) .header-links a:hover,
html:not(.dark-mode) .attachmentslist a.filename:hover { color: #176b9e; }
html:not(.dark-mode) #messagebody a { color: #176b9e; }
html:not(.dark-mode) .listing a,
html:not(.dark-mode) .messagelist a { color: inherit; }
html:not(.dark-mode) #taskmenu a, html:not(.dark-mode) #taskmenu a:focus { color: #ffffff; }
html:not(.dark-mode) #taskmenu a.logout { color: #ff6b68; }
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .btn-primary:not(:disabled):not(.disabled):active,
html:not(.dark-mode) .btn-primary:focus { background-color: #36a9e1; border-color: #36a9e1; color: #1b1f27; }
html:not(.dark-mode) .btn-primary:hover { background-color: #2389bd; border-color: #2389bd; }
html:not(.dark-mode) .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html:not(.dark-mode) .custom-control-input:checked ~ .custom-control-label::before { background-color: #36a9e1; border-color: #36a9e1; }
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-select:focus { border-color: #36a9e1; box-shadow: 0 0 0 .2rem rgba(24, 107, 157, .18); }
html:not(.dark-mode) .listing li.droptarget > a, html:not(.dark-mode) .listing tr.droptarget td { background-color: #ffe3e7; }

/* Leesvenster blijft wit */
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #messagebody { background-color: #ffffff; }

/* ---------- Donkere weergave: NEXXT-nacht (09-11-2026) ----------
   Zelfde opbouw als licht: vlakken diep nachtblauw, balken iets lichter, 2px-lijnen,
   zacht helderblauw (#6abfe9) voor selectie/iconen/links. Alleen kleuren, geen indeling. */
html.dark-mode body,
html.dark-mode #layout-sidebar, html.dark-mode #layout-sidebar .scroller,
html.dark-mode #layout-list, html.dark-mode #layout-list .scroller,
html.dark-mode #layout-content, html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #layout-sidebar > .footer, html.dark-mode #layout-list > .footer,
html.dark-mode #layout-content > .footer { background-color: #1b1f27; color: #e3eef3; }
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header { background-color: #272d38; border-bottom: 2px solid #394152; box-shadow: none; }
html.dark-mode #layout-sidebar, html.dark-mode #layout-list { border-right: 2px solid #394152; }
html.dark-mode #layout-sidebar > .footer, html.dark-mode #layout-list > .footer { border-top-color: #394152; }
html.dark-mode .header .header-title, html.dark-mode #layout-sidebar > .header { color: #f1f8fc; }
/* werkbalk */
html.dark-mode #layout-sidebar > .header a.button,
html.dark-mode #layout-list > .header a.button,
html.dark-mode #layout-content > .header a.button,
html.dark-mode #layout-content > .header .toolbar a,
html.dark-mode #layout-list > .header .toolbar a { color: #d1eaf7; }
html.dark-mode .header .toolbar a.disabled { color: #d1eaf7; opacity: .4; }
html.dark-mode .header .toolbar a:not(.disabled):hover,
html.dark-mode .header a.button:not(.disabled):hover { background-color: rgba(106, 191, 233, .16) !important; color: #ffffff !important; border-radius: 4px; }
/* zoekbalk */
html.dark-mode #layout-list .searchbar, html.dark-mode #layout-list .header .searchbar input { background-color: #1b1f27; color: #e3eef3; }
/* mappen */
html.dark-mode #layout-sidebar .listing li { border-bottom-color: #303846; }
html.dark-mode #layout-sidebar .listing li > a { color: #e3eef3; }
html.dark-mode #layout-sidebar .listing li > a:hover { background-color: rgba(106, 191, 233, .08); }
html.dark-mode #layout-sidebar .listing li.selected > a,
html.dark-mode #layout-sidebar .listing li.selected > a:hover { background-color: rgba(106, 191, 233, .16); border-left-color: transparent; color: #e1f1fa; font-weight: 600; position: relative; isolation: isolate; }
html.dark-mode #layout-sidebar .listing li.selected > a::before { color: #ffffff; }
html.dark-mode #layout-sidebar .listing li.selected > a::after {
  content: ""; position: absolute; left: 5.31px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  border-radius: 50%; background: #36a9e1; z-index: -1; }
html.dark-mode .listing li .unreadcount, html.dark-mode #mailboxlist .unreadcount { background-color: #36a9e1; color: #1b1f27; }
html.dark-mode #layout-sidebar .quota-widget .bar { background-color: #313846; }
html.dark-mode #layout-sidebar .quota-widget .bar .value { background-color: #4fb3e5; opacity: 1; }
/* maillijst */
html.dark-mode .messagelist td { border-bottom-color: #303846; }
html.dark-mode .messagelist tr td, html.dark-mode .messagelist tr td a { color: #e3eef3; }
html.dark-mode .messagelist tr:not(.unread) .subject a { color: #c8d6de; }
html.dark-mode .messagelist .fromto, html.dark-mode .messagelist .date, html.dark-mode .messagelist .size,
html.dark-mode .messagelist span.adr, html.dark-mode .messagelist .rcmContactAddress { color: #93a8b2; }
html.dark-mode .messagelist tr:not(.selected):hover td { background-color: rgba(106, 191, 233, .06); }
html.dark-mode .messagelist tr.selected td, html.dark-mode .messagelist tr.selected.focused td, html.dark-mode .listing tr.selected td { background-color: rgba(106, 191, 233, .16); }
html.dark-mode table.messagelist tr.focused > td, html.dark-mode table.listing tr.focused > td { border-left-color: transparent !important; }
html.dark-mode .messagelist .msgicon.status::before { color: #415c69; }
html.dark-mode .messagelist tr.unread .msgicon.status::before { color: #6abfe9; }
html.dark-mode .messagelist .msgicon.status.replied::before, html.dark-mode .messagelist .msgicon.status.forwarded::before { color: #93a8b2; }
html.dark-mode #layout-list .scroller, html.dark-mode #layout-sidebar .scroller { scrollbar-color: #3f485b transparent; }
html.dark-mode .messagelist tr.selected td, html.dark-mode .messagelist tr.selected td a, html.dark-mode .messagelist tr.selected .subject a { color: #f1f8fc !important; }
html.dark-mode .listing li.selected > a, html.dark-mode .listing tr.selected td { color: #e1f1fa; }
/* geopende mail (kop, links, bijlagen) */
html.dark-mode #message-header, html.dark-mode .message-partheaders, html.dark-mode #messagebody > .message-part { background-color: transparent; }
html.dark-mode #message-header .adr a.rcmContactAddress { color: #f1f8fc; font-weight: 500; }
html.dark-mode #message-header .header-links a, html.dark-mode .header-links a,
html.dark-mode .attachmentslist a.filename, html.dark-mode h2.subject a.extwin { color: #a0b7c3; }
html.dark-mode #message-header .header-links a:hover, html.dark-mode .attachmentslist a.filename:hover { color: #6abfe9; }
html.dark-mode #message-header h2.subject { color: #f1f8fc; }
html.dark-mode .attachmentslist { background-color: #272d38; }
html.dark-mode a, html.dark-mode .link { color: #6abfe9; }
html.dark-mode #taskmenu a, html.dark-mode #taskmenu a:focus { color: #ffffff; }
html.dark-mode #taskmenu a.logout { color: #ff6b68; }
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a.selected:hover, html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu .action-buttons a:hover, html.dark-mode #taskmenu .special-buttons a:not(:focus) { background-color: rgba(255, 255, 255, .07) !important; }
html.dark-mode #layout-menu, html.dark-mode #taskmenu .special-buttons { border-right: 0; }
html.dark-mode .listing a, html.dark-mode .messagelist a { color: inherit; }
/* knoppen, velden, menu's */
html.dark-mode .btn-primary, html.dark-mode .btn-primary:focus { background-color: #36a9e1; border-color: #36a9e1; color: #1b1f27; }
html.dark-mode .btn-primary:hover { background-color: #4fb3e5; border-color: #4fb3e5; }
html.dark-mode .form-control, html.dark-mode .custom-select { background-color: #232933; border-color: #394152; color: #e3eef3; }
html.dark-mode .form-control:focus, html.dark-mode .custom-select:focus { border-color: #4fb3e5; box-shadow: 0 0 0 .2rem rgba(79, 179, 229, .25); }
html.dark-mode .custom-control-input:checked ~ .custom-control-label::before { background-color: #36a9e1; border-color: #36a9e1; }
html.dark-mode .popover, html.dark-mode .popover .popover-body, html.dark-mode .ui-dialog, html.dark-mode .ui-dialog-content { background-color: #272d38; color: #e3eef3; border-color: #394152; }
html.dark-mode .popover .menu a:hover, html.dark-mode .popover .menu li a:focus { background-color: rgba(106, 191, 233, .12); }

/* ===== BOVENBALK (gekozen 09-11-2026): nummer 4 "NEXXT-tint" ===== */
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-content > .header { background-color: #e9f3f8; border-bottom: 2px solid #d8e6ee; box-shadow: none; }
html:not(.dark-mode) #layout-sidebar > .header a.button,
html:not(.dark-mode) #layout-list > .header a.button,
html:not(.dark-mode) #layout-content > .header a.button,
html:not(.dark-mode) #layout-content > .header .toolbar a,
html:not(.dark-mode) #layout-list > .header .toolbar a { color: #176b9e; }
html:not(.dark-mode) #layout-content > .header .toolbar a.disabled,
html:not(.dark-mode) #layout-list > .header .toolbar a.disabled { color: #176b9e; opacity: .45; }
html:not(.dark-mode) #layout-sidebar > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header .toolbar a:not(.disabled):hover { background-color: #ddebf3; color: #176b9e; }
/* verticale scheidingslijnen tussen de kolommen: 2px, zelfde kleur als de lijn onder de bovenbalk (kolombreedte blijft gelijk, border-box) */
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list { border-right: 2px solid #d8e6ee; }
/* ===== EINDE BOVENBALK-PROEF ===== */

/* werkbalk: alle actieve knoppen krijgen een zacht NEXXT-hovervlak (Ayham: "dit moet allemaal hover hebben") */
html:not(.dark-mode) .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) .header .toolbar a.button:not(.disabled):hover,
html:not(.dark-mode) .header a.button:not(.disabled):hover { background-color: #ddebf3 !important; color: #176b9e !important; border-radius: 4px; }
html:not(.dark-mode) .header .toolbar a.disabled:hover,
html:not(.dark-mode) .header .toolbar .dropbutton:hover { background-color: transparent !important; }
/* uitklappijltje (naast Allen beantwoorden / Doorsturen) mag wel een hover-vlak hebben */
html:not(.dark-mode) .header .toolbar a.dropdown:not(.disabled):hover,
html:not(.dark-mode) .header a.dropdown:not(.disabled):hover { background-color: #ddebf3 !important; color: #176b9e !important; border-radius: 4px; }
/* Opstellen: label ook rood, zelfde kleur als het icoon (licht en donker) */
html #taskmenu a.compose, html #taskmenu a.compose:focus, html #taskmenu a.compose:hover,
html #taskmenu .action-buttons a.compose { color: #ff4d63 !important; }
/* zwevend hover-menu in de maillijst (grootte, vlag, prullenbak) weg (Ayham: irritant) */
.listing-hover-menu, #messagelist .listing-hover-menu, .messagelist + .listing-hover-menu { display: none !important; }

/* ===== Inlogscherm ontwerp 4, variant 3: zonder kaart (10-11-2026) ===== */
body.task-login #layout {
  display: flex; align-items: center; justify-content: center; padding: 24px 16px 70px;
  background:
    radial-gradient(45% 55% at 25% 30%, rgba(56, 169, 225,.55), transparent 70%),
    radial-gradient(40% 50% at 78% 75%, rgba(255,77,99,.30), transparent 70%),
    #15181e;
}
body.task-login #layout-content {
  position: relative; flex: 0 0 auto; width: 428px; max-width: 100%; height: auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 44px 44px 34px; border-radius: 16px;
  background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; overflow: visible;
}
body.task-login #logo { position: static; width: 150px; height: auto; margin: 0; }
body.task-login #login-form { width: 340px; max-width: 100%; margin: 0; top: 0; position: static; }
body.task-login #login-form .form-group { margin-bottom: 14px; }
body.task-login #login-form .input-group-text {
  background: transparent; color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.18);
}
body.task-login #login-form .form-control {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18);
}
body.task-login #login-form .form-control::placeholder { color: rgba(255,255,255,.55); }
body.task-login #login-form .form-control:focus {
  border-color: #6abfe9; box-shadow: 0 0 0 3px rgba(106, 191, 233,.22); background: rgba(255,255,255,.11);
}
body.task-login #login-form .form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #303846 inset; caret-color: #fff;
}
body.task-login #rcmloginsubmit {
  background: #36a9e1; border-color: #36a9e1; color: #1b1f27;
  border-radius: 6px; height: 46px; font-weight: 700; letter-spacing: .06em;
}
body.task-login #rcmloginsubmit:hover { background: #36a9e1; border-color: #36a9e1; }
body.task-login #login-footer { display: none; }
@media (max-width: 480px) {
  body.task-login #layout-content { padding: 36px 22px 28px; }
}
body.task-login #login-form .form-control:focus,
body.task-login #login-form .form-control:-webkit-autofill,
body.task-login #login-form .form-control:autofill {
  border-color: rgba(255,255,255,.18) !important; outline: 0 !important;
}
body.task-login #login-form .form-control:focus { box-shadow: none !important; }
body.task-login #login-form .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #2c323f inset !important; }
/* autofill: Chrome kleurt de achtergrond onder de doorschijnende rand licht; daarom rand niet laten doorschijnen */
body.task-login #login-form .form-control { background-clip: padding-box; }
body.task-login #login-form .form-control:-webkit-autofill { background-clip: padding-box !important; border-color: #3f485b !important; }
/* autofill-voorbeeld van Chrome gebruikt vaste kleine letter (13,33px) tot je klikt.
   Truc: veld op 13,33px en zoom 1.3125 -> voorbeeld en echte tekst allebei 17,5px op scherm. */
body.task-login #rcmloginuser, body.task-login #rcmloginpwd {
  zoom: 1.2; font-size: 14.583px; line-height: 21.875px; height: 35.21px;
  padding: 5.833px 11.667px; border-width: .833px; border-radius: 0 3.5px 3.5px 0;
}

/* ===== Twist 10-11-2026 (keuze Ayham: 9 + mappen van 8) ===== */
/* 1. Site-letter van nexxtfacility.nl */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');}
/* UI-letter teruggezet naar Roboto (Ayham 10-11: Jakarta oogt rommelig) */

/* 2. Knoppen: icoon naast de tekst (alleen brede schermen) */
html.layout-large .header .menu.toolbar{display:flex;align-items:center;gap:2px}
html.layout-large .header .menu.toolbar > li,html.layout-large .header .dropbutton{display:inline-flex;align-items:center}
html.layout-large .header .toolbar a,html.layout-large .header a.toolbar-button{flex-direction:row;align-items:center;height:36px;padding:0 9px;gap:7px;border-radius:6px;min-width:0;width:auto !important;max-width:none !important}
html.layout-large .header .menu.toolbar li:not(.hidden) > a:not(.hidden),html.layout-large .header .dropbutton > a,html.layout-large .header a.toolbar-button{display:inline-flex}
html.layout-large .header a.toolbar-button{align-self:center}
html.layout-large .header .toolbar a::before,html.layout-large .header a.toolbar-button::before{width:17px;height:17px;margin:0;font-size:17px;line-height:17px;flex:none}
html.layout-large .header .toolbar a .inner,html.layout-large .header a.toolbar-button .inner{font-size:13.5px;font-weight:500;white-space:nowrap;max-width:none}
html.layout-large .header .dropbutton > a.dropdown{padding:0 6px 0 0;margin-left:-6px}
html.layout-large .header .dropbutton > a.dropdown::before{width:10px}

/* 3. Mappen in groepen + teller als pil */
#mailboxlist > li.mailbox.inbox::before,#mailboxlist > li.mailbox.junk::before{content:"Mappen";display:block;padding:16px 16px 6px;font-size:10.5px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8a93ab;pointer-events:none}
#mailboxlist > li.mailbox.junk::before{content:"Overig";padding-top:18px}
#mailboxlist .unreadcount{display:inline-block !important;background:#d7263d !important;color:#fff !important;border-radius:12px;padding:0 7.25px 0 7.75px !important;min-width:23px;height:23px;font-size:12.5px;line-height:23px !important;font-weight:700;text-align:center;box-sizing:border-box;overflow:hidden;vertical-align:middle}
html.dark-mode #mailboxlist .unreadcount{background:#ff4d63 !important}
html.dark-mode #mailboxlist > li.mailbox.inbox::before,html.dark-mode #mailboxlist > li.mailbox.junk::before{color:#94a9b3}

/* 4. Initialen-bolletjes in de maillijst (nexxt_ui.js) */
#messagelist tr.message td.subject{position:relative;padding-left:52px !important}
#messagelist .nx-av{position:absolute;left:12px;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.02em;pointer-events:none}

/* initialen ook bij de afzender in een geopend bericht */
#message-header .nx-av-lg{width:56px;height:56px;border-radius:50%;margin:0 14px 0 0;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:19px;letter-spacing:.02em}
#message-header img.contactphoto.nx-hidden{display:none}

/* knoppenbalk strak: alle iconen 17px, pijltjes los en klein, gelijke afstanden */
html.layout-large .header .menu.toolbar{gap:4px}
html.layout-large .header .toolbar a:not(.dropdown)::before,html.layout-large .header a.toolbar-button::before{width:17px !important;height:17px !important;min-width:17px;font-size:17px !important;line-height:17px !important;margin:0 !important;-webkit-mask-size:17px 17px !important;mask-size:17px 17px !important;-webkit-mask-position:center !important;mask-position:center !important}
html.layout-large .header .toolbar a:not(.dropdown){padding:0 10px;gap:7px}
html.layout-large .header .dropbutton > a:not(.dropdown){padding-right:4px}
html.layout-large .header .dropbutton > a.dropdown{margin-left:0 !important;padding:0 8px 0 2px !important;height:36px;width:auto !important}
html.layout-large .header .dropbutton > a.dropdown::before{width:10px !important;height:10px !important;min-width:10px;font-size:10px !important;line-height:10px !important;margin:0 !important;-webkit-mask-size:10px 10px !important;mask-size:10px 10px !important;opacity:.7}
/* teller altijd in het midden van zijn eigen map, ook bij mappen met een kopje erboven */
#mailboxlist li.mailbox > a{position:relative}
#mailboxlist li.mailbox > a .unreadcount{top:50% !important;margin-top:-11.5px !important;bottom:auto !important}
/* Details / Headers / Platte tekst / Bijlagen: icoon en tekst op één middenlijn */
#message-header .header-links a{display:inline-flex !important;align-items:center;gap:5px;line-height:18px;vertical-align:middle}
#message-header .header-links a::before{float:none !important;width:15px !important;height:15px !important;min-width:15px;margin:0 !important;line-height:15px !important;font-size:15px !important;-webkit-mask-size:15px 15px !important;mask-size:15px 15px !important;-webkit-mask-position:center !important;mask-position:center !important}
/* initialen exact in het midden (pixelgemeten 10-11): lijst 35px + 1px boven, geen letterafstand; groot 56px regelhoogte 1 */
#messagelist .nx-av{width:35px;height:35px;margin-top:-17.5px;line-height:1;letter-spacing:0;padding-top:1px;box-sizing:border-box}
#message-header .nx-av-lg{line-height:1;letter-spacing:0}
/* ===== Accountkop mappenkolom (10-11): merkbolletje + naam + mailadres, links uitgelijnd ===== */
#layout-sidebar > .header{justify-content:flex-start !important;padding:0 10px 0 16px !important;gap:8px}
#layout-sidebar > .header .header-title.username{display:flex !important;align-items:center;gap:11px;flex:1;min-width:0;margin:0 !important;padding:0 !important;text-align:left !important;font-size:inherit}
#layout-sidebar .nx-acc-av{width:34px;height:34px;border-radius:10px;flex:none;background:#1b1f27 url(/webmail/static.php/nexxt-x-wit.png) center/18px 18px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#layout-sidebar .nx-acc-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
#layout-sidebar .nx-acc-tx b{font-size:14px;font-weight:700;color:#1b1f27;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#layout-sidebar .nx-acc-tx small{font-size:12px;color:#5c6478;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
#layout-sidebar > .header a.sidebar-menu{width:32px !important;height:32px !important;border-radius:8px;display:inline-flex !important;align-items:center;justify-content:center;margin:0 !important;flex:none;transition:background-color .12s ease}
#layout-sidebar > .header a.sidebar-menu:hover{background:#ddebf3}
html.dark-mode #layout-sidebar .nx-acc-tx b{color:#f1f8fc}
html.dark-mode #layout-sidebar .nx-acc-tx small{color:#adbdc5}
html.dark-mode #layout-sidebar .nx-acc-av{background-color:#414a5d}
html.dark-mode #layout-sidebar > .header a.sidebar-menu:hover{background:rgba(255,255,255,.08)}
/* accountkop vrij van de bocht linksboven */
#layout-sidebar > .header{padding-left:30px !important}
/* accountkop variant 1: rond merkbolletje */
#layout-sidebar .nx-acc-av{border-radius:50%}
/* drie puntjes precies op de middenlijn van het bolletje */
#layout-sidebar > .header a.sidebar-menu{align-self:center}
#layout-sidebar > .header a.sidebar-menu::before{height:32px !important;line-height:32px !important;margin:0 !important}
/* rustiger (10-11): geen tweede X-bolletje naast de zijbalk, alleen naam + mailadres */
#layout-sidebar .nx-acc-av{display:none !important}
#layout-sidebar > .header{padding-left:34px !important}
#layout-sidebar .nx-acc-tx b{font-size:14.5px}
/* accountkop gecentreerd: de bocht linksboven raakt de tekst niet meer, puntjes blijven rechts */
#layout-sidebar > .header{padding:0 10px 0 10px !important;position:relative}
#layout-sidebar > .header .header-title.username{justify-content:center;text-align:center !important;padding:0 44px !important}
#layout-sidebar .nx-acc-tx{align-items:center}
#layout-sidebar > .header a.sidebar-menu{position:absolute !important;right:10px;top:50%;margin-top:-16px !important}
/* ===== Accountkop versie 9 (10-11): op de lijn van de mapnamen, label Hoofdkanaal ===== */
#layout-sidebar > .header{padding:0 10px 0 var(--nx-acc-x, 52px) !important}
#layout-sidebar > .header .header-title.username{justify-content:flex-start !important;text-align:left !important;padding:0 44px 0 0 !important}
#layout-sidebar .nx-acc-tx{align-items:flex-start !important}
#layout-sidebar .nx-acc-tx b{display:flex;align-items:center;gap:7px;font-size:14.5px}
#layout-sidebar .nx-acc-lbl{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:99px;background:#e3f0f7;color:#176b9e;font-size:11px;font-weight:600;letter-spacing:.01em}
#layout-sidebar .nx-acc-chev{display:inline-flex;width:18px;height:18px;border-radius:5px;align-items:center;justify-content:center;color:#5c6478;cursor:pointer}
#layout-sidebar .nx-acc-chev:hover{background:#ddebf3;color:#176b9e}
#layout-sidebar .nx-acc-chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html.dark-mode #layout-sidebar .nx-acc-lbl{background:#323948;color:#cfe9f7}
#layout-sidebar > .header{--nx-acc-x:37px}
/* kop: alleen het mailadres + label; mapopties-knop met tandwiel i.p.v. puntjes (geen account-wissel-suggestie) */
#layout-sidebar .nx-acc-tx b{font-size:14px;font-weight:600}
#layout-sidebar > .header a.sidebar-menu::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  -webkit-mask-size:17px 17px !important;mask-size:17px 17px !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important;-webkit-mask-position:center !important;mask-position:center !important;
  background-color:#5c6478 !important;width:32px !important;height:32px !important}
#layout-sidebar > .header a.sidebar-menu:hover::before{background-color:#36a9e1 !important}

/* linkerbalk: alleen iconen, groter; tekst blijft voor schermlezers + tooltip */
html.layout-large #layout-menu #taskmenu a, html.layout-large #layout-menu .special-buttons a{height:52px;padding:0 !important;display:flex;align-items:center;justify-content:center}
html.layout-large #layout-menu #taskmenu a::before, html.layout-large #layout-menu .special-buttons a::before{-webkit-mask-size:23px 23px !important;mask-size:23px 23px !important;width:23px !important;height:23px !important;margin:0 !important;flex:none}
html.layout-large #layout-menu a .inner{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.layout-large #layout-menu #taskmenu a.compose::before{background-color:#fff !important}
html.layout-large #layout-menu #taskmenu a.selected::before{background-color:#ff4d63 !important}
html.layout-large #layout-menu #taskmenu a.selected{background:transparent !important}
html.layout-large #layout-menu #taskmenu{margin-top:20px}
html.layout-large #layout-menu #taskmenu a.compose::before{color:#fff !important}
html.layout-large #layout-menu #taskmenu a.selected::before{color:#ff4d63 !important}

/* kop van de linkerkolom op Contactpersonen/Instellingen gelijk aan Postvak: links op x=115, zelfde gewicht */
html.layout-large body:not(.task-mail) #layout-sidebar > .header .header-title{margin:0 !important;text-align:left;font-weight:600;font-size:14px;color:#1b1f27;padding-right:44px}
/* sectielabel boven de adresboeken, zoals "Mappen" bij de mail */
html.layout-large #directorylist::before{content:"Adresboeken";display:block;padding:16px 16px 6px;font-size:10.5px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8a93ab;pointer-events:none}

/* keuzelijsten (pretty-select) in NEXXT-stijl: ronde hoeken, zachte schaduw, blauw gekozen item */
html:not(.dark-mode) .popover.select-menu{border:1px solid #e2eaef !important;border-radius:10px !important;box-shadow:0 8px 24px rgba(26, 30, 38,.12) !important;overflow:hidden;padding:0}
html:not(.dark-mode) .popover.select-menu .popover-body{padding:4px !important}
html:not(.dark-mode) .popover.select-menu .arrow{display:none !important}
html:not(.dark-mode) .popover.select-menu ul.listing li{border:0 !important}
html:not(.dark-mode) .popover.select-menu ul.listing li a{display:flex !important;align-items:center;height:34px;line-height:34px;padding:0 12px 0 32px !important;margin:1px 0;border:0 !important;border-radius:7px;font-size:13.5px;color:#2c363a !important;position:relative}
html:not(.dark-mode) .popover.select-menu ul.listing li a:hover{background:#f0f6f9 !important;color:#176b9e !important}
html:not(.dark-mode) .popover.select-menu ul.listing li a.selected{background:#e9f3f8 !important;color:#176b9e !important;font-weight:500;box-shadow:none !important;border-left:0 !important}
html:not(.dark-mode) .popover.select-menu ul.listing li a::before{display:none !important}
html:not(.dark-mode) .popover.select-menu ul.listing li a.selected::after{content:"";position:static !important;order:-1;flex:none;display:block !important;float:none !important;width:14px !important;height:14px !important;margin:0 8px 0 -22px !important;background:#36a9e1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px 14px no-repeat}

/* label "Hoofdkanaal": sober wit labeltje met dunne rand (geen pil), scherp tegen de lichtblauwe kop */
#layout-sidebar > .header .nx-acc-lbl{background:#fff !important;border:1px solid #c9dbe4 !important;border-radius:5px !important;height:20px !important;line-height:18px !important;padding:0 7px !important;font-size:11px !important;font-weight:600 !important;letter-spacing:.02em !important;color:#176b9e !important;box-sizing:border-box;display:inline-flex !important;align-items:center}

/* teller ongelezen bij mappen: NEXXT-blauw, gelijk aan het ongelezen-bolletje */
#mailboxlist .unreadcount{background:#36a9e1 !important}