/**
 * Améliorations responsive spécifiques pour OpenShare
 * Optimisations pour mobile, tablette et desktop
 */

/* ============================================================================
   AMÉLIORATIONS RESPONSIVE SPÉCIFIQUES
   ============================================================================ */

/* Grille de cartes annonces (row-cols-2) : trop étroit pour 2 colonnes
   en dessous de 340px, on repasse à 1 seule colonne */
@media (max-width: 339.98px) {
  .row-cols-2 > * {
    width: 100%;
  }
}

/* Optimisations pour les cartes d'annonces */
@media (max-width: 767.98px) {
  .ad-card {
    margin-bottom: 1rem;
  }

  .ad-card .card-body {
    padding: 1rem !important;
  }

  /* Grille de cartes annonces (2 colonnes) : marge interne resserrée */
  .ad-card-body {
    padding: 0.5rem !important;
  }

  .ad-card-body .card-text {
    font-size: 0.85rem;
  }

  .ad-card .card-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  .ad-card .ad-card-badges {
    margin-top: 0.5rem;
  }

  /* Liste des résultats : espace au-dessus des badges catégorie / type d'annonce */
  #ads-list-row .ad-card-badges {
    margin-top: 0.5rem;
  }
  
  .ad-card .card-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  
  /* Images d'annonces sur mobile */
  .ad-card img {
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  
  /* Boutons d'action mobile */
  .ad-card .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
  }
  
  /* Filtres mobile */
  .filter-card {
    position: sticky;
    top: 1rem;
    z-index: 10;
    margin-bottom: 1rem;
  }
  
  .filter-card .card-body {
    padding: 1rem;
  }
  
  /* Formulaires mobile */
  .form-control, .form-select {
    font-size: 1rem; /* Évite le zoom sur iOS */
    padding: 0.75rem;
  }

  /* Panneau de filtres (recherche + filtres avancés) : très compact sur mobile.
     Le padding est resserré mais font-size reste à 1rem (cf. règle ci-dessus,
     sous 16px Safari iOS zoome automatiquement sur les champs au focus). */
  #filtersCard .card-body {
    padding: 0.6rem 0.75rem;
  }

  #filtersCard .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
  }

  #filtersCard .form-select,
  #filtersCard .form-control {
    padding: 0.35rem 0.5rem;
  }

  #filtersCard .row.g-2 {
    --bs-gutter-y: 0.4rem;
  }

  #filtersCard .form-text {
    font-size: 0.75rem;
    margin-top: 0.15rem;
  }

  #filtersCard .btn:not(.btn-link) {
    padding: 0.35rem 0.75rem;
  }

  /* Navigation mobile améliorée */
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .navbar-toggler {
    border: none;
    padding: 0.25rem;
  }
  
  .navbar-toggler:focus {
    box-shadow: none;
  }
  
  /* Focus du menu smartphone en mode sombre - comme tablette */
  [data-theme="dark"] .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--os-focus-ring) !important;
  }

  /* Boutons icône uniquement : garder la taille icône (ne pas prendre toute la largeur) */
  .btn-icon-only,
  a.btn-icon-only {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 2.5rem;
  }
}

/* Boutons icône uniquement : toujours compacts (hors media query) pour
   éviter qu'un <a> ou <button> flex-item ne s'étire sur la largeur.
   Contre-carre .d-flex.gap-2 .btn { flex: 1 } de style.css qui sinon
   s'applique à l'élément <a class="btn"> direct du conteneur flex. */
