/* Responsive CSS für TrackPilot */

/* 
 * Generelle Regeln für die gesamte Seite
 */
@media (max-width: 1024px) {
    .container {
        padding: 15px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}

/* 
 * Medium devices (tablets, less than 992px)
 */
@media (max-width: 991px) {
    /* Navigation wird angepasst */
    body {
        flex-direction: column !important;
        font-size: 15px;
    }
    
    /* Seitennavigation anpassen */
    .side-nav {
        width: 100% !important;
        height: 40px !important;
        position: fixed !important;
        z-index: 1200 !important;
    }
    
    .nav-header {
        padding: 5px 5px !important;
        height: 40px !important;
        border-bottom: none !important;
        justify-content: flex-start !important;

    }
    
    .nav-title {
        margin-left: 5px !important;
        font-size: 1.1em !important;
    }
    
    /* Desktop-Toggle verstecken */
    .nav-toggle {
        display: none !important;
    }
    
    /* Mobile-Menü anzeigen */
    .mobile-menu-toggle {
        display: block !important;
        position: absolute !important;
        right: 10px !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
        color: white !important;
        padding: 5px !important;
        font-size: 20px !important;
    }
    
    /* Navigationslinks anpassen */
    .nav-links {
        position: fixed !important;
        top: 40px !important;
        left: -100% !important;
        width: 250px !important;
        height: calc(100vh - 40px) !important;
        background-color: #2c3e50 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        padding-top: 10px !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2) !important;
        z-index: 1201 !important;
    }
    
    .nav-links.show {
        left: 0 !important;
    }
    
    /* Hauptinhalt anpassen */
    .main-content {
        margin-left: 0 !important;
        margin-top: 50px !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Anpassung für Kartenstil und Größe */
    #route-map, #heatmap {
        height: 300px;
    }
    
    /* Vollbild-Button Positionierung anpassen */
    .fullscreen-button {
        top: 10px;
        left: 10px;
    }
    
    /* Visibility-Toggle ausblenden auf Mobilgeräten */
    .card-toggle, 
    .route-actions,
    .menu-dropdown {
        display: none !important;
    }
    .stats-grid {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        font-size: 12px;

    }
    .stat-card {
        padding: 10px !important;
    }
}

/* 
 * Small devices (phones, less than 768px)
 */
@media (max-width: 767px) {
    /* Überschriften anpassen */
    h1 {
        font-size: 1.6em;
    }
    
    h2 {
        font-size: 1.3em;
    }
    
    /* Auf mobilen Geräten sollen alle größeren Elemente untereinander angeordnet sein */
    .bike-grid,
    .chart-section,
    .detailed-stats {
        display: block !important;
    }
    
    /* Statistik-Kacheln anpassen - 2 nebeneinander 
    .route-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }*/
    
    .stat-box {
        width: calc(50% - 8px) !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
        min-width: unset !important;
        flex-direction: column !important;
    }
    
    .stat-box i {
        font-size: 1.3em !important;
        margin-bottom: 5px !important;
    }
    
    .stat-box span {
        font-size: 1.1em !important;
    }
    
    .bike-card {
        flex-direction: column;
        margin-bottom: 20px;
    }
    
    .bike-content, 
    .bike-image-container,
    .stat-category {
        margin-bottom: 10px;
        width: auto !important;
    }
    
    /* Profile Styles */
    .profile-container {
        grid-template-columns: 1fr !important;
    }
    
    .profile-sidebar,
    .profile-content {
        grid-column: 1 !important;
    }
    
    .profile-card,
    .profile-form,
    .challenge-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .challenges-grid {
        display: block !important;
    }
    
    .challenge-meta, 
    .challenge-status {
        font-size: 0.85em !important;
    }
    
    .challenge-values {
        font-size: 0.9em !important;
    }
    
    .checkbox-group {
        padding: 5px 0 !important;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
        gap: 10px !important;
    }
    
    /* Chart-Container */
    .chart-container {
        height: 250px !important;
    }
    
    /* Formular-Elemente */
    .form-control {
        width: 100% !important;
    }
    
    /* Modals */
    .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    /* Route-Details Anpassungen */
    .route-header {
        flex-direction: column;
        font-size: 10px;
    }
    
    .bike-info-item {
   
        margin-bottom: 15px;
    }
    
    .bike-info-label {
        margin-bottom: 5px;
    }
    
    /* Dashboard Kacheln */
    .chart-grid {
        display: block !important;
    }
    
    .chart-card {
        margin-bottom: 15px;
    }
    
    /* Route-Liste Anpassungen */
    .route-item {
        flex-direction: column !important;
        padding: 10px !important;
    }
    
    .route-info {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .route-actions {
        justify-content: flex-start !important;
    }
    
    /* Kompaktere Stats */
    .stat-grid {
        /*grid-template-columns: repeat(2, 1fr) !important;*/
        gap: 0 !important;
    }
    
    /* Zusätzliche Route-Liste Anpassungen */
    .route-list {
        padding: 0 !important;
    }
    
    .filter-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
    }
    
    .filter-item {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    .filter-item select, 
    .filter-item input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .route-details {
        padding: 0 !important;
    }
    
    .route-title {
        font-size: 1.3em !important;
        margin-bottom: 5px !important;
    }
    
    .route-date {
        font-size: 0.9em !important;
    }
    
    .route-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
    }
    
    .route-metric {
        font-size: 0.9em !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 5px !important;
        background-color: #f8f9fa !important;
        border-radius: 4px !important;
    }
    
    .route-metric i {
        margin-right: 0 !important;
        margin-bottom: 3px !important;
    }
    
    .route-actions {
        justify-content: space-between !important;
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    .route-actions a {
        padding: 5px 8px !important;
        font-size: 0.9em !important;
    }
    
    /* Upload-Button */
    .upload-button {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .pagination a {
        margin: 2px !important;
        padding: 5px 8px !important;
    }
    .visibility-toggle {
        display: none !important;
    }
    
    /* Buttons ausblenden auf Mobilgeräten */
    .visibility-toggle,
    .challenge-button {
        display: none !important;
    }
}

/* 
 * Extra small devices (phones, less than 576px)
 */
@media (max-width: 575px) {
    .visibility-toggle,
    .challenge-button {
        display: none !important;
    }
    .container {
        padding: 10px;
    }
    
    /* Buttons und Controls kleiner machen */
    .add-bike-button,
    .btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
        font-size: 0.9em;
        padding: 6px 12px;
        display: none !important;
    }
    
    /* Profile Styles für extra kleine Geräte */
    .profile-card, 
    .profile-form,
    .challenge-card {
        padding: 10px !important;
    }
    
    .profile-username {
        font-size: 1.2em !important;
    }
    
    .modal-content {
        width: 92% !important;
        margin: 5% auto !important;
        padding: 10px !important;
    }
    
    .avatar-container {
        width: 100px !important;
        height: 100px !important;
    }
    
    .activities-list li {
        font-size: 0.8em !important;
        padding: 3px 8px !important;
        margin: 2px !important;
    }
    
    .avatar-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    }
    
    .button-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .save-button, 
    .cancel-button {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 6px !important;
        font-size: 0.9em !important;
        display: none !important;
    }
    
    /* Navigation wird kompakter */
    .nav-links a {
        padding: 8px 15px;
    }
    
    /* Karten noch kleiner */
    #route-map, #heatmap {
        height: 250px;
    }
    
    /* Vollbild für die Karten */
    .map-fullscreen {
        z-index: 2000;
    }
    
    /* Schriftgröße reduzieren */
    body {
        font-size: 14px;
    }
    
    .stat-value {
        font-size: 1em !important;
    }
    
    .stat-label {
        font-size: 0.8em !important;
    }
    
    /* Route-Liste */
    .upload-button, .filter-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-item {
        margin-bottom: 5px !important;
        width: 100% !important;
    }
}

