/* ==========================================================================
   手機版 3／4：寬表格轉卡片
   手機寬度容不下 6-8 欄，四張表都改為逐筆卡片：不必橫向捲動，
   同一畫面可讀到多筆資料。欄位定位與欄名皆取自 td[data-label]。
   載入順序說明見 mobile-shell.css。
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       共用卡片基底
       ---------------------------------------------------------------------- */
    .table-container,
    .king-table-container {
        padding: 12px;
        overflow-x: visible;
    }

    #leaveTable,
    .compare-table,
    .king-table,
    .king-detail-table {
        display: block;
        min-width: 0;
        border: none;
        box-shadow: none;
    }

    /* 欄位名稱改由每格自己顯示，表頭不再需要 */
    #leaveTable thead,
    .compare-table thead,
    .king-table thead,
    .king-detail-table thead {
        display: none;
    }

    #leaveTable tbody,
    .compare-table tbody,
    .king-table tbody,
    .king-detail-table tbody {
        display: grid;
        gap: 8px;
    }

    #leaveTable tbody tr,
    .compare-table tbody tr,
    .king-table tbody tr,
    .king-detail-table tbody tr {
        display: grid;
        align-items: center;
        padding: 8px 10px;
        column-gap: 8px;
        row-gap: 4px;
        background: var(--bg-secondary);
        border: 3px solid var(--border-color);
        box-shadow: 3px 3px 0 var(--border-color);
    }

    #leaveTable tbody tr:hover,
    .compare-table tbody tr:hover,
    .king-table tbody tr:hover,
    .king-detail-table tbody tr:hover {
        transform: none;
        background: var(--bg-secondary);
        box-shadow: 3px 3px 0 var(--border-color);
    }

    #leaveTable td,
    .compare-table td,
    .king-table td,
    .king-detail-table td {
        min-width: 0;
        padding: 0;
        border-right: none;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* 欄名的共用樣式；預設不輸出 content，需要的欄位才逐欄開啟 */
    #leaveTable td::before,
    .compare-table td::before,
    .king-table td::before,
    .king-detail-table td::before {
        font-family: 'Outfit', sans-serif;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: var(--text-tertiary);
    }

    .leave-type {
        padding: 3px 8px;
        font-size: 10px;
        letter-spacing: 0.5px;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .message-link {
        padding: 4px 9px;
        font-size: 10px;
        letter-spacing: 0.5px;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    /* 沒有時間的記錄（data-empty）不必顯示「- ~ -」，直接留白 */
    #leaveTable td[data-empty],
    .king-detail-table td[data-empty] {
        display: none;
    }

    /* 「沒有符合條件的資料」不套卡片欄位配置，橫跨整列置中 */
    #leaveTable tbody tr td.no-data,
    .compare-table tbody tr td.no-data {
        grid-area: auto / 1 / auto / -1;
        padding: 24px 8px;
        font-size: 14px;
        text-align: center;
    }

    /* ----------------------------------------------------------------------
       請假記錄卡片
         姓名 ─────────────── 假別
         日期  起 ~ 迄 ─────── 時數
         訊息時間 ──────────── 連結
       ---------------------------------------------------------------------- */
    #leaveTable tbody tr {
        grid-template-columns: auto auto auto minmax(0, 1fr);
        grid-template-areas:
            "name name  name  type"
            "date start end   hours"
            "msg  msg   msg   link";
    }

    #leaveTable td[data-label="姓名"] {
        grid-area: name;
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 800;
    }

    #leaveTable td[data-label="請假日期"] {
        grid-area: date;
        font-weight: 700;
    }

    #leaveTable td[data-label="開始時間"] {
        grid-area: start;
    }

    #leaveTable td[data-label="結束時間"] {
        grid-area: end;
    }

    #leaveTable td[data-label="結束時間"]::before {
        /* 時間區間的波浪號屬內容而非欄名，字級跟著內文 */
        content: '~';
        margin-right: 4px;
        font-family: inherit;
        font-size: inherit;
        color: var(--text-tertiary);
    }

    #leaveTable td[data-label="時數"] {
        grid-area: hours;
        justify-self: end;
        font-size: 11px;
        white-space: nowrap;
    }

    #leaveTable td[data-label="時數"] strong {
        font-size: 15px;
    }

    #leaveTable td[data-label="假別"] {
        grid-area: type;
        justify-self: end;
    }

    /* 訊息時間屬次要資訊，縮小並加欄名以免和請假日期混淆 */
    #leaveTable td[data-label="訊息時間"] {
        grid-area: msg;
        font-size: 10px;
        color: var(--text-tertiary);
    }

    #leaveTable td[data-label="訊息時間"]::before {
        content: attr(data-label) ' ';
    }

    #leaveTable td[data-label="連結"] {
        grid-area: link;
        justify-self: end;
    }

    /* ----------------------------------------------------------------------
       請假王排行卡片
         名次 姓名 ─────────── 假別
         總時數 筆數 平均 ───── 明細
       ---------------------------------------------------------------------- */
    .king-table tbody tr {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "rank  name  name  type"
            "hours count avg   detail";
        row-gap: 7px;
    }

    .king-table td[data-label="名次"] {
        grid-area: rank;
    }

    .king-table td[data-label="姓名"] {
        grid-area: name;
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 800;
    }

    .king-table td[data-label="總時數"] {
        grid-area: hours;
        font-size: 11px;
        white-space: nowrap;
    }

    .king-table td[data-label="筆數"] {
        grid-area: count;
        font-size: 11px;
        color: var(--text-tertiary);
        white-space: nowrap;
    }

    .king-table td[data-label="平均時數"] {
        grid-area: avg;
        font-size: 11px;
        color: var(--text-tertiary);
        white-space: nowrap;
    }

    .king-table td[data-label="平均時數"]::before {
        content: '平均 ';
    }

    .king-table td[data-label="主要假別"] {
        grid-area: type;
        justify-self: end;
    }

    .king-table td[data-label="明細"] {
        grid-area: detail;
        justify-self: end;
    }

    .king-rank-badge {
        min-width: 30px;
        padding: 3px 7px;
        font-size: 12px;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--border-color);
    }

    .king-hours {
        font-size: 15px;
    }

    /* ----------------------------------------------------------------------
       個人明細卡片
         日期 ─────────────── 假別
         起 ~ 迄  時數 ─────── 連結
       ---------------------------------------------------------------------- */
    .king-detail-table tbody tr {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "date  date  date  type"
            "start end   hours link";
    }

    .king-detail-table td[data-label="請假日期"] {
        grid-area: date;
        font-size: 13px;
    }

    .king-detail-table td[data-label="開始時間"] {
        grid-area: start;
    }

    .king-detail-table td[data-label="結束時間"] {
        grid-area: end;
    }

    .king-detail-table td[data-label="結束時間"]::before {
        /* 時間區間的波浪號屬內容而非欄名，字級跟著內文 */
        content: '~';
        margin-right: 4px;
        font-family: inherit;
        font-size: inherit;
        color: var(--text-tertiary);
    }

    .king-detail-table td[data-label="時數"] {
        grid-area: hours;
        font-size: 11px;
        white-space: nowrap;
    }

    .king-detail-table td[data-label="時數"] strong {
        font-size: 14px;
    }

    .king-detail-table td[data-label="假別"] {
        grid-area: type;
        justify-self: end;
    }

    .king-detail-table td[data-label="連結"] {
        grid-area: link;
        justify-self: end;
    }

    /* ----------------------------------------------------------------------
       出缺勤比對卡片
       欄位多且名稱不可省略，改為兩欄式標籤配置
       ---------------------------------------------------------------------- */
    .compare-table tbody tr {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "status  name"
            "range   range"
            "punch   discord"
            "system  hours"
            "note    note";
        row-gap: 6px;
    }

    .compare-table td[data-label="狀態"] {
        grid-area: status;
    }

    .compare-table td[data-label="姓名"] {
        grid-area: name;
        font-family: 'Outfit', sans-serif;
        font-size: 15px;
        font-weight: 800;
    }

    .compare-table td[data-label="日期範圍"] {
        grid-area: range;
        font-weight: 700;
    }

    .compare-table td[data-label="打卡狀態"] {
        grid-area: punch;
    }

    .compare-table td[data-label="Discord 請假"] {
        grid-area: discord;
    }

    .compare-table td[data-label="系統請假記錄"] {
        grid-area: system;
    }

    .compare-table td[data-label="時數比對"] {
        grid-area: hours;
    }

    .compare-table td[data-label="備註"] {
        grid-area: note;
        padding-top: 5px;
        border-top: 2px solid var(--bg-tertiary);
    }

    /* 這幾欄光看數值不知道是哪一項，於上方補小字欄名 */
    .compare-table td[data-label="打卡狀態"]::before,
    .compare-table td[data-label="Discord 請假"]::before,
    .compare-table td[data-label="系統請假記錄"]::before,
    .compare-table td[data-label="時數比對"]::before,
    .compare-table td[data-label="備註"]::before {
        content: attr(data-label);
        display: block;
    }

    .status-icon {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        border-width: 2px;
    }
}

@media (max-width: 380px) {
    #leaveTable tbody tr,
    .compare-table tbody tr,
    .king-table tbody tr,
    .king-detail-table tbody tr {
        padding: 8px 9px;
        column-gap: 6px;
    }

    #leaveTable td,
    .compare-table td,
    .king-table td,
    .king-detail-table td {
        font-size: 11px;
    }

    #leaveTable td[data-label="姓名"],
    .king-table td[data-label="姓名"],
    .compare-table td[data-label="姓名"] {
        font-size: 14px;
    }
}