/* 
   Gruvbox Dark Hard PRO v4
   Focus: UX clarity, contrast, state separation, accessibility
*/

:root, [class*="cpd-theme-"] {
    /* --- Base Palette --- */
    --gb-bg0-hard: #1d2021;
    --gb-bg0:      #282828;
    --gb-bg1:      #3c3836;
    --gb-bg2:      #45403d;
    --gb-bg3:      #5a524c;

    --gb-fg0:      #fbf1c7;
    --gb-fg1:      #ebdbb2;
    --gb-fg2:      #d5c4a1;
    --gb-fg3:      #bdae93;
    --gb-fg4:      #a89984;

    --gb-red:      #cc241d;
    --gb-green:    #8ec07c;
    --gb-yellow:   #d79921;
    --gb-blue:     #83a598;
    --gb-purple:   #b16286;
    --gb-aqua:     #689d6a;
    --gb-orange:   #d65d0e;

    /* --- Semantic roles --- */
    --accent-primary: var(--gb-green);
    --accent-focus:   var(--gb-yellow);
    --accent-info:    var(--gb-blue);
    --accent-danger:  var(--gb-red);

    /* --- Element token override --- */
    --cpd-color-bg-canvas-default: var(--gb-bg0-hard) !important;
    --cpd-color-bg-subtle-primary: var(--gb-bg1) !important;
    --cpd-color-bg-subtle-secondary: var(--gb-bg0) !important;

    --cpd-color-text-primary: var(--gb-fg0) !important;
    --cpd-color-text-secondary: var(--gb-fg2) !important;

    --cpd-color-icon-primary: var(--gb-fg1) !important;

    --cpd-color-border-subtle: var(--gb-bg2) !important;
}

/* --- Layout separation --- */
.mx_SpacePanel {
    background: var(--gb-bg0-hard) !important;
    border-right: 1px solid var(--gb-bg3) !important;
}

.mx_LeftPanel {
    background: var(--gb-bg0) !important;
}

.mx_MainView,
.mx_RoomView_timeline {
    background: var(--gb-bg0-hard) !important;
}

.mx_RoomHeader {
    background: var(--gb-bg1) !important;
    border-bottom: 1px solid var(--gb-bg3) !important;
}

/* --- Room tiles --- */

/* Default hover (distinct from selected!) */
.mx_RoomTile:hover {
    background-color: var(--gb-bg1) !important;
}

/* Selected */
.mx_RoomTile_selected,
[aria-selected="true"] {
    background-color: var(--gb-bg0-hard) !important;
    border-left: 4px solid var(--accent-focus) !important;
    color: var(--gb-fg0) !important;
}

/* Unread */
.mx_RoomTile_unread {
    border-left: 4px solid var(--accent-info) !important;
}

/* --- Buttons & interaction --- */

button,
[role="button"] {
    cursor: pointer;
}

/* Hover */
.mx_AccessibleButton:hover,
[role="button"]:hover {
    background-color: var(--gb-bg1) !important;
}

/* Active */
.mx_AccessibleButton:active {
    background-color: var(--gb-bg2) !important;
}

/* Focus (keyboard accessibility) */
:focus-visible {
    outline: 2px solid var(--accent-focus) !important;
    outline-offset: 2px;
}

/* --- Messages --- */

/* Other messages */
[class*="mx_EventTile_bubble"] {
    background-color: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg2) !important;
    color: var(--gb-fg0) !important;
}

/* Own messages (more visible now) */
[class*="mx_EventTile_self"] [class*="mx_EventTile_bubble"] {
    background-color: rgba(142, 192, 124, 0.15) !important;
    border: 1px solid var(--gb-green) !important;
}

/* --- Reactions --- */

.mx_ReactionInner {
    background: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg3) !important;
    color: var(--gb-fg2) !important;
}

.mx_ReactionInner:hover {
    background: var(--gb-bg2) !important;
    border-color: var(--accent-focus) !important;
}

.mx_ReactionInner--selected {
    background: rgba(215, 153, 33, 0.3) !important;
    border-color: var(--accent-focus) !important;
    box-shadow: 0 0 0 1px var(--accent-focus);
}

/* --- Mentions --- */

.mx_Mpill {
    background: var(--gb-bg1) !important;
    color: var(--gb-aqua) !important;
    border: 1px solid var(--gb-aqua) !important;
}

/* --- Notifications --- */

.mx_NotificationBadge {
    background-color: var(--accent-danger) !important;
    color: var(--gb-fg0) !important;
}

/* --- Inputs --- */

input,
.mx_ComposerBar,
.mx_SearchBox_search {
    background: var(--gb-bg0-hard) !important;
    color: var(--gb-fg0) !important;
    border: 1px solid var(--gb-bg3) !important;
}

/* Focus state */
input:focus {
    border-color: var(--accent-focus) !important;
    box-shadow: 0 0 0 1px var(--accent-focus);
}

/* Placeholder */
input::placeholder {
    color: var(--gb-fg4) !important;
}

/* --- Modals --- */

.mx_Dialog,
.mx_ContextualMenu {
    background: var(--gb-bg1) !important;
    border: 1px solid var(--gb-bg3) !important;
}

.mx_Dialog_wrapper {
    background: rgba(29, 32, 33, 0.85) !important;
}

/* --- Scrollbars --- */

* {
    scrollbar-color: var(--gb-bg3) transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--gb-bg3) !important;
    border: 1px solid var(--gb-bg1) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gb-fg4) !important;
}