/* =========================================
   THEME MASTODON – ETXEPARE IKASKOOP
   Version complète avec boutons verts
   ========================================= */

/* ---------- VARIABLES ---------- */
:root {
  --etx-bg: #050b10;
  --etx-bg-soft: #0b1720;

  --etx-accent: #18c29c;                 /* vert IKASKOOP */
  --etx-accent-soft: rgba(24, 194, 156, 0.16);

  --etx-text: #e6f0f7;
  --etx-muted: #9aa8b5;

  --etx-border: rgba(255, 255, 255, 0.05);
}

/* ---------- FOND GLOBAL + TYPO ---------- */

html,
body,
body.app-body {
  background: radial-gradient(circle at top, #163047 0, #050b10 55%, #020509 100%);
  color: var(--etx-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-holder {
  background: transparent !important;
}

/* ---------- COLONNES ---------- */

.columns-area,
.columns-area__panels {
  background: transparent !important;
}

.column,
.column > .scrollable {
  background: transparent !important;
  border: none !important;
}

.column > .scrollable {
  padding: 0.75rem;
}

/* En-têtes de colonne */

.column-header {
  background: transparent !important;
  border: none !important;
  padding: 0.6rem 0.75rem 0.2rem;
}

.column-header__title {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--etx-muted);
}

/* Drawer / panneau gauche */

.drawer,
.drawer__inner,
.drawer__inner__mastodon {
  background: transparent !important;
  border: none !important;
}

/* ---------- CARTES (TOOTS, NOTIFS, PANELS...) ---------- */

.status,
.notification,
.compose-form,
.navigation-panel,
.search,
.account__header,
.account__section-headline,
.column-subheading,
.embed,
.follow_requests-unlocked_explanation,
.report,
.trends,
.account-card,
.account-card__bio,
.search-results__section {
  background: var(--etx-bg-soft) !important;
  border-radius: 14px !important;
  border: 1px solid var(--etx-border) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
}

/* Marges entre cartes */

.status,
.notification,
.compose-form,
.trends__item,
.search,
.account-card {
  margin-bottom: 0.8rem;
}

/* Contenu interne */

.status__wrapper,
.status__content,
.notification__message {
  padding: 0.75rem 1rem;
}

/* Barre d’actions */

.status__action-bar {
  border-top: 1px solid var(--etx-border);
  margin-top: 0.4rem;
  padding-top: 0.25rem;
}

/* Effet hover "carte qui flotte" */

.status:hover,
.notification:hover {
  transform: translateY(-1px);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58);
}

/* Avatars */

.account__avatar,
.status__avatar {
  border-radius: 999px !important;
}

/* ---------- LIENS ---------- */

a,
.status__content a,
.notification__message a,
.hashtag {
  color: var(--etx-accent) !important;
  text-decoration: none;
}

a:hover,
.hashtag:hover {
  text-decoration: underline;
}

/* =========================================
   BOUTONS – VERSION VERT PILL
   ========================================= */

/* Base : tout bouton est vert pill par défaut */
button,
.button,
.compose-form__publish-button-wrapper button {
  background: var(--etx-accent) !important;
  color: #021212 !important;
  border-radius: 999px !important;
  border: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 1.1rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    opacity 0.12s ease-out;
}

/* Hover global boutons */
button:hover,
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  opacity: 0.96;
}

/* Boutons d’icône "..." : plus petits, sobres */
.icon-button,
.button.icon-button {
  padding: 0.25rem 0.4rem;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: var(--etx-accent-soft) !important;
}

/* =========================================
   COMPOSEUR + APERÇU D’URL
   ========================================= */

.compose-form {
  position: relative;
  overflow: visible !important;
  z-index: 20;
  padding: 0.3rem 0.5rem;
}

.compose-form textarea {
  background: transparent !important;
  border: none !important;
  color: var(--etx-text) !important;
}

/* Aperçu de lien / carte d’URL sous le champ */

