/* ===== Berichtkop versie F (10-11-2026): datum + links rechts, bijlagenstrook met totaal ===== */
#message-header.nx-f{padding:16px 0 12px;margin:0}
#message-header.nx-f h2.subject{margin:0 0 12px;padding:0;font-size:20px;line-height:1.3;color:#1b1f27;font-weight:500}
#message-header.nx-f .header{display:flex;align-items:center;gap:14px;padding:0;margin:0}
#message-header.nx-f .nx-av-lg{margin:0}
#message-header.nx-f .header-content{flex:1;min-width:0}
#message-header.nx-f .header-summary{font-size:14px;color:#2c363a;line-height:20px}
#message-header.nx-f .header-summary a.rcmContactAddress{font-weight:600;color:#1b1f27}
#message-header.nx-f .nx-co{color:#5c6478}
#message-header.nx-f .nx-aan{font-size:12.5px;color:#5c6478;line-height:18px;margin-top:2px}
/* rechterkolom: datum boven, links eronder */
#message-header.nx-f .nx-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;margin-left:auto;text-align:right}
#message-header.nx-f .nx-when{font-size:13.5px;line-height:18px;color:#1b1f27;white-space:nowrap}
#message-header.nx-f .nx-when small{font-size:13px;color:#8a93ab;margin-left:6px}
#message-header.nx-f .nx-right .header-links{margin:0;display:flex;gap:14px;justify-content:flex-end}
/* bijlagenstrook */
#message-header.nx-f .nx-strook{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:8px 8px 8px 12px;border:1px solid #e5ecf0;border-radius:10px;background:#fff}
#message-header.nx-f .nx-strook .nx-tot{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5c6478;padding-right:6px;white-space:nowrap}
#message-header.nx-f .nx-strook .nx-tot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#message-header.nx-f .nx-bijlagen{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;border:0;background:none;flex:1;min-width:0}
#message-header.nx-f .nx-bijlagen li{display:inline-flex !important;align-items:center;height:32px;padding:0 4px 0 12px;border-radius:99px;border:1px solid #d8e6ee;background:#fff;margin:0 !important;float:none !important;width:auto !important;max-width:none !important}
#message-header.nx-f .nx-bijlagen li:hover{border-color:#c0d7e3;background:#fcfdfe}
#message-header.nx-f .nx-bijlagen li a.filename{display:inline-flex;align-items:center;gap:6px;padding:0 !important;font-size:12.5px;color:#1b1f27;text-decoration:none;height:30px;line-height:30px}
#message-header.nx-f .nx-bijlagen li a.filename .attachment-name{font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#message-header.nx-f .nx-bijlagen li a.filename .attachment-size{color:#8a93ab}
#message-header.nx-f .nx-bijlagen li a.dropdown{position:static !important;height:30px;width:24px !important;display:inline-flex;align-items:center;justify-content:center;margin-left:2px}
#message-header.nx-f .nx-strook a.zipdownload{display:inline-flex !important;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;background:#f0f6fa;color:#176b9e !important;font-size:12.5px;font-weight:500;text-decoration:none;margin-left:auto;white-space:nowrap}
#message-header.nx-f .nx-strook a.zipdownload:hover{background:#ddebf3}
/* donker */
html.dark-mode #message-header.nx-f h2.subject,html.dark-mode #message-header.nx-f .header-summary a.rcmContactAddress,html.dark-mode #message-header.nx-f .nx-when{color:#f1f8fc}
html.dark-mode #message-header.nx-f .nx-strook,html.dark-mode #message-header.nx-f .nx-bijlagen li{background:#232933;border-color:#3a4354}
html.dark-mode #message-header.nx-f .nx-bijlagen li a.filename{color:#f1f8fc}
html.dark-mode #message-header.nx-f .nx-strook a.zipdownload{background:#323948;color:#cfe9f7 !important}
/* bijlagenstrook lichte tint, pillen wit erop */
#message-header.nx-f .nx-strook{background:#f5f9fc;border-color:#e4ecf1}
#message-header.nx-f .nx-strook a.zipdownload{background:#e6f0f6}
#message-header.nx-f .nx-strook a.zipdownload:hover{background:#d9e9f1}
html.dark-mode #message-header.nx-f .nx-strook{background:#272d38;border-color:#3a4354}
/* afzender duidelijker: naam groter, bedrijf als label, mailadres + ontvanger op regel 2 */
#message-header.nx-f .header-summary a.rcmContactAddress{font-size:15.5px;font-weight:600;color:#1b1f27}
#message-header.nx-f .nx-co{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:8px;border-radius:99px;background:#f0f6fa;color:#176b9e;font-size:12px;font-weight:500;vertical-align:1px}
#message-header.nx-f .nx-aan{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:#5c6478;margin-top:3px}
#message-header.nx-f .nx-aan b{font-weight:500;color:#8a93ab;margin-right:4px}
html.dark-mode #message-header.nx-f .nx-co{background:#323948;color:#cfe9f7}
/* rechterkolom overzichtelijker: datum en tijd met icoontje, links als nette knopjes */
#message-header.nx-f .nx-when{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#1b1f27;font-weight:500}
#message-header.nx-f .nx-when .nx-d,#message-header.nx-f .nx-when .nx-t{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#message-header.nx-f .nx-when .nx-t{color:#5c6478;font-weight:400}
#message-header.nx-f .nx-when svg{width:15px;height:15px;fill:none;stroke:#36a9e1;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#message-header.nx-f .nx-when .nx-t svg{stroke:#8a93ab}
#message-header.nx-f .nx-right{gap:8px}
#message-header.nx-f .nx-right .header-links{gap:2px;margin-right:-8px}
#message-header.nx-f .nx-right .header-links a{height:28px;padding:0 8px !important;border-radius:8px;color:#176b9e !important;font-size:12.5px;text-decoration:none;transition:background-color .12s ease}
#message-header.nx-f .nx-right .header-links a::before{background-color:#36a9e1 !important}
#message-header.nx-f .nx-right .header-links a:hover{background:#f0f6fa}
html.dark-mode #message-header.nx-f .nx-when{color:#f1f8fc}
html.dark-mode #message-header.nx-f .nx-right .header-links a{color:#cfe9f7 !important}
html.dark-mode #message-header.nx-f .nx-right .header-links a:hover{background:#323948}
/* debat-uitkomst 10-11: alles bij de afzender. Regel 1 naam + bedrijf, regel 2 mailadres · aan · datum/tijd, regel 3 de knopjes */
#message-header.nx-f .header{align-items:center}
#message-header.nx-f .nx-aan{align-items:center;gap:4px 0}
#message-header.nx-f .nx-aan > span + span::before,#message-header.nx-f .nx-aan > .nx-when::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#bbc8cf;margin:0 10px;vertical-align:middle}
#message-header.nx-f .nx-aan .nx-when{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:400;color:#5c6478}
#message-header.nx-f .nx-aan .nx-when .nx-d{color:#2c363a}
#message-header.nx-f .nx-aan .nx-when svg{width:14px;height:14px}
#message-header.nx-f .header-content > .header-links{display:flex;gap:2px;margin:4px 0 0 -8px}
#message-header.nx-f .header-content > .header-links a{height:28px;padding:0 8px !important;border-radius:8px;color:#176b9e !important;font-size:12.5px;text-decoration:none;transition:background-color .12s ease}
#message-header.nx-f .header-content > .header-links a::before{background-color:#36a9e1 !important}
#message-header.nx-f .header-content > .header-links a:hover{background:#f0f6fa}
html.dark-mode #message-header.nx-f .header-content > .header-links a{color:#cfe9f7 !important}
html.dark-mode #message-header.nx-f .nx-aan .nx-when .nx-d{color:#f1f8fc}
/* veel bijlagen (meer dan 3): kopregel met totaal + Alles downloaden, bestanden eronder in een strak raster */
#message-header.nx-f .nx-strook.nx-veel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 8px;padding:10px 10px 10px 14px}
#message-header.nx-f .nx-strook.nx-veel .nx-tot{grid-column:1;grid-row:1;font-weight:500;color:#2c363a}
#message-header.nx-f .nx-strook.nx-veel a.zipdownload{grid-column:2;grid-row:1;margin-left:0}
#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;padding-top:10px;border-top:1px solid #e4ecf1}
#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li{width:100% !important;box-sizing:border-box;justify-content:space-between;border-radius:8px;padding:0 4px 0 10px}
#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li a.filename{flex:1;min-width:0}
#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li a.filename .attachment-name{flex:1;min-width:0;max-width:none}
#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li a.filename .attachment-size{flex:none;margin-left:auto;padding-left:6px}
html.dark-mode #message-header.nx-f .nx-strook.nx-veel .nx-bijlagen{border-top-color:#3a4354}
/* kalendericoon grijs, gelijk aan het klokje */
#message-header.nx-f .nx-when .nx-d svg{stroke:#8a93ab}
/* Details / Headers / Platte tekst als één knoppenblok (segmented control) */
#message-header.nx-f .header-content > .header-links{display:inline-flex !important;gap:0;margin:8px 0 0 0;padding:0;border:1px solid #e2eaef;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 1px 1px rgba(26, 30, 38,.03)}
#message-header.nx-f .header-content > .header-links a{height:28px;padding:0 11px !important;border-radius:0 !important;color:#4f626b !important;font-size:12.5px;font-weight:500;gap:6px}
#message-header.nx-f .header-content > .header-links a + a{border-left:1px solid #e8eff3}
#message-header.nx-f .header-content > .header-links a::before{background-color:#8a93ab !important;width:14px !important;height:14px !important;-webkit-mask-size:14px 14px !important;mask-size:14px 14px !important}
#message-header.nx-f .header-content > .header-links a:hover{background:#f5f9fc;color:#176b9e !important}
#message-header.nx-f .header-content > .header-links a:hover::before{background-color:#36a9e1 !important}
html.dark-mode #message-header.nx-f .header-content > .header-links{background:#232933;border-color:#3a4354}
html.dark-mode #message-header.nx-f .header-content > .header-links a{color:#cfe9f7 !important}
html.dark-mode #message-header.nx-f .header-content > .header-links a + a{border-left-color:#3a4354}
html.dark-mode #message-header.nx-f .header-content > .header-links a:hover{background:#323948}
/* ontvangers: labels Aan / Cc / Bcc, inkorten met +N */
#message-header.nx-f .nx-aan .nx-grp{display:inline-flex;align-items:center;gap:0;min-width:0}
#message-header.nx-f .nx-aan .nx-grp b{font-weight:500;color:#8a93ab;margin-right:5px}
#message-header.nx-f .nx-aan .nx-names{color:#2c363a}
#message-header.nx-f .nx-ccl > .nx-grp + .nx-grp::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#bbc8cf;margin:0 10px}
#message-header.nx-f .nx-more{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;border:0;border-radius:99px;background:#f0f6fa;color:#176b9e;font:600 11.5px/20px inherit;cursor:pointer}
#message-header.nx-f .nx-more:hover{background:#ddebf3}
#message-header.nx-f .nx-ccl{margin-top:1px}
html.dark-mode #message-header.nx-f .nx-aan .nx-names{color:#e4f2fa}
html.dark-mode #message-header.nx-f .nx-more{background:#323948;color:#cfe9f7}
/* knoppenblok: elk vak volledig gevuld bij aanwijzen */
#message-header.nx-f .header-content > .header-links{align-items:stretch;height:30px;box-sizing:border-box}
#message-header.nx-f .header-content > .header-links a{display:inline-flex !important;align-items:center;height:auto !important;margin:0 !important;line-height:1 !important;box-sizing:border-box}
/* ===== Strak lijstje (10-11): Van / Aan / Cc / Bcc / Datum als label + waarde ===== */
#message-header.nx-f .header{align-items:flex-start}
#message-header.nx-f .nx-av-lg{margin-top:2px}
#message-header.nx-f .nx-meta{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;margin-top:6px;font-size:13px;line-height:19px}
#message-header.nx-f .nx-meta .nx-lbl{color:#8a93ab;font-weight:500}
#message-header.nx-f .nx-meta .nx-val{color:#2c363a;min-width:0}
#message-header.nx-f .nx-meta .nx-grp{display:inline}
#message-header.nx-f .nx-meta .nx-when{display:inline-flex;gap:10px;font-size:13px;font-weight:400;color:#2c363a}
#message-header.nx-f .nx-meta .nx-when svg{display:none}
#message-header.nx-f .nx-meta .nx-when .nx-t{color:#5c6478}
#message-header.nx-f .nx-meta .nx-when .nx-t::before{content:"·";margin-right:10px;color:#bbc8cf}
#message-header.nx-f .header-content > .header-links{margin-top:10px}
html.dark-mode #message-header.nx-f .nx-meta .nx-val,html.dark-mode #message-header.nx-f .nx-meta .nx-when{color:#e4f2fa}
#message-header.nx-f .nx-meta .nx-when{gap:0}
#message-header.nx-f .nx-meta .nx-when .nx-t{color:#2c363a}
#message-header.nx-f .nx-meta .nx-when .nx-t::before{content:",";margin:0 5px 0 0;color:#2c363a}
#message-header.nx-f .nx-meta .nx-when .nx-d,#message-header.nx-f .nx-meta .nx-when .nx-t{gap:0}
#message-header.nx-f .nx-meta .nx-when .nx-t::before{margin:0 4px 0 0}
/* bedrijf: geen blauwe pil meer, maar rustig met gebouw-icoontje in grijs */
#message-header.nx-f .nx-co{background:none !important;padding:0 !important;height:auto;margin-left:12px;color:#5c6478 !important;font-size:13px;font-weight:500;gap:5px;display:inline-flex;align-items:center;vertical-align:0}
#message-header.nx-f .nx-co::before{content:"";width:14px;height:14px;flex:none;background-color:#8a93ab;
 -webkit-mask: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='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E") center/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='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E") center/14px no-repeat}
