/* =========================================
   NUKED SOCIAL / SAM STYLE THEME
   One overlay theme for Mastodon 4.5.x
   Theme-independent: works for theme-system,
   theme-default, logged-in and logged-out
========================================= */

:root {
  /* Brand palette */
  --nuked-bg: #0a0a0a;
  --nuked-panel: #141414;
  --nuked-panel-2: #1b1b1b;
  --nuked-panel-3: #222222;
  --nuked-border: #2a2a2a;

  --nuked-text: #ffffff;
  --nuked-text-muted: #b8b8b8;
  --nuked-text-dim: #8f8f8f;

  --nuked-orange: #ff6a00;
  --nuked-orange-hover: #ff7f26;
  --nuked-red: #d43b1f;
  --nuked-yellow: #ffbe2e;

  --nuked-overlay: rgba(10, 10, 10, 0.88);
  --nuked-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);

  /* Map Mastodon CSS vars */
  --dropdown-border-color: var(--nuked-border);
  --dropdown-background-color: var(--nuked-panel-2);
  --dropdown-shadow: var(--nuked-shadow);

  --modal-background-color: rgba(0, 0, 0, 0.72);
  --modal-background-variant-color: rgba(20, 20, 20, 0.8);
  --modal-border-color: var(--nuked-border);

  --background-border-color: var(--nuked-border);
  --background-color: var(--nuked-bg);
  --background-color-tint: var(--nuked-overlay);

  --surface-background-color: var(--nuked-panel);
  --surface-variant-background-color: var(--nuked-panel-2);
  --surface-variant-active-background-color: var(--nuked-panel-3);
  --surface-border-color: var(--nuked-border);

  --on-surface-color: var(--nuked-text-muted);

  --input-background-color: var(--nuked-panel-2);
  --input-placeholder-color: var(--nuked-text-dim);
  --on-input-color: var(--nuked-text);

  --error-background-color: #7a2415;
  --error-active-background-color: #992d1a;
  --on-error-color: #ffffff;

  --nested-card-background: rgba(255, 106, 0, 0.06);
  --nested-card-text: var(--nuked-text-muted);
  --nested-card-border: 1px solid rgba(255, 106, 0, 0.16);

  --rich-text-container-color: #2a1111;
  --rich-text-text-color: #ffd9d1;
  --rich-text-decorations-color: #5f2b24;

  --media-outline-color: rgba(255, 255, 255, 0.08);
}

/* =========================================
   Global
========================================= */

body,
.ui,
.app-body,
.app-holder,
.columns-area__panels,
.columns-area__panels__main,
.columns-area {
  background: var(--nuked-bg) !important;
  color: var(--nuked-text) !important;
}

.logo {
  color: var(--nuked-text) !important;
}

/* =========================================
   Main structural surfaces
========================================= */

.column,
.drawer,
.drawer__inner,
.column-header,
.column-header__wrapper,
.column-header__collapsible,
.account__section-headline,
.link-footer,
.navigation-panel,
.compose-panel,
.empty-column-indicator,
.scrollable,
.regeneration-indicator,
.admin-wrapper .content,
.form-section,
.server-banner,
.navigation-panel__sign-in-banner {
  background: var(--surface-background-color) !important;
  color: var(--nuked-text) !important;
  border-color: var(--nuked-border) !important;
}

/* Slightly raised surfaces */
.search__input,
.dropdown-menu,
.dropdown-animation,
.dropdown-menu__container,
.autosuggest-textarea__suggestions,
.compose-form__highlightable,
.reply-indicator,
.edit-indicator,
.status__wrapper-direct,
.notification,
.drawer__tab,
.account__header,
.account__header__bar,
.search__popout,
.card,
.link-preview,
.status__quote,
.quoted-status,
.trends__item,
.directory__tag,
.story,
.attachment-list {
  background: var(--surface-variant-background-color) !important;
  color: var(--nuked-text) !important;
  border-color: var(--nuked-border) !important;
}

/* =========================================
   Header / tabs fixes
========================================= */

.tabs-bar__wrapper,
#tabs-bar__portal,
.columns-area__panels__main {
  background: var(--nuked-bg) !important;
}

.tabs-bar__wrapper {
  padding-top: 0 !important;
  backdrop-filter: none !important;
}

/* Column headers */
.column-header,
.column-header__button,
.column-header__back-button,
.column-header__title {
  color: var(--nuked-text) !important;
}

