/* GLOBAL STYLING - Updated for Mastodon 4.5.0 */

:root {
    --custom-bg-dark: #191B22;
    --custom-bg-medium: #282C37;
    --custom-bg-bright: #313543;
    --custom-bg-accent: #393F4F;
    
    --custom-fg-dark: #606885;
    --custom-fg-medium: #9CA6C9;
    --custom-fg-bright: #D9DCE8;
    
    /* Override Mastodon 4.5.0 variables */
    --color-background: var(--custom-bg-dark);
    --color-background-1: var(--custom-bg-dark);
    --color-background-2: var(--custom-bg-medium);
    --color-background-3: var(--custom-bg-bright);
    --color-background-4: var(--custom-bg-accent);
    --color-surface: var(--custom-bg-medium);
    --color-surface-1: var(--custom-bg-bright);
    --color-surface-2: var(--custom-bg-accent);
    --color-surface-3: var(--custom-bg-accent);
    --color-surface-4: var(--custom-bg-bright);
    --color-surface-variant: var(--custom-bg-bright);
    --color-primary-text: var(--custom-fg-bright);
    --color-secondary-text: var(--custom-fg-medium);
    --color-tertiary-text: var(--custom-fg-dark);
    --color-border: var(--custom-bg-accent);
    
    /* Legacy variables for compatibility */
    --background-color: var(--custom-bg-medium);
    --background-border-color: var(--custom-bg-accent);
    --on-surface-color: var(--custom-bg-bright);
    --dropdown-border-color: var(--custom-bg-accent);
    --dropdown-background-color: var(--custom-bg-medium);
}

/* Body and main wrapper */
body, 
.tabs-bar__wrapper,
.ui,
.ui__header {
    background: var(--custom-bg-dark) !important;
}

body {
    scrollbar-color: var(--custom-fg-dark) var(--custom-bg-accent);
}

/* Column layout and spacing */
body.layout-multiple-columns .columns-area {
    display: flex;
    justify-content: center;
    gap: 10px; /* Add space between columns */
    padding: 10px; /* Add padding around columns area */
    background: var(--custom-bg-dark) !important;
}

/* Main column styling - FIXED to not interfere with scrolling */
body.layout-multiple-columns .columns-area .column,
body.layout-multiple-columns .columns-area .drawer {
    min-width: 335px;
    width: 25vw;
    max-width: 400px;
    flex: 1 1 25vw;
    border: 1px solid var(--custom-bg-accent) !important;
    border-radius: 8px;
    background: var(--custom-bg-medium) !important;
    margin: 0;
    /* NO overflow property here to preserve scrolling functionality */
    position: relative; /* Ensure proper stacking context */
}

/* Fix for notifications column specifically */
body.layout-multiple-columns .columns-area .column-notifications {
    min-width: 335px !important;
    width: 25vw !important;
    max-width: 400px !important;
    flex: 1 1 25vw !important;
}

/* Ensure scrollable areas work properly */
.scrollable {
    overflow-y: scroll !important; /* Explicitly set scroll */
    overflow-x: hidden !important;
    background: var(--custom-bg-medium) !important;
    border: none !important;
}

/* Column scrollable specific - ensure it can scroll */
.column > .scrollable {
    overflow-y: scroll !important; /* Force scrolling to work */
    overflow-x: hidden !important;
    background: var(--custom-bg-medium) !important;
    border: none !important;
    position: relative !important; /* Ensure proper positioning */
}

.column-header__collapsible,
.column-header__collapsible-inner {
    background: var(--custom-bg-medium) !important;
    border: none !important;
}

/* Ensure column headers fit within rounded borders */
.column-header {
    border-radius: 8px 8px 0 0 !important;
    border: none !important;
    position: relative !important;
    z-index: 2; /* Ensure header stays on top */
}

