/*
 * ==========================================================================
 *                      Allegany Galactic Theme
 * ==========================================================================
 */

:root {
    /* -- Primary Colors (Deep Space Purple) -- */
    --color-primary-main: #9370DB;
    --color-primary-light: #B39DDB;
    --color-primary-dark: #7B1FA2;

    /* -- Secondary Colors (Galactic Blue) -- */
    --color-secondary-main: #42A5F5;
    --color-secondary-light: #64B5F6;
    --color-secondary-dark: #1976D2;

    /* -- Background & Surface Colors -- */
    --color-background-default: #121212; 
    --color-background-paper: #1E1E1E;   
    --color-background-heading: #181818;
    --color-background-hover: #272727;
    
    /* -- UI State Colors -- */
    --color-error: #CF6679;   
    --color-warning: #FFAB40; 
    --color-info: #29B6F6;
    --color-success: #66BB6A;

    /* -- Text Colors -- */
    --color-text-primary: rgba(255, 255, 255, 0.87); 
    --color-text-secondary: rgba(255, 255, 255, 0.6);
}

[class*="theme"] {
  /* --- Main Backgrounds & Surfaces --- */
  --background-color: var(--color-background-default);        
  --background-color-tint: var(--color-background-paper);    
  --on-surface-color: rgba(255, 255, 255, 0.87);
  
  /* --- Borders --- */
  --background-border-color: #333333;
  --dropdown-border-color: #333333;
  --modal-border-color: #333333;

  /* --- Modals & Dropdowns --- */
  --dropdown-background-color: var(--color-background-paper);
  --modal-background-color: var(--color-background-paper);

  /* --- Input Fields --- */
  --input-background-color: var(--color-background-hover);     
  --input-placeholder-color: rgba(255, 255, 255, 0.6); 

  /* --- Rich Text Containers --- */
  --rich-text-container-color: #181818;
  --rich-text-text-color: rgba(255, 255, 255, 0.87);
  --rich-text-decorations-color: var(--color-primary-main)
}

[class*="theme"] a,
[class*="theme"] .status-link,
[class*="theme"] .mention.hashtag,
[class*="theme"] .column-link {
  color: var(--color-secondary-main) !important;
}

[class*="theme"] .button--primary,
[class*="theme"] .button,
[class*="theme"] button[type="submit"],
[class*="theme"] .navigation-panel__compose-button {
  background-color: var(--color-primary-main) !important; 
  color: #FFFFFF !important;
  border-color: transparent !important;
}

[class*="theme"] .column-header {
    background-color: var(--color-background-heading) !important; 
}

/* Non-authenticated styles */

/*
 * ==========================================================================
 * General Body & Container Styling
 * ==========================================================================
 */

/* Target the body tag which contains the theme class */
body.theme-mastodon-light {
    background-color: var(--color-background-default) !important;
    color: var(--color-text-primary) !important;
}

/* Style the main form container */
body.theme-mastodon-light .form-container {
    background-color: var(--color-background-paper) !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
}

/* Style the main title */
body.theme-mastodon-light .form-container h1.title {
    color: var(--color-primary-light) !important;
    border-bottom: 1px solid #333333 !important;
    padding-bottom: 0.5em !important;
}

/* Style the lead paragraph */
body.theme-mastodon-light .form-container .lead {
    color: var(--color-text-secondary) !important;
}

/*
 * ==========================================================================
 * Component Styling
 * ==========================================================================
 */

/* General link styling */
body.theme-mastodon-light a {
    color: var(--color-secondary-main) !important;
}

body.theme-mastodon-light a:hover {
    color: var(--color-secondary-light) !important;
}

/* Button styling - targeting the 'Accept' link styled as a button */
body.theme-mastodon-light a.button {
    background-color: var(--color-primary-main) !important;
    color: var(--color-text-on-primary) !important;
    border-color: transparent !important;
}

body.theme-mastodon-light a.button:hover {
    background-color: var(--color-primary-light) !important;
}

/* Tertiary button styling - targeting the 'Back' link */
body.theme-mastodon-light a.button.button-tertiary {
    background-color: transparent !important;
    color: var(--color-secondary-main) !important;
    border: 1px solid #333333 !important;
}

