/* ─────────────────────────────────────────────────────────────
   markdown.css — styling for server-rendered markdown content
   Target: elements with both .markdown and .dtsa-content classes
   ───────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────────────────── */

.markdown iframe {
    width: 100%;
    height: 100%;
}

.markdown.dtsa-content {
    line-height: 1.65;
    color: #212529;
}

.markdown.dtsa-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Headings ─────────────────────────────────────────────── */

.markdown.dtsa-content h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.markdown.dtsa-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2.25rem 0 .75rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--primary-color);
    line-height: 1.3;
}

.markdown.dtsa-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
    color: #333;
}

.markdown.dtsa-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 .4rem;
    color: #444;
}

.markdown.dtsa-content h5,
.markdown.dtsa-content h6 {
    font-size: .9rem;
    font-weight: 600;
    margin: 1rem 0 .35rem;
    color: #555;
}

/* ── Body text ────────────────────────────────────────────── */

.markdown.dtsa-content p {
    margin: 0 0 .9rem;
    line-height: 1.75;
}

.markdown.dtsa-content strong {
    font-weight: 600;
}

.markdown.dtsa-content em {
    font-style: italic;
    color: #555;
}

.markdown.dtsa-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.markdown.dtsa-content a:hover {
    text-decoration: underline;
}

/* ── Lists ────────────────────────────────────────────────── */

.markdown.dtsa-content ul,
.markdown.dtsa-content ol {
    margin: 0 0 .9rem;
    padding-left: 1.6rem;
}

.markdown.dtsa-content li {
    margin-bottom: .3rem;
    line-height: 1.65;
}

.markdown.dtsa-content ul ul,
.markdown.dtsa-content ol ol,
.markdown.dtsa-content ul ol,
.markdown.dtsa-content ol ul {
    margin: .25rem 0;
}

/* ── Tables ───────────────────────────────────────────────── */

/*
   Wichtig:
   - table-layout:auto verhindert überlappende Spalten.
   - overflow-wrap:break-word statt anywhere verhindert aggressives Zerreißen.
   - Kleine Spalten werden über nth-child kompakt gehalten.
   - Lange Tabellen erhalten auf kleinen Screens horizontales Scrollen.
*/

.markdown.dtsa-content {
    overflow-x: auto;
}

.markdown.dtsa-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.25rem;
    font-size: .88rem;
    table-layout: auto;
    word-wrap: normal;
    overflow-wrap: normal;
    max-width: 100%;
}

.markdown.dtsa-content thead {
    background: var(--primary-color);
    color: #fff;
}

.markdown.dtsa-content th {
    padding: .55rem .75rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
}

