/* =========================================================
   Custom Mastodon theme
   ========================================================= */

/* ---------- Light theme variables ---------- */
:root[data-color-scheme='light'] {
  --custom-selection-bg: rgba(202,156,249,1);
  --custom-selection-text: #fff;
  --custom-scrollbar-thumb: rgba(202,156,249,1);
  --custom-scrollbar-track: rgba(222,224,212,1);
  --custom-page-bg: rgba(222,224,212,1);
  --custom-panel-bg: rgba(249,249,251,1);
  --custom-modal-bg: rgba(232,233,225,1);
  --custom-border-bg: rgba(255,255,255,1);
  --custom-button-bg: rgba(178,50,63,1);
  --custom-button-text: #fff;
  --color-bg-primary: var(--custom-page-bg);
  --color-bg-secondary: var(--custom-panel-bg);
  --color-bg-tertiary: var(--custom-panel-bg);
  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);
}

/* ---------- Dark theme variables ---------- */
:root[data-color-scheme='dark'] {
  --custom-dark-page-bg: rgb(37, 38, 35);
  --custom-dark-accent: rgb(102, 219, 126);
  --custom-dark-border: rgb(107, 107, 107);
  --custom-dark-scrollbar-thumb: rgba(202,156,249,1);
  --custom-dark-scrollbar-track: rgba(37, 38, 35, 0.7);
  --custom-dark-selection-bg: rgba(202,156,249,1);
  --custom-dark-selection-text: #000;
  --color-bg-primary: var(--custom-dark-page-bg);
  --color-bg-secondary: var(--custom-dark-page-bg);
  --color-bg-tertiary: var(--custom-dark-page-bg);
  --background-border-color: var(--custom-dark-border);
  --color-border-primary: var(--custom-dark-border);
  --color-border-secondary: var(--custom-dark-border);
}

/* =========================================================
   Page backgrounds
   ========================================================= */

:root[data-color-scheme='light'],
:root[data-color-scheme='light'] body,
:root[data-color-scheme='light'] .app-holder,
:root[data-color-scheme='light'] .ui,
:root[data-color-scheme='light'] .columns-area,
:root[data-color-scheme='light'] .layout,
:root[data-color-scheme='light'] .layout-single-column,
:root[data-color-scheme='light'] .tabs-bar__wrapper,
:root[data-color-scheme='light'] .tabs-bar,
:root[data-color-scheme='light'] .tabs-bar__link,
:root[data-color-scheme='light'] .navigation-bar {
  background-color: var(--custom-page-bg) !important;
}

:root[data-color-scheme='light'] body {
  --background-border-color: var(--custom-border-bg);
}

:root[data-color-scheme='dark'],
:root[data-color-scheme='dark'] body,
:root[data-color-scheme='dark'] .app-holder,
:root[data-color-scheme='dark'] .ui,
:root[data-color-scheme='dark'] .columns-area,
:root[data-color-scheme='dark'] .layout,
:root[data-color-scheme='dark'] .layout-single-column,
:root[data-color-scheme='dark'] .tabs-bar__wrapper,
:root[data-color-scheme='dark'] .tabs-bar,
:root[data-color-scheme='dark'] .tabs-bar__link,
:root[data-color-scheme='dark'] .navigation-bar {
  background-color: var(--custom-dark-page-bg) !important;
}

:root[data-color-scheme='dark'],
:root[data-color-scheme='dark'] body {
  --color-bg-primary: var(--custom-dark-page-bg);
  --color-bg-secondary: var(--custom-dark-page-bg);
  --color-bg-tertiary: var(--custom-dark-page-bg);
  --background-border-color: var(--custom-dark-border);
  --color-border-primary: var(--custom-dark-border);
  --color-border-secondary: var(--custom-dark-border);
}

/* =========================================================
   Text selection
   ========================================================= */

:root[data-color-scheme='light'] ::selection {
  color: var(--custom-selection-text);
  background: var(--custom-selection-bg);
}

:root[data-color-scheme='dark'] ::selection {
  color: var(--custom-dark-selection-text);
  background: var(--custom-dark-selection-bg);
}

:root[data-color-scheme='dark'] a::selection,
:root[data-color-scheme='dark'] a *::selection {
  color: inherit;
  background: var(--custom-dark-selection-bg);
}

/* =========================================================
   Scrollbars
   ========================================================= */

:root[data-color-scheme='light'],
:root[data-color-scheme='light'] body,
:root[data-color-scheme='light'] * {
  scrollbar-width: thin !important;
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track) !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar-track,
:root[data-color-scheme='light'] *::-webkit-scrollbar-corner {
  background: var(--custom-scrollbar-track) !important;
}

