/* ═══════════════════════════════════════════
   OKI FEDERATION — Mastodon CSS (Dark + Light)
   bokante.o-k-i.net
   ═══════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap");

/* ── Variables OKI — Mode Sombre (défaut) ── */
:root {
  --oki-bg: #0D0D0D;
  --oki-surface: #1A0F1A;
  --oki-text: #FFF8E7;
  --oki-text-muted: rgba(255, 248, 231, 0.7);
  --oki-text-placeholder: rgba(255, 248, 231, 0.5);
  --oki-border: rgba(255, 255, 255, 0.1);
  --oki-accent: #FDB813;
  --oki-accent-hover: #FFE066;
  --oki-accent-soft: rgba(253, 184, 19, 0.08);
  --oki-accent-softer: rgba(253, 184, 19, 0.04);
  --oki-accent-hover-bg: rgba(253, 184, 19, 0.12);
  --oki-red: #FF1654;
  --oki-green: #00D66C;
  --oki-orange: #FF6B35;
  --oki-radius-sm: 3px;
  --oki-radius-md: 6px;
  --oki-font-display: "Archivo", "Arial Black", sans-serif;
  --oki-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Variables OKI — Mode Clair ── */
/* Mastodon 4.5.x ajoute .theme-mastodon-light au body en mode clair */
body.theme-mastodon-light,
html.theme-mastodon-light {
  --oki-bg: #FFF8E7;
  --oki-surface: #F5F0E6;
  --oki-text: #0D0D0D;
  --oki-text-muted: rgba(13, 13, 13, 0.65);
  --oki-text-placeholder: rgba(13, 13, 13, 0.45);
  --oki-border: rgba(0, 0, 0, 0.1);
  --oki-accent: #D4950A;
  --oki-accent-hover: #FDB813;
  --oki-accent-soft: rgba(212, 149, 10, 0.1);
  --oki-accent-softer: rgba(212, 149, 10, 0.05);
  --oki-accent-hover-bg: rgba(212, 149, 10, 0.15);
  --oki-red: #E81045;
  --oki-green: #00B85C;
}

/* ── Fallback prefers-color-scheme pour les visiteurs non connectés ── */
@media (prefers-color-scheme: light) {
  :root {
    --oki-bg: #FFF8E7;
    --oki-surface: #F5F0E6;
    --oki-text: #0D0D0D;
    --oki-text-muted: rgba(13, 13, 13, 0.65);
    --oki-text-placeholder: rgba(13, 13, 13, 0.45);
    --oki-border: rgba(0, 0, 0, 0.1);
    --oki-accent: #D4950A;
    --oki-accent-hover: #FDB813;
    --oki-accent-soft: rgba(212, 149, 10, 0.1);
    --oki-accent-softer: rgba(212, 149, 10, 0.05);
    --oki-accent-hover-bg: rgba(212, 149, 10, 0.15);
    --oki-red: #E81045;
    --oki-green: #00B85C;
  }
}

/* ── Global ── */
body, .ui, .column-header, .getting-started, .drawer__inner,
.drawer__inner__mastodon, .account__header, .account__section-headline,
.notification__filter-bar, .tabs-bar__wrapper, .landing-page,
.landing-page__grid, .landing-page__information, .landing-page__forms,
.landing-page__call-to-action, .about__meta, .about__header,
.about__section, .about__footer, .about__section__body,
.directory, .public-layout, .navigation-panel, .navigation-bar,
.column-link, .column-link--transparent, .column-link__bg,
.column-subheading, .getting-started__trends, .getting-started__trends__item,
.getting-started__footer, .flex-spacer, .column-header__collapsible,
.column-back-button, .compose-form__autosuggest-wrapper,
.compose-form__publish-button-wrapper, .dropdown-menu, .actions-modal,
.boost-modal, .confirmation-modal, .report-modal, .embed-modal,
.list-editor, .column-inline-form, .search-results__header,
.compose-panel .compose-form, .compose-panel .compose-form__autosuggest-wrapper,
.compose-panel .compose-form__textarea, .compose-panel .compose-form__publish-button-wrapper,
.conversations__item, .conversations__item__content, .hero, .hero__content,
.features, .features__item, .features__wrapper, .features__grid,
.table-of-contents, .pagination a, .pagination span, .pagination em,
.public-layout .footer, .public-layout footer, .about__footer,
.search__input, .search__popout, .search__popout__menu,
.search__popout__menu__item, .search-results__header,
input, textarea, select, .setting-text, .report__textarea,
.simple_form input, .simple_form textarea, .simple_form select,
.public-layout input, .public-layout textarea {
  background-color: var(--oki-bg) !important;
  color: var(--oki-text) !important;
  font-family: var(--oki-font-body) !important;
  border-color: var(--oki-border) !important;
}

/* ── Surfaces secondaires ── */
.column-back-button, .column-link, .column-link--transparent,
.search__input, .compose-form__autosuggest-wrapper,
.compose-form__publish-button-wrapper, .dropdown-menu, .actions-modal,
.boost-modal, .confirmation-modal, .report-modal, .embed-modal,
.list-editor, .column-inline-form, .search-results__header,
.compose-panel .compose-form__autosuggest-wrapper,
.compose-panel .compose-form__publish-button-wrapper,
.search__popout, .search__popout__menu, .filter-form, .filter-form__column,
.list-editor__accounts, .list-editor__accounts__item {
  background-color: var(--oki-surface) !important;
}

/* ── Titres ── */
.column-header__title, .display-name__html, .account__display-name,
.navigation-bar strong, .column-subheading,
.landing-page__hero__heading, .landing-page__information h1,
.landing-page__information h2, .landing-page__information h3,
.about__header h1, .about__header h2, .about__section__title,
.directory__tag h4, .directory__tag h4 small,
.hero__heading, .features__heading, .features__item h3,
.features__item h4, .public-layout h1, .account__header__tabs__name h1,
.account__header__tabs__name h1 small, .page-title, .title-page,
.conversations__item__content {
  font-family: var(--oki-font-display) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--oki-text) !important;
}

