/* ============================================================
   MOBILE RESPONSIVE - Vollständige Überarbeitung
   AMCleaning-Service
   
   Dieses Stylesheet löst zwei Kernprobleme:
   1. Floating-Pill-Navbar wird auf Mobile zu einer soliden,
      bildschirmbreiten Top-Navigation mit sauberem Dropdown.
   2. Admin-Dashboard-Buttons werden auf Mobile in ein
      Touch-freundliches Grid umgewandelt.
   
   Zusätzlich: Globale Overflow-Prävention, Tabellen-Scroll,
   Bottom-Nav-Spacing, Dark-Mode-Konsistenz.
   ============================================================ */

/* ==========================================================
   1. GLOBALE OVERFLOW-PRÄVENTION
   ========================================================== */
html {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden !important;
    min-height: 100vh;
    min-height: 100dvh;
}
main,
.container,
.container-fluid,
.admin-content,
.dashboard-wrapper {
    max-width: 100%;
}
/* Bilder und Medien nie breiter als Container */
img, video, iframe, svg, embed, object {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   2. MOBILE NAVIGATION — Solide Top-Bar mit Full-Width Menu
   Breakpoint: <= 991px (Bootstrap lg)
   ========================================================== */
@media (max-width: 991.98px) {

    /* --- 2a. Navbar wird zur festen Top-Bar --- */
    nav.navbar.navbar-expand-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        padding: 0.55rem 0.85rem !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    nav.navbar.navbar-expand-lg.sticky-top {
        top: 0 !important;
    }

    /* --- 2b. Navbar innerer Container --- */
    nav.navbar .container,
    nav.navbar .container-fluid {
        flex-wrap: wrap !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* --- 2c. Brand/Logo: links, immer sichtbar --- */
    nav.navbar .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.5rem;
    }
    nav.navbar .navbar-logo {
        height: 48px !important;
    }
    nav.navbar .brand-name {
        font-size: 0.92rem !important;
        display: block !important;
    }
    nav.navbar .brand-sub {
        font-size: 0.72rem !important;
        display: block !important;
        opacity: 0.7;
    }

    /* --- 2d. Toggler: rechts, sauberes Touch-Target --- */
    nav.navbar .navbar-toggler {
        flex-shrink: 0;
        border: 1px solid var(--color-border) !important;
        border-radius: 0.5rem !important;
        padding: 0.45rem 0.6rem !important;
        margin-left: auto;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- 2e. Collapse-Menü: Full-Width Dropdown --- 
         Das Menü öffnet sich DIREKT unter dem Header,
         über die volle Breite, als natürlicher Teil der Nav. */
    nav.navbar .navbar-collapse {
        /* Positionierung: im Dokumentfluss, volle Breite */
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        order: 3;
        /* Aussehen */
        margin-top: 0.6rem !important;
        padding: 0.5rem 0 !important;
        background: transparent !important;
        border: none !important;
        border-top: 1px solid var(--color-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Wenn geöffnet: sanfte Animation */
    nav.navbar .navbar-collapse.collapsing {
        transition: height 0.25s ease;
    }

    /* --- 2f. Nav-Items im Menü --- */
    nav.navbar .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.1rem !important;
        padding: 0.25rem 0;
        width: 100%;
    }
    /* Zweite Nav-Gruppe visuell trennen */
    nav.navbar .navbar-nav + .navbar-nav {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-border);
    }
    /* Jeder Nav-Link: volle Breite, Touch-freundlich */
    nav.navbar .nav-link,
    nav.navbar .btn-link.nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.65rem 0.9rem !important;
        border-radius: 0.6rem !important;
        font-size: 0.92rem !important;
        font-weight: 500 !important;
        white-space: normal !important;
        opacity: 1 !important;
        transform: none !important;
    }
    nav.navbar .nav-link:hover,
    nav.navbar .nav-link:active,
    nav.navbar .btn-link.nav-link:hover {
        background: var(--color-primary-soft, rgba(16, 185, 129, 0.08)) !important;
        transform: none !important;
    }
    nav.navbar .nav-link i,
    nav.navbar .btn-link.nav-link i {
        font-size: 1.1rem;
        width: 1.5rem;
        text-align: center;
        flex-shrink: 0;
    }
    /* Logout-Button im Menü */
    nav.navbar .nav-item form {
        width: 100%;
    }
    nav.navbar .nav-item form button.nav-link,
    nav.navbar .nav-item form button.btn-link {
        text-align: left !important;
        width: 100% !important;
        color: var(--color-text) !important;
    }

    /* --- 2g. Dark Mode Mobile Nav --- */
    html[data-theme='dark'] nav.navbar.navbar-expand-lg {
        border-bottom-color: var(--color-border) !important;
    }
    html[data-theme='dark'] nav.navbar .navbar-collapse {
        background: transparent !important;
        border-top-color: var(--color-border) !important;
    }
    html[data-theme='dark'] nav.navbar .nav-link:hover,
    html[data-theme='dark'] nav.navbar .nav-link:active {
        background: rgba(255, 255, 255, 0.06) !important;
    }
}

/* Noch kleinere Screens: Brand kompakter */
@media (max-width: 575.98px) {
    nav.navbar .navbar-logo {
        height: 42px !important;
    }
    nav.navbar .brand-name {
        font-size: 0.85rem !important;
    }
    nav.navbar .brand-sub {
        display: none !important;
    }
}

/* ==========================================================
   3. MOBILE MENÜ – Overlay & Body-Lock
   ========================================================== */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1030;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-overlay.active {
    display: block;
    opacity: 1;
}
html[data-theme='dark'] .mobile-nav-overlay.active {
    background: rgba(0, 0, 0, 0.5);
}
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ==========================================================
   4. ADMIN DASHBOARD NAVIGATION — Mobile Grid
   ========================================================== */

/* Container für die Dashboard-Header-Zeile */
@media (max-width: 991.98px) {
    /* Header-Zeile: Stack vertikal */
    .container-fluid > .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    /* Dashboard-Nav-Buttons: 2-spaltig Grid */
    .admin-dashboard-nav,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        width: 100%;
    }
    .admin-dashboard-nav > .btn,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 > .btn,
    .admin-dashboard-nav > a,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 > a {
        width: 100% !important;
        font-size: 0.78rem !important;
        padding: 0.6rem 0.5rem !important;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0.6rem;
    }
    /* Ikon im Button kleiner */
    .admin-dashboard-nav > .btn i,
    .admin-dashboard-nav > a i {
        font-size: 0.9rem;
    }
}

