/* Sepia Dark Theme — Bootstrap + Sneat compatible */
html.dark-style,
[data-bs-theme="dark"] {
  /* Tokens */
  /* Adjusted to be slightly lighter and more sepia */
  --mkz-bg: #241b16;       /* was #1d1612 */
  --mkz-surface: #2b211b;  /* was #241b16 */
  --mkz-panel: #33261f;    /* was #2b211b */
  --mkz-text: #e8dccf;
  --mkz-text-muted: #cbbfb1;
  --mkz-heading: #f2e6d7;
  --mkz-border: #3a2d25;
  --mkz-link: #c98a56;
  --mkz-link-hover: #d59c6e;
  --mkz-surface-alt: color-mix(in sRGB, var(--mkz-panel) 88%, black);
  --mkz-muted-bg: color-mix(in sRGB, var(--mkz-panel) 70%, black);
  --mkz-border-strong: color-mix(in sRGB, var(--mkz-border) 70%, black);
  --mkz-focus-ring: rgba(201, 138, 86, 0.35);

  /* Native UI alignment */
  color-scheme: dark light;

  /* Bootstrap var mapping */
  --bs-body-bg: var(--mkz-bg);
  --bs-body-color: var(--mkz-text);
  --bs-heading-color: var(--mkz-heading);
  --bs-border-color: var(--mkz-border);
  --bs-card-bg: var(--mkz-panel);
  --bs-card-border-color: var(--mkz-border);
  --bs-link-color: var(--mkz-link);
  --bs-link-hover-color: var(--mkz-link-hover);
  --bs-nav-link-color: var(--mkz-text);
  --bs-nav-link-hover-color: var(--mkz-link);
  --bs-secondary-bg: var(--mkz-surface-alt);
  --bs-tertiary-bg: var(--mkz-surface);
  --bs-secondary-color: var(--mkz-text-muted);
  --bs-tertiary-color: var(--mkz-text-muted);
  --bs-btn-border-color: var(--mkz-border);
  --bs-input-bg: var(--mkz-surface);
  --bs-input-color: var(--mkz-text);
  --bs-input-border-color: var(--mkz-border);
  --bs-input-focus-border-color: var(--mkz-link);
  --bs-input-focus-box-shadow: 0 0 0 .2rem rgba(201,138,86,.25);
  /* Component-specific tuning for less intense contrast after login */
  --mkz-menu-bg: color-mix(in sRGB, var(--mkz-panel) 70%, white);
  --mkz-navbar-bg: color-mix(in sRGB, var(--mkz-panel) 78%, white);
  --bs-dropdown-bg: var(--mkz-panel);
  --bs-dropdown-link-color: var(--mkz-text);
  --bs-dropdown-link-hover-bg: var(--mkz-muted-bg);
  --bs-dropdown-link-hover-color: var(--mkz-text);
  --bs-tooltip-bg: var(--mkz-panel);
  --bs-tooltip-color: var(--mkz-text);
  --bs-popover-bg: var(--mkz-panel);
  --bs-popover-border-color: var(--mkz-border);
  --bs-modal-bg: var(--mkz-panel);
  --bs-modal-border-color: var(--mkz-border);
  /* Map light surfaces used by utility classes */
  --bs-light: var(--mkz-surface-alt);
  --bs-light-rgb: 43, 33, 27; /* approx of #2b211b */
}

/* Sneat surfaces - lighten sidebar/navbar for reduced contrast */
.bg-menu-theme, .layout-menu { background-color: var(--mkz-menu-bg) !important; }
.bg-navbar-theme { background-color: var(--mkz-navbar-bg) !important; border-bottom: 1px solid var(--mkz-border); }
.layout-navbar { background-color: var(--mkz-navbar-bg) !important; }
.layout-menu .menu-inner > .menu-item > .menu-link:hover { background-color: color-mix(in sRGB, var(--mkz-menu-bg) 90%, white) !important; }
.layout-menu .menu-item.active > .menu-link { background-color: color-mix(in sRGB, var(--mkz-menu-bg) 85%, white) !important; }
.menu-inner-shadow { box-shadow: 0 0 0 rgba(0,0,0,0) !important; }

