/* T146: tables stay tables on phones and laptops (client 2026-10-30).
   Replaces the T131/T136 "card" layouts: tables that do not fit scroll sideways with the first column
   held in place, and a short swipe hint (added by mobile-tables.js) appears above them.
   Loaded after every other stylesheet; desktop (1440px and up) layout is unchanged. */

/* ---------- social-register tables (wide ones were cards below 1440px, all of them below 1000px) ---------- */
@media (max-width: 1439.98px) {
    html body .page_main .social-register .social-register__mobile { display: none !important; }
    html body .page_main .social-register .social-register__table {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    html body .page_main .social-register .social-register__table > :is(thead, tbody) { width: 100%; }
    /* .t146-col1 = cells that truly sit in column 1 (computed by mobile-tables.js, merged cells included). */
    html body .page_main .social-register .social-register__table .t146-col1 {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 5px 0 7px -5px rgb(31 50 59 / 32%);
    }
    html body .page_main .social-register .social-register__table tbody .t146-col1 { background: #fff; }
    html body .page_main .social-register .social-register__table tbody tr:nth-child(even) > .t146-col1 { background: var(--table-v2-row-alt, #f6f9fa); }
    html body .page_main .social-register .social-register__table thead .t146-col1 { z-index: 3; background: var(--table-v2-header-bg); }
}

/* ---------- table-v2 tables that used the stacked-card layout ---------- */
@media (max-width: 767.98px) {
    html body .page_main .table-v2-mobile--stack .table-v2-scroll {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border: 1px solid var(--table-v2-border) !important;
    }
    html body .page_main .table-v2-mobile--stack .table-v2-table {
        display: table !important;
        width: 100% !important;
        min-width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse;
    }
    html body .page_main .table-v2-mobile--stack .table-v2-table colgroup { display: table-column-group !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-table thead { display: table-header-group !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-table tbody { display: table-row-group !important; gap: 0 !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-table tfoot { display: table-footer-group !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-row,
    html body .page_main .table-v2-context--target-register .table-v2-row--data {
        display: table-row !important;
        width: auto !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent;
        grid-template-columns: none !important;
    }
    html body .page_main .table-v2-mobile--stack .table-v2-cell,
    html body .page_main .table-v2-context--target-register .table-v2-row--data > .table-v2-cell {
        display: table-cell !important;
        width: auto !important;
        min-width: 0;
        grid-template-columns: none !important;
        padding: 9px 8px !important;
        border: 1px solid var(--table-v2-border) !important;
        background: inherit;
        vertical-align: middle;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-weight: inherit;
    }
    html body .page_main .table-v2-mobile--stack .table-v2-row--header .table-v2-cell { background: var(--table-v2-header-bg); color: var(--table-v2-header-fg); }
    html body .page_main .table-v2-mobile--stack .table-v2-cell::before { content: none !important; display: none !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-cell:is(.table-v2-data--number, .table-v2-data--integer, .table-v2-data--decimal, .table-v2-data--percent, .table-v2-data--currency, .table-v2-data--year, .is-nowrap) { white-space: nowrap !important; overflow-wrap: normal; }
    html body .page_main .table-v2-mobile--stack .table-v2-cell.table-v2-align--left { text-align: left !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-cell.table-v2-align--center { text-align: center !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-cell.table-v2-align--right { text-align: right !important; }
    /* First column stays put while the rest scrolls. */
    html body .page_main .table-v2-mobile--stack .table-v2-row > .table-v2-cell.t146-col1 {
        position: sticky !important;
        left: 0;
        z-index: 2;
        min-width: 4.5em;
        max-width: 38vw;
        background: #fff;
        box-shadow: 5px 0 7px -5px rgb(31 50 59 / 32%);
        text-align: left !important;
    }
    html body .page_main .table-v2-mobile--stack .table-v2-row:nth-child(even) > .table-v2-cell.t146-col1 { background: var(--table-v2-row-alt, #f6f9fa); }
    html body .page_main .table-v2-mobile--stack .table-v2-row--header > .table-v2-cell.t146-col1 { z-index: 4; background: var(--table-v2-header-bg); }
    /* Cells that were "first in their row" only because of a merged cell above must scroll normally. */
    html body .page_main .table-v2-mobile--stack .table-v2-row > .table-v2-cell:not(.t146-col1) { position: static !important; box-shadow: none; }
    /* Short numeric columns should not be squeezed to one character wide. */
    html body .page_main .table-v2-mobile--stack .table-v2-row--header .table-v2-cell { min-width: 3.6em; }
}

/* ---------- shared phone typography ---------- */
@media (max-width: 767.98px) {
    html body .page_main :is(.social-register__table, .table-v2-mobile--stack .table-v2-table) { font-size: 14px !important; line-height: 1.5; }
    html body .page_main .social-register__table :is(th, td) { padding: 9px 8px !important; line-height: 1.5; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
    html body .page_main .social-register__table .is-short { white-space: nowrap; overflow-wrap: normal; }
    html body .page_main .social-register__table thead th,
    html body .page_main .table-v2-mobile--stack .table-v2-row--header .table-v2-cell { font-size: 13px !important; line-height: 1.4; }
    html body .page_main .social-register__table tbody .t146-col1 { min-width: 4.5em; max-width: 38vw; }
}

/* ---------- cell sizing (classes added by mobile-tables.js) ---------- */
@media (max-width: 1439.98px) {
    html body .page_main .social-register__table .t146-short { white-space: nowrap !important; overflow-wrap: normal !important; }
    html body .page_main .social-register__table .t146-long { min-width: 9.5em; }
}
@media (max-width: 767.98px) {
    html body .page_main .table-v2-mobile--stack .table-v2-cell.t146-short { white-space: nowrap !important; overflow-wrap: normal !important; }
    html body .page_main .table-v2-mobile--stack .table-v2-cell.t146-long { min-width: 9.5em; }
    html body .page_main .social-register__table .t146-long { min-width: 8.5em; }
}

/* ---------- labels spanning several columns ("員工總計", "合計") stay readable while swiping ---------- */
@media (max-width: 1439.98px) {
    html body .page_main .social-register__table .t146-span-label { position: sticky; left: 8px; display: inline-block; }
}
@media (max-width: 767.98px) {
    html body .page_main .table-v2-mobile--stack .t146-span-label { position: sticky; left: 8px; display: inline-block; }
}

/* ---------- swipe hint (inserted by mobile-tables.js only when a table is wider than the screen) ---------- */
.t146-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 6px;
    color: #5f727b;
    font-size: 12.5px;
    line-height: 1.4;
}
.t146-swipe-hint[hidden] { display: none !important; }
.t146-swipe-hint__arrow { display: inline-block; font-size: 14px; animation: t146-nudge 1.6s ease-in-out infinite; }
@keyframes t146-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .t146-swipe-hint__arrow { animation: none; } }
@media print { .t146-swipe-hint { display: none !important; } }