/* === WeSense.earth Dark Theme Rebrand === */

/* ============================================
   THEME TOKENS — Change these to retheme.
   Everything below references these variables.
   ============================================ */
:root {
  /* -- Brand palette (raw colors) -- */
  --brand-canopy: #2D6A4F;
  --brand-fern: #52B788;
  --brand-deep-forest: #1B4332;
  --brand-lichen: #B7E4C7;
  --brand-morning-dew: #E8F5EE;
  --brand-amber: #D4A017;
  --brand-dark-honey: #8B6914;
  --brand-golden-haze: #F2CC8F;
  --brand-charcoal: #1A1A18;
  --brand-dark-stone: #3D3D38;
  --brand-warm-grey: #8D8478;
  --brand-pebble: #C7C1B7;
  --brand-light-stone: #E8E4DD;
  --brand-warm-white: #FAFAF5;
  --brand-deep-teal: #1E3A3A;
  --brand-slate-teal: #3D7A7A;
  --brand-error: #B33A3A;

  /* -- Override Mastodon's built-in theme variables -- */
  --color-accent: var(--brand-fern);
  --color-accent-text: var(--brand-fern);
  --ui-highlight-color: var(--brand-fern);
  --accent-color: var(--brand-fern);
  --background-color: var(--brand-charcoal);
  --background-color-tint: rgba(26, 26, 24, 0.9);
  --background-border-color: var(--brand-dark-stone);
  --surface-background-color: var(--brand-dark-stone);
  --surface-border-color: rgba(199, 193, 183, 0.2);
  --surface-variant-background-color: var(--brand-dark-stone);
  --surface-variant-active-background-color: rgba(199, 193, 183, 0.15);
  --input-background-color: var(--brand-charcoal);
  --input-placeholder-color: var(--brand-warm-grey);
  --on-input-color: var(--brand-light-stone);
  --on-surface-color: rgba(61, 61, 56, 0.5);
  --dropdown-background-color: rgba(26, 26, 24, 0.9);
  --dropdown-border-color: var(--brand-dark-stone);
  --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
  --modal-background-color: rgba(26, 26, 24, 0.7);
  --modal-background-variant-color: rgba(61, 61, 56, 0.7);
  --modal-border-color: var(--brand-dark-stone);
  --media-outline-color: rgba(232, 228, 221, 0.15);
  --error-background-color: var(--brand-error);
  --error-active-background-color: #c43d3d;
  --on-error-color: #fff;
  --nested-card-background: rgba(82, 183, 136, 0.05);
  --nested-card-border: 1px solid rgba(82, 183, 136, 0.15);
  --nested-card-text: var(--brand-light-stone);
  --rich-text-container-color: var(--brand-deep-forest);
  --rich-text-decorations-color: var(--brand-canopy);
  --rich-text-text-color: var(--brand-lichen);
  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
  --indigo-1: var(--brand-deep-forest);
  --indigo-2: var(--brand-canopy);
  --indigo-3: var(--brand-fern);
  --indigo-5: var(--brand-lichen);
  --indigo-6: var(--brand-morning-dew);
  --goldenrod-2: var(--brand-golden-haze);
  --lime: var(--brand-lichen);

  /* -- Override any remaining purple border colors -- */
  --highlight-color: var(--brand-fern);

  /* -- Dark mode semantic tokens (from brand guide) -- */
  /* Backgrounds */
  --page-bg: var(--brand-charcoal);
  --surface-bg: var(--brand-dark-stone);
  --header-bg: var(--brand-deep-forest);
  --banner-bg: var(--brand-deep-forest);
  --banner-border: var(--brand-canopy);

  /* Text */
  --primary-text: var(--brand-light-stone);
  --muted-text: var(--brand-pebble);
  --button-text: var(--brand-warm-white);

  /* Accents */
  --primary-accent: var(--brand-fern);
  --primary-accent-hover: var(--brand-lichen);
  --secondary-accent: var(--brand-golden-haze);

  /* Buttons */
  --button-bg: var(--brand-canopy);
  --button-hover: var(--brand-fern);

  /* Interactive hovers */
  --hover-bg: var(--brand-deep-forest);
  --hover-bg-subtle: rgba(82, 183, 136, 0.15);

  /* Borders */
  --border-color: rgba(199, 193, 183, 0.15);
  --border-color-subtle: rgba(199, 193, 183, 0.1);

  /* Inputs */
  --input-bg: var(--brand-charcoal);
  --input-focus-border: var(--brand-canopy);

  /* Data / charts */
  --chart-fill: rgba(82, 183, 136, 0.25);
  --chart-fill-strong: rgba(82, 183, 136, 0.3);
  --chart-fill-hover: rgba(82, 183, 136, 0.4);
  --chart-stroke: var(--brand-fern);
  --chart-indicator: var(--brand-fern);

  /* Badges / info */
  --badge-bg: rgba(199, 193, 183, 0.1);
  --badge-border: rgba(199, 193, 183, 0.3);

  /* States */
  --favourite-color: var(--brand-golden-haze);
  --boost-color: var(--brand-fern);
  --verified-color: var(--brand-fern);
  --verified-bg: rgba(45, 106, 79, 0.15);
  --notification-color: var(--brand-golden-haze);
  --tab-indicator: var(--brand-fern);
  --focus-ring: var(--brand-fern);
  --selection-bg: rgba(82, 183, 136, 0.3);

  /* Errors */
  --error-border: rgba(179, 58, 58, 0.5);
  --error-bg-subtle: rgba(179, 58, 58, 0.1);
  --accent-border: rgba(82, 183, 136, 0.5);
  --accent-bg-subtle: rgba(82, 183, 136, 0.1);
}

