/* ═══════════════════════════════════════════════════════════════════════════
   MOLMS — NIGHT MODE  (replaces the old "dark" look)
   Deep blue-black surfaces, soft off-white text, gentle green accent. Easy on the eyes at night:
   no pure white, no pure black, no glaring borders. Loaded after every other stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;
  --night-bg:      #0b0f17;   /* page */
  --night-surface: #121926;   /* cards, panels */
  --night-raised:  #182131;   /* headers, inputs, hover */
  --night-line:    #263247;   /* borders */
  --night-text:    #e4e9f2;
  --night-muted:   #98a5bb;
  --night-faint:   #6c7b94;

  --cream:  #0b0f17;  --white: #121926;  --fog: #263247;  --mist: #354460;
  --stone:  #98a5bb;  --charcoal: #e4e9f2;  --ink: #f1f5fb;
  --forest: #3fa774;  --forest-mid: #4cb985;  --forest-light: #34916a;
  --sage:   #55bf8f;  --mint: #7ad6ac;  --mint-pale: #12271f;
  --gold: #e0ad3a;  --gold-bright: #f3c14f;  --gold-pale: #2b2413;
  --danger: #ff7b7b;  --danger-pale: #2d1719;
  --warning: #f0a545;  --info: #6cb6ee;  --info-pale: #11263a;
  --bg: #0b0f17;  --card-bg: #121926;  --panel-bg: #121926;  --border: #263247;  --text: #e4e9f2;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.5);  --shadow-sm: 0 2px 10px rgba(0,0,0,.5);
  --shadow-md: 0 6px 24px rgba(0,0,0,.55);  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);  --shadow-xl: 0 28px 72px rgba(0,0,0,.65);
}

