/* ───────────────────────────────────────────────────────────────────────────
   Dark-mode overrides for the app chrome.

   The app's components were built light-only and hardcode surface colours
   (white / #fff / #F5F5F4 / #FAFAFA / #E6E6E6 …) instead of MudBlazor palette
   variables, so they don't follow `IsDarkMode` on their own. This is a single,
   additive layer — no existing CSS or C# is touched — scoped under the
   `body.mud-dark-mode` class that CustomThemeService toggles. MudBlazor's own
   palette-driven components switch automatically and aren't re-styled here.

   Intentional brand accents (Deloitte navy headers, green CTAs/active tabs)
   are deliberately left alone.

   Specificity: `body.mud-dark-mode …` outranks Blazor's scoped `…[b-id]`
   selectors; deep component rules that use `!important` are matched with the
   page wrapper + `!important`. This sheet is linked LAST so equal-specificity
   ties resolve in its favour.
   ─────────────────────────────────────────────────────────────────────────── */

body.mud-dark-mode {
    background-color: #282728;
    color: #E6E6E6;
    /* Dark surface ramp, aligned with the MudBlazor dark palette + widget tokens. */
    --dm-panel: var(--mud-palette-surface);        /* #333333 — primary panels */
    --dm-raised: #3A3A3A;                          /* subtle raised surfaces */
    --dm-control: #3C3C3C;                         /* buttons / control chrome */
    --dm-hover: #3C3C3C;                           /* row / item hover */
    --dm-border: var(--mud-palette-lines-default); /* #444444 */
    --dm-text: var(--mud-palette-text-primary);    /* #E6E6E6 */
    --dm-text-soft: var(--mud-palette-text-secondary);
    --dm-link: #5ba8d8;                            /* legible blue on dark */
    --theme-header-bg: #282728;
    --theme-sidebar-bg: #282728;
    --theme-main-bg: #282728;
    --theme-shell-border: #444444;
    --theme-shell-surface: #282728;
    --theme-shell-surface-hover: #3C3C3C;
    --theme-shell-text-primary: #E6E6E6;
    --theme-shell-text-secondary: #CACACA;
    --theme-shell-text-muted: #A0A0A0;
    --badge-warn-color: #F2C464;
    --badge-ok-color: #7BD9A8;
    --badge-danger-color: #FFAA6F;
}

/* ── Contrast: links (avoid dark-blue links on a dark background) ─────────── */
body.mud-dark-mode .project-name,
body.mud-dark-mode .project-name:hover {
    color: var(--dm-link) !important;
    text-decoration-color: var(--dm-link) !important;
}

/* Anchor-style links (MudLink) sit on the page/panel surfaces; lighten the
   brand blue so it stays legible on dark. Buttons are intentionally untouched. */
body.mud-dark-mode .mud-link {
    color: var(--dm-link);
}

/* ── MudBlazor surface safety net ──
   Belt-and-braces for custom content that sits on these surfaces. */
