/* MyYaak Purple Theme Override for MetaFox */
/* All selectors use #root for specificity over Emotion CSS-in-JS */

/* ===== PRIMARY COLOR OVERRIDES ===== */

/* Buttons - contained (any variant on purple bg) — bumped specificity with html prefix */
html #root .MuiButton-containedPrimary,
html #root button[class*="MuiButton-containedPrimary"],
html #root .MuiButton-contained.MuiButton-containedPrimary {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #fff !important;
}
html #root .MuiButton-containedPrimary,
html #root .MuiButton-containedPrimary *,
html #root button[class*="MuiButton-containedPrimary"],
html #root button[class*="MuiButton-containedPrimary"] *,
html #root .MuiButton-containedPrimary span,
html #root .MuiButton-containedPrimary div,
html #root .MuiButton-containedPrimary p,
html #root .MuiButton-containedPrimary i,
html #root .MuiButton-containedPrimary svg,
html #root .MuiButton-containedPrimary svg * {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html #root .MuiButton-containedPrimary:hover,
html #root button[class*="MuiButton-containedPrimary"]:hover {
    background-color: #5b21b6 !important;
    color: #fff !important;
}

/* Any element with purple background should have white text */
#root [style*="background-color: rgb(109, 40, 217)"],
#root [style*="background-color:#6d28d9"],
#root [style*="background:#6d28d9"],
#root [style*="background: rgb(109, 40, 217)"] {
    color: #fff !important;
}
#root [style*="background-color: rgb(109, 40, 217)"] *,
#root [style*="background-color:#6d28d9"] *,
#root [style*="background:#6d28d9"] *,
#root [style*="background: rgb(109, 40, 217)"] * {
    color: #fff !important;
    fill: #fff !important;
}

/* Fab + any contained button variant text */
#root .MuiFab-primary,
#root .MuiFab-primary * {
    color: #fff !important;
    fill: #fff !important;
}

/* Buttons - outlined */
#root .MuiButton-outlinedPrimary,
#root button[class*="MuiButton-outlinedPrimary"] {
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}
#root .MuiButton-outlinedPrimary:hover {
    background-color: rgba(109, 40, 217, 0.04) !important;
}

/* Buttons - text */
#root .MuiButton-textPrimary,
#root button[class*="MuiButton-textPrimary"] {
    color: #6d28d9 !important;
}

/* Fab */
#root .MuiFab-primary {
    background-color: #6d28d9 !important;
}
#root .MuiFab-primary:hover {
    background-color: #5b21b6 !important;
}

/* ===== BANK WIDGET ===== */

/* Hide the apps/grid menu button */
#root .MuiAppBar-root button:has(span.ico-th-o) {
    display: none !important;
}

#bank-widget {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 4px;
    flex-shrink: 0;
}

#bank-widget .bw-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 10px;
    border-right: 1px solid #e5e7eb;
}

#bank-widget .bw-item.bw-last {
    border-right: none;
}

#bank-widget .bw-label {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
    line-height: 1.2;
}

#bank-widget .bw-val {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    line-height: 1.3;
}

#bank-widget .bw-val.bw-red  { color: #dc2626; }
#bank-widget .bw-val.bw-blue { color: #2563eb; }

/* ===== HEADER / APPBAR ===== */

/* Sticky header */
#root [class*="PrimaryAppBar"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
}

/* Header background */
#root .MuiAppBar-root {
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Active menu tab - purple bottom border */
#root [class*="menuActive"] {
    border-bottom-color: #6d28d9 !important;
    color: #6d28d9 !important;
}

/* Header icon buttons active */
#root [class*="activeMenu"] [class*="smallMenuIcon"],
#root [class*="menuButtonActive"] [class*="smallMenuIcon"],
#root [class*="activeMenu"] [class*="Icon"],
#root [class*="menuButtonActive"] [class*="Icon"] {
    color: #6d28d9 !important;
}

/* Search bar styling */
#root [class*="AppBar"] [class*="search"] {
    background: #f3f4f6 !important;
    border-radius: 999px !important;
}
#root [class*="AppBar"] [class*="searchFocused"] {
    border-color: #6d28d9 !important;
}

