/* Dark-mode compatibility layer for legacy markup and inline light colors. */
[data-color-mode="dark"] body,
[data-color-mode="dark"] body.stee-themed {
  background: var(--bg-app) !important;
  color: var(--text) !important;
}

[data-color-mode="dark"] .app-header,
[data-color-mode="dark"] #stickyHeader,
[data-color-mode="dark"] .page-toolbar,
[data-color-mode="dark"] .settings-sidebar,
[data-color-mode="dark"] .settings-content,
[data-color-mode="dark"] .settings-panel,
[data-color-mode="dark"] .account-layout-panel,
[data-color-mode="dark"] .overview-card,
[data-color-mode="dark"] .modal-content,
[data-color-mode="dark"] .card,
[data-color-mode="dark"] .tabs,
[data-color-mode="dark"] .stat,
[data-color-mode="dark"] .tbl-wrap,
[data-color-mode="dark"] #appTodoPanel,
[data-color-mode="dark"] #appTodoOverview,
[data-color-mode="dark"] .app-todo-item {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] input:not([type="color"]),
[data-color-mode="dark"] select,
[data-color-mode="dark"] textarea {
  background: #141720 !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] input::placeholder,
[data-color-mode="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

[data-color-mode="dark"] table,
[data-color-mode="dark"] th,
[data-color-mode="dark"] td {
  color: var(--text) !important;
  border-color: var(--border-light) !important;
}

[data-color-mode="dark"] th {
  background: #20242D !important;
}

[data-color-mode="dark"] tr:hover td {
  background: var(--bg-hover) !important;
}

[data-color-mode="dark"] .header-more-menu,
[data-color-mode="dark"] #filterSortPanel,
[data-color-mode="dark"] #accountDropdownPanel,
[data-color-mode="dark"] .dropdown-menu,
[data-color-mode="dark"] .popup,
[data-color-mode="dark"] .menu {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] .header-more-item,
[data-color-mode="dark"] .settings-sidebar-link,
[data-color-mode="dark"] .app-nav-link {
  color: var(--text-secondary) !important;
}

[data-color-mode="dark"] .header-more-item:hover,
[data-color-mode="dark"] .settings-sidebar-link:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

[data-color-mode="dark"] .settings-sidebar-link.active,
[data-color-mode="dark"] .app-nav-link.active {
  color: var(--nav-active-text) !important;
}

/* Hard-coded light surfaces in generated panels. */
[data-color-mode="dark"] .stee-themed [style*="background:#fff"],
[data-color-mode="dark"] .stee-themed [style*="background: #fff"],
[data-color-mode="dark"] .stee-themed [style*="background:white"],
[data-color-mode="dark"] .stee-themed [style*="background: white"],
[data-color-mode="dark"] .stee-themed [style*="background:#fafafa"],
[data-color-mode="dark"] .stee-themed [style*="background: #fafafa"],
[data-color-mode="dark"] .stee-themed [style*="background:#f8f9fa"] {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] .stee-themed [style*="color:#333"],
[data-color-mode="dark"] .stee-themed [style*="color: #333"],
[data-color-mode="dark"] .stee-themed [style*="color:#444"],
[data-color-mode="dark"] .stee-themed [style*="color:#555"],
[data-color-mode="dark"] .stee-themed [style*="color:#666"] {
  color: var(--text-secondary) !important;
}

[data-color-mode="dark"] .stee-themed [style*="border:1px solid #ddd"],
[data-color-mode="dark"] .stee-themed [style*="border: 1px solid #ddd"],
[data-color-mode="dark"] .stee-themed [style*="border:1px solid #eee"] {
  border-color: var(--border) !important;
}

/* Category-colored transaction cards keep their category background. */
[data-color-mode="dark"] .transaction-card {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

[data-color-mode="dark"] .transaction-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

[data-color-mode="dark"] :is(.overview-tabs, .month-selector, .summary-box, .category-bar-track, .category-bar-row),
[data-color-mode="dark"] :is(.tab-btn, .cat-tab, .shop-card) {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] .overview-tab {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] :is(.overview-tabs button.active, .overview-tab.active, .tab-btn.active, .cat-tab.active) {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

[data-color-mode="dark"] .category-bar-track {
  background: #2A2F3A !important;
}

[data-color-mode="dark"] :is(.category-bar-label, .category-bar-count, .summary-box .label) {
  color: var(--text-secondary) !important;
}

[data-color-mode="dark"] .drop-zone {
  background: #141720 !important;
}

[data-color-mode="dark"] .drop-zone.has-section,
[data-color-mode="dark"] .drop-zone .account-section {
  background: var(--bg-selected) !important;
}

[data-color-mode="dark"] .account-name-input.account-save-success,
[data-color-mode="dark"] .stee-save-success {
  background-color: #163129 !important;
}

[data-color-mode="dark"] .account-name-input.account-save-error,
[data-color-mode="dark"] .stee-save-error {
  background-color: #3A1D22 !important;
}

/* Supplied logo has a black base; invert only while dark mode is active. */
[data-color-mode="dark"] .app-logo-symbol,
[data-color-mode="dark"] .login-logo-symbol {
  filter: invert(1);
}

[data-color-mode="dark"] #transactionModal :is(.tab-btn, [role="tab"], .settings-tab, button[data-tab]),
[data-color-mode="dark"] .settings-page :is(.tab-btn, [role="tab"], .settings-tab, button[data-tab]) {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] #transactionModal :is(.tab-btn.active, [role="tab"][aria-selected="true"], .settings-tab.active, button[data-tab].active),
[data-color-mode="dark"] .settings-page :is(.tab-btn.active, [role="tab"][aria-selected="true"], .settings-tab.active, button[data-tab].active) {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

[data-color-mode="dark"] #transactionModal button[style*="background:#fff"],
[data-color-mode="dark"] #transactionModal button[style*="background: #fff"],
[data-color-mode="dark"] .stee-themed button[style*="background:#fff"],
[data-color-mode="dark"] .stee-themed button[style*="background: #fff"],
[data-color-mode="dark"] .stee-themed button[style*="background:#eee"],
[data-color-mode="dark"] .stee-themed button[style*="background: #eee"],
[data-color-mode="dark"] .stee-themed button[style*="background:#f5f5f5"] {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] #appTodoOverview button:not([data-action="app-todo-copy-all"]),
[data-color-mode="dark"] #appTodoPanel button:not([data-action="app-todo-add"]):not([data-action="app-todo-overview"]) {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] #appTodoOverview [data-action="app-todo-export-scope"][style*="#2196F3"],
[data-color-mode="dark"] #appTodoPanel [data-action="app-todo-view-tab"][style*="#1976d2"] {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

[data-color-mode="dark"] .account-name-input.account-save-pending,
[data-color-mode="dark"] .stee-save-pending {
  color: var(--text) !important;
  border-color: #FFD54F !important;
  box-shadow: 0 0 0 3px rgba(255,213,79,.28) !important;
}

[data-color-mode="dark"] .account-name-input.account-save-success,
[data-color-mode="dark"] .stee-save-success {
  border-color: #5EE3A3 !important;
  box-shadow: 0 0 0 3px rgba(94,227,163,.25) !important;
}

[data-color-mode="dark"] .account-name-input.account-save-error,
[data-color-mode="dark"] .stee-save-error {
  border-color: #FF6B7A !important;
  box-shadow: 0 0 0 3px rgba(255,107,122,.25) !important;
}

[data-color-mode="dark"] :is(.account-name-undo, .stee-field-undo) {
  color: #FFFFFF !important;
  border-color: #778092 !important;
  background: #272C36 !important;
}

[data-color-mode="dark"] .stee-autosave-status {
  color: #8FF0C8 !important;
}

[data-color-mode="dark"] .theme-card,
[data-color-mode="dark"] .color-mode-card {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-color-mode="dark"] .theme-card.selected,
[data-color-mode="dark"] .color-mode-card.selected {
  background: var(--bg-selected) !important;
  border-color: var(--primary) !important;
}

[data-color-mode="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-color-mode="dark"] ::-webkit-scrollbar-track { background: #11141A; }
[data-color-mode="dark"] ::-webkit-scrollbar-thumb { background: #3A404D; border-radius: 8px; }
[data-color-mode="dark"] ::selection { background: var(--primary); color: #fff; }

/* Laatste compatibiliteitscontrole: oude inline lichte vlakken mogen in dark mode
   niet boven semantische surfaces uitsteken. */
[data-color-mode="dark"] .stee-themed :is(div,section,article,details)[style*="background:#fff"],
[data-color-mode="dark"] .stee-themed :is(div,section,article,details)[style*="background: #fff"],
[data-color-mode="dark"] .stee-themed :is(div,section,article,details)[style*="background:#f9f9f9"],
[data-color-mode="dark"] .stee-themed :is(div,section,article,details)[style*="background:#f5f5f5"],
[data-color-mode="dark"] .stee-themed :is(div,section,article,details)[style*="background:#E0E0E0"] { background:var(--bg-surface)!important;color:var(--text)!important;border-color:var(--border)!important; }
[data-color-mode="dark"] .stee-themed :is(input,select,textarea) { background:var(--bg-input)!important;color:var(--text)!important;border-color:var(--border)!important;color-scheme:dark; }
[data-color-mode="dark"] .stee-themed select option { background:#1B1F27!important;color:#F4F6FA!important; }
[data-color-mode="dark"] .stee-themed [style*="color:#333"],
[data-color-mode="dark"] .stee-themed [style*="color: #333"],
[data-color-mode="dark"] .stee-themed [style*="color:#444"],
[data-color-mode="dark"] .stee-themed [style*="color:#555"],
[data-color-mode="dark"] .stee-themed [style*="color:#666"],
[data-color-mode="dark"] .stee-themed [style*="color:#777"],
[data-color-mode="dark"] .stee-themed [style*="color:#888"],
[data-color-mode="dark"] .stee-themed [style*="color:#999"] { color:var(--text-secondary)!important; }
[data-color-mode="dark"] .stee-themed :is(.modal-content,.overview-card,.settings-panel,.shopping-view,details,table,thead,tbody,tr,td,th) { border-color:var(--border)!important; }

[data-color-mode="dark"] { --amount-negative:#FF8A80; --amount-positive:#69F0AE; }
[data-color-mode="dark"] .transaction-card,[data-color-mode="dark"] .transaction-card *:not(.card-amount) { color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.72); }
[data-color-mode="dark"] .transaction-card .card-amount { text-shadow:none; }
[data-color-mode="dark"] .transaction-card .card-amount.negative { color:var(--amount-negative)!important; }
[data-color-mode="dark"] .transaction-card .card-amount.positive { color:var(--amount-positive)!important; }
[data-color-mode="dark"] #settingsAiPanel :is(div,section)[style*="background"] { background:var(--bg-surface)!important;color:var(--text)!important;border-color:var(--border)!important; }
[data-color-mode="dark"] .cat-rule-analysis,[data-color-mode="dark"] .cat-rule-analysis :is(div,table,tr,td,th,button) { background:var(--bg-surface)!important;color:var(--text)!important;border-color:var(--border)!important; }
[data-color-mode="dark"] .cat-rule-analysis [style*="background:#fff"],[data-color-mode="dark"] .cat-rule-analysis [style*="background: #fff"] { background:#242A34!important;color:var(--text)!important; }

/* Concrete dark-mode surfaces from in-app feedback. */
[data-color-mode="dark"] #settingsTodoPanel .settings-todo-row,
[data-color-mode="dark"] #settingsTodoPanel .settings-todo-row.todo-done {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-color-mode="dark"] #settingsTodoPanel .settings-todo-row.todo-done :is(div,span) { color: var(--text-muted) !important; }
[data-color-mode="dark"] #boodschappenApp :is(.tab-btn,.cat-tab,.shop-card,button[data-b-action="remove-shop"]) { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-color-mode="dark"] #boodschappenApp :is(.tab-btn,.cat-tab).active { background: var(--primary) !important; color: #fff !important; }
[data-color-mode="dark"] #boodschappenApp :is(.base-products-panel,.base-product-row) { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-color-mode="dark"] #attachmentsPanel,
[data-color-mode="dark"] #attachmentsPanel :is(.overview-card,.receipt-card,[style*="background:#fff"],[style*="background: #fff"],[style*="background:#f5"],[style*="background: #f5"]) {
  background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}

/* Overzichten: gemiddelden, bonnen en bijlagebak (2026-08-18 feedbackronde).
   Deze onderdelen gebruiken nu classes in plaats van inline lichte kleuren. */
[data-color-mode="dark"] :is(.avg-total-bar, .avg-preset, .avg-preset-header, .avg-preset-body, .rcp-bucket, .bijl-card, .bijl-scan-status, .bijl-drop) {
  background: var(--bg-surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-color-mode="dark"] :is(.avg-total-bar, .bijl-drop) { background: var(--bg-selected) !important; }
[data-color-mode="dark"] .bijl-drop { border-color: var(--primary) !important; }
[data-color-mode="dark"] .bijl-drop.dragover { background: var(--bg-hover) !important; }
[data-color-mode="dark"] :is(.avg-preset-header, .rcp-bucket > summary, .bijl-card-title) { color: var(--text) !important; }
[data-color-mode="dark"] :is(.avg-preset-meta, .avg-chev, .bijl-card-meta, .rcp-bucket-single > summary) { color: var(--text-secondary) !important; }
[data-color-mode="dark"] :is(.avg-preset-header:hover, .avg-preset-apply:hover, .avg-preset-delete:hover, .bijl-card-collapsed:hover) { background: var(--bg-hover) !important; }
[data-color-mode="dark"] .avg-preset-apply { color: #90CAF9 !important; border-color: #4B79A8 !important; background: #242A34 !important; }
[data-color-mode="dark"] .avg-preset-delete { color: #FF8A80 !important; border-color: #8C4B50 !important; background: #242A34 !important; }
[data-color-mode="dark"] .bijl-status-badge { background: #2A2F3A !important; color: var(--text) !important; border-color: var(--border) !important; }
/* Bijlage- en bonnen-tabellen mogen geen lichte cel-/kopvlakken houden. */
[data-color-mode="dark"] :is(.rcp-bucket, .bijl-card) :is(table, thead, tbody, tr, td, th) {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.stee-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
}

.stee-mode-toggle.floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10020;
  box-shadow: var(--shadow-md);
}

/* Beheer: tabelacties en statusbadges mogen geen lichte vlakken houden. */
[data-color-mode="dark"] .admin-page .btn-sm {
  background:#242A34 !important;color:#F4F6FA !important;border-color:#515968 !important;
}
[data-color-mode="dark"] .admin-page .btn-sm:hover { background:#303744 !important; }
[data-color-mode="dark"] .admin-page .btn-sm.btn-primary { color:#90CAF9 !important;border-color:#4B79A8 !important; }
[data-color-mode="dark"] .admin-page .btn-sm.btn-danger { color:#FF8A80 !important;border-color:#8C4B50 !important; }
[data-color-mode="dark"] .admin-page .badge-inactive { background:#4A2529 !important;color:#FFB4AB !important;border:1px solid #8C4B50 !important; }
[data-color-mode="dark"] .admin-page .badge-active { background:#173C2A !important;color:#8DE6B5 !important;border:1px solid #39745A !important; }
[data-color-mode="dark"] .cat-rule-analysis .category-bar-fill > span { color:#fff!important;text-shadow:0 1px 2px #000!important; }
[data-color-mode="dark"] textarea::-webkit-scrollbar-track { background:#11141A; }
[data-color-mode="dark"] textarea::-webkit-scrollbar-thumb { background:#515968;border-radius:8px; }
[data-color-mode="dark"] #appTodoEditNewCatSlot > div { background:#242A34!important;color:var(--text)!important;border-color:var(--primary-light)!important; }
[data-color-mode="dark"] .admin-page .badge-off { background:#303744!important;color:#D7DCE5!important;border:1px solid #596273!important; }
[data-color-mode="dark"] .transaction-card .prediction-question-mark { color:#000!important;text-shadow:none!important; }
[data-color-mode="dark"] #settingsCategoriesPanel button > span { color:var(--text)!important;text-shadow:none!important; }