/* B&S Meet en Regeltechniek: zwart met witte tekst. */
:root {
  color-scheme: dark;
  color: #fff;
  background: #000;
  --bs-surface: #090909;
  --bs-raised: #141414;
  --bs-selected: #222;
  --bs-border: #343434;
}
body, .main { background: #000; color: #fff; }
.sidebar, header, .content, .stats > div, dialog {
  background: var(--bs-surface);
  border-color: var(--bs-border);
  color: #fff;
}
.brand { flex-direction: column; align-items: flex-start; gap: 16px; letter-spacing: 0; }
.brand-logo { display: block; width: 172px; max-width: 100%; height: auto; object-fit: contain; }
.brand-name { font-size: 18px; font-weight: 650; line-height: 1.4; }
.workspace { margin-top: 32px; }
.workspace, .project-heading, .nav, .icon-button, .sidebar-bottom small,
header, .breadcrumb span:last-child, .local-label, .eyebrow, p,
.stats div div > span, .tabs button, #results, .sort-label, .sort-label select,
.note-visual, .card-meta, .card-bottom, .delete, .empty, .dropzone,
.dropzone strong, .dropzone small, footer, .error { color: #fff; }
.sidebar-bottom, .toolbar { border-color: var(--bs-border); }
.nav.active, .tabs button.selected {
  background: var(--bs-selected);
  color: #fff;
  box-shadow: inset 0 0 0 1px #484848;
}
.nav:hover, .tabs button:hover { background: #1b1b1b; }
.count, .avatar, .local-label, .project-tag { background: #222; color: #fff; }
.button.primary { background: #242424; color: #fff; border-color: #757575; box-shadow: none; }
.button.secondary { background: #0b0b0b; color: #fff; border-color: #4b4b4b; }
.button.danger { background: #242424; color: #fff; border-color: #aaa; }
.button:hover { background: #333; border-color: #fff; }
.button:disabled { background: #141414; border-color: var(--bs-border); }
.stat-icon.blue, .stat-icon.orange, .stat-icon.purple, .stat-icon.teal,
.drop-icon { background: #222; color: #fff; }
input, textarea, select, #search {
  background: #000;
  color: #fff;
  border-color: #484848;
}
input::placeholder, textarea::placeholder { color: #d2d2d2; opacity: 1; }
button:focus-visible, a:focus-visible { outline-color: #fff; }
input:focus, textarea:focus, select:focus { outline-color: #fff; }
.card { background: #0b0b0b; border-color: var(--bs-border); }
.card:hover { border-color: #858585; box-shadow: 0 5px 20px #0008; }
.card-open { background: #0b0b0b; color: #fff; }
.card-visual, .note-visual { background: var(--bs-raised); color: #fff; }
.document-symbol { background: #080808; color: #fff; border-color: #515151; }
.delete:hover { color: #fff; text-decoration: underline; }
.dropzone { background: #080808; border-color: #606060; }
.dropzone:hover, .dropzone.drag { background: #191919; border-color: #fff; }
dialog { border: 1px solid #505050; box-shadow: 0 24px 90px #000b; }
dialog::backdrop { background: #000b; }
.error:not(:empty) { padding: 10px 12px; border-left: 3px solid #fff; background: #222; }
#preview-content iframe { border-color: var(--bs-border); }
.pdf-paper { background: #1b1b1b; }
/* Documenten en foto's behouden hun eigen kleuren en leesbaarheid. */
.pdf-paper canvas { background: #fff; box-shadow: 0 2px 10px #0008; }
#toast { background: #1b1b1b; color: #fff; border: 1px solid #707070; box-shadow: 0 4px 24px #0008; }
@media (max-width: 700px) {
  .brand { flex-direction: row; align-items: center; gap: 20px; }
  .brand-logo { width: 114px; flex-shrink: 0; }
  .brand-name { font-size: 18px; max-width: 240px; }
}
@media (max-width: 380px) {
  .brand-logo { width: 94px; }
  .brand { gap: 15px; }
  .brand-name { font-size: 16px; }
}