/* ===== LEFT SIDEBAR ===== */

/* Sidebar menu items */
#root [class*="SidebarAppMenu-menuItem"] {
    border-radius: 8px !important;
    margin: 2px 0 !important;
    transition: all 0.15s ease !important;
}

/* Sidebar menu item hover */
#root [class*="SidebarAppMenu-menuItem"]:hover {
    background-color: #f5f3ff !important;
    border-radius: 8px !important;
}

/* Sidebar active menu item */
#root [class*="SidebarAppMenu-activeMenuItem"] {
    background-color: #f5f3ff !important;
    border-radius: 8px !important;
}

/* Sidebar active link text */
#root [class*="SidebarAppMenu-activeMenuItem"] [class*="menuItemLink"],
#root [class*="SidebarAppMenu-activeMenuItem"] [class*="menuItemText"],
#root [class*="SidebarAppMenu-activeMenuItem"] a,
#root [class*="SidebarAppMenu-activeMenuItem"] span,
#root [class*="activeMenuItem"] [class*="menuItemText"] span {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}

/* Sidebar active icon — purple color, NO background (Figma style) */
#root [class*="SidebarAppMenu-activeMenuItem"] [class*="menuItemIcon"],
#root [class*="activeMenuItem"] [class*="SidebarAppMenu-menuItemIcon"] {
    background-color: transparent !important;
    color: #6d28d9 !important;
    box-shadow: none !important;
}

/* Sidebar inactive icon — FLAT, no background (Figma style) */
#root [class*="SidebarAppMenu-menuItemIcon"] {
    background-color: transparent !important;
    color: #6b7280 !important;
    border-radius: 0 !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    font-size: 20px !important;
    box-shadow: none !important;
}

/* Sidebar heading */
#root [class*="SidebarAppMenu-headerBlock"],
#root .MuiListSubheader-root {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Sidebar link text - clean */
#root [class*="SidebarAppMenu-menuItemText"],
#root [class*="SidebarAppMenu-menuItemLink"] {
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* MUI MenuItem selected state */
#root .MuiMenuItem-root.Mui-selected {
    background-color: #f5f3ff !important;
}

/* Sidebar - general active text via MUI */
#root [class*="SidebarAppMenu"] .Mui-selected [class*="menuItemText"] span,
#root [class*="SidebarAppMenu"] .Mui-selected [class*="SidebarAppMenu-activeMenuItem"] span {
    color: #6d28d9 !important;
}

/* Active state from the LinkMenuItem styled component */
#root [class*="SidebarAppMenu-activeMenuItem"] i {
    color: #fff !important;
}

/* ===== FEED / POST CARDS ===== */

/* Post card container */
#root [class*="feedItem"],
#root [class*="FeedItem"],
#root [class*="ItemView-root"] {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}

/* Status/compose box */
#root [class*="StatusComposer"],
#root [class*="statusCompose"],
#root [class*="composeStatus"] {
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #f0f0f0 !important;
}

/* Paper elements - cleaner look */
#root .MuiPaper-root {
    border-radius: 12px !important;
}
#root .MuiPaper-elevation1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ===== AVATARS ===== */

/* Default avatar background - purple instead of blue/green */
#root .MuiAvatar-colorDefault {
    background-color: #6d28d9 !important;
    color: #fff !important;
}

/* User avatar with inline styles (blue backgrounds) */
#root .MuiAvatar-root[style*="background-color: rgb(38"],
#root .MuiAvatar-root[style*="background-color: rgb(76"],
#root .MuiAvatar-root[style*="background-color: #2"],
#root .MuiAvatar-root[style*="background-color: #3"],
#root .MuiAvatar-root[style*="background-color: #4"] {
    background-color: #6d28d9 !important;
}

/* ===== FORM ELEMENTS ===== */

/* Input focus */
#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #6d28d9 !important;
}
#root .MuiInput-underline:after,
#root .MuiFilledInput-underline:after {
    border-bottom-color: #6d28d9 !important;
}
#root .MuiFormLabel-root.Mui-focused {
    color: #6d28d9 !important;
}

