/**
 * Dark Mode Stylesheet for Privacy Platform
 * US-077: Dark Mode Implementation
 * 
 * Uses CSS custom properties for easy theming
 * Bootstrap 5.3+ dark mode compatible (data-bs-theme="dark")
 * WCAG AA contrast compliant
 */

/* ==========================================================================
   CSS Variables - Light Mode (Default)
   Fallback values when no .palette-* class is applied.
   Aligned with palette-refined-teal (system default) so there is no
   visual shift if the palette class is missing from <html>.
   ========================================================================== */
:root {
    /* Primary colors — Governance Teal */
    --pp-primary: #176B66;
    --pp-primary-hover: #125853;
    --pp-primary-rgb: 23, 107, 102;

    /* Background colors */
    --pp-bg-body: #F5F7F8;
    --pp-bg-surface: #ffffff;
    --pp-bg-surface-elevated: #ffffff;
    --pp-bg-input: rgba(0, 0, 0, 0.04);
    --pp-bg-hover: #F0F3F4;
    --pp-bg-active: #E7ECEE;
    --pp-bg-code: #F5F7F8;

    /* Text colors */
    --pp-text-primary: #17212B;
    --pp-text-secondary: #536170;
    --pp-text-muted: #7A8793;
    --pp-text-inverse: #ffffff;
    --pp-text-link: #176B66;

    /* Border colors */
    --pp-border-color: #DDE3E6;
    --pp-border-color-light: #EDF1F2;
    --pp-border-color-dark: #C6D0D5;

    /* Status colors — WCAG AA compliant on white */
    --pp-success: #2E7D4F;
    --pp-success-bg: #EDF7F1;
    --pp-danger: #B34045;
    --pp-danger-bg: #FCEEEF;
    --pp-warning: #9A650C;
    --pp-warning-bg: #FBF5E8;
    --pp-info: #2D6E9B;
    --pp-info-bg: #EDF5FA;

    /* Shadows */
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Navbar — white top bar (was blue #0d6efd) */
    --pp-navbar-bg: #ffffff;
    --pp-navbar-text: #17212B;

    /* Sidebar — light bg (Apple style) */
    --pp-sidebar-bg: #F0F3F4;
    --pp-sidebar-text: #34424F;
    --pp-sidebar-hover-bg: rgba(23, 107, 102, 0.08);
    --pp-sidebar-active-bg: #176B66;
    --pp-sidebar-active-text: #ffffff;

    /* Cards */
    --pp-card-bg: #ffffff;
    --pp-card-border: transparent;
    --pp-card-header-bg: #F5F7F8;

    /* Tables */
    --pp-table-bg: #ffffff;
    --pp-table-striped-bg: transparent;
    --pp-table-hover-bg: rgba(0, 0, 0, 0.03);
    --pp-table-border: rgba(0, 0, 0, 0.06);

    /* Forms */
    --pp-input-bg: rgba(0, 0, 0, 0.04);
    --pp-input-border: transparent;
    --pp-input-focus-border: rgba(23, 107, 102, 0.48);
    --pp-input-focus-shadow: 0 0 0 3px rgba(23, 107, 102, 0.16);
    --pp-input-disabled-bg: #E7ECEE;

    /* Modals */
    --pp-modal-bg: #ffffff;
    --pp-modal-header-bg: #F5F7F8;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.4);

    /* Toast */
    --pp-toast-bg: #ffffff;
    --pp-toast-border: #DDE3E6;

    /* Badges */
    --pp-badge-primary-bg: #176B66;
    --pp-badge-secondary-bg: #536170;

    /* Charts */
    --pp-chart-grid: #DDE3E6;
    --pp-chart-text: #536170;
    --pp-chart-tooltip-bg: #ffffff;
    --pp-chart-tooltip-border: #DDE3E6;

    /* Code */
    --pp-code-bg: #F5F7F8;
    --pp-code-text: #176B66;

    /* Scrollbar */
    --pp-scrollbar-track: #F0F3F4;
    --pp-scrollbar-thumb: #C6D0D5;
    --pp-scrollbar-thumb-hover: #7A8793;
}

/* ==========================================================================
   CSS Variables - Dark Mode
   Fallback dark values when no .palette-* class is applied.
   Aligned with palette-refined-teal dark variant.
   ========================================================================== */
.dark-mode,
[data-bs-theme="dark"] {
    /* Primary colors — Governance Teal, softened for dark surfaces */
    --pp-primary: #78B8B1;
    --pp-primary-hover: #91CAC3;
    --pp-primary-rgb: 120, 184, 177;

    /* Background colors */
    --pp-bg-body: #10171E;
    --pp-bg-surface: #18222C;
    --pp-bg-surface-elevated: #202C37;
    --pp-bg-input: #202C37;
    --pp-bg-hover: #202C37;
    --pp-bg-active: #293844;
    --pp-bg-code: #202C37;

    /* Text colors */
    --pp-text-primary: #E7EDF2;
    --pp-text-secondary: #A7B2BD;
    --pp-text-muted: #778592;
    --pp-text-inverse: #10171E;
    --pp-text-link: #89C5BE;

    /* Border colors */
    --pp-border-color: rgba(255, 255, 255, 0.1);
    --pp-border-color-light: rgba(255, 255, 255, 0.06);
    --pp-border-color-dark: rgba(255, 255, 255, 0.2);

    /* Status colors — dark mode, lighter shades for dark backgrounds */
    --pp-success: #63B985;
    --pp-success-bg: rgba(99, 185, 133, 0.14);
    --pp-danger: #E77B7E;
    --pp-danger-bg: rgba(231, 123, 126, 0.14);
    --pp-warning: #D6A34B;
    --pp-warning-bg: rgba(214, 163, 75, 0.14);
    --pp-info: #6FA9D6;
    --pp-info-bg: rgba(111, 169, 214, 0.14);

    /* Shadows - more subtle in dark mode */
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);

    /* Navbar */
    --pp-navbar-bg: #18222C;
    --pp-navbar-text: #E7EDF2;

    /* Sidebar */
    --pp-sidebar-bg: #0D151D;
    --pp-sidebar-text: #A7B2BD;
    --pp-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --pp-sidebar-active-bg: rgba(120, 184, 177, 0.18);
    --pp-sidebar-active-text: #A7D6D0;

    /* Cards */
    --pp-card-bg: #18222C;
    --pp-card-border: rgba(255, 255, 255, 0.1);
    --pp-card-header-bg: #202C37;

    /* Tables */
    --pp-table-bg: #18222C;
    --pp-table-striped-bg: #202C37;
    --pp-table-hover-bg: #293844;
    --pp-table-border: rgba(255, 255, 255, 0.1);

    /* Forms */
    --pp-input-bg: #202C37;
    --pp-input-border: rgba(255, 255, 255, 0.2);
    --pp-input-focus-border: #78B8B1;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(120, 184, 177, 0.22);
    --pp-input-disabled-bg: #18222C;

    /* Modals */
    --pp-modal-bg: #18222C;
    --pp-modal-header-bg: #202C37;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);

    /* Toast */
    --pp-toast-bg: #202C37;
    --pp-toast-border: rgba(255, 255, 255, 0.1);

    /* Badges */
    --pp-badge-primary-bg: #78B8B1;
    --pp-badge-secondary-bg: #475569;

    /* Charts */
    --pp-chart-grid: rgba(255, 255, 255, 0.1);
    --pp-chart-text: #A7B2BD;
    --pp-chart-tooltip-bg: #18222C;
    --pp-chart-tooltip-border: rgba(255, 255, 255, 0.1);

    /* Code */
    --pp-code-bg: #202C37;
    --pp-code-text: #91CAC3;

    /* Scrollbar */
    --pp-scrollbar-track: #18222C;
    --pp-scrollbar-thumb: #293844;
    --pp-scrollbar-thumb-hover: #475569;
    
    /* Dropdown vars (were missing — caused transparent bg in context switcher) */
    --pp-dropdown-bg: #212529;
    --pp-dropdown-hover-bg: #2b3035;

    /* Brand color token overrides for dark mode
       These tokens are defined in app.css :root for light mode but were never
       overridden for dark mode — causing dark text (#1E293B, #475569) to render
       on dark backgrounds and become unreadable. */
    --color-text-heading:   #F1F5F9;   /* was #1E293B — dark navy, unreadable on dark bg */
    --color-text-body:      #CBD5E1;   /* was #475569 — too dark */
    --color-text-secondary: #94A3B8;   /* was #64748B — low contrast */
    --color-text-muted:     #9ca3af;   /* was #94A3B8, aligned with --pp-text-muted fix */
    --color-brand-bg:       #121417;   /* override light cyan bg for dark mode */

    /* Bootstrap overrides */
    --bs-body-color: var(--dp-text-primary);
    --bs-body-bg: var(--dp-surface-page);
    --bs-emphasis-color: var(--dp-text-primary);
    --bs-secondary-color: var(--dp-text-secondary);
    --bs-tertiary-color: var(--dp-text-muted);
    --bs-border-color: var(--dp-border-default);
    --bs-link-color: var(--dp-text-link);
}