/* ============================================
   BASE BACKGROUNDS
   ============================================ */
body,
.ui,
.columns-area,
.column,
.drawer,
.drawer__inner,
.drawer__inner__mastodon,
.tabs-bar__wrapper,
.getting-started,
.getting-started__wrapper,
.search-results__section,
.empty-column-indicator,
.error-column,
.follow_requests-unlocked_explanation,
.regeneration-indicator {
  background: var(--page-bg) !important;
}

/* ============================================
   SURFACE / CARD BACKGROUNDS
   ============================================ */
.column > .scrollable,
.item-list,
.detailed-status__wrapper,
.focusable:focus,
.drawer__pager,
.drawer__inner.darker,
.explore__search-header,
.account__section-headline,
.notification__filter-bar,
.column-header__collapsible {
  color: var(--primary-text) !important;
}

.column-header__collapsible,
.column-header__collapsible-inner,
.column-subheading,
.account__header__bio,
.account__header__fields,
.setting-toggle,
.content-wrapper,
.admin-wrapper .content-wrapper,
.simple_form,
.card,
.activity-stream .entry,
.accounts-table,
.batch-table__row,
.log-entry {
  background: var(--surface-bg) !important;
}

/* ============================================
   HEADERS
   ============================================ */
.column-header,
.column-header__button,
.column-back-button,
.column-header__back-button,
.drawer__header,
.tabs-bar,
.account__header,
.hero-widget__img,
.hero-widget,
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .sidebar-wrapper__inner {
  background: var(--header-bg) !important;
}

