/*
 * inblock.io Element Web theme override.
 *
 * This stylesheet exists for values that Element's custom-theme JSON cannot
 * express: compiled-SCSS literals and layout. Everything expressible as a
 * Compound design token lives in config/element-config.json
 * (setting_defaults.custom_themes); this file is reserved strictly for what
 * theme JSON cannot reach. See docs/element-theme-customization.md for the
 * palette-vs-routing contract.
 *
 * The fix: Element's custom-theme stylesheets drive the selected settings-tab
 * label from a compiled SCSS value ($accent / $tab-label-active-fg-color), not
 * a runtime CSS variable, so theme JSON cannot reach it. On the light theme the
 * label can render near-invisible against the selected-tab pill. The built-in
 * (non-custom) themes use var(--cpd-color-text-primary) here; this rule restores
 * that for the custom themes. The variable resolves to dark text in light themes
 * and light text in dark themes, so the single rule is correct for both.
 */
.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active,
.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
    color: var(--cpd-color-text-primary) !important;
}

/*
 * Online presence dot: room-header path only.
 *
 * Element draws the "online" presence dot through THREE paths. Two read
 * --cpd-color-icon-accent-primary (which we never override) and so are Compound
 * green BY CONSTRUCTION -- do NOT add a rule for them, and do NOT pin the
 * success/green/icon-accent-primary tokens in the theme JSON (verify-theme.sh
 * forbids it):
 *   - mx_PresenceIconView_online            -- member list (_PresenceIconView.pcss)
 *   - mx_RoomAvatarView_PresenceDecoration  -- room-list DM avatar (inline SVG color)
 *
 * The THIRD path is the exception this rule fixes. The room-header DM avatar dot
 * is drawn by WithPresenceIndicator (used only in RoomHeader.tsx) via
 *   .mx_WithPresenceIndicator_icon_online::before { background-color: $accent; }
 * On the custom themes Element compiles $accent to var(--cpd-color-text-action-accent),
 * which we deliberately paint brand orange (#E8611A) for links/buttons. So the
 * header "online" dot inherits brand orange even though online should read green.
 * $accent is a compiled-SCSS literal the theme JSON cannot reach (same class of
 * fix as the settings-tab-label rule above), so we repaint ONLY the online state
 * to the same green the other two paths already use. Built-in Element themes
 * compile $accent to green, so this only bites because our accent is orange.
 * Away/busy/offline keep their own tokens; brand accents elsewhere are untouched.
 */
.mx_WithPresenceIndicator_icon_online::before {
    background-color: var(--cpd-color-icon-accent-primary) !important;
}

/*
 * Right-panel user profile: wrap long Matrix user IDs inside the panel.
 *
 * DID-based MXIDs (e.g. @did-pkh-eip155-1-0x<40 hex>:matrix.inblock.io) carry a
 * long unbroken 0x... hex run. Element renders the MXID as
 *   <Text class=mx_UserInfo_profile_mxid><CopyableText>{mxid}</CopyableText></Text>
 * (UserInfoHeaderView.tsx) -- CopyableText already provides the clipboard copy
 * button. But mx_UserInfo_profile_mxid is a fixed height:28px and .mx_CopyableText
 * is width:max-content with no overflow-wrap, so the hex run overflows the panel
 * edge and the copy button is pushed out of view. Free the height and let the id
 * wrap; overflow-wrap:anywhere (not break-word) shrinks the text's min-content so
 * the flex item wraps the unbroken hex. The copy button is flex-shrink:0 +
 * position:sticky, so it stays reachable at the top-right across the wrapped lines.
 * Theme JSON cannot express layout, so this belongs here.
 */
.mx_UserInfo_profile .mx_UserInfo_profile_mxid {
    height: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.mx_UserInfo_profile .mx_UserInfo_profile_mxid .mx_CopyableText {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Top-left UserMenu dropdown (avatar menu): wrap long DID MXIDs.
 *
 * DISTINCT from the right-panel UserInfo rule above. The avatar menu in the
 * top-left is a DIFFERENT component: in element-web v1.12.20 it is the
 * shared-components UserMenu
 * (packages/shared-components/src/menus/UserMenu/UserMenu.tsx), which renders the
 * MXID as <Text data-testid="userId" as="span">{userId}</Text> -- NO className and
 * NO overflow handling -- inside a max-width:300px Compound Menu. The long unbroken
 * 0x<40 hex> run can't break (default overflow-wrap:normal) and spills past the
 * right edge of the menu (the "wallet address out of bounds" screenshot).
 *
 * The right-panel fix's selector (.mx_UserInfo_profile_mxid) cannot reach this:
 * UserMenu styles itself with CSS Modules (hashed local class names like
 * styles.profile), so there is NO stable mx_* class to target. The only stable
 * hook on the MXID node is its data-testid, which is unique to this component
 * (verified against the v1.12.20 tree). overflow-wrap:anywhere shrinks the span's
 * min-content so it wraps; max-width:100% + min-width:0 keep it inside the menu;
 * text-align:center matches the centered displayname directly above it. Layout
 * that theme JSON cannot express, so it belongs here.
 */
[data-testid="userId"] {
    overflow-wrap: anywhere;
    max-width: 100%;
    min-width: 0;
    text-align: center;
}