/* Dark theme - applied when <html data-bs-theme="dark"> (each user's choice in Settings).
   Bootstrap 5.3 handles its own components; this restyles the app's custom classes from style.css. */
[data-bs-theme="dark"] {
  --op-bg: #14161a;
  --op-border: #2d3138;
  --op-blue-bg: #14283f;
  --op-orange-bg: #3a2a14;
  --op-purple-bg: #2a2040;
  --op-green-bg: #12301f;
  --op-teal-bg: #11303a;
  --op-blue: #7db4f5; --op-orange: #f0a35a; --op-purple: #b79cf5; --op-green: #5fd49a; --op-teal: #5cc8e0;
  --op-surface: #1c1f25;
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background: var(--op-bg); color: #e4e6ea; }
[data-bs-theme="dark"] a { color: #ff7b7b; }
[data-bs-theme="dark"] .op-topbar { background: var(--op-surface); }
[data-bs-theme="dark"] .op-card { background: var(--op-surface); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .op-footer { background: linear-gradient(180deg, #1c1f25 0%, #181b20 100%); }
[data-bs-theme="dark"] .op-footer-brand { color: #f1b3b3; }
[data-bs-theme="dark"] .login-card { background: var(--op-surface); color: #e4e6ea; }
[data-bs-theme="dark"] .district-button-select { background: #181b20; }
[data-bs-theme="dark"] .grand-total-row { background: #3a1d1d !important; }
[data-bs-theme="dark"] .table-op td, [data-bs-theme="dark"] .table-op tbody th { border-color: var(--op-border); }
[data-bs-theme="dark"] .btn-outline-primary { color: #ff7b7b !important; border-color: #ff7b7b !important; }
[data-bs-theme="dark"] .btn-outline-primary:hover { color: #fff !important; background-color: var(--op-accent) !important; border-color: var(--op-accent) !important; }
[data-bs-theme="dark"] .text-muted { color: #9aa1ab !important; }
/* micro plan sheet */
[data-bs-theme="dark"] .op-sheet .op-dealer { background: var(--op-surface) !important; }
[data-bs-theme="dark"] .op-sheet .op-avg { background: #181b20 !important; color: #9aa1ab; }
[data-bs-theme="dark"] #op-save-bar { background: var(--op-surface) !important; border-top-color: var(--op-border) !important; }
/* Sun / moon switch in the top bar - the active side is highlighted */
.op-theme-toggle { display: inline-flex; border: 1px solid var(--op-border); border-radius: 999px; padding: 3px; gap: 2px; background: transparent; }
.op-theme-toggle button { border: 0; background: transparent; color: #8a8f98; width: 34px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.op-theme-toggle button:hover { color: var(--op-accent); }
.op-theme-toggle button.active { background: var(--op-accent); color: #fff; box-shadow: 0 1px 4px rgba(200, 30, 30, .35); }
.op-theme-toggle button.active:hover { color: #fff; }

/* MD role badge had no colour (invisible in the top bar and Settings) */
.badge-role-MD { background: #0891b2; }
/* current-page marker in the sidebar */
.op-sidebar a.nav-link.active { box-shadow: inset 4px 0 0 var(--op-accent); }