body.theme-mastodon-light a.button.button-tertiary:hover {
    background-color: var(--color-background-hover) !important;
    border-color: var(--color-secondary-light) !important;
}

/* Rules list styling */
body.theme-mastodon-light .rules-list > li > button {
    color: var(--color-text-primary) !important;
    background-color: var(--color-background-hover) !important;
    border-radius: 4px !important;
}

body.theme-mastodon-light .rules-list__hint {
    color: var(--color-text-secondary) !important;
}

/* Progress tracker styling */
body.theme-mastodon-light .progress-tracker .circle {
    background-color: #333 !important;
    border-color: #555 !important;
}
body.theme-mastodon-light .progress-tracker li.active .circle {
    background-color: var(--color-primary-main) !important;
    border-color: var(--color-primary-light) !important;
}
body.theme-mastodon-light .progress-tracker li.active .label {
    color: var(--color-primary-light) !important;
}
body.theme-mastodon-light .progress-tracker .separator {
    background-color: #333 !important;
}

/*
 * ==========================================================================
 * General Layout & Panels
 * ==========================================================================
 */
 .notification-group__main__header__label {
    color: var(--color-text-primary) !important;
 }

.notification-group__main__header__label bdi {
    color: var(--color-primary-main) !important;
 }

.notification-group__main__additional-content {
    color: var(--color-text-secondary) !important;
}

.nothing-here {
    color: var(--color-text-primary) !important;
}

.column-header__button {
    color: var(--color-primary-light) !important;
}

.column-header__button:hover,
.column-header__button.active {
    color: var(--color-primary-dark) !important;
}

.admin-wrapper .content h2,
.admin-wrapper .content h3 {
    color: var(--color-primary-light) !important;
}


body .muted-hint, .admin-wrapper .content .muted-hint {
    color: var(--color-text-secondary);
}

.account__header__bio .account__header__fields dt {
    color: var(--color-primary-light) !important;
}

.link-footer p {
    color: var(--color-text-secondary) !important;
}

.column-header .column-header__back-button.compact {
    color: var(--color-primary-main) !important;
}

.hover-card {
    background-color: var(--color-background-paper) !important;
} 

.information-badge, 
.simple_form .overridden, 
.simple_form .recommended, 
.simple_form .not_recommended,
.admin-wrapper .content>p,
.hover-card__bio,
.hover-card__text-form {
    color: var(--color-text-secondary) !important;
}

.account__header__tabs__name h1,
.admin-wrapper .content h4 {
    color: var(--color-primary-light) !important;
}

.account__header__extra__links a strong {
    color: var(--color-secondary-light) !important;
}

.account__header__tabs__name h1 small,
.account__header__bio .account__header__fields dd{
    color: var(--color-text-secondary) !important;
}

.simple_form .check_boxes .checkbox label,
.simple_form .input.radio_buttons .radio label,
.simple_form .input.with_floating_label .label_input>label,
.account__header__bio .account__header__content, 
.account__header__content {
    color: var(--color-text-primary);
}

.account__header {
    background-color: var(--color-background-paper) !important;
}

.account__header__account-note label {
    color: var(--color-primary-main) !important;
}

.account__header__account-note textarea {
    color: var(--color-text-primary);
    background-color: var(--color-background-paper);
}

/* Style the inner containers of the side panels and the main column */
.empty-column-indicator, .error-column,
.columns-area__panels__pane__inner,
.column {
    color: var(--color-text-primary) !important;
    background-color: var(--color-background-paper) !important;
}

/* Add borders to separate the columns */
.columns-area__panels__pane--compositional,
.columns-area__panels__pane--start {
    border-right: 1px solid #333333 !important;
}
.columns-area__panels__pane--navigational {
    border-left: 1px solid #333333 !important;
}

/*
 * ==========================================================================
 * Left Panel & Right Navigation Panel
 * ==========================================================================
 */

 .trends__item__name {
    color: var(--color-text-secondary) !important;
 }

 .server-banner__introduction {
    color: var(--color-text-secondary) !important;
 }
 
/* Style search inputs */
.search__input {
    background-color: var(--color-background-hover) !important;
    border: 1px solid #333333 !important;
    color: var(--color-text-primary) !important;
}
.search__input::placeholder {
    color: var(--color-text-secondary) !important;
}

