/* Panel light and dark. Print stays light, including the QR sheet. */
:root,
[data-bs-theme="light"] {
  --mm-bg: #f6f3ee;
  --mm-surface: #ffffff;
  --mm-ink: #1c1917;
  --mm-muted: #5c534c;
  --mm-line: #e7ddd4;
  --mm-primary: #198754;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --mm-bg: #1c1917;
  --mm-surface: #292524;
  --mm-ink: #fafaf9;
  --mm-muted: #d6d3d1;
  --mm-line: #44403c;
  --mm-primary: #4ade80;
  --bs-body-bg: #1c1917;
  --bs-body-color: #fafaf9;
  --bs-secondary-color: #d6d3d1;
  --bs-tertiary-color: #e7e5e4;
  --bs-emphasis-color: #fafaf9;
  --bs-heading-color: #fafaf9;
  --bs-border-color: #44403c;
  --bs-card-bg: #292524;
  --bs-card-color: #fafaf9;
  color-scheme: dark;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-content,
[data-bs-theme="dark"] .auth-main {
  background: var(--mm-bg);
  color: var(--mm-ink);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .crop-sheet,
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-header-dock,
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .header-account-popover {
  background-color: var(--mm-surface);
  color: var(--mm-ink);
  border-color: var(--mm-line);
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .form-text {
  color: var(--mm-muted) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #1c1917;
  color: var(--mm-ink);
  border-color: var(--mm-line);
}
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mm-ink);
  --bs-table-border-color: var(--mm-line);
  color: var(--mm-ink);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--mm-ink);
  border-color: var(--mm-line);
}
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .bg-light {
  background-color: #44403c !important;
  color: var(--mm-ink) !important;
}
[data-bs-theme="dark"] .app-bottom-nav {
  background: var(--mm-surface);
  color: var(--mm-ink);
}
[data-bs-theme="dark"] a:not(.btn) { color: #86efac; }

/* The shell token layer is html.theme-dark (set by panel-theme.js). The rules below cover what it misses. */
html.theme-dark .btn-outline-success { color: #4ade80; border-color: #4ade80; }
html.theme-dark .btn-outline-danger { color: #f87171; border-color: #f87171; }
html.theme-dark .btn-outline-success:hover,
html.theme-dark .btn-outline-danger:hover { color: #0c0a09; }
html.theme-dark .btn-outline-success:hover { background-color: #4ade80; }
html.theme-dark .btn-outline-danger:hover { background-color: #f87171; }
html.theme-dark .qr-card,
html.theme-dark .qr-card * { color: #1c1917 !important; }
html.theme-dark .qr-card { background: #ffffff; }
.mm-theme-toggle { margin-inline-end: 8px; }
/* The modern header dock is pointer-events:none; its children opt in. Without this the toggle cannot be clicked. */
.app-header-dock .mm-theme-toggle { pointer-events: auto; position: absolute; top: 4px; inset-inline-start: 8px; z-index: 3; margin: 0; }
@media print {
  html.theme-dark {
    --bg-base: #ffffff;
    --bg-card: #ffffff;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --text-primary: #111111;
    --text-muted: #444444;
    --border-subtle: #cccccc;
  }
  :root,
  [data-bs-theme="dark"] {
    --mm-bg: #ffffff;
    --mm-surface: #ffffff;
    --mm-ink: #111111;
    --bs-body-bg: #ffffff;
    --bs-body-color: #111111;
    color-scheme: light;
  }
  body, .app-content, .card, .qr-card, .table {
    background: #ffffff !important;
    color: #111111 !important;
  }
}