html.dark-mode #message-header.nx-f .nx-co{color:#adbdc5 !important}
/* tekst in het knoppenblok 1px omlaag zodat hij optisch gelijk staat met de icoontjes */
#message-header.nx-f .header-content > .header-links a{padding-top:2px !important}
#message-header.nx-f .header-content > .header-links a::before{margin-top:-2px !important}
/* Details: geen los Roundcube-tabelletje meer; de kop blijft staan en het lijstje toont volledige adressen */
#message-header.nx-f .header-content.details-view .header-summary{display:block !important}
#message-header.nx-f .header-content .header-headers{display:none !important}
#message-header.nx-f .nx-full,#message-header.nx-f .nx-meta .nx-det{display:none}
#message-header.nx-f .details-view .nx-full{display:inline}
#message-header.nx-f .details-view .nx-names,#message-header.nx-f .details-view .nx-more{display:none}
#message-header.nx-f .details-view .nx-meta .nx-det{display:block}
#message-header.nx-f .details-view .header-links a.headers-summary{background:#f0f6fa;color:#176b9e !important}
#message-header.nx-f .details-view .header-links a.headers-summary::before{background-color:#36a9e1 !important}
/* naam en bedrijf op één middenlijn */
#message-header.nx-f .header-summary > span{display:inline-flex;align-items:center;flex-wrap:wrap;row-gap:2px}
#message-header.nx-f .header-summary > span > .adr{display:inline-flex;align-items:center}