/*
 * Burnout Café — Near-Black Mastodon Theme
 * Designed for Mastodon 4.6+
 *
 * Palette:
 *   deepest black      #050607
 *   primary surface    #080a0d
 *   raised surface     #0d1014
 *   tertiary surface   #13171c
 *   borders            #242a31
 *   main text          #f1f3f5
 *   secondary text     #abb2bd
 *   muted text         #7d8794
 *   accent violet      #8b6cff
 *   accent hover       #a58cff
 */

/* ---------------------------------------------------------
   Mastodon 4.6 design tokens
   --------------------------------------------------------- */

:root,
[data-color-scheme="dark"] {
  color-scheme: dark;

  /* Neutral backgrounds */
  --color-bg-primary: #080a0d;
  --color-bg-secondary: #0d1014;
  --color-bg-tertiary: #13171c;

  /* Text */
  --color-text-primary: #f1f3f5;
  --color-text-secondary: #abb2bd;
  --color-text-tertiary: #7d8794;
  --color-text-inverted: #080a0d;

  /* Brand / links */
  --color-text-brand: #9b82ff;
  --color-text-brand-soft: #b7a6ff;
  --color-text-brand-on-inverted: #a58cff;
  --color-text-on-brand-base: #ffffff;
  --color-text-status-links: #a58cff;

  /* Brand surfaces */
  --color-bg-brand-base: #7453e8;
  --color-bg-brand-base-hover: #8769ef;
  --color-bg-brand-soft: #221c3d;
  --color-bg-brand-softest: #171329;

  /* Borders */
  --color-border-primary: #242a31;
  --color-border-brand: #8b6cff;
  --color-border-brand-soft: #554584;

  /* Overlays */
  --color-bg-overlay-base: rgba(0, 0, 0, 0.82);
  --color-bg-overlay-highlight: rgba(255, 255, 255, 0.055);
  --color-bg-overlay: rgba(0, 0, 0, 0.84);

  /* Media overlays */
  --color-bg-media: rgba(5, 6, 7, 0.78);
  --color-bg-media-base: #050607;

  /* Disabled controls */
  --color-bg-disabled: #252a30;
  --color-text-disabled: #69727d;
  --color-text-on-disabled: #959da7;

  /* Errors */
  --color-text-error: #ff7b82;
  --color-text-on-error-base: #ffffff;
  --color-bg-error-base: #b83d47;
  --color-bg-error-base-hover: #cf4a55;
  --color-bg-error-soft: #35171b;
  --color-bg-error-softest: #211013;
  --color-border-error: #d75a63;
  --color-border-error-soft: #633038;

  /* Warnings */
  --color-text-warning: #e7b75c;
  --color-text-on-warning-base: #090909;
  --color-bg-warning-base: #d29d3d;
  --color-bg-warning-soft: #332813;
  --color-bg-warning-softest: #201a0e;
  --color-border-warning-soft: #675225;

  /* Success */
  --color-text-success: #69d6a3;
  --color-text-on-success-base: #05120c;
  --color-bg-success-base: #43b986;
  --color-bg-success-soft: #143125;
  --color-bg-success-softest: #0d2018;
  --color-border-success-soft: #285b46;

  /* Misc */
  --color-text-bookmark-highlight: #9b82ff;
  --color-text-favourite-highlight: #e8ad55;
  --color-border-media: #272d34;

  --rich-text-container-color: #111419;
  --rich-text-text-color: #e5e8ec;
  --rich-text-decorations-color: #9b82ff;

  --dropdown-shadow:
    0 12px 32px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.5);
}


/* ---------------------------------------------------------
   Absolute page background
   --------------------------------------------------------- */

html,
body {
  background: #050607 !important;
}


/* ---------------------------------------------------------
   Main application surfaces

   These deliberately reinforce the design tokens because
   some legacy Mastodon components still use older styles.
   --------------------------------------------------------- */

.app-holder,
.ui,
.columns-area,
.columns-area__panels,
.columns-area__panels__main,
.columns-area__panels__pane,
.layout-single-column {
  background-color: #050607 !important;
}


/* Main columns */

.column,
.drawer,
.column > .scrollable,
.drawer__inner,
.drawer__inner__mastodon {
  background-color: #080a0d !important;
}


/* ---------------------------------------------------------
   Statuses / timeline items
   --------------------------------------------------------- */

.status,
.notification,
.conversation {
  background-color: #080a0d !important;
}

.status,
.notification,
.conversation,
.detailed-status,
.detailed-status__action-bar {
  border-color: #20252b !important;
}


/* Very subtle hover rather than grey blocks */

.status:hover,
.notification:hover {
  background-color: #0b0e12 !important;
}


/* ---------------------------------------------------------
   Column headers
   --------------------------------------------------------- */

.column-header,
.column-header__button,
.column-header__collapsible,
.column-header__collapsible-inner {
  background-color: #0b0e12 !important;
  border-color: #22272e !important;
}

.column-header__button:hover {
  background-color: #12161b !important;
}


/* ---------------------------------------------------------
   Navigation / sidebars
   --------------------------------------------------------- */

