/*
 * Opt-in two-tone sidebar support for Element Web.
 *
 * Why this file exists: in element-web v1.12.24 the room list and the space bar are painted with
 * `var(--cpd-color-bg-canvas-default)` — the same token as the main canvas (see
 * apps/web/res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss and structures/_SpacePanel.pcss).
 * A custom theme's `compound` block is injected globally, as `:root, [class*="cpd-theme-"]`
 * (apps/web/src/theme.ts, generateCustomCompoundCSS), so there is no way to give the sidebar its own
 * colour through the theme format: setting that token blue turns the whole app blue. The legacy
 * `--roomlist-*` theme variables are dead code — they map to SCSS variables like `$roomlist-bg-color`
 * that nothing in the current CSS reads any more. Full findings: notes/matrix-log.md, 2026-08-13.
 *
 * How this works, and why it doesn't affect anyone who doesn't want it: every declaration below reads
 * a `--sidebar-tint*` variable with a fallback to the current behaviour. Custom themes may define
 * arbitrary colour keys — theme.ts sets `--<key>` for whatever appears in a theme's `colors` object,
 * with no allowlist — so a theme opts in simply by defining these. Any theme that doesn't, including
 * the built-in light and dark, resolves every fallback and renders exactly as before. The stylesheet
 * is served to everyone but is inert unless the selected theme asks for it, which makes this a
 * per-user choice made by picking a theme.
 *
 * Fallbacks of `inherit` are deliberate: for a custom property, `inherit` is the CSS-wide keyword, so
 * the token keeps the value it inherits from the theme rather than being overridden with a guess.
 *
 * Failure mode if Element renames these classes on upgrade: the selectors match nothing and the
 * sidebar reverts to the canvas colour. Nothing breaks.
 */

.mx_RoomListPanel,
.mx_SpacePanel {
    background-color: var(--sidebar-tint, var(--cpd-color-bg-canvas-default));

    /* Plain `color`, not just tokens: text that doesn't read a token of its own — the space name
       ("Home") is the visible case — inherits its colour from an ancestor outside this scope, so
       overriding tokens alone leaves it dark. */
    color: var(--sidebar-tint-text, inherit);

    /* Legacy variables behind the SCSS `$…-content` names still used by older components, e.g. the
       space panel's icons ($tertiary-content). */
    --timeline-text-color: var(--sidebar-tint-text, inherit);
    --primary-content: var(--sidebar-tint-text, inherit);
    --secondary-content: var(--sidebar-tint-text-secondary, inherit);
    --tertiary-content: var(--sidebar-tint-text, inherit);


    /* Text and icons inside the tinted area, so a dark tint can carry light text without
       affecting the timeline. */
    --cpd-color-text-primary: var(--sidebar-tint-text, inherit);
    --cpd-color-text-secondary: var(--sidebar-tint-text-secondary, inherit);
    --cpd-color-icon-primary: var(--sidebar-tint-text, inherit);
    --cpd-color-icon-secondary: var(--sidebar-tint-text-secondary, inherit);

    /* Hover/selected surfaces within the sidebar. Room rows and section headers use the
       action-tertiary pair (see RoomListItemView.module.css / RoomListSectionHeaderView.module.css in
       @element-hq/web-shared-components); subtle-* covers other small surfaces. Without these, a
       light theme's near-white hover flashes over a dark sidebar. */
    --cpd-color-bg-action-tertiary-hovered: var(--sidebar-tint-hover, inherit);
    --cpd-color-bg-action-tertiary-selected: var(--sidebar-tint-selected, var(--sidebar-tint-hover, inherit));
    --cpd-color-bg-subtle-primary: var(--sidebar-tint-hover, inherit);
    --cpd-color-bg-subtle-secondary: var(--sidebar-tint-hover, inherit);

    /* Nested surfaces that paint the canvas token directly — the sticky section header does this —
       would otherwise stay white behind the sidebar's light text. Re-point it to the tint inside the
       sidebar only; the timeline keeps the theme's real canvas. */
    --cpd-color-bg-canvas-default: var(--sidebar-tint, inherit);
}

/*
 * The narrow spaces strip is a *different* colour from the room list in most products that do this
 * (Mattermost's Denim uses #162545 against the sidebar's #1e325c), so it gets its own variable —
 * falling back to the room-list tint, then to the canvas, so a theme can set one, both, or neither.
 */
.mx_SpacePanel {
    background-color: var(--sidebar-strip-tint, var(--sidebar-tint, var(--cpd-color-bg-canvas-default)));
}

/*
 * Header strips. Products doing two-tone sidebars usually darken the top bar as well (Denim's
 * sidebarHeaderBg #192a4d against the sidebar's #1e325c), and in Element that reads as two places: the
 * search row at the top of the room list, and the room-name bar above the timeline.
 *
 * The search row has no stable class to hook — it and the list header come from
 * @element-hq/web-shared-components and use CSS modules, so their class names are build-time hashes.
 * What is stable is the structure: `.mx_RoomListPanel` renders [search?, list header, list], so
 * "everything except the last child" is exactly the header area whether or not search is shown, and
 * the list itself is never touched. `transparent` as the fallback means an unset variable simply shows
 * the sidebar tint underneath — no change for themes that don't opt in.
 */
.mx_RoomListPanel > *:not(:last-child) {
    background-color: var(--sidebar-header-tint, transparent);
}

.mx_RoomHeader {
    /* Fallback mirrors what light-custom's $background resolves to, so unset means unchanged. */
    background-color: var(--header-tint, var(--timeline-background-color, var(--cpd-color-bg-canvas-default)));

    /* A dark header needs light text; both the legacy variables this component uses and the Compound
       tokens are re-pointed, scoped to the header only. `color` is set for the same reason as in the
       sidebar: the room name inherits rather than reading a token. */
    color: var(--header-tint-text, inherit);
    --timeline-text-color: var(--header-tint-text, inherit);
    --primary-content: var(--header-tint-text, inherit);
    --secondary-content: var(--header-tint-text-secondary, inherit);
    --tertiary-content: var(--header-tint-text, inherit);
    --cpd-color-text-primary: var(--header-tint-text, inherit);
    --cpd-color-text-secondary: var(--header-tint-text-secondary, inherit);
    --cpd-color-icon-primary: var(--header-tint-text, inherit);
    --cpd-color-icon-secondary: var(--header-tint-text-secondary, inherit);

    /* Hover on the header's own buttons (video call, threads, room info) — `_RoomHeader.pcss` paints
       those with bg-subtle-primary, which is near-white in a light theme and flashes over the dark
       header. Falls back to the sidebar's hover colour so a theme need only define one. */
    --cpd-color-bg-subtle-primary: var(--header-tint-hover, var(--sidebar-tint-hover, inherit));
    --cpd-color-bg-action-tertiary-hovered: var(--header-tint-hover, var(--sidebar-tint-hover, inherit));
}