.compose-form__preview,
.compose-form .preview-card,
.compose-form .status-card,
.compose-form .card,
.compose-form .embed,
.compose-form [class*="preview"],
.compose-form [class*="embed"] {
  position: relative !important;
  z-index: 30 !important;
  background: var(--etx-bg-soft) !important;
  border-radius: 14px !important;
  border: 1px solid var(--etx-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  padding: 0.6rem 0.85rem;
  animation: etx-embed-in 180ms ease-out;
}

/* Animation douce pour l’aperçu */

@keyframes etx-embed-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================
   RECHERCHE (BARRE + ONGLETS + "IKUSI GUZTIAK")
   ========================================= */

/* La carte de recherche doit passer au-dessus des toots */

.search {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

/* Champ de recherche en haut */

.search__input,
.search__input input {
  border-radius: 18px !important;
}

/* Suggestions / résultats : au-dessus des toots aussi */

.search .search__results,
.search .search-results,
.search .autosuggest-textarea__suggestions,
.search .autosuggest-textarea__suggestions-wrapper {
  position: relative;
  z-index: 60 !important;
}

/* ONGLET : Guztiak / Profilak / Traolak / Bidalketak
   -> verts, mais un peu moins "gros boudins" */

.pillbar,
.pillbar__link,
.pillbar .button {
  background: var(--etx-accent) !important;       /* vert */
  color: #021212 !important;
  border-radius: 999px !important;                /* pill, mais… */
  padding: 0.25rem 0.95rem !important;            /* …moins haut */
  font-size: 0.82rem !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Onglet actif (on garde un léger effet) */
.pillbar__link--selected,
.pillbar .button.is-active {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

/* Bouton "ikusi guztiak" = petit chip bien encerclé */

.search .see-more,
.search .see-more .button,
.search a.see-more {
  background: transparent !important;
  color: var(--etx-accent) !important;
  border-radius: 999px !important;
  border: 1px solid var(--etx-accent) !important;
  padding: 0.12rem 0.85rem !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  box-shadow: none !important;
}

.search .see-more .button:hover,
.search a.see-more:hover {
  background: var(--etx-accent-soft) !important;
}

/* Les toots / notifs restent derrière la recherche et le composeur */

.column .status,
.column .notification {
  position: relative;
  z-index: 1 !important;
}

/* =========================================
   FENÊTRES MODALES / EMBED GLOBAL
   ========================================= */

.modal-root,
.modal-root__overlay,
.modal-root__container {
  z-index: 9999 !important;
}

.modal-root__overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(6px);
}

.modal-root .embed,
.embed-modal,
.embed-dialog {
  position: relative;
  background: var(--etx-bg-soft) !important;
  border-radius: 16px !important;
  border: 1px solid var(--etx-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  padding: 0.9rem 1.1rem;
  animation: etx-embed-in 180ms ease-out;
}

/* Lien interne / externe dans les embeds (pédagogique) */

.modal-root .embed a[href*="mastodon.etxepareikaskoop.eus"] {
  color: var(--etx-accent) !important;
}

.modal-root .embed a[href*="mastodon.etxepareikaskoop.eus"]::before {
  content: "🏠 bertakoa";
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--etx-muted);
  display: inline-block;
  margin-right: 0.4rem;
}

.modal-root .embed a[href^="http"]:not([href*="mastodon.etxepareikaskoop.eus"]) {
  color: #ffb347 !important;
}

.modal-root .embed a[href^="http"]:not([href*="mastodon.etxepareikaskoop.eus"])::before {
  content: "🌍 kanpokoa";
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffb347;
  display: inline-block;
  margin-right: 0.4rem;
}

.modal-root .embed a[href^="http"]:not([href*="mastodon.etxepareikaskoop.eus"])::after {
  content: "↗";
  font-size: 0.8rem;
  margin-left: 0.25rem;
  opacity: 0.9;
}

/* =========================================
   PAGES PUBLIC / LOGIN
   ========================================= */

.landing-page,
.sign-in {
  background: radial-gradient(circle at top, #163047 0, #050b10 55%, #020509 100%) !important;
}

.form-container,
.simple_form,
.sign-in__form {
  background: var(--etx-bg-soft) !important;
  border-radius: 18px !important;
  border: 1px solid var(--etx-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {
  .column > .scrollable {
    padding: 0.5rem;
  }

  .status,
  .notification,
  .compose-form,
  .search {
    border-radius: 12px !important;
  }

  .column-header {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

/* =========================================
   RECHERCHE – FENÊTRE DE SUGGESTIONS
   (radius plus arrondi)
   ========================================= */

/* Conteneur principal des suggestions */
.search .search__results,
.search .search-results,
.search .autosuggest-textarea__suggestions,
.search .autosuggest-textarea__suggestions-wrapper {
  border-radius: 30px !important;
  overflow: hidden; /* pour que les enfants respectent l'arrondi */
}

/* Chaque ligne à l’intérieur (optionnel, plus propre) */
.search .search__results > *,
.search .search-results__item,
.search .autosuggest-textarea__suggestion {
  border-radius: 0 !important; /* évite les doubles arrondis internes */
}

/* =========================================
   RECHERCHE – MENU DE SUGGESTIONS
   Ombre flottante + slide depuis le haut
   ========================================= */

/* Fenêtre globale des suggestions */
.search .search__results,
.search .search-results,
.search .autosuggest-textarea__suggestions,
.search .autosuggest-textarea__suggestions-wrapper {
  border-radius: 30px !important;
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--etx-border);
  animation: etx-search-menu-in 160ms ease-out;
  transform-origin: top center;
}

/* Animation douce : fade + slide léger */
@keyframes etx-search-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Lignes internes : pas d’arrondi parasite */
.search .search__results > *,
.search .search-results__item,
.search .autosuggest-textarea__suggestion {
  border-radius: 0 !important;
}

/* Effet hover sur une ligne (optionnel mais agréable) */
.search .search-results__item:hover,
.search .autosuggest-textarea__suggestion:hover {
  background: var(--etx-accent-soft) !important;
}

.icon-button svg {
  fill: rgba(255,255,255,0.85);
}

/* --- 1) Le background/logo passe derrière toute l'UI --- */
body {
  position: relative;
  z-index: 0;
}

/* Si tu utilises un body::before pour afficher le logo répété */
body::before {
  z-index: -1 !important;  /* le met derrière */
}

/* --- 2) L’interface passe bien devant --- */
.ui, .columns-area, .columns-area__panels {
  position: relative;
  z-index: 1;
}

/* --- 3) Les boutons de la barre d’actions encore plus devant --- */
.status__action-bar,
.status__action-bar .icon-button,
.status__action-bar .icon-button * {
  position: relative;
  z-index: 5;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* =========================================
   BARRE D'ACTIONS - VUE DÉTAILLÉE DU TOOT
   (boutons bien devant le background)
   ========================================= */

/* Même traitement pour la barre classique et la vue détaillée */
.status__action-bar,
.detailed-status__action-bar {
  position: relative;
  z-index: 20; /* passe devant le fond */
  background: rgba(5, 11, 16, 0.96); /* bande plus opaque */
  padding: 0.5rem 1.2rem;
  display: flex;
  gap: 1.4rem;
  justify-content: flex-start;
}

/* Boutons ronds visibles */
.status__action-bar .icon-button,
.detailed-status__action-bar .icon-button {
  border-radius: 999px !important;
  background: var(--etx-accent-soft) !important; /* vert translucide */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* Icônes bien claires */
.status__action-bar .icon-button svg,
.detailed-status__action-bar .icon-button svg {
  fill: #e6f0f7 !important; /* quasi blanc */
}

/* Compteurs (le "0" sous le bouton) */
.status__action-bar .icon-button__counter,
.detailed-status__action-bar .icon-button__counter,
.status__action-bar .icon-button span,
.detailed-status__action-bar .icon-button span {
  color: var(--etx-text) !important;
}

/* On neutralise tout blend bizarre sur ces boutons */
.status__action-bar .icon-button,
.status__action-bar .icon-button *,
.detailed-status__action-bar .icon-button,
.detailed-status__action-bar .icon-button * {
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* =========================================
   BARRES D'ACTIONS – DEVANT LE BACKGROUND
   (colonnes, vue détaillée, mobile)
   ========================================= */

/* 1) barres de boutons : devant le fond + fond opaque */
.status__action-bar,
.detailed-status__action-bar {
  position: relative !important;
  z-index: 50 !important;
  background: var(--etx-bg) !important;         /* bande sombre opaque */
  padding: 0.4rem 1rem !important;
}

/* 2) boutons ronds visibles dans ces barres */
.status__action-bar .icon-button,
.status__action-bar button,
.detailed-status__action-bar .icon-button,
.detailed-status__action-bar button {
  border-radius: 999px !important;
  background: var(--etx-accent-soft) !important; /* halo vert translucide */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7) !important;
}

/* 3) couleur des icônes + chiffres */
.status__action-bar .icon-button,
.status__action-bar .icon-button *,
.status__action-bar button,
.status__action-bar button *,
.detailed-status__action-bar .icon-button,
.detailed-status__action-bar .icon-button *,
.detailed-status__action-bar button,
.detailed-status__action-bar button * {
  color: #e6f0f7 !important;   /* texte / icônes quasi blanc */
  fill: #e6f0f7 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* 4) compteurs sous les boutons (le "0") */
.status__action-bar__counter,
.status__action-bar__counter__label,
.detailed-status__action-bar .icon-button__counter,
.detailed-status__action-bar .icon-button span {
  color: #e6f0f7 !important;
}

/* 5) barre d’onglets mobile en bas, au cas où la capture venait de là */
.tabs-bar {
  position: relative !important;
  z-index: 60 !important;
  background: var(--etx-bg) !important;
}

.tabs-bar__link .icon-button,
.tabs-bar__link .icon-button *,
.tabs-bar__link svg {
  color: #e6f0f7 !important;
  fill: #e6f0f7 !important;
}

.status__action-bar,
.detailed-status__action-bar {
  backdrop-filter: blur(6px);
  background: rgba(5, 11, 16, 0.9) !important;
}
/* =========================================
   Boutons du composeur (image / sondage / CW / emoji)
   ========================================= */

/* Conteneur de boutons = devant le fond */
.compose-form__buttons {
  position: relative !important;
  z-index: 40 !important;
}

/* Bulles des 4 boutons */
.compose-form__buttons .icon-button,
.compose-form__buttons button {
  position: relative !important;
  z-index: 41 !important;
  border-radius: 999px !important;
  background: var(--etx-accent-soft) !important;   /* halo vert */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7) !important;
}

/* Icônes à l’intérieur des bulles */
.compose-form__buttons .icon-button svg,
.compose-form__buttons button svg {
  fill: #e6f0f7 !important;                       /* quasi blanc */
}

/* On neutralise tout blend/filtre bizarre */
.compose-form__buttons .icon-button,
.compose-form__buttons .icon-button *,
.compose-form__buttons button,
.compose-form__buttons button * {
  mix-blend-mode: normal !important;
  filter: none !important;
  color: #e6f0f7 !important;
}