/* Lijstschermen: donkere werkbalk boven het grid (los bestand, na app.css geladen in App.razor). */

/* Werkbalk boven een lijst (aantal + knoppen): donker, net als de sectiekoppen van de kaarten */
html body .datalist--joined > .filterbar {
    background: var(--slate-700) !important;
    border-color: var(--slate-700) !important;
    color: #fff;
}
html body .datalist--joined > .filterbar .datalist__count,
html body .datalist--joined > .filterbar .muted { color: rgba(255, 255, 255, .85) !important; }
html body .datalist--joined > .filterbar .datalist__title h3 { color: #fff !important; }
html body .datalist--joined > .filterbar .count-pill { background: rgba(255, 255, 255, .16); color: #fff; }
html body .datalist--joined > .filterbar .filterbar__item label,
html body .datalist--joined > .filterbar .dxbl-checkbox,
html body .datalist--joined > .filterbar .dxbl-checkbox label,
html body .datalist--joined > .filterbar > label { color: rgba(255, 255, 255, .85); }
/* knoppen wit op de donkere balk (zoals in de kaartkoppen) */
html body .datalist--joined > .filterbar .dxbl-btn.dxbl-btn-outline-secondary,
html body .datalist--joined > .filterbar .dxbl-btn-outline-secondary { background: #fff; }
html body .datalist--joined > .filterbar .dxbl-btn:disabled,
html body .datalist--joined > .filterbar .dxbl-btn.dxbl-disabled { background: rgba(255, 255, 255, .55); }
html body .datalist--joined > .filterbar .dxbl-btn-outline-danger { background: #fff; }
/* lager (10px minder) en het aantal als sectiekop: rood streepje, vet, hoofdletters */
html body .datalist--joined > .filterbar { padding-top: 9px; padding-bottom: 9px; align-items: center; }
html body .datalist--joined > .filterbar.filterbar--compact { padding-top: 5px; padding-bottom: 5px; }
html body .datalist--joined > .filterbar .datalist__count {
    position: relative; padding-left: 11px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #fff !important;
}
html body .datalist--joined > .filterbar .datalist__count::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 3px; height: 14px; margin-top: -7px; border-radius: 2px;
    background: var(--brand);
}

/* 10px wit tussen de donkere balk en de kolomkoppen */
html body .datalist--joined > .gridcard { border-top: 10px solid var(--white) !important; }

/* Planning: regel zonder aanvangstijd in AFAS, getoond vanaf 08:30 (Planning.razor) */
.wcal-item--notime { outline: 1px dashed rgba(67, 79, 89, .45); outline-offset: -1px; }
.wcal-item--notime .wcal-item__time { font-style: italic; }
/* Planning: afgerond = uren ingeleverd (Werkzaamheden ingevuld / geaccordeerd): groen, alleen ter info */
.wcal-item--worked { background: #e6f4ea !important; background-image: none !important; color: #1e5631; cursor: default; }
.wcal-item--worked .wcal-item__title { color: #1e5631; font-weight: 600; }
.wcal-item--worked .wcal-item__sub { color: #2f6b42; }
.wcal-item--worked .wcal-item__time { color: #1e7a3c !important; }
.wcal-item--worked .wcal-item__title::before { content: "\2713  "; font-weight: 700; }
.wcal-legend__item--worked { --wcal-accent: #2e9e55; }

/* Planning: eerste regel = opdrachtgever met de tijden erachter */
.wcal-item__head .wcal-item__title { flex: 0 1 auto; min-width: 0; }
.wcal-item__head .wcal-item__time { flex: 0 0 auto; margin-left: 4px; white-space: nowrap; }
.wcal-item__head .wcal-badge { margin-left: auto; }

/* Weekuren: regelkleur zoals de planning (HoursPerWeek.razor) */
.dxbl-grid tr.hrow-done:not(.dxbl-grid-focused-row):not(.dxbl-grid-selected-row) > td { background: #e6f4ea !important; color: #1e5631; }
.dxbl-grid tr.hrow-done > td:first-child { box-shadow: inset 3px 0 #2e9e55; }
.dxbl-grid tr.hrow-open > td:first-child { box-shadow: inset 3px 0 var(--hrow-accent, #657782); }
.dxbl-grid tr.hrow-open--us { --hrow-accent: #1f6fb2; }
.dxbl-grid tr.hrow-open--s { --hrow-accent: #1f8a4c; }
.dxbl-grid tr.hrow-open--fp { --hrow-accent: #b26b00; }
.dxbl-grid tr.hrow-late > td { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(196, 43, 43, .07) 6px 12px); color: var(--danger); }
.dxbl-grid tr.hrow-late > td:first-child { box-shadow: inset 3px 0 var(--danger); }

/* RICHARD01-popup (Abonnementen koppelen): breed, niets laten afbreken */
.abo-replace__table { width: 100%; border-collapse: collapse; }
.abo-replace__table th, .abo-replace__table td { white-space: nowrap; padding: 6px 10px; }
.abo-replace__table td.abo-replace__src { max-width: 460px; overflow: hidden; text-overflow: ellipsis; }
.abo-replace__fields { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 14px; }
.abo-replace__fields label { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.abo-replace__table th.num, .abo-replace__table td.num { text-align: right; width: 110px; }
.abo-replace__total td { font-weight: 600; border-top: 2px solid #cfd6de; }
.abo-replace__h { font-size: 14px; font-weight: 600; margin: 16px 0 6px; padding-left: 8px; border-left: 3px solid #c8102e; }
.abo-replace__diff { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 10px 12px; background: #f4f6f8; border-radius: 4px; font-weight: 600; }
.abo-replace__diff b { margin-left: auto; font-size: 15px; }
.abo-replace__art b { display: block; }
.abo-replace__art small { display: block; color: #6b7785; font-size: 12px; }
.abo-replace__table td { vertical-align: middle; }
.abo-replace__missing { color: #c0392b !important; font-weight: 600; }
.abo-replace__ok { color: #2e9e55 !important; }
.abo-replace__error { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #c0392b; background: #fdecea; color: #8a1f14; }
/* voortgang synchronisaties (Instellingen → Synchronisatie) */
.sync-progress { margin: 4px 18px 16px; padding: 12px 14px; border: 1px solid #e3e7ec; border-radius: 6px; background: #f7f9fb; }
.sync-progress__now { display: flex; align-items: center; gap: 10px; }
.sync-progress__spin { width: 14px; height: 14px; border: 2px solid #c8d0d8; border-top-color: #c8102e; border-radius: 50%; animation: sync-spin .8s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
.sync-progress__bar { height: 6px; margin-top: 8px; background: #e3e7ec; border-radius: 3px; overflow: hidden; }
.sync-progress__bar > div { height: 100%; background: #2e9e55; transition: width .3s; }
.sync-progress__log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: #4a5560; }
.sync-progress__log li { padding: 2px 0; }
.abo-replace__target { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-weight: 600; }

/* Instellingen → Achtergrondtaken: tabel binnen de kaart, compacte "Nu"-knop */
.bt-tasks-wrap { padding: 0 16px; overflow-x: auto; }
.bt-tasks { width: 100%; table-layout: auto; }
.bt-tasks td:last-child, .bt-tasks th:last-child { width: 1%; text-align: right; }
.bt-tasks__result { max-width: 420px; }
.bt-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bt-run { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid #d5dae0; border-radius: 14px;
          background: #fff; color: #3a4750; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.bt-run:hover:not(:disabled) { background: #c8102e; border-color: #c8102e; color: #fff; }
.bt-run:disabled { opacity: .4; cursor: not-allowed; }
.bt-versions { display: flex; gap: 24px; margin-top: 4px; font-size: 12px; color: #6b7785; }
/* Achtergrondtaken: vaste kolombreedtes zodat de knop altijd in beeld blijft (geen horizontaal scrollen) */
.bt-tasks-wrap { overflow-x: visible; }
.bt-tasks { table-layout: fixed; width: 100%; }
.bt-tasks th:nth-child(1) { width: 26%; }
.bt-tasks th:nth-child(2) { width: 12%; }
.bt-tasks th:nth-child(3) { width: 14%; }
.bt-tasks th:nth-child(4) { width: 11%; }
.bt-tasks th:nth-child(5) { width: 8%; }
.bt-tasks th:nth-child(7) { width: 72px; }
.bt-tasks td { overflow-wrap: anywhere; }
.bt-tasks .nowrap { white-space: normal; }
.bt-tasks__name { min-width: 0; }
.bt-tasks__result { max-width: none; }
/* Achtergrondtaken: volle breedte van het scherm */
.set-content .wb-settings.bt-page, .wb-settings.bt-page { max-width: none !important; width: 100%; }
.bt-run--all { float: right; height: 32px; padding: 0 14px; font-size: 13px; }
/* MS365 tenant · Back-up groei: grafiek per week rechts naast de dagtabel */
.bg-chart .section-title { margin-top: 0; }
.bg-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.bg-chart__grid { stroke: var(--border, #e2e8f0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bg-chart__axis { font-size: 11px; fill: var(--text-muted, #657782); }

/* MS365 verlengingen: mail-voorbeeld (formulier links, voorbeeld rechts) */
.rm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.rm-form { display: flex; flex-direction: column; gap: 4px; }
.rm-form > label, .rm-preview > label { font-size: 12px; color: #64748b; margin-top: 6px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.rm-lines { border-collapse: collapse; font-size: 12px; width: 100%; }
.rm-lines th { text-align: left; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #cbd5e1; white-space: nowrap; }
.rm-lines td { padding: 3px 6px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.rm-lines td.num { text-align: right; white-space: nowrap; }
.rm-preview__body { border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; background: #fff; max-height: 70vh; overflow: auto; }
@media (max-width: 900px) { .rm-grid { grid-template-columns: 1fr; } }
.rm-json { font-size: 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; overflow: auto; white-space: pre; margin: 2px 0 10px; }
.rm-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rm-nav__item { border: 1px solid #cbd5e1; background: #fff; border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.rm-nav__item.is-current { border-color: #1e293b; background: #1e293b; color: #fff; }
.rm-nav__item.is-skipped { text-decoration: line-through; color: #94a3b8; }
.rm-nav__item.is-current.is-skipped { color: #cbd5e1; }
.rm-nav__item.is-sent { border-color: #16a34a; color: #15803d; }
.rm-nav__item.is-current.is-sent { background: #16a34a; color: #fff; }
.rm-lines { font-size: 13px; }
.rm-lines th, .rm-lines td { padding: 5px 10px; }
.rm-lines th.num { text-align: right; }
.rm-lines__product { white-space: nowrap; font-weight: 500; }
.rm-preview__body { width: 100%; max-height: 62vh; }
/* mailpopup: voorbeeld lager zodat de knoppen onderaan altijd in beeld blijven; de body scrolt als het toch niet past */
.rm-preview__body { max-height: 44vh; }
.record-dialog .dxbl-modal-body:has(.rm-preview__body) { overflow-y: auto; }
/* aanklikbare vinkjes (MS365 verlengingen: Verstuurd / AFAS / Arrow) */
.dxbl-grid td.cell-click { cursor: pointer; }
.dxbl-grid td.cell-click:hover { background: #eef2ff !important; }
/* klant zonder e-mailadres in AFAS (MS365 verlengingen) */
.dxbl-grid td.cell-noemail { color: #dc2626 !important; font-style: italic; }
/* ja/nee-kolommen in DataList: vinkje als tekst (klikbaar via OnCellClick) */
.boolcell { display: block; text-align: center; color: #be123c; font-weight: 700; }
/* Instellingen → Mailtemplates: uitleg velden */
.mt-help { font-size: 12px; }
.mt-help pre { white-space: pre-wrap; font-size: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; margin: 6px 0; }

/* Achtergrondtaken: zoekveld in de filterbalk */
.bt-search { min-width: 260px; height: 32px; }

/* ProgressPanel: voortgang van een langere actie, vast bovenin beeld */
.pp { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 2000; width: min(560px, 92vw);
      background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); padding: 12px 16px; }
.pp__head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pp__count { margin-left: auto; font-variant-numeric: tabular-nums; color: #334155; }
.pp__cancel { margin-left: 8px; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 12px; }
.pp__bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 10px; position: relative; }
.pp__fill { height: 100%; background: #c8102e; border-radius: 4px; transition: width .25s ease; }
.pp__bar--busy .pp__fill { width: 35%; position: absolute; animation: pp-busy 1.2s ease-in-out infinite; }
@keyframes pp-busy { 0% { left: -35%; } 100% { left: 100%; } }
.pp__current { margin-top: 6px; font-size: 12px; color: #475569; white-space: normal; max-height: 5.4em; overflow: hidden; line-height: 1.35; }
.pp__failed { margin-top: 2px; font-size: 12px; color: #b91c1c; }
.pp__spin { width: 14px; height: 14px; border: 2px solid #e2e8f0; border-top-color: #c8102e; border-radius: 50%; animation: pp-spin .8s linear infinite; flex: none; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* Achtergrondtaken: taak die nu loopt / aangevraagd is */
.bt-now { display: flex; align-items: center; gap: 6px; color: #1d4ed8; }
.bt-tasks .pp__bar { margin-top: 6px; height: 6px; }

/* Toolbar van een lijst: knoppen laten doorlopen op een volgende regel als de lijst smal is (bijv. Workitems naast Opmerkingen) */
.filterbar__actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* Planning/agenda: naast het dikke lijntje links ook bovenaan een dik lijntje in de kleur van het item */
.wcal-item, .wcal-chip { border-top: 3px solid var(--wcal-accent, var(--slate-500)); }

/* Selecteer-alles-vakje in de donkere kopregel van een lijst: wit vak met rand, zodat het opvalt */
html body .datalist .dxbl-grid thead .dxbl-checkbox .dxbl-checkbox-check-element {
    background-color: #fff !important; border: 2px solid #fff !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .35); border-radius: 3px;
}
html body .datalist .dxbl-grid thead .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element,
html body .datalist .dxbl-grid thead .dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: var(--brand, #DB2448) !important; border-color: #fff !important;
}
html body .datalist .dxbl-grid thead input[type=checkbox] { accent-color: var(--brand, #DB2448); outline: 2px solid #fff; outline-offset: 0; }
.tipcell { cursor: default; }

/* Alle dialogen: donkergrijze kop met witte titel, zoals de dashboardpanelen en de lijstbalken.
   DevExpress zet de kopkleur via eigen variabelen/klassen (per versie anders): daarom beide klassen en !important. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup, .dxbl-modal .dxbl-popup {
    --dxbl-popup-header-bg: var(--slate-700) !important;
    --dxbl-popup-header-color: #fff !important;
    --dxbl-popup-header-btn-color: #fff !important;
    --dxbl-popup-header-btn-hover-color: #fff !important;
    --dxbl-popup-header-btn-hover-bg: rgba(255, 255, 255, .14) !important;
    --dxbl-popup-header-font-weight: 600 !important;
}
.dxbl-modal-content, .dxbl-popup-content { overflow: hidden; }
.dxbl-modal-header, .dxbl-popup-header {
    background: var(--slate-700) !important;
    background-color: var(--slate-700) !important;
    color: #fff !important;
    padding: 10px 14px 10px 16px !important;
    min-height: 46px;
    border-bottom: 0 !important;
    font-size: 15px;
    font-weight: 600;
}
.dxbl-modal-header *, .dxbl-popup-header * { color: #fff !important; }
.dxbl-modal-header .dxbl-btn, .dxbl-popup-header .dxbl-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
.dxbl-modal-header .dxbl-btn:hover, .dxbl-popup-header .dxbl-btn:hover { background: rgba(255, 255, 255, .12) !important; }
/* sluitknop in de donkere kop: DevExpress kleurt via --dxbl-btn-*; transparant met wit kruisje */
.dxbl-modal-header .dxbl-popup-header-button, .dxbl-popup-header .dxbl-popup-header-button,
.dxbl-modal-header .dxbl-btn, .dxbl-popup-header .dxbl-btn {
    --dxbl-btn-bg: transparent !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-border-color: transparent !important;
    --dxbl-btn-hover-bg: rgba(255, 255, 255, .14) !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-border-color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.dxbl-modal-header .dxbl-popup-header-button:hover, .dxbl-popup-header .dxbl-popup-header-button:hover { background-color: rgba(255, 255, 255, .14) !important; }
.dxbl-modal-header .dxbl-popup-header-button svg, .dxbl-modal-header .dxbl-popup-header-button .dxbl-image { color: #fff !important; fill: currentColor; opacity: .9; }
.rm-lines--nowrap td, .rm-lines--nowrap th { white-space: nowrap; }
/* De algemene "secundaire knop"-regel (app.css: lichtgrijs, !important) raakte ook het sluitkruisje: in de kop zwaarder overschrijven */
.dxbl-modal-header .dxbl-btn[class*="-secondary"]:not(.dxbl-btn-link),
.dxbl-popup-header .dxbl-btn[class*="-secondary"]:not(.dxbl-btn-link),
.dxbl-modal-header .dxbl-btn.dxbl-popup-header-button,
.dxbl-popup-header .dxbl-btn.dxbl-popup-header-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}
.dxbl-modal-header .dxbl-btn[class*="-secondary"]:not(.dxbl-btn-link):hover:not(:disabled),
.dxbl-popup-header .dxbl-btn[class*="-secondary"]:not(.dxbl-btn-link):hover:not(:disabled),
.dxbl-modal-header .dxbl-btn.dxbl-popup-header-button:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: transparent !important;
}
.dxbl-modal-header .dxbl-btn[class*="-secondary"] svg, .dxbl-popup-header .dxbl-btn[class*="-secondary"] svg { color: #fff !important; }
/* Planning-blok: klant op de eerste regel (mag over twee regels), tijd eronder */
.wcal-item .wcal-item__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcal-item__meta { display: flex; align-items: center; gap: 4px; }
.wcal-item__meta .wcal-item__time { flex: 1; }