/* Checkboxes, radios, switches */
#root .MuiCheckbox-colorPrimary.Mui-checked,
#root .Mui-checked[class*="colorPrimary"] {
    color: #6d28d9 !important;
}
#root .MuiRadio-colorPrimary.Mui-checked {
    color: #6d28d9 !important;
}
#root .MuiSwitch-colorPrimary.Mui-checked {
    color: #6d28d9 !important;
}
#root .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
    background-color: rgba(109, 40, 217, 0.5) !important;
}

/* ===== TABS ===== */
#root .MuiTab-root.Mui-selected {
    color: #6d28d9 !important;
}
#root .MuiTabs-indicator {
    background-color: #6d28d9 !important;
}

/* ===== BADGES & CHIPS ===== */
#root .MuiBadge-colorPrimary {
    background-color: #6d28d9 !important;
}
#root .MuiChip-colorPrimary {
    background-color: #6d28d9 !important;
}
#root .MuiChip-outlinedPrimary {
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

/* ===== PROGRESS ===== */
#root .MuiLinearProgress-barColorPrimary {
    background-color: #6d28d9 !important;
}
#root .MuiCircularProgress-colorPrimary {
    color: #6d28d9 !important;
}

/* ===== LINKS ===== */
#root a[class*="colorPrimary"],
#root .MuiTypography-colorPrimary {
    color: #6d28d9 !important;
}

/* ===== LIKE / REACTIONS ===== */
#root [class*="isLiked"],
#root [class*="reactionActive"] {
    color: #6d28d9 !important;
}

/* ===== ACTION BUTTONS (Like, Comment, Share) ===== */
#root [class*="actionButton"]:hover,
#root [class*="ActionButton"]:hover {
    color: #6d28d9 !important;
}

/* ===== BLOCK HEADERS ===== */
#root [class*="blockHeader"] [class*="title"],
#root [class*="BlockHeader"] [class*="title"] {
    font-weight: 700 !important;
}

/* ===== GENERAL LAYOUT POLISH ===== */

/* Rounder corners everywhere */
#root [class*="blockContent"],
#root [class*="BlockContent"] {
    border-radius: 12px !important;
}

/* Body background */
body {
    background-color: #f5f5f7 !important;
}

/* Dividers - lighter */
#root .MuiDivider-root {
    border-color: #f0f0f0 !important;
}

/* ===== TYPOGRAPHY ===== */

/* User names - slightly bolder */
#root [class*="userName"],
#root [class*="UserName"] {
    font-weight: 600 !important;
}

/* ===== FOOTER AREA ===== */
#root [class*="appFooter"],
#root [class*="AppFooter"] {
    border-top: 1px solid #f0f0f0 !important;
}

/* ===== ICON BUTTON HOVER ===== */
#root .MuiIconButton-root:hover {
    background-color: rgba(109, 40, 217, 0.06) !important;
}
#root .MuiIconButton-colorPrimary {
    color: #6d28d9 !important;
}

/* ===== TOOLTIP ===== */
#root .MuiTooltip-tooltip {
    background-color: #1a1a2e !important;
    border-radius: 8px !important;
}

/* ===== SELECTION ===== */
::selection {
    background: rgba(109, 40, 217, 0.15);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(109, 40, 217, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(109, 40, 217, 0.4);
}

/* ===== DROPDOWN MENUS ===== */
#root .MuiMenu-paper,
#root .MuiPopover-paper {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
#root .MuiMenuItem-root:hover {
    background-color: #f5f3ff !important;
}
#root .MuiMenuItem-root.Mui-selected {
    background-color: #f5f3ff !important;
    color: #6d28d9 !important;
}

/* ===== DIALOG ===== */
#root .MuiDialog-paper {
    border-radius: 16px !important;
}

/* =====================================================================
   FIGMA POLISH — bring inner pages closer to the Modern Brand mockup
   ===================================================================== */

/* --- Real MetaFox selectors (via data-testid, stable across builds) --- */

/* Status Composer = card */
html body #root [data-testid="blockStatusComposer"] {
    border-radius: 16px !important;
    border: 1px solid #eef0f4 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.04) !important;
    background: #fff !important;
    margin-bottom: 20px !important;
}

