/* ═══════════════════════════════════════════════════════════════
 *  Livadora CS — Mobile Optimization (Phase 1)
 *  ────────────────────────────────────────────────────────────────
 *  Ziel: Lesbarkeit auf Android-Chrome (Brit's Hauptgerät) und iPhone Safari.
 *  Strategie: nur unter 900px aktiv → Desktop unverändert.
 *  Zwei Breakpoints:
 *    ≤ 900px   = Tablet & große Smartphones (landscape)
 *    ≤ 480px   = kleine Smartphones (portrait)
 *
 *  !important wird gezielt verwendet, weil Inline-Styles in den Templates
 *  dominieren (~150 Stellen mit font-size:10-12px direkt im HTML).
 *  Ohne !important würden die Mobile-Regeln stumm überschrieben.
 *
 *  Apple-/Google-Guideline: Touch-Targets ≥ 44px. Wir nehmen 40px als
 *  pragmatisches Minimum, um die Layouts nicht aufzublähen.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* ─── Globale Lesbarkeit ───────────────────────────────────── */

    /* Body-Schrift hoch: niemals unter 15px auf Mobile.
       Begründung: 11-12px (heute) sind auf Android Chrome praktisch
       unlesbar ohne Pinch-Zoom. */
    body {
        font-size: 15px !important;
        line-height: 1.5;
    }

    /* Inline-Styles im Code verwenden font-size:10/11/12px überall.
       Wir hebeln die für die kleinen Stellen mit Tag-Selektoren aus. */
    .navbar,
    .btn,
    .form-control,
    .form-select,
    select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    textarea {
        font-size: 16px !important;  /* 16px verhindert das iOS-Autozoom */
    }

    /* ─── Touch-Targets ────────────────────────────────────────── */

    /* Alle klickbaren Elemente bekommen ein vernünftiges Mindestmaß.
       padding statt height — passt sich an Inhalt an. */
    .btn,
    button:not(.navbar-toggler):not(.btn-close),
    .nav-link,
    .dropdown-item {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Inputs ebenfalls hoch genug */
    .form-control,
    .form-select,
    select,
    input,
    textarea {
        min-height: 40px !important;
        padding: 8px 12px !important;
    }

    /* ─── Tag-Chips und kleine Buttons ─────────────────────────── */
    /* Diese Chips waren bei 11px + padding:2px 8px = ~22px hoch.
       Nicht treffbar. Wir machen sie kompakter aber höher. */
    .custom-tag-chip,
    .badge-sm {
        font-size: 13px !important;
        padding: 6px 10px !important;
        line-height: 1.2 !important;
    }

    /* ─── Form-Selects auch ohne .form-select ─────────────────── */
    /* Im ticket_detail.html sind viele <select> mit Inline-styles
       wie max-width:185px. Auf Mobile auf 100% breit lassen. */
    select.status-select,
    select#templateSelect {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 15px !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
    }

    /* ─── Container-Padding entspannen ────────────────────────── */
    .container-fluid.px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ─── Tabellen: horizontales Scrolling ────────────────────── */
    /* Wenn eine Tabelle nicht passt, lieber scrollen als brechen */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ─── Inline-Styles im Code mit super-kleinen Schriften ───── */
    /* Diese Selektoren matchen die häufigsten Inline-font-size-Werte
       die wir im Code sahen (Tag-Counter, Filenames, Meta-Info). */
    [style*="font-size:10px"],
    [style*="font-size: 10px"],
    [style*="font-size:11px"],
    [style*="font-size: 11px"] {
        font-size: 13px !important;
    }

    [style*="font-size:12px"],
    [style*="font-size: 12px"] {
        font-size: 14px !important;
    }

    /* ─── Toast-Messages besser sichtbar ──────────────────────── */
    .toast-msg {
        font-size: 15px !important;
        min-width: 280px !important;
        max-width: 90vw !important;
    }
}

/* ─── Kleine Smartphones (≤ 480px) ─────────────────────────── */
/* Hier wirklich knappe Verhältnisse — alles muss noch enger. */
@media (max-width: 480px) {

    /* Navbar-Brand kleiner damit der Burger-Button Platz hat */
    .navbar-brand img {
        height: 18px !important;
    }

    /* H1 in Headern kleiner — sonst läuft "LIV-2026-XXXX — Kundenname" über */
    h1 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }

    /* Action-Bars: Wrap statt Overflow */
    .action-bar,
    [style*="display:flex"][style*="gap:6px"],
    [style*="display:flex"][style*="gap:8px"] {
        flex-wrap: wrap !important;
    }
}