/* Dark theme: activated by setting data-theme="dark" on (see dashboard.js theme toggle). One flat background color everywhere - top bar, rail, page canvas, and every inline content section all share the exact same fill. Nothing is distinguished by a lighter/darker "card" background anymore; a border line is what defines a section (see .executive-project-hero and .workspace-copilot in styles.css for the equivalent light-mode treatment). Text is white throughout; only real links and semantic status colors (danger, score bands) carry any hue. Modals/floating menus still lean on box-shadow (--theruka-shadow/--theruka-card-shadow) to read as elevated over the same-colored page, same as Neon's own dropdowns. */ :root[data-theme="dark"]:not([data-print-theme="light"]) { color-scheme: dark; /* Base tokens (styles.css) */ --bg: #0d0f13; --panel: #0d0f13; --panel-strong: #14171c; --ink: #ffffff; --muted: rgba(255, 255, 255, 0.72); --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.28); --accent: #cbd5e1; --accent-strong: #f4f4f5; --accent-soft: rgba(255, 255, 255, 0.06); /* The light petrol (#14635a) is 2.71:1 on this page and unusable here; this is the same hue lifted until it reads, at 6.73:1. */ --accent-brand: #4aa89c; --focus: #8b98a8; --sent: #1b1e24; --received: #14171c; --warn: #eab676; /* Semantic tints for the dark page. ------------------------------------------------------------------------ Not a flip of the light values - the roles partly invert. A wash is a pale background in light and has to become a DARK tinted one here; a strong is dark ink in light and has to become light enough to read on a near-black page. So each keeps its family's hue and takes the lightness this page can use, measured rather than picked: wash >= 1.15:1 on #0d0f13 visible as a tint without glowing surface >= 1.5:1 on #0d0f13 reads as a filled chip line >= 2.2:1 on #14171c survives at one pixel strong >= 4.5:1 on #0d0f13 it is text Hue is taken from each family's most-used light member (#b91c1c, #7a4b10, #2f7d55) so the three tiers stay one family rather than three neighbours. */ --danger-wash: #331d1b; /* 1.22:1 */ --danger-surface: #512c28; /* 1.59:1 */ --danger-line: #814e48; /* 2.67:1 */ --danger-strong: #ff9589; /* 9.05:1 */ --warn-surface: #4b3216; /* 1.61:1 */ --warn-line: #795531; /* 2.70:1 */ --warn-wash: #302111; /* 1.23:1 */ --good-line: #396a4e; /* 2.86:1 */ --good-wash: #15291d; /* 1.25:1 */ --good-strong: #5cc98b; /* 9.30:1 - it is text; beside --danger-strong's 9.05 */ --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.32); --shadow-modal: 0 32px 70px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4); /* dashboard-premium.css tokens */ --theruka-green: #2fb27d; --theruka-green-strong: #6fd3a8; --theruka-green-soft: rgba(47, 178, 125, 0.16); --theruka-surface: #0d0f13; --theruka-surface-2: #14171c; --theruka-surface-3: #1b1e24; --theruka-page: #0d0f13; --theruka-rail: #0d0f13; --theruka-line: rgba(255, 255, 255, 0.16); --theruka-text: #ffffff; --theruka-muted: rgba(255, 255, 255, 0.72); --theruka-shadow: 0 22px 70px rgba(0, 0, 0, 0.55); --theruka-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); /* design-refresh.css tokens. Same two-layer idea as light mode, one step apart instead of grey-on-white: the canvas stays the flat page color and the content card lifts off it just enough to read as a surface. */ --canvas: #0d0f13; --surface: #14171c; --surface-soft: #1b1e24; --pill: rgba(255, 255, 255, 0.10); --pill-hover: rgba(255, 255, 255, 0.16); --nav-active: rgba(255, 255, 255, 0.14); --notice-bg: rgba(208, 112, 44, 0.14); --notice-line: rgba(208, 112, 44, 0.32); --notice-ink: #f0c9a8; --notice-accent: #d0702c; /* milestone-timeline-enhancements.css tokens */ --theruka-ui-bg: #0d0f13; --theruka-panel-bg: rgba(20, 23, 28, 0.97); --theruka-soft-border: rgba(255, 255, 255, 0.14); --theruka-muted-text: rgba(255, 255, 255, 0.72); --theruka-strong-text: #ffffff; --theruka-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.4); } /* Structural surfaces: explicit overrides in case a component sets a literal color instead of referencing the tokens above. */ :root[data-theme="dark"]:not([data-print-theme="light"]) body { background: var(--theruka-ui-bg); color: var(--theruka-strong-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .dashboard-shell.executive-dashboard-shell, :root[data-theme="dark"]:not([data-print-theme="light"]) .executive-dashboard-shell { background: var(--theruka-ui-bg); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"]:not([data-print-theme="light"]) .workspace-copilot { background: var(--theruka-rail); border-color: var(--theruka-line); color: var(--theruka-text); } /* styles.css's .primary-rail-nav-group-toggle/.primary-rail-nav-item hover, expanded, and active states use rgba(18,24,23,...) - a dark tint that reads correctly on the light rail background but disappears against the dark one. Restore the light-on-dark rgba(255,255,255,...) treatment here. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-group-toggle:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-group-toggle:focus-visible { background: rgba(255, 255, 255, 0.06); color: #ffffff; } :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-group-toggle[aria-expanded="true"] { background: transparent; border-left-color: #5b9bff; color: #5b9bff; } :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-item:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-item:focus-visible { background: rgba(255, 255, 255, 0.06); color: #ffffff; } :root[data-theme="dark"]:not([data-print-theme="light"]) .primary-rail-nav-item.active { background: rgba(255, 255, 255, 0.1); color: #ffffff; } :root[data-theme="dark"]:not([data-print-theme="light"]) .app-top-bar { background: var(--theruka-rail); border-color: var(--theruka-line); } :root[data-theme="dark"]:not([data-print-theme="light"]) .workspace-copilot-switcher { background: transparent; } /* Level 1 - sections/cards that sit directly on the page canvas. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .executive-project-hero, :root[data-theme="dark"]:not([data-print-theme="light"]) .plan-section, :root[data-theme="dark"]:not([data-print-theme="light"]) .executive-project-score-list, :root[data-theme="dark"]:not([data-print-theme="light"]) .executive-project-score-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .workspace-account-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .access-removed-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .account-summary, :root[data-theme="dark"]:not([data-print-theme="light"]) .sharing-link-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .executive-scorecard, :root[data-theme="dark"]:not([data-print-theme="light"]) .global-score-gauge, :root[data-theme="dark"]:not([data-print-theme="light"]) .account-plan-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .account-addon-list, :root[data-theme="dark"]:not([data-print-theme="light"]) .account-data-mode, :root[data-theme="dark"]:not([data-print-theme="light"]) .account-ai-tools, :root[data-theme="dark"]:not([data-print-theme="light"]) .project-timeline-drift, :root[data-theme="dark"]:not([data-print-theme="light"]) .compact-gantt-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .comments-thread-item, :root[data-theme="dark"]:not([data-print-theme="light"]) .onboarding-template-button, :root[data-theme="dark"]:not([data-print-theme="light"]) .automation-rule-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .webhook-list-item, :root[data-theme="dark"]:not([data-print-theme="light"]) .webhook-event-fieldset, :root[data-theme="dark"]:not([data-print-theme="light"]) .recipient-chip, :root[data-theme="dark"]:not([data-print-theme="light"]) .ai-recommendation-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .portfolio-drilldown-item, :root[data-theme="dark"]:not([data-print-theme="light"]) .dashboard-profile-link, :root[data-theme="dark"]:not([data-print-theme="light"]) .portfolio-rail-button, :root[data-theme="dark"]:not([data-print-theme="light"]) .project-detail-strip div, :root[data-theme="dark"]:not([data-print-theme="light"]) .impact-date-chip, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-timeline-marker, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-timeline-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-impact-list li, :root[data-theme="dark"]:not([data-print-theme="light"]) .entity-editor-form label.checkbox-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .export-option-form label, :root[data-theme="dark"]:not([data-print-theme="light"]) .workspace-upload { background: var(--theruka-surface); border-color: var(--theruka-line); color: var(--theruka-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .portfolio-drilldown-item:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .dashboard-profile-link:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .portfolio-rail-button:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .export-option-form label:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .mobile-nav-toggle:hover, :root[data-theme="dark"]:not([data-print-theme="light"]) .score-explanation-close { background: var(--theruka-surface-3); border-color: var(--theruka-line); color: var(--theruka-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .upload-window-header, :root[data-theme="dark"]:not([data-print-theme="light"]) .section-editor-header { border-bottom-color: var(--theruka-line); } :root[data-theme="dark"]:not([data-print-theme="light"]) .project-detail-strip dt { color: var(--theruka-muted-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .project-detail-strip dd { color: var(--theruka-strong-text); } /* "Nd late" on a project list row, which replaced the health badge below. It needs a dark rule of its own for the same reason the badge does: the blanket `... strong { color: var(--theruka-text) }` further down this file is (0,3,1), so the (0,2,1) rule in styles.css loses and the figure renders white. Caught by the colour gate, which read it as white on dark while light was correctly red. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .project-score-stack strong.project-late { color: var(--danger-strong); } /* Score bands - same semantic colors as the executive-metrics tiles above (low=red, mid=yellow, warn=orange, high=green), just as a pill badge instead of a filled tile. Covers health/complete/milestones/risk summary badges, milestone status badges, and inline tags like "Client Commitment" or "Moved". */ :root[data-theme="dark"]:not([data-print-theme="light"]) .score-badge.score-low { background: rgba(182, 76, 62, 0.28); color: #f3a898; } :root[data-theme="dark"]:not([data-print-theme="light"]) .score-badge.score-mid { background: rgba(201, 155, 17, 0.28); color: #e8c877; } :root[data-theme="dark"]:not([data-print-theme="light"]) .score-badge.score-warn { background: rgba(208, 112, 44, 0.28); color: #f0a05c; } :root[data-theme="dark"]:not([data-print-theme="light"]) .score-badge.score-high { background: rgba(58, 155, 93, 0.3); color: #6fd3a8; } /* .recommendation-priority is a , so without its own dark-mode color it fell to the blanket "span { color: var(--theruka-muted-text) }" reset below (3 selector components beats this class pair's 2), leaving the AI Recommendations priority pill with light-mode background but near-white text - unreadable. Same score-band palette as .score-badge above. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .recommendation-priority.score-low { background: rgba(182, 76, 62, 0.28); color: #f3a898; } :root[data-theme="dark"]:not([data-print-theme="light"]) .recommendation-priority.score-mid { background: rgba(201, 155, 17, 0.28); color: #e8c877; } :root[data-theme="dark"]:not([data-print-theme="light"]) .recommendation-priority.score-warn { background: rgba(208, 112, 44, 0.28); color: #f0a05c; } /* .risk-verdict-badge is a too, so it needs its own colors here for the same reason as .recommendation-priority above. Pending/inconclusive verdicts carry no score band and are left to the muted-span default deliberately. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .report-readiness-clean { background: rgba(58, 155, 93, 0.16); border-color: rgba(58, 155, 93, 0.4); } /* .milestone-confirm-tag is a too - same blanket-reset trap as .recommendation-priority and .risk-verdict-badge above. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-confirm-tag.score-high { background: rgba(58, 155, 93, 0.3); border-color: rgba(58, 155, 93, 0.45); color: #6fd3a8; } :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-confirm-tag.score-mid { background: rgba(201, 155, 17, 0.28); border-color: rgba(201, 155, 17, 0.45); color: #e8c877; } :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-confirm-tag.score-low { background: rgba(182, 76, 62, 0.28); border-color: rgba(182, 76, 62, 0.45); color: #f3a898; } :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-verdict-badge.score-low { background: rgba(182, 76, 62, 0.28); border-color: rgba(182, 76, 62, 0.45); color: #f3a898; } :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-verdict-badge.score-mid { background: rgba(201, 155, 17, 0.28); border-color: rgba(201, 155, 17, 0.45); color: #e8c877; } :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-verdict-badge.score-high { background: rgba(58, 155, 93, 0.3); border-color: rgba(58, 155, 93, 0.45); color: #6fd3a8; } /* Level 2 - modals and floating panels, one step lighter than level-1 cards so they visibly float above whatever page content sits behind them. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .pending-plan-review:not(:empty), :root[data-theme="dark"]:not([data-print-theme="light"]) .upload-window-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .confirm-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .section-editor-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .floating-detail-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .onboarding-welcome-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-focus-board, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-fork-marker div, :root[data-theme="dark"]:not([data-print-theme="light"]) .fork-detail-panel, :root[data-theme="dark"]:not([data-print-theme="light"]) .notification-dropdown, :root[data-theme="dark"]:not([data-print-theme="light"]) .onboarding-welcome-step, :root[data-theme="dark"]:not([data-print-theme="light"]) .cost-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .admin-card, :root[data-theme="dark"]:not([data-print-theme="light"]) .decision-card { background: var(--theruka-surface-2); border-color: var(--theruka-line); color: var(--theruka-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .fork-detail-panel-title { color: #f1a996; } /* Level 3 - editable rows and other blocks nested one layer inside a level-2 modal (e.g. a risk/decision row inside the section editor, or an impact/ mitigation entry inside a risk row), lighter again so they read as their own layer instead of blending into the modal around them. */ :root[data-theme="dark"]:not([data-print-theme="light"]) .section-editor-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-subentity-block, :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-subentity-list li, :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-milestone-checklist label.checkbox-row, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-focus-related details, :root[data-theme="dark"]:not([data-print-theme="light"]) .milestone-focus-detail dl div { background: var(--theruka-surface-3); border-color: var(--theruka-line); color: var(--theruka-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) .risk-editor-row.resolved input { background: rgba(255, 255, 255, 0.04); color: var(--theruka-muted-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) h1, :root[data-theme="dark"]:not([data-print-theme="light"]) h2, :root[data-theme="dark"]:not([data-print-theme="light"]) h3, :root[data-theme="dark"]:not([data-print-theme="light"]) h4, :root[data-theme="dark"]:not([data-print-theme="light"]) strong { color: var(--theruka-text); } :root[data-theme="dark"]:not([data-print-theme="light"]) p, :root[data-theme="dark"]:not([data-print-theme="light"]) small, :root[data-theme="dark"]:not([data-print-theme="light"]) span, :root[data-theme="dark"]:not([data-print-theme="light"]) .eyebrow, :root[data-theme="dark"]:not([data-print-theme="light"]) .compact-scale span { color: var(--theruka-muted-text); } /* Two button styles only: primary (unclassed