/* =========================================================
   UPLOAD MODAL (BASE + UPLOAD + ETICHETTE)
   coerente con cliente.css ma isolato SOLO nel modale
   File: css/upload_modal.css
   ========================================================= */

/* =========================
   OVERLAY + ANIMAZIONE
   ========================= */
#uploadModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

#uploadModalOverlay[aria-hidden="false"]{ display:flex; }

#uploadModalOverlay[aria-hidden="false"] > div{
  animation: htSlideUp .25s ease;
}
@keyframes htSlideUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================
   MODALE BASE (.ht-*)
   ========================= */
#uploadModalOverlay .ht-modal{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

#uploadModalOverlay .ht-modal-body{
  padding: 14px 16px 16px;
}

#uploadModalOverlay .ht-modal-section{
  margin-bottom: 14px;
}

#uploadModalOverlay .ht-modal-label{
  font-weight: 700;
  margin-bottom: 8px;
  color:#111827;
}

#uploadModalOverlay .ht-hint,
#uploadClienteHint,
#uploadTipoCapelliHint,
#uploadEtichetteHint{
  font-size: .875rem;
  color: #6b7280;
  margin: 8px 0;
}

/* =========================
   INPUT / SELECT dentro MODALE
   (evita font diverso / zoom iOS)
   ========================= */
#uploadModalOverlay input,
#uploadModalOverlay select,
#uploadModalOverlay button{
  font-family: inherit;
}

#uploadModalOverlay select{
  font-size: 16px; /* evita zoom iOS */
}

/* =========================
   DISCLOSURE BUTTON (Tutti clienti / Etichette)
   ========================= */
#uploadModalOverlay .ht-disclosure,
#uploadClienteOtherToggle,
#uploadEtichetteToggle{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-top: 10px;
  background: #f9fafb;
  color: #111827;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}

#uploadModalOverlay .ht-disclosure:hover,
#uploadClienteOtherToggle:hover,
#uploadEtichetteToggle:hover{
  background:#f3f4f6;
}

#uploadModalOverlay .ht-disclosure .chev,
#uploadClienteOtherToggle .chev,
#uploadEtichetteToggle .chev{
  transition: transform .18s ease;
}

#uploadModalOverlay .ht-disclosure[aria-expanded="true"] .chev,
#uploadClienteOtherToggle[aria-expanded="true"] .chev,
#uploadEtichetteToggle[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

/* =========================
   GRIGLIE SCELTE (lunghezza / tipo capelli / clienti oggi)
   ========================= */

/* anti-override: se qualche css esterno ti fa casino sopra 480px */
#uploadModalOverlay .ht-choice-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#uploadModalOverlay .ht-choice{
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}

#uploadModalOverlay .ht-choice input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#uploadModalOverlay .ht-choice span{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-weight: 600;
  color:#111827;
  background:#fff;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

#uploadModalOverlay .ht-choice span:hover{
  border-color:#9ca3af;
}

#uploadModalOverlay .ht-choice input:checked + span{
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}

#uploadModalOverlay .ht-choice input:checked + span::before{
  content:"✓";
  font-weight: 900;
}


}

/* =========================
   SEZIONE CLIENTI (quick grid + select)
   ========================= */
#uploadModalOverlay #uploadClienteQuickGrid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 360px){
  #uploadModalOverlay #uploadClienteQuickGrid{
    grid-template-columns: 1fr;
  }
}

#uploadClienteOtherSection{ margin-top: 12px; }

#uploadClienteSelect{
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
}

/* =========================
   ETICHETTE (CHIPS) - COMPLETO
   ========================= */
#uploadEtichetteSection{
  margin-top: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* contenitore chips */
#uploadModalOverlay .chips-box{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  margin: 0;
}

#uploadModalOverlay .chips-title{
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  margin-bottom: 0.75rem;
}

#uploadModalOverlay .chips-list{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

#uploadModalOverlay .chip{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  padding: .375rem .75rem;
  border-radius: 16px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  font-size: .75rem;
  font-weight: 500;
  color: #374151;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

#uploadModalOverlay .chip:hover{
  background:#e5e7eb;
}

#uploadModalOverlay .chip-x{
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: .875rem;
  padding: 0;
  line-height: 1;
}

