/* ═══════════════════════════════════════════════════
   Admin Courses — Mobile Responsive v1.0
   Scope: /admin/courses
   Fixes: Tutorial-Banner Header, Create-Cards, Kurs-Karten
   ═══════════════════════════════════════════════════ */

/* ─── Tutorial-Banner (#tutorial-video-banner) ─────
   Standard: flex-row mit Title links + Badges rechts.
   Mobile: Badges/Button in zweite Zeile unter Title.
   ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #tutorial-video-banner .tv-banner-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    /* Linker Block (Play-Icon + Title + Desc) — volle Breite */
    #tutorial-video-banner .tv-banner-header > div:first-child {
        width: 100%;
        gap: 10px !important;
    }

    /* Rechter Block (Badge + Toggle-Button) — unten, zentriert */
    #tutorial-video-banner .tv-banner-header > div:last-child {
        width: 100%;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    /* Title/Desc-Texte bekommen Platz zum Atmen */
    #tutorial-video-banner .tv-banner-header > div:first-child > div:last-child {
        flex: 1;
        min-width: 0;
    }

    #tutorial-video-banner .tv-banner-header [id="tv-toggle-btn"],
    #tutorial-video-banner .tv-banner-header span {
        font-size: 12px !important;
    }
}

/* ─── Create-Card-Buttons (KI / Manuell / PowerPoint) ─
   Standard: 140×120px nebeneinander.
   Mobile: gleich breit auf Container-Breite verteilt.
   ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Container der Create-Cards (div mit gap:12px im Header) */
    .page-content .course-create-card,
    #page-content .course-create-card {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 88px !important;
        padding: 8px 6px !important;
        gap: 4px !important;
    }

    /* Container selbst: voll breit, gleichmäßiger Abstand */
    .course-create-card:first-of-type {
        margin-left: 0;
    }

    /* Falls ein Wrapper existiert, entfernen wir Min-Breiten */
    div:has(> .course-create-card) {
        width: 100% !important;
        gap: 8px !important;
    }

    .course-create-card__icon {
        font-size: 22px !important;
    }

    .course-create-card__label {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .course-create-card__label strong {
        font-size: 11px !important;
    }
}

/* ─── Kurs-Karten-Liste (#admin-courses) ─────────────
   Standard: flex-row — Content links, Action-Buttons rechts.
   Mobile: stacken, Actions unten zentriert.
   ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Karten-Body: Content und Actions untereinander */
    #admin-courses .card .card-body > .flex.justify-between.items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Content-Block volle Breite */
    #admin-courses .card .card-body > .flex.justify-between.items-center > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Action-Buttons-Row: unten, flex-end, kein shrink */
    #admin-courses .card .card-body > .flex.justify-between.items-center > .flex.gap-2 {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding-top: 10px;
        border-top: 1px solid var(--border, rgba(148,163,184,0.12));
    }

    /* Einheitliche Tap-Größe für Action-Buttons (min 40x40 touch-target) */
    #admin-courses .card .card-body .btn.btn-sm,
    #admin-courses .card .card-body a.btn.btn-sm {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    /* Titel/Desc: lange Wörter umbrechen (wichtig bei "Die-7-effektivsten-...") */
    #admin-courses .card .card-body .font-semibold {
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    #admin-courses .card .card-body .text-muted,
    #admin-courses .card .card-body .text-sm.text-muted {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Kursname-Container: damit er sich korrekt ausdehnt */
    #admin-courses .card .card-body .flex.items-center.gap-3 > div:last-child {
        flex: 1;
        min-width: 0;
    }

    /* Thumbnail etwas kleiner auf Mobile */
    #admin-courses .card .card-body img[style*="width:64px"],
    #admin-courses .card .card-body div[style*="width:64px"] {
        width: 52px !important;
        height: 34px !important;
        flex-shrink: 0;
    }

    /* Badges-Row kompakter */
    #admin-courses .card .card-body .flex.gap-2.flex-wrap {
        gap: 6px !important;
    }

    #admin-courses .card .card-body .badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    /* Card-Body Padding auf Mobile reduzieren */
    #admin-courses .card .card-body {
        padding: 14px !important;
    }
}

/* ─── Sehr schmale Screens (<400px) ──────────────────
   Noch weiter komprimieren.
   ─────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .course-create-card {
        height: 76px !important;
        padding: 6px 4px !important;
    }

    .course-create-card__label {
        font-size: 9px !important;
    }

    .course-create-card__label strong {
        font-size: 10px !important;
    }

    .course-create-card__icon {
        font-size: 18px !important;
    }

    #admin-courses .card .card-body .font-semibold[style*="font-size:16px"] {
        font-size: 14px !important;
    }

    #admin-courses .card .card-body .btn.btn-sm {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
    }
}

/* ─── Seite-Header (h1 "Kurse verwalten" + Create-Cards) ─
   Falls Title und Cards in einer flex-row sitzen.
   Mobile: Title eigene Zeile, Cards voll breit darunter.
   ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Header-Wrapper: h1 oben, Button-Gruppe unten */
    .page-content > .flex.justify-between.items-center.mb-4:has(.course-create-card) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .page-content > .flex.justify-between.items-center.mb-4:has(.course-create-card) > .page-title,
    .page-content > .flex.justify-between.items-center.mb-4:has(.course-create-card) > h1 {
        font-size: 20px !important;
        margin: 0 !important;
    }

    .page-content > .flex.justify-between.items-center.mb-4:has(.course-create-card) > div:last-child {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }
}