/* Fitness Center Management - Custom Styles */

/* ============================================
   CALENDARIO - MIGLIORAMENTO MOBILE
   ============================================ */

/* Stili di base per il calendario */
.calendar-cell {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.calendar-cell.has-data {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981 !important;
}

.calendar-cell:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Desktop - dimensioni standard */
@media (min-width: 768px) {
  .calendar-cell {
    min-height: 100px;
    padding: 1rem !important;
  }
  
  .calendar-cell .font-semibold {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 0.25rem;
  }
  
  .calendar-cell .text-sm {
    font-size: 0.875rem; /* 14px */
  }
}

/* Mobile - testo più grande e leggibile */
@media (max-width: 767px) {
  /* Celle del calendario più grandi su mobile */
  .calendar-cell {
    min-height: 70px;
    padding: 0.5rem !important;
  }
  
  /* Numero del giorno - più grande e leggibile */
  .calendar-cell .font-semibold {
    font-size: 1.25rem !important; /* 20px - era 18px */
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    color: #1f2937 !important;
  }
  
  /* Importo in euro - più grande e leggibile */
  .calendar-cell .text-sm {
    font-size: 0.9rem !important; /* 14.4px - era 14px */
    font-weight: 600 !important;
    color: #374151 !important;
  }
  
  /* Header giorni settimana - più grande */
  .grid.grid-cols-7.gap-2.mb-2 > div {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
  }
  
  /* Riduco padding del contenitore calendario su mobile */
  .bg-white.rounded-lg.shadow-lg.border-2.border-black.p-6 {
    padding: 1rem !important;
  }
  
  /* Gap più piccolo tra le celle su mobile */
  .grid.grid-cols-7.gap-2 {
    gap: 0.375rem !important; /* 6px invece di 8px */
  }
}

/* Mobile small (iPhone SE, etc.) - ulteriore ottimizzazione */
@media (max-width: 375px) {
  .calendar-cell {
    min-height: 60px;
    padding: 0.375rem !important;
  }
  
  .calendar-cell .font-semibold {
    font-size: 1.125rem !important; /* 18px */
  }
  
  .calendar-cell .text-sm {
    font-size: 0.8rem !important; /* 12.8px */
  }
  
  .grid.grid-cols-7.gap-2 {
    gap: 0.25rem !important; /* 4px */
  }
}

/* ============================================
   METRICHE MENSILI - MIGLIORAMENTO MOBILE
   ============================================ */

@media (max-width: 767px) {
  /* KPI cards - testo più leggibile */
  .text-3xl {
    font-size: 2rem !important; /* 32px invece di 30px */
  }
  
  .text-4xl {
    font-size: 2.5rem !important; /* 40px invece di 36px */
  }
  
  /* Percentuali di confronto */
  .text-sm.text-green-600,
  .text-sm.text-red-600,
  .text-sm.text-gray-500 {
    font-size: 0.9rem !important; /* 14.4px */
    font-weight: 600 !important;
  }
}

/* ============================================
   TABELLE - MIGLIORAMENTO MOBILE
   ============================================ */

@media (max-width: 767px) {
  /* Testo tabelle più leggibile */
  table {
    font-size: 0.875rem !important; /* 14px */
  }
  
  table th {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 0.5rem !important;
  }
  
  table td {
    padding: 0.75rem 0.5rem !important;
  }
  
  /* Importi in tabella più grandi */
  table td.font-bold {
    font-size: 0.9375rem !important; /* 15px */
  }
}

/* ============================================
   FORM E INPUT - MIGLIORAMENTO MOBILE
   ============================================ */

@media (max-width: 767px) {
  /* Input e textarea più grandi su mobile */
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* Previene zoom automatico su iOS */
    padding: 0.75rem !important;
  }
  
  /* Bottoni più grandi e touch-friendly */
  button {
    min-height: 44px; /* Apple HIG raccomandazione */
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Bottone Esporta CSV - più grande e visibile su mobile */
  button.bg-green-600,
  button.bg-green-700 {
    font-size: 1.0625rem !important; /* 17px */
    font-weight: 600 !important;
    padding: 0.875rem 1.25rem !important;
    min-height: 48px;
    width: 100%; /* Full width su mobile */
  }
  
  button.bg-green-600 i,
  button.bg-green-700 i {
    font-size: 1.125rem !important; /* 18px icon */
  }
  
  /* Su desktop torna alla larghezza automatica */
  @media (min-width: 768px) {
    button.bg-green-600,
    button.bg-green-700 {
      width: auto;
    }
  }
  
  /* Label più leggibili */
  label {
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 600 !important;
  }
}

/* ============================================
   SEARCH INPUT - MOBILE FIX
   ============================================ */

@media (max-width: 767px) {
  /* Fix icona search sovrapposta al testo */
  .relative input[type="text"] {
    padding-left: 2.75rem !important; /* Più spazio a sinistra per l'icona */
  }
  
  /* Centra verticalmente l'icona */
  .relative .fa-search {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0.875rem !important; /* 14px */
  }
}

/* ============================================
   EMAIL MANAGEMENT - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 767px) {
  /* Lista email autorizzate - layout verticale compatto */
  .space-y-2 > div {
    padding: 0.75rem !important;
  }
  
  /* Email card - layout mobile friendly */
  .space-y-2 > div > div.flex {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* Bottoni azioni email - stack verticale su mobile */
  .space-y-2 > div > div.flex > div.flex.gap-2 {
    flex-direction: row !important;
    width: 100%;
    justify-content: flex-end;
    gap: 0.5rem !important;
  }
  
  /* Bottoni azioni - dimensioni ottimizzate */
  .space-y-2 button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.75rem !important;
  }
  
  /* Email e informazioni - più leggibili */
  .space-y-2 p.font-medium {
    font-size: 0.9375rem !important; /* 15px */
    word-break: break-word;
  }
  
  /* Badge ruolo e palestra - wrap su più righe */
  .space-y-2 .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
  }
  
  /* Text info aggiunto - più leggibile */
  .space-y-2 p.text-xs {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  /* Icone email - dimensione fissa */
  .space-y-2 i.fa-envelope {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   GENERAL MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 767px) {
  /* Titoli sezione più leggibili */
  h1 {
    font-size: 1.75rem !important; /* 28px */
  }
  
  h2 {
    font-size: 1.5rem !important; /* 24px */
  }
  
  h3 {
    font-size: 1.25rem !important; /* 20px */
  }
  
  /* Card padding ottimizzato */
  .bg-white.rounded-lg.shadow-lg {
    padding: 1rem !important;
  }
  
  /* Icons più grandi */
  .fas, .far {
    font-size: 1.1em !important;
  }
}

/* ============================================
   ACCESSIBILITY - TOUCH TARGETS
   ============================================ */

@media (max-width: 767px) {
  /* Minimo 44x44px per elementi cliccabili (iOS HIG) */
  button,
  a.button,
  .calendar-cell,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Spazio tra elementi cliccabili */
  button + button,
  a + a {
    margin-left: 0.5rem;
  }
}