/* Feed listing container: TRANSPARENT so individual posts look like cards */
html body #root [data-testid="blockHomeFeedListingBlock"] {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Individual feed items (each post) = card */
html body #root div[id^="homefeed_feed"] {
    border-radius: 16px !important;
    border: 1px solid #eef0f4 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.04) !important;
    margin-bottom: 20px !important;
    padding: 16px !important;
    background: #fff !important;
}

/* Remove double-border on the nested item wrappers inside a post */
html body #root div[id^="homefeed_feed"] [data-testid="blockContent"] {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Left sidebar (layoutSlotSide) = NO card background per Figma */
html body #root [data-testid="layoutSlotSide"],
html body #root [data-testid="layoutSlotSide"] > div,
html body #root [data-testid="layoutSlotSide"] > div > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* =====================================================================
   LEFT SIDEBAR — Figma exact match (high specificity final overrides)
   ===================================================================== */

/* Menu item base: generous padding, rounded, transparent */
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"],
html body #root [data-testid="layoutSlotSide"] li,
html body #root [data-testid="layoutSlotSide"] .MuiListItem-root,
html body #root [data-testid="layoutSlotSide"] .MuiMenuItem-root {
    background-color: transparent !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin: 2px 0 !important;
    color: #1a1a2e !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Hover state: light purple tint (NOT gray) */
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover,
html body #root [data-testid="layoutSlotSide"] li:hover,
html body #root [data-testid="layoutSlotSide"] .MuiListItem-root:hover,
html body #root [data-testid="layoutSlotSide"] .MuiMenuItem-root:hover,
html body #root [data-testid="layoutSlotSide"] a:hover {
    background-color: #f5f3ff !important;
    color: #6d28d9 !important;
}

/* Hover — icon turns purple too */
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover [class*="menuItemIcon"],
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover i,
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover svg,
html body #root [data-testid="layoutSlotSide"] a:hover i,
html body #root [data-testid="layoutSlotSide"] a:hover svg {
    color: #6d28d9 !important;
    fill: #6d28d9 !important;
}

/* Active item: light purple bg pill */
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"],
html body #root [data-testid="layoutSlotSide"] .Mui-selected,
html body #root [data-testid="layoutSlotSide"] [aria-current="page"],
html body #root [data-testid="layoutSlotSide"] a.active {
    background-color: #f5f3ff !important;
    color: #6d28d9 !important;
    border-radius: 12px !important;
}

/* Active item text + icon: purple */
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] *,
html body #root [data-testid="layoutSlotSide"] .Mui-selected *,
html body #root [data-testid="layoutSlotSide"] [aria-current="page"] * {
    color: #6d28d9 !important;
    fill: #6d28d9 !important;
    font-weight: 600 !important;
}

/* Kill any blue circle icon backgrounds from MetaFox defaults */
html body #root [data-testid="layoutSlotSide"] [class*="menuItemIcon"],
html body #root [data-testid="layoutSlotSide"] [class*="MenuItemIcon"],
html body #root [data-testid="layoutSlotSide"] [class*="iconWrap"],
html body #root [data-testid="layoutSlotSide"] [class*="IconWrap"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 24px !important;
}

/* Inactive icons: light gray (Figma) */
html body #root [data-testid="layoutSlotSide"] i,
html body #root [data-testid="layoutSlotSide"] svg {
    color: #9ca3af !important;
    fill: #9ca3af !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}

/* Menu text: dark normally */
html body #root [data-testid="layoutSlotSide"] span,
html body #root [data-testid="layoutSlotSide"] a {
    color: #1a1a2e !important;
    font-weight: 500 !important;
}

/* Active item icon — purple (highest specificity, overrides the generic i/svg rule above) */
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] i,
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] svg,
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] [class*="menuItemIcon"],
html body #root [data-testid="layoutSlotSide"] .Mui-selected i,
html body #root [data-testid="layoutSlotSide"] .Mui-selected svg,
html body #root [data-testid="layoutSlotSide"] a.active i,
html body #root [data-testid="layoutSlotSide"] a.active svg {
    color: #6d28d9 !important;
    fill: #6d28d9 !important;
}

