/* Zusätzliche Custom Styles für die App */

/* Karten-Anpassungen */
.leaflet-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.damage-marker {
    background: none !important;
    border: none !important;
}

.village-area {
    pointer-events: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* Status Badges */
.status-badge {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
}

.status-gemeldet {
    @apply bg-yellow-100 text-yellow-800;
}

.status-in_bearbeitung {
    @apply bg-blue-100 text-blue-800;
}

.status-behoben {
    @apply bg-green-100 text-green-800;
}

/* Urgency Badges */
.urgency-badge {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
}

.urgency-niedrig {
    @apply bg-green-100 text-green-800;
}

.urgency-mittel {
    @apply bg-yellow-100 text-yellow-800;
}

.urgency-hoch {
    @apply bg-red-100 text-red-800;
}

/* Loading Spinner */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form Validation */
.field-error {
    @apply text-red-500 text-sm mt-1;
}

input.error, select.error, textarea.error {
    @apply border-red-500 ring-1 ring-red-500;
}

input.success, select.success, textarea.success {
    @apply border-green-500 ring-1 ring-green-500;
}

/* Card Hover Effects */
.card-hover {
    @apply transition-all duration-200;
}

.card-hover:hover {
    @apply transform -translate-y-1 shadow-lg;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
    .dark-mode-invert {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }
}

/* Custom Utilities */
.gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

/* Tooltip Styles */
.custom-tooltip {
    @apply relative;
}

.custom-tooltip:hover::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-50;
}

/* Transition Classes */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Focus Styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

/* Custom Checkbox and Radio */
.custom-checkbox {
    @apply h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500;
}

.custom-radio {
    @apply h-5 w-5 border-gray-300 text-blue-600 focus:ring-blue-500;
}




#map * {
    box-sizing: content-box !important;
}

.leaflet-container {
    background: #f8f9fa !important;
}

/* Sicherstellen, dass Karte sichtbar ist */
#map:empty::after {
    content: "Karte wird geladen...";
    display: block;
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}