/* =========================================
   THEME MASTODON – ETXEPARE IKASKOOP (LIGHT v2+)
   - Nuances claires différenciées
   - Contraste renforcé
   ========================================= */

/* ---------- VARIABLES ---------- */
:root {
  /* Fonds */
  --etx-bg-page: #e4f0f4;              /* fond général */
  --etx-bg-columns: #f3f9fb;           /* arrière-plan des colonnes */
  --etx-bg-soft: #ffffff;              /* cartes (toots, notifs, etc.) */
  --etx-bg-menu: #e0eef2;              /* menu / drawer */

  /* Accents */
  --etx-accent: #06b394;               /* vert principal */
  --etx-accent-soft: rgba(6, 179, 148, 0.10);

  /* Texte */
  --etx-text: #051822;                 /* texte principal, très foncé */
  --etx-muted: #4c6674;                /* texte secondaire */

  /* Bordures */
  --etx-border: rgba(0, 0, 0, 0.10);
}

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

html,
body,
body.app-body {
  background: radial-gradient(
    circle at top,
    #ffffff 0,
    var(--etx-bg-page) 55%,
    #d7e5ec 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: var(--etx-bg-columns) !important;
}

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

.column > .scrollable {
  background: transparent !important;
  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: var(--etx-bg-menu) !important;
  border: none !important;
}

/* liens du menu */
.drawer__inner a {
  color: var(--etx-text) !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 8px 22px rgba(15, 35, 52, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
}

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

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

/* texte des statuts et notifications */
.status__content,
.status__content p,
.notification__message {
  color: var(--etx-text) !important;
}

/* 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 14px 30px rgba(15, 35, 52, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.95);
}

/* 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 – CONTRASTE RENFORCÉ
   ========================================= */

button,
.button,
.compose-form__publish-button-wrapper button {
  background: var(--etx-accent) !important;
  color: #ffffff !important;                  /* texte blanc pour le contraste */
  border-radius: 999px !important;
  border: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 1.1rem;
  box-shadow: 0 6px 18px rgba(6, 76, 63, 0.30);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    opacity 0.12s ease-out;
}

button:hover,
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(6, 76, 63, 0.38);
  opacity: 0.96;
}

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

.icon-button svg {
  fill: var(--etx-text);
}

/* =========================================
   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 14px 34px rgba(15, 35, 52, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.6rem 0.85rem;
}

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

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

/* Champ de recherche */

.search__input,
.search__input input {
  border-radius: 18px !important;
  background: #ffffff !important;
  color: var(--etx-text) !important;
}

/* Champ vide grisé */
.search__input input::placeholder {
  color: var(--etx-muted) !important;
}

/* Suggestions / résultats */

.search .search__results,
.search .search-results,
.search .autosuggest-textarea__suggestions,
.search .autosuggest-textarea__suggestions-wrapper {
  position: relative;
  z-index: 60 !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow:
    0 10px 24px rgba(15, 35, 52, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.95);
}

/* ONGLET : Guztiak / Profilak / Traolak / Bidalketak */

.pillbar,
.pillbar__link,
.pillbar .button {
  background: var(--etx-accent) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.25rem 0.95rem !important;
  font-size: 0.82rem !important;
  box-shadow: 0 4px 14px rgba(6, 76, 63, 0.30);
}

/* Onglet actif */
.pillbar__link--selected,
.pillbar .button.is-active {
  box-shadow: 0 6px 18px rgba(6, 76, 63, 0.38);
}

/* Bouton "ikusi guztiak" = chip outline vert */

.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
   ========================================= */

.modal-root__overlay {
  background: rgba(8, 17, 27, 0.32) !important;
  backdrop-filter: blur(6px);
}

.modal-root .embed,
.embed-modal,
.embed-dialog {
  background: var(--etx-bg-soft) !important;
  border-radius: 16px !important;
  border: 1px solid var(--etx-border) !important;
}

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

.landing-page,
.sign-in {
  background: radial-gradient(
    circle at top,
    #ffffff 0,
    var(--etx-bg-page) 55%,
    #d7e5ec 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 16px 40px rgba(15, 35, 52, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.95);
}

/* =========================================
   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;
  }
}

/* =========================================
   BARRES D'ACTIONS – DEVANT LE BACKGROUND
   ========================================= */

.status__action-bar,
.detailed-status__action-bar {
  position: relative !important;
  z-index: 50 !important;
  background: rgba(243, 249, 251, 0.95) !important;
  padding: 0.4rem 1rem !important;
  display: flex;
  gap: 1.4rem;
  justify-content: flex-start;
  backdrop-filter: blur(4px);
}

/* 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;
  box-shadow: 0 4px 14px rgba(6, 76, 63, 0.28) !important;
}

.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: var(--etx-text) !important;
  fill: var(--etx-text) !important;
}

/* =========================================
   Boutons du composeur (image / sondage / CW / emoji)
   ========================================= */

.compose-form__buttons .icon-button,
.compose-form__buttons button {
  border-radius: 999px !important;
  background: var(--etx-accent-soft) !important;
  box-shadow: 0 4px 14px rgba(6, 76, 63, 0.28) !important;
}

.compose-form__buttons .icon-button svg,
.compose-form__buttons button svg {
  fill: var(--etx-text) !important;
}

/* =========================================
   PATCHS SUPPLÉMENTAIRES
   ========================================= */

/* 1) Recherche : anciens fonds sombres */

.search__results,
.search-results,
.search__recent-searches,
.search__section,
.search-results__section {
  background: #ffffff !important;
  color: var(--etx-text) !important;
}

/* Titres de sections */
.search__section__title,
.search-results__section__title {
  color: var(--etx-muted) !important;
  font-weight: 600;
}

/* Lignes individuelles */
.search__recent-search,
.search-results__item {
  background: transparent !important;
  color: var(--etx-text) !important;
}

/* Hover */
.search__recent-search:hover,
.search-results__item:hover {
  background: var(--etx-accent-soft) !important;
}

/* Boutons "X" */
.search__recent-search button,
.search-results__item button {
  color: var(--etx-muted) !important;
}

/* 2) Composeur : garantir le fond clair + texte lisible */

.compose-form,
.compose-form__content,
.compose-form__autosuggest-wrapper {
  background: #ffffff !important;
  color: var(--etx-text) !important;
}

/* Zone de texte */
.compose-form textarea {
  background: transparent !important;
  color: var(--etx-text) !important;
}

/* Placeholder */
.compose-form textarea::placeholder {
  color: var(--etx-muted) !important;
}

/* Zone basse du composeur */
.compose-form__publish {
  background: transparent !important;
}

/* 3) Neutraliser des restes éventuels du thème dark */

.theme-dark,
.theme-dark * {
  background-color: unset !important;
  color: inherit !important;
}

/* 4) MOT "MASTODON" : forcer une couleur foncée lisible */

.brand,
.brand__wordmark,
.brand__wordmark span,
.brand__tagline,
.brand__tagline span {
  color: var(--etx-text) !important;
  fill: var(--etx-text) !important;
}
/* =========================================
   PATCH FINAL – BOUTONS COMPOSEUR VISIBLES
   (image / sondage / CW / emoji)
   ========================================= */

/* Conteneur des boutons */
.compose-form__buttons {
  gap: 0.6rem;
}

/* Boutons eux-mêmes */
.compose-form__buttons .icon-button {
  background: #ffffff !important;
  border: 1px solid var(--etx-border) !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.45rem !important;
  box-shadow:
    0 4px 10px rgba(6, 76, 63, 0.18);
  opacity: 1 !important;
}

/* Icônes */
.compose-form__buttons .icon-button svg {
  fill: var(--etx-accent) !important;
  opacity: 1 !important;
}

/* Hover */
.compose-form__buttons .icon-button:hover {
  background: var(--etx-accent-soft) !important;
  box-shadow:
    0 6px 16px rgba(6, 76, 63, 0.28);
  transform: translateY(-1px);
}

/* Bouton désactivé (si quota atteint, etc.) */
.compose-form__buttons .icon-button:disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
}
/* =========================================
   PATCH ULTIME – ICÔNES COMPOSEUR VISIBLES
   (image / sondage / CW / emoji)
   ========================================= */

/* Icônes SVG : forcer une couleur foncée */
.compose-form__buttons .icon-button svg,
.compose-form__buttons .icon-button svg * {
  fill: #051822 !important;      /* noir/bleu très foncé */
  stroke: #051822 !important;
  opacity: 1 !important;
}

/* État hover : un poil plus contrasté */
.compose-form__buttons .icon-button:hover svg,
.compose-form__buttons .icon-button:hover svg * {
  fill: #03302a !important;
  stroke: #03302a !important;
}

/* Bouton désactivé */
.compose-form__buttons .icon-button:disabled svg,
.compose-form__buttons .icon-button:disabled svg * {
  fill: #9aaeb6 !important;
  stroke: #9aaeb6 !important;
}