/* ======================================================================
   Neron24 Admin — Globale Mobile-Overrides
   Wird automatisch per tenant.php auf JEDE HTML-Seite eingebunden.
   Ziel: Bestehende Desktop-Seiten auf Handy benutzbar machen, ohne
   jede PHP-Datei einzeln umzubauen.
   ====================================================================== */

/* --- Basis: iOS / Android Komfort ----------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* iOS: verhindert Auto-Zoom beim Fokus auf Form-Felder */
@media (max-width: 900px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --- Tablet / Handy ------------------------------------------------- */
@media (max-width: 900px) {

    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Container sollen die volle Breite des Body-Inhalts einnehmen
       (unabhängig vom body padding — jede Seite entscheidet selbst über
       ihren äußeren Rand). */
    .container, .wrap, .wrapper, .main-wrap,
    main, .main, .content, .main-content,
    .page, .page-wrap {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Tabellen: horizontal scrollbar statt überlaufend */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Ausnahme: Tabellen die selbst schon im Wrapper stecken → normal */
    .table-wrap table, .table-container table,
    .responsive-table, .resp-table {
        display: table;
    }
    .table-wrap, .table-container,
    .responsive-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Große Touch-Ziele */
    button,
    .btn, a.btn, .button, a.button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Top-Bar / Navigation: wrap statt überlaufen */
    .topbar, .top-bar, .header, .navbar, .nav-bar,
    .admin-header, .page-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    /* Side-Menu / Sidebar: auf Handy komplett oben */
    .sidebar, .side-menu, .side-nav {
        width: 100% !important;
        position: static !important;
        height: auto !important;
    }

    /* Grids mit festen Spalten → 1 Spalte */
    [class*="grid-2"], [class*="grid-3"], [class*="grid-4"],
    [class*="cols-2"], [class*="cols-3"], [class*="cols-4"] {
        grid-template-columns: 1fr !important;
    }

    /* Zwei- / Drei-Spalten-Flex-Layouts brechen um */
    .row, .flex-row, .columns {
        flex-wrap: wrap !important;
    }

    /* Modals / Popups auf Handy full-screen */
    .modal, .popup, .dialog {
        max-width: 95vw !important;
        width: 95vw !important;
        max-height: 90vh !important;
    }

    /* Bilder nie breiter als Container */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Karten / Cards: weniger Padding */
    .card, .box, .panel, .tile {
        padding: 14px !important;
        margin-bottom: 12px !important;
    }
}

/* --- Nur Handy (≤ 600px) ------------------------------------------- */
@media (max-width: 600px) {

    /* Etwas kleinere Überschriften */
    h1 { font-size: 22px !important; line-height: 1.25 !important; }
    h2 { font-size: 18px !important; line-height: 1.3 !important; }
    h3 { font-size: 16px !important; }

    /* Formulare: Label über Input */
    form label {
        display: block;
        margin-bottom: 4px;
    }

    /* Lange Links/Texte nicht horizontal scrollen */
    p, li, td, .break-word {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Buttons, die nebeneinander im Flex stehen, auf Handy stapeln */
    .btn-group, .btn-bar, .button-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .btn-group > *, .btn-bar > *, .button-row > * {
        width: 100%;
    }

    /* Floating Action Buttons oben nicht im Weg */
    .fab, .floating-btn {
        bottom: 80px !important; /* über der Bottom-Navigation */
    }
}

/* --- Scrollbar dünner (optional) ----------------------------------- */
@media (max-width: 900px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.25);
        border-radius: 3px;
    }
}