/* Hide the default Mastodon wordmark SVG */
.navigation-panel__logo .logo--wordmark {
  display: none;
}

@media (max-width: 768px) {
  .column-header__title .logo.logo--icon {
    display: none !important;
  }

  .column-header__title::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url("https://cdn.masto.host/socialvoicesvu/site_uploads/files/000/000/003/48/bc28f1b99183c8c6.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}


/* Scale down the logo to fit */
.navigation-panel__logo .column-link--logo {
  display: block;
  height: 36px;
  overflow: hidden;
  padding: 0;
}

.navigation-panel__logo .column-link--logo::before {
  zoom: 0.33;
  display: block;
  height: 110px;
  width: 495px;
}
/* Replace with your custom logo image */
.navigation-panel__logo .column-link--logo::before {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjUwMCIgaGVpZ2h0PSIxNTAiIHZpZXdCb3g9IjAgMCA1MDAgMTUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9Im5vbmUiLz4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIKICAgICAgICBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIKICAgICAgICBmb250LXNpemU9IjgwIgogICAgICAgIGZpbGw9IndoaXRlIj4KICAgIFZPSUNFUwogIDwvdGV4dD4KPC9zdmc+Cg==');
  display: block;
  height: 40px;
  width: auto;


/* Fix logo size to fit navigation panel */
.navigation-panel__logo .column-link--logo {
  overflow: hidden;
  max-height: 50px;
  display: flex;
  align-items: center;
}

.navigation-panel__logo .column-link--logo::before {
  transform: scale(0.22);
  transform-origin: left center;
  height: 110px;
  width: 500px;
  flex-shrink: 0;
}}

/* VOICES x VentureFactory-inspired Mastodon theme
   Style direction:
   - near-black background
   - charcoal surfaces
   - muted grey typography
   - vibrant green primary actions
   - soft radius, subtle borders, premium dark SaaS feel
*/

/* ---------- Brand tokens ---------- */

:root {
  --voices-bg: #070909;
  --voices-bg-elevated: #0d1110;
  --voices-surface: #111716;
  --voices-surface-2: #161d1b;
  --voices-surface-3: #1b2421;
  --voices-border: rgba(205, 220, 214, 0.08);
  --voices-border-strong: rgba(205, 220, 214, 0.14);

  --voices-text: #f3f6f4;
  --voices-text-muted: #a6b2ad;
  --voices-text-soft: #7d8883;

  --voices-green: #7df266;
  --voices-green-hover: #93ff7e;
  --voices-green-active: #68de52;
  --voices-green-ghost: rgba(125, 242, 102, 0.12);

  --voices-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --voices-radius-sm: 10px;
  --voices-radius-md: 16px;
  --voices-radius-lg: 22px;
  --voices-max-main: 760px;
  --voices-side-width: 340px;
}

/* ---------- Global shell ---------- */

html,
body,
.app-holder,
#mastodon,
.ui,
.columns-area,
.drawer,
.admin-wrapper,
.public-layout,
.layout-single-column {
  background: var(--voices-bg) !important;
  color: var(--voices-text) !important;
}

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---------- Main layout widths ---------- */

.columns-area__panels__main {
  max-width: var(--voices-max-main) !important;
}

.columns-area__panels__pane,
.columns-area__panels__pane__inner,
.compose-panel {
  width: var(--voices-side-width) !important;
}

/* ---------- Panels / cards ---------- */

.column,
.drawer__inner,
.search,
.link-footer,
.getting-started,
.navigation-panel,
.compose-form,
.account__section-headline,
.notification__filter-bar,
.report-dialog-modal,
.focusable,
.dropdown-menu,
.column-header__wrapper,
.column-header,
.scrollable,
.trends__item,
.story,
.item-list article,
.status,
.detailed-status,
.account-card,
.account,
.account__section-headline button {
  background: var(--voices-surface) !important;
  color: var(--voices-text) !important;
  border-color: var(--voices-border) !important;
}

.column,
.drawer__inner,
.navigation-panel,
.compose-form,
.search,
.link-footer,
.getting-started,
.account-card,
.status,
.detailed-status {
  border: 1px solid var(--voices-border) !important;
  border-radius: var(--voices-radius-md) !important;
  box-shadow: var(--voices-shadow);
}

/* remove the “flat grey mastodon” feel */
.column-header,
.column-back-button,
.account__section-headline,
.notification__filter-bar {
  background: var(--voices-surface-2) !important;
  border-bottom: 1px solid var(--voices-border) !important;
  color: var(--voices-text) !important;
}

/* ---------- Text ---------- */

h1, h2, h3, h4, h5, h6,
.column-header__title,
.display-name__html,
.status__display-name,
.account__display-name,
.navigation-panel__logo,
.compose-form__highlightable,
.reply-indicator__content .status__content {
  color: var(--voices-text) !important;
}

p,
.status__content,
.account__header__content,
.notification__message,
.trends__item__name,
.getting-started__trends .trends__item__current,
.compose-form .autosuggest-textarea__textarea,
.compose-form textarea,
.drawer__inner,
.explore__search-results,
.reply-indicator__content,
.status__relative-time,
.status__display-name .display-name__account,
.account__header__tabs__name h1 small,
.account__header__tabs__name .account__header__account-note,
.account__header__extra__links,
.column-subheading,
.link-footer p,
.link-footer a {
  color: var(--voices-text-muted) !important;
}

.status__content a,
.account__header__content a,
.reply-indicator__content a,
.detailed-status__meta a,
.status__display-name strong,
.account__display-name strong {
  color: var(--voices-text) !important;
}

/* ---------- Links and active nav ---------- */

a,
.status__content a,
.link-footer a,
.column-link:hover,
.column-link:focus,
.drawer__tab:focus,
.drawer__tab:hover {
  color: var(--voices-green) !important;
}

.column-link {
  color: var(--voices-text-muted) !important;
  border-radius: 12px;
  margin: 2px 8px;
}

.column-link.active {
  color: var(--voices-text) !important;
  background: linear-gradient(
    180deg,
    rgba(125, 242, 102, 0.18) 0%,
    rgba(125, 242, 102, 0.08) 100%
  ) !important;
  font-weight: 700 !important;
}

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

.button,
.button.button-secondary,
.icon-button,
.icon-button.copy-button,
.dropdown-menu__item a,
.dropdown-menu__item button,
.search__input,
.compose-form .autosuggest-textarea__textarea,
.compose-form textarea,
.input,
.textarea,
.select {
  border-radius: 14px !important;
}

.button {
  background: var(--voices-green) !important;
  color: #081108 !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(125, 242, 102, 0.22) !important;
  font-weight: 700 !important;
}

.button:hover,
.button:focus {
  background: var(--voices-green-hover) !important;
  color: #081108 !important;
}

.button:active {
  background: var(--voices-green-active) !important;
}

.button.button-secondary,
.compose-form .compose-form__publish-button-wrapper .button.button-secondary {
  background: transparent !important;
  color: var(--voices-text) !important;
  border: 1px solid var(--voices-border-strong) !important;
  box-shadow: none !important;
}

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

.icon-button:hover,
.icon-button:focus {
  color: var(--voices-green) !important;
  background: var(--voices-green-ghost) !important;
}

/* ---------- Inputs / search / composer ---------- */

.search__input,
.compose-form .autosuggest-textarea__textarea,
.compose-form textarea,
.input,
.textarea,
.select {
  background: var(--voices-bg-elevated) !important;
  color: var(--voices-text) !important;
  border: 1px solid var(--voices-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

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

.search__input:focus,
.compose-form .autosuggest-textarea__textarea:focus,
.compose-form textarea:focus,
.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(125, 242, 102, 0.45) !important;
  box-shadow:
    0 0 0 3px rgba(125, 242, 102, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Composer wrapper */
.compose-form__highlightable,
.compose-form .spoiler-input__input,
.reply-indicator {
  background: var(--voices-surface-2) !important;
  color: var(--voices-text) !important;
  border-color: var(--voices-border) !important;
}

/* ---------- Status cards ---------- */

.status,
.detailed-status,
.focusable.status,
.notification,
.activity-stream .entry {
  background: var(--voices-surface) !important;
  border: 1px solid var(--voices-border) !important;
  border-radius: var(--voices-radius-md) !important;
  box-shadow: none !important;
}

.status:hover,
.focusable.status:hover {
  background: var(--voices-surface-2) !important;
  border-color: var(--voices-border-strong) !important;
}

.status__content,
.detailed-status__wrapper,
.status__wrapper {
  color: var(--voices-text) !important;
}

/* ---------- Right rail / trends / about ---------- */

.getting-started,
.getting-started__wrapper,
.getting-started__trends,
.trends__item,
.link-footer {
  background: var(--voices-surface) !important;
  color: var(--voices-text-muted) !important;
}

.trends__item {
  border-bottom: 1px solid var(--voices-border) !important;
}

.trends__item:last-child {
  border-bottom: none !important;
}

/* ---------- Profile styling ---------- */

.account__header,
.account__header__bar,
.account__header__tabs,
.account__header__bio {
  background: var(--voices-surface) !important;
  color: var(--voices-text) !important;
  border-color: var(--voices-border) !important;
}

.account__header__tabs__name h1,
.account__header__tabs__name h1 small,
.account__header__extra__links a {
  color: var(--voices-text) !important;
}

/* ---------- Drawer / dropdown / modals ---------- */

.dropdown-menu,
.dropdown-animation,
.actions-modal,
.confirmation-modal,
.modal-root__modal {
  background: var(--voices-surface-2) !important;
  border: 1px solid var(--voices-border-strong) !important;
  border-radius: var(--voices-radius-md) !important;
  color: var(--voices-text) !important;
}

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

* {
  scrollbar-color: #2c3833 #0a0d0c;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0a0d0c;
}
::-webkit-scrollbar-thumb {
  background: #26312d;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #33423c;
}

/* ---------- Optional logo/tagline polish area ---------- */

/* If your server logo area exposes a text span/p element nearby,
   this gives it a cleaner premium treatment */
.navigation-panel__logo,
.logo,
.wordmark {
  filter: brightness(1.08) contrast(1.02);
}

/* ---------- Mobile tuning ---------- */

@media (max-width: 768px) {
  .column,
  .status,
  .detailed-status,
  .navigation-panel,
  .compose-form {
    border-radius: 14px !important;
  }

  .column-link {
    margin: 2px 4px;
  }
}

/* ---------- Public/about page polish ---------- */

.landing-page,
.public-layout .header,
.public-layout .hero,
.public-layout .features-list,
.public-layout .brand,
.public-layout .footer {
  background: var(--voices-bg) !important;
  color: var(--voices-text) !important;
}

.public-layout .header a,
.public-layout .brand__tagline,
.public-layout .features-list__row__text,
.public-account-bio,
.public-layout p {
  color: var(--voices-text-muted) !important;
}

.public-layout .button,
.public-layout .button.button-primary {
  background: var(--voices-green) !important;
  color: #081108 !important;
  border: none !important;
}