/* ==========================================================================
   Base Styles - Apply Variables
   ========================================================================== */

/* Body */
body {
    background-color: var(--dp-surface-page);
    color: var(--dp-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode changes semantic tokens and the body baseline. Do not recolor raw headings,
   paragraphs, spans, lists or table cells: those descendants belong to their components and
   may intentionally use brand, muted, status or inverse text tokens. */
.dark-mode .text-muted,
.dark-mode .form-text,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .form-text {
    color: var(--dp-text-muted) !important;  /* readable muted — #94A3B8, 6.0:1 on dark surface */
}

/* Dark mode body - explicit override (uses --pp-* for palette compatibility) */
body.dark-mode,
html.dark-mode body,
[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body {
    background-color: var(--dp-surface-page) !important;
    color: var(--dp-text-primary) !important;
}

/* Main content wrapper dark mode */
.dark-mode .content-wrapper,
.dark-mode .main-content,
.dark-mode main,
.dark-mode #app,
.dark-mode .page-content {
    background-color: var(--dp-surface-page) !important;
}

/* Bootstrap utility classes override for dark mode */
.dark-mode .bg-light {
    background-color: var(--dp-surface-page) !important;
}

.dark-mode .bg-white {
    background-color: var(--dp-surface-primary) !important;
}

.dark-mode .bg-body {
    background-color: var(--dp-surface-page) !important;
}

/* Main layout columns */
.dark-mode .main-content-column {
    /* var(--color-brand-bg) is now overridden to #121417 in dark mode */
    background-color: var(--color-brand-bg, var(--dp-surface-page)) !important;
}

.dark-mode .sidebar-column {
    background-color: var(--dp-nav-bg) !important;
}

.dark-mode .container-fluid {
    background-color: inherit;
}

.dark-mode .text-dark {
    color: var(--dp-text-primary) !important;
}

.dark-mode .text-muted {
    color: var(--dp-text-muted) !important;
}

.dark-mode .border-end,
.dark-mode .border-start,
.dark-mode .border-top,
.dark-mode .border-bottom,
.dark-mode .border {
    border-color: var(--dp-border-default) !important;
}

/* Links */
a {
    color: var(--dp-text-link);
}

a:hover {
    color: var(--dp-interactive-primary-hover);
}

/* ==========================================================================
   Navbar Dark Mode
   ========================================================================== */
.dark-mode .navbar {
    background-color: var(--dp-navbar-bg) !important;
    border-bottom: 1px solid var(--dp-border-default);
}

.dark-mode .navbar-brand,
.dark-mode .navbar-nav .nav-link {
    color: var(--dp-nav-text) !important;
}

.dark-mode .navbar-toggler {
    border-color: var(--dp-border-default);
}

.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

/* ==========================================================================
   Context Switcher Dark Mode
   ========================================================================== */
.dark-mode .context-switcher .dropdown-menu {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
}

.dark-mode .context-switcher .dropdown-header {
    color: var(--dp-interactive-primary);
}

.dark-mode .context-switcher .dropdown-divider {
    border-color: var(--dp-border-default);
}

.dark-mode .context-item {
    color: var(--dp-text-primary);
}

.dark-mode .context-item:hover {
    background-color: var(--dp-surface-hover);
}

.dark-mode .context-item.active {
    background-color: var(--dp-interactive-primary);
    color: white;
}

.dark-mode .tenant-context {
    background-color: var(--dp-surface-primary);
}

.dark-mode .context-item .text-muted,
.dark-mode .context-item .context-description {
    color: var(--dp-text-muted) !important;
}

.dark-mode .context-item.active .text-muted,
.dark-mode .context-item.active .context-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .context-name {
    color: var(--dp-text-primary);
}

.dark-mode .context-item.active .context-name {
    color: white;
}

.dark-mode .org-connector,
.dark-mode .org-connector::before {
    background-color: var(--dp-border-default);
}

/* ==========================================================================
   Sidebar Dark Mode
   ========================================================================== */
.dark-mode .sidebar-column,
.dark-mode .unified-sidebar {
    background-color: var(--dp-nav-bg) !important;
    border-color: var(--dp-border-default) !important;
}

.dark-mode .sidebar-nav .nav-link,
.dark-mode .nav-single-item .nav-link,
.dark-mode .nav-accordion-toggle {
    color: var(--dp-nav-text);
}

.dark-mode .sidebar-nav .nav-link:hover,
.dark-mode .nav-single-item .nav-link:hover,
.dark-mode .nav-accordion-toggle:hover {
    background-color: var(--dp-surface-hover);
    color: var(--dp-interactive-primary);
}

.dark-mode .sidebar-nav .nav-link.active,
.dark-mode .nav-single-item .nav-link.active {
    background-color: var(--dp-surface-selected);
    color: var(--dp-interactive-primary);
}

.dark-mode .nav-accordion-toggle.has-active-child {
    background-color: var(--dp-surface-hover);
    color: var(--dp-interactive-primary);
}

.dark-mode .nav-accordion-child .nav-link {
    color: var(--dp-text-secondary);
}

.dark-mode .nav-accordion-child .nav-link:hover {
    background-color: var(--dp-surface-hover);
    color: var(--dp-interactive-primary);
}

.dark-mode .nav-accordion-child .nav-link.active {
    background-color: var(--dp-nav-active-bg);
    color: var(--dp-nav-active-text);
}

.dark-mode .sidebar-section-title,
.dark-mode .nav-group-title,
.dark-mode .nav-group-header h6 {
    color: var(--dp-text-tertiary);
}

.dark-mode .nav-group-header {
    color: var(--dp-text-tertiary);
}

/* Loading text in sidebar */
.dark-mode .sidebar-loading .text-muted,
.dark-mode .sidebar-nav .text-muted {
    color: var(--dp-text-muted) !important;
}

/* ==========================================================================
   Cards Dark Mode
   ========================================================================== */
.dark-mode .card {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    box-shadow: var(--shadow-l1);
}

.dark-mode .card-header {
    background-color: var(--dp-surface-secondary);
    border-bottom-color: var(--dp-border-default);
}

.dark-mode .card-footer {
    background-color: var(--dp-surface-secondary);
    border-top-color: var(--dp-border-default);
}

.dark-mode .card-title {
    color: var(--dp-text-primary);
}

.dark-mode .card:hover {
    box-shadow: var(--shadow-l1);
}

/* ==========================================================================
   Tables Dark Mode
   ========================================================================== */
.dark-mode .table {
    --bs-table-bg: var(--dp-surface-primary);
    --bs-table-striped-bg: var(--dp-surface-secondary);
    --bs-table-hover-bg: var(--dp-surface-hover);
    --bs-table-border-color: var(--dp-border-default);
    --bs-table-color: var(--dp-text-primary);
    color: var(--dp-text-primary);
    background-color: var(--dp-surface-primary);
}

.dark-mode .table > :not(caption) > * > * {
    background-color: var(--dp-surface-primary);
    border-bottom-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .table td,
.dark-mode .table th {
    color: var(--dp-text-primary);
}

.dark-mode .table td strong,
.dark-mode .table td b {
    color: var(--dp-text-primary);
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
}

.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-primary);
}

.dark-mode .table thead th,
.dark-mode thead th {
    background-color: var(--dp-surface-secondary);
    border-bottom-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .table-bordered {
    border-color: var(--dp-border-default);
}

.dark-mode .table-bordered td,
.dark-mode .table-bordered th {
    border-color: var(--dp-border-default);
}

/* ==========================================================================
   Forms Dark Mode
   ========================================================================== */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--dp-surface-input);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--dp-surface-input);
    border-color: var(--dp-border-focus);
    box-shadow: var(--shadow-l1);
    color: var(--dp-text-primary);
}

