/* Uitschakelbare financiële kleurcodering.
 * Deze selectors neutraliseren alleen de kleurvlakken wanneer de gebruiker
 * Instellingen > Kleurcode uitschakelt. Structuur, statuskleuren en documentpreview blijven intact.
 */
html[data-financial-color-code='off'] [id^='bank-payment-'],
html[data-financial-color-code='off'] [id^='bank-payment-'] .grid.w-full.min-w-0.items-start.gap-2.text-left:has(> .min-w-0.space-y-1.text-left),
html[data-financial-color-code='off'] tr:has([data-bank-payment-direction='incoming']),
html[data-financial-color-code='off'] tr:has([data-bank-payment-direction='outgoing']),
html[data-financial-color-code='off'] tr:has(button[aria-label='Betalingen']),
html[data-financial-color-code='off'] div.rounded-lg.border[class~='p-4'][class~='flex-col'][class~='md:flex-row'][class~='justify-between'][class~='gap-3'],
html[data-financial-color-code='off'] div.rounded-lg.border.overflow-hidden:has([class~='min-w-[1340px]']),
html[data-financial-color-code='off'] div.rounded-lg.border:has(.lucide-wallet),
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-emerald-700),
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-red-700),
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-destructive),
html[data-financial-color-code='off'] [role='dialog']:has(button[aria-label='Bekijk document']) section.rounded-lg.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(button[aria-label='Bekijk document']) section.space-y-3 > div.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(button[aria-label='Bekijk document']) section.space-y-3 > div.overflow-hidden.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Uitgave']) section.rounded-md.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Creditnota']) section.rounded-md.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Betaaluitnodiging']) section.rounded-md.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Huurfactuur']) section.rounded-md.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Makelaarfactuur']) section.rounded-md.border[class~='bg-muted/30'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Uitgave']) div.rounded-lg.border.border-dashed[class~='bg-blue-50/70'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Creditnota']) div.rounded-lg.border.border-dashed[class~='bg-blue-50/70'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Betaaluitnodiging']) div.rounded-lg.border.border-dashed[class~='bg-blue-50/70'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Huurfactuur']) div.rounded-lg.border.border-dashed[class~='bg-blue-50/70'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Makelaarfactuur']) div.rounded-lg.border.border-dashed[class~='bg-blue-50/70'],
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Uitgave']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Creditnota']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Betaaluitnodiging']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Huurfactuur']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Makelaarfactuur']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr,
html[data-financial-color-code='off'] [role='dialog'] .grid.gap-3.rounded-lg.border[class~='bg-muted/30'] {
  background-color: rgb(255 255 255) !important;
  border-color: rgb(226 232 240) !important;
}

html[data-financial-color-code='off'] tr:has([data-bank-payment-direction='incoming']):hover,
html[data-financial-color-code='off'] tr:has([data-bank-payment-direction='outgoing']):hover,
html[data-financial-color-code='off'] tr:has(button[aria-label='Betalingen']):hover,
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-emerald-700):hover,
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-red-700):hover,
html[data-financial-color-code='off'] tr:has(td.whitespace-nowrap.text-right.font-bold.text-destructive):hover,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Uitgave']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr:hover,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Creditnota']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr:hover,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Betaaluitnodiging']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr:hover,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Huurfactuur']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr:hover,
html[data-financial-color-code='off'] [role='dialog']:has(span[title='Makelaarfactuur']) section.space-y-3 > div.overflow-auto.rounded-lg.border tbody tr:hover {
  background-color: rgb(255 255 255) !important;
}

/* De versleepbare legenda hoort bij de kleurcodering en verdwijnt dus mee. */
html[data-financial-color-code='off'] aside[aria-label='Verklaring kleurcode'] {
  display: none !important;
}