/* Styles responsive pour les posts */

/* Design mobile avec repositionnement du bouton Signaler */
@media (max-width: 640px) {
  /* Container principal des actions - réorganisé en 2 lignes */
  .post-actions-container {
    background-color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 16px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Première ligne : J'aime, Commenter, Partager (masquer Signaler sur mobile) */
  .post-actions-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Masquer le bouton signaler de la première ligne sur mobile */
  .post-actions-left .report-button {
    display: none !important;
  }

  /* Afficher le bouton signaler mobile dans la deuxième ligne */
  .report-button-mobile {
    display: flex !important;
  }

  /* Deuxième ligne : Signaler (sous J'aime) et Sauvegarder */
  .post-actions-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid #e2e8f0 !important;
    position: relative !important;
  }

  /* Style uniforme pour tous les boutons d'action */
  .post-action-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
    border: none !important;
    min-width: 70px !important;
    flex: 1 !important;
    max-width: 90px !important;
    text-decoration: none !important;
  }

  .post-action-button:hover {
    background-color: #e2e8f0 !important;
    transform: translateY(-1px) !important;
  }

  /* Icônes des boutons */
  .post-action-button svg {
    margin-right: 0 !important;
    margin-bottom: 4px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Texte des boutons */
  .post-action-button .action-text,
  .post-action-button span {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #64748b !important;
    display: block !important;
  }

  /* Masquer les spans qui ne sont pas .action-text sauf pour le bouton sauvegarder */
  .post-action-button span:not(.action-text) {
    display: none !important;
  }

  /* Style spécial pour le bouton sauvegarder sur mobile */
  .post-actions-right .post-action-button {
    color: var(--med-primary-dark) !important;
  }

  .post-actions-right .post-action-button span {
    color: var(--med-primary-dark) !important;
    display: block !important;
  }

  .post-actions-right .post-action-button:hover {
    background-color: var(--med-primary-light) !important;
  }

  /* Couleurs au survol */
  .post-action-button:hover .action-text,
  .post-action-button:hover span {
    color: var(--med-primary-dark) !important;
  }

  /* Style spécial pour le bouton J'aime quand il est actif */
  .post-action-button.liked {
    background-color: #fef2f2 !important;
  }

  .post-action-button.liked .action-text {
    color: #dc2626 !important;
  }

  .post-action-button.liked svg {
    color: #dc2626 !important;
    fill: #dc2626 !important;
  }

  /* Style spécial pour le bouton signaler mobile */
  .report-button-mobile {
    color: #64748b !important;
  }

  .report-button-mobile:hover {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
  }

  .report-button-mobile .action-text {
    color: inherit !important;
  }
}

/* Styles pour desktop - garder le bouton signaler dans la première ligne */
@media (min-width: 641px) {
  .report-button {
    display: flex !important;
  }

  /* Masquer le bouton signaler mobile sur desktop */
  .report-button-mobile {
    display: none !important;
  }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
  .post-actions-container {
    padding: 10px !important;
    margin-top: 12px !important;
    gap: 10px !important;
  }

  .post-actions-right {
    padding-top: 6px !important;
  }

  .post-action-button {
    padding: 6px 2px !important;
    min-width: 60px !important;
    max-width: 80px !important;
  }

  .post-action-button svg {
    width: 16px !important;
    height: 16px !important;
  }

  .post-action-button .action-text,
  .post-action-button span {
    font-size: 9px !important;
  }
}

/* Styles pour améliorer la lisibilité générale sur mobile */
@media (max-width: 640px) {
  .post-card-mobile {
    padding: 16px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  .post-content-mobile {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  .post-title-mobile {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }

  /* Améliorer l'espacement des métadonnées du post */
  .post-meta-mobile {
    font-size: 12px !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
  }
}

/* Animation pour les interactions */
@media (max-width: 640px) {
  .post-action-button:active {
    transform: translateY(0) scale(0.95) !important;
  }

  .post-actions-container {
    animation: slideUp 0.3s ease-out;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styles responsive pour les profils professionnels */

/* Styles pour mobile uniquement - laisser Tailwind gérer les autres breakpoints */
@media (max-width: 640px) {
  /* Container principal */
  .professional-profile-container {
    padding: 0.75rem !important;
  }

  /* Onglets de navigation */
  .profile-tabs-container {
    padding: 0.75rem 1rem !important;
  }

  .profile-tab-button,
  .profile-tab-link {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important;
  }

  /* Contenu des onglets */
  .profile-tab-content {
    padding: 0.75rem 1rem !important;
  }

  /* Grilles internes */
  .profile-info-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Sections */
  .profile-section {
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Titres */
  .profile-section-title {
    font-size: 1rem !important;
  }

  .profile-subsection-title {
    font-size: 0.875rem !important;
  }

  /* Informations de contact */
  .contact-info-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .contact-info-item {
    font-size: 0.875rem !important;
  }

  .contact-info-item svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Boutons d'action */
  .profile-action-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  .profile-action-button svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Sidebar sur mobile */
  .profile-sidebar-mobile {
    background-color: #f8fafc !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Statistiques */
  .profile-stats-list {
    gap: 0.5rem !important;
  }

  .profile-stat-item {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
  }

  /* Amélioration de la scrollbar horizontale pour les onglets */
  .scrollbar-hide {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none !important;
  }
}

/* Styles pour très petits écrans */
@media (max-width: 480px) {
  .professional-profile-container {
    padding: 0.5rem !important;
  }

  .profile-tabs-container {
    padding: 0.5rem 0.75rem !important;
  }

  .profile-tab-button,
  .profile-tab-link {
    padding: 0.5rem 0.375rem !important;
    font-size: 0.75rem !important;
  }

  .profile-tab-content {
    padding: 0.5rem 0.75rem !important;
  }

  .profile-section {
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .profile-section-title {
    font-size: 0.875rem !important;
  }

  .contact-info-item {
    font-size: 0.75rem !important;
  }

  .profile-action-button {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.625rem !important;
  }
}

/* Amélioration de l'accessibilité tactile */
@media (max-width: 640px) {
  .profile-tab-button,
  .profile-tab-link,
  .profile-action-button {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }

  /* Animation pour les interactions tactiles */
  .profile-tab-button:active,
  .profile-action-button:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }
}

/* Amélioration de la lisibilité */
@media (max-width: 640px) {
  .profile-description {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  .profile-list-item {
    font-size: 0.875rem !important;
    padding: 0.5rem 0 !important;
  }

  /* Espacement amélioré pour les éléments de liste */
  .profile-specialty-tag,
  .profile-language-tag {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.125rem !important;
  }
}