/* ===== Mastodon Custom Theme (Full) ===== */

/* CSS Variable overrides */
:root {
  --color-border-primary: #ffffff1a; /* very dark white / subtle border */
  --color-text-brand: #C90000;
  --color-bg-primary: #1e1e1e;
  --color-bg-secondary: #1e1e1e;
  --color-bg-tertiary: #1e1e1e;
  --overlay-strength-secondary: 4%;
}

/* Main backgrounds */
body,
.app-holder,
.columns-area,
.column,
.drawer,
.ui,
.scrollable,
.detailed-status,
.status,
.account,
.notification,
.compose-form,
.drawer__inner,
.column-header,
.column-header__wrapper,
.tabs-bar__wrapper,
.search,
.search__input,
.getting-started,
.columns-area__panels__pane,
.columns-area__panels__main {
  background-color: #1E1E1E !important;
}

/* Panels/cards */
.status,
.detailed-status,
.account,
.notification,
.compose-form,
.compose-form__buttons-wrapper,
.dropdown-menu,
.actions-modal,
.modal-root__modal,
.status-card,
.status-card__image {
  background-color: #1e1e1e !important;
  border-color: #f6f6f9 !important;
}

/* Compose textarea container */
.compose-form__highlightable {
  border: 1px solid var(--color-border-primary);
  background: #1e1e1e;
}

/* ===== Buttons ===== */
.button,
button.button,
.compose-form__publish button,
.detailed-status__button button {
  background-color: #C90000 !important;
  border-color: #C90000 !important;
  color: #FFFFFF !important;
}

.button:hover,
button.button:hover {
  background-color: #a80000 !important;
  border-color: #a80000 !important;
  color: #FFFFFF !important;
}

/* ===== Kill the blue accent everywhere ===== */

/* Active/highlighted nav links (Home, Trending, etc.) */
.column-link--active,
.column-link--active svg,
.tabs-bar__link.active,
.tabs-bar__link.active svg,
a.column-link:hover,
.navigation-panel a.active,
.navigation-panel a.active svg {
  color: #C90000 !important;
  fill: #C90000 !important;
}

/* Dropdown/select arrow icon (e.g. Home ⌄ button top right) */
.column-header__button.active,
.column-header__button:hover,
.column-header__icon {
  color: #C90000 !important;
}

/* Links / hashtags / mentions */
a.status-link,
.status__content a,
.account__display-name,
.detailed-status__display-name strong,
.hashtag,
a.mention {
  color: #C90000 !important;
}

/* Poll bars / progress indicators / autosuggest highlight */
.poll__chart,
.poll__link.checkbox.active:before,
.autosuggest-textarea__suggestions__item.selected {
  background-color: #C90000 !important;
}

/* Column headers */
.column-header {
  background-color: #1E1E1E !important;
  color: #FFFFFF !important;
}

/* General text colour */
body,
.status__content,
.display-name__html,
.account__header__display-name {
  color: #FFFFFF !important;
}

/* ===== Compose form: privacy/language pills ===== */
.compose-form__buttons-wrapper .privacy-dropdown__value.active,
.compose-form__buttons-wrapper .privacy-dropdown__value,
.compose-form__buttons-wrapper button.dropdown-button,
.privacy-dropdown__value button,
.language-dropdown button,
button.dropdown-button {
  background-color: transparent !important;
  border: 1px solid #C90000 !important;
  color: #C90000 !important;
}

button.dropdown-button svg,
.privacy-dropdown__value svg,
.language-dropdown svg,
button.dropdown-button .icon,
.privacy-dropdown__value .icon {
  fill: #C90000 !important;
  color: #C90000 !important;
}

/* Compose bottom icons (image, poll, CW, emoji) */
.compose-form__upload-wrapper .icon-button,
.compose-form__buttons-wrapper .icon-button,
.compose-form__buttons-wrapper .icon-button svg {
  color: #C90000 !important;
  fill: #C90000 !important;
}

.compose-form__buttons-wrapper .icon-button:hover,
.compose-form__buttons-wrapper .icon-button:hover svg {
  color: #a80000 !important;
  fill: #a80000 !important;
}

/* ===== Scrollbars ===== */
html.custom-scrollbars {
  scrollbar-color: #990000 #1e1e1e;
}

html.custom-scrollbars ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html.custom-scrollbars ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

html.custom-scrollbars ::-webkit-scrollbar-thumb {
  background-color: #990000;
  border-radius: 6px;
  border: 3px solid #1e1e1e;
}

html.custom-scrollbars ::-webkit-scrollbar-thumb:hover {
  background-color: #C90000;
}