/* ════════════════════════════════════════════════════════════════
RHCP — Full Platform UI Readability Audit (June 2026)
Root-cause fixes only. No layout changes.
Appended after all other CSS for maximum specificity.
════════════════════════════════════════════════════════════════ */
/* ══ FIX 1: Define missing --txt-muted token ════════════════
Used in 60+ inline styles but never declared in :root.
Resolves all var(--txt-muted) falling back to initial. */
:root {
--txt-muted: #4a6480;
}
[data-theme="dark"] {
--txt-muted: #7a9ab5;
}
/* ══ FIX 2: Sidebar active link — specificity bug ═══════════
.rhcp-sb-link wins over .rhcp-sb-link--active at equal
specificity. Fix: combine both classes in the selector. */
.rhcp-sb-link.rhcp-sb-link--active,
a.rhcp-sb-link.rhcp-sb-link--active {
color: #f0c040 !important;
font-weight: 700 !important;
background: rgba(212,160,23,.14) !important;
}
.rhcp-sb-link.rhcp-sb-link--active .rhcp-sb-link-text {
color: #f0c040 !important;
}
.rhcp-sb-link.rhcp-sb-link--active .rhcp-nav-icon svg {
stroke: #f0c040 !important;
}
.rhcp-sb-link.rhcp-sb-link--active::before {
content: '';
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
background: #f0c040;
border-radius: 0 3px 3px 0;
}
/* ══ FIX 3: .rhcp-card-section-title — faded text ═══════════
Was: color:var(--txt-muted) — too faint for a section title.
Now: var(--txt2) = 10.2:1 contrast on white. */
.rhcp-card-section-title {
color: var(--txt2) !important;
font-size: .8rem !important;
font-weight: 800 !important;
letter-spacing: .07em;
}
[data-theme="dark"] .rhcp-card-section-title {
color: #c8d8e8 !important;
}
/* ══ FIX 4: .rhcp-card-header h3 — no rule existed ═════════
Was: inherited font-weight:400, no color rule. */
.rhcp-card-header h3,
.rhcp-card-header h2 {
font-size: 1rem !important;
font-weight: 800 !important;
color: var(--txt) !important;
line-height: 1.3;
}
[data-theme="dark"] .rhcp-card-header h3,
[data-theme="dark"] .rhcp-card-header h2 {
color: #f1f5f9 !important;
}
/* ══ FIX 5: KPI values — class name mismatch ════════════════
HTML uses .rhcp-kpi-val; rule targeted .rhcp-kpi-value. */
.rhcp-kpi-val,
.rhcp-kpi-value {
font-size: 1.8rem !important;
font-weight: 900 !important;
color: var(--txt) !important;
line-height: 1 !important;
letter-spacing: -.02em;
}
[data-theme="dark"] .rhcp-kpi-val,
[data-theme="dark"] .rhcp-kpi-value {
color: #f1f5f9 !important;
}
.rhcp-kpi-label {
font-size: .72rem !important;
font-weight: 700 !important;
color: var(--txt3) !important;
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 4px;
}
[data-theme="dark"] .rhcp-kpi-label { color: #96afc5 !important; }
.rhcp-kpi-sub {
font-size: .75rem;
color: var(--txt3);
margin-top: 2px;
}
[data-theme="dark"] .rhcp-kpi-sub { color: #7a9ab5; }
/* ══ FIX 6: Table headers — weight 700 → 800 ════════════════ */
.rhcp-table th {
font-size: .74rem !important;
font-weight: 800 !important;
color: var(--txt2) !important;
background: var(--surface2) !important;
letter-spacing: .06em;
border-bottom: 2px solid var(--border2) !important;
}
[data-theme="dark"] .rhcp-table th {
color: #c8d8e8 !important;
background: rgba(255,255,255,.04) !important;
border-bottom-color: var(--border2) !important;
}
.rhcp-table td {
color: var(--txt) !important;
font-size: .875rem !important;
}
[data-theme="dark"] .rhcp-table td { color: #f1f5f9 !important; }
/* ══ FIX 7: BE and CM module headers on dark background ═════
Sub text was rgba(.86 opacity) — marginal contrast. */
.be-header__title,
.cm-header__title {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #f1f5f9 !important;
}
.be-header__sub,
.cm-header__sub {
color: rgba(220,232,250,.96) !important;
font-size: .84rem !important;
font-weight: 500 !important;
}
.be-settings-section__title,
.be-panel-title {
color: #f1f5f9 !important;
font-weight: 700 !important;
}
/* BE tabs — dark mode: near-white; light mode: dark navy */
[data-theme="dark"] .be-tab { color: rgba(220,232,250,.92) !important; font-weight: 600 !important; }
[data-theme="light"] .be-tab { color: #374f6b !important; font-weight: 600 !important; }
[data-theme="dark"] .be-tab--active { color: #f5d060 !important; font-weight: 700 !important; background: rgba(212,160,23,.14) !important; }
[data-theme="light"] .be-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
[data-theme="dark"] .be-tab:hover { color: #f5d060 !important; background: rgba(212,160,23,.08) !important; }
[data-theme="light"] .be-tab:hover { color: var(--gold) !important; background: rgba(212,160,23,.08) !important; }
/* CM tabs — dark mode: near-white; light mode: dark navy */
[data-theme="dark"] .cm-tab { color: rgba(220,232,250,.92) !important; font-weight: 600 !important; }
[data-theme="light"] .cm-tab { color: #374f6b !important; font-weight: 600 !important; }
[data-theme="dark"] .cm-tab--active { color: #f5d060 !important; font-weight: 700 !important; }
[data-theme="light"] .cm-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
[data-theme="dark"] .cm-tab:hover { color: #f5d060 !important; }
[data-theme="light"] .cm-tab:hover { color: var(--gold) !important; }
/* BE KPI values — inside dark cards, stay white in both modes */
.be-kpi-val { font-size: 1.3rem !important; font-weight: 800 !important; color: #f1f5f9 !important; }
.be-kpi-lbl { font-size: .72rem !important; font-weight: 700 !important; color: rgba(200,220,245,.90) !important; }
/* ══ FIX 8: Intelligence House — view content text ══════════ */
.intel-view-title {
font-size: 1.2rem !important;
font-weight: 800 !important;
color: var(--txt) !important;
}
.intel-view-sub { color: var(--txt2) !important; font-size: .88rem !important; }
[data-theme="dark"] .intel-view-title { color: #f1f5f9 !important; }
[data-theme="dark"] .intel-view-sub { color: #c8d8e8 !important; }
/* ══ FIX 9: Topbar breadcrumb legibility ════════════════════ */
.rhcp-topbar-breadcrumb {
font-size: .84rem;
font-weight: 600;
color: var(--txt2);
}
.rhcp-topbar-breadcrumb a {
color: var(--txt2) !important;
text-decoration: none;
font-weight: 600;
}
.rhcp-topbar-breadcrumb a:hover { color: var(--gold) !important; }
.rhcp-topbar-breadcrumb > span:not([class]) {
color: var(--txt3);
margin: 0 4px;
}
[data-theme="dark"] .rhcp-topbar-breadcrumb,
[data-theme="dark"] .rhcp-topbar-breadcrumb a { color: #c8d8e8 !important; }
/* ══ FIX 10: Marketplace tabs (light bg aware) ══════════════ */
.mp-tab { color: var(--txt2) !important; font-weight: 600 !important; }
.mp-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
.mp-tab:hover { color: var(--gold) !important; }
[data-theme="dark"] .mp-tab { color: rgba(200,220,245,.90) !important; }
/* WhatsApp tabs */
.wa-tab { color: var(--txt2) !important; font-weight: 600 !important; }
.wa-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
.wa-tab:hover { color: var(--gold) !important; }
[data-theme="dark"] .wa-tab { color: rgba(200,220,245,.90) !important; }
/* CRM tabs */
.crm-tab { color: var(--txt2) !important; font-weight: 600 !important; }
.crm-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
[data-theme="dark"] .crm-tab { color: rgba(200,220,245,.90) !important; }
/* ══ FIX 11: Administration sidebar group label ═════════════ */
.rhcp-sb-group-btn .rhcp-sb-group-label {
font-size: .72rem !important;
font-weight: 800 !important;
color: rgba(200,220,245,.94) !important;
letter-spacing: .07em;
text-transform: uppercase;
}
.rhcp-sb-group--open > .rhcp-sb-group-btn .rhcp-sb-group-label {
color: #f0c040 !important;
}
/* ══ FIX 12: Welcome banner — gold stats always visible ═════ */
.rhcp-welcome-stat-value {
color: #f5d060 !important;
font-size: 1.45rem !important;
font-weight: 900 !important;
text-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
}
.rhcp-welcome-stat-label {
color: rgba(255,255,255,.90) !important;
font-size: .72rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .06em;
text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
.rhcp-welcome-title {
font-size: 1.35rem !important;
font-weight: 900 !important;
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
}
.rhcp-welcome-sub {
color: rgba(255,255,255,.90) !important;
font-weight: 500 !important;
}
/* ══ FIX 13: Billing status cells ══════════════════════════ */
.billing-status-paid,
.billing-status-partial { color: var(--status-green) !important; font-weight: 700 !important; }
.billing-status-pending { color: var(--status-orange) !important; font-weight: 700 !important; }
.billing-status-overdue { color: var(--status-red) !important; font-weight: 700 !important; }
/* ══ FIX 14: Dark mode — card backgrounds solid ════════════ */
[data-theme="dark"] .rhcp-dashboard-card {
background: var(--surface) !important;
border-color: var(--border2) !important;
}
[data-theme="dark"] .rhcp-module-content,
[data-theme="dark"] .rhcp-content-area {
background: var(--bg) !important;
}
/* ══ FIX 15: TCH (Team Communication House) tabs ══════════ */
.tch-tab { color: var(--txt2) !important; font-weight: 600 !important; }
.tch-tab--active { color: var(--gold) !important; font-weight: 700 !important; }
[data-theme="dark"] .tch-tab { color: rgba(200,220,245,.90) !important; }
.tch-ai-title { font-size: 1.2rem !important; font-weight: 800 !important; color: #f1f5f9 !important; }
.tch-ai-sub { color: rgba(220,232,250,.92) !important; font-size: .84rem !important; }
/* ══ FIX 16: Page titles — clamped, always readable ════════ */
.rhcp-page-title {
font-size: clamp(1.4rem, 2vw, 1.75rem) !important;
font-weight: 900 !important;
color: var(--txt) !important;
line-height: 1.2 !important;
}
[data-theme="dark"] .rhcp-page-title { color: #f8fafc !important; }
.rhcp-page-subtitle {
font-size: .92rem !important;
color: var(--txt2) !important;
font-weight: 500 !important;
}
[data-theme="dark"] .rhcp-page-subtitle { color: #c8d8e8 !important; }
/* ══ FIX 17: Empty states ══════════════════════════════════ */
.rhcp-empty-state,
.be-empty-state {
color: var(--txt3) !important;
}
[data-theme="dark"] .rhcp-empty-state,
[data-theme="dark"] .be-empty-state { color: #96afc5 !important; }
/* ══ FIX 18: Prevent extreme opacity fades ════════════════ */
/* No text should go below 0.85 opacity against its background */
/* NOTE: clock color is intentionally driven by the rhcp-clock-cycle
animation in frontend-auth.css. Don't set a static color here or it
overrides the color cycle. Reduced-motion users fall back to --muted. */
.rhcp-app-body .rhcp-topbar-time {
font-size: .8rem;
}
@media(prefers-reduced-motion:reduce){
[data-theme="dark"] .rhcp-topbar-time { color: #96afc5; }
}
/* ══ END READABILITY AUDIT ═════════════════════════════════ */
/* ══ FIX 19: Light-mode — white text on page background ════════
These classes use hardcoded #e8eaf6/rgba(200,218) text.
Readable inside dark cards (correct). Invisible on light bg.
ONLY override text on the page background. NO card overrides.
================================================================ */
[data-theme="light"] .sm-header__title { color:#0d1b2e !important; }
[data-theme="light"] .sm-header__sub { color:#4a6480 !important; }
[data-theme="light"] .sm-header { border-bottom-color:rgba(11,29,58,.12) !important; }
[data-theme="light"] .sm-kpi__lbl { color:#4a6480 !important; }
[data-theme="light"] .sm-sub { color:#4a6480 !important; }
[data-theme="light"] .sm-section-header h2,
[data-theme="light"] .sm-section-header h3 { color:#0d1b2e !important; }
[data-theme="light"] .sm-tab { color:#374f6b !important; }
[data-theme="light"] .sm-tab--active { color:var(--gold) !important; }
[data-theme="light"] .sm-shift-empty,
[data-theme="light"] .sm-empty { color:#7a9ab5 !important; }
[data-theme="light"] .be-settings-section__title,
[data-theme="light"] .bpd-section-title { color:#0d1b2e !important; }
[data-theme="light"] .cm-empty-state,
[data-theme="light"] .tch-empty,
[data-theme="light"] .be-empty-state { color:#7a9ab5 !important; }
[data-theme="light"] .tch-tab { color:#374f6b !important; }
[data-theme="light"] .tch-tab--active { color:var(--gold) !important; }
[data-theme="light"] .mp2-filter-radio { color:#374f6b !important; }
/* ══ END READABILITY AUDIT ═════════════════════════════════ */
/* == FIX 20 v2: Channel Manager + Booking Engine — light-mode ==
The dark cards (#182040) are intentional and stay dark.
Problem: --cm-border (rgba white) is invisible on page bg.
The cards look broken because channel name h3 and muted text
inside them need to stay LIGHT (white/soft) on the dark card bg.
Active tab uses --cm-surface (#182040) as bg — looks disconnected
on a white page background.
================================================================== */
/* 1. Fix border dividers (page-bg only, safe to change globally) */
[data-theme="light"] {
--be-border: rgba(11,29,58,.12);
--cm-border: rgba(11,29,58,.12);
}
/* 2. Page-bg elements — make them dark/readable on white */
[data-theme="light"] .be-header__title { color:#0d1b2e !important; }
[data-theme="light"] .cm-header__title { color:#0d1b2e !important; }
[data-theme="light"] .be-header__sub { color:#4a6480 !important; }
[data-theme="light"] .cm-header__sub { color:#4a6480 !important; }
/* 3. Tab bar — inactive tabs already handled by universal rule (var(--txt2)).
Active tab bg uses --cm-surface=#182040. Replace with light gold tint. */
[data-theme="light"] .cm-tab--active {
background: rgba(212,160,23,.08) !important;
border-color: rgba(212,160,23,.30) !important;
border-bottom-color: var(--bg,#f0f4f9) !important;
}
[data-theme="light"] .be-tab--active {
background: rgba(212,160,23,.08) !important;
border-color: rgba(212,160,23,.30) !important;
border-bottom-color: var(--bg,#f0f4f9) !important;
}
/* 4. Text INSIDE dark cards (#182040 bg) — must stay light.
Target directly since CSS custom prop scoping via !important
does not reliably cascade into children in all browsers. */
/* Channel Manager card text */
[data-theme="light"] .cm-ch-info h3 { color:#e8eaf6 !important; }
[data-theme="light"] .cm-ch-info p,
[data-theme="light"] .cm-ch-last-sync,
[data-theme="light"] .cm-ch-commission { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .cm-avail-kpi__val { color:#e8eaf6 !important; }
[data-theme="light"] .cm-avail-kpi__lbl { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .cm-section-card__head h3 { color:#e8eaf6 !important; }
[data-theme="light"] .cm-connect-panel__head h2 { color:#e8eaf6 !important; }
[data-theme="light"] .cm-sync-header h2 { color:#e8eaf6 !important; }
[data-theme="light"] .cm-sync-header p { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .cm-coming-soon h3 { color:#e8eaf6 !important; }
[data-theme="light"] .cm-coming-soon p { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .cm-notice { color:#e8eaf6 !important; }
[data-theme="light"] .cm-info-box { color:#e8eaf6 !important; }
/* Booking Engine card text */
[data-theme="light"] .be-kpi-val { color:#e8eaf6 !important; }
[data-theme="light"] .be-kpi-lbl { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .be-bar-lbl { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .be-pop-room__info span { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .be-source-stats { color:rgba(200,220,245,.82) !important; }
[data-theme="light"] .be-ota-notice p { color:rgba(200,220,245,.82) !important; }
/* BE search input sits on page bg — make dark */
[data-theme="light"] .be-search-input {
color: #0d1b2e !important;
background: rgba(11,29,58,.05) !important;
}
/* == FIX 21: Intelligence House — light-mode insight strip ==
.intel-insight-card uses hardcoded near-white text colors.
These cards sit on tinted backgrounds (green/amber/blue tint)
which in light mode need dark text to be readable.
NOTE: .intel-rec-item is ALWAYS inside .intel-card--ai which has
a hardcoded dark gradient (#0a1628) — so rec items must stay white.
================================================================ */
/* Insight strip cards — title and body text */
[data-theme="light"] .intel-insight-body strong {
color: #0d1b2e !important;
}
[data-theme="light"] .intel-type-text {
color: #374f6b !important;
}
/* Insight card borders (invisible rgba-white on white bg) */
[data-theme="light"] .intel-insight-card {
border-color: rgba(11,29,58,.12) !important;
}
[data-theme="light"] .intel-insight-card--success {
border-color: rgba(34,197,94,.40) !important;
background: rgba(34,197,94,.07) !important;
}
[data-theme="light"] .intel-insight-card--warning {
border-color: rgba(245,158,11,.40) !important;
background: rgba(245,158,11,.07) !important;
}
[data-theme="light"] .intel-insight-card--info {
border-color: rgba(59,130,246,.40) !important;
background: rgba(59,130,246,.07) !important;
}
/* Dark-mode restoration (intel-insight-card) */
[data-theme="dark"] .intel-insight-body strong { color: #f1f5f9 !important; }
[data-theme="dark"] .intel-type-text { color: rgba(200,220,245,.82) !important; }
/* == FIX 22: Smart Search — button inside field at right end ==
Button sits as last flex child inside .intel-smart-search-field
(display:flex;align-items:center). Input gets flex:1 so it fills
remaining space; button stays at right end, fully contained.
================================================================ */
.intel-search-submit {
flex-shrink: 0;
white-space: nowrap;
margin: 5px 4px 5px 8px;
padding: 8px 22px !important;
font-size: .84rem !important;
font-weight: 700 !important;
border-radius: 8px !important;
line-height: 1.4 !important;
}
/* Ensure the field itself does not overflow its container */
.intel-smart-search-field {
overflow: hidden;
}
.intel-smart-search-field .intel-smart-search-input {
min-width: 0;
}
/* == FIX 23: Smart Search — scope chips as links + tip cards ==
Chips are now tags not