.trackanalyzer-app-wrapper {
    position: relative;
    height: 100%;
    margin: 0;
    background: #f5f5f5;
}

#map {
    position: relative;
    height: 100%;
}

/* Sliding panel */
#trackPanel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #e9ecef;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1001;
}


#trackPanel.open {
    transform: translateX(0);
}

/* Panel Overlay */
#trackPanel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* halbtransparentes Grau */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500; /* über Panel-Inhalt */
}

/* Spinner */
#trackPanel-overlay .spinner {
    border: 4px solid #f3f3f3; /* hellgrau */
    border-top: 4px solid #007bff; /* blau */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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


#panelToggleBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
}

#recordOverlayBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.4; }
}

@media screen and (max-width: 400px) {
    th {
        font-size: 10px;
    }

    td {
        font-size: 10px;
    }
}