#uploadModalOverlay .chip-x:hover{
  color: #6b7280;
}

#uploadModalOverlay .chips-add{
  display:flex;
  align-items:center;
  gap: .75rem;
  flex-wrap: wrap;
}

#uploadModalOverlay .chips-input{
  flex: 1;
  min-width: 200px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 12px;
  font-size: 16px; /* no zoom iOS */
}

#uploadModalOverlay .chips-button{
  background: #111827;
  border: 1px solid #111827;
  color:#fff;
  border-radius: 10px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight: 700;
}

#uploadModalOverlay .chips-button:hover{
  background:#1f2937;
  border-color:#1f2937;
}

#uploadModalOverlay .chips-suggest-title{
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
  margin: 1rem 0 .5rem;
}

#uploadModalOverlay .chips-suggest{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#uploadModalOverlay .chip.suggest{
  background:#f9fafb;
  border: 1px dashed #d1d5db;
  cursor:pointer;
}

#uploadModalOverlay .chip.suggest:hover{
  background:#f3f4f6;
  border-color:#9ca3af;
}

#uploadModalOverlay .chips-more{
  display:flex;
  gap: .75rem;
  margin-top: .75rem;
}

#uploadModalOverlay .chips-more-btn{
  background:#f9fafb;
  border:1px solid #d1d5db;
  color:#374151;
  font-size:.75rem;
  padding:.5rem .75rem;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 600;
}

#uploadModalOverlay .chips-more-btn:hover{
  background:#f3f4f6;
  border-color:#9ca3af;
}

#uploadModalOverlay .chips-more-btn.secondary{
  background:#fff;
  color:#6b7280;
}

@media (max-width: 480px){
  #uploadModalOverlay .chips-more{
    flex-direction: column;
    align-items: stretch;
  }
  #uploadModalOverlay .chips-add{
    flex-direction: column;
    align-items: stretch;
  }
  #uploadModalOverlay .chips-input{
    min-width: auto;
  }
}

/* =========================
   COLLABORATORI (anti-stacking)
   ========================= */
#uploadModalOverlay .collaboratori-checkboxes,
#uploadModalOverlay .collaboratori-checkboxes *{
  box-sizing: border-box;
}

/* se il tuo JS crea label senza classi, questo salva tutto */
#uploadModalOverlay .collaboratori-checkboxes label{
  display:flex !important;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 8px;
  background:#fff;
  cursor:pointer;
}

/* se invece hai già .collaboratore-item, ok uguale */
#uploadModalOverlay .collaboratore-item{
  display:flex !important;
  align-items:center;
  gap: 10px;
}

/* evita che span/label vengano forzati a block da altri css */
#uploadModalOverlay .collaboratori-checkboxes span{
  display:inline !important;
}

/* =========================
   AZIONI (Annulla / Aggiungi)
   ========================= */
#uploadModalOverlay .ht-modal-actions{
  display:flex !important;
  gap: 10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap: nowrap;
  margin-top: 10px;
}

#uploadModalCancel,
#uploadModalConfirm{
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
}

#uploadModalCancel{
  flex: 1;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}
#uploadModalCancel:hover{ background:#e5e7eb; }

#uploadModalConfirm{
  flex: 2;
  border: none;
  border-radius: 10px;
  color:#fff;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#uploadModalConfirm:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

#uploadModalConfirm:disabled{
  opacity:.5;
  cursor:not-allowed;
  filter: grayscale(1);
  box-shadow: none;
}

/* microschermi: bottoni in colonna */
@media (max-width: 360px){
  #uploadModalOverlay .ht-modal-actions{
    flex-direction: column;
    align-items: stretch;
  }
  #uploadModalCancel,
  #uploadModalConfirm{
    width: 100%;
  }
}

/* =========================
   Mobile padding overlay
   ========================= */
@media (max-width: 768px){
  #uploadModalOverlay{ padding: 10px; }
}



/* =========================
   HOTFIX: loginbar.css non deve rendere “vuoti” i bottoni del modale
   ========================= */

#uploadModalOverlay button{
  font-size: 14px !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
}

#uploadModalOverlay button span{
  display: inline !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* I “bottoni cliente” nella quick grid sono label.ht-choice > span */
#uploadModalOverlay .ht-choice span{
  color: #111827 !important;
}