:root[data-color-scheme='light'] *::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb) !important;
  border-radius: 999px !important;
}

:root[data-color-scheme='dark'],
:root[data-color-scheme='dark'] body,
:root[data-color-scheme='dark'] * {
  scrollbar-width: thin !important;
  scrollbar-color: var(--custom-dark-scrollbar-thumb) var(--custom-dark-scrollbar-track) !important;
}

:root[data-color-scheme='dark']::-webkit-scrollbar,
:root[data-color-scheme='dark'] body::-webkit-scrollbar,
:root[data-color-scheme='dark'] *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

:root[data-color-scheme='dark']::-webkit-scrollbar-track,
:root[data-color-scheme='dark'] body::-webkit-scrollbar-track,
:root[data-color-scheme='dark'] *::-webkit-scrollbar-track,
:root[data-color-scheme='dark']::-webkit-scrollbar-corner,
:root[data-color-scheme='dark'] body::-webkit-scrollbar-corner,
:root[data-color-scheme='dark'] *::-webkit-scrollbar-corner {
  background: var(--custom-dark-scrollbar-track) !important;
}

:root[data-color-scheme='dark']::-webkit-scrollbar-thumb,
:root[data-color-scheme='dark'] body::-webkit-scrollbar-thumb,
:root[data-color-scheme='dark'] *::-webkit-scrollbar-thumb {
  background-color: var(--custom-dark-scrollbar-thumb) !important;
  background: var(--custom-dark-scrollbar-thumb) !important;
  border-radius: 999px !important;
}

/* =========================================================
   About page / rich text rule lists
   Fixes:
   - creates circular 1, 2, 3 markers
   - gives custom About-page lists the same kind of indentation
     as Mastodon's native server-rules list
   ========================================================= */

