/* ========================================
   EMBER — CSS Override v0.3
   ======================================== */

/* ----------------------------------------
   ROOT — kill white canvas bleed-through
   The Compound design system resolves
   --cpd-color-bg-canvas-default → #fff,
   which bleeds through semi-transparent
   panel layers and washes out all colors.
   ---------------------------------------- */
:root {
    --cpd-color-theme-bg: #1a1a1a !important;
    --cpd-color-bg-canvas-default: #1a1a1a !important;
    --lp-background-blur: 0px !important;
}

/* Remove any backdrop blur on panels */
.mx_LeftPanel_outerWrapper,
.mx_LeftPanel_wrapper--user,
.mx_SpacePanel,
.mx_RoomListPanel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ----------------------------------------
   LEFT ICON SIDEBAR (narrow far-left)
   ---------------------------------------- */

.mx_LeftPanel_outerWrapper aside,
.mx_SpacePanel {
    background-color: #C47A1E !important;
    background-image: none !important;
}

/* Notification badges on sidebar */
.mx_SpacePanel .mx_NotificationBadge,
.mx_SpacePanel .mx_NotificationBadge_visible {
    background-color: #F39E60 !important;
    color: #1A0F0A !important;
}

/* Hide tooltip callout on hover */
.mx_SpaceButton_tooltip {
    display: none !important;
}

/* Soften the divider between space panel and room list */
.mx_SpacePanel.newUi {
    border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Soften the divider between room list and main content */
.mx_LeftPanel_wrapper--user {
    border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
}


/* ----------------------------------------
   ROOM LIST PANEL (wider panel)
   ---------------------------------------- */

/* Main containers */
.mx_LeftPanel_wrapper--user,
.mx_LeftPanel_roomListContainer,
.mx_LeftPanel_roomListWrapper,
.mx_LeftPanel_actualRoomListContainer,
.mx_RoomListPanel,
.mx_LegacyRoomList {
    background-color: #F8F0E3 !important;
}

/* Section headers (People, Rooms, etc.) */
.mx_RoomSublist_headerText {
    color: rgba(8, 2, 0, 0.5) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Search bar — transparent fill, #1c0802 capsule outline */
.mx_RoomSearch {
    background-color: transparent !important;
    border: 1.5px solid #1c0802 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none !important;
}

.mx_RoomSearch input,
.mx_RoomSearch_spotlightTrigger,
.mx_RoomSearch_spotlightTriggerText {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #1c0802 !important;
}

.mx_RoomSearch_spotlightTriggerText::placeholder,
.mx_RoomSearch input::placeholder {
    color: rgba(28, 8, 2, 0.5) !important;
}

/* Search icon */
.mx_RoomSearch_icon {
    color: #1c0802 !important;
}

/* Room list panel controls — all icons and text */
.mx_LegacyRoomListHeader,
.mx_LegacyRoomListHeader button,
.mx_LegacyRoomListHeader_plusButton,
.mx_LegacyRoomListHeader_contextMenuButton,
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_dialPadButton,
.mx_RoomSublist_auxButton,
.mx_RoomSublist_collapseBtn,
.mx_RoomSublist_menuButton {
    color: #1c0802 !important;
    background-color: transparent !important;
}

/* SVG icons in panel controls */
.mx_LegacyRoomListHeader svg,
.mx_LegacyRoomListHeader button svg,
.mx_LeftPanel_exploreButton svg,
.mx_LeftPanel_dialPadButton svg,
.mx_RoomSublist_auxButton svg,
.mx_RoomSublist_collapseBtn svg,
.mx_RoomSublist_menuButton svg {
    color: #1c0802 !important;
    fill: #1c0802 !important;
}

/* Filter container button backgrounds (dial pad + explore icons beside search) */
.mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton,
.mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton {
    background-color: transparent !important;
    outline: none !important;
}

.mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover,
.mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover {
    background-color: rgba(28, 8, 2, 0.1) !important;
}

/* Room list items */
.mx_RoomListItemView {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    transition: transform 0.1s ease, border-color 0.1s ease !important;
}

/* Hover: border + slight scale, no background fill */
.mx_RoomListItemView:hover {
    background-color: transparent !important;
    border: 1px solid #C47A1E !important;
    transform: scale(1.02) !important;
    box-shadow: none !important;
}

/* Hide the action buttons that pop up on hover */
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
    display: none !important;
}

/* Selected room — target both the outer wrapper and the inner block */
.mx_RoomListItemView_selected,
.mx_RoomListItemView[aria-selected="true"],
.mx_RoomTile_selected,
.mx_RoomTile:focus-within {
    background-color: rgba(196, 122, 30, 0.25) !important;
    border-radius: 8px !important;
}

/* Room name */
.mx_RoomTile_titleContainer {
    color: #080200 !important;
}

/* Message preview */
.mx_RoomTile_subtitle,
.mx_RoomTile_subtitle_text {
    color: rgba(8, 2, 0, 0.6) !important;
}

/* Timestamp */
.mx_RoomTile_primaryDetails {
    color: rgba(8, 2, 0, 0.45) !important;
}

/* Unread badge / dot */
.mx_NotificationBadge,
.mx_NotificationBadge_visible,
.mx_NotificationBadge_dot,
.mx_RoomTile_badgeContainer .mx_NotificationBadge {
    background-color: #C47A1E !important;
    color: #F8F0E3 !important;
}

/* Sublist badge (section-level unread) */
.mx_RoomSublist_badgeContainer .mx_NotificationBadge {
    background-color: #C47A1E !important;
    color: #F8F0E3 !important;
}


/* ----------------------------------------
   MAIN CANVAS (message area)
   ---------------------------------------- */

.mx_RoomView_body,
.mx_RoomView_timeline,
.mx_ScrollPanel {
    background-color: #080200 !important;
}

.mx_EventTile_content {
    color: #F0E6D3 !important;
}

.mx_MessageTimestamp {
    color: #6B5040 !important;
}


/* ----------------------------------------
   TOP HEADER BAR
   ---------------------------------------- */

.mx_RoomHeader {
    background-color: #080200 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #F0E6D3 !important;
}


/* ----------------------------------------
   MESSAGE INPUT
   ---------------------------------------- */

.mx_MessageComposer {
    background-color: #080200 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mx_BasicMessageComposer_input {
    color: #F0E6D3 !important;
}


/* ----------------------------------------
   SCROLLBARS
   ---------------------------------------- */

::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #7A3A3A;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F39E60;
}