/* Server Info & Sign-In Banners */
.server-banner,
.sign-in-banner {
    background-color: var(--color-background-heading) !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}
.server-banner__meta__column h4,
.server-banner__description {
    color: var(--color-text-secondary) !important;
}
.server-banner__number, .display-name__html {
    color: var(--color-text-primary) !important;
}
.sign-in-banner p {
    color: var(--color-text-secondary) !important;
}
.sign-in-banner p strong {
    color: var(--color-text-primary) !important;
}
hr {
    border-color: #333333 !important;
}

/* General button styling (e.g., in sign-in banner) */
.button {
    background-color: var(--color-primary-main) !important;
    color: var(--color-text-on-primary) !important;
    border-color: transparent !important;
}
.button.button-tertiary {
    background-color: transparent !important;
    color: var(--color-secondary-main) !important;
    border: 1px solid #333333 !important;
}

/* Navigation Panel Links */
.navigation-panel .column-link {
    color: var(--color-text-secondary) !important;
}
.navigation-panel .column-link.active {
    color: var(--color-primary-light) !important;
    background-color: var(--color-background-hover) !important;
}

/*
 * ==========================================================================
 * Main Content Column ("Trending")
 * ==========================================================================
 */
 .notification__filter-bar button.active, 
 .notification__filter-bar a.active, 
 .account__section-headline button.active, 
 .account__section-headline a.active  {
    color: var(--color-primary-light) !important;
 }

.notification__filter-bar button, 
.notification__filter-bar a, 
.account__section-headline button, 
.account__section-headline a {
    color: var(--color-primary-main) !important;
}


/* Column Header */
.column-header {
    background-color: var(--color-background-heading) !important;
    border-bottom: 1px solid #333333 !important;
    color: var(--color-primary-light) !important;
}

/* Tabs below header (Posts, Hashtags, News) */
.account__section-headline {
    background-color: var(--color-background-paper) !important;
    border-bottom: 1px solid #333333 !important;
}
.account__section-headline a {
    color: var(--color-text-secondary) !important;
}
.account__section-headline a.active {
    color: var(--color-primary-main) !important;
    border-bottom: 2px solid var(--color-primary-main) !important;
}

/* Empty column message */
.empty-column-indicator span {
    color: var(--color-text-secondary) !important;
}

.status-card__title {
    color: var(--color-secondary-dark);
}

/*
 * ==========================================================================
 * Mobile Navigation Bar
 * ==========================================================================
 */
.ui__navigation-bar {
    background-color: var(--color-background-heading) !important;
    border-top: 1px solid #333333 !important;
}

/*
 * ==========================================================================
 * Feeds
 * ==========================================================================
 */

.status__content, 
.edit-indicator__content, 
.reply-indicator__content{
    color: var(--color-text-primary) !important;
}

/*
 * ==========================================================================
 * Forms
 * ==========================================================================
 */
 
.search__icon,
.search__popout h4 {
    color: var(--color-primary-light) !important;
}

.search-results__section__header {
    color: var(--color-primary-light) !important;
    background-color: var(--color-background-hover) !important;
}

.search__popout__menu__item {
    color: var(--color-secondary-light) !important;
}
.search__popout__menu__item mark {
    color: var(--color-secondary-dark) !important;
}

.search__popout__menu__message {
    color: var(--color-text-secondary);
}

 .simple_form .lead  {
    color: var(--color-text-primary) !important;
 }

 .app-form__toggle__label strong {
    color: var(--color-primary-main) !important;
 }

.compose-form .autosuggest-textarea__textarea, 
.compose-form .spoiler-input__input {
    color: var(--color-text-primary) !important;
}

.simple_form .input.with_block_label>label,
.safety-action-modal__confirmation h1,
.rules-list__text  {
    color: var(--color-primary-light) !important;
}

.simple_form .hint code {
    background-color: var(--color-background-hover);
}

.simple_form .hint,
.simple_form .input.with_label .label_input>label, 
.safety-action-modal__confirmation {
    color: var(--color-text-primary) !important;
}

.hover-card__numbers {
    color: var(--color-text-primary) !important;
}

.hover-card .account-field dl dt {
    color: var(--color-text-secondary) !important;
}