/* ── Texte secondaire ── */
.display-name__account, .status__relative-time, .status__action-bar,
.column-link__description, .account__header__content,
.account__header__bio .account__header__fields dt,
.account__header__bio .account__header__fields dd,
.notification__relative-time, .search-results__info,
.hero__text, .landing-page__hero__text, .about__header p,
.about__section__body p, .about__meta p, .directory__tag > div,
.directory__tag__meta, .landing-page__information p,
.landing-page__call-to-action p, .features__text, .features__item p,
.getting-started__footer a, .column-link__description,
.conversations__item__message, .trends__item__count,
.trends__item__count span, .text-muted, .small, .meta {
  color: var(--oki-text-muted) !important;
}

/* ── Liens ── */
a, .status__content a.unhandled-link, .reply-indicator__content a,
.status__content a, .column-link:hover, .getting-started__footer a:hover,
.hero__cta a, .landing-page__call-to-action a, .about__header a,
.about__section a, .about__footer a, .directory__tag a,
.landing-page__information a, .public-layout a,
.search__popout__menu__item:hover, .search__popout__menu__item.selected {
  color: var(--oki-accent) !important;
}

a:hover, .hero__cta a:hover, .landing-page__call-to-action a:hover,
.about__header a:hover, .directory__tag a:hover {
  color: var(--oki-accent-hover) !important;
}

/* ── Boutons principaux ── */
.button, .compose-form__publish-button-wrapper .button,
.modal-root__modal .button, .column-back-button, .dropdown-button,
.block-button, .landing-page__call-to-action .button, .hero__cta .button,
.landing-page__forms .button, .about__header .button, .public-layout .button {
  background-color: transparent !important;
  color: var(--oki-accent) !important;
  border: 2px solid var(--oki-accent) !important;
  border-radius: var(--oki-radius-sm) !important;
  font-family: var(--oki-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.button:hover, .compose-form__publish-button-wrapper .button:hover,
.dropdown-button:hover, .landing-page__call-to-action .button:hover,
.hero__cta .button:hover, .landing-page__forms .button:hover,
.about__header .button:hover {
  background-color: var(--oki-accent-hover-bg) !important;
  transform: translateY(-2px) !important;
}

/* ── Bouton secondaire ── */
.icon-button, .text-icon-button, .dropdown-button.secondary,
.button.button-secondary, .button.logo-button,
.landing-page__forms .button.button-secondary,
.hero__cta .button.button-secondary, .public-layout .button.button-secondary {
  color: var(--oki-text) !important;
  border-color: var(--oki-border) !important;
  background-color: var(--oki-surface) !important;
}

.icon-button.active, .icon-button:hover,
.text-icon-button.active, .text-icon-button:hover {
  color: var(--oki-accent) !important;
}

/* ── Statuts / Toots ── */
.status, .notification, .account {
  background-color: rgba(128, 128, 128, 0.03) !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 var(--oki-radius-sm) var(--oki-radius-sm) 0 !important;
}

.status.status-direct {
  border-left-color: var(--oki-red) !important;
}

.status__wrapper.focusable:focus, .status__wrapper.focusable:active,
.status.status-direct:focus {
  background-color: rgba(128, 128, 128, 0.05) !important;
}

/* ── Compose form ── */
.compose-form__textarea, .compose-form__autosuggest-wrapper,
.search__input, .setting-text, .report__textarea,
.compose-panel .compose-form__textarea {
  background-color: var(--oki-surface) !important;
  color: var(--oki-text) !important;
  border: 1px solid var(--oki-border) !important;
  border-radius: var(--oki-radius-sm) !important;
}

.compose-form__textarea::placeholder, .search__input::placeholder,
.compose-panel .compose-form__textarea::placeholder,
input::placeholder, textarea::placeholder {
  color: var(--oki-text-placeholder) !important;
}

.compose-form__textarea:focus, .search__input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--oki-accent) !important;
  box-shadow: 0 0 0 2px var(--oki-accent-soft) !important;
}

