/* ===== XBOX PLAYER PULSE DARK THEME ===== */

@property --brand-dark-color {
  syntax: "<color>";
  inherits: false;
  initial-value:#054b17;
}

@property --brand-medium-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #107c10;
}

@property --brand-light-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #9cf00b;
}

@property --sphere-dark-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #243f02;
}

@property --sphere-medium-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #3d6a03;
}

@property --sphere-light-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #a4f00b;
}

/* ============================================
   1. BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    background-color: #121212 !important;
    color: #e5e7eb !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

#root,
.ms-Fabric {
    background-color: #121212 !important;
    color: #e5e7eb !important;
}

/* ============================================
   2. NAVBAR / HEADER
   — scope to #root so Power Pages custom header is untouched
   ============================================ */
#root header {
    background-color: #0a0a0a !important;
    border-bottom: 1px solid #1f1f1f !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

[data-testid="navBar"] {
    background-color: #0a0a0a !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Preserve Power Pages injected header (Microsoft logo etc.)
   Fully isolate from dark theme — revert all inherited properties
   so global a{color}, h*{color}, .ms-Stack{background} etc. don't bleed in */
#custom-header,
#idea-custom-header,
#custom-header *,
#idea-custom-header * {
    color: revert !important;
    background-color: revert !important;
    background-image: revert !important;
    border-color: revert !important;
    fill: revert !important;
    opacity: revert !important;
    visibility: revert !important;
    display: revert !important;
}

/* ============================================
   2d. USER AVATAR (Persona)
   ============================================ */