.dark-mode .form-control::placeholder {
    color: var(--dp-text-tertiary);
}

.dark-mode .form-control:disabled,
.dark-mode .form-control[readonly] {
    background-color: var(--dp-surface-secondary);
}

.dark-mode .form-label {
    color: var(--dp-text-primary);
}

.dark-mode .form-text {
    color: var(--dp-text-muted);
}

.dark-mode .form-check-input {
    background-color: var(--dp-surface-input);
    border-color: var(--dp-border-default);
}

.dark-mode .form-check-input:checked {
    background-color: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
}

.dark-mode .input-group-text {
    background-color: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

/* ==========================================================================
   Buttons Dark Mode
   ========================================================================== */
.dark-mode .btn-primary {
    --bs-btn-bg: var(--dp-interactive-primary);
    --bs-btn-border-color: var(--dp-interactive-primary);
    --bs-btn-hover-bg: var(--dp-interactive-primary-hover);
    --bs-btn-hover-border-color: var(--dp-interactive-primary-hover);
}

.dark-mode .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--dp-interactive-primary);
    --bs-btn-border-color: var(--dp-interactive-primary);
    --bs-btn-hover-bg: var(--dp-interactive-primary);
    --bs-btn-hover-color: var(--dp-text-on-primary);
}

.dark-mode .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--dp-text-secondary);
    --bs-btn-border-color: var(--dp-border-default);
    --bs-btn-hover-bg: var(--dp-surface-hover);
    --bs-btn-hover-color: var(--dp-text-primary);
}