.column-header {
  border-bottom: 1px solid var(--nuked-border) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 106, 0, 0.18) !important;
}

/* =========================================
   Links
========================================= */

a,
.link-button,
.status__content a,
.reply-indicator__content a,
.edit-indicator__content a,
.simple_form .hint a,
.simple_form .lead a,
.quick-nav a,
.link-footer a,
.form-footer a,
.navigation-panel__legal .column-link {
  color: var(--nuked-orange) !important;
  text-decoration: none !important;
}

a:hover,
a:focus,
.link-button:hover,
.link-button:focus,
.status__content a:hover,
.status__content a:focus,
.reply-indicator__content a:hover,
.reply-indicator__content a:focus,
.edit-indicator__content a:hover,
.edit-indicator__content a:focus,
.simple_form .hint a:hover,
.simple_form .hint a:focus,
.simple_form .lead a:hover,
.simple_form .lead a:focus,
.quick-nav a:hover,
.quick-nav a:focus,
.link-footer a:hover,
.link-footer a:focus,
.form-footer a:hover,
.form-footer a:focus,
.navigation-panel__legal .column-link:hover,
.navigation-panel__legal .column-link:focus {
  color: var(--nuked-orange-hover) !important;
  text-decoration: none !important;
}

/* =========================================
   Text tiers
========================================= */

.display-name__html,
.status__content,
.reply-indicator__content,
.edit-indicator__content,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.dropdown-button,
.account__display-name,
.account__header__content,
.account__header__bio,
.column-link,
.column-subheading,
.navigation-panel__menu__item,
.simple_form label,
.simple_form strong,
.server-banner__introduction,
.server-banner__meta,
.server-banner__meta h4,
.server-banner__number,
.server-banner__number-label,
.empty-column-indicator,
.sign-in-banner strong,
.sign-in-banner span {
  color: var(--nuked-text) !important;
}

.display-name__account,
.autosuggest-account .display-name__account,
.character-counter,
.simple_form .hint,
.simple_form p.hint,
.sign-in-banner p,
.status__content .status__content__spoiler-link,
.link-footer,
.link-footer p,
.link-footer strong,
.link-footer span {
  color: var(--nuked-text-muted) !important;
}

/* =========================================
   Inputs
========================================= */

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.search__input,
.simple_form input[type='text'],
.simple_form input[type='number'],
.simple_form input[type='email'],
.simple_form input[type='password'],
.simple_form input[type='url'],
.simple_form input[type='datetime-local'],
.simple_form textarea,
.simple_form select {
  background: var(--input-background-color) !important;
  color: var(--nuked-text) !important;
  border: 1px solid var(--nuked-border) !important;
  box-shadow: none !important;
}

.compose-form .autosuggest-textarea__textarea::placeholder,
.search__input::placeholder,
.simple_form input::placeholder,
.simple_form textarea::placeholder {
  color: var(--input-placeholder-color) !important;
}

.search__icon,
.search__icon-wrapper {
  color: var(--input-placeholder-color) !important;
}

/* =========================================
   Compose area
========================================= */

.compose-form__highlightable {
  background: var(--input-background-color) !important;
  border: 1px solid var(--nuked-border) !important;
  box-shadow: none !important;
}

.compose-form__highlightable.active {
  border-color: var(--nuked-orange) !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.25) !important;
}

.compose-form__dropdowns,
.compose-form__footer,
.compose-form__buttons,
.compose-form__actions,
.compose-form__submit,
.sign-in-banner {
  background: transparent !important;
}

/* =========================================
   Dropdown buttons
========================================= */

.dropdown-button {
  background: transparent !important;
  border: 1px solid var(--nuked-orange) !important;
  color: var(--nuked-text) !important;
}

.dropdown-button.active {
  background: var(--nuked-orange) !important;
  border-color: var(--nuked-orange) !important;
  color: #fff !important;
}

.dropdown-button.warning {
  border-color: var(--nuked-yellow) !important;
  color: var(--nuked-yellow) !important;
}

.dropdown-button.warning.active {
  background: var(--nuked-yellow) !important;
  color: #1b1b1b !important;
}

/* =========================================
   Buttons
========================================= */

