/*
 * 響應式表格通用樣式 - Mobile Card Layout
 * 適用於 Tocas UI 框架
 * 作者: GitHub Copilot
 * 版本: 1.2 (完整修正版)
 */

/* ==================================================
   基本設定
================================================== */
:root {
    --mobile-breakpoint: 768px;
    --card-border-color: var(--ts-gray-300);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --card-border-radius: 8px;
    --card-padding: 1rem;
    --card-margin: 1rem;
    --label-width: 30%;
    --label-font-weight: 600;
    --content-margin-left: 22%;
}

/* ==================================================
   桌面模式 (預設表格樣式)
================================================== */
@media (min-width: 769px) {
    .responsive-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .responsive-table-container .ts-table {
            min-width: 100%;
        }
}

/* ==================================================
   手機模式 (卡片化布局)
================================================== */
@media (max-width: 768px) {

    /* 容器設定 */
    .responsive-table-container {
        display: block;
        width: 100%;
    }

        /* 隱藏原本的表格結構 */
        .responsive-table-container table,
        .responsive-table-container thead,
        .responsive-table-container tbody,
        .responsive-table-container tr,
        .responsive-table-container td,
        .responsive-table-container th {
            display: block;
        }

        /* 完全隱藏表頭 */
        .responsive-table-container thead {
            display: none;
        }

        /* 表格主體轉為 Flexbox */
        .responsive-table-container tbody {
            display: flex;
            flex-direction: column;
            gap: var(--card-margin);
            padding: 0;
        }

        /* 每一行轉為卡片 */
        .responsive-table-container tr {
            border: 1px solid var(--card-border-color);
            border-radius: var(--card-border-radius);
            padding: var(--card-padding);
            background: var(--card-background);
            box-shadow: var(--card-shadow);
            margin-bottom: 0;
            position: relative;
            display: block;
        }

        /* 移除 Tocas UI 的預設表格樣式 */
        .responsive-table-container.ts-box {
            padding: 1rem;
        }

        .responsive-table-container .ts-table {
            border: none;
            margin: 0;
        }

        .responsive-table-container tr {
            border: 1px solid var(--card-border-color) !important;
            border-radius: var(--card-border-radius) !important;
        }

        /* 每個儲存格轉為一行資料 - 修正重疊問題 */
        .responsive-table-container td {
            border: none !important;
            padding: 0.75rem 0;
            position: relative;
            margin-left: var(--content-margin-left);
            text-align: left;
            display: block;
            width: calc(100% - var(--content-margin-left));
            word-wrap: break-word;
            word-break: break-word;
            min-height: 1.5rem;
            line-height: 1.4;
        }

            /* 最後一個 td 移除下邊距 */
            .responsive-table-container td:last-child {
                padding-bottom: 0;
            }

            /* 使用 data-label 屬性顯示欄位標籤 - 修正定位 */
            .responsive-table-container td:before {
                content: attr(data-label) ": ";
                position: absolute;
                left: calc(-1 * var(--content-margin-left));
                top: 0.75rem;
                width: calc(var(--label-width) + 2%);
                font-weight: var(--label-font-weight);
                color: var(--label-color);
                text-align: left;
                vertical-align: top;
                word-wrap: break-word;
                line-height: 1.4;
                font-size: 0.9rem;
            }

            /* 當內容是多行時，調整標籤位置 */
            .responsive-table-container td.multiline {
                padding-top: 0.5rem;
            }

                .responsive-table-container td.multiline:before {
                    top: 0.5rem;
                }

        /* 針對沒有 data-label 的情況，使用固定標籤 */
        .responsive-table-container.table-labels-auto td:nth-child(1):before {
            content: "項目 1: ";
        }

        .responsive-table-container.table-labels-auto td:nth-child(2):before {
            content: "項目 2: ";
        }

        .responsive-table-container.table-labels-auto td:nth-child(3):before {
            content: "項目 3: ";
        }

        .responsive-table-container.table-labels-auto td:nth-child(4):before {
            content: "項目 4: ";
        }

        .responsive-table-container.table-labels-auto td:nth-child(5):before {
            content: "項目 5: ";
        }

        .responsive-table-container.table-labels-auto td:nth-child(6):before {
            content: "項目 6: ";
        }


        /* 特殊元素樣式優化 */
        .responsive-table-container .ts-badge {
            display: inline-block;
            margin-bottom: 0.25rem;
            margin-right: 0.5rem;
        }

        .responsive-table-container .ts-text.is-small {
            margin-top: 0.25rem;
            display: block;
        }

        .responsive-table-container .ts-text.is-code {
            font-family: 'Courier New', monospace;
            background: var(--ts-gray-200);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            display: inline-block;
            font-size: 0.875rem;
        }

        /* 按鈕群組優化 */
        .responsive-table-container .ts-wrap,
        .responsive-table-container .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .responsive-table-container .ts-button {
            /*margin-bottom: 0.5rem;*/
            flex-shrink: 0;
        }

        /* 時間欄位特殊處理 */
        .responsive-table-container .time-field br {
            display: block;
        }

        .responsive-table-container .time-field .ts-text {
            display: block;
            margin-bottom: 0.25rem;
        }

        /* 處理換行符號的內容 */
        .responsive-table-container td br + * {
            margin-top: 0.25rem;
        }
}