body.mud-dark-mode .mud-paper,
body.mud-dark-mode .mud-card,
body.mud-dark-mode .mud-dialog {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

/* ── App shell (rules in app.css) ───────────────────────────────────────── */
body.mud-dark-mode .mud-toolbar .mud-input {
    background-color: var(--dm-panel) !important;
}

body.mud-dark-mode .edit-entity-button {
    background-color: var(--dm-raised) !important;
}

body.mud-dark-mode .dialog-background-title {
    background-color: var(--dm-control);
}

body.mud-dark-mode footer {
    background-color: var(--dm-raised);
    color: var(--dm-text);
}

/* ── Map / current-state screen ─────────────────────────────────────────── */
body.mud-dark-mode .flow-list-container,
body.mud-dark-mode .side-element {
    background-color: var(--dm-raised);
}

body.mud-dark-mode .current-flows-buttons {
    background-color: var(--dm-control) !important;
}

body.mud-dark-mode .current-flows-buttons button.active {
    background-color: var(--dm-panel) !important;
}

body.mud-dark-mode .entity-details-dialog {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

/* Right entity panel — CurrentStateTable (scoped under .side-container so the
   wrapper bumps specificity above the component's own !important table rules). */
body.mud-dark-mode .filter-wrapper {
    background-color: var(--dm-panel);
}

body.mud-dark-mode .metric-header.selected {
    background-color: var(--dm-control);
    color: var(--dm-text);
}

body.mud-dark-mode .side-container .mud-table-head .mud-table-cell {
    background-color: var(--dm-raised) !important;
    color: var(--dm-text) !important;
}

body.mud-dark-mode .side-container .mud-table-body .mud-table-row,
body.mud-dark-mode .side-container .mud-table-body .mud-table-cell {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

body.mud-dark-mode .side-container .mud-table-row:hover,
body.mud-dark-mode .side-container .mud-table-row:hover .mud-table-cell,
body.mud-dark-mode .side-container .icon-hovered,
body.mud-dark-mode .side-container .mud-table-row:hover + .mud-table-row.child-row-content {
    background-color: var(--dm-hover) !important;
}

/* Fact-pattern bar — FutureStateListComponent */
body.mud-dark-mode .future-state-list {
    background-color: var(--dm-panel);
}

body.mud-dark-mode .current-state-tab {
    background-color: var(--dm-raised);
}

body.mud-dark-mode .current-state-tab .tab-title,
body.mud-dark-mode .current-state-tab .tab-description {
    color: var(--dm-text);
}

/* Keep dark text on the green active tab (legible on the light-green fill). */
body.mud-dark-mode .current-state-tab.active .tab-title,
body.mud-dark-mode .current-state-tab.active .tab-description {
    color: #000000;
}

body.mud-dark-mode .separator {
    background-color: var(--dm-border);
}

body.mud-dark-mode .spinner-overlay {
    background-color: rgba(25, 27, 30, 0.9);
}

/* Future-state change log / flow panels */
body.mud-dark-mode .futureState-steps {
    background-color: var(--dm-panel);
}

/* ── Projects list (landing page "/") ───────────────────────────────────── */
body.mud-dark-mode .project-list-container .mud-table-body .mud-table-row,
body.mud-dark-mode .project-list-container .mud-table-body .mud-table-cell {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

body.mud-dark-mode .project-list-container .mud-table-row:hover,
body.mud-dark-mode .project-list-container .mud-table-row:hover .mud-table-cell {
    background-color: var(--dm-hover) !important;
}

/* ── Terms & Conditions modal ───────────────────────────────────────────── */
body.mud-dark-mode .mud-dialog-actions {
    background-color: var(--dm-panel);
}

body.mud-dark-mode .terms-content {
    color: var(--dm-text);
}

/* ── AI Chat Assistant (Deloitte.Vca.AiAssistant.Client) ────────────────────
   The widget styles itself via a global <style> block with hardcoded light
   colours. Brand greens and the primary-blue selected states are left intact. */
body.mud-dark-mode .ai-chat-window {
    background-color: var(--theme-sidebar-bg);
}

body.mud-dark-mode .ai-chat-header {
    background-color: var(--theme-header-bg);
    border-bottom-color: var(--theme-shell-border);
}

body.mud-dark-mode .ai-chat-history {
    background-color: var(--theme-sidebar-bg);
}

/* Tabs + count badges */
body.mud-dark-mode .custom-tab-btn {
    color: var(--dm-text-soft) !important;
}

body.mud-dark-mode .custom-tab-btn:hover,
body.mud-dark-mode .custom-tab-btn-active {
    color: var(--dm-text) !important;
}

body.mud-dark-mode .custom-badge-chip {
    background-color: var(--dm-control) !important;
    color: var(--dm-text) !important;
}

/* Model toggle (OpenAI / Anthropic segmented control) */
body.mud-dark-mode .ai-model-toggle {
    background-color: rgba(255, 255, 255, 0.08);
}

body.mud-dark-mode .ai-model-toggle .mud-toggle-item {
    color: var(--dm-text-soft) !important;
}

/* Feedback form + grouped approval cards */
body.mud-dark-mode .ai-feedback-form {
    background-color: var(--dm-raised);
}

body.mud-dark-mode .ai-feedback-btn {
    color: rgba(255, 255, 255, 0.35) !important;
}

body.mud-dark-mode .approval-request-grouped {
    background: var(--dm-raised);
}

body.mud-dark-mode .approval-card-nested {
    background: var(--dm-raised);
}

/* ── Save / Rename Template Dialogs ──────────────────────────────────────── */
body.mud-dark-mode .save-template-dialog .save-template-subtitle,
body.mud-dark-mode .save-template-dialog .scope-title {
    color: var(--dm-text);
}

body.mud-dark-mode .save-template-dialog .save-template-form label,
body.mud-dark-mode .save-template-dialog .save-template-form .help-inline,
body.mud-dark-mode .save-template-dialog .scope-desc,
body.mud-dark-mode .save-template-dialog .close-btn,
body.mud-dark-mode .save-template-dialog .btn-cancel,
body.mud-dark-mode .save-template-dialog .help-text {
    color: var(--dm-text-soft);
}

body.mud-dark-mode .save-template-dialog .btn-cancel:hover {
    color: var(--dm-text);
}

body.mud-dark-mode .save-template-dialog .form-control {
    background-color: var(--dm-raised);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

body.mud-dark-mode .save-template-dialog .form-control:focus {
    background-color: var(--dm-panel);
    border-color: #72a230;
}

body.mud-dark-mode .save-template-dialog .form-control::placeholder {
    color: var(--dm-text-soft);
}

body.mud-dark-mode .save-template-dialog .scope-option {
    background-color: var(--dm-raised);
    border-color: var(--dm-border);
}

body.mud-dark-mode .save-template-dialog .scope-option.selected {
    background-color: rgba(114, 162, 48, 0.15);
    border-color: #72a230;
}

body.mud-dark-mode .save-template-dialog .scope-option.disabled {
    background-color: var(--dm-control);
    opacity: 0.5;
}


/* Align AI chat and layout surfaces with brand values instead of pure black */
body.mud-dark-mode .ai-chat-window,
body.mud-dark-mode .ai-chat-history {
    background-color: var(--theme-sidebar-bg) !important;
}

body.mud-dark-mode .ai-chat-header {
    background-color: var(--theme-header-bg) !important;
}

body.mud-dark-mode .mud-drawer.mud-drawer-persistent.ai-chat-drawer,
body.mud-dark-mode .mud-drawer.mud-drawer-mini.ai-chat-drawer {
    background-color: var(--theme-sidebar-bg) !important;
}

body.mud-dark-mode .app-top-header {
    background-color: var(--theme-header-bg) !important;
}

body.mud-dark-mode footer {
    background-color: var(--theme-sidebar-bg) !important;
}

body.mud-dark-mode .btn-primary-action {
    background-color: #3b82f6 !important; /* blue */
    color: #ffffff !important;
}

body.mud-dark-mode .btn-primary-action:disabled,
body.mud-dark-mode .btn-primary-action.mud-disabled {
    background-color: #000000 !important;
    color: #808080 !important;
}