@import "tailwindcss";

@import "klaro/dist/klaro.min.css";

@import "./fonts.css";
@import "./icons.css";
@import "./theme.css";

@import "./base.css";
@import "./components.css";
@import "./utilities.css";
@import "./utility.css";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
    themes: winter --default, dracula --prefersdark;
    root: ":root";
    prefix: 'd-';
    logs: true;
}

/* make dark: selector of tailwind available */
@custom-variant dark (&:where([data-theme=dracula], [data-theme=dracula] *));

@plugin "daisyui/theme" {
    name: "winter";
    default: true;
    --color-primary: oklch(0.84 0.18 117.33);
    --color-warning: oklch(0.581 0.203 26.288);
    --color-base-300: oklch(70.4% 0.04 256.788);
}
@plugin "daisyui/theme" {
    name: "dracula";
    --color-primary: oklch(0.84 0.18 117.33);
    --color-warning: oklch(0.581 0.203 26.288);
    --tab-border-color: white !important;
    --tabs-border-color: white !important;
    --color-base-300: white;
}



.d-checkbox {
   @apply rounded-sm;
}

@import "leaflet/dist/leaflet.css";
/* 1. Der Container MUSS diese Klasse haben und Platz einnehmen */
.leaflet-map-container {
    height: 400px !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
}

/* 2. DAS ENTSCHEIDENDE: Kacheln müssen absolut positioniert sein */
/* Wenn das Leaflet-CSS nicht greift, machen wir es hier manuell */
.leaflet-tile {
    position: absolute !important;
    left: 0;
    top: 0;
    user-select: none;
    -webkit-user-drag: none;
}

/* 3. Verhindere, dass Tailwind die Kacheln staucht */
.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
    width: auto;
    height: auto;
}

/* 4. Layer-Stapelung fixen */
.leaflet-tile-pane { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
/* Fix für die Kachel-Positionierung */
.leaflet-tile-pane {
    z-index: 2;
}

/* Stelle sicher, dass die Marker-Ebene immer obenauf liegt */
.leaflet-marker-pane {
    z-index: 600 !important;
}

.leaflet-tile-pane {
    z-index: 200 !important;
}

/* Der !important-Hammer für CSP-Umgebungen */
#map .leaflet-marker-icon,
#map .leaflet-marker-shadow,
div[data-controller="map"] .leaflet-marker-icon {
    width: 25px !important;
    height: 41px !important;
    max-width: none !important;
    max-height: none !important;
    /* Sicherstellen, dass das Bild nicht als Block das Layout verschiebt */
    display: block !important;
}

/* Falls das Schatten-Icon eine andere Größe hat */
#map .leaflet-marker-shadow {
    width: 41px !important;
    height: 41px !important;
}