/* ============================================================
   Wildzählung – Custom Styles (ergänzend zu Tailwind)
   ============================================================ */

/* Safe Area für PWA (Notch etc.) */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

body {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* Kachel-Animations */
.kachel-pulse {
    animation: kachel-pulse 0.3s ease-out;
}

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

.kachel-shake {
    animation: kachel-shake 0.3s ease-out;
}

@keyframes kachel-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Counter Animation */
.count-up {
    animation: count-pop 0.2s ease-out;
    color: #4ade80;
}

.count-down {
    animation: count-pop 0.2s ease-out;
    color: #f87171;
}

@keyframes count-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* GPS-Pulse */
.gps-pulse {
    animation: gps-pulse 2s infinite;
}

@keyframes gps-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Offline-Badge */
.offline-badge {
    animation: offline-pulse 3s infinite;
}

@keyframes offline-pulse {
    0%, 100% { background-color: rgb(239 68 68 / 0.8); }
    50%      { background-color: rgb(239 68 68 / 0.4); }
}

/* Touch-optimierte Buttons */
.touch-btn {
    min-height: 48px;
    min-width: 48px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/* Verhindere Zoom bei Double-Tap */
* {
    touch-action: manipulation;
}

/* Karten-Container */
.map-container {
    height: 50vh;
    min-height: 300px;
}

/* Scrollbar-Styling (für Webkit) */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

/* Modal Tab Styles */
.active-tab {
    color: #4ade80;
    border-bottom: 2px solid #4ade80;
    background: rgba(74, 222, 128, 0.05);
}

/* Modal Backdrop */
#modal-overlay {
    transition: opacity 0.2s ease;
}
#modal-content {
    transition: transform 0.2s ease;
}

/* Gebiet-Tooltip auf Karte */
.gebiet-tooltip {
    background: rgba(13, 20, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.gebiet-tooltip::before {
    border-top-color: rgba(13, 20, 32, 0.85) !important;
}

/* Leaflet Controls – Dark Theme */
.leaflet-control-zoom a,
.leaflet-draw-toolbar a,
.leaflet-draw-actions a {
    background-color: rgba(21, 30, 50, 0.9) !important;
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.leaflet-control-zoom a:hover,
.leaflet-draw-toolbar a:hover {
    background-color: rgba(45, 61, 96, 0.9) !important;
}
.leaflet-draw-actions {
    background: rgba(21, 30, 50, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.leaflet-draw-actions li a {
    background: transparent !important;
    color: #e5e7eb !important;
}
.leaflet-draw-actions li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* PWA Install Banner */
.install-banner {
    animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* View Transitions */
.view-enter {
    animation: view-slide-in 0.2s ease-out;
}

@keyframes view-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tablet: 3-Column Kachel-Grid */
@media (min-width: 640px) {
    .kachel-grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}