.column-header__button,
.column-header__button svg,
.column-back-button,
.column-back-button svg,
.column-header__back-button,
.column-header__back-button svg {
  color: var(--primary-text) !important;
  fill: var(--primary-text) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.button,
.button.button-primary,
.icon-button.active,
.floating-action-button,
.column-link--transparent.active,
.privacy-dropdown__option.active,
.column-header__button.active,
.account__header__tabs__name .username,
.drawer__tab.active,
.tabs-bar__link.active,
a.button,
a.button.button-primary {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
}

.button:hover,
.button.button-primary:hover,
.floating-action-button:hover,
a.button:hover {
  background-color: var(--button-hover) !important;
  color: var(--button-text) !important;
}

.button svg,
a.button svg {
  fill: var(--button-text) !important;
  color: var(--button-text) !important;
}

.button.button-tertiary {
  background-color: transparent !important;
  border-color: var(--primary-accent) !important;
  color: var(--primary-accent) !important;
}

.button.button-tertiary:hover {
  background-color: var(--hover-bg-subtle) !important;
}

/* ============================================
   LINKS
   ============================================ */
a,
.status__content a,
.reply-indicator__content a,
.detailed-status__link,
.column-link,
.getting-started a,
.account__display-name strong,
.notification__message .account,
.status__display-name strong {
  color: var(--primary-accent) !important;
}

a:hover,
.status__content a:hover,
.column-link:hover {
  color: var(--primary-accent-hover) !important;
}

/* Force children of links to inherit link color */
a span,
a span strong,
a strong,
a > span,
a > span > strong {
  color: inherit !important;
}

/* Buttons that are links must not use link color */
a.button,
a.button span,
a.button svg,
.admin-wrapper a.button,
.admin-wrapper .content a.button {
  color: var(--button-text) !important;
  fill: var(--button-text) !important;
}

a.button:hover,
.admin-wrapper a.button:hover,
.admin-wrapper .content a.button:hover {
  color: var(--button-text) !important;
}

/* ============================================
   PRIMARY TEXT
   ============================================ */
.display-name__html,
.status__content,
.detailed-status__content,
.reply-indicator__content,
.account__header__bio,
.account__header__content,
.notification__message,
body,
.column-header__title {
  color: var(--primary-text) !important;
}

/* ============================================
   MUTED / SECONDARY TEXT
   ============================================ */
.display-name__account,
.status__relative-time,
.detailed-status__datetime,
.account__header__fields dt,
.column-subheading,
.getting-started p,
.navigation-bar__profile-account,
.admin-wrapper .content p,
.admin-wrapper .content .hint,
.admin-wrapper .content .simple_form .hint,
.admin-wrapper .content span.hint,
.simple_form .hint,
.simple_form p.hint,
.simple_form span.hint,
.hint,
.admin-wrapper .content label,
.admin-wrapper .content .flash-message,
.admin-wrapper .content td,
.admin-wrapper .content th {
  color: var(--muted-text) !important;
}

/* ============================================
   BORDERS
   ============================================ */
.column-header,
.account__header__fields dl,
.account__header__fields dd,
.status,
.detailed-status,
.focusable,
.account,
.batch-table__row,
.column-header__collapsible-inner {
  border-color: var(--surface-bg) !important;
}

.compose-form,
.compose-form__highlightable,
.compose-form__autosuggest-wrapper,
.compose-form .autosuggest-textarea__textarea,
.drawer__inner,
.drawer__inner.darker,
.column > .scrollable,
.column-header,
.status,
.detailed-status,
.account,
.focusable,
.navigation-bar,
.compose-panel,
.getting-started,
.search,
.search__input {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px;
}

.status + .status,
.account + .account,
.focusable + .focusable {
  border-top: 1px solid var(--border-color-subtle) !important;
}

/* ============================================
   COMPOSE FORM
   ============================================ */
.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form .compose-form__buttons-wrapper,
.compose-form__upload-button-icon,
.compose-form__actions,
.compose-form__highlightable,
.compose-panel,
.navigation-panel,
.navigation-bar {
  background: var(--surface-bg) !important;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form__poll-wrapper select,
.compose-form__poll-wrapper input,
.search__input,
.setting-text,
.language-dropdown__dropdown__results__item,
.report-dialog-modal__textarea {
  background: var(--input-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--surface-bg) !important;
}

.compose-form .autosuggest-textarea__textarea:focus,
.search__input:focus {
  border-color: var(--input-focus-border) !important;
}

.compose-form .compose-form__publish .button {
  background-color: var(--button-bg) !important;
}

.compose-form .compose-form__publish .button:hover {
  background-color: var(--button-hover) !important;
}

.privacy-dropdown__value,
.privacy-dropdown__value button,
.language-dropdown__dropdown__results__item,
.compose-form__actions .icon-button,
.text-icon-button {
  color: var(--muted-text) !important;
}

.privacy-dropdown__value-icon,
.privacy-dropdown__option__icon,
.compose-form__actions button,
.compose-form__actions .dropdown-button,
.dropdown-button,
.compose-form__poll-button,
.compose-form__language-dropdown,
.compose-form .dropdown--active .dropdown-button,
.compose-form .icon-button,
.compose-form button.icon-button,
[class*="privacyDropdown"] button,
[class*="languageDropdown"] button {
  background: var(--input-bg) !important;
  color: var(--muted-text) !important;
  border-color: var(--surface-bg) !important;
}

/* ============================================
   ACTION BAR ICONS (reply, boost, fav, etc.)
   ============================================ */
.icon-button,
.status__action-bar .icon-button,
.status__action-bar-button,
.status__action-bar .icon-button svg,
.status__action-bar-button svg,
.icon-button svg {
  color: var(--muted-text) !important;
  fill: var(--muted-text) !important;
}

.icon-button:hover,
.status__action-bar .icon-button:hover,
.icon-button:hover svg {
  color: var(--primary-accent) !important;
  fill: var(--primary-accent) !important;
}

/* ============================================
   INTERACTIVE STATES
   ============================================ */
.icon-button.star-icon.active {
  color: var(--favourite-color) !important;
}

.status__action-bar-button.icon-button.active,
.icon-button.active {
  color: var(--boost-color) !important;
}

.account__header__fields .verified dt,
.account__header__fields .verified dd {
  color: var(--verified-color) !important;
  border-color: var(--verified-color) !important;
  background: var(--verified-bg) !important;
}

.notification .notification__message {
  color: var(--notification-color) !important;
}

/* ============================================
   ADMIN FILTER TABS
   ============================================ */
.filters .filter-subset a {
  color: var(--muted-text) !important;
  border-bottom-color: transparent !important;
}

.filters .filter-subset a.selected {
  color: var(--primary-accent) !important;
  border-bottom-color: var(--tab-indicator) !important;
  background-color: transparent !important;
}

/* ============================================
   NOTHING HERE / EMPTY STATES
   ============================================ */
.nothing-here,
.nothing-here--under-tabs {
  color: var(--muted-text) !important;
  border-color: var(--surface-bg) !important;
}

/* ============================================
   TABLE ACTION LINKS
   ============================================ */
.table-action-link,
button.table-action-link,
a.table-action-link {
  color: var(--primary-accent) !important;
}

.table-action-link:hover {
  color: var(--primary-accent-hover) !important;
}

.table-action-link svg {
  fill: var(--primary-accent) !important;
  color: var(--primary-accent) !important;
}

/* ============================================
   DIMENSION ITEMS (dashboard stats)
   ============================================ */
.dimension__item__indicator,
.dimension__item__indicator--100,
[class*="dimension__item__indicator"] {
  background: var(--chart-indicator) !important;
  background-color: var(--chart-indicator) !important;
}

.dimension__item__key,
.dimension__item__value {
  color: var(--primary-text) !important;
}

/* ============================================
   RETENTION TABLE
   ============================================ */
.retention__table__box {
  background-color: var(--chart-fill-strong) !important;
  color: var(--primary-text) !important;
}

.retention__table__box:hover {
  background-color: var(--button-bg) !important;
  color: var(--primary-text) !important;
}

.retention__table__number {
  color: var(--muted-text) !important;
}

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

/* ============================================
   SPARKLINE GRAPHS
   ============================================ */
.sparkline__graph path:first-child {
  fill: var(--chart-fill) !important;
}

.sparkline__graph path:last-child {
  stroke: var(--chart-stroke) !important;
}

.dashboard__counters a:hover,
.dashboard__counters div:hover,
.dashboard__counters__num:hover,
.dashboard__counters__label:hover,
.dashboard__counters a:hover *,
[class*="dashboard"] a:hover,
[class*="dashboard"] div:hover {
  background-color: var(--hover-bg-subtle) !important;
}

[class*="dashboard"] div:hover div:not(.retention__table__box),
[class*="dashboard"] div:hover span,
[class*="dashboard"] div:hover strong,
[class*="dashboard"] a:hover div:not(.retention__table__box),
[class*="dashboard"] a:hover span,
[class*="dashboard"] a:hover strong {
  background-color: transparent !important;
}

.dashboard__counters a:hover .sparkline__graph path:first-child {
  fill: var(--chart-fill-hover) !important;
}

/* ============================================
   DASHBOARD QUICK ACCESS
   ============================================ */
.dashboard__quick-access,
.dashboard__quick-access li,
.dashboard__quick-access a {
  background-color: var(--banner-bg) !important;
  color: var(--primary-text) !important;
}

.dashboard__quick-access a:hover,
.dashboard__quick-access li a:hover,
.dashboard__quick-access li:hover,
.dashboard__quick-access li:hover a {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
}

.dashboard__quick-access li:hover a span,
.dashboard__quick-access li:hover a strong,
.dashboard__quick-access a:hover span,
.dashboard__quick-access a:hover strong {
  color: var(--button-text) !important;
}

.dashboard__counters,
.dashboard__counters div,
.dashboard__counters a,
.dashboard__counters__num,
.dashboard__counters__label {
  background-color: var(--surface-bg) !important;
  color: var(--primary-text) !important;
}

.dashboard__counters__label {
  color: var(--muted-text) !important;
}

/* ============================================
   PENDING ACCOUNTS
   ============================================ */
.pending-account__header,
.pending-account__body,
.pending-account__header strong {
  color: var(--muted-text) !important;
}

/* ============================================
   ACCOUNTS TABLE
   ============================================ */
.accounts-table__count small {
  color: var(--muted-text) !important;
}

.accounts-table__count {
  color: var(--primary-text) !important;
}

/* ============================================
   INFORMATION BADGES (recommended, overridden, etc.)
   ============================================ */
.information-badge,
.simple_form .overridden,
.simple_form .recommended,
.simple_form .not_recommended {
  color: var(--muted-text) !important;
  background-color: var(--badge-bg) !important;
  border-color: var(--badge-border) !important;
}

/* ============================================
   MUTED HINTS
   ============================================ */
.muted-hint {
  color: var(--muted-text) !important;
}

/* ============================================
   FORM INPUTS (select, text, textarea)
   ============================================ */
.simple_form select {
  color-scheme: dark !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%238D8478'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: auto 14px !important;
}

.simple_form select,
.simple_form input[type="text"],
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="url"],
.simple_form input[type="number"],
.simple_form textarea {
  background-color: var(--input-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--surface-bg) !important;
}

/* ============================================
   REQUIRED FIELD ASTERISK
   ============================================ */
abbr[title="required"] {
  color: var(--error-background-color) !important;
}

/* ============================================
   CHECKBOXES
   ============================================ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--button-bg) !important;
}

/* ============================================
   FORM BUTTONS
   ============================================ */
.simple_form .btn,
.simple_form button,
.simple_form .button,
.simple_form input[type="submit"] {
  background-color: var(--button-bg) !important;
  color: var(--primary-text) !important;
}

.simple_form .btn:hover,
.simple_form button:hover,
.simple_form .button:hover,
.simple_form input[type="submit"]:hover {
  background-color: var(--button-hover) !important;
}

/* ============================================
   FLASH MESSAGES
   ============================================ */
.flash-message {
  color: var(--primary-accent) !important;
  border-color: var(--primary-accent) !important;
  border-bottom-color: var(--primary-accent) !important;
}

.flash-message.alert {
  color: var(--error-background-color) !important;
  border-color: var(--error-border) !important;
  background: var(--error-bg-subtle) !important;
}

.flash-message.notice {
  color: var(--primary-accent) !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-bg-subtle) !important;
}

