/**
 * SweetAlert2 Custom Theme
 * Schema colori: Nero (#111827), Bianco (#ffffff), Silver (#9ca3af)
 */

/* Popup container */
.swal-app-popup {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  padding: 2rem !important;
}

/* Title */
.swal-app-title {
  color: #111827 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

/* Text content */
.swal-app-text {
  color: #374151 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Confirm button - Nero */
.swal-app-confirm-button,
.swal2-confirm {
  background-color: #111827 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.swal-app-confirm-button:hover,
.swal2-confirm:hover {
  background-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.swal-app-confirm-button:active,
.swal2-confirm:active {
  transform: translateY(0) !important;
}

/* Cancel button - Silver */
.swal-app-cancel-button,
.swal2-cancel {
  background-color: #e5e7eb !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
}

.swal-app-cancel-button:hover,
.swal2-cancel:hover {
  background-color: #d1d5db !important;
  border-color: #9ca3af !important;
  transform: translateY(-1px) !important;
}

.swal-app-cancel-button:active,
.swal2-cancel:active {
  transform: translateY(0) !important;
}

/* Deny button - Rosso (per delete/distruttive) */
.swal-app-deny-button,
.swal2-deny {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.75rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
}

.swal-app-deny-button:hover,
.swal2-deny:hover {
  background-color: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
}

.swal-app-deny-button:active,
.swal2-deny:active {
  transform: translateY(0) !important;
}

/* Icon colors - mantieni i colori standard ma raffina */
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #dc2626 !important;
}

.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
  border-color: #6b7280 !important;
  color: #6b7280 !important;
}

/* Close button */
.swal2-close {
  color: #6b7280 !important;
  font-size: 2rem !important;
  transition: all 0.2s ease !important;
}

.swal2-close:hover {
  color: #111827 !important;
}

/* Loader/Progress bar */
.swal2-timer-progress-bar {
  background-color: #111827 !important;
}

/* HTML container spacing */
.swal2-html-container {
  margin: 1rem 0 !important;
}

/* Input fields in Swal */
.swal2-input,
.swal2-textarea {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
  border-color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1) !important;
  outline: none !important;
}

/* Validation message */
.swal2-validation-message {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  border-radius: 6px !important;
}

/* Toast notifications */
.swal2-toast {
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.swal2-toast .swal2-title {
  color: #111827 !important;
  font-size: 0.875rem !important;
}

/* Footer */
.swal2-footer {
  border-top: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
  padding-top: 1rem !important;
  margin-top: 1rem !important;
}

/* Actions container spacing */
.swal2-actions {
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
}

/* Responsiveness */
@media (max-width: 640px) {
  .swal-app-popup {
    padding: 1.5rem !important;
  }

  .swal-app-title {
    font-size: 1.25rem !important;
  }

  .swal-app-text {
    font-size: 0.875rem !important;
  }

  .swal-app-confirm-button,
  .swal-app-cancel-button,
  .swal-app-deny-button,
  .swal2-confirm,
  .swal2-cancel,
  .swal2-deny {
    padding: 0.625rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* Loan request date picker -------------------------------------------------
 * Flatpickr used to append an absolute calendar to <body>, which let it cover
 * the second field and modal actions. The calendar now stays in the popup's
 * flow; only the popup scrolls when the viewport is short. */
html.swal2-shown,
body.swal2-shown {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.loan-request-popup {
  width: min(42rem, calc(100vw - 2rem)) !important;
  max-height: calc(100vh - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  padding: 1.6rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.loan-request-popup .swal2-title {
  padding: .2rem 0 1.25rem !important;
  color: var(--text-color, #0f172a) !important;
  font-family: var(--sans, Inter, system-ui, sans-serif) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  text-align: left !important;
}

.loan-request-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--text-color, #0f172a) !important;
}

.loan-request-form,
.loan-request-field {
  display: grid;
}

.loan-request-form {
  gap: 1.15rem;
}

.loan-request-field {
  gap: .45rem;
}

.loan-request-label {
  color: var(--text-color, #0f172a);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: left;
}

.loan-request-popup .flatpickr-wrapper {
  display: block;
  width: 100%;
}

.loan-request-popup .loan-date-input,
.loan-request-popup .flatpickr-wrapper > input.input {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: .7rem .8rem !important;
  border: 1px solid var(--border-color, #e5e7eb) !important;
  border-radius: 8px !important;
  background: var(--white, #fdfcfd) !important;
  color: var(--text-color, #0f172a) !important;
  font-family: var(--sans, Inter, system-ui, sans-serif) !important;
  font-size: .95rem !important;
  box-shadow: none !important;
}

.loan-request-popup .flatpickr-wrapper > input.input:focus {
  border-color: var(--primary-color, #d70161) !important;
  outline: 3px solid color-mix(in srgb, var(--primary-color, #d70161) 18%, transparent) !important;
  outline-offset: 1px !important;
}

.loan-request-popup .flatpickr-calendar.static {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  margin: .55rem auto .1rem !important;
  transform: none !important;
}

.loan-request-popup .flatpickr-calendar.static::before,
.loan-request-popup .flatpickr-calendar.static::after {
  display: none !important;
}

.loan-request-note {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: 0;
  color: color-mix(in srgb, var(--text-color, #0f172a) 72%, var(--white, #fdfcfd));
  font-size: .8rem;
  line-height: 1.5;
  text-align: left;
}

.loan-request-note i {
  margin-top: .18rem;
  color: var(--primary-color, #d70161);
}

.loan-request-actions {
  justify-content: flex-start !important;
  gap: .65rem !important;
  margin: 1.4rem 0 0 !important;
}

.loan-request-actions .swal2-confirm,
.loan-request-actions .swal2-cancel {
  min-height: 44px;
  margin: 0 !important;
  padding: .7rem 1rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: .875rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.loan-request-actions .swal2-confirm {
  background: var(--button-color, #d70262) !important;
  color: var(--button-text-color, #fdfcfd) !important;
}

.loan-request-actions .swal2-confirm:hover {
  background: color-mix(in srgb, var(--button-color, #d70262) 88%, #111827) !important;
  transform: translateY(-1px) !important;
}

.loan-request-actions .swal2-cancel {
  background: color-mix(in srgb, var(--text-color, #0f172a) 6%, var(--white, #fdfcfd)) !important;
  color: var(--text-color, #0f172a) !important;
}

.loan-request-actions .swal2-cancel:hover {
  background: color-mix(in srgb, var(--text-color, #0f172a) 10%, var(--white, #fdfcfd)) !important;
  transform: none !important;
}

@media (max-width: 420px) {
  .loan-request-popup {
    width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    padding: 1rem !important;
  }

  .loan-request-popup .flatpickr-calendar.static,
  .loan-request-popup .flatpickr-rContainer,
  .loan-request-popup .flatpickr-days,
  .loan-request-popup .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .loan-request-popup .flatpickr-day {
    max-width: none !important;
    flex-basis: 14.2857% !important;
  }

  .loan-request-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .loan-request-actions .swal2-confirm,
  .loan-request-actions .swal2-cancel {
    width: 100%;
  }
}