@media (max-width: 400px) {
    /* Sehr kleine Screens: 1 Spalte */
    .admin-dashboard-nav,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 {
        grid-template-columns: 1fr !important;
    }
    .admin-dashboard-nav > .btn,
    .admin-dashboard-nav > a,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 > .btn,
    .container-fluid > .d-flex.mb-4 > .d-flex.gap-2 > a {
        font-size: 0.82rem !important;
        padding: 0.65rem 0.75rem !important;
    }
}

/* Section-Titel auf Mobile */
@media (max-width: 767.98px) {
    h1.section-title,
    .section-title {
        font-size: 1.25rem !important;
        word-break: break-word;
    }
}

/* ==========================================================
   5. NAV-TABS / NAV-PILLS — Horizontal Scroll auf Mobile
   ========================================================== */
@media (max-width: 767.98px) {
    .nav-tabs,
    .nav-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
        gap: 0.25rem;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex-shrink: 0;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
        min-height: 40px;
    }
}

/* ==========================================================
   6. TABELLEN — Horizontaler Scroll nur im Wrapper
   ========================================================== */
.table-responsive,
.admin-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.table-responsive > table,
.admin-table-scroll > table {
    min-width: 800px;
    margin-bottom: 0;
}
/* In Cards: kein Seitenrand-Overflow */
.card .table-responsive {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* ==========================================================
   7. BOTTOM-NAV SPACING
   ========================================================== */
@media (max-width: 991.98px) {
    main {
        padding-bottom: 80px !important;
    }
    footer.bg-dark {
        padding-bottom: 80px !important;
    }
    .whatsapp-float {
        bottom: 88px !important;
    }
    .scroll-top {
        bottom: 88px !important;
    }
}

/* ==========================================================
   8. RESPONSIVE CARDS & STATS
   ========================================================== */
@media (max-width: 767.98px) {
    .row.g-4 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
    .stat-card {
        padding: 0.85rem !important;
    }
    .stat-card h3,
    .stat-card .h3 {
        font-size: 1.25rem !important;
    }
    .container-fluid.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ==========================================================
   9. FORMULARE — iOS Zoom-Fix & Touch-Targets
   ========================================================== */
@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* Verhindert iOS-Zoom */
        min-height: 44px;
    }
    .btn {
        min-height: 44px;
    }
}

/* ==========================================================
   10. DARK MODE — Mobile-spezifische Korrekturen
   ========================================================== */
html[data-theme='dark'] .mobile-bottom-nav {
    background: var(--color-surface-solid) !important;
    border-top-color: var(--color-border) !important;
}
html[data-theme='dark'] .mobile-bottom-nav-item {
    color: var(--color-text-muted) !important;
}
html[data-theme='dark'] .mobile-bottom-nav-item:hover,
html[data-theme='dark'] .mobile-bottom-nav-item:active {
    color: var(--color-primary) !important;
}

/* ==========================================================
   11. SCROLL-PADDING für Fixed Header
   ========================================================== */
@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 60px !important;
    }
}

/* ==========================================================
   12. DEV-BANNER & ALERTS Mobile
   ========================================================== */
@media (max-width: 767.98px) {
    .dev-banner {
        font-size: 0.7rem !important;
    }
    .alert {
        font-size: 0.88rem;
        padding: 0.65rem 0.85rem;
    }
    .breadcrumb {
        font-size: 0.8rem;
    }
}

/* ==========================================================
   13. MODALS auf Mobile
   ========================================================== */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* ==========================================================
   14. FOOTER Mobile
   ========================================================== */
@media (max-width: 767.98px) {
    footer .footer-logo {
        height: auto !important;
        max-height: 110px !important;
    }
}