/* Common components - MUST be scoped to dark mode to prevent undefined vars in light mode */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
html.dark-style .card,
html.dark-style .modal-content {
  background-color: var(--mkz-panel) !important;
  color: var(--mkz-text) !important;
}

/* Tooltips in dark mode */
[data-bs-theme="dark"] .tooltip .tooltip-inner,
html.dark-style .tooltip .tooltip-inner {
  background-color: var(--mkz-panel);
  color: var(--mkz-text);
}

/* Borders in dark mode */
[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
html.dark-style hr,
html.dark-style .border,
html.dark-style .modal-header,
html.dark-style .modal-footer {
  border-color: var(--mkz-border) !important;
}

/* Links in dark mode */
[data-bs-theme="dark"] a,
html.dark-style a {
  color: var(--mkz-link);
}
[data-bs-theme="dark"] a:hover,
html.dark-style a:hover {
  color: var(--mkz-link-hover);
}

/* Tables in dark mode */
[data-bs-theme="dark"] .table,
html.dark-style .table {
  --bs-table-bg: var(--mkz-surface);
  --bs-table-color: var(--mkz-text);
  --bs-table-border-color: var(--mkz-border);
}

/* Form controls in dark mode */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
html.dark-style .form-control,
html.dark-style .form-select {
  background-color: var(--mkz-surface);
  color: var(--mkz-text);
  border-color: var(--mkz-border);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
  border-color: var(--mkz-link);
  box-shadow: 0 0 0 .2rem rgba(201,138,86,.25);
}

/* Navbar/header top strip (Sneat pseudo element) */
[data-bs-theme="dark"] .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before,
html.dark-style .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
  background-color: var(--mkz-navbar-bg) !important;
}

/* Light utility surfaces in dark mode: keep contextual but dark */
[data-bs-theme="dark"] .bg-light,
html.dark-style .bg-light,
[data-bs-theme="dark"] .text-bg-light,
html.dark-style .text-bg-light {
  background-color: var(--mkz-surface-alt) !important;
  color: var(--mkz-text) !important;
}

/* Navbar variant override when vendor sets navbar-light */
[data-bs-theme="dark"] .navbar.navbar-light,
html.dark-style .navbar.navbar-light,
[data-bs-theme="dark"] .bg-navbar-theme,
html.dark-style .bg-navbar-theme {
  background-color: var(--mkz-navbar-bg) !important;
  color: var(--mkz-text) !important;
}

/* Card chrome parity */
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
html.dark-style .card-header,
html.dark-style .card-footer {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text);
}

/* Perfect Scrollbar (Sneat) */
html.dark-style .ps__thumb-x, html.dark-style .ps__thumb-y { background-color: color-mix(in sRGB, var(--mkz-text) 20%, black); }
html.dark-style .ps__rail-x:hover, html.dark-style .ps__rail-y:hover { background-color: color-mix(in sRGB, var(--mkz-text) 8%, black); }
/* Ensure page backgrounds honor dark body color (prevents white backgrounds) */
[data-bs-theme="dark"] body,
html.dark-style body,
[data-bs-theme="dark"] .content-wrapper,
html.dark-style .content-wrapper,
[data-bs-theme="dark"] .authentication-wrapper,
html.dark-style .authentication-wrapper {
  background-color: var(--bs-body-bg) !important;
}