/* ── page, header, menu ─────────────────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .dash-wrap { background: var(--night-bg) !important; color: var(--night-text); }
html[data-theme="dark"] .topbar { background: #0f1520 !important; border-bottom: 1px solid var(--night-line) !important; box-shadow: none !important; color: var(--night-text); }
html[data-theme="dark"] .topbar-title, html[data-theme="dark"] .page-title { color: var(--night-text) !important; }
html[data-theme="dark"] .mobile-menu-btn { background: var(--night-raised) !important; border-color: var(--night-line) !important; color: var(--night-text) !important; }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0b1220 0%, #0c1a1a 100%) !important; border-right: 1px solid var(--night-line); }
html[data-theme="dark"] .sidebar-footer { background: rgba(0,0,0,.28) !important; border-top: 1px solid var(--night-line); }
html[data-theme="dark"] .nav-item { color: #aebbd0; }
html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .nav-item.active { background: rgba(120,160,255,.10); color: #fff; }
html[data-theme="dark"] .nav-item.active { box-shadow: inset 3px 0 0 var(--forest); }
html[data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.66); }
html[data-theme="dark"] .nav-arrow { background: var(--night-raised); color: var(--night-text); border-color: var(--night-line); }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] #themeBtn { color: #f3c14f; }

/* ── cards, panels, tiles ───────────────────────────────────────────────── */
html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .pf-act, html[data-theme="dark"] .st-card, html[data-theme="dark"] .st-sec,
html[data-theme="dark"] [class$="-cards"] > *, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .modal,
html[data-theme="dark"] .bell-panel, html[data-theme="dark"] .toast-panel > * {
  background: var(--night-surface) !important; border-color: var(--night-line) !important; color: var(--night-text);
}
html[data-theme="dark"] .panel-header, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background: var(--night-raised) !important; border-color: var(--night-line) !important; color: var(--night-text); }
html[data-theme="dark"] .panel-body { background: transparent !important; }
html[data-theme="dark"] .stat-card .stat-label, html[data-theme="dark"] [class$="-cards"] .lbl, html[data-theme="dark"] [class$="-cards"] .sub { color: var(--night-muted) !important; }
html[data-theme="dark"] .stat-card .stat-value, html[data-theme="dark"] [class$="-cards"] .big { color: #fff !important; }
html[data-theme="dark"] .stat-card.gold { background: #231e0f !important; }
html[data-theme="dark"] .stat-card.blue { background: #0f1f30 !important; }
html[data-theme="dark"] .stat-card.red  { background: #2a1517 !important; }
html[data-theme="dark"] .pf-act:hover, html[data-theme="dark"] .panel:hover { border-color: var(--forest) !important; }

/* ── text ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] .section-title, html[data-theme="dark"] .panel-header h3 { color: #f1f5fb !important; }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] label, html[data-theme="dark"] td, html[data-theme="dark"] th, html[data-theme="dark"] small { color: inherit; }
html[data-theme="dark"] a:not(.btn):not(.nav-item):not(.bell-item) { color: #7ab8f5; }
html[data-theme="dark"] .field-hint, html[data-theme="dark"] .text-muted, html[data-theme="dark"] .sub { color: var(--night-muted) !important; }
html[data-theme="dark"] hr { border-color: var(--night-line); }

/* ── forms ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-control, html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.btn),
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: var(--night-raised) !important; border-color: var(--night-line) !important; color: var(--night-text) !important;
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {
  border-color: var(--forest) !important; box-shadow: 0 0 0 3px rgba(63,167,116,.22) !important; outline: none;
}
html[data-theme="dark"] ::placeholder { color: #66758e !important; opacity: 1; }
html[data-theme="dark"] select option { background: #182131; color: var(--night-text); }
html[data-theme="dark"] input[readonly], html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] input:disabled { background: #0f1520 !important; color: var(--night-faint) !important; }
html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=time] { color-scheme: dark; }

/* ── buttons ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-primary { background: var(--forest-light) !important; border-color: var(--forest-light) !important; color: #fff !important; }
html[data-theme="dark"] .btn-primary:hover { background: var(--forest) !important; }
html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .btn-secondary { background: transparent !important; color: #8fe0b8 !important; border-color: #3b8f68 !important; }
html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .btn-secondary:hover { background: rgba(63,167,116,.18) !important; color: #fff !important; }
html[data-theme="dark"] .btn-danger { background: #a63a3a !important; border-color: #a63a3a !important; color: #fff !important; }
html[data-theme="dark"] .btn:disabled, html[data-theme="dark"] .btn[disabled] { opacity: .45; }

/* ── tables ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] table, html[data-theme="dark"] .table-wrap { background: var(--night-surface) !important; }
html[data-theme="dark"] table thead tr, html[data-theme="dark"] table th { background: var(--night-raised) !important; color: var(--night-muted) !important; border-color: var(--night-line) !important; }
html[data-theme="dark"] table td { border-color: var(--night-line) !important; color: var(--night-text) !important; }
html[data-theme="dark"] table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
html[data-theme="dark"] table tbody tr:hover { background: rgba(120,160,255,.07) !important; }

/* ── badges, alerts, tabs, chips ────────────────────────────────────────── */
html[data-theme="dark"] .badge { background: rgba(255,255,255,.08); color: var(--night-text); border: 1px solid var(--night-line); opacity: 1; }
html[data-theme="dark"] .badge-green, html[data-theme="dark"] .badge-success { background: rgba(63,167,116,.2) !important; color: #8fe0b8 !important; border-color: rgba(63,167,116,.4); }
html[data-theme="dark"] .badge-red, html[data-theme="dark"] .badge-danger { background: rgba(255,123,123,.16) !important; color: #ff9d9d !important; border-color: rgba(255,123,123,.35); }
html[data-theme="dark"] .badge-gold, html[data-theme="dark"] .badge-yellow, html[data-theme="dark"] .badge-warning { background: rgba(243,193,79,.16) !important; color: #f6cf72 !important; border-color: rgba(243,193,79,.35); }
html[data-theme="dark"] .badge-blue, html[data-theme="dark"] .badge-info { background: rgba(108,182,238,.16) !important; color: #9ccdf3 !important; border-color: rgba(108,182,238,.35); }
html[data-theme="dark"] .alert, html[data-theme="dark"] .alert-info { background: #11263a; color: #cfe6fa; border-color: #1f4466; }
html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: #2d1719; color: #ffc9c9; border-color: #5a2a2d; }
html[data-theme="dark"] .alert-success { background: #12271f; color: #bfeed6; border-color: #24533f; }
html[data-theme="dark"] .alert-warning { background: #2b2413; color: #f6e1a8; border-color: #594a1f; }
html[data-theme="dark"] .tab, html[data-theme="dark"] .pf-tab { color: var(--night-muted); }
html[data-theme="dark"] .tab.active, html[data-theme="dark"] .pf-tab.on { color: #fff; border-color: var(--forest); }
html[data-theme="dark"] .pf-chip { background: rgba(255,255,255,.08); color: var(--night-text); }
html[data-theme="dark"] .bell-item { color: var(--night-text); border-color: var(--night-line); }
html[data-theme="dark"] .bell-item.unread { background: rgba(63,167,116,.12); }
html[data-theme="dark"] .bell-item small, html[data-theme="dark"] .bell-empty { color: var(--night-muted); }
html[data-theme="dark"] .pagination a, html[data-theme="dark"] .pagination span { background: var(--night-raised); color: var(--night-text); border-color: var(--night-line); }

/* ── hero banners stay rich green but a touch deeper ───────────────────── */
html[data-theme="dark"] .pf-hero, html[data-theme="dark"] .welcome-banner { filter: brightness(.88) saturate(.95); }

/* ── pages that colour things inline ───────────────────────────────────── */
html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background:var(--white)"],
html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color:white"] { background: var(--night-surface) !important; color: var(--night-text); }
html[data-theme="dark"] [style*="background:#f3f8f4"], html[data-theme="dark"] [style*="background:#f4f7f5"], html[data-theme="dark"] [style*="background:#f3f3f3"],
html[data-theme="dark"] [style*="background:#eee"], html[data-theme="dark"] [style*="background:#fafafa"], html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background:var(--cream)"], html[data-theme="dark"] [style*="background:#f8faf9"] { background: var(--night-raised) !important; color: var(--night-text); }
html[data-theme="dark"] [style*="background:#fdecec"], html[data-theme="dark"] [style*="background:#fce8e8"], html[data-theme="dark"] [style*="background:var(--danger-pale)"] { background: #2d1719 !important; color: #ffc9c9 !important; }
html[data-theme="dark"] [style*="background:#fff4d6"], html[data-theme="dark"] [style*="background:#fff8e1"], html[data-theme="dark"] [style*="background:var(--gold-pale)"], html[data-theme="dark"] [style*="background:#fef3d7"] { background: #2b2413 !important; color: #f6e1a8 !important; }
html[data-theme="dark"] [style*="background:#e8f5e9"], html[data-theme="dark"] [style*="background:#e6f4ea"], html[data-theme="dark"] [style*="background:var(--mint-pale)"], html[data-theme="dark"] [style*="background:#eaf6ee"] { background: #12271f !important; color: #bfeed6 !important; }
html[data-theme="dark"] [style*="background:#ddeef8"], html[data-theme="dark"] [style*="background:var(--info-pale)"], html[data-theme="dark"] [style*="background:#e3f2fd"] { background: #11263a !important; color: #cfe6fa !important; }
html[data-theme="dark"] [style*="color:#0d2b1a"], html[data-theme="dark"] [style*="color:#1a4a2e"], html[data-theme="dark"] [style*="color:#1e2d25"],
html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color:var(--ink)"], html[data-theme="dark"] [style*="color:var(--charcoal)"] { color: var(--night-text) !important; }
html[data-theme="dark"] [style*="color:#6b7e74"], html[data-theme="dark"] [style*="color:var(--stone)"], html[data-theme="dark"] [style*="color:#666"], html[data-theme="dark"] [style*="color:#777"], html[data-theme="dark"] [style*="color:#888"] { color: var(--night-muted) !important; }
html[data-theme="dark"] [style*="color:#7a5a00"], html[data-theme="dark"] [style*="color:#8a6a00"] { color: #f1cf7a !important; }
html[data-theme="dark"] [style*="color:#b83232"], html[data-theme="dark"] [style*="color:#c0392b"], html[data-theme="dark"] [style*="color:#e74c3c"] { color: #ff9d9d !important; }
html[data-theme="dark"] [style*="border:1px solid #dce8e0"], html[data-theme="dark"] [style*="border-color:#dce8e0"], html[data-theme="dark"] [style*="border-bottom:1px solid #dce8e0"] { border-color: var(--night-line) !important; }

/* ── login, settings, charts, maps ─────────────────────────────────────── */
html[data-theme="dark"] .login-panel-right, html[data-theme="dark"] .login-form-wrap { background: var(--night-bg) !important; color: var(--night-text); }
html[data-theme="dark"] .login-form-header h2 { color: #f1f5fb; }
html[data-theme="dark"] .st-opt .box { background: var(--night-raised); border-color: var(--night-line); color: var(--night-text); }
html[data-theme="dark"] .st-opt input:checked + .box { border-color: var(--forest); background: rgba(63,167,116,.14); }
html[data-theme="dark"] .leaflet-container { background: #1a2233; }
html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.72) contrast(1.05) saturate(.8); }   /* map tiles softer at night */
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--night-surface); color: var(--night-text); }
html[data-theme="dark"] canvas { filter: brightness(1.05); }
html[data-theme="dark"] img { opacity: .94; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--night-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3850; border-radius: 8px; }
html[data-theme="dark"] .nav-arrows.floating .nav-arrow { background: rgba(24,33,49,.94); color: #fff; }

/* ── white / light buttons: always black text ───────────────────────────────
   Any button whose background is white or near-white (set by a stylesheet, an inline style, a hover state or a
   Leaflet control) gets black text, so it can never end up light-on-white in night mode.
   `.on-light-bg` is added/removed automatically by interface-enhancements.js; the selectors below also
   cover the Leaflet map controls without needing JS. */
html[data-theme="dark"] .on-light-bg,
html[data-theme="dark"] .on-light-bg *,
html[data-theme="dark"] .btn.on-light-bg,
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-bar a:hover,
html[data-theme="dark"] .leaflet-control-layers,
html[data-theme="dark"] .leaflet-control-layers label,
html[data-theme="dark"] .leaflet-control-layers span,
html[data-theme="dark"] .leaflet-control-attribution,
html[data-theme="dark"] .leaflet-control-attribution a { color: #000 !important; text-shadow: none; }
html[data-theme="dark"] .leaflet-control-layers, html[data-theme="dark"] .leaflet-bar a { background-color: #fff !important; }