/**
 * CSS Fixes
 * Risolve conflitti tra diversi file CSS
 */

/* 
 * Fix per il conflitto user-avatar tra header.css e item-card.css
 * - Nel header.css: .user-avatar ha dimensioni 42x42px
 * - Nel item-card.css: .user-avatar ha dimensioni 28x28px
 */

/* Ripristiniamo lo stile corretto per l'avatar utente nell'header */
.header .user-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: var(--spacing-sm);
  border: none;
  cursor: pointer;
}

/* Rinominiamo la classe nell'item-card per evitare conflitti */
.card-user .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: auto;
}

/*
 * Fix per il conflitto tra .user-avatar nella pagina offers e header
 * - Rinominata in .offer-user-avatar nella pagina offers/list.php
 * - Rinominata in .exchange-user-avatar nella pagina offers/exchange-details.php
 */

/* Aggiorniamo anche il menu utente per garantire che sia visibile */
#userMenuDropdown.visible {
  display: flex !important;
}

/* 
 * Fix per migliorare il contrasto e l'usabilità del menu utente 
 */
.user-menu-dropdown {
  border: 1px solid #eee;
}

.user-menu-header {
  background-color: #81cdc7;
  color: white;
}

/* Stile hover per evidenziare meglio le voci selezionate */
.user-menu-item a:hover {
  background-color: rgba(129, 205, 199, 0.1);
}

/* Fix specifico per la pagina di scambio con griglia unificata */
.exchange-container-unified {
    max-width: 550px !important;
    margin: 0 auto !important;
}

/* Fix per il gap specifico nella pagina di scambio */
.exchange-container-flex {
    gap: 5px !important;
}

/* Fix specifico per la visualizzazione uniforme nella pagina di scambio */
.uniform-view .item-card {
    width: 110px !important;
    height: 200px !important;
    margin: 0 !important;
}

@media (max-width: 480px) {
    .uniform-view .unified-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 360px !important;
    }
}

@media (max-width: 360px) {
    .uniform-view .unified-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 240px !important;
    }
}