/* Notification filters */
.notification__filter-bar,
.column-header__notif-cleaning-buttons {
    background: var(--custom-bg-medium) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Headers - Updated for 4.5.0 */
.column-header,
.column-header__wrapper,
.drawer__header,
.drawer__pager,
.drawer__inner,
.drawer__inner__mastodon,
.column-subheading,
.column-header__buttons,
.column-back-button,
.column-header__back-button {
    background: var(--custom-bg-bright) !important;
    border: none !important;
}

/* Status cards and toots */
.status,
.status__wrapper,
.detailed-status,
.detailed-status__wrapper,
.conversation,
.account-card,
.notification {
    background: var(--custom-bg-medium) !important;
}

/* Add subtle separation between posts */
.status,
.notification {
    border-bottom: 1px solid var(--custom-bg-accent) !important;
}

.status__content,
.reply-indicator__content,
.account__header__bio {
    color: var(--custom-fg-bright) !important;
}

/* Text fields and compose area */
.compose-form__highlightable,
.autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.search__input,
.search__popout,
.autosuggest-textarea,
.autosuggest-input {
    background: var(--custom-bg-medium) !important;
    border: none !important;
    color: var(--custom-fg-bright) !important;
}

/* Search bar specific */
.search__input:focus,
.search__input {
    background: var(--custom-bg-medium) !important;
    color: var(--custom-fg-bright) !important;
}

/* Emoji search */
.emoji-mart-search input {
    background: var(--custom-bg-bright) !important;
    color: var(--custom-fg-medium) !important;
}

/* Hashtags */
.hashtag-bar a {
    background: var(--custom-bg-bright) !important;
}

.hashtag-bar a:hover {
    background: var(--custom-bg-accent) !important;
}

/* Text colors - Foreground dark */
.link-footer p,
.link-footer p a,
.trends__item__name,
.notification-ungrouped__header,
.notification-group__embedded-status__account,
.status__relative-time,
.status__display-name,
.icon-button,
.status__prepend,
.load-more,
.timeline-hint,
.detailed-status__meta,
.relative-timestamp {
    color: var(--custom-fg-dark) !important;
}

/* Text colors - Foreground medium */
.notification-group__main__header__label,
.notification-group__embedded-status__content,
.column-subheading,
.drawer__tab,
.column-header__button,
.account .account__display-name,
.notification-group__embedded-status__account bdi,
.getting-started__trends a,
.getting-started__trends h4 a,
.notification__filter-bar button:not(.active),
.hashtag-bar,
.status-card,
.search__input,
.character-counter,
.detailed-status__display-name,
.search__icon .icon,
.search__popout h4,
.search__popout__menu__item,
.search__popout .icon-button,
.emoji-mart-search input,
.emoji-mart-anchor,
.display-name__account {
    color: var(--custom-fg-medium) !important;
}

/* Text colors - Foreground bright */
.column-link,
.status__content a,
.content-warning,
.display-name__html,
.account__display-name strong {
    color: var(--custom-fg-bright) !important;
}

/* Links in content */
.status__content a,
.account__header__bio a {
    color: var(--custom-fg-bright) !important;
    text-decoration: underline;
}

/* De-annoyify content warnings */
.spoiler-input__border, 
.content-warning::before, 
.content-warning::after {
    display: none;
}

.content-warning {
    border: 1px solid var(--custom-bg-accent) !important;
    border-radius: 4px !important;
    background: var(--custom-bg-bright) !important;
}

.content-warning > .link-button > span {
    display: none;
}

.content-warning > .link-button::after {
    content: "Show post";
}

.content-warning:has(+ .status__content) > .link-button::after {
    content: "Hide post";
}

/* Toot box size */
.compose-form .autosuggest-textarea__textarea {
    min-height: 240px !important;
}

/* Compose form */
.compose-form__highlightable {
    border: 0;
    background: 0;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
    border: 1px solid var(--custom-bg-accent) !important;
    border-radius: 4px;
}

.compose-form__footer {
    display: grid;
    grid-template-areas:
        "buttons buttons"
        "dropdowns submit";
    padding: 0;
}

.compose-form__buttons {
    grid-area: buttons;
}

.compose-form__dropdowns {
    grid-area: dropdowns;
}

.compose-form__submit {
    grid-area: submit;
}

.compose-form__actions {
    display: contents;
}

.compose-form__uploads {
    padding: 0;
}

.compose-form .spoiler-input__input {
    border-radius: 4px 4px 0 0;
}

.compose-form .spoiler-input + .autosuggest-textarea .autosuggest-textarea__textarea {
    border-radius: 0 0 4px 4px;
    border-top: 0;
}

.compose-form .spoiler-input .autosuggest-input {
    border-bottom: 0;
}

.compose-form__poll .poll__option {
    padding: 0;
}

.emoji-picker-dropdown__menu {
    margin-left: 5px;
}

/* Compose button */
.compose-form__actions .button {
    font-size: 0;
}

.compose-form__actions .button::after {
    font-size: 14px;
    content: 'Chuff!';
}

/* Emoji sizing */
.emoji {
    font-size: 1.5em;
    width: auto;
    height: auto;
}

/* Trends and sidebar */
.getting-started__trends,
.search-results__section,
.account__section-headline {
    background: var(--custom-bg-medium) !important;
    border: none !important;
}

/* Column back button */
.column-back-button,
.column-header__back-button {
    background: var(--custom-bg-bright) !important;
    color: var(--custom-fg-medium) !important;
}