.btn-icon-only,
a.btn-icon-only,
form:has(> .btn-icon-only) {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Page détail annonce : actions du propriétaire (Éditer / Désactiver /
   Supprimer) — neutralise .d-flex.flex-wrap.gap-2 { flex-direction: column }
   et .d-flex.flex-wrap.gap-2 .btn { width: 100% } de style.css pour garder
   3 boutons compacts alignés sur la même ligne. */
.ad-owner-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
.ad-owner-actions > .btn,
.ad-owner-actions > a.btn,
.ad-owner-actions > form .btn {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
  min-width: 2.75rem;
}

/* Demandes en cours : la meta (auteur/ville/date) a une largeur quasi fixe
   (~420px). En dessous de 992px le conteneur .container est plafonné à
   720px (cf. plus bas) : mettre la meta à côté du texte n'y laisse presque
   plus de place pour le texte de l'annonce. On garde donc l'empilement
   (texte pleine largeur, tronqué sur une ligne, meta dessous) jusqu'à 992px,
   où le conteneur s'élargit enfin et laisse assez de place aux deux. */
@media (max-width: 991.98px) {
  .card .list-group .list-group-item.demande-en-cours-item {
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    margin: 0 !important;
  }
  .card .list-group .list-group-item.demande-en-cours-item:first-child {
    padding-top: 0.35rem !important;
  }
  .card .list-group .list-group-item.demande-en-cours-item:last-child {
    padding-bottom: 0.35rem !important;
  }
  .demande-en-cours-item {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .demande-en-cours-item .demande-en-cours-content {
    display: block;
  }
  .demande-en-cours-item .demande-en-cours-text {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    line-height: 1.2;
    margin-bottom: 0;
  }
  .demande-en-cours-item .demande-en-cours-line {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .demande-en-cours-item .demande-en-cours-meta {
    display: block;
    font-size: 0.7rem;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    line-height: 1.2;
  }
}

/* Demandes en cours : desktop (texte à gauche, meta à droite) — uniquement
   à partir de 992px, où .container s'élargit et laisse assez de place */
@media (min-width: 992px) {
  .demande-en-cours-item .demande-en-cours-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .demande-en-cours-item .demande-en-cours-text {
    flex-grow: 1;
    min-width: 0;
  }
  .demande-en-cours-item .demande-en-cours-meta {
    flex-shrink: 0;
    text-align: right;
  }
}

/* Optimisations pour tablette */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ad-card img {
    height: 250px;
    object-fit: cover;
  }
  
  .ad-card .card-body {
    padding: 1.5rem;
  }
  
  .page-title {
    font-size: 1.75rem;
  }
  
  .container {
    max-width: 720px;
  }
  
  /* Navigation tablette */
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
  }
  
  /* Filtres tablette */
  .filter-card {
    position: sticky;
    top: 1rem;
    z-index: 10;
  }
}

/* Styles spécifiques pour la page "Mes annonces" */
.my-ad-card {
  border: 1px solid var(--os-border-color);
  border-radius: 0.75rem;
  box-shadow: var(--os-shadow);
  transition: all 0.3s ease;
}

.my-ad-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.my-ad-card .card-body {
  padding: 1rem;
}

.my-ad-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.my-ad-card .card-title a {
  color: var(--os-text-color);
  text-decoration: none;
}

.my-ad-card .card-title a:hover {
  color: var(--os-primary);
  text-decoration: underline;
}

/* Boutons d'action mobile pour "Mes annonces" */
.my-ad-card .btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.my-ad-card .btn i {
  font-size: 0.75rem;
}

/* Alertes pour les prêts */
.my-ad-card .alert {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.my-ad-card .alert-sm {
  font-size: 0.75rem;
}

/* Optimisations pour desktop */
@media (min-width: 992px) {
  .ad-card img {
    height: 200px;
    object-fit: cover;
  }
  
  .ad-card:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .ad-card .card-body {
    padding: 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .container {
    max-width: 1140px;
  }
  
  /* Hover effects pour desktop */
  .btn:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
  }
  
  .card:hover {
    box-shadow: var(--os-shadow-hover);
  }
}

/* Optimisations pour très grands écrans */
@media (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
  
  .ad-card .card-body {
    padding: 2rem;
  }
  
  .page-title {
    font-size: 2.25rem;
  }
}

/* ============================================================================
   AMÉLIORATIONS D'ACCESSIBILITÉ
   ============================================================================ */

/* Support des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .ad-card:hover,
  .btn:hover,
  .card:hover {
    transform: none !important;
    transition: none !important;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optimisations pour les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    /* Amélioration pour éviter les problèmes de double-tap */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* La barre de recherche des annonces : le bouton passe à 44px min (règle
     ci-dessus) mais l'icône et le champ texte gardent leur hauteur Bootstrap
     par défaut (~38px) sur tactile, ce qui les décale visuellement du bouton. */
  #filtersCard .input-group-text,
  #filtersCard .input-group > .form-control {
    min-height: 44px;
  }

  .theme-toggle {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Améliorer la zone de clic pour les cartes */
  .ad-card {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .ad-card .card-body {
    padding: 1.25rem;
  }
  
  /* Amélioration générale pour tous les liens et boutons */
  a, button, .btn, .nav-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Amélioration spécifique pour les boutons avec data-action */
  button[data-action] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Amélioration pour les boutons de copie */
  .copy-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Amélioration pour le bouton de thème */
  .theme-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 44px;
    min-width: 44px;
    pointer-events: auto;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES FORMULAIRES
   ============================================================================ */

/* Formulaires responsive */
@media (max-width: 767.98px) {
  .form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
  }
  
  .form-floating > label {
    padding: 1rem 0.75rem;
  }
  
  /* Boutons de formulaire mobile */
  .btn-group-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn-group-mobile .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES MODALES
   ============================================================================ */

@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    border-radius: 0.75rem;
  }
  
  .modal-header {
    padding: 1rem 1rem 0.5rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 0.5rem 1rem 1rem;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES TABLES
   ============================================================================ */

@media (max-width: 767.98px) {
  .table-responsive {
    border-radius: 0.5rem;
    overflow: hidden;
  }
  
  .table th,
  .table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
  
  .table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES ALERTES
   ============================================================================ */

@media (max-width: 767.98px) {
  .alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
  }
  
  .alert-dismissible .btn-close {
    padding: 0.75rem 1rem;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES BADGES ET INDICATEURS
   ============================================================================ */

@media (max-width: 767.98px) {
  .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }
  
  .btn .badge {
    font-size: 0.7rem;
  }
}

/* ============================================================================
   AMÉLIORATIONS POUR LES PAGINATIONS
   ============================================================================ */

@media (max-width: 767.98px) {
  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .pagination .page-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link {
    border-radius: 0.5rem;
  }
}

/* ============================================================================
   STYLES POUR LE CARROUSEL DE PHOTOS
   ============================================================================ */

/* Carrousel principal */
#photoCarousel {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#photoCarousel .carousel-inner {
  border-radius: 0.75rem;
}

#photoCarousel .carousel-item {
  transition: transform 0.2s ease-in-out;
}

#photoCarousel .carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* Contrôles du carrousel */
#photoCarousel .carousel-control-prev,
#photoCarousel .carousel-control-next {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

#photoCarousel .carousel-control-prev {
  left: 15px;
}

#photoCarousel .carousel-control-next {
  right: 15px;
}