/* Hover icon — purple */
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover i,
html body #root [data-testid="layoutSlotSide"] [class*="SidebarAppMenu-menuItem"]:hover svg,
html body #root [data-testid="layoutSlotSide"] li:hover i,
html body #root [data-testid="layoutSlotSide"] li:hover svg,
html body #root [data-testid="layoutSlotSide"] a:hover i,
html body #root [data-testid="layoutSlotSide"] a:hover svg {
    color: #6d28d9 !important;
    fill: #6d28d9 !important;
}

/* NUCLEAR: wipe all backgrounds from any Avatar/icon wrapper in sidebar */
html body #root [data-testid="layoutSlotSide"] .MuiAvatar-root,
html body #root [data-testid="layoutSlotSide"] .MuiAvatar-circular,
html body #root [data-testid="layoutSlotSide"] .MuiAvatar-rounded,
html body #root [data-testid="layoutSlotSide"] .MuiListItemIcon-root,
html body #root [data-testid="layoutSlotSide"] [class*="Avatar"],
html body #root [data-testid="layoutSlotSide"] [class*="ListItemIcon"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #9ca3af !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Active item Avatar: purple color, still no background */
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] .MuiAvatar-root,
html body #root [data-testid="layoutSlotSide"] [class*="activeMenuItem"] [class*="Avatar"],
html body #root [data-testid="layoutSlotSide"] .Mui-selected .MuiAvatar-root {
    background: transparent !important;
    color: #6d28d9 !important;
}

/* =====================================================================
   FEED USERNAMES — purple (per user request)
   ===================================================================== */
html body #root [data-testid="blockHomeFeedListingBlock"] a[href*="/user/"],
html body #root [data-testid="blockHomeFeedListingBlock"] [class*="userName"] a,
html body #root [data-testid="blockHomeFeedListingBlock"] [class*="UserName"] a,
html body #root [data-testid="blockHomeFeedListingBlock"] [class*="displayName"],
html body #root [data-testid="blockHomeFeedListingBlock"] [class*="DisplayName"],
html body #root div[id^="homefeed_feed"] a[href*="/user/"],
html body #root div[id^="homefeed_feed"] [class*="userName"] a,
html body #root div[id^="homefeed_feed"] [class*="UserName"] a,
html body #root div[id^="homefeed_feed"] h1 a,
html body #root div[id^="homefeed_feed"] h2 a,
html body #root div[id^="homefeed_feed"] h3 a,
html body #root div[id^="homefeed_feed"] h4 a,
html body #root div[id^="homefeed_feed"] strong a,
html body #root div[id^="homefeed_feed"] b a {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}

/* --- Card radius bump: 12px -> 16px everywhere it matters --- */
#root [class*="feedItem"],
#root [class*="FeedItem"],
#root [class*="ItemView-root"],
#root [class*="StatusComposer"],
#root [class*="statusCompose"],
#root [class*="composeStatus"],
#root [class*="blockContent"],
#root [class*="BlockContent"],
#root .MuiPaper-root:not(.MuiPopover-paper):not(.MuiMenu-paper):not(.MuiAppBar-root):not(.MuiDrawer-paper):not(.MuiTooltip-tooltip) {
    border-radius: 16px !important;
}

/* Softer, layered shadow for cards (Figma uses subtle elevation) */
#root [class*="feedItem"],
#root [class*="FeedItem"],
#root [class*="ItemView-root"],
#root [class*="StatusComposer"],
#root [class*="statusCompose"],
#root [class*="composeStatus"],
#root [class*="BlockView-root"],
#root [class*="blockView"] {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 1px 3px rgba(16, 24, 40, 0.04) !important;
    border: 1px solid #eef0f4 !important;
}

/* More breathing room between cards */
#root [class*="feedItem"],
#root [class*="FeedItem"],
#root [class*="ItemView-root"] {
    margin-bottom: 20px !important;
}