/* ============================================
   TOGGLE SWITCHES
   ============================================ */
.react-toggle--checked .react-toggle-track {
  background-color: var(--button-bg) !important;
}

.react-toggle--checked:hover .react-toggle-track {
  background-color: var(--button-hover) !important;
}

.react-toggle-track {
  background-color: var(--surface-bg) !important;
}

.setting-toggle__label {
  color: var(--primary-text) !important;
}

/* ============================================
   CHARACTER COUNTER
   ============================================ */
.character-counter {
  color: var(--muted-text) !important;
}

/* ============================================
   LINK FOOTER
   ============================================ */
.link-footer,
.link-footer p,
.link-footer p a,
.link-footer p strong,
.link-footer a {
  color: var(--muted-text) !important;
}

.link-footer a:hover {
  color: var(--primary-accent) !important;
}

/* ============================================
   LOAD MORE
   ============================================ */
.load-more,
.load-more span {
  color: var(--muted-text) !important;
}

.load-more:hover,
.load-more:hover span {
  color: var(--primary-accent) !important;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification__filter-bar button,
.notification__filter-bar a,
.notification__filter-bar button.active,
.notification__filter-bar a.active {
  color: var(--primary-text) !important;
}

.notification-group__icon,
.notification-group__icon svg,
.notification__type,
.notification__type svg {
  color: var(--primary-accent) !important;
  fill: var(--primary-accent) !important;
}

.notification-group__main__header,
.notification-group__main__header__label,
.notification__message {
  color: var(--primary-text) !important;
}

.notification-group__main__header__label a {
  color: var(--primary-accent) !important;
}

.notification-group__main__header time,
.notification-group__main__header__label time {
  color: var(--muted-text) !important;
}

/* ============================================
   MISC PURPLE TEXT OVERRIDES
   ============================================ */
.switch-to-advanced,
.follow_requests-unlocked_explanation,
.server-banner__introduction,
.server-banner__description,
[class*="server-banner"],
.server-banner h4,
.server-banner * {
  color: var(--muted-text) !important;
}

/* ============================================
   LINK BUTTONS (global)
   ============================================ */
.link-button,
button.link-button {
  color: var(--primary-accent) !important;
}

.link-button:hover,
button.link-button:hover {
  color: var(--primary-accent-hover) !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-root__modal,
.modal-root__modal * {
  color: var(--primary-text) !important;
}

.modal-root__modal a {
  color: var(--primary-accent) !important;
}

.modal-root__modal .button {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
}

.modal-root__modal .button:hover {
  background-color: var(--button-hover) !important;
}

.modal-root__modal .button.button-tertiary,
.modal-root__modal .button.button-secondary,
.modal-root__modal .link-button,
.safety-action-modal__actions .button.button-tertiary,
.safety-action-modal__actions .link-button {
  color: var(--primary-accent) !important;
  background-color: transparent !important;
}

/* ============================================
   DISMISSABLE / WARNING BANNERS
   ============================================ */
.dismissable-banner,
.warning-banner {
  background-color: var(--banner-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--banner-border) !important;
}

.dismissable-banner__message,
.warning-banner__message {
  color: var(--primary-text) !important;
}

.dismissable-banner button,
.dismissable-banner__action {
  color: var(--muted-text) !important;
}

/* ============================================
   PURPLE ACCENT OVERRIDES
   ============================================ */
.icon-with-badge__badge,
.column-link--transparent.active,
.empty-column-indicator a,
.follow-recommendations,
.dismissable-banner a,
.dismissable-banner,
.explore__links a,
.trends__item__name a,
.notification__message a,
.highlight-text,
a.highlight-text {
  color: var(--primary-accent) !important;
}

.empty-column-indicator {
  color: var(--muted-text) !important;
  background: var(--page-bg) !important;
}

.empty-column-indicator a {
  color: var(--primary-accent) !important;
}

/* ============================================
   TAB UNDERLINE INDICATORS
   ============================================ */
*[class*="active"]::after,
*[class*="active"]::before {
  border-color: var(--tab-indicator) !important;
  background-color: var(--tab-indicator) !important;
}

.account__section-headline a.active,
.account__section-headline button.active,
.account__section-headline a.active::after,
.account__section-headline button.active::after {
  color: var(--primary-text) !important;
  border-bottom-color: var(--tab-indicator) !important;
  background-color: var(--tab-indicator) !important;
}

/* ============================================
   SEARCH
   ============================================ */
.search__icon .icon,
.search__icon i,
.search__icon svg,
.search__icon path,
.search__icon {
  color: var(--primary-accent) !important;
  fill: var(--primary-accent) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar-thumb,
.custom-scrollbars ::-webkit-scrollbar-thumb {
  background-color: var(--surface-bg) !important;
  border-color: var(--surface-bg) !important;
  box-shadow: inset 0 0 0 2px var(--surface-bg) !important;
}

::-webkit-scrollbar-track,
.custom-scrollbars ::-webkit-scrollbar-track {
  background: var(--page-bg) !important;
}

@media (prefers-color-scheme: dark) {
  .custom-scrollbars ::-webkit-scrollbar-thumb {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-bg) !important;
    box-shadow: inset 0 0 0 2px var(--surface-bg) !important;
  }
}

/* -- Firefox scrollbar -- */
html,
* {
  scrollbar-color: var(--surface-bg) var(--page-bg) !important;
}

/* ============================================
   ADMIN PANEL
   ============================================ */
.admin-wrapper .content h2,
.admin-wrapper .content h3,
.admin-wrapper .content h4 {
  color: var(--primary-text) !important;
}

a.selected,
a.simple-navigation-active-leaf,
.admin-wrapper a.selected,
.admin-wrapper .sidebar a.selected,
.admin-wrapper .sidebar ul a.selected,
.admin-wrapper .sidebar ul ul a.selected {
  background-color: var(--button-bg) !important;
  color: var(--primary-text) !important;
  border-radius: 4px;
}

.admin-wrapper a.selected svg,
.admin-wrapper .sidebar a.selected svg {
  fill: var(--primary-text) !important;
  color: var(--primary-text) !important;
}

.admin-wrapper .sidebar ul a:hover {
  background: var(--header-bg) !important;
}

.admin-wrapper a,
.admin-wrapper .content a {
  color: var(--primary-accent) !important;
}

.admin-wrapper .content__heading__tabs a {
  color: var(--muted-text) !important;
}

.admin-wrapper .content__heading__tabs a:hover {
  color: var(--primary-text) !important;
  background-color: var(--hover-bg) !important;
}

.admin-wrapper .content__heading__tabs a.selected {
  color: var(--primary-text) !important;
  background-color: var(--button-bg) !important;
}

.admin-wrapper .content__heading__tabs a svg {
  color: inherit !important;
  fill: inherit !important;
}

/* ============================================
   NUCLEAR: Override all remaining hardcoded purple text
   ============================================ */
.admin-wrapper *:not(a):not(.button):not(svg):not(path) {
  color: var(--primary-text) !important;
}

.admin-wrapper a:not(.button) {
  color: var(--primary-accent) !important;
}

.admin-wrapper p,
.admin-wrapper small,
.admin-wrapper .hint,
.admin-wrapper label,
.admin-wrapper td,
.admin-wrapper th,
.admin-wrapper span.hint,
.admin-wrapper .muted-hint,
.admin-wrapper .pending-account__header,
.admin-wrapper .accounts-table__count small,
.admin-wrapper .nothing-here {
  color: var(--muted-text) !important;
}

/* ============================================
   MASTODON LOGO RECOLOR
   ============================================ */
#paint0_linear_89_11 stop:first-child {
  stop-color: var(--primary-accent) !important;
}

#paint0_linear_89_11 stop:last-child {
  stop-color: var(--button-bg) !important;
}

/* ============================================
   SAML BUTTON LABEL
   ============================================ */
.button-saml {
  font-size: 0 !important;
}

.button-saml::before {
  content: 'Login with Google, GitHub, or LinkedIn' !important;
  font-size: 15px !important;
}

/* ============================================
   FOCUS & SELECTION
   ============================================ */
:focus-visible {
  outline-color: var(--focus-ring) !important;
}

::selection {
  background: var(--selection-bg) !important;
}