/* ============================================================================
   CSS per Import Feedback Messages
   Data: 22/01/2026
   Scopo: Stili per div #sync-message che mostra messaggi durante sincronizzazione
   ============================================================================ */

/* === STILE BASE MESSAGE === */
.import-feedback-message {
  position: relative !important;
  display: block !important;
  padding: 12px 48px 12px 12px !important;
  margin-bottom: 16px !important;
  border-left: 4px solid transparent !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* === COLORI PER TIPO === */
.import-feedback-message.alert-success {
  background-color: #d4edda !important;
  border-left-color: #28a745 !important;
  color: #155724 !important;
}

.import-feedback-message.alert-info {
  background-color: #d1ecf1 !important;
  border-left-color: #17a2b8 !important;
  color: #0c5460 !important;
}

.import-feedback-message.alert-warning {
  background-color: #fff3cd !important;
  border-left-color: #ffc107 !important;
  color: #856404 !important;
}

.import-feedback-message.alert-danger {
  background-color: #f8d7da !important;
  border-left-color: #dc3545 !important;
  color: #721c24 !important;
}

/* === BOTTONE CHIUSURA === */
.import-feedback-message .btn-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

.import-feedback-message .btn-close:hover {
  opacity: 0.75 !important;
}

/* === ELEMENTI INTERNI === */
.import-feedback-message strong {
  display: inline !important;
  font-weight: 600 !important;
}

.import-feedback-message small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  opacity: 0.9 !important;
}

.import-feedback-message ul {
  margin: 4px 0 0 20px !important;
  padding: 0 !important;
  list-style-type: disc !important;
}

.import-feedback-message ul li {
  margin: 2px 0 !important;
  padding: 0 !important;
}

/* === ICONE BOOTSTRAP === */
.import-feedback-message i.bi {
  display: inline !important;
  margin-right: 8px !important;
}

/* === BOX ERRORI/WARNING INTERNI === */
.import-feedback-message .border-danger,
.import-feedback-message .bg-danger {
  display: block !important;
  border-left: 4px solid #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.15) !important;
  padding: 8px 12px !important;
  margin-top: 4px !important;
  border-radius: 4px !important;
}

.import-feedback-message .border-warning,
.import-feedback-message .bg-warning {
  display: block !important;
  border-left: 4px solid #ffc107 !important;
  background-color: rgba(255, 193, 7, 0.15) !important;
  padding: 8px 12px !important;
  margin-top: 4px !important;
  border-radius: 4px !important;
}

/* Testo dentro box errori/warning */
.import-feedback-message .text-danger {
  color: #721c24 !important;
}

.import-feedback-message .text-warning {
  color: #856404 !important;
}

/* Liste dentro box errori/warning */
.import-feedback-message .border-danger ul,
.import-feedback-message .border-warning ul,
.import-feedback-message .bg-danger ul,
.import-feedback-message .bg-warning ul {
  display: block !important;
  margin: 4px 0 0 20px !important;
  padding: 0 !important;
  list-style-type: disc !important;
}

.import-feedback-message .border-danger ul li,
.import-feedback-message .border-warning ul li,
.import-feedback-message .bg-danger ul li,
.import-feedback-message .bg-warning ul li {
  display: list-item !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  list-style-position: outside !important;
}

/* Strong dentro box errori/warning */
.import-feedback-message .border-danger strong,
.import-feedback-message .border-warning strong,
.import-feedback-message .bg-danger strong,
.import-feedback-message .bg-warning strong {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

/* Div interni devono essere block */
.import-feedback-message div {
  display: block !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .import-feedback-message {
    padding: 12px 40px 12px 12px !important;
    font-size: 13px !important;
  }
  
  .import-feedback-message .btn-close {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ============================================================================
   NOTE:
   - Bordo sinistro colorato (4px) per distinguere tipo messaggio
   - Padding right aumentato (48px) per spazio bottone chiusura
   - Box shadow per risaltare
   - Supporto per box errori/warning interni (come da dataSync.js)
   ============================================================================ */