/* ── Labels ── */
.simple_form label, .landing-page__forms label, .public-layout label {
  color: var(--oki-text) !important;
}

/* ── Polls ── */
.poll__chart {
  background-color: var(--oki-accent) !important;
}

.poll__option.selectable:hover {
  background-color: var(--oki-accent-softer) !important;
}

/* ── Dropdowns / menus ── */
.dropdown-menu__item a:hover, .dropdown-menu__item button:hover,
.actions-modal__item:hover {
  background-color: var(--oki-accent-soft) !important;
  color: var(--oki-accent) !important;
}

/* ── Navigation panel ── */
.column-link, .column-link--transparent {
  border-bottom: 1px solid var(--oki-border) !important;
}

.column-link:hover, .column-link--transparent:hover,
.column-link.active, .column-link--transparent.active {
  background-color: var(--oki-accent-soft) !important;
  color: var(--oki-accent) !important;
}

.column-link:hover .column-link__title,
.column-link.active .column-link__title {
  color: var(--oki-accent) !important;
}

.column-link .icon, .column-link--transparent .icon,
.column-link .fa, .column-link--transparent .fa {
  color: var(--oki-text) !important;
}

.column-link:hover .icon, .column-link.active .icon,
.column-link:hover .fa, .column-link.active .fa {
  color: var(--oki-accent) !important;
}

.column-subheading, .getting-started__trends h4,
.getting-started__trends h4 a {
  color: var(--oki-accent) !important;
  font-family: var(--oki-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ── Trends ── */
.getting-started__trends__item, .trends__item,
.trends__item__name, .trends__item__count {
  background-color: transparent !important;
  border-color: var(--oki-border) !important;
}

.getting-started__trends__item:hover, .trends__item:hover {
  background-color: var(--oki-accent-softer) !important;
}

.trends__item__name a, .trends__item__name span {
  color: var(--oki-text) !important;
}

.getting-started__trends__item::before, .trends__item::before {
  border-color: var(--oki-border) !important;
}

/* ── Conversations (DMs) ── */
.conversations__item:hover {
  background-color: var(--oki-accent-softer) !important;
}

.conversations__item__message {
  color: var(--oki-text-muted) !important;
}

.conversations__item__unread {
  background-color: var(--oki-red) !important;
  color: var(--oki-text) !important;
}

/* ── Features / Cards landing ── */
.features__item, .landing-page__features__item,
.directory__tag, .directory__tag > a, .directory__tag > div {
  background-color: rgba(128, 128, 128, 0.03) !important;
  border: 1px solid var(--oki-border) !important;
  border-radius: var(--oki-radius-md) !important;
}

.features__item:hover, .landing-page__features__item:hover,
.directory__tag:hover, .directory__tag > a:hover {
  border-color: var(--oki-accent) !important;
  transform: translateY(-2px) !important;
}

.features__item, .landing-page__features__item {
  border-left: 4px solid var(--oki-accent) !important;
}

/* ── Tags / Badges ── */
.public-layout .tag, .public-layout .hashtag,
.public-layout .account__header__fields a,
.status__content__spoiler-link, .content-warning {
  background-color: var(--oki-accent-soft) !important;
  color: var(--oki-accent) !important;
  border: 1px solid var(--oki-accent) !important;
  border-radius: var(--oki-radius-sm) !important;
  font-weight: 600 !important;
}

.status__content__spoiler-link, .content-warning {
  font-family: var(--oki-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* ── Tableaux ── */
.public-layout table, .public-layout table th, .public-layout table td,
.table-of-contents, .table-of-contents li {
  background-color: transparent !important;
  color: var(--oki-text) !important;
  border-color: var(--oki-border) !important;
}

.public-layout table th {
  color: var(--oki-accent) !important;
  font-family: var(--oki-font-display) !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--oki-accent) !important;
}

.public-layout table tr:hover {
  background-color: var(--oki-accent-softer) !important;
}

/* ── Pagination ── */
.pagination a, .pagination span, .pagination em {
  background-color: var(--oki-surface) !important;
  color: var(--oki-text) !important;
  border: 1px solid var(--oki-border) !important;
}

.pagination .current, .pagination a:hover {
  background-color: var(--oki-accent) !important;
  color: var(--oki-bg) !important;
  border-color: var(--oki-accent) !important;
  font-family: var(--oki-font-display) !important;
}

/* ── Footer ── */
.public-layout .footer, .public-layout footer, .about__footer,
.getting-started__footer, .getting-started__footer a {
  background-color: var(--oki-bg) !important;
  border-top: 1px solid var(--oki-border) !important;
  color: var(--oki-text-muted) !important;
}

.public-layout .footer a, .about__footer a,
.getting-started__footer a:hover {
  color: var(--oki-accent) !important;
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--oki-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.25);
  border-radius: var(--oki-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--oki-accent);
}

/* ── FLAG-BAR ── */
.tabs-bar__wrapper {
  position: relative !important;
}
.tabs-bar__wrapper::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    #0D0D0D 0%,   #0D0D0D 25%,
    #FDB813 25%,  #FDB813 50%,
    #00D66C 50%,  #00D66C 75%,
    #FF1654 75%,  #FF1654 100%
  );
  z-index: 10;
}

