/* ================================================================
   iSwiss Vault - Custom chat highlight
   ================================================================ */

:root {
    --iswiss-red: 220, 38, 38;
}

/* --- Highlight messaggio chat (rosso tenue) --- */
.mx_EventTile_highlight,
.mx_EventTile_highlight .mx_EventTile_line,
.mx_EventTile[data-highlight="true"] .mx_EventTile_line {
    background-color: rgba(var(--iswiss-red), 0.06) !important;
    box-shadow: inset 3px 0 0 rgba(var(--iswiss-red), 0.35) !important;
}

/* --- Hover / click (appena accennato) --- */
.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile.focus-visible .mx_EventTile_line {
    background-color: rgba(var(--iswiss-red), 0.025) !important;
    transition: background-color 120ms ease-in-out;
}

.mx_EventTile.mx_EventTile_actionBarFocused {
    outline: none !important;
}

/* --- Override variabili Compound (accent blu -> rosso iSwiss) --- */
.cpd-theme-light,
.cpd-theme-dark,
:root {
    --cpd-color-bg-subtle-primary: rgba(var(--iswiss-red), 0.06);
    --cpd-color-bg-subtle-secondary: rgba(var(--iswiss-red), 0.025);
    --cpd-color-icon-accent-primary: rgb(var(--iswiss-red));
    --cpd-color-bg-accent-rest: rgb(var(--iswiss-red));
    --cpd-color-bg-accent-hovered: rgb(190, 30, 30);
    --cpd-color-bg-accent-pressed: rgb(160, 25, 25);
}

/* --- Mappamondo stanza pubblica (solo background, non tocco l'interno) --- */
.mx_DecoratedRoomAvatar_icon,
.mx_DecoratedRoomAvatar_icon_globe {
    background-color: rgb(var(--iswiss-red)) !important;
}

/* --- Badge notifica normali --- */
.mx_NotificationBadge:not(.mx_NotificationBadge_highlighted):not(.mx_NotificationBadge_dot) {
    background-color: rgb(var(--iswiss-red)) !important;
}

/* ================================================================
   Room tile - selezione/hover e indicatore mappamondo in rosso
   ================================================================ */

/* Riga stanza: selezionata, hover, menu aperto - via l'azzurrino */
.mx_RoomTile_selected,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:hover,
.mx_RoomTile.mx_RoomTile_hasMenuOpen,
[class*="RoomTile_selected"],
[class*="RoomTile"][aria-selected="true"] {
    background-color: rgba(var(--iswiss-red), 0.08) !important;
}

/* Mappamondo stanza pubblica - tutte le varianti note di selettore */
.mx_DecoratedRoomAvatar_icon,
.mx_DecoratedRoomAvatar_icon_globe,
.mx_DecoratedRoomAvatar [class*="globe"],
.mx_DecoratedRoomAvatar [class*="_icon_"],
.mx_RoomTile .mx_DecoratedRoomAvatar > div:not(.mx_BaseAvatar) {
    background-color: rgb(var(--iswiss-red)) !important;
    border-color: rgb(var(--iswiss-red)) !important;
}

/* Override Compound per azzurrini di sfondo in sidebar/lista */
.cpd-theme-light,
.cpd-theme-dark {
    --cpd-color-bg-action-primary-rest: rgb(var(--iswiss-red));
    --cpd-color-bg-action-primary-hovered: rgb(190, 30, 30);
}

/* ================================================================
   Globo mappamondo - la classe esiste, ma colorata via SVG color
   non via background-color (per questo i tentativi precedenti
   non avevano effetto). Uso 'color' come fa Element nel bundle.
   ================================================================ */
.mx_DecoratedRoomAvatar_icon_globe svg,
.mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe svg {
    color: rgb(var(--iswiss-red)) !important;
}

/* Backup: se in qualche punto il globo viene renderizzato con fill */
.mx_DecoratedRoomAvatar_icon_globe svg *,
.mx_DecoratedRoomAvatar_icon_globe svg path {
    fill: currentColor !important;
}

/* ================================================================
   Riga stanza selezionata - sfondo rosato iSwiss
   ================================================================ */
.mx_RoomTile_selected,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"],
[class*="RoomTile_selected"],
[class*="RoomTile"][aria-selected="true"],
[role="treeitem"][aria-selected="true"] {
    background-color: rgba(var(--iswiss-red), 0.10) !important;
    box-shadow: inset 3px 0 0 rgb(var(--iswiss-red)) !important;
}

/* Hover: un gradino sotto, sempre rosato */
.mx_RoomTile:hover:not(.mx_RoomTile_selected),
[class*="RoomTile"]:hover:not([aria-selected="true"]),
[role="treeitem"]:hover:not([aria-selected="true"]) {
    background-color: rgba(var(--iswiss-red), 0.05) !important;
}

/* Classe _RoomTile_selected applicata via JS alla room selezionata */
[class*="_RoomTile_selected"],
[class*="RoomTile_selected"] {
    background-color: rgba(var(--iswiss-red), 0.12) !important;
    box-shadow: inset 3px 0 0 rgb(var(--iswiss-red)) !important;
}

/* ============================================================
   HOME PAGE — pulsanti "Invia DM / Esplora / Crea gruppo"
   Variante A: avorio chiaro + bordeaux profondo (Cartier-style)
   ============================================================ */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
    background-color: #F5EFE6 !important;
    border: 1px solid #E8DFCD !important;
    color: #6B1F2A !important;
    letter-spacing: 0.01em;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), 0 4px 12px rgba(60, 40, 20, 0.05) !important;
    transition: background-color 0.22s ease, border-color 0.22s ease,
                box-shadow 0.22s ease, transform 0.22s ease;
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
    background-color: #EDE4D3 !important;
    border-color: #D9CBB0 !important;
    box-shadow: 0 2px 4px rgba(60, 40, 20, 0.06), 0 8px 20px rgba(60, 40, 20, 0.08) !important;
    transform: translateY(-2px);
}

/* Nasconde le icone originali fill-based */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg {
    display: none !important;
}

/* Inietta icone outlined sottili via background-image */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Icona 1 - Invia DM (chat bubble) */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_HomePage_button_sendDm::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1F2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

/* Icona 2 - Esplora (bussola) */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_HomePage_button_explore::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1F2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/></svg>");
}

/* Icona 3 - Crea gruppo (due figure) */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_HomePage_button_createGroup::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1F2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

/* ============================================================
   HOME PAGE — fix allineamento centrato dei pulsanti
   ============================================================ */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Icona pseudo perfettamente centrata */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before {
    margin-left: auto !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   HOME PAGE — riequilibrio padding interno pulsanti
   ============================================================ */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
    padding: 22px 12px 20px !important;
    min-height: 0 !important;
    gap: 10px !important;
}

/* Reset margin sotto l'icona (gap già gestisce lo spazio) */
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before {
    margin: 0 auto !important;
}