@import "tailwindcss";

@theme {
  /* Custom colors - migrated from tailwind.config.js */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #1e3c72;
  --color-primary-700: #16305c;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
}

/* Mobile image preview overlay */
#image-preview-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 30000 !important;
}
#image-preview-overlay.hidden{ display: none; }
#image-preview-overlay img{
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
#image-preview-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  padding: 0.5rem;
  border-radius: 9999px;
  z-index: 30001;
}

/* Make sensor / preview images full-width on mobile */
@media (max-width: 767px) {
  /* Target common modal/lightbox selectors and image containers used in the app */
  dialog, .modal, .image-modal, .image-lightbox, .lightbox, .fancybox-container, .glightbox, .blazor-modal, .overlay {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Make images fill available width while keeping aspect ratio */
  dialog img, .modal img, .image-modal img, .image-lightbox img, .lightbox img, .fancybox-container img, .glightbox img, .blazor-modal img, .card img, .content img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* If image is inside a centered container, make container full width */
  .image-preview-container, .sensor-image, .sensor-preview, .img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Ensure mobile sidebar overlays Leaflet controls */
@media (max-width: 767px) {
  #mobile-sidebar, #mobile-menu-overlay {
    position: fixed;
    z-index: 15000 !important;
  }
  .leaflet-top, .leaflet-bottom, .leaflet-control {
    z-index: 9000 !important;
  }
}

/* Ensure image previews / modals appear above Leaflet map and controls
   Add common modal/lightbox selectors used by various libraries/components */
dialog, .modal, .modal-backdrop, .image-modal, .image-lightbox, .lightbox, .fancybox-container, .glightbox, .blazor-modal, .overlay {
  position: fixed !important;
  z-index: 20000 !important;
}

/* Make Leaflet panes lower than modals to avoid stacking issues */
.leaflet-container, .leaflet-pane, .leaflet-map-pane, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane {
  z-index: 10000 !important;
}

/* Content sources for v4 - equivalent to content: [] in v3 config */
@source "./Components/**/*.razor";
@source "./wwwroot/**/*.html";
@source "./wwwroot/**/*.js";
@source "../DolfrangWeb.Client/**/*.razor";

/* Stili base */

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blazor Error Boundary */
.blazor-error-boundary {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #92400e;
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore."
}

/* Validation styles */
.validation-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.valid.modified:not([type=checkbox]) {
    border-color: #16a34a;
}

.invalid {
    border-color: #dc2626;
}

/* Focus styles */
*:focus-visible {
    outline: 2px solid #e11d48;
    outline-offset: 2px;
}

/* Loading state */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #e11d48;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: loading-progress 1.5s ease-in-out infinite;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #475569;
}

@keyframes loading-progress {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -20;
    }
    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -120;
    }
}