/**
 * C4mulo5 Content Auto-Repair
 *
 * Fixt typische Layout-Bugs in ChatGPT- oder roh-HTML-generierten Sections,
 * die per JSON-Import oder Code-Editor in Mesmerize-Seiten gelandet sind.
 * Diese Regeln greifen rein per Attribute-Selektor — keine Markup-Änderung
 * notwendig.
 *
 * BUG #1: Runde Elemente mit zentriertem Inhalt aber ohne display: flex
 * ─────────────────────────────────────────────────────────────────────
 * Pattern: <div style="border-radius: 50%; align-items: center;
 *                       justify-content: center; ...">1</div>
 * Problem: Die align/justify-Properties haben ohne display: flex keine
 *          Wirkung — der Inhalt klebt oben am Rand.
 * Fix:    Diese Kombination wird global zu Flexbox.
 */
[style*="border-radius: 50%"][style*="align-items: center"][style*="justify-content: center"],
[style*="border-radius:50%"][style*="align-items:center"][style*="justify-content:center"] {
    display: flex !important;
}

/* Variante mit nur align-items zentriert (z.B. nur vertikale Zentrierung
 * im Kreis bei text-align: center für horizontal): */
[style*="border-radius: 50%"][style*="align-items: center"]:not([style*="display:"]):not([style*="display ;"]) {
    display: flex !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * BUG #2: Tabellen sprengen das Layout auf Mobile
 * ─────────────────────────────────────────────────────────────────────
 * ChatGPT-Sections enthalten oft <table style="width:100%"> mit 5+ Spalten
 * und festem padding. Auf Mobile ist die Mindestbreite oft >400px, die
 * Tabelle überfließt den Viewport, der Body wird horizontal scrollbar
 * und die ganze Seite wirkt „kaputt".
 *
 * Fix: Auf Mobile werden alle Tabellen innerhalb von Sections in einen
 * scrollbaren Block verwandelt (Bootstrap-Pattern). Die Tabelle selbst
 * scrollt horizontal, der Rest der Seite bleibt im Viewport.
 */
@media (max-width: 768px) {

    /* Section-Container darf nicht überfließen lassen */
    .content-section {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Tabellen werden zu scrollbarem Block */
    .content-section table,
    .content-section .table-responsive table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Subtiler Schatten am rechten Rand zeigt: hier kann gescrollt werden */
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) right center;
        background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    /* Innerhalb der Tabelle: kompaktere Padding-Werte erzwingen damit
     * nicht zu sehr gescrollt werden muss */
    .content-section table th,
    .content-section table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
        white-space: normal !important;
    }

    /* Erste Spalte „klebt" links — bessere Lesbarkeit beim horizontalen
     * Scrollen, da man immer den Zeilenkontext sieht */
    .content-section table th:first-child,
    .content-section table td:first-child {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
    }

    /* Falls die Tabelle einen farbigen Hintergrund hat, sticky-Spalte
     * den Hintergrund von der Sektion erben lassen */
    .content-section [style*="background-color"] table th:first-child,
    .content-section [style*="background-color"] table td:first-child {
        background: inherit;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * Opt-in Card-Layout: Tabellen mit class="c4m5-mobile-cards" werden
 * auf Mobile als gestackte Karten gerendert statt horizontal zu scrollen.
 * Voraussetzung: jede <td> hat ein data-label="..." mit dem Spaltennamen.
 * Das Repair-Tool kann das automatisch ergänzen.
 * ─────────────────────────────────────────────────────────────────────
 */
@media (max-width: 768px) {
    .c4m5-mobile-cards,
    .c4m5-mobile-cards thead,
    .c4m5-mobile-cards tbody,
    .c4m5-mobile-cards tr,
    .c4m5-mobile-cards th,
    .c4m5-mobile-cards td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .c4m5-mobile-cards thead {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    .c4m5-mobile-cards tr {
        margin-bottom: 16px !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 6px !important;
        padding: 12px !important;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    }
    .c4m5-mobile-cards td {
        padding: 8px 0 8px 45% !important;
        position: relative !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f1 !important;
        white-space: normal !important;
    }
    .c4m5-mobile-cards td:last-child { border-bottom: none !important; }
    .c4m5-mobile-cards td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        width: 42%;
        padding-right: 10px;
        font-weight: 700;
        font-size: 12px;
        color: #50575e;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* Kein sticky bei Card-Layout */
    .c4m5-mobile-cards td:first-child {
        position: relative !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}