/* =========================================================
   MRMAD Responsive Table
   File: responsive-table.css
   Version: 1.2.0

   修正：
   - iPhone Safari 黑色橫線
   - 移除 box-shadow 模擬格線
   - 完整 Reset 主題原始 border / shadow
   - 改用 border-collapse: separate + 真實灰色 border
========================================================= */


/* =========================================================
   Desktop / 共用
========================================================= */

.wp-block-table.mrmad-responsive-table {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

.wp-block-table.mrmad-responsive-table .mrmad-table-scroll {
    width: 100%;
    max-width: 100%;
}

/* 桌機隱藏控制列 */
.wp-block-table.mrmad-responsive-table .mrmad-table-control {
    display: none;
}


/* =========================================================
   Mobile
========================================================= */

@media screen and (max-width: 768px) {

    /* -----------------------------------------------------
       外層
    ----------------------------------------------------- */

    .wp-block-table.mrmad-responsive-table {
        position: relative;

        display: block;

        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;

        overflow: visible !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Scroll 容器
    ----------------------------------------------------- */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll {
        position: relative;

        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        scrollbar-width: thin;

        box-sizing: border-box;
    }


    /* Safari / Chrome scrollbar */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);

        border-radius: 999px;
    }


    /* =====================================================
       重要：完整清除主題原始線條
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll table,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll thead,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tbody,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tfoot,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tr,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td {

        outline: 0 !important;

        box-shadow: none !important;

        text-shadow: none;
    }


    /* tr 不准有任何 Border / Shadow */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tr {

        border: 0 !important;

        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        box-shadow: none !important;

        outline: 0 !important;
    }


    /*
     * 防止某些主題利用 pseudo-element 畫線
     */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tr::before,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tr::after,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th::before,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th::after,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td::before,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td::after {

        box-shadow: none !important;

        border: 0 !important;

        background-image: none !important;
    }


    /* =====================================================
       Table
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll table {

        display: table !important;

        width: var(--mrmad-table-width, 760px) !important;
        min-width: var(--mrmad-table-width, 760px) !important;
        max-width: none !important;

        table-layout: auto !important;


        /*
         * 關鍵：
         * 不使用 collapse
         */
        border-collapse: separate !important;
        border-spacing: 0 !important;


        /*
         * 清除原本 table 外框
         */
        border: 0 !important;

        outline: 0 !important;

        box-shadow: none !important;


        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       儲存格
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td {

        box-sizing: border-box;

        min-width: 165px;

        padding: 14px 16px;

        line-height: 1.65;

        vertical-align: middle;


        word-break: normal;

        overflow-wrap: break-word;

        white-space: normal;


        /*
         * 先全部清除
         */

        border: 0 !important;

        outline: 0 !important;

        box-shadow: none !important;


        /*
         * 再統一畫線
         */

        border-right:
            1px solid #dddddd !important;

        border-bottom:
            1px solid #dddddd !important;


        background-clip: padding-box;
    }


    /* =====================================================
       表格外框
    ===================================================== */


    /* 第一欄左線 */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tr > *:first-child {

        border-left:
            1px solid #dddddd !important;
    }


    /* 第一列頂線 */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll thead tr:first-child > * {

        border-top:
            1px solid #dddddd !important;
    }


    /* =====================================================
       Sticky 第一欄
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th:first-child,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td:first-child {

        position: sticky;

        left: 0;

        z-index: 5;

        width: 125px;
        min-width: 125px;
        max-width: 125px;


        /*
         * Safari Sticky 渲染優化
         */

        -webkit-transform: translateZ(0);

        transform: translateZ(0);

        backface-visibility: hidden;

        box-shadow: none !important;
    }


    /* 表頭第一格 */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll thead th:first-child {

        z-index: 20;

        box-shadow: none !important;
    }


    /* =====================================================
       Sticky 第一欄背景
    ===================================================== */


    /* 一般白底 */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tbody tr:nth-child(odd)
    td:first-child {

        background-color:
            #ffffff !important;
    }


    /* 偶數列灰底 */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tbody tr:nth-child(even)
    td:first-child {

        background-color:
            #f7f8fa !important;
    }


    /*
     * 保證 Sticky 欄位右邊線是灰色
     */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll tbody td:first-child {

        border-right:
            1px solid #dddddd !important;

        box-shadow: none !important;
    }


    /* =====================================================
       第二欄稍微加寬
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th:nth-child(2),

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td:nth-child(2) {

        min-width: 220px;
    }


    /* =====================================================
       底部控制列
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-control {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;


        width: fit-content;

        max-width:
            calc(100% - 24px);


        margin:
            10px auto 20px;


        padding:
            6px 8px;


        background:
            #f2f3f4;


        border: 0 !important;

        border-radius:
            999px;


        color:
            #666;


        font-size:
            13px;

        line-height:
            1;


        box-sizing:
            border-box;


        box-shadow:
            none !important;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-control-text {

        white-space: nowrap;

        padding:
            0 2px;
    }


    /* =====================================================
       左右箭頭
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow {

        display: flex;

        align-items: center;

        justify-content: center;


        flex:
            0 0 auto;


        width:
            30px;

        height:
            30px;


        margin:
            0;

        padding:
            0;


        border:
            0 !important;

        outline:
            0 !important;


        border-radius:
            50%;


        background:
            #ffffff;


        color:
            #555;


        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;


        font-size:
            18px;

        font-weight:
            500;

        line-height:
            1;


        cursor:
            pointer;


        box-shadow:
            0 1px 4px
            rgba(0, 0, 0, 0.08) !important;


        -webkit-appearance:
            none;

        appearance:
            none;


        -webkit-tap-highlight-color:
            transparent;


        transition:
            opacity 0.2s ease,
            transform 0.15s ease,
            background 0.2s ease;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow:hover {

        background:
            #fafafa;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow:active {

        transform:
            scale(0.92);
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow:disabled {

        opacity:
            0.3;

        cursor:
            default;

        transform:
            none;
    }


    /* =====================================================
       圖片與連結
    ===================================================== */

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll img {

        max-width:
            100%;

        height:
            auto;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll a {

        overflow-wrap:
            anywhere;

        word-break:
            break-word;
    }

}


/* =========================================================
   iPhone / 小型手機
========================================================= */

@media screen and (max-width: 480px) {

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td {

        padding:
            13px 14px;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll th:first-child,

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-scroll td:first-child {

        width:
            115px;

        min-width:
            115px;

        max-width:
            115px;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-control {

        gap:
            6px;

        padding:
            5px 7px;

        font-size:
            12px;
    }


    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow {

        width:
            28px;

        height:
            28px;

        font-size:
            17px;
    }

}


/* =========================================================
   Reduce Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wp-block-table.mrmad-responsive-table
    .mrmad-table-arrow {

        transition:
            none;
    }

}