.ms-Persona-coin,
.ms-PersonaCoin {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.ms-Persona-initials,
.ms-PersonaCoin-initials {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

[data-testid="customPersona"] .ms-Persona-coin {
    background-color: #f97316 !important;
    border-radius: 50% !important;
}

/* Sign In button */
[data-testid="signIn"],
.ms-Button[data-testid="signIn"] {
    background-color: var(--brand-medium-color) !important;
    border: 1px solid var(--brand-dark-color) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* ============================================
   3. BANNER ("Welcome to our ideas")
   ============================================ */
[aria-labelledby="banner-header"] {
    background-color: #121212 !important;
    padding: 48px 24px !important;
    text-align: center !important;
}

[aria-labelledby="banner-header"] * {
    color: #ffffff !important;
}

[aria-labelledby="banner-header"] #banner-header {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* ============================================
   4. FORUM CARD
   ============================================ */
[data-testid="routerCard"] {
    background-color: #1e1e1e !important;
    border: 1px solid #2d2d2d !important;
    border-radius: 10px !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

[data-testid="routerCard"]:hover {
    background-color: #242424 !important;
    border-color: var(--brand-medium-color) !important;
}

[data-testid="forumListItem"] * {
    color: #e5e7eb !important;
}

[data-testid="forumListItem"] h2,
[data-testid="forumListItem"] strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-testid="forumListItem"] p {
    color: #d1d5db !important;
}

[data-testid="forumListItem"] span {
    color: #d1d5db !important;
}

/* ============================================
   5. PAGE LIST HEADER
   ============================================ */
[data-testid="pageListHeader"] {
    background-color: #121212 !important;
}

[data-testid="pageListHeader"] * {
    color: #e5e7eb !important;
}

/* ============================================
   6. FORUM LIST + ITEM LIST
   ============================================ */
[data-testid="forumList"],
[data-testid="ForumListBody"],
[data-testid="itemList"] {
    background-color: #121212 !important;
}

/* ============================================
   7. BUTTONS — PRIMARY (filled green)
   ============================================ */
.ms-Button--primary,
.ms-Button[class*="primary"] {
    background-color: var(--brand-medium-color) !important;
    border: 1px solid var(--brand-dark-color) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease !important;
}

.ms-Button--primary:hover {
    background-color: var(--brand-dark-color) !important;
}

.ms-Button--primary .ms-Button-label,
.ms-Button--primary .ms-Button-icon i {
    color: #ffffff !important;
}

/* Header action buttons (My content, Post a new idea) */
[data-testid="pageListHeaderRightActions"] button,
[data-testid="pageListHeaderRightActions"] .ms-Button,
[data-testid="MyContentButton"].ms-Button--default {
    background-color: var(--brand-medium-color) !important;
    border: 1px solid var(--brand-medium-color) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow:  0 4px 12px color-mix(in srgb, var(--brand-medium-color), transparent 75%);
}

[data-testid="pageListHeaderRightActions"] button:hover,
[data-testid="pageListHeaderRightActions"] .ms-Button:hover,
[data-testid="MyContentButton"].ms-Button--default:hover {
    background-color: var(--brand-dark-color) !important;
    border: 1px solid var(--brand-dark-color) !important;
    box-shadow:  0 4px 12px color-mix(in srgb, var(--brand-medium-color), transparent 60%);
}

/* BUTTONS — DEFAULT / SECONDARY (ghost) */
.ms-Button--default {
    background-color: transparent !important;
    border: 1px solid #3a3a3a !important;
    color: #d1d5db !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.ms-Button--default .ms-Button-label {
    color: #d1d5db !important;
}

.ms-Button--default:hover {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

/* BUTTONS — DISABLED */
.ms-Button.is-disabled {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #4b5563 !important;
    cursor: not-allowed !important;
}

/* ============================================
   7b. SEARCH BAR — prevent green leaking into internal buttons
   ============================================ */
.ms-SearchBox button,
.ms-SearchBox-clearButton button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   8. SEARCH BAR
   ============================================ */
.ms-SearchBox {
    background-color: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 10px !important;
    height: 44px !important;
    transition: border-color 0.15s ease !important;
}

.ms-SearchBox:focus-within {
    border-color: var(--brand-medium-color) !important;
    box-shadow: 0 0 0 1px var(--brand-medium-color) !important;
}

.ms-SearchBox input,
.ms-SearchBox-field {
    background-color: transparent !important;
    color: #e5e7eb !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    height: 100% !important;
}

.ms-SearchBox-field::placeholder,
.ms-SearchBox input::placeholder {
    color: #6b7280 !important;
}

.ms-SearchBox-icon,
.ms-SearchBox-icon i {
    color: #9ca3af !important;
}

.ms-SearchBox-clearButton button {
    background-color: transparent !important;
    border: none !important;
}

.ms-SearchBox-clearButton i,
.ms-SearchBox-clearButton .ms-Icon {
    color: #9ca3af !important;
}

.ms-SearchBox-clearButton:hover i {
    color: #ffffff !important;
}

/* Search context - dropdown ("This forum" / "All") */
[data-testid="searchBarContainer"] .ms-Dropdown-container {
    height: stretch;
    align-content:center;
}

[data-testid="searchBarContainer"] .ms-Dropdown-title,
[data-testid="searchBarContainer"] .ms-Dropdown {
    background-color: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    border-left: 1px solid #3a3a3a !important;
}

[data-testid="searchBarContainer"] .ms-Dropdown-caretDown,
[data-testid="searchBarContainer"] .ms-Dropdown-caretDownWrapper,
[data-testid="searchBarContainer"] .ms-Dropdown-caretDownWrapper i {
    background-color: transparent !important;
    color: #9ca3af !important;
}

[data-testid="searchBarContainer"] .ms-Dropdown-title:hover {
    color: #ffffff !important;
}

/* Search context - Hide chevron right icon  */
[data-testid="searchBarContainer"] .ms-Button {
    display: none;
}

[data-testid="searchBarContainer"] .ms-Button[data-icon-name="ChevronRightMed"] {
    display: none;
}

/* Submit chevron button */
[data-testid="searchBarContainer"] .ms-IconButton {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

[data-testid="searchBarContainer"] .ms-IconButton i,
[data-testid="searchBarContainer"] .ms-IconButton .ms-Icon {
    color: #9ca3af !important;
}

[data-testid="searchBarContainer"] .ms-IconButton:hover {
    background-color: transparent !important;
}

[data-testid="searchBarContainer"] .ms-IconButton:hover i,
[data-testid="searchBarContainer"] .ms-IconButton:hover .ms-Icon {
    color: #ffffff !important;
}

/* ============================================
   9. TABS / PIVOT
   ============================================ */
.ms-Pivot {
    background-color: transparent !important;
}

.ms-Pivot-link {
    background: transparent !important;
    color: #9ca3af !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}

.ms-Pivot-link:hover {
    color: #ffffff !important;
    background-color: transparent !important;
}

.ms-Pivot-link.is-selected,
.ms-Pivot-link[aria-selected="true"] {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.ms-Pivot-link.is-selected::before {
    background-color: var(--brand-medium-color) !important;
    height: 2px !important;
}

/* ============================================
   10. DROPDOWN
   ============================================ */
.ms-Dropdown-title {
    background-color: #1e1e1e !important;
    color: #e5e7eb !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 6px !important;
}

.ms-Dropdown-title:hover {
    border-color: #555 !important;
    color: #ffffff !important;
}

.ms-Dropdown-title i,
.ms-Dropdown-title .ms-Icon,
.ms-Dropdown-title span,
.ms-Dropdown-title .ms-Text {
    color: #e5e7eb !important;
}

.ms-Dropdown::after {
    border: none !important;
}

.ms-Dropdown-caretDown,
.ms-Dropdown-caretDownWrapper i {
    color: #9ca3af !important;
}

.ms-Callout,
.ms-Callout-main {
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

.ms-Dropdown-items,
.ms-Dropdown-itemsWrapper {
    background-color: #1e1e1e !important;
}

.ms-Dropdown-item,
.ms-Dropdown-item button {
    background-color: #1e1e1e !important;
    color: #e5e7eb !important;
    border: none !important;
    border-radius: 0 !important;
}

.ms-Dropdown-item:hover,
.ms-Dropdown-item:focus {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

.ms-Dropdown-item.is-selected {
    background-color: #1f2d1f !important;
    color: var(--brand-light-color) !important;
}

/* ============================================
   11. CONTEXT MENU
   ============================================ */
.ms-ContextualMenu,
.ms-ContextualMenu-list {
    background-color: #1e1e1e !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    
    .ms-ContextualMenu-icon{
        color: var(--brand-light-color) !important;
    }
    
    .ms-ContextualMenu-item:hover {
    border-color: var(--brand-light-color) !important;
    }

    /* TODO: This is a temporary fix to hide the share via link
    button since it's broken */
    [data-testid="shareThroughGetLink"] {
        visibility: hidden;
        display: none;
    }
}

.ms-ContextualMenu-item > button {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: #e5e7eb !important;
}

.ms-ContextualMenu-item > button:hover {
    background-color: #2a2a2a !important;
}

/* ============================================
   12. INPUTS / FORMS
   ============================================ */
input, textarea, select {
    background-color: #1e1e1e !important;
    color: #e5e7eb !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 8px !important;
}

input::placeholder,
textarea::placeholder {
    color: #6b7280 !important;
}

.ms-TextField-fieldGroup {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
    border-radius: 8px !important;
}

.ms-TextField-field {
    background-color: transparent !important;
    color: #e5e7eb !important;
}

/* ============================================
   13. CHECKBOXES
   ============================================ */
.ms-Checkbox-checkbox {
    background-color: #1e1e1e !important;
    border-color: #4b5563 !important;
    border-radius: 4px !important;
}

.ms-Checkbox.is-checked .ms-Checkbox-checkbox {
    background-color: var(--brand-medium-color) !important;
    border-color: var(--brand-medium-color) !important;
}

.ms-Checkbox-label {
    color: #d1d5db !important;
}

.ms-ChoiceField-field.is-checked::before {
    border-color: white !important;
}

.ms-ChoiceField-field.is-checked::after {
    border-color: var(--brand-medium-color) !important;
}

/* ============================================
   14. MODAL / DIALOG / PANEL
   ============================================ */
.ms-Modal,
.ms-Dialog-main {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
}

.ms-Dialog-title,
.ms-Modal-scrollableContent {
    color: #ffffff !important;
}

.ms-Overlay {
    background-color: rgba(0,0,0,0.75) !important;
}

.ms-Panel-main {
    background-color: #1a1a1a !important;
    border-left: 1px solid #2a2a2a !important;
}

/* ============================================
   15. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6,
.ms-Text {
    color: #ffffff !important;
}

a {
    color: var(--brand-light-color) !important;
    text-decoration: none !important;
}

a:hover {
    color: #86efac !important;
    text-decoration: none !important;
}

.ms-Label {
    color: #9ca3af !important;
}

/* ============================================
   16. SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   17. MISC FLUENT CONTAINERS
   ============================================ */
.ms-Stack,
.ms-StackItem {
    background-color: transparent !important;
}

/* ============================================
   18. CONTENT AREA
   ============================================ */
main {
    min-height: 100vh !important;
    background-color: #121212 !important;
}

/* ============================================
   19. IDEA CARD — VOTE BUTTON
   ============================================ */
[data-testid="voteButton"] {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    color: #9ca3af !important;
}

[data-testid="voteButton"]:hover {
    background-color: #1e1e1e !important;
    border-color: var(--brand-medium-color) !important;
    color: #ffffff !important;
}

[data-testid="voteButton"].is-checked,
[data-testid="voteButton"][aria-pressed="true"] {
    background-color: var(--brand-medium-color) !important;
    border-color: var(--brand-medium-color) !important;
    color: #ffffff !important;
}

[data-testid="voteButton"].is-checked *,
[data-testid="voteButton"][aria-pressed="true"] * {
    color: #ffffff !important;
}

[data-testid="voteButton"] *,
[data-testid="itemVoteCount"] {
    color: inherit !important;
}

/* ============================================
   20. IDEA CARD — TAGS
   ============================================ */

/* Container: no border, no background */
[data-testid="tags"],
[data-testid="tags"] > .ms-Stack,
[data-testid="tags"] > .ms-StackItem,
[data-testid="tags"] .ms-Stack,
[data-testid="tags"] .ms-StackItem {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Stage tag — green pill */
[data-testid="ideaStage"] {
    background: #1a2d1a !important;
    color: var(--brand-light-color) !important;
    border: 1px solid var(--brand-medium-color) !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    display: inline-block !important;
}

/* Group + Category tags — dark gray pill */
[data-testid="itemGroup"],
[data-testid="itemCategory"] {
    background: #1e1e1e !important;
    color: #6b7280 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    display: inline-block !important;
}

/* ============================================
   21. IDEA CARD — ACTION BUTTONS
       (comments, follow, share, flag)
   ============================================ */
[data-testid="ideaListItemActions"] button,
[data-testid="ideaListItemActions"] .ms-Button,
[data-testid="ideaListItemCommentLink"],
[data-testid="followFeature"],
[data-testid="ideaListItemFlagLink"] {
    background-color: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Force all child elements — icons, labels, spans — to same gray
   (ideaListItemCommentLink is an <a> tag, gets green from global a rule) */
[data-testid="ideaListItemCommentLink"],
[data-testid="ideaListItemCommentLink"] *,
[data-testid="followFeature"],
[data-testid="followFeature"] *,
[data-testid="ideaListItemFlagLink"],
[data-testid="ideaListItemFlagLink"] *,
[data-testid="ideaListItemActions"] *,
[data-testid="ideaListItemActions"] button,
[data-testid="ideaListItemActions"] .ms-Button {
    color: #9ca3af !important;
}

/* Hover — all children turn white together */
[data-testid="ideaListItemCommentLink"]:hover,
[data-testid="ideaListItemCommentLink"]:hover *,
[data-testid="followFeature"]:hover,
[data-testid="followFeature"]:hover *,
[data-testid="ideaListItemFlagLink"]:hover,
[data-testid="ideaListItemFlagLink"]:hover *,
[data-testid="ideaListItemActions"] button:hover,
[data-testid="ideaListItemActions"] button:hover *,
[data-testid="ideaListItemActions"] .ms-Button:hover,
[data-testid="ideaListItemActions"] .ms-Button:hover * {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* ============================================
   22. COMPANY / MODERATOR RESPONSE CONTAINER
   — ItemListItem.tsx uses neutralQuaternaryAlt (near-white) as borderColor
   — ReplyContainer.tsx hard-codes themeWhiteColor as background + borderLeftColor
   ============================================ */

/* On idea list cards (ItemListItem) */
[data-testid="moderatorContainer"] {
    background: #0c1a0c !important;
    border: 1px solid var(--sphere-dark-color) !important;
    border-radius: 8px !important;
}

[data-testid="moderatorContainer"] * {
    color: #9ca3af !important;
}

[data-testid="moderatorContainer"] a {
    color: var(--brand-light-color) !important;
}

/* On idea detail page (ReplyContainer / comments section) */
[data-testid="replyContainer"] {
    background: #0c1a0c !important;
    border: 1px solid var(--sphere-dark-color) !important;
    border-radius: 8px !important;
}

[data-testid="replyContainer"] * {
    color: #9ca3af !important;
}

[data-testid="replyContainer"] a {
    color: var(--brand-light-color) !important;
}

/* ============================================
   23. COMPANY RESPONSE BADGE
   — withIcon renders: <Stack><icon/><text/></Stack>
   — :has(> ...) matches ONLY the direct parent Stack, not ancestors
   ============================================ */
.ms-Stack:has(> [data-testid="companyResponse"]) {
    background: var(--sphere-dark-color) !important;
    border: 1px solid var(--brand-medium-color) !important;
    border-radius: 20px !important;
    padding: 1px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    min-height: unset !important;
    line-height: 1 !important;
    gap: 4px !important;
}

[data-testid="companyResponse"] {
    color: var(--brand-light-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Target the icon element itself (CustomIcon renders <i data-testid="companyResponseIcon">) */
[data-testid="companyResponseIcon"],
[data-testid="companyResponseIcon"] i,
[data-testid="companyResponseIcon"] .ms-Icon {
    color: var(--brand-light-color) !important;
    fill: var(--brand-light-color) !important;
    font-size: 12px !important;
}

/* Override moderatorContainer wildcard that turns everything gray */
[data-testid="moderatorContainer"] [data-testid="companyResponseIcon"],
[data-testid="replyContainer"] [data-testid="companyResponseIcon"] {
    color: var(--brand-light-color) !important;
}

/* Keep persona initials white inside moderator/reply containers */
[data-testid="moderatorContainer"] .ms-Persona-initials,
[data-testid="moderatorContainer"] .ms-PersonaCoin-initials,
[data-testid="replyContainer"] .ms-Persona-initials,
[data-testid="replyContainer"] .ms-PersonaCoin-initials {
    color: #ffffff !important;
}

/* Date + interpunct in author action rows — muted gray */
[data-testid="authorActionDate"],
[data-testid="authorActionText"] {
    color: #6b7280 !important;
}

/* Inside moderator/reply containers, date should match the rest of the text */
[data-testid="moderatorContainer"] [data-testid="authorActionDate"],
[data-testid="moderatorContainer"] [data-testid="authorActionText"],
[data-testid="replyContainer"] [data-testid="authorActionDate"],
[data-testid="replyContainer"] [data-testid="authorActionText"] {
    color: #9ca3af !important;
}

/* ============================================
   24. SHIMMER / LOADING SKELETON
   — CustomShimmer.tsx uses neutralLighterAlt (near-white) as shimmerWrapper bg
     and theme.palette.white in the gradient; override both
   ============================================ */
.ms-Shimmer-shimmerWrapper,
.ms-Shimmer-container {
    background-color: #2a2a2a00 !important;
    border-radius: 20px !important;
}

.ms-Shimmer-shimmerGradient {
    background: linear-gradient(
        to right,
        #2a2a2a 0%,
        #3a3a3a 50%,
        #2a2a2a 100%
    ) 0px 0px / 90% 100% no-repeat !important;
}

/* ============================================
   25. ITEM TITLE + DESCRIPTION — white/gray, not green
   — RouterCard is an <a> tag so a{color:var(--brand-light-color)} bleeds into all child text
   ============================================ */
/* White by default, green on card hover */
[data-testid="itemTitle"],
[data-testid="itemTitle"] * {
    color: #ffffff !important;
}

[data-testid="routerCard"]:hover [data-testid="itemTitle"],
[data-testid="routerCard"]:hover [data-testid="itemTitle"] * {
    color: var(--brand-light-color) !important;
}

[data-testid="itemDescription"],
[data-testid="itemDescription"] *,
[data-testid="itemDescription"] p,
[data-testid="itemDescription"] span {
    color: #9ca3af !important;
}

/* ============================================
   26. AUTHOR / USER NAME — white, not green
   ============================================ */
[data-testid="authorInfoName"],
[data-testid="authorInfoName"] a,
[data-testid="authorInfoName"] span,
[data-testid="authorInfo"] [data-testid="authorInfoName"],
[data-testid="itemPostedBy"],
[data-testid="itemPostedBy"] a,
[data-testid="itemPostedBy"] span,
[data-testid="replyAuthor"],
[data-testid="replyAuthor"] a,
[data-testid="replyAuthor"] span,
[data-testid="commentsAuthor"],
[data-testid="commentsAuthor"] a,
[data-testid="commentsAuthor"] span,
.ms-Persona-primaryText,
.ms-Persona-details .ms-Persona-primaryText {
    color: #ffffff !important;
}

/* Ensure forumListItem span rule doesn't override author name */
[data-testid="forumListItem"] [data-testid="authorInfoName"],
[data-testid="forumListItem"] [data-testid="authorInfoName"] span,
[data-testid="forumListItem"] [data-testid="itemPostedBy"],
[data-testid="forumListItem"] [data-testid="itemPostedBy"] span {
    color: #ffffff !important;
}

[data-testid="authorInfoName"] a:hover,
[data-testid="itemPostedBy"] a:hover,
[data-testid="replyAuthor"] a:hover,
[data-testid="commentsAuthor"] a:hover {
    color: #e5e7eb !important;
}

/* ============================================
   27. FILTERS SIDEBAR
   ============================================ */

/* Overall filters panel */
[data-testid="filters"] {
    background-color: #1a1a1a !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
}

/* Each filter group — add divider between groups */
[data-testid="itemListFilter"] {
    background-color: transparent !important;
    border-bottom: 1px solid #2d2d2d !important;
    padding: 16px 12px !important;
    margin: 0 !important;
}

[data-testid="itemListFilter"]:last-child {
    border-bottom: none !important;
}

/* Filter group header text (Categories, Groups, Stages) */
[data-testid="itemListFilter"] > .ms-Stack > span:first-child,
[data-testid="itemListFilter"] > .ms-Stack > .ms-StackItem:first-child span,
[data-testid="itemListFilter"] .ms-Label,
[data-testid="itemListFilter"] > span {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Checkbox labels inside filter groups */
[data-testid="itemListFilter"] .ms-Checkbox-label,
[data-testid="itemListFilter"] .ms-Checkbox-text {
    color: #9ca3af !important;
    font-size: 14px !important;
}

[data-testid="itemListFilter"] .ms-Checkbox:hover .ms-Checkbox-text {
    color: #ffffff !important;
}

/* Checked checkbox text */
[data-testid="itemListFilter"] .ms-Checkbox.is-checked .ms-Checkbox-text {
    color: var(--brand-light-color) !important;
}

/* Checkbox box itself */
[data-testid="itemListFilter"] .ms-Checkbox-checkbox {
    border-color: #4b5563 !important;
    background: transparent !important;
}

[data-testid="itemListFilter"] .ms-Checkbox.is-checked .ms-Checkbox-checkbox {
    border-color: var(--brand-light-color) !important;
    background: var(--brand-light-color) !important;
}

/* See all button */
[data-testid="showMoreFiltersButton"], [data-testid="showLessFiltersButton"] {
    color: var(--brand-light-color) !important;
}

/* Clear filter link */
[data-testid="filterClear"] {
    color: var(--brand-light-color) !important;
    font-size: 13px !important;
}

[data-testid="filterClear"]:hover {
    color: var(--brand-medium-color) !important;
    text-decoration: none !important;
}

[data-testid="listCountLabel"] {
    color: #ffff !important;
}

/* Paginatination Navigator */
[data-testid="paginator"] .ms-Stack {
    gap: 8px;
}

[data-testid="paginator"] .ms-Button {
    border-radius: 8px !important;
}

[data-testid="paginator"] .ms-Button.is-checked {
    background-color: var(--brand-light-color);
    border-color:var(--brand-light-color);
}

[data-testid="paginator"] .ms-Button.is-checked:hover {
    color:#ffffff;
    background-color: var(--brand-dark-color);
    border-color:var(--brand-dark-color);
}

[data-testid="paginator"] .ms-Button:hover {
    color:var(--brand-light-color);
}

[data-testid="paginator"] .ms-Button-icon {
    color:var(--brand-light-color) !important;
}

[data-testid="paginator"] .ms-Button.is-disabled {
    .ms-Button-icon {
        color:#4b5563 !important;
    }
}

/* Sorting Dropdown Icons */
.ms-Callout [data-testid="customIcon"] {
    color: var(--brand-light-color);
}

/* Xbox logo */
#MicrosoftLogo {
    height: 60% !important;
}

/* Spinner */
[data-test-id="spinner"] *, .ms-Spinner * {
    color: var(--brand-light-color) !important;
}