.markdown.dtsa-content td {
    padding: .45rem .75rem;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Optional colgroup support for hand-written HTML tables */
.markdown.dtsa-content colgroup col:nth-child(1),
.markdown.dtsa-content colgroup col:nth-child(2),
.markdown.dtsa-content colgroup col:nth-child(3) {
    width: 1%;
}

.markdown.dtsa-content colgroup col:nth-child(4) {
    width: auto;
}

.markdown.dtsa-content colgroup col:nth-child(5) {
    width: 22%;
}

/* Compact technical columns: Section, Gruppe, Counts */
.markdown.dtsa-content table th:nth-child(1),
.markdown.dtsa-content table th:nth-child(2),
.markdown.dtsa-content table th:nth-child(3),
.markdown.dtsa-content table td:nth-child(1),
.markdown.dtsa-content table td:nth-child(2),
.markdown.dtsa-content table td:nth-child(3) {
    width: 1%;
    white-space: normal;
    text-align: left;

    overflow-wrap: break-word;
    /* word-break: break-word; */
}

/* Kurzbeschreibung */
.markdown.dtsa-content table th:nth-child(4),
.markdown.dtsa-content table td:nth-child(4) {
    width: 50%;
    text-align: left;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Schrittgruppe */
.markdown.dtsa-content table th:nth-child(5),
.markdown.dtsa-content table td:nth-child(5) {
    width: 20%;
    text-align: left;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Zebra rows */
.markdown.dtsa-content tbody tr:nth-child(even) td {
    background: #f8f9fa;
}

/* Hover */
.markdown.dtsa-content tbody tr:hover td {
    background: #eef4fb;
}

/* ── Linedance table rows ─────────────────────────────────── */

/* Section start: stronger visual separator */
.markdown.dtsa-content table tr.new-section td {
    border-top: 4px solid #222;
    background: #e6f0ff;
    font-weight: 700;
}

/* Group start: softer emphasis */
.markdown.dtsa-content table tr.new-group td {
    background: #f2f4f6;
    font-weight: 600;
}

/* If a row starts both section and group */
.markdown.dtsa-content table tr.new-section.new-group td {
    background: #e6f0ff;
    font-weight: 700;
}

/* Detail/count rows: empty Section/Gruppe cells stay visually quiet */
.markdown.dtsa-content table td:empty {
    background: transparent;
}

/* Detail rows: indent only the description column */
.markdown.dtsa-content table tr:not(.new-group):not(.new-section) td:nth-child(4) {
    padding-left: 1.25rem;
    color: #333;
}

/* Inline code in tables should not explode column layout */
.markdown.dtsa-content table code {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* ── Responsive table handling ────────────────────────────── */

@media (max-width: 900px) {
    .markdown.dtsa-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .markdown.dtsa-content table {
        width: 100%;
        min-width: unset; /* Allow normal text wrapping for regular tables on mobile */
        table-layout: auto;
        font-size: .82rem;
    }

    .markdown.dtsa-content th,
    .markdown.dtsa-content td {
        padding: .4rem .45rem;
    }

    /* Mobile card view for specific tables (like Overview) */
    .markdown.dtsa-content table.mobile-card-table {
        min-width: unset;
        border: none;
    }
    
    .markdown.dtsa-content table.mobile-card-table thead {
        display: none;
    }
    
    .markdown.dtsa-content table.mobile-card-table tbody,
    .markdown.dtsa-content table.mobile-card-table tr,
    .markdown.dtsa-content table.mobile-card-table td {
        display: block;
        width: 100%;
    }
    
    .markdown.dtsa-content table.mobile-card-table tr {
        margin-bottom: 1.25rem;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .35rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: hidden;
    }
    
    .markdown.dtsa-content table.mobile-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: right;
        padding: .6rem .75rem;
        border-bottom: 1px solid #f0f0f0;
        background: transparent !important;
    }
    
    .markdown.dtsa-content table.mobile-card-table td:last-child {
        border-bottom: none;
    }
    
    .markdown.dtsa-content table.mobile-card-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 1rem;
        color: var(--primary-color);
        flex-shrink: 0;
        max-width: 45%;
    }
    
    .markdown.dtsa-content table.mobile-card-table td:empty {
        display: none;
    }
}

/* ── Blockquotes ──────────────────────────────────────────── */

.markdown.dtsa-content blockquote {
    border-left: 4px solid var(--primary-color);
    margin: 1.25rem 0;
    padding: .6rem 1rem;
    background: #f8f9fa;
    border-radius: 0 .3rem .3rem 0;
    color: #444;
}

.markdown.dtsa-content blockquote p {
    margin-bottom: 0;
}

/* ── Code ─────────────────────────────────────────────────── */

.markdown.dtsa-content code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .85em;
    background: #f0f0f0;
    border-radius: 3px;
    padding: .1em .35em;
}

.markdown.dtsa-content pre {
    background: #f6f8fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown.dtsa-content pre code {
    background: transparent;
    padding: 0;
    font-size: .85rem;
    line-height: 1.6;
}

/* ── Horizontal rule ──────────────────────────────────────── */

.markdown.dtsa-content hr {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 1.75rem 0;
}

/* ── Images ───────────────────────────────────────────────── */

.markdown.dtsa-content img {
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
}

/* ── Dance metadata table ─────────────────────────────────── */

.markdown.dtsa-content table.dtsa-meta {
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: .875rem;
}

.markdown.dtsa-content table.dtsa-meta th {
    padding: .3rem .75rem .3rem 0;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: top;
    color: #495057;
    text-align: left;
    width: 1%;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
}

.markdown.dtsa-content table.dtsa-meta td {
    padding: .3rem .75rem .3rem .5rem;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}