/* --- Right sidebar blocks: card-style widgets --- */
#root [class*="sideBar"] [class*="BlockView"],
#root [class*="sideBar"] [class*="blockView"],
#root [class*="rightSidebar"] [class*="BlockView"],
#root aside [class*="BlockView"] {
    background: #fff !important;
    border: 1px solid #eef0f4 !important;
    border-radius: 16px !important;
    padding: 4px 0 !important;
    margin-bottom: 16px !important;
}

/* Sidebar block titles (e.g. "Suggested for you", "Upcoming Events") */
#root [class*="sideBar"] [class*="blockHeader"] [class*="title"],
#root [class*="sideBar"] [class*="BlockHeader"] [class*="title"],
#root aside [class*="blockHeader"] [class*="title"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.01em !important;
}

/* --- Pill-style "Add" / action buttons (Figma: rounded purple buttons) --- */
#root [class*="sideBar"] .MuiButton-root,
#root aside .MuiButton-root {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 4px 14px !important;
    min-width: auto !important;
}

/* Friend suggestion / user list items: compact, avatar-left, action-right */
#root [class*="FriendSuggestion"] [class*="listItem"],
#root [class*="friendSuggestion"] [class*="listItem"],
#root [class*="UserItem"] {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    transition: background 0.15s ease !important;
}
#root [class*="FriendSuggestion"] [class*="listItem"]:hover,
#root [class*="UserItem"]:hover {
    background: #faf9ff !important;
}

/* --- Status composer: cleaner, no border, softer --- */
#root [class*="StatusComposer"],
#root [class*="statusCompose"] {
    padding: 4px !important;
}
#root [class*="StatusComposer"] [class*="inputField"],
#root [class*="StatusComposer"] input,
#root [class*="StatusComposer"] textarea {
    background: #f5f3ff !important;
    border-radius: 999px !important;
    border: none !important;
}

/* --- Header: compact search bar like Figma --- */
#root .MuiAppBar-root [class*="search"] {
    background: #f5f3ff !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    transition: border-color 0.15s ease !important;
}
#root .MuiAppBar-root [class*="search"]:hover {
    border-color: #e5e1ff !important;
}

/* Header height slimming */
#root .MuiAppBar-root .MuiToolbar-root {
    min-height: 64px !important;
}

/* --- Left sidebar polish: larger active indicator --- */
#root [class*="SidebarAppMenu-activeMenuItem"] {
    background-color: #f5f3ff !important;
    border-radius: 12px !important;
    padding: 4px 8px !important;
}

/* Sidebar item spacing */
#root [class*="SidebarAppMenu-menuItem"] {
    padding: 8px 10px !important;
    margin: 2px 4px !important;
}

/* Sidebar icons: slightly larger, rounded-square look */
#root [class*="SidebarAppMenu-menuItemIcon"] {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
}

/* --- Event date chip (for Upcoming Events block) --- */
#root [class*="EventItem"] [class*="date"],
#root [class*="eventDate"],
#root [class*="UpcomingEvent"] [class*="dateBox"] {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border-radius: 12px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    min-width: 52px !important;
}

/* --- Feed item images: rounded corners inside card --- */
#root [class*="feedItem"] img,
#root [class*="FeedItem"] img,
#root [class*="ItemView-root"] [class*="mediaItem"] img,
#root [class*="ItemView-root"] [class*="mediaContainer"] {
    border-radius: 12px !important;
}

/* Feed item inner padding a touch more generous */
#root [class*="feedItem"] > div,
#root [class*="ItemView-root"] > div:first-child {
    padding-left: 4px;
    padding-right: 4px;
}

/* --- Typography tuning: Figma uses slightly bolder/darker text --- */
#root body,
#root .MuiTypography-root {
    color: #1a1a2e;
}
#root [class*="userName"],
#root [class*="UserName"],
#root [class*="feedUserName"] a {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

/* Metadata (time, privacy) lighter */
#root [class*="feedTime"],
#root [class*="FeedTime"],
#root [class*="timeAgo"],
#root [class*="TimeAgo"] {
    color: #8b8ba7 !important;
    font-size: 13px !important;
}