/* 
 * Speziell für iPhone SE (320px)
 */
@media (max-width: 360px) {

    
    .stat-box {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 10px !important;
    }
    
    /* Profile Styles für sehr kleine Geräte */
    .profile-card, 
    .profile-form,
    .challenge-card {
        padding: 8px !important;
    }
    
    .avatar-container {
        width: 80px !important;
        height: 80px !important;
    }
    
    .profile-username {
        font-size: 1.1em !important;
    }
    
    .profile-email {
        font-size: 0.8em !important;
    }
    
    .profile-section h3 {
        font-size: 0.95em !important;
    }
    
    .challenge-progress {
        height: 16px !important;
    }
    
    .progress-text {
        font-size: 0.8em !important;
    }
    
    .button-group button {
        font-size: 0.85em !important;
        padding: 5px !important;
    }
    
    .action-button {
        padding: 8px !important;
        font-size: 1.3em !important;
    }
    
    .modal-content h2 {
        font-size: 1.2em !important;
    }
    
    .route-title h1, .route-title h2 {
        font-size: 1.3em !important;
        margin: 5px 0 !important;
    }
    
    .page-header {
        padding-bottom: 5px !important;
        margin-bottom: 10px !important;
    }
    
    .nav-title {
        font-size: 1em !important;
    }
    
    .side-nav {
        height: 40px !important;
    }
    
    .nav-header {
        height: 40px !important;
        padding: 5px !important;
    }
    
    .main-content {
        margin-top: 45px !important;
        padding: 5px !important;
    }
    
    .nav-links {
        top: 40px !important;
    }
    
    h1 {
        font-size: 1.3em !important;
    }
    
    h2 {
        font-size: 1.1em !important;
    }
    
    .container, 
    .card,
    .bike-card,
    .stat-box,
    .chart-card {
        padding: 8px !important;
        margin: 5px 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Route-Liste Anpassungen für sehr kleine Geräte */
    .route-metrics {
        grid-template-columns: 1fr !important;
    }
}