#photoCarousel .carousel-control-prev:hover,
#photoCarousel .carousel-control-next:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

#photoCarousel .carousel-control-prev-icon,
#photoCarousel .carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* Indicateurs du carrousel */
#photoCarousel .carousel-indicators {
  bottom: 15px;
  margin-bottom: 0;
}

#photoCarousel .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

#photoCarousel .carousel-indicators button.active {
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

#photoCarousel .carousel-indicators button:hover {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 1);
}

/* Responsive pour le carrousel */
@media (max-width: 767.98px) {
  #photoCarousel .carousel-item img {
    height: 300px;
  }
  
  #photoCarousel .carousel-control-prev,
  #photoCarousel .carousel-control-next {
    width: 40px;
    height: 40px;
  }
  
  #photoCarousel .carousel-control-prev {
    left: 10px;
  }
  
  #photoCarousel .carousel-control-next {
    right: 10px;
  }
  
  #photoCarousel .carousel-indicators {
    bottom: 10px;
  }
  
  #photoCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    margin: 0 3px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #photoCarousel .carousel-item img {
    height: 350px;
  }
}

@media (min-width: 992px) {
  #photoCarousel .carousel-item img {
    height: 450px;
  }
}

/* Animation d'entrée pour le carrousel */
#photoCarousel .carousel-item {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#photoCarousel .carousel-item.active {
  opacity: 1;
}

/* Amélioration de l'accessibilité */
#photoCarousel .carousel-control-prev:focus,
#photoCarousel .carousel-control-next:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

#photoCarousel .carousel-indicators button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* Support des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #photoCarousel .carousel-item {
    transition: none;
  }
  
  #photoCarousel .carousel-control-prev,
  #photoCarousel .carousel-control-next {
    transition: none;
  }
  
  #photoCarousel .carousel-indicators button {
    transition: none;
  }
}

/* ============================================================================
   STYLES POUR L'UPLOAD DE PHOTOS UNE PAR UNE
   ============================================================================ */

/* Zone d'upload de photos */
.photo-upload-container {
  position: relative;
}

.photo-upload-container #photoInput {
  transition: all 0.3s ease;
}

.photo-upload-container #photoInput[style*="display: none"] {
  opacity: 0;
  pointer-events: none;
}

/* Bouton placeholder d'ajout de photo */
#addPhotoPlaceholder .btn {
  border: 2px dashed;
  background: rgba(0, 123, 255, 0.05);
  color: #007bff;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  font-weight: 500;
}

#addPhotoPlaceholder .btn:hover {
  background: rgba(0, 123, 255, 0.1);
  border-color: #0056b3;
  color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Style pour le formulaire d'édition (bouton vert) */
#addPhotoPlaceholder .btn-outline-success {
  border-color: #198754;
  background: rgba(25, 135, 84, 0.05);
  color: #198754;
}

#addPhotoPlaceholder .btn-outline-success:hover {
  background: rgba(25, 135, 84, 0.1);
  border-color: #146c43;
  color: #146c43;
  box-shadow: 0 4px 8px rgba(25, 135, 84, 0.2);
}

/* Prévisualisation des photos */
#photoPreviewContainer .col-6 {
  margin-bottom: 1rem;
}

#photoPreviewContainer .position-relative {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#photoPreviewContainer .position-relative:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Boutons de suppression */
#photoPreviewContainer .btn-danger {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#photoPreviewContainer .btn-danger:hover {
  opacity: 1;
}

/* Badges de numérotation */
#photoPreviewContainer .badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
}

/* Responsive pour l'upload de photos */
@media (max-width: 767.98px) {
  #photoPreviewContainer .col-6 {
    margin-bottom: 0.75rem;
  }
  
  #photoPreviewContainer .position-relative img {
    height: 100px !important;
  }
  
  #addPhotoButton .btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  #photoPreviewContainer .btn-danger {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #photoPreviewContainer .position-relative img {
    height: 110px !important;
  }
}

@media (min-width: 992px) {
  #photoPreviewContainer .position-relative img {
    height: 120px !important;
  }
}

/* Animation d'apparition des photos */
#photoPreviewContainer .col-6 {
  animation: fadeInUp 0.3s ease-out;
}

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

/* Support des préférences de mouvement réduit pour l'upload */
@media (prefers-reduced-motion: reduce) {
  #photoPreviewContainer .col-6 {
    animation: none;
  }
  
  #photoPreviewContainer .position-relative {
    transition: none;
  }
  
  #addPhotoButton .btn {
    transition: none;
  }
}