@import "tailwindcss";

@import "application.css";
@import "leaflet.min.css";
@import "leaflet.fullscreen.min.css";
.leaflet-fullscreen-icon {
	background-image: url(/assets/images/icon-fullscreen.svg);
	background-size: 26px 52px;
}

.leaflet-fullscreen-icon.leaflet-fullscreen-on {
	background-position: 0 -26px;
}

.leaflet-touch .leaflet-fullscreen-icon {
	background-position: 2px 2px;
}

.leaflet-touch .leaflet-fullscreen-icon.leaflet-fullscreen-on {
	background-position: 2px -24px;
}

/* Safari still needs this vendor-prefix: https://caniuse.com/mdn-css_selectors_fullscreen */
/* stylelint-disable-next-line selector-no-vendor-prefix */
.leaflet-container:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
	z-index: 99999;
}

.leaflet-container:fullscreen {
	width: 100% !important;
	height: 100% !important;
	z-index: 99999;
}

.leaflet-pseudo-fullscreen {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 99999;
}
.leaflet-container:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  z-index: 9999; /* Pour s'assurer qu'elle est au-dessus de 
      tout */
}
.leaflet-container:-moz-full-screen {
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}
.leaflet-container:-ms-full-screen {
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}
.leaflet-container:full-screen {
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}
.leaflet-container.leaflet-fullscreen-on {
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ====== Cluster Marker Styling ====== */

.cluster-marker-wrapper {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.cluster-icon {
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  border: 4px solid white;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  position: relative;
  box-shadow:
    0 0 0 3px rgba(6, 182, 212, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.cluster-icon:hover {
  transform: scale(1.15);
  box-shadow:
    0 0 0 3px rgba(6, 182, 212, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.6);
}

.cluster-icon-emoji {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 3px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.cluster-icon-badge {
  font-size: 13px;
  font-weight: 900;
  min-width: 24px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.98);
  color: #06B6D4;
  border-radius: 50%;
  padding: 2px 4px;
  line-height: 1.1;
  border: 2px solid #06B6D4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cluster-small {
  background: linear-gradient(135deg, #06B6D4, #0891B2);
}

.cluster-small .cluster-icon-emoji {
  font-size: 28px;
}

.cluster-small .cluster-icon-badge {
  color: #06B6D4;
  border-color: #06B6D4;
}

.cluster-medium {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.cluster-medium:hover {
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.6);
}

.cluster-medium .cluster-icon-emoji {
  font-size: 32px;
}

.cluster-medium .cluster-icon-badge {
  color: #F59E0B;
  border-color: #F59E0B;
  font-size: 14px;
}

.cluster-large {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.cluster-large:hover {
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.6);
}

.cluster-large .cluster-icon-emoji {
  font-size: 36px;
}

.cluster-large .cluster-icon-badge {
  color: #EF4444;
  border-color: #EF4444;
  font-size: 15px;
}

/* Popup styling */
.device-popup,
.shipment-cluster-popup {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 6px;
}

.device-popup strong,
.shipment-cluster-popup strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.device-popup small,
.shipment-cluster-popup small {
  display: block;
  margin: 3px 0;
  font-size: 12px;
  color: #555;
}

/* Leaflet cluster animation */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease;
}

/* Ensure cluster icons are visible on top */
.leaflet-marker-icon.cluster-marker-wrapper {
  z-index: 400 !important;
}

/* Layer control styling */
.leaflet-control-layers-list {
  max-height: 300px;
  overflow-y: auto;
}