/* ==================================================
   主題變體 - 修正重疊問題
================================================== */

/* 深色主題 */
.responsive-table-container.dark-theme {
    --card-border-color: #495057;
    --card-background: #343a40;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --label-color: #adb5bd;
}

/* 緊湊模式 - 調整間距避免重疊 */
.responsive-table-container.compact {
    --card-padding: 0.75rem;
    --card-margin: 0.75rem;
    --label-width: 28%;
    --content-margin-left: 30%;
}

@media (max-width: 768px) {
    .responsive-table-container.compact td {
        padding: 0.5rem 0;
        margin-left: var(--content-margin-left);
        width: calc(100% - var(--content-margin-left));
    }

        .responsive-table-container.compact td:before {
            top: 0.5rem;
            left: calc(-1 * var(--content-margin-left));
            font-size: 0.85rem;
        }
}

/* 寬標籤模式 - 更寬的標籤區域 */
.responsive-table-container.wide-labels {
    --label-width: 40%;
    --content-margin-left: 42%;
}

@media (max-width: 768px) {
    .responsive-table-container.wide-labels td {
        margin-left: var(--content-margin-left);
        width: calc(100% - var(--content-margin-left));
    }

        .responsive-table-container.wide-labels td:before {
            left: calc(-1 * var(--content-margin-left));
            width: calc(var(--label-width) + 2%);
        }
}

/* 無陰影模式 */
.responsive-table-container.no-shadow {
    --card-shadow: none;
}

@media (max-width: 768px) {
    .responsive-table-container.no-shadow tr {
        box-shadow: none;
        border: 2px solid var(--card-border-color);
    }
}

/* 垂直堆疊模式 - 標籤在上，內容在下 */
.responsive-table-container.stack-labels {
    --content-margin-left: 0;
}

@media (max-width: 768px) {
    .responsive-table-container.stack-labels td {
        margin-left: 0;
        width: 100%;
        padding: 0.5rem 0;
    }

        .responsive-table-container.stack-labels td:before {
            position: static;
            display: block;
            width: 100%;
            margin-bottom: 0.25rem;
            left: auto;
            top: auto;
            font-size: 0.85rem;
            color: var(--label-color);
            font-weight: var(--label-font-weight);
        }
}

/* ==================================================
   動畫效果 (可選)
================================================== */
@media (max-width: 768px) {
    .responsive-table-container.animated tr {
        animation: slideIn 0.3s ease-out;
    }

        .responsive-table-container.animated tr:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease;
        }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================
   輔助類別
================================================== */

/* 隱藏特定欄位在手機模式 */
@media (max-width: 768px) {
    .responsive-table-container .mobile-hidden {
        display: none !important;
    }
}

/* 僅在手機模式顯示 */
@media (min-width: 769px) {
    .responsive-table-container .mobile-only {
        display: none !important;
    }
}

/* 修正長文字內容的樣式 */
@media (max-width: 768px) {
    .responsive-table-container td.long-text {
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

        .responsive-table-container td.long-text:before {
            top: 0.5rem;
        }
}

/* 小螢幕優化 */
@media (max-width: 480px) {
    .responsive-table-container {
        --label-width: 22%;
        --content-margin-left: 22%;
        --card-padding: 0.75rem;
    }

        .responsive-table-container td:before {
            font-size: 0.8rem;
        }
}

/* ==================================================
   特殊情況處理
================================================== */

/* 當沒有 data-label 且沒有使用預設類別時的後備方案 */
@media (max-width: 768px) {
    .responsive-table-container td:not([data-label]):before {
        content: "";
    }

    .responsive-table-container:not(.admin-table):not(.log-table):not(.table-labels-auto) td:not([data-label]) {
        margin-left: 0;
        width: 100%;
    }

        .responsive-table-container:not(.admin-table):not(.log-table):not(.table-labels-auto) td:not([data-label]):before {
            display: none;
        }
}

/* 確保徽章和按鈕在卡片中正確顯示 */
@media (max-width: 768px) {
    .responsive-table-container td .ts-badge + .ts-badge {
        margin-left: 0.25rem;
    }

    .responsive-table-container td .ts-button + .ts-button {
        /*margin-left: 0.5rem;*/
    }
}