/* ==========================================================================
   mobile.css
   ========================================================================== */

/* --- Tablet & Smartphone Anpassungen für die Navigation (max 900px) --- */
@media (max-width: 900px) {
    .top-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.6rem 1rem !important;
        min-height: 60px;
    }

    /* Titelzeile und Hamburger-Button nebeneinander */
    .top-nav-left {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .top-nav-siteTitle {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
    }

    /* Standardmäßig ausgeblendete Links (werden per JS gesteuert) */
    .top-nav-left a {
        display: none; /* JS überschreibt dies bei Klick */
        width: 100% !important;
        text-align: left !important;
        padding: 0.8rem 1rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }

    /* Rechter Block mit Logindaten & Logout */
    .top-nav-right {
        display: none; /* JS überschreibt dies bei Klick */
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        background: rgba(11, 15, 25, 0.95) !important;
        padding: 1rem !important;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .top-nav-right-top {
        text-align: left !important;
        margin-bottom: 0.8rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.5rem;
    }

    .top-nav-right-bottom {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .top-nav-right-bottom a {
        width: 100% !important;
        text-align: left !important;
        padding: 0.8rem 1rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        box-sizing: border-box;
    }

    /* Sobald das Hamburger-Menü geöffnet ist (JS-Zustand), 
       brechen wir das Layout vertikal auf */
    .top-nav:has(.hamburger-btn) {
        flex-wrap: wrap !important;
    }

    /* Wenn das Menü aktiv offen ist, positionieren wir die Links 
       unter dem Header-Streifen */
    .top-nav-left:has(~ .top-nav-right[style*="display: flex"]),
    .top-nav-left:has(a[style*="display: block"]) {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-top: 1rem;
    }
}


/* --- Smartphone Anpassungen (max 768px) --- */
@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }

    /* Reduziert die gigantische Header-Bild-Höhe mobil */
    .top-nav-section {
        margin-top: 60px !important;
        min-height: 180px !important;
    }

    /* Raster bricht sauber untereinander */
    .box {
        flex-direction: column;
        gap: 1rem;
        width: 92%;
        margin: 1rem auto;
    }

    /* Dashboard Boxen */
    .news,
    .stufenbeitrag,
    .currentPoints,
    .minus-15,
    .learnhelper,
    .calendar,
    .pointSystem {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 1.2rem !important;
        box-sizing: border-box;
    }

    /* Überschriften-Anpassung */
    .news h1,
    .stufenbeitrag h1,
    .currentPoints h1,
    .minus-15 h1,
    .learnhelper h1,
    .pointSystem h1,
    .modal-content h2 {
        font-size: 1.25rem !important;
    }

    /* Minus 15 Stunden Karten */
    .minus-15 > .minus-15-lk-container {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }

    .minus-15-lk {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 0.8rem !important;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .minus-15 > .minus-15-lk-container .minus-15-lk:first-child::after {
        display: none; /* Vertikalen Trenner auf Mobile entfernen */
    }

    /* Lernhelfer & Tickets nebeneinander zu untereinander */
    .learnhelper-courses {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .learnhelper-courses .course {
        width: 100% !important;
        padding: 1.2rem !important;
    }

    /* Tabellen (Punktesystem & Minus 15 Details) scrollbar machen */
    .pointSystem-container,
    .minus15-lk {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pointSystem table,
    .minus15-lk table {
        font-size: 0.85rem;
        min-width: 500px; /* Erzwingt Scrollen statt Quetschen */
    }

    .pointSystem th,
    .pointSystem td,
    .minus15-lk th,
    .minus15-lk td {
        padding: 0.6rem 0.8rem !important;
    }

    /* Minus 15 Detail-Container untereinander */
    .minus15-container {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .minus15-lk {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Kalender-Höhe limitieren */
    .calendar-content {
        height: 480px !important;
    }

    /* Touch-freundliche Interaktionen */
    .edit-btn,
    .save-btn,
    .delete-btn {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        min-height: 44px; /* Apple Tap-Target Richtlinie */
    }

    /* Links als dicke Buttons formatieren */
    .news-header a,
    .minus-15-header a,
    .lk-actions a,
    .learnhelper-courses .course a {
        display: block !important;
        text-align: center !important;
        margin-top: 0.8rem !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem;
    }
}