.navigation-panel,
.navigation-panel__logo,
.navigation-bar {
  background-color: transparent !important;
}

.navigation-panel a:hover,
.navigation-panel button:hover {
  background-color: rgba(139, 108, 255, 0.09) !important;
}


/* ---------------------------------------------------------
   Compose area
   --------------------------------------------------------- */

.compose-form,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  background-color: #0d1014 !important;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  color: #f1f3f5 !important;
  border-color: #282e36 !important;
}

.compose-form .autosuggest-textarea__textarea:focus,
.compose-form .spoiler-input__input:focus {
  border-color: #7453e8 !important;
  box-shadow: 0 0 0 1px rgba(139, 108, 255, 0.4) !important;
}


/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

input,
textarea,
select,
.input-copy,
.simple_form input[type="text"],
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form textarea,
.simple_form select {
  background-color: #0d1014 !important;
  color: #edf0f2 !important;
  border-color: #2a3038 !important;
}

input:focus,
textarea:focus,
select:focus,
.simple_form input:focus,
.simple_form textarea:focus,
.simple_form select:focus {
  border-color: #8b6cff !important;
  box-shadow: 0 0 0 1px rgba(139, 108, 255, 0.35) !important;
}


/* ---------------------------------------------------------
   Dropdowns / popovers / menus
   --------------------------------------------------------- */

.dropdown-menu,
.dropdown-menu__container,
.dropdown-menu__item,
.actions-modal,
.modal-root__modal,
.confirmation-modal,
.report-modal,
.boost-modal {
  background-color: #0d1014 !important;
  border-color: #292f37 !important;
}

.dropdown-menu__item a,
.dropdown-menu__item button {
  color: #d9dde2 !important;
}

.dropdown-menu__item a:hover,
.dropdown-menu__item button:hover {
  background-color: #171b21 !important;
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   Cards / settings / admin UI
   --------------------------------------------------------- */

.account-card,
.directory__card,
.admin-wrapper,
.admin-wrapper .content,
.dashboard__counters > div,
.dashboard__widgets > div,
.information-board,
.table-wrapper {
  background-color: #080a0d !important;
}

.admin-wrapper .sidebar-wrapper {
  background-color: #07090b !important;
}


/* ---------------------------------------------------------
   Profile surfaces
   --------------------------------------------------------- */

.account__header__bar,
.account__section-headline,
.account__header__extra,
.account__header__bio .account__header__fields dl {
  background-color: #080a0d !important;
}


/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.search__input,
.search-input {
  background-color: #101318 !important;
  color: #e9ecef !important;
  border-color: #272d35 !important;
}

.search__input:focus,
.search-input:focus {
  background-color: #12161b !important;
  border-color: #7453e8 !important;
}


/* ---------------------------------------------------------
   Scrollbars
   --------------------------------------------------------- */

* {
  scrollbar-color: #353b44 #080a0d;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: #080a0d;
}

::-webkit-scrollbar-thumb {
  background: #353b44;
  border: 3px solid #080a0d;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a525d;
}


/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */

::selection {
  background: #6548c9;
  color: #ffffff;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
  text-decoration-color: rgba(155, 130, 255, 0.5);
}

.status__content a,
.reply-indicator__content a,
.detailed-status__display-name:hover,
.status__display-name:hover {
  color: #a58cff;
}


/* ---------------------------------------------------------
   Buttons

   Keep Mastodon's hierarchy, but make the primary action
   richer and less "default Mastodon purple".
   --------------------------------------------------------- */

.button,
.button.button-tertiary,
button.button {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.button:not(.button-tertiary),
button.button:not(.button-tertiary) {
  background-color: #7453e8;
}

.button:not(.button-tertiary):hover,
button.button:not(.button-tertiary):hover {
  background-color: #8769ef;
  box-shadow: 0 3px 12px rgba(116, 83, 232, 0.22);
}


/* ---------------------------------------------------------
   Polls / selected controls
   --------------------------------------------------------- */

.poll__chart.leading {
  background-color: #8063ec !important;
}

.icon-button.active,
.icon-button.active:hover {
  color: #9b82ff;
}


/* ---------------------------------------------------------
   Separators
   --------------------------------------------------------- */

hr,
.account__section-headline,
.notification-group,
.notification-group__main {
  border-color: #21262d !important;
}


/* ---------------------------------------------------------
   Burnout Café polish

   Faint purple illumination on focused / active elements,
   not a full neon theme.
   --------------------------------------------------------- */

.column-header.active,
.column-header__button.active,
.navigation-panel a.selected {
  box-shadow:
    inset 3px 0 0 #8063ec,
    inset 5px 0 12px rgba(128, 99, 236, 0.08);
}


/* Keep images/media properly dark around their edges */

.media-gallery,
.video-player,
.audio-player,
.status-card {
  background-color: #050607 !important;
}


/* ---------------------------------------------------------
   Reduce bright flashes during page transitions/loading
   --------------------------------------------------------- */

.loading-indicator,
.regeneration-indicator {
  background-color: #080a0d !important;
  color: #abb2bd !important;
}