/* Sidebar/menu link colors (override vendor light palette in dark theme) */
[data-bs-theme="dark"] .bg-menu-theme .menu-link,
html.dark-style .bg-menu-theme .menu-link {
  color: var(--mkz-text) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-link:hover,
[data-bs-theme="dark"] .bg-menu-theme .menu-link:focus,
html.dark-style .bg-menu-theme .menu-link:hover,
html.dark-style .bg-menu-theme .menu-link:focus {
  color: var(--mkz-link) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-item.disabled .menu-link,
html.dark-style .bg-menu-theme .menu-item.disabled .menu-link {
  color: var(--mkz-text-muted) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-header,
[data-bs-theme="dark"] .bg-menu-theme .menu-text,
html.dark-style .bg-menu-theme .menu-header,
html.dark-style .bg-menu-theme .menu-text {
  color: var(--mkz-text-muted) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
html.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: var(--mkz-link) !important;
  background-color: color-mix(in sRGB, var(--mkz-menu-bg) 85%, white) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon,
html.dark-style .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
  color: var(--mkz-link) !important;
}
[data-bs-theme="dark"] .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before,
html.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
  background-color: var(--mkz-link) !important;
  box-shadow: 0 0 0 2px var(--mkz-menu-bg) !important;
}

/* Profile bio content inside cards: ensure readable text in dark */
[data-bs-theme="dark"] .pf-bio-content p,
html.dark-style .pf-bio-content p { color: var(--mkz-text); }

/* Auth page theming: ensure alerts and primary actions match dark palette */
/* CRITICAL: These styles use --mkz-* variables which are ONLY defined in dark mode.
   They MUST be scoped to [data-bs-theme="dark"] or html.dark-style to avoid
   invisible buttons in light mode (see login-theme-screenshot test). */
[data-bs-theme="dark"] .authentication-inner .alert,
html.dark-style .authentication-inner .alert {
  background-color: var(--mkz-muted-bg);
  color: var(--mkz-text);
  border-color: var(--mkz-border);
}
[data-bs-theme="dark"] .authentication-inner .input-group .input-group-text,
html.dark-style .authentication-inner .input-group .input-group-text {
  background-color: var(--bs-input-bg);
  color: var(--bs-input-color);
  border-color: var(--bs-input-border-color);
}
[data-bs-theme="dark"] .authentication-inner .alert.alert-info,
html.dark-style .authentication-inner .alert.alert-info {
  background-color: color-mix(in sRGB, var(--mkz-muted-bg) 85%, #0dcaf0);
  border-color: color-mix(in sRGB, var(--mkz-border) 80%, #0dcaf0);
}
[data-bs-theme="dark"] .authentication-inner .alert.alert-danger,
html.dark-style .authentication-inner .alert.alert-danger {
  background-color: color-mix(in sRGB, var(--mkz-muted-bg) 85%, #dc3545);
  border-color: color-mix(in sRGB, var(--mkz-border) 80%, #dc3545);
}

/* Authentication page card - HIGH PRIORITY override for login/register cards */
[data-bs-theme="dark"] .authentication-inner .card,
html.dark-style .authentication-inner .card,
[data-bs-theme="dark"] .authentication-wrapper .card,
html.dark-style .authentication-wrapper .card {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Card body inside authentication */
[data-bs-theme="dark"] .authentication-inner .card-body,
html.dark-style .authentication-inner .card-body {
  background-color: transparent !important;
  color: var(--mkz-text) !important;
}

/* Form labels in authentication */
[data-bs-theme="dark"] .authentication-inner label,
html.dark-style .authentication-inner label {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .authentication-inner .btn-primary,
html.dark-style .authentication-inner .btn-primary {
  background-color: var(--mkz-link) !important;
  border-color: var(--mkz-link) !important;
}
[data-bs-theme="dark"] .authentication-inner .btn-primary:hover,
[data-bs-theme="dark"] .authentication-inner .btn-primary:focus,
html.dark-style .authentication-inner .btn-primary:hover,
html.dark-style .authentication-inner .btn-primary:focus {
  background-color: var(--mkz-link-hover) !important;
  border-color: var(--mkz-link-hover) !important;
  box-shadow: 0 0.2rem 0.4rem var(--mkz-focus-ring);
}

/* ============================================================================
   COMPREHENSIVE DARK MODE OVERRIDES
   Added: 2025-11-24
   Purpose: Fix hardcoded light colors in app.css that don't respond to dark mode
   Reference: docs/plans/dark-mode-comprehensive-fix-plan.md
   ============================================================================ */

/* --- Semantic Color Variables (Dark Mode Appropriate) --- */
html.dark-style,
[data-bs-theme="dark"] {
  /* Success colors (dark-appropriate green) */
  --mkz-success: #2e7d32;
  --mkz-success-text: #81c784;
  --mkz-success-bg: color-mix(in sRGB, var(--mkz-panel) 85%, #2e7d32);

  /* Warning colors (dark-appropriate amber) */
  --mkz-warning: #f57c00;
  --mkz-warning-text: #ffb74d;
  --mkz-warning-bg: color-mix(in sRGB, var(--mkz-panel) 85%, #f57c00);

  /* Danger colors (dark-appropriate red) */
  --mkz-danger: #c62828;
  --mkz-danger-text: #ef9a9a;
  --mkz-danger-bg: color-mix(in sRGB, var(--mkz-panel) 85%, #c62828);

  /* Info colors (dark-appropriate blue) */
  --mkz-info: #1565c0;
  --mkz-info-text: #64b5f6;
  --mkz-info-bg: color-mix(in sRGB, var(--mkz-panel) 85%, #1565c0);

  /* Interactive states */
  --mkz-hover-bg: rgba(255, 255, 255, 0.08);
  --mkz-active-bg: rgba(201, 138, 86, 0.15);
  --mkz-disabled-text: #665c54;
  --mkz-disabled-bg: rgba(0, 0, 0, 0.12);

  /* LinkedIn brand (adjusted for dark) */
  --mkz-linkedin: #0077B5;
  --mkz-linkedin-hover: #005885;
}

/* --- Directory/Member Cards (app.css ~3567-4775) --- */
[data-bs-theme="dark"] .directory-container .card,
html.dark-style .directory-container .card,
[data-bs-theme="dark"] .member-card,
html.dark-style .member-card {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .directory-container .card:hover,
html.dark-style .directory-container .card:hover,
[data-bs-theme="dark"] .member-card:hover,
html.dark-style .member-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .directory-container .card-body,
html.dark-style .directory-container .card-body {
  background-color: transparent !important;
  color: var(--mkz-text) !important;
}

/* Directory search and taglines */
[data-bs-theme="dark"] .directory-search-container,
html.dark-style .directory-search-container,
[data-bs-theme="dark"] .search-tagline,
html.dark-style .search-tagline {
  background-color: var(--mkz-surface) !important;
  color: var(--mkz-text-muted) !important;
}

/* --- Global Search/Autocomplete (app.css ~4800-4930) --- */
[data-bs-theme="dark"] .simple-search-results,
html.dark-style .simple-search-results,
[data-bs-theme="dark"] .search-results-panel,
html.dark-style .search-results-panel,
[data-bs-theme="dark"] .main-search-dropdown,
html.dark-style .main-search-dropdown {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .search-result-item,
html.dark-style .search-result-item {
  color: var(--mkz-text) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .search-result-item:hover,
html.dark-style .search-result-item:hover,
[data-bs-theme="dark"] .main-search-dropdown .select2-results__option--highlighted,
html.dark-style .main-search-dropdown .select2-results__option--highlighted {
  background-color: var(--mkz-hover-bg) !important;
  color: var(--mkz-text) !important;
}

/* --- Profile Sections (app.css ~3070-3184) --- */
[data-bs-theme="dark"] .profile-section,
html.dark-style .profile-section,
[data-bs-theme="dark"] .profile-container,
html.dark-style .profile-container {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .profile-photo-container,
html.dark-style .profile-photo-container {
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .profile-section h1,
[data-bs-theme="dark"] .profile-section h2,
[data-bs-theme="dark"] .profile-section h3,
[data-bs-theme="dark"] .profile-section h4,
html.dark-style .profile-section h1,
html.dark-style .profile-section h2,
html.dark-style .profile-section h3,
html.dark-style .profile-section h4 {
  color: var(--mkz-heading) !important;
}

/* Profile badges and chips */
[data-bs-theme="dark"] .profile-badge,
html.dark-style .profile-badge,
[data-bs-theme="dark"] .tag-chip,
html.dark-style .tag-chip {
  background-color: var(--mkz-surface-alt) !important;
  color: var(--mkz-text) !important;
  border-color: var(--mkz-border) !important;
}

/* --- Offers/Requests Cards (app.css ~5008-5335) --- */
[data-bs-theme="dark"] .or-service-item,
html.dark-style .or-service-item,
[data-bs-theme="dark"] .offer-card,
html.dark-style .offer-card,
[data-bs-theme="dark"] .request-card,
html.dark-style .request-card {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .or-service-item.actioned,
html.dark-style .or-service-item.actioned {
  background-color: var(--mkz-surface-alt) !important;
}

/* --- Form Elements with Hardcoded Colors --- */
[data-bs-theme="dark"] .input-group-text,
html.dark-style .input-group-text {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .form-check-input,
html.dark-style .form-check-input {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .form-check-input:checked,
html.dark-style .form-check-input:checked {
  background-color: var(--mkz-link) !important;
  border-color: var(--mkz-link) !important;
}

/* --- Common Utility Backgrounds --- */
/* Override hardcoded #f7f7f7, #f0f0f0, #f8f9fa, #fafbfc backgrounds */
[data-bs-theme="dark"] [style*="background-color: #f"],
[data-bs-theme="dark"] [style*="background: #f"],
html.dark-style [style*="background-color: #f"],
html.dark-style [style*="background: #f"] {
  background-color: var(--mkz-surface-alt) !important;
}

/* Specific class overrides for common light backgrounds */
[data-bs-theme="dark"] .bg-white,
html.dark-style .bg-white {
  background-color: var(--mkz-panel) !important;
}

[data-bs-theme="dark"] .bg-body,
html.dark-style .bg-body {
  background-color: var(--mkz-bg) !important;
}

/* --- Text Color Overrides --- */
/* Override hardcoded dark text colors (#212529, #333, #000) */
[data-bs-theme="dark"] .text-dark,
html.dark-style .text-dark {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .text-body,
html.dark-style .text-body {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .text-muted,
html.dark-style .text-muted {
  color: var(--mkz-text-muted) !important;
}

/* --- Success/Warning/Danger/Info Badges & Alerts --- */
[data-bs-theme="dark"] .badge.bg-success,
html.dark-style .badge.bg-success,
[data-bs-theme="dark"] .text-success,
html.dark-style .text-success {
  color: var(--mkz-success-text) !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
html.dark-style .badge.bg-warning,
[data-bs-theme="dark"] .text-warning,
html.dark-style .text-warning {
  color: var(--mkz-warning-text) !important;
}

[data-bs-theme="dark"] .badge.bg-danger,
html.dark-style .badge.bg-danger,
[data-bs-theme="dark"] .text-danger,
html.dark-style .text-danger {
  color: var(--mkz-danger-text) !important;
}

[data-bs-theme="dark"] .badge.bg-info,
html.dark-style .badge.bg-info,
[data-bs-theme="dark"] .text-info,
html.dark-style .text-info {
  color: var(--mkz-info-text) !important;
}

[data-bs-theme="dark"] .alert-success,
html.dark-style .alert-success {
  background-color: var(--mkz-success-bg) !important;
  border-color: var(--mkz-success) !important;
  color: var(--mkz-success-text) !important;
}

[data-bs-theme="dark"] .alert-warning,
html.dark-style .alert-warning {
  background-color: var(--mkz-warning-bg) !important;
  border-color: var(--mkz-warning) !important;
  color: var(--mkz-warning-text) !important;
}

[data-bs-theme="dark"] .alert-danger,
html.dark-style .alert-danger {
  background-color: var(--mkz-danger-bg) !important;
  border-color: var(--mkz-danger) !important;
  color: var(--mkz-danger-text) !important;
}

[data-bs-theme="dark"] .alert-info,
html.dark-style .alert-info {
  background-color: var(--mkz-info-bg) !important;
  border-color: var(--mkz-info) !important;
  color: var(--mkz-info-text) !important;
}

/* --- LinkedIn/Social Buttons (keep brand colors but adjust for dark) --- */
[data-bs-theme="dark"] .linkedin-signin-button,
html.dark-style .linkedin-signin-button {
  background-color: var(--mkz-linkedin) !important;
  border-color: var(--mkz-linkedin) !important;
}

[data-bs-theme="dark"] .linkedin-signin-button:hover,
html.dark-style .linkedin-signin-button:hover {
  background-color: var(--mkz-linkedin-hover) !important;
  border-color: var(--mkz-linkedin-hover) !important;
}

/* --- Dividers and Borders --- */
[data-bs-theme="dark"] .divider-text,
html.dark-style .divider-text {
  color: var(--mkz-text-muted) !important;
}

[data-bs-theme="dark"] .divider-text::before,
[data-bs-theme="dark"] .divider-text::after,
html.dark-style .divider-text::before,
html.dark-style .divider-text::after {
  border-color: var(--mkz-border) !important;
}

/* --- Modal/Dropdown Enhancements --- */
[data-bs-theme="dark"] .modal-header,
html.dark-style .modal-header {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .modal-body,
html.dark-style .modal-body {
  background-color: var(--mkz-panel) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .modal-footer,
html.dark-style .modal-footer {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
}

/* --- Select2 Dropdowns (commonly used) --- */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html.dark-style .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
html.dark-style .select2-container--default .select2-selection--multiple {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .select2-dropdown,
html.dark-style .select2-dropdown {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .select2-results__option,
html.dark-style .select2-results__option {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .select2-results__option--highlighted,
html.dark-style .select2-results__option--highlighted {
  background-color: var(--mkz-hover-bg) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .select2-selection__rendered,
html.dark-style .select2-selection__rendered {
  color: var(--mkz-text) !important;
}

/* --- Placeholder Text --- */
[data-bs-theme="dark"] ::placeholder,
html.dark-style ::placeholder {
  color: var(--mkz-text-muted) !important;
  opacity: 0.7;
}

[data-bs-theme="dark"] .form-control::placeholder,
html.dark-style .form-control::placeholder {
  color: var(--mkz-text-muted) !important;
}

/* ============================================================================
   POST-LOGIN DARK MODE FIXES
   Added: 2025-11-24
   Purpose: Fix remaining white backgrounds on home, profile, directory, offers
   Reference: docs/plans/dark-mode-comprehensive-implementation-spec.md
   ============================================================================ */

/* --- Bootstrap Dropdown Menus (CRITICAL - affects all pages) --- */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu.w-100,
[data-bs-theme="dark"] ul.dropdown-menu,
html.dark-style .dropdown-menu,
html.dark-style .dropdown-menu.w-100,
html.dark-style ul.dropdown-menu {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .dropdown-item,
html.dark-style .dropdown-item {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus {
  background-color: var(--mkz-hover-bg) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active,
html.dark-style .dropdown-item.active,
html.dark-style .dropdown-item:active {
  background-color: var(--mkz-active-bg) !important;
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .dropdown-divider,
html.dark-style .dropdown-divider {
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .dropdown-header,
html.dark-style .dropdown-header {
  color: var(--mkz-text-muted) !important;
}

/* --- Close Buttons (affects modals, alerts, toasts) --- */
[data-bs-theme="dark"] .btn-close,
html.dark-style .btn-close {
  background-color: transparent !important;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

[data-bs-theme="dark"] .btn-close:hover,
html.dark-style .btn-close:hover {
  background-color: transparent !important;
  opacity: 1;
}

/* --- Home Navigation Buttons --- */
[data-bs-theme="dark"] .home-nav-btn,
html.dark-style .home-nav-btn {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .home-nav-btn:hover,
html.dark-style .home-nav-btn:hover {
  background-color: var(--mkz-hover-bg) !important;
  border-color: var(--mkz-link) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .home-nav-btn.active,
html.dark-style .home-nav-btn.active {
  background-color: var(--mkz-active-bg) !important;
  border-color: var(--mkz-link) !important;
  color: var(--mkz-link) !important;
}

/* --- Team Cards (Directory page) --- */
[data-bs-theme="dark"] .team-card,
html.dark-style .team-card {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .team-card:hover,
html.dark-style .team-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .team-card-header,
[data-bs-theme="dark"] .team-card .card-header,
html.dark-style .team-card-header,
html.dark-style .team-card .card-header {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-heading) !important;
}

[data-bs-theme="dark"] .team-card-body,
[data-bs-theme="dark"] .team-card .card-body,
html.dark-style .team-card-body,
html.dark-style .team-card .card-body {
  background-color: transparent !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .team-card a,
html.dark-style .team-card a {
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .team-card a:hover,
html.dark-style .team-card a:hover {
  color: var(--mkz-link-hover) !important;
}

/* --- Offers/Requests Service Items --- */
[data-bs-theme="dark"] .or-service-item,
html.dark-style .or-service-item {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .or-service-item:hover,
html.dark-style .or-service-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .or-service-item.actioned,
html.dark-style .or-service-item.actioned {
  background-color: var(--mkz-surface-alt) !important;
  opacity: 0.85;
}

[data-bs-theme="dark"] .or-service-item .or-header,
[data-bs-theme="dark"] .or-service-item h5,
[data-bs-theme="dark"] .or-service-item h6,
html.dark-style .or-service-item .or-header,
html.dark-style .or-service-item h5,
html.dark-style .or-service-item h6 {
  color: var(--mkz-heading) !important;
}

[data-bs-theme="dark"] .or-service-item .or-description,
[data-bs-theme="dark"] .or-service-item p,
html.dark-style .or-service-item .or-description,
html.dark-style .or-service-item p {
  color: var(--mkz-text-muted) !important;
}

[data-bs-theme="dark"] .or-service-item a,
html.dark-style .or-service-item a {
  color: var(--mkz-link) !important;
}

/* OR photo/avatar borders */
[data-bs-theme="dark"] .or-photo,
[data-bs-theme="dark"] .or-avatar,
html.dark-style .or-photo,
html.dark-style .or-avatar {
  border-color: var(--mkz-border) !important;
}

/* OR action buttons */
[data-bs-theme="dark"] .or-service-item .btn-outline-secondary,
html.dark-style .or-service-item .btn-outline-secondary {
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .or-service-item .btn-outline-secondary:hover,
html.dark-style .or-service-item .btn-outline-secondary:hover {
  background-color: var(--mkz-hover-bg) !important;
  border-color: var(--mkz-link) !important;
  color: var(--mkz-text) !important;
}

/* --- Generic Light Background Overrides --- */
/* Catch-all for elements with inline white backgrounds */
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background: white"],
[data-bs-theme="dark"] [style*="background:#fff"],
html.dark-style [style*="background-color: white"],
html.dark-style [style*="background-color:#fff"],
html.dark-style [style*="background: white"],
html.dark-style [style*="background:#fff"] {
  background-color: var(--mkz-panel) !important;
}

/* --- Modal Enhancements --- */
[data-bs-theme="dark"] .modal-backdrop,
html.dark-style .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] .modal-content,
html.dark-style .modal-content {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .modal-header,
html.dark-style .modal-header {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-heading) !important;
}

[data-bs-theme="dark"] .modal-title,
html.dark-style .modal-title {
  color: var(--mkz-heading) !important;
}

[data-bs-theme="dark"] .modal-body,
html.dark-style .modal-body {
  background-color: var(--mkz-panel) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .modal-footer,
html.dark-style .modal-footer {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
}

/* --- Toast Notifications --- */
[data-bs-theme="dark"] .toast,
html.dark-style .toast {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .toast-header,
html.dark-style .toast-header {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .toast-body,
html.dark-style .toast-body {
  color: var(--mkz-text) !important;
}

/* --- Popover Enhancements --- */
[data-bs-theme="dark"] .popover,
html.dark-style .popover {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .popover-header,
html.dark-style .popover-header {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-heading) !important;
}

[data-bs-theme="dark"] .popover-body,
html.dark-style .popover-body {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .bs-popover-top .popover-arrow::after,
[data-bs-theme="dark"] .bs-popover-auto[data-popper-placement^=top] .popover-arrow::after,
html.dark-style .bs-popover-top .popover-arrow::after,
html.dark-style .bs-popover-auto[data-popper-placement^=top] .popover-arrow::after {
  border-top-color: var(--mkz-panel) !important;
}

[data-bs-theme="dark"] .bs-popover-bottom .popover-arrow::after,
[data-bs-theme="dark"] .bs-popover-auto[data-popper-placement^=bottom] .popover-arrow::after,
html.dark-style .bs-popover-bottom .popover-arrow::after,
html.dark-style .bs-popover-auto[data-popper-placement^=bottom] .popover-arrow::after {
  border-bottom-color: var(--mkz-panel) !important;
}

/* --- Offcanvas (Slide-out panels) --- */
[data-bs-theme="dark"] .offcanvas,
html.dark-style .offcanvas {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .offcanvas-header,
html.dark-style .offcanvas-header {
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .offcanvas-title,
html.dark-style .offcanvas-title {
  color: var(--mkz-heading) !important;
}

/* --- List Groups --- */
[data-bs-theme="dark"] .list-group-item,
html.dark-style .list-group-item {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .list-group-item:hover,
html.dark-style .list-group-item:hover {
  background-color: var(--mkz-hover-bg) !important;
}

[data-bs-theme="dark"] .list-group-item.active,
html.dark-style .list-group-item.active {
  background-color: var(--mkz-active-bg) !important;
  border-color: var(--mkz-link) !important;
  color: var(--mkz-link) !important;
}

/* --- Accordion --- */
[data-bs-theme="dark"] .accordion-item,
html.dark-style .accordion-item {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .accordion-button,
html.dark-style .accordion-button {
  background-color: var(--mkz-surface) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed),
html.dark-style .accordion-button:not(.collapsed) {
  background-color: var(--mkz-active-bg) !important;
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .accordion-button::after,
html.dark-style .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .accordion-body,
html.dark-style .accordion-body {
  background-color: var(--mkz-panel) !important;
  color: var(--mkz-text) !important;
}

/* --- Tabs and Nav Pills --- */
[data-bs-theme="dark"] .nav-tabs .nav-link,
html.dark-style .nav-tabs .nav-link {
  color: var(--mkz-text-muted) !important;
  border-color: transparent !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
html.dark-style .nav-tabs .nav-link:hover {
  color: var(--mkz-text) !important;
  border-color: var(--mkz-border) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
html.dark-style .nav-tabs .nav-link.active {
  background-color: var(--mkz-panel) !important;
  border-color: var(--mkz-border) var(--mkz-border) var(--mkz-panel) !important;
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link,
html.dark-style .nav-pills .nav-link {
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover,
html.dark-style .nav-pills .nav-link:hover {
  background-color: var(--mkz-hover-bg) !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
html.dark-style .nav-pills .nav-link.active {
  background-color: var(--mkz-link) !important;
  color: #fff !important;
}

/* --- Pagination --- */
[data-bs-theme="dark"] .page-link,
html.dark-style .page-link {
  background-color: var(--mkz-surface) !important;
  border-color: var(--mkz-border) !important;
  color: var(--mkz-text) !important;
}

[data-bs-theme="dark"] .page-link:hover,
html.dark-style .page-link:hover {
  background-color: var(--mkz-hover-bg) !important;
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .page-item.active .page-link,
html.dark-style .page-item.active .page-link {
  background-color: var(--mkz-link) !important;
  border-color: var(--mkz-link) !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .page-item.disabled .page-link,
html.dark-style .page-item.disabled .page-link {
  background-color: var(--mkz-surface-alt) !important;
  color: var(--mkz-disabled-text) !important;
}

/* --- Breadcrumbs --- */
[data-bs-theme="dark"] .breadcrumb,
html.dark-style .breadcrumb {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .breadcrumb-item a,
html.dark-style .breadcrumb-item a {
  color: var(--mkz-link) !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active,
html.dark-style .breadcrumb-item.active {
  color: var(--mkz-text-muted) !important;
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
html.dark-style .breadcrumb-item + .breadcrumb-item::before {
  color: var(--mkz-text-muted) !important;
}

/* --- Progress Bars --- */
[data-bs-theme="dark"] .progress,
html.dark-style .progress {
  background-color: var(--mkz-surface-alt) !important;
}

[data-bs-theme="dark"] .progress-bar,
html.dark-style .progress-bar {
  background-color: var(--mkz-link) !important;
}

/* --- Spinners --- */
[data-bs-theme="dark"] .spinner-border,
[data-bs-theme="dark"] .spinner-grow,
html.dark-style .spinner-border,
html.dark-style .spinner-grow {
  color: var(--mkz-link) !important;
}