/* Interactieve bediening voor wachtwoorden en kleurweergave. */
.password-field{position:relative;display:block;width:100%}
.password-field>input{padding-right:48px!important}
.password-toggle{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:7px;background:transparent;color:#8f9098}
.password-toggle:hover{background:rgba(216,184,91,.12);color:var(--gold-light)}
.password-toggle:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.password-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 11px;border:1px solid #34353c;border-radius:8px;background:#191a1f;color:#c9c9ce;font-size:10px;font-weight:600;white-space:nowrap}
.theme-toggle:hover{border-color:#6b6040;color:var(--gold-light)}
.theme-toggle-icon{font-size:14px;line-height:1}
.auth-panel>.theme-toggle{position:absolute;top:22px;right:24px}
.status-page>.theme-toggle{position:fixed;top:22px;right:24px}
.site-header__actions>.theme-toggle{order:-1}

/* Zon-modus: het oorspronkelijke warme kleurenschema van de desktop-app. */
html[data-theme="light"]{color-scheme:light;--night:#f4f5f9;--night-soft:#eeeff5;--panel:#fff;--panel-light:#eeeff5;--line:#dedfe7;--gold:#3a4173;--gold-light:#2f3560;--cream:#2c3154;--muted:#5f648a;--green:#2d7d4f;--red:#c0392b;--blue:#2563eb}
html[data-theme="light"] body{background:#f4f5f9;color:#2c3154}
html[data-theme="light"] .theme-toggle{border-color:#dedfe7;background:#fff;color:#2c3154;box-shadow:0 1px 2px rgba(0,0,0,.1)}
html[data-theme="light"] .theme-toggle:hover{border-color:#bfc0cb;color:#2f3560;background:#e8e9f0}
html[data-theme="light"] .password-toggle{color:#5f648a}
html[data-theme="light"] .password-toggle:hover{background:#eceef8;color:#2f3560}

/* Website en toegangsschermen. */
/* De kleine regel onder tabeltekst: op de donkere achtergrond is #9a9aa2
   nodig (6.09 contrast, #707179 haalde 3.50). Op wit is het omgekeerd,
   dus daar blijft #707179 staan. */
html[data-theme="light"] .data-table td small{color:#707179}

html[data-theme="light"] .site-header{border-color:#dedfe7;background:#f4f5f9}
html[data-theme="light"] .site-header nav,html[data-theme="light"] .quiet-link{color:#5f648a}
html[data-theme="light"] .site-header nav a:hover{color:#2c3154}
html[data-theme="light"] .hero__intro{color:#56596a}
html[data-theme="light"] .trust-row{color:#5f648a}
html[data-theme="light"] .dark-button{background:#f4f5f9;border-color:#dedfe7;color:#2c3154;box-shadow:0 1px 2px rgba(0,0,0,.1)}
html[data-theme="light"] .dark-button:hover{border-color:#bfc0cb;background:#e8e9f0}
html[data-theme="light"] .possibilities{background:#eeeff5;border-color:#dedfe7}
html[data-theme="light"] .feature-grid{background:#dedfe7;border-color:#dedfe7}
html[data-theme="light"] .feature-grid article{background:#f4f5f9}
html[data-theme="light"] .feature-grid p,html[data-theme="light"] .section-heading p,html[data-theme="light"] .software-section>div>p:last-child{color:#5f648a}
html[data-theme="light"] .marketing-page footer{border-color:#dedfe7;color:#5f648a}

html[data-theme="light"] .auth-branding{background:#eeeff5;border-color:#dedfe7}
html[data-theme="light"] .auth-panel{background:#f4f5f9}
html[data-theme="light"] .auth-branding>div>p:last-child{color:#56596a}
html[data-theme="light"] .auth-branding ul{color:#5f648a}
html[data-theme="light"] .auth-card>p{color:#5f648a}
html[data-theme="light"] .auth-card label{color:#56596a}
html[data-theme="light"] .label-note,html[data-theme="light"] .password-hint{color:#5f648a!important}
html[data-theme="light"] .auth-card input{background:#fff;border-color:#dedfe7;color:#2c3154;box-shadow:0 1px 2px rgba(0,0,0,.04)}
html[data-theme="light"] .auth-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(47,53,96,.15)}
html[data-theme="light"] .auth-switch a,html[data-theme="light"] .forgot-link{color:#2f3560}
html[data-theme="light"] .back-link{color:#5f648a}
html[data-theme="light"] .form-error{background:#fff0f0;border-color:#dfb5b8;color:#8d343b}
html[data-theme="light"] .success-message{background:#eaf7f0;border-color:#acd8c2;color:#206744}
html[data-theme="light"] .info-message{background:#e7f2fa;border-color:#b9d8ea;color:#26658e}

/* Applicatieschil en algemene panelen. */
html[data-theme="light"] .app-shell{background:#f4f5f9}
/* Het accent is nu donkerblauw in plaats van goud. Overal waar een vlak met
   de accentkleur wordt gevuld, moet de tekst dus licht zijn in plaats van
   bijna zwart — anders valt hij weg. */
html[data-theme="light"] .gold-button,html[data-theme="light"] .attention-button span,html[data-theme="light"] .search-command-input button,html[data-theme="light"] .new-invoice{color:#ffffff}
html[data-theme="light"] .app-sidebar nav a>span.menu-badge{background:#2c3154;color:#ffffff}
html[data-theme="light"] .menu-badge{background:#2c3154;color:#ffffff}
html[data-theme="light"] .wordmark span{color:#3a4173}
html[data-theme="light"] .sidebar-legal a{color:#5f648a}
html[data-theme="light"] .logout-button{color:#4a4f6e!important}
html[data-theme="light"] .sidebar-close{background:#f4f5f9;border-color:#dfe2ee;color:#2c3154}
/* Het schermvoorbeeld op de homepage beeldt de app in donkere modus af en
   blijft daarom donker, ook in zon-modus. Binnen dat venster gelden dus de
   donkere accentkleuren; anders krijg je gouden staven bij een blauwe knop. */
html[data-theme="light"] .outline-button{border-color:#b9bfd8;color:#3a4173}
html[data-theme="light"] .outline-button:hover{border-color:#3a4173}
html[data-theme="light"] .site-header nav,html[data-theme="light"] .quiet-link,html[data-theme="light"] .section-heading p,html[data-theme="light"] .marketing-page footer{color:#5f648a}
html[data-theme="light"] .product-preview{color:#f6f3eb;--gold:#d8b85b;--gold-light:#f0d476;--cream:#f6f3eb;--muted:#9a9aa2;--green:#55b78a;--blue:#62a6d9;--red:#df7171;--panel:#191a1f;--panel-light:#202127;--line:#2d2e35}
html[data-theme="light"] .app-sidebar{background:#ffffff;border-color:#ccd2e4;box-shadow:none}
html[data-theme="light"] .app-sidebar .wordmark{color:#2c3154}
html[data-theme="light"] .app-sidebar>p{color:#5f648a}
html[data-theme="light"] .sidebar-group>summary{color:#5f648a}
html[data-theme="light"] .sidebar-group>summary:hover{background:#f0f1f8;color:#2c3154}
html[data-theme="light"] .sidebar-group>summary>span{color:#5f648a}
html[data-theme="light"] .app-sidebar nav a{color:#2c3154}
html[data-theme="light"] .app-sidebar nav a:hover{background:#f0f1f8;color:#2c3154}
html[data-theme="light"] .app-sidebar nav a.active{background:#eceef8;color:#2c3154}
html[data-theme="light"] .app-sidebar nav a>span{color:#5f648a}
html[data-theme="light"] .sidebar-user{border-color:#e3e6f0;color:#2c3154}
html[data-theme="light"] .sidebar-user>b{background:#eceef8;color:#3a4173}
html[data-theme="light"] .account-avatar,html[data-theme="light"] .team-avatar,html[data-theme="light"] .organization-avatar{background:#eceef8;color:#2f3560}
html[data-theme="light"] .sidebar-user span small{color:#5f648a}
html[data-theme="light"] .sidebar-user:hover,html[data-theme="light"] .sidebar-user.active{background:#f0f1f8}
html[data-theme="light"] .app-header{background:#f4f5f9;border-color:#dedfe7;color:#56596a}
html[data-theme="light"] .app-header>span b{color:#2c3154}
html[data-theme="light"] .app-header button{background:#f4f5f9;border-color:#dedfe7;color:#2c3154;box-shadow:0 1px 2px rgba(0,0,0,.1)}
html[data-theme="light"] .app-header .theme-toggle{color:#2c3154}
html[data-theme="light"] .account-button{background:#f4f5f9;color:#3a4173!important;border-color:#3a4173!important}
html[data-theme="light"] .account-button:hover,html[data-theme="light"] .account-button.active{background:#eceef8}
html[data-theme="light"] .email-verification-bar,html[data-theme="light"] .settings-note,html[data-theme="light"] .verification-link{background:#f2f4fb;border-color:#8f95bd;color:#3a4173}
html[data-theme="light"] .email-verification-bar a,html[data-theme="light"] .verification-link strong,html[data-theme="light"] .settings-note strong{color:#3a4173}

html[data-theme="light"] .content-panel,
html[data-theme="light"] .dashboard-stats article,
html[data-theme="light"] .onboarding-panel,
html[data-theme="light"] .catalog-card,
html[data-theme="light"] .project-card,
html[data-theme="light"] .search-start>div{background:#fff;border-color:#dedfe7;box-shadow:0 1px 4px rgba(0,0,0,.04)}
html[data-theme="light"] .organization-card.current{background:#f4f5f9}
html[data-theme="light"] .workspace-title>div>p:last-child,
html[data-theme="light"] .dashboard-title p,
html[data-theme="light"] .panel-heading p,
html[data-theme="light"] .field-help,
html[data-theme="light"] .empty-state p{color:#5e6174}
html[data-theme="light"] .secondary-button,html[data-theme="light"] .quiet-action{background:#f4f5f9;border-color:#dedfe7;color:#2c3154;box-shadow:0 1px 2px rgba(0,0,0,.1)}
html[data-theme="light"] .quiet-action{background:transparent;box-shadow:none}
html[data-theme="light"] .secondary-button:hover{border-color:#bfc0cb;background:#e8e9f0}

/* Formulieren, tabellen en documentregels. */
html[data-theme="light"] .data-form label,html[data-theme="light"] .invoice-line label{color:#494b59}
html[data-theme="light"] .data-form input,
html[data-theme="light"] .data-form select,
html[data-theme="light"] .data-form textarea,
html[data-theme="light"] .invoice-line input,
html[data-theme="light"] .invoice-line select,
html[data-theme="light"] .team-role-form select,
html[data-theme="light"] .report-filter input,
html[data-theme="light"] .bank-import-form input,
html[data-theme="light"] .branding-controls input[type=file],
html[data-theme="light"] .color-control input,
html[data-theme="light"] .invite-link-row input,
html[data-theme="light"] .credit-line input[type=number]{background:#fff;border-color:#bcbecd;color:#26272e}
html[data-theme="light"] .data-form input:focus,
html[data-theme="light"] .data-form select:focus,
html[data-theme="light"] .data-form textarea:focus,
html[data-theme="light"] .invoice-line input:focus,
html[data-theme="light"] .invoice-line select:focus{box-shadow:0 0 0 3px rgba(47,53,96,.14)}
html[data-theme="light"] .invoice-line,html[data-theme="light"] .credit-line{background:#f4f5f9;border-color:#cbcddb}
html[data-theme="light"] .credit-select span{background:#fff;border-color:#989bab}
html[data-theme="light"] .credit-select input:checked+span{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 4px #fff}
html[data-theme="light"] .data-table th{background:#eeeff5;color:#56596a}
html[data-theme="light"] .data-table td{border-color:#dedfe7;color:#535666}
html[data-theme="light"] .data-table tbody tr:hover{background:#f4f5f9}
html[data-theme="light"] .data-table td strong{color:#2c3154}
html[data-theme="light"] .amount-cell,html[data-theme="light"] .invoice-total>div strong{color:#2c3154!important}
html[data-theme="light"] .invoice-total .grand-total{border-color:#c6c8d7}
html[data-theme="light"] .invoice-total .grand-total span{color:#3b3d48}
html[data-theme="light"] .catalog-card,html[data-theme="light"] .project-card,html[data-theme="light"] .session-row,html[data-theme="light"] .team-member,html[data-theme="light"] .team-permissions dl>div,html[data-theme="light"] .email-history-list article{border-color:#d2d4df}

/* Dashboard, zoeken en overige werkgebieden. */
html[data-theme="light"] .dashboard-alert,html[data-theme="light"] .dashboard-document-list>a,html[data-theme="light"] .dashboard-quick-actions a,html[data-theme="light"] .notification-item{border-color:#d2d4df}
html[data-theme="light"] .dashboard-alert>span,html[data-theme="light"] .notification-icon{background:#e7e8f0;color:#515464}
html[data-theme="light"] .dashboard-alert strong,html[data-theme="light"] .dashboard-document-list strong{color:#2c2d36}
html[data-theme="light"] .dashboard-chart{border-color:#cdcfdb}
html[data-theme="light"] .search-overlay{background:rgba(38,40,58,.46)}
html[data-theme="light"] .search-command{background:#fff;border-color:#babcca;box-shadow:0 28px 90px rgba(33,35,52,.2)}
html[data-theme="light"] .search-command label,html[data-theme="light"] .main-search-form>label{color:#2c2d36}
html[data-theme="light"] .search-command-input,html[data-theme="light"] .main-search-form>div{background:#f7f8fb;border-color:#c1c3d1}
html[data-theme="light"] .search-command-input input,html[data-theme="light"] .main-search-form input{color:#26272e}
html[data-theme="light"] .search-command-footer{background:#f0f1f8;border-color:#cbcddb;color:#57596a}
html[data-theme="light"] .search-command-footer kbd{background:#fff;border-color:#babcca}
html[data-theme="light"] .search-result-list>a,html[data-theme="light"] .settings-subheading{border-color:#d2d4df}
html[data-theme="light"] .purchase-attachment,html[data-theme="light"] .email-attachment,html[data-theme="light"] .reminder-send-summary>div:not(.email-attachment),html[data-theme="light"] .import-counts>div{background:#eff0f7;border-color:#c6c8d7}
html[data-theme="light"] .upload-control,html[data-theme="light"] .upload-zone{background:#f7f8fd!important;border-color:#5a6193!important}
html[data-theme="light"] .settings-save{background:rgba(255,255,255,.96);border-color:#c1c3d1;box-shadow:0 12px 35px rgba(33,35,52,.12)}
html[data-theme="light"] .month-bar progress,html[data-theme="light"] .month-bar progress::-webkit-progress-bar{background:#d7d9e4}
html[data-theme="light"] .vat-breakdown>div{border-color:#d2d4df}
html[data-theme="light"] .vat-breakdown>div strong{color:#2d2e37}
html[data-theme="light"] .reminder-table tr.is-overdue{background:#fff4f4}
html[data-theme="light"] .reminder-table tr.is-overdue:hover{background:#ffeded}

/* Informatieve kleuren blijven herkenbaar, maar krijgen een lichtere ondergrond. */
/* Neutrale badge. Staat bewust vóór de gekleurde varianten hieronder:
   die wegen even zwaar, dus anders zou grijs de statuskleuren winnen. */
html[data-theme="light"] .type-badge,html[data-theme="light"] .status-badge,html[data-theme="light"] .status-project-afgerond,html[data-theme="light"] .bank-status-ignored,html[data-theme="light"] .role-accountant,html[data-theme="light"] .recurring-status-ended{background:#e7e8ee;color:#5c5b62}

html[data-theme="light"] .status-concept,html[data-theme="light"] .draft-label,html[data-theme="light"] .quote-status-concept,html[data-theme="light"] .purchase-status-concept,html[data-theme="light"] .role-owner{background:#eceef8;color:#3a4173}
html[data-theme="light"] .pro-badge{background:#f8eddf;color:#8a572e}
html[data-theme="light"] .status-verzonden,html[data-theme="light"] .quote-status-verzonden,html[data-theme="light"] .role-admin{background:#e7f2fa;color:#26658e}
html[data-theme="light"] .status-betaald,html[data-theme="light"] .quote-status-geaccepteerd,html[data-theme="light"] .purchase-status-betaald,html[data-theme="light"] .recurring-status-active,html[data-theme="light"] .verification-badge.verified,html[data-theme="light"] .email-status.sent,html[data-theme="light"] .status-project-actief,html[data-theme="light"] .bank-status-matched,html[data-theme="light"] .role-member,html[data-theme="light"] .mail-readiness>span.ready{background:#e6f5ed;color:#20704c}
html[data-theme="light"] .status-vervallen,html[data-theme="light"] .quote-status-afgewezen,html[data-theme="light"] .email-status.failed,html[data-theme="light"] .margin-badge.negative{background:#fae9ea;color:#9a3f46}
html[data-theme="light"] .status-deelbetaling,html[data-theme="light"] .quote-status-verlopen,html[data-theme="light"] .purchase-status-open,html[data-theme="light"] .recurring-status-paused,html[data-theme="light"] .verification-badge.pending,html[data-theme="light"] .status-project-gepauzeerd,html[data-theme="light"] .bank-status-unmatched,html[data-theme="light"] .mail-readiness>span.pending{background:#f8eddf;color:#8a572e}

@media(max-width:980px){.application-page .theme-toggle-label{display:none}.application-page .theme-toggle{width:34px;padding:0}}
@media(max-width:760px){.auth-panel>.theme-toggle{top:16px;right:16px}.site-header__actions>.theme-toggle .theme-toggle-label{display:none}.site-header__actions>.theme-toggle{width:34px;padding:0}}
@media print{.theme-toggle,.password-toggle{display:none!important}}

/* Lichte weergave: de icoonvakjes van Recent en Snel starten kregen geen
   tegenhanger en bleven donker op een lichte kaart. */
html[data-theme="light"] .document-icon,
html[data-theme="light"] .dashboard-quick-actions a>span{background:#e7e8f0;color:#515464}
html[data-theme="light"] .document-icon.credit{background:#e7f2fa;color:#26658e}

/* Lichte weergave: document- en klantnummers stonden op bleek goud (#e0c66e),
   dat haalt op wit een contrast van 1,68. Nu dezelfde kleur als het label
   eronder, met het accent bewaard voor de hover zodat het een link blijft. */
/* Documentnummers. Op wit was goud onleesbaar, maar puur grijs maakte het
   nummer niet te onderscheiden van het label eronder (dat is #707179).
   Dieper goud lost allebei op: 5.72 contrast op wit, en een kleurverschil
   met dat label dat vergelijkbaar is met de donkere modus. */
html[data-theme="light"] .gold-text{color:#3a4173!important}
html[data-theme="light"] .invoice-link:hover,
html[data-theme="light"] .back-action:hover{color:#2f3560}

/* Elementen met een eigen donkere achtergrond die nooit een lichte
   tegenhanger kregen. De meldingsknop op het dashboard was de aanleiding. */
html[data-theme="light"] .attention-button{background:#eceef8;border-color:#8f95bd;color:#3a4173}
html[data-theme="light"] .list-search input::placeholder{color:#56596a}
html[data-theme="light"] .bulk-bar{border-color:#2f3560;background:#f2f4fb}
html[data-theme="light"] .purchase-category{background:#eceef8;color:#3a4173}
html[data-theme="light"] .dashboard-date{color:#3a4173}
html[data-theme="light"] .search-button kbd{color:#56596a}
html[data-theme="light"] .search-command-input>span{color:#56596a}
html[data-theme="light"] .search-command-footer{color:#56596a}
html[data-theme="light"] .search-command-footer button{color:#343640}
html[data-theme="light"] .search-command-footer kbd{color:#26272e}
/* Goudkleurige tekst is op wit te licht; deze elementen hadden nog geen
   lichte tegenhanger. */
html[data-theme="light"] .eyebrow{color:#3a4173!important}
html[data-theme="light"] .stat-outstanding>strong{color:#3a4173}
html[data-theme="light"] .chart-footer a,html[data-theme="light"] .dashboard-alert-panel .panel-heading>a{color:#3a4173}
html[data-theme="light"] .dashboard-alert>b{color:#3a4173}
html[data-theme="light"] .dashboard-quick-actions a>b{color:#3a4173}
html[data-theme="light"] .dashboard-stats span{color:#56596a}
html[data-theme="light"] .dashboard-stats small{color:#56596a}
html[data-theme="light"] .chart-legend{color:#56596a}
html[data-theme="light"] .chart-scale{color:#56596a}
html[data-theme="light"] .chart-labels span{color:#56596a}
html[data-theme="light"] .dashboard-alert small{color:#56596a}
html[data-theme="light"] .chart-footer{color:#56596a}
html[data-theme="light"] .dashboard-document-list small{color:#56596a}
html[data-theme="light"] .dashboard-quick-actions small{color:#56596a}
html[data-theme="light"] .project-card>div>p{color:#56596a}
html[data-theme="light"] .project-card dt{color:#56596a}
html[data-theme="light"] .project-card dd{color:#2c2d36}
html[data-theme="light"] .dashboard-all-clear>span{background:#e6f5ed;color:#20704c}
html[data-theme="light"] .paid-button,html[data-theme="light"] .accepted-button{background:#e6f5ed;border-color:#8ecdae;color:#1c6344}
html[data-theme="light"] .credit-label{background:#fae9ea;border-color:#e3b3b7;color:#9a3f46}
html[data-theme="light"] .invoice-notes-grid .internal{background:#f2f4fb;border-color:#b9bed8}
html[data-theme="light"] .assistant-question>div{background:#fff;border-color:#dedfe7}
html[data-theme="light"] .bank-match-summary{background:#eff0f7;border-color:#c6c8d7}
html[data-theme="light"] .bank-status-suggested{background:#e7f2fa;color:#26658e}
html[data-theme="light"] .admin-request{color:#8a572e!important}
html[data-theme="light"] .bank-suggestion-reason{color:#26658e!important}
html[data-theme="light"] .bank-suggestion-banner{border-color:#9cc3dd}
html[data-theme="light"] .bank-match-form select{background:#fff;border-color:#c6c8d7;color:#2c3154}
html[data-theme="light"] .email-document-row>a>span{background:#eceef8;color:#3a4173}
/* De gekleurde meldingsvakjes wegen zwaarder dan de algemene lichte regel
   hierboven, dus die hebben hun eigen tegenhanger nodig. */
html[data-theme="light"] .notification-item.critical .notification-icon{background:#fae9ea;color:#9a3f46}
html[data-theme="light"] .notification-item.warning .notification-icon{background:#eceef8;color:#3a4173}
html[data-theme="light"] .notification-item.info .notification-icon{background:#e7f2fa;color:#26658e}