/* ==========================================================================
   responsive-tables.css
   ==========================================================================
   Single-page vault like Taichi uses wide 2-column EN | VI tables.
   On mobile (< 768px) these tables overflow the viewport causing
   horizontal scrolling and content cut-off.

   Fix: at < 768px, collapse every <table> in the main content area
   into stacked rows. The header row becomes a label above each cell,
   and each <tr> becomes a card with the two languages stacked
   vertically.

   Tennis doesn't need this because its tables are smaller and its
   pages are shorter. Taichi's index.md is one giant page.
   ========================================================================== */

@media (max-width: 768px) {

    /* Force table layout that wraps */
    .md-content table,
    article table {
        display: block !important;
        width: 100% !important;
        overflow-x: visible !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Hide the original header row */
    .md-content table thead,
    article table thead {
        display: none !important;
    }

    /* Stack rows into cards */
    .md-content table tbody,
    article table tbody {
        display: block !important;
        width: 100% !important;
    }

    .md-content table tr,
    article table tr {
        display: block !important;
        margin: 0 0 1rem 0 !important;
        padding: 0.75rem !important;
        background: var(--md-default-bg-color) !important;
        border: 1px solid var(--md-default-fg-color--lightest) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    /* Stack cells vertically, label them EN / VI */
    .md-content table td,
    article table td {
        display: block !important;
        width: 100% !important;
        padding: 0.4rem 0 !important;
        border: none !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Add EN/VI labels before each cell, based on column position */
    .md-content table td:nth-child(1),
    article table td:nth-child(1)::before {
        content: "🇺🇸 EN";
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--md-primary-fg-color);
        opacity: 0.7;
        margin-bottom: 0.3rem;
    }

    .md-content table td:nth-child(2),
    article table td:nth-child(2)::before {
        content: "🇻🇳 VI";
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--md-primary-fg-color);
        opacity: 0.7;
        margin-bottom: 0.3rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px dashed var(--md-default-fg-color--lightest);
    }
}

/* ==========================================================================
   Floating TOC / content overflow safety net
   ==========================================================================
   Prevent ANY element from causing horizontal scroll on the body
   (the table fix above handles tables specifically).
   ========================================================================== */

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .md-content,
    .md-main__inner,
    .md-content__inner {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Long URLs and code blocks should wrap */
    .md-content code,
    .md-content a {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Reduce huge heading sizes that may overflow */
    .md-content h1 {
        font-size: 1.8rem !important;
    }
    .md-content h2 {
        font-size: 1.4rem !important;
    }
}

/* ==========================================================================
   Mobile top tabs: shrink padding so 7-8 tabs fit on phone
   ========================================================================== */

@media (max-width: 768px) {
    .md-tabs__link {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .md-tabs__item {
        font-size: 0.75rem !important;
    }
}