.landing-page .header, .public-layout .header, .about__header {
  position: relative !important;
}
.landing-page .header::after, .public-layout .header::after,
.about__header::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    #0D0D0D 0%,   #0D0D0D 25%,
    #FDB813 25%,  #FDB813 50%,
    #00D66C 50%,  #00D66C 75%,
    #FF1654 75%,  #FF1654 100%
  );
  z-index: 10;
}

/* ── Logo replacement ── */
.navigation-panel .logo, .navigation-panel .logo-button svg,
.column-header__logo svg, .getting-started__logo svg,
.drawer__header .logo svg, .landing-page__logo svg, .brand svg {
  display: none !important;
}

.navigation-panel .drawer__header, .drawer__header,
.column-header__logo, .getting-started__logo {
  background-image: url("/system/site_uploads/files/000/000/001/original/oki-logo-rgb.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.landing-page__logo, .landing-page__brand, .public-layout .brand {
  background-image: url("/system/site_uploads/files/000/000/001/original/oki-logo-rgb.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 120px !important;
  height: 120px !important;
  display: block !important;
  margin: 0 auto 1.5rem auto !important;
}

/* ── Texte "Mastodon" → "BOKANTE" ── */
.landing-page__hero__heading, .landing-page__information h1,
.about__header h1, .public-layout h1 {
  visibility: hidden !important;
  position: relative !important;
}
.landing-page__hero__heading::after, .landing-page__information h1::after,
.about__header h1::after, .public-layout h1::after {
  content: "BÒKANTÉ" !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  color: var(--oki-text) !important;
  font-family: var(--oki-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: inherit !important;
}

/* ── Badges / compteurs ── */
.column-link .counter, .column-link__badge,
.notification__message .counter {
  background-color: var(--oki-red) !important;
  color: var(--oki-text) !important;
  font-family: var(--oki-font-display) !important;
  border-radius: var(--oki-radius-sm) !important;
}

/* ── Avatars ── */
.account__avatar, .navigation-bar__profile .account__avatar,
.column-link .account__avatar {
  border-radius: var(--oki-radius-sm) !important;
  border: 1px solid var(--oki-border) !important;
}

/* ── Dividers ── */
hr, .divider, .column-header__collapsible-inner,
.getting-started__trends__item + .getting-started__trends__item,
.about__meta__divider {
  border-color: var(--oki-border) !important;
}

.about__meta__divider span {
  background-color: var(--oki-bg) !important;
  color: var(--oki-text-muted) !important;
}

/* ── Indicateurs actifs ── */
.counter-bar__item.active, .column-header__active .column-header__title,
.notification__filter-bar button.active, .tabs-bar__link.active {
  color: var(--oki-accent) !important;
  border-bottom-color: var(--oki-accent) !important;
}

/* ── Panel scrollbars ── */
.getting-started__scrollable::-webkit-scrollbar,
.navigation-panel::-webkit-scrollbar {
  width: 6px;
}
.getting-started__scrollable::-webkit-scrollbar-track,
.navigation-panel::-webkit-scrollbar-track {
  background: var(--oki-bg);
}
.getting-started__scrollable::-webkit-scrollbar-thumb,
.navigation-panel::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: var(--oki-radius-sm);
}
.getting-started__scrollable::-webkit-scrollbar-thumb:hover,
.navigation-panel::-webkit-scrollbar-thumb:hover {
  background: var(--oki-accent);
}