/* =====================================================================
   FINAL STABLE SELECTORS — Emotion strips semantic class names in prod
   builds, so [class*="SidebarAppMenu-"] rules above don't match. These
   rules use stable attrs: role, data-testid, font-icon classes, MUI classes.
   ===================================================================== */

/* --- Left sidebar menu items (stable via role="menuitem") --- */
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] {
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin: 2px 0 !important;
    background: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Menu icons — font icons "ico-home", "ico-friend", etc. (stable) */
html body #root [data-testid="layoutSlotSide"] [class*="ico-"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #9ca3af !important;
    font-size: 20px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

/* Menu text color (normal state) */
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] span,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] a {
    color: #1a1a2e !important;
    font-weight: 500 !important;
}

/* Hover — STRONG purple pill on ANY hovered element in sidebar menu area
   (catches the outer wrapper, inner role=menuitem, and link — all at once) */
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:hover,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] a:hover,
html body #root [data-testid="layoutSlotSide"] li:hover,
html body #root [data-testid="layoutSlotSide"] li:hover > *,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:has(a:hover),
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:focus,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:focus-within {
    background-color: #a78bfa !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:hover [class*="ico-"],
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:hover span,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:hover a,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:focus-within [class*="ico-"],
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:focus-within span,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"]:focus-within a {
    color: #fff !important;
}

/* Kill any default MUI focus ring / ripple outline on menu items */
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] .MuiTouchRipple-root,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] .MuiButtonBase-root:focus,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] a:focus,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"] a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Active — LIGHT purple pill */
html body #root [data-testid="layoutSlotSide"] [role="menuitem"][data-active="true"] {
    background-color: #f5f3ff !important;
}
html body #root [data-testid="layoutSlotSide"] [role="menuitem"][data-active="true"] [class*="ico-"],
html body #root [data-testid="layoutSlotSide"] [role="menuitem"][data-active="true"] span,
html body #root [data-testid="layoutSlotSide"] [role="menuitem"][data-active="true"] a {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}

/* --- Feed usernames: purple; time/post links: gray --- */

/* ALL feed MuiLinks + bold text = purple (username is the most common link) */
html body #root div[id^="homefeed_feed"] a.MuiLink-root,
html body #root div[id^="homefeed_feed"] a[href^="/"],
html body #root div[id^="homefeed_feed"] strong,
html body #root div[id^="homefeed_feed"] b,
html body #root [data-testid="blockHomeFeedListingBlock"] a.MuiLink-root {
    color: #6d28d9 !important;
    font-weight: 600 !important;
}

/* Time / post-permalink / date links = muted gray (override above) */
html body #root div[id^="homefeed_feed"] a[href*="/feed/"],
html body #root div[id^="homefeed_feed"] a[href*="/post/"],
html body #root div[id^="homefeed_feed"] a[href*="/activity/"],
html body #root div[id^="homefeed_feed"] a[href*="-post-"],
html body #root div[id^="homefeed_feed"] time,
html body #root div[id^="homefeed_feed"] [class*="timeAgo"],
html body #root div[id^="homefeed_feed"] [class*="TimeAgo"] {
    color: #8b8ba7 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* Hover state for username links */
html body #root div[id^="homefeed_feed"] a.MuiLink-root:hover,
html body #root div[id^="homefeed_feed"] strong:hover,
html body #root div[id^="homefeed_feed"] b:hover {
    color: #5b21b6 !important;
}

/* Avatar initials MUST stay white (purple-text rule above bleeds into avatars) */
html body #root div[id^="homefeed_feed"] .MuiAvatar-root,
html body #root div[id^="homefeed_feed"] .MuiAvatar-root *,
html body #root div[id^="homefeed_feed"] .MuiAvatar-circular,
html body #root div[id^="homefeed_feed"] .MuiAvatar-circular *,
html body #root div[id^="homefeed_feed"] a [class*="Avatar"],
html body #root div[id^="homefeed_feed"] a [class*="Avatar"] *,
html body #root [data-testid="blockHomeFeedListingBlock"] .MuiAvatar-root,
html body #root [data-testid="blockHomeFeedListingBlock"] .MuiAvatar-root * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}