.dark-mode .btn-outline-danger,
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--dp-status-danger);
    --bs-btn-border-color: var(--dp-status-danger);
    --bs-btn-hover-bg: var(--dp-status-danger);
    --bs-btn-hover-color: var(--dp-text-on-danger);
}

.dark-mode .btn-outline-warning,
[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: var(--dp-status-warning);
    --bs-btn-border-color: var(--dp-status-warning);
    --bs-btn-hover-bg: var(--dp-status-warning);
    --bs-btn-hover-color: var(--dp-text-primary);
}

.dark-mode .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--dp-status-success);
    --bs-btn-border-color: var(--dp-status-success);
    --bs-btn-hover-bg: var(--dp-status-success);
    --bs-btn-hover-color: var(--dp-text-inverse);
}

.dark-mode .btn-light,
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--dp-surface-primary);
    --bs-btn-border-color: var(--dp-border-default);
    --bs-btn-color: var(--dp-text-primary);
    --bs-btn-hover-bg: var(--dp-surface-hover);
}

.dark-mode .btn-outline-light,
[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--dp-text-primary);
    --bs-btn-border-color: var(--dp-border-default);
}

/* ==========================================================================
   Action Buttons — Dark Mode (Unified Design System)
   ========================================================================== */

/* Base dp-action-btn */
.dark-mode .dp-action-btn,
[data-bs-theme="dark"] .dp-action-btn {
    background-color: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-secondary);
}

.dark-mode .dp-action-btn:hover,
[data-bs-theme="dark"] .dp-action-btn:hover {
    background-color: var(--dp-surface-hover);
}

.dark-mode .dp-action-btn--primary,
[data-bs-theme="dark"] .dp-action-btn--primary {
    color: var(--dp-interactive-primary);
}

.dark-mode .dp-action-btn--info,
[data-bs-theme="dark"] .dp-action-btn--info {
    color: var(--dp-status-info);
}

.dark-mode .dp-action-btn--success,
[data-bs-theme="dark"] .dp-action-btn--success {
    color: var(--dp-status-success);
}

