/* RedFlag Terminal Theme — Mastodon 4.x Custom CSS */

/* ── 1. Font ── */
body, input, textarea, button, select, .column-header__title {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

/* ── 2. Backgrounds ── */
body, .ui, html {
  background: #0d0d0d !important;
}

.column, .column > .scrollable,
.column__wrapper, .column-inner-header,
.column-back-button, .column-subheading,
.drawer, .drawer__inner, .drawer__inner.darker,
.navigation-panel, .navigation-panel__sign-in-banner,
.compose-form, .compose-form__highlightable,
.autosuggest-textarea__textarea, .spoiler-input__input,
.search, .search__input,
.detailed-status, .detailed-status__action-bar,
.status, .notification,
.account, .account-card, .account-card__header,
.focusable, .focusable:focus,
.load-more, .nothing-here, .empty-column-indicator,
.timeline-hint, .error-column,
.column-settings__section, .column-settings__row label,
.getting-started, .getting-started__footer,
.list-adder, .follow-recommendations-container,
.hero-widget, .hero-widget__text, .landing-strip,
.trends__item, .hashtag-header,
.confirmation-modal, .report-modal, .actions-modal,
.dropdown-menu, .dropdown-menu__container,
.muted-account__hint, .announcements,
.announcements__mastodon,
.column-link, .column-link:hover {
  background: #0d0d0d !important;
  background-color: #0d0d0d !important;
}

/* Slightly raised surfaces */
.column-header, .column-back-button,
.compose-form__toolbar, .compose-form__modifiers,
.card__bar, .account__header__bar,
.account__action-bar, .account__section-headline,
.notification__filter-bar, .tabs-bar,
.dropdown-menu__item:hover {
  background-color: #111 !important;
}

/* Inputs */
.autosuggest-textarea__textarea,
.spoiler-input__input,
.search__input, .setting-text {
  background: #0a0a0a !important;
  border: 1px solid #1f1f1f !important;
  color: #d4d4d4 !important;
}

/* ── 3. Text ── */
body, .column-header__title, .column-back-button,
.status__content, .status__content p,
.detailed-status__content,
.account__display-name strong, .display-name strong,
.display-name__html strong, .account__note,
.account__note p, .column-link__label, .column-link,
.nothing-here, .load-more, .empty-column-indicator,
.getting-started p, .confirmation-modal p,
.dropdown-menu__item a, .trends__item__name a,
.trends__item__current, .announcements__item__content,
.card__bar .display-name strong,
.notification__message, .timeline-hint,
.status-card__title, .status-card__host,
.follow-recommendations-popup__title,
.setting-text, .column-settings__section,
.option-text {
  color: #d4d4d4 !important;
}

/* Dim/secondary */
.status__relative-time, .relative-time,
.status__info .display-name span,
.display-name span, .account__username,
.status__action-bar, .detailed-status__meta,
.column-header__button, .column-link .column-link__icon,
.getting-started__footer p, .getting-started__footer a,
.notification__message span,
.muted .status__content, .muted .status__content p,
.timeline-hint a, .account__header__content,
.account__followers strong, .trends__item__sparkline,
.search__input::placeholder, .autosuggest-textarea__textarea::placeholder {
  color: #6a6a6a !important;
}

/* ── 4. Accent: blurple → #ff5555 ── */
a, .mention, .link-button,
.status__content a,
.status__content a.mention,
.status__content a.hashtag,
.reply-indicator__content a,
.account__header__extra__links a,
.notification__message strong,
.trends__item__name a:hover,
.column-header__setting-btn,
.column-link:hover,
.column-link.active {
  color: #ff5555 !important;
}

/* Primary button */
.button, .button.button-primary {
  background-color: #ff5555 !important;
  border-color: #ff5555 !important;
  color: #0d0d0d !important;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}
.button:hover, .button.button-primary:hover {
  background-color: #cc4444 !important;
  border-color: #cc4444 !important;
}

/* Secondary / outline button */
.button.button-secondary, .button.button-tertiary {
  background: transparent !important;
  border: 1px solid #ff5555 !important;
  color: #ff5555 !important;
}
.button.button-secondary:hover {
  background: rgba(255,85,85,.1) !important;
}

/* Icon buttons */
.icon-button.active, .icon-button:hover, .icon-button:focus,
.text-icon-button.active, .text-icon-button:hover {
  color: #ff5555 !important;
}

/* Active tab underline */
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar button.active,
.tabs-bar__link.active {
  border-bottom-color: #ff5555 !important;
  color: #ff5555 !important;
}

/* Toggle / switch */
.react-toggle--checked .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #ff5555 !important;
}

/* Compose button accent */
.compose-form .icon-button.inverted.active,
.compose-form .icon-button:hover {
  color: #ff5555 !important;
}

/* Focus ring */
:focus-visible { outline-color: #ff5555 !important; }

/* ── 5. Borders ── */
.column, .column__wrapper, .column-back-button,
.column-header, .status, .detailed-status,
.detailed-status__action-bar, .account,
.account-card, .notification, .trends__item,
.compose-form__toolbar, .compose-form__modifiers,
.navigation-panel, .account__action-bar,
.account__section-headline, .notification__filter-bar,
.tabs-bar, .card__bar, .hashtag-header,
.column-settings__row, .account__header__bar {
  border-color: #1f1f1f !important;
}

hr { border-color: #1f1f1f !important; }

/* ── 6. Column header "// " prefix ── */
.column-header__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
.column-header__title::before {
  content: "// ";
  color: #ff5555;
  font-weight: 600;
}

/* ── 7. Dropdown ── */
.dropdown-menu {
  border: 1px solid #1f1f1f !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.8) !important;
}
.dropdown-menu__item a:hover {
  background: #1a1a1a !important;
  color: #ff5555 !important;
}

/* ── 8. Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: #1f1f1f transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #6a6a6a; }

/* ── 9. Public / about pages ── */
.public-layout .header,
.public-layout__nav,
.public-layout .grid__column.grid__column--aside,
.landing-page__call-to-action {
  background: #0d0d0d !important;
  border-color: #1f1f1f !important;
}
.public-layout .header .brand__tagline,
.public-layout .header .nav-button {
  color: #6a6a6a !important;
}
.public-layout .header .nav-button:hover {
  color: #d4d4d4 !important;
}
.public-layout .hero-widget .text-container h2,
.public-layout .hero-widget .text-container p {
  color: #d4d4d4 !important;
}

/* ── 10. Modal overlays ── */
.modal-root__overlay { background: rgba(0,0,0,.85) !important; }
.modal-root__container .confirmation-modal,
.modal-root__container .report-modal,
.modal-root__container .actions-modal {
  background: #111 !important;
  border: 1px solid #1f1f1f !important;
}