.rich-formatting ol.rules-list {
  list-style: none !important;
  counter-reset: rules-list !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.rich-formatting ol.rules-list > li {
  list-style: none !important;
  counter-increment: rules-list !important;
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
  column-gap: 1rem !important;
  align-items: start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.rich-formatting ol.rules-list > li::marker {
  content: "" !important;
}

/* Important:
   This does NOT set background, color, border, box-shadow, or font color.
   Those stay with Mastodon's default .rules-list marker style.
*/
.rich-formatting ol.rules-list > li::before {
  content: counter(rules-list) !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  align-self: start !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  min-width: 2.4rem !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-align: center !important;
}

.rich-formatting ol.rules-list > li > .rules-list__text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Defensive reset in case old markup with .indent still exists anywhere */
.rich-formatting ol.rules-list .rules-list__text.indent {
  padding-left: 0 !important;
}

/* =========================================================
   Button-style controls
   ========================================================= */

:root[data-color-scheme='light'] :where(
  .content .button,
  .content .btn,
  .content__heading__actions .button,
  .content__heading__actions .btn,
  .simple_form .button,
  .simple_form .btn,
  .actions .btn,
  .input-copy .button,
  table .button,
  table .btn,
  .batch-table .button,
  .batch-table .btn,
  .batch-table__toolbar .button,
  .batch-table__toolbar .btn,
  .button-primary,
  .button-tertiary,
  .button--block,
  .nav-button
):not(.button--compact):not(.compose-form__submit .button):not(.account__relationship .button) {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
}

:root[data-color-scheme='light'] :where(
  .content .button,
  .content .btn,
  .content__heading__actions .button,
  .content__heading__actions .btn,
  .simple_form .button,
  .simple_form .btn,
  .actions .btn,
  .input-copy .button,
  table .button,
  table .btn,
  .batch-table .button,
  .batch-table .btn,
  .batch-table__toolbar .button,
  .batch-table__toolbar .btn,
  .button-primary,
  .button-tertiary,
  .button--block,
  .nav-button
):not(.button--compact):not(.compose-form__submit .button):not(.account__relationship .button):is(:hover, :focus) {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:root[data-color-scheme='dark'] :where(
  .content .button,
  .content .btn,
  .content__heading__actions .button,
  .content__heading__actions .btn,
  .simple_form .button,
  .simple_form .btn,
  .actions .btn,
  .input-copy .button,
  table .button,
  table .btn,
  .batch-table .button,
  .batch-table .btn,
  .batch-table__toolbar .button,
  .batch-table__toolbar .btn,
  .button-primary,
  .button-tertiary,
  .button--block,
  .nav-button
):not(.button--compact):not(.compose-form__submit .button):not(.account__relationship .button) {
  background-color: var(--custom-dark-accent) !important;
  color: #000 !important;
  border-color: var(--custom-dark-accent) !important;
}

:root[data-color-scheme='dark'] :where(
  .content .button,
  .content .btn,
  .content__heading__actions .button,
  .content__heading__actions .btn,
  .simple_form .button,
  .simple_form .btn,
  .actions .btn,
  .input-copy .button,
  table .button,
  table .btn,
  .batch-table .button,
  .batch-table .btn,
  .batch-table__toolbar .button,
  .batch-table__toolbar .btn,
  .button-primary,
  .button-tertiary,
  .button--block,
  .nav-button
):not(.button--compact):not(.compose-form__submit .button):not(.account__relationship .button):is(:hover, :focus) {
  background-color: var(--custom-dark-accent) !important;
  color: #000 !important;
  border-color: var(--custom-dark-accent) !important;
  box-shadow: none !important;
}

/* =========================================================
   Active admin/settings tabs
   ========================================================= */

:root[data-color-scheme='light'] .content__heading__tabs a.selected,
:root[data-color-scheme='light'] .content__heading__tabs a.simple-navigation-active-leaf {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

:root[data-color-scheme='light'] .content__heading__tabs a.selected:is(:hover, :focus),
:root[data-color-scheme='light'] .content__heading__tabs a.simple-navigation-active-leaf:is(:hover, :focus) {
  background-color: var(--custom-button-bg) !important;
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

:root[data-color-scheme='light'] .content__heading__tabs a.selected svg,
:root[data-color-scheme='light'] .content__heading__tabs a.selected svg path,
:root[data-color-scheme='light'] .content__heading__tabs a.simple-navigation-active-leaf svg,
:root[data-color-scheme='light'] .content__heading__tabs a.simple-navigation-active-leaf svg path {
  fill: currentColor !important;
  color: currentColor !important;
}

:root[data-color-scheme='dark'] .content__heading__tabs a.selected,
:root[data-color-scheme='dark'] .content__heading__tabs a.simple-navigation-active-leaf {
  background-color: var(--custom-dark-accent) !important;
  color: #000 !important;
  border-color: var(--custom-dark-accent) !important;
  text-decoration: none !important;
}

:root[data-color-scheme='dark'] .content__heading__tabs a.selected:is(:hover, :focus),
:root[data-color-scheme='dark'] .content__heading__tabs a.simple-navigation-active-leaf:is(:hover, :focus) {
  background-color: var(--custom-dark-accent) !important;
  color: #000 !important;
  border-color: var(--custom-dark-accent) !important;
  text-decoration: none !important;
}

:root[data-color-scheme='dark'] .content__heading__tabs a.selected svg,
:root[data-color-scheme='dark'] .content__heading__tabs a.selected svg path,
:root[data-color-scheme='dark'] .content__heading__tabs a.simple-navigation-active-leaf svg,
:root[data-color-scheme='dark'] .content__heading__tabs a.simple-navigation-active-leaf svg path {
  fill: currentColor !important;
  color: currentColor !important;
}

/* =========================================================
   Miscellaneous UI tweaks
   ========================================================= */

:root[data-color-scheme='light'] .nav-button {
  color: var(--custom-button-text) !important;
  border-color: transparent !important;
}

:root[data-color-scheme='light'] .label_input__append {
  max-width: 160px !important;
}

/* =========================================================
   Safety action modal
   ========================================================= */

:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal {
  --color-bg-primary: var(--custom-modal-bg);
  --color-bg-secondary: var(--custom-modal-bg);
  --color-bg-tertiary: var(--custom-modal-bg);
  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal > .safety-action-modal__top,
:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal > .safety-action-modal__bottom {
  background-color: var(--custom-modal-bg) !important;
}

:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal),
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal) {
  --background-border-color: var(--custom-border-bg);
  --color-border-primary: var(--custom-border-bg);
  --color-border-secondary: var(--custom-border-bg);
  border-top-color: var(--custom-border-bg) !important;
  outline-color: var(--custom-border-bg) !important;
}

:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__container:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__overlay:has(form.modal-root__modal.safety-action-modal)::after,
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal)::before,
:root[data-color-scheme='light'] .modal-root__modal-container:has(form.modal-root__modal.safety-action-modal)::after {
  border-top-color: var(--custom-border-bg) !important;
  background-color: var(--custom-border-bg) !important;
  box-shadow: none !important;
}

:root[data-color-scheme='light'] form.modal-root__modal.safety-action-modal::before {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 10 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background-color: var(--custom-border-bg) !important;
  border-radius: 16px 16px 0 0 !important;
}