.dark-mode .dp-action-btn--warning,
[data-bs-theme="dark"] .dp-action-btn--warning {
    color: var(--dp-status-warning);
}

.dark-mode .dp-action-btn--danger,
[data-bs-theme="dark"] .dp-action-btn--danger {
    background-color: var(--dp-status-danger);
    border-color: var(--dp-status-danger);
    color: #FFFFFF;
}

.dark-mode .dp-action-btn--danger:hover,
[data-bs-theme="dark"] .dp-action-btn--danger:hover {
    background-color: var(--dp-status-danger-hover, #991B1B);
    border-color: var(--dp-status-danger-hover, #991B1B);
    color: #FFFFFF;
}

/* DataGrid backward compat — dark mode */
.dark-mode .data-grid .btn-group-sm .btn,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn {
    background-color: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-secondary);
}

.dark-mode .data-grid .btn-group-sm .btn:hover,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn:hover {
    background-color: var(--dp-surface-hover);
}

.dark-mode .data-grid .btn-group-sm .btn.btn-light,
.dark-mode .data-grid .btn-group-sm .btn.btn-outline-primary,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn.btn-light,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn.btn-outline-primary {
    color: var(--dp-interactive-primary);
}

.dark-mode .data-grid .btn-group-sm .btn.btn-outline-danger,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn.btn-outline-danger {
    background-color: var(--dp-status-danger);
    border-color: var(--dp-status-danger);
    color: #FFFFFF;
}

.dark-mode .data-grid .btn-group-sm .btn.btn-outline-danger:hover,
[data-bs-theme="dark"] .data-grid .btn-group-sm .btn.btn-outline-danger:hover {
    background-color: var(--dp-status-danger-hover, #991B1B);
    border-color: var(--dp-status-danger-hover, #991B1B);
    color: #FFFFFF;
}

/* Admin table backward compat — dark mode */
.dark-mode .admin-table .btn-group-sm .btn,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn {
    background-color: var(--dp-surface-secondary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-secondary);
}

.dark-mode .admin-table .btn-group-sm .btn:hover,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn:hover {
    background-color: var(--dp-surface-hover);
}

.dark-mode .admin-table .btn-group-sm .btn.btn-outline-primary,
.dark-mode .admin-table .btn-group-sm .btn.btn-light,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn.btn-outline-primary,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn.btn-light {
    color: var(--dp-interactive-primary);
}

.dark-mode .admin-table .btn-group-sm .btn.btn-outline-danger,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn.btn-outline-danger {
    background-color: var(--dp-status-danger);
    border-color: var(--dp-status-danger);
    color: #FFFFFF;
}

.dark-mode .admin-table .btn-group-sm .btn.btn-outline-danger:hover,
[data-bs-theme="dark"] .admin-table .btn-group-sm .btn.btn-outline-danger:hover {
    background-color: var(--dp-status-danger-hover, #991B1B);
    border-color: var(--dp-status-danger-hover, #991B1B);
    color: #FFFFFF;
}

/* ==========================================================================
   Modals Dark Mode
   ========================================================================== */
.dark-mode .modal-content {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .modal-header {
    background-color: var(--dp-surface-secondary);
    border-bottom-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .modal-body {
    background-color: var(--dp-surface-primary);
    color: var(--dp-text-primary);
}

.dark-mode .modal-footer {
    background-color: var(--dp-surface-secondary);
    border-top-color: var(--dp-border-default);
}

/* ==========================================================================
   dp-action-btn Elevated Variant — Dark Mode
   ========================================================================== */

.dark-mode .dp-action-btn--elevated,
[data-bs-theme="dark"] .dp-action-btn--elevated {
    background-color: var(--dp-surface-elevated);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark-mode .dp-action-btn--elevated:hover,
[data-bs-theme="dark"] .dp-action-btn--elevated:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   dp-action-btn Badge Counter — Dark Mode
   ========================================================================== */

/* Danger badge: use the dark-mode danger token (#F87171) */
.dark-mode .dp-action-btn__badge--danger,
[data-bs-theme="dark"] .dp-action-btn__badge--danger {
    background-color: var(--dp-status-danger);
    color: #FFFFFF;
}

/* Info badge: use the dark-mode info token (#38BDF8) */
.dark-mode .dp-action-btn__badge--info,
[data-bs-theme="dark"] .dp-action-btn__badge--info {
    background-color: var(--dp-status-info);
    color: var(--dp-text-inverse, #0F172A);
}

/* Success badge: use the dark-mode success token (#4ADE80) */
.dark-mode .dp-action-btn__badge--success,
[data-bs-theme="dark"] .dp-action-btn__badge--success {
    background-color: var(--dp-status-success);
    color: var(--dp-text-inverse, #0F172A);
}

/* Warning badge: use the dark-mode warning token (#FBBF24) */
.dark-mode .dp-action-btn__badge--warning,
[data-bs-theme="dark"] .dp-action-btn__badge--warning {
    background-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
}

.dark-mode .modal-title {
    color: var(--dp-text-primary);
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .modal-backdrop {
    background-color: var(--dp-surface-overlay);
}

/* Pre/Code blocks in modals */
.dark-mode pre.bg-light,
.dark-mode pre[class*="bg-"] {
    background-color: var(--dp-surface-primary) !important;
    border-color: var(--dp-border-default) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode pre code,
.dark-mode .modal-body pre code {
    color: var(--dp-text-primary);
    background-color: transparent;
}

.dark-mode .modal-body .form-label,
.dark-mode .modal-body label {
    color: var(--dp-text-primary);
}

.dark-mode .modal-body .form-text,
.dark-mode .modal-body .text-muted {
    color: var(--dp-text-muted) !important;
}

.dark-mode .modal-body h6,
.dark-mode .modal-body .fw-bold {
    color: var(--dp-text-primary);
}

.dark-mode .modal-body ol,
.dark-mode .modal-body ul {
    color: var(--dp-text-primary);
}

/* ==========================================================================
   Dropdowns Dark Mode
   ========================================================================== */
.dark-mode .dropdown-menu {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    box-shadow: var(--shadow-l1);
}

.dark-mode .dropdown-item {
    color: var(--dp-text-primary);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-primary);
}

.dark-mode .dropdown-item.active,
.dark-mode .dropdown-item:active {
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-inverse);
}

.dark-mode .dropdown-divider {
    border-top-color: var(--dp-border-default);
}

/* ==========================================================================
   Alerts Dark Mode
   ========================================================================== */
.dark-mode .alert-primary {
    --bs-alert-bg: rgba(13, 110, 253, 0.15);
    --bs-alert-border-color: rgba(13, 110, 253, 0.3);
    --bs-alert-color: var(--dp-interactive-primary);
}

.dark-mode .alert-success {
    background-color: var(--dp-status-success-bg);
    border-color: var(--dp-status-success);
    color: var(--dp-status-success);
}

.dark-mode .alert-danger {
    background-color: var(--dp-status-danger-bg);
    border-color: var(--dp-status-danger);
    color: var(--dp-status-danger);
}

.dark-mode .alert-warning {
    background-color: var(--dp-status-warning-bg);
    border-color: var(--dp-status-warning);
    color: var(--dp-status-warning);
}

.dark-mode .alert-info {
    background-color: var(--dp-status-info-bg);
    border-color: var(--dp-status-info);
    color: var(--dp-status-info);
}

/* ==========================================================================
   Badges - Light Mode & Dark Mode
   ========================================================================== */

/* Light mode badge styles - ensure proper contrast */
.badge-primary {
    background-color: var(--dp-interactive-primary);
    color: var(--dp-text-inverse);
}

.badge-secondary {
    background-color: var(--dp-text-secondary);
    color: var(--dp-text-inverse);
}

.badge-success {
    background-color: var(--dp-status-success);
    color: var(--dp-text-inverse);
}

.badge-danger {
    background-color: var(--dp-status-danger);
    color: var(--dp-text-inverse);
}

.badge-warning {
    background-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
}

.badge-info {
    background-color: var(--dp-status-info);
    color: var(--dp-text-inverse);
}

.badge-light {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
}

.badge-dark {
    background-color: var(--dp-text-primary);
    color: var(--dp-text-inverse);
}

/* Dark mode badge overrides */
.dark-mode .badge.bg-light {
    background-color: var(--dp-surface-primary) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode .badge.bg-secondary {
    background-color: var(--dp-text-tertiary) !important;
}

.dark-mode .badge-light {
    background-color: var(--dp-surface-primary) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode .badge-secondary {
    background-color: var(--dp-text-tertiary) !important;
    color: var(--dp-text-inverse) !important;
}

/* ==========================================================================
   Toast Dark Mode
   ========================================================================== */
.dark-mode .toast {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .toast-header {
    background-color: var(--dp-surface-secondary);
    border-bottom-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

/* ==========================================================================
   Accordion Dark Mode
   ========================================================================== */
.dark-mode .accordion-item {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
}

.dark-mode .accordion-button {
    background-color: var(--dp-surface-primary);
    color: var(--dp-text-primary);
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--dp-surface-hover);
    color: var(--dp-interactive-primary);
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

.dark-mode .accordion-body {
    background-color: var(--dp-surface-primary);
}

/* ==========================================================================
   Tabs & Nav Dark Mode
   ========================================================================== */
.dark-mode .nav-tabs {
    border-bottom-color: var(--dp-border-default);
}

.dark-mode .nav-tabs .nav-link {
    color: var(--dp-text-secondary);
}

.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--dp-surface-hover) var(--dp-surface-hover) var(--dp-border-default);
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default) var(--dp-border-default) var(--dp-surface-primary);
    color: var(--dp-text-primary);
}

.dark-mode .nav-pills .nav-link {
    color: var(--dp-text-secondary);
}

.dark-mode .nav-pills .nav-link.active {
    background-color: var(--dp-interactive-primary);
}

/* ==========================================================================
   Progress Bars Dark Mode
   ========================================================================== */
.dark-mode .progress {
    background-color: var(--dp-surface-hover);
}

/* ==========================================================================
   List Groups Dark Mode
   ========================================================================== */
.dark-mode .list-group-item {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .list-group-item:hover {
    background-color: var(--dp-surface-hover);
}

.dark-mode .list-group-item.active {
    background-color: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
}

/* ==========================================================================
   Pagination Dark Mode
   ========================================================================== */
.dark-mode .page-link {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-link);
}

.dark-mode .page-link:hover {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-default);
    color: var(--dp-interactive-primary-hover);
}

.dark-mode .page-item.active .page-link {
    background-color: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
}

.dark-mode .page-item.disabled .page-link {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
    color: var(--dp-text-tertiary);
}

/* ==========================================================================
   Breadcrumbs Dark Mode
   ========================================================================== */
.dark-mode .breadcrumb {
    background-color: transparent;
}

.dark-mode .breadcrumb-item a {
    color: var(--dp-text-link);
}

.dark-mode .breadcrumb-item.active {
    color: var(--dp-text-tertiary);
}

.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: var(--dp-text-tertiary);
}

/* ==========================================================================
   Tooltips & Popovers Dark Mode
   ========================================================================== */
.dark-mode .tooltip-inner {
    background-color: var(--dp-surface-primary);
    color: var(--dp-text-primary);
}

.dark-mode .popover {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-border-default);
}

.dark-mode .popover-header {
    background-color: var(--dp-surface-secondary);
    border-bottom-color: var(--dp-border-default);
    color: var(--dp-text-primary);
}

.dark-mode .popover-body {
    color: var(--dp-text-primary);
}

/* ==========================================================================
   Code Dark Mode
   ========================================================================== */
.dark-mode code {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
}

.dark-mode pre {
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-primary);
    border-color: var(--dp-border-default);
}

/* ==========================================================================
   Charts Dark Mode
   ========================================================================== */
.dark-mode .chart-container {
    background-color: var(--dp-surface-primary);
}

/* Chart.js specific styles are handled via JS chartColors object */

/* ==========================================================================
   Custom Components Dark Mode
   ========================================================================== */

/* Icon boxes */
.dark-mode .icon-box {
    background-color: var(--dp-surface-hover) !important;
}

/* Stats cards */
.dark-mode .stats-card {
    background-color: var(--dp-surface-primary);
}

/* Question blocks */
.dark-mode .question-block {
    background-color: var(--dp-surface-primary) !important;
    border-color: var(--dp-border-default) !important;
}

/* Workflow timeline */
.dark-mode .workflow-history::before {
    background-color: var(--dp-border-default);
}

.dark-mode .workflow-icon {
    background-color: var(--dp-surface-primary);
    border-color: var(--dp-interactive-primary);
}

.dark-mode .workflow-comment {
    background-color: var(--dp-surface-primary);
    border-left-color: var(--dp-interactive-primary);
}

/* Risk matrix */
.dark-mode .risk-matrix-cell {
    border-color: var(--dp-border-default);
}

/* Mobile bottom nav child items */
.dark-mode .mobile-bottom-nav .nav-item {
    color: var(--dp-text-secondary);
}

.dark-mode .mobile-bottom-nav .nav-item.active {
    color: var(--dp-interactive-primary);
}

/* Mobile more menu */
.dark-mode .mobile-more-menu {
    background-color: var(--dp-surface-primary);
}

.dark-mode .mobile-more-header {
    border-bottom-color: var(--dp-border-default);
}

.dark-mode .mobile-more-item {
    color: var(--dp-text-primary);
}

.dark-mode .mobile-more-item:hover {
    background-color: var(--dp-surface-hover);
}

/* Footer */
.dark-mode footer.main-footer {
    background-color: var(--dp-surface-primary) !important;
}

/* ==========================================================================
   Scrollbar Dark Mode
   ========================================================================== */
.dark-mode {
    scrollbar-color: var(--dp-border-strong) var(--dp-surface-secondary);
}

.dark-mode::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-mode::-webkit-scrollbar-track {
    background: var(--dp-surface-secondary);
}

.dark-mode::-webkit-scrollbar-thumb {
    background-color: var(--dp-border-strong);
    border-radius: 5px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background-color: var(--dp-text-tertiary);
}

/* ==========================================================================
   Transitions
   ========================================================================== */
body,
.card,
.btn,
.form-control,
.form-select,
.navbar,
.sidebar-column,
.modal-content,
.dropdown-menu,
.toast {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ==========================================================================
   Print - Always use light mode
   ========================================================================== */
@media print {
    .dark-mode {
        --pp-bg-body: #ffffff;
        --pp-bg-surface: #ffffff;
        --pp-text-primary: #000000;
        --pp-text-secondary: #333333;
        --pp-border-color: #cccccc;
    }
}

/* ==========================================================================
   Inline CSS Overrides - For components using hardcoded colors
   ========================================================================== */

/* Override inline background colors */
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background-color:#f8f9fa"],
.dark-mode [style*="background:#f8f9fa"] {
    background: var(--dp-surface-primary) !important;
}

.dark-mode [style*="background-color: #f1f5f9"],
.dark-mode [style*="background-color:#f1f5f9"] {
    background-color: var(--dp-surface-hover) !important;
}

.dark-mode [style*="background-color: #e9ecef"],
.dark-mode [style*="background-color:#e9ecef"] {
    background-color: var(--dp-surface-selected) !important;
}

.dark-mode [style*="background-color: #e7f3ff"],
.dark-mode [style*="background-color:#e7f3ff"] {
    background-color: var(--dp-surface-selected) !important;
}

.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background-color:#ffffff"],
.dark-mode [style*="background-color: white"] {
    background-color: var(--dp-surface-primary) !important;
}

/* Common component patterns - override inline styles */
.dark-mode .card-body[style*="background"],
.dark-mode .list-group-item[style*="background"],
.dark-mode .modal-body[style*="background"],
.dark-mode .accordion-body[style*="background"] {
    background-color: var(--dp-surface-primary) !important;
}

/* Specific component overrides */

/* User Guide */
.dark-mode .sticky-sidebar,
.dark-mode .toc-link,
.dark-mode .guide-section {
    background-color: var(--dp-surface-primary) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode .highlight-box,
.dark-mode .info-box {
    background-color: var(--dp-surface-selected) !important;
    border-color: var(--dp-interactive-primary) !important;
    color: var(--dp-text-primary) !important;
}

/* Onboarding wizard */
.dark-mode .wizard-step,
.dark-mode .onboarding-card {
    background-color: var(--dp-surface-primary) !important;
}

/* Assessment pages */
.dark-mode .assessment-card,
.dark-mode .risk-item,
.dark-mode .question-card {
    background-color: var(--dp-surface-primary) !important;
}

/* Permission components */
.dark-mode .permission-item,
.dark-mode .role-card,
.dark-mode .permission-matrix-cell {
    background-color: var(--dp-surface-primary) !important;
}

/* SSO components */
.dark-mode .sso-provider-card,
.dark-mode .sso-button-container {
    background-color: var(--dp-surface-primary) !important;
}

/* Language switcher dropdown */
.dark-mode .language-dropdown,
.dark-mode .language-option {
    background-color: var(--dp-surface-primary) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode .language-option:hover {
    background-color: var(--dp-surface-hover) !important;
}

/* MFA Setup */
.dark-mode .mfa-setup-container,
.dark-mode .qr-code-container {
    background-color: var(--dp-surface-primary) !important;
}

/* Rich Text Editor */
.dark-mode .ql-toolbar,
.dark-mode .ql-container,
.dark-mode .ql-editor {
    background-color: var(--dp-surface-primary) !important;
    border-color: var(--dp-border-default) !important;
    color: var(--dp-text-primary) !important;
}

.dark-mode .ql-toolbar button,
.dark-mode .ql-toolbar .ql-picker {
    color: var(--dp-text-primary) !important;
}

.dark-mode .ql-toolbar button:hover,
.dark-mode .ql-toolbar .ql-picker:hover {
    color: var(--dp-interactive-primary) !important;
}

.dark-mode .ql-snow .ql-stroke {
    stroke: var(--dp-text-primary) !important;
}

.dark-mode .ql-snow .ql-fill {
    fill: var(--dp-text-primary) !important;
}

/* Usage Dashboard */
.dark-mode .usage-card,
.dark-mode .usage-stat {
    background-color: var(--dp-surface-primary) !important;
}

/* Mobile Bottom Navigation */
.dark-mode .mobile-bottom-nav {
    background-color: var(--dp-surface-primary) !important;
    border-top-color: var(--dp-border-default) !important;
}

/* Cookie Banner Configuration Preview */
.dark-mode .banner-preview-container,
.dark-mode .cookie-preview {
    background-color: var(--dp-surface-primary) !important;
}

/* Domain Management */
.dark-mode .domain-card,
.dark-mode .domain-status-badge {
    background-color: var(--dp-surface-primary) !important;
}

/* Template Gallery */
.dark-mode .template-card,
.dark-mode .template-preview {
    background-color: var(--dp-surface-primary) !important;
}

/* Status colors - keep visible in dark mode */
.dark-mode .alert-warning,
.dark-mode [style*="background-color: #fff3cd"] {
    background-color: var(--dp-status-warning-bg) !important;
    color: var(--dp-status-warning) !important;
    border-color: var(--dp-status-warning-border) !important;
}

.dark-mode .alert-danger,
.dark-mode [style*="background-color: #f8d7da"] {
    background-color: var(--dp-status-danger-bg) !important;
    color: var(--dp-status-danger) !important;
    border-color: var(--dp-status-danger-border) !important;
}

.dark-mode .alert-success,
.dark-mode [style*="background-color: #d1e7dd"] {
    background-color: var(--dp-status-success-bg) !important;
    color: var(--dp-status-success) !important;
    border-color: var(--dp-status-success-border) !important;
}

.dark-mode .alert-info,
.dark-mode [style*="background-color: #cff4fc"] {
    background-color: var(--dp-status-info-bg) !important;
    color: var(--dp-status-info) !important;
    border-color: var(--dp-status-info-border) !important;
}

/* Recaptcha container */
.dark-mode .recaptcha-container {
    background-color: var(--dp-surface-primary) !important;
}