/* ═══════════════════════════════════════════════════════════════════════════
ph-dark-mode.css — dark-mode corrections
---------------------------------------------------------------------------
Linked in App.razor after app.css so these corrections win on any tie:
Requires data-mud-theme="dark" on — set by ph-theme.js (adapted from the
source handoff's data-ph-theme to match the attribute name every other [data-mud-theme]
rule in app.css/ph-components.css already expects).
Without that attribute none of this applies and the bug persists.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Stop inherited text colour leaking into ph-* surfaces ──────────────
THE ACTUAL FIX for white-on-white. MudBlazor sets a light default text colour
on the body in dark mode; any ph-* surface that did not pin its own colour
inherited it while keeping a light background. Pin colour wherever we pin
background, in BOTH themes, so the pair can never mismatch. */
.ph-card,
.ph-card__body,
.ph-kpi-card,
.ph-filterbar,
.ph-grid__head,
.ph-grid__row,
.ph-cardlist__item,
.ph-cardlist__inset,
.ph-note,
.ph-timeline__values,
.ph-matrix,
.ph-matrix th,
.ph-matrix td,
.ph-pager,
.ph-segmented,
.ph-select,
.ph-search,
.ph-table-search,
.ph-scope {
color: var(--ph-text);
}
.ph-card__sub,
.ph-cell__meta,
.ph-cell__key,
.ph-kpi-card__sub,
.ph-note__stamp,
.ph-timeline__meta,
.ph-pager__range,
.ph-filterbar__count,
.ph-matrix__empty { color: var(--ph-text-3); }
.ph-kpi-card__label,
.ph-matrix tbody th,
.ph-timeline__values { color: var(--ph-text-2); }
/* Inputs inherit their own colour and need the placeholder handled explicitly */
.ph-search input,
.ph-table-search input,
.ph-select select,
.ph-pager__btn,
textarea { color: var(--ph-text); }
.ph-search input::placeholder,
.ph-table-search input::placeholder,
textarea::placeholder { color: var(--ph-text-3); opacity: 1; }
/* Native select dropdown list — inherits the page, not the control, in some browsers */
[data-mud-theme="dark"] .ph-select select option {
background: var(--ph-surface);
color: var(--ph-text);
}
/* ── 2. AppBar — light-mode cyan is too bright against a dark page ─────────── */
[data-mud-theme="dark"] .ph-appbar,
[data-mud-theme="dark"] .mud-appbar {
background: linear-gradient(180deg, #0090B5 0%, #006F8C 100%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* AppBar contents stay white on the saturated fill in both themes */
[data-mud-theme="dark"] .ph-appbar,
[data-mud-theme="dark"] .ph-appbar .mud-icon-button,
[data-mud-theme="dark"] .ph-appbar input { color: #fff; }
[data-mud-theme="dark"] .ph-appbar input::placeholder { color: rgba(255, 255, 255, 0.75); }
/* ── 3. Drawer ────────────────────────────────────────────────────────────── */
[data-mud-theme="dark"] .ph-drawer,
[data-mud-theme="dark"] .mud-drawer {
background: var(--ph-surface);
border-right: 1px solid var(--ph-divider);
}
[data-mud-theme="dark"] .ph-nav-footer { border-top-color: rgba(53, 197, 234, 0.22); }
/* ── 4. Sign-in — the brand panel keeps its gradient; the form side darkens ── */
[data-mud-theme="dark"] .ph-signin-panel { background: var(--ph-bg); }
[data-mud-theme="dark"] .ph-signin-identity-row { background: var(--ph-surface); border-color: var(--ph-divider); }
[data-mud-theme="dark"] .ph-signin-identity-row.is-selected {
background: var(--ph-internal-bg);
border-color: var(--ph-primary);
}
/* ── 5. Elevation reads as lighter-surface in dark, not heavier shadow ─────── */
[data-mud-theme="dark"] .ph-card,
[data-mud-theme="dark"] .ph-kpi-card,
[data-mud-theme="dark"] .ph-filterbar,
[data-mud-theme="dark"] .ph-pager { box-shadow: none; }
[data-mud-theme="dark"] .ph-kpi-card--clickable:hover,
[data-mud-theme="dark"] .ph-pager__btn:hover:not(:disabled) { border-color: var(--ph-primary); }
/* ── 6. Things that must NOT change with theme ────────────────────────────────
Retailer accents are brand colours from KnownRetailers.cs, and the stoplight
is a safety signal. Both stay identical in both themes. */
.ph-retailer__swatch { background: var(--ph-retailer-color); }
.ph-stoplight--exception { background: var(--ph-red); }
.ph-stoplight--clean { background: var(--ph-green); }
.ph-stoplight { color: #fff; }
/* ── 7. Scrollbars ────────────────────────────────────────────────────────── */
[data-mud-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
[data-mud-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-mud-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-mud-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.18);
border-radius: 5px;
}
[data-mud-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
/* ── 8. Sticky matrix cells must repaint their own background ──────────────── */
[data-mud-theme="dark"] .ph-matrix thead th { background: var(--ph-surface-2); }
[data-mud-theme="dark"] .ph-matrix tbody th { background: var(--ph-surface); }
/* ── 9. Body ──────────────────────────────────────────────────────────────── */
[data-mud-theme="dark"] body,
[data-mud-theme="dark"] .mud-layout { background: var(--ph-bg); color: var(--ph-text); }