.button,
.simple_form .btn,
.compose-form .button {
  background: var(--nuked-orange) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.button:hover,
.button:focus,
.button:active,
.simple_form .btn:hover,
.simple_form .btn:focus,
.simple_form .btn:active {
  background: var(--nuked-orange-hover) !important;
}

.button.button-secondary {
  background: transparent !important;
  color: var(--nuked-orange) !important;
  border: 1px solid var(--nuked-orange) !important;
}

.button.button-tertiary {
  background: transparent !important;
  color: var(--nuked-text-muted) !important;
  border: 1px solid var(--nuked-border) !important;
}

.button--dangerous,
.btn.negative {
  background: var(--nuked-red) !important;
}

/* Guest CTA button */
.navigation-panel__sign-in-banner .button.button-tertiary,
.sign-in-banner .button {
  background: transparent !important;
  border: 1px solid var(--nuked-orange) !important;
  color: var(--nuked-orange) !important;
}

.navigation-panel__sign-in-banner .button.button-tertiary:hover,
.navigation-panel__sign-in-banner .button.button-tertiary:focus,
.sign-in-banner .button:hover,
.sign-in-banner .button:focus {
  background: var(--nuked-orange) !important;
  color: #fff !important;
}

/* =========================================
   Icon buttons
========================================= */

.icon,
.icon-button,
.text-icon-button {
  color: var(--nuked-text-muted) !important;
}

.icon-button:hover,
.icon-button:focus-visible,
.icon-button:active,
.text-icon-button:hover,
.text-icon-button:focus,
.text-icon-button:active {
  color: var(--nuked-text) !important;
  background-color: rgba(255, 106, 0, 0.14) !important;
}

.icon-button.active,
.compose-form__actions .icon-button.active {
  background: var(--nuked-orange) !important;
  color: #fff !important;
}

.icon-button.inverted {
  color: var(--nuked-text-muted) !important;
}

.icon-button.inverted:hover,
.icon-button.inverted:focus-visible,
.icon-button.inverted:active {
  color: var(--nuked-text) !important;
  background-color: rgba(255, 106, 0, 0.14) !important;
}

/* =========================================
   Navigation
========================================= */

.column-link {
  color: var(--nuked-text) !important;
}

.column-link:hover,
.column-link:focus,
.column-link.active,
.column-link[aria-current='page'] {
  color: var(--nuked-orange) !important;
}

.column-link.active .icon,
.column-link:hover .icon,
.column-link[aria-current='page'] .icon {
  color: var(--nuked-orange) !important;
}

/* =========================================
   Autosuggest
========================================= */

.autosuggest-textarea__suggestions {
  background: var(--surface-variant-background-color) !important;
  border: 1px solid var(--nuked-border) !important;
  color: var(--nuked-text) !important;
}

.autosuggest-textarea__suggestions__item {
  color: var(--nuked-text) !important;
}

.autosuggest-textarea__suggestions__item:hover,
.autosuggest-textarea__suggestions__item:focus,
.autosuggest-textarea__suggestions__item:active {
  background: var(--nuked-panel-3) !important;
}

.autosuggest-textarea__suggestions__item.selected {
  background: var(--nuked-orange) !important;
  color: #fff !important;
}

/* =========================================
   Posts / notifications
========================================= */

.status,
.detailed-status,
.notification,
.reply-indicator,
.edit-indicator {
  border-color: var(--nuked-border) !important;
}

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

.status__content p,
.reply-indicator__content p,
.edit-indicator__content p {
  color: inherit !important;
}

/* =========================================
   Flash messages
========================================= */

.flash-message {
  background: var(--surface-background-color) !important;
  color: var(--nuked-orange) !important;
  border: 1px solid var(--nuked-orange) !important;
}

.flash-message.notice {
  background: rgba(121, 189, 154, 0.12) !important;
  color: #9ee0be !important;
  border-color: rgba(121, 189, 154, 0.4) !important;
}

.flash-message.warning {
  background: rgba(255, 190, 46, 0.12) !important;
  color: var(--nuked-yellow) !important;
  border-color: rgba(255, 190, 46, 0.4) !important;
}

.flash-message.alert {
  background: rgba(212, 59, 31, 0.12) !important;
  color: #ff8e78 !important;
  border-color: rgba(212, 59, 31, 0.4) !important;
}

/* =========================================
   Selected top tabs
========================================= */

.notification__filter-bar button.active::before,
.notification__filter-bar a.active::before,
.account__section-headline button.active::before,
.account__section-headline a.active::before {
  background: var(--nuked-orange) !important;
}

.notification__filter-bar button.active,
.notification__filter-bar a.active,
.account__section-headline button.active,
.account__section-headline a.active {
  color: var(--nuked-text) !important;
}

.notification__filter-bar button,
.notification__filter-bar a,
.account__section-headline button,
.account__section-headline a {
  color: var(--nuked-text-muted) !important;
}

.notification__filter-bar button.active::before {
  background: linear-gradient(90deg, #ff7a18, #ff3d00) !important;
}

/* =========================================
   Purple info banner patch
========================================= */

.explore__search-header,
.explore__search-header__trends,
.explore__search-header .dismissable-banner,
.explore__search-header .banner,
.column .dismissable-banner,
.column .information-banner,
.column .explore__search-header > div {
  background: var(--surface-variant-background-color) !important;
  border-color: var(--nuked-orange) !important;
  color: var(--nuked-text) !important;
}

.explore__search-header .icon-button,
.column .dismissable-banner .icon-button,
.column .information-banner .icon-button {
  color: var(--nuked-text-muted) !important;
}

.explore__search-header .icon-button:hover,
.column .dismissable-banner .icon-button:hover,
.column .information-banner .icon-button:hover {
  color: var(--nuked-text) !important;
  background: rgba(255, 106, 0, 0.14) !important;
}

/* =========================================
   Public / explore / landing tweaks
========================================= */

.server-banner__hero {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.server-banner__hero,
.server-banner__hero img,
.server-banner__hero .image__preview,
.server-banner__hero canvas {
  background: transparent !important;
}

.server-banner__hero img {
  display: block !important;
  object-fit: contain !important;
}

/* =========================================
   Footer consistency
========================================= */

.compose-panel .link-footer,
.compose-panel .link-footer p,
.compose-panel .link-footer strong,
.compose-panel .link-footer span {
  color: var(--nuked-text-muted) !important;
}

.compose-panel .link-footer a {
  color: var(--nuked-orange) !important;
  text-decoration: none !important;
}

.compose-panel .link-footer a:hover,
.compose-panel .link-footer a:focus {
  color: var(--nuked-orange-hover) !important;
  text-decoration: none !important;
}

/* =========================================
   Clean up default effects
========================================= */

.column-header,
.navigation-panel,
.compose-form__highlightable,
.button,
.dropdown-button.active,
.column-link.active {
  box-shadow: none !important;
}

/* Preferences/settings left menu = same as home page menu */
.column-link--nested,
.column-link--nested .column-link__icon,
.column-link--nested span,
.column-link--nested.active,
.column-link--nested.active .column-link__icon,
.column-link--nested.active span,
.column-link--nested:hover,
.column-link--nested:hover .column-link__icon,
.column-link--nested:hover span,
.column-link--transparent,
.column-link--transparent .column-link__icon,
.column-link--transparent span,
.column-link--transparent.active,
.column-link--transparent.active .column-link__icon,
.column-link--transparent.active span,
.column-link--transparent:hover,
.column-link--transparent:hover .column-link__icon,
.column-link--transparent:hover span {
  color: var(--nuked-text) !important;
}

.column-link--nested.active,
.column-link--transparent.active,
.column-link--nested[aria-current='page'],
.column-link--transparent[aria-current='page'] {
  color: var(--nuked-orange) !important;
}

.column-link--nested.active .column-link__icon,
.column-link--transparent.active .column-link__icon,
.column-link--nested[aria-current='page'] .column-link__icon,
.column-link--transparent[aria-current='page'] .column-link__icon {
  color: var(--nuked-orange) !important;
}

.column-link--nested.active,
.column-link--transparent.active,
.column-link--nested[aria-current='page'],
.column-link--transparent[aria-current='page'] {
  color: var(--nuked-orange) !important;
}

/* Settings tabs (remove Mastodon purple) */
.admin-wrapper .content__heading__tabs a.selected {
  background: var(--nuked-orange) !important;
  color: #fff !important;
}

/* Non-selected tabs */
.admin-wrapper .content__heading__tabs a {
  background: transparent !important;
  color: var(--nuked-text-muted) !important;
}

/* Hover */
.admin-wrapper .content__heading__tabs a:hover {
  background: rgba(255,106,0,0.15) !important;
  color: var(--nuked-text) !important;
}