/* ----------------------------⭣RWD⭣---------------------------- */

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
}

.dataTable>tbody>tr.child ul.dtr-details li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 0;
}

.dataTable>tbody>tr.child ul.dtr-details li .dtr-title,
.dataTable>tbody>tr.child ul.dtr-details li .dtr-data {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* ----------------------------⭡ RWD ⭡-------------------------- */
/* -----------------⭣ DataTable pagination 樣式 ⭣---------------- */

.table-pagination-brand {
    --table-paging-button-bg: var(--web-tertiary);
    --table-paging-button-color: black;
}

.table-pagination-black {
    --table-paging-button-bg: black;
    --table-paging-button-color: white;
}

/* design token 預設值 */
:where(.dt-paging) {
    --table-paging-button-bg: black;
    --table-paging-button-color: white;
}

/* 頁碼與表格間距 */
div.dt-container .dt-paging {
    margin-top: 3rem;
}

/* 頁碼 */
div.dt-container .dt-paging nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* 頁碼按鈕 */
div.dt-container .dt-paging button.dt-paging-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin: 0;
    border-radius: 9999px;
    font-size: 1.125rem;
    line-height: 1;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    transition: background-color 0.2s, color 0.2s;
}

/* 可點擊且選中之頁碼按鈕 */
div.dt-container .dt-paging nav button.dt-paging-button.current,
div.dt-container .dt-paging nav button.dt-paging-button[aria-current="page"] {
    background: var(--table-paging-button-bg);
    color: var(--table-paging-button-color) !important;
    border: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

/* 可點擊且未選中之頁碼按鈕，懸浮樣式 */
div.dt-container .dt-paging nav button.dt-paging-button:not(.current):not([aria-current="page"]):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: transparent;
    color: black !important;
    border-color: rgba(225, 225, 225, 0.6);
    box-shadow: none;
}

/* 不可點擊之頁碼按鈕 */
div.dt-container .dt-paging button.dt-paging-button:disabled,
div.dt-container .dt-paging button.dt-paging-button.disabled,
div.dt-container .dt-paging button.dt-paging-button[aria-disabled="true"] {
    background: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

/* 不可點擊之頁碼按鈕，懸浮樣式 */
div.dt-container .dt-paging button.dt-paging-button:disabled:hover,
div.dt-container .dt-paging button.dt-paging-button.disabled:hover,
div.dt-container .dt-paging button.dt-paging-button[aria-disabled="true"]:hover {
    background: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

/* -----------------⭡ DataTable pagination 樣式 ⭡---------------- */
/* ------------------------⭣ Table List ⭣---------------------- */


#table-list {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
}

#table-list tbody {
    border-top: 4px solid var(--neutral-900);
    border-bottom: 4px solid var(--neutral-900);
}

#table-list tbody td {
    /* 這裡不放 padding，改讓 .table-list-toggle 按鈕自己吃這圈留白，
       這樣按鈕的可點擊範圍才會跟整列的視覺範圍（含 hover 那圈）一致 */
    padding: 0;
    color: var(--neutral-900);
    vertical-align: middle;
    border-bottom: 1px solid var(--neutral-300);
}

/* dt整列都能點擊 */
.table-list-toggle {
    padding: 24px 44px 24px 40px;
}

/* 展開內容區塊：恢復 td 左右下留白 */
.table-list-panel {
    padding: 0 44px 24px 40px;
}

#table-list.display tbody tr:hover>* {
    background: var(--neutral-100);
}

#table-list.display tbody tr,
#table-list.display tbody tr>*,
#table-list.display tbody tr.odd>*,
#table-list.display tbody tr.even>* {
    background: transparent;
    box-shadow: none;
}

/* ------------------------⭡ Table List ⭡---------------------- */
/* --------------------⭣ Table Download List ⭣----------------- */

#table-download-list {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
}

#table-download-list tbody tr {
    border-bottom: 1px solid var(--neutral-300);
}

#table-download-list.display tbody tr:hover>* {
    background: var(--neutral-100);
}

#table-download-list thead th {
    padding: 12px 16px 12px 16px;
}

#table-download-list tbody tr td {
    padding: 20px 16px 20px 16px;
    border-bottom: 1px solid var(--neutral-200);
}

/* Zebra Stripe */
#table-download-list.display tbody tr,
#table-download-list.display tbody tr>*,
#table-download-list.display tbody tr.odd>*,
#table-download-list.display tbody tr.even>* {
    background-color: #fff;
    box-shadow: none;
}

/* ------------------⭣  Table Download List  ⭣----------------- */
/* --------------------⭣ Table Article-card ⭣------------------ */

#table-article {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
    display: block;
}

#table-article thead {
    display: none;
}

#table-article tbody {
    width: 100%;
}

#table-article tbody tr {
    display: block;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
}

#table-article.dataTable>tbody>tr>th,
#table-article.dataTable>tbody>tr>td {
    padding: 0;
}

#table-article tbody tr td {
    display: block;
    padding: 0;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
}

#table-article :is(tbody, tr, td),
#table-article {
background: transparent !important;
box-shadow: none !important;
}

#table-article .dt-empty {
    display: none;
}

/* -------------------⭡ Table Article-card ⭡------------------- */
/* -------------------⭣ Table Article-list ⭣------------------- */

#table-article-list {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
}

#table-article-list.display tbody tr:hover>* {
    background: var(--neutral-100);
}

#table-article-list thead th {
    padding: 0;
}

#table-article-list tbody tr td {
    padding: 0;
    /* border-bottom: 1px solid var(--neutral-200); */
}

/* Zebra Stripe */
#table-article-list.display tbody tr,
#table-article-list.display tbody tr>*,
#table-article-list.display tbody tr.odd>*,
#table-article-list.display tbody tr.even>* {
    background-color: #fff;
    box-shadow: none;
}

/* -------------------⭡ Table Article-list ⭡------------------- */
/* ------------------------⭣ Table Photo ⭣--------------------- */

#table-photo {
    display: block;
    width: 100%;
    background: transparent;
}

#table-photo tbody tr {
    display: block;
    width: 100%;
}

#table-photo tbody td {
    display: block;
}

#table-photo.display tbody tr,
#table-photo.display tbody tr:hover,
#table-photo.display tbody tr>td {
    background: transparent;
    box-shadow: none;
}

#table-photo tbody td {
    padding: 0;
    border: 0;
}

#table-photo tbody img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px;
    transition: transform 0.25s ease;
}

#table-photo tbody tr:hover img,
#table-photo tbody a:focus-visible img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    #table-photo tbody img {
        transition: none;
    }

    #table-photo tbody tr:hover img,
    #table-photo tbody a:focus-visible img {
        transform: none;
    }
}

/* ------------------------⭡ Table Photo ⭡---------------------- */
/* ------------------------⭣  fileGroup  ⭣---------------------- */

.fileGroup tbody tr td {
    border: none;
    padding: 0 !important;
}

.fileGroup {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
}

.fileGroup thead th {
    padding: 0;
}

.fileGroup tbody tr td {
    padding: 0;
}

/* Zebra Stripe */
.fileGroup.display tbody tr,
.fileGroup.display tbody tr>*,
.fileGroup.display tbody tr.odd>*,
.fileGroup.display tbody tr.even>* {
    background-color: #fff !important;
    box-shadow: none !important;
}

/* ------------------------⭡  fileGroup  ⭡---------------------- */
/* --------------------⭣table-repair-list ⭣--------------------- */
/* Header: green background  */
#table-repair-list thead tr th {
    color: white !important;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border: none !important;
    background-color: var(--web-primary-600) !important;
}

#table-repair-list thead tr th.is-first-visible {
    border-radius: 36px 0 0 36px;
}

#table-repair-list thead tr th.is-last-visible {
    border-radius: 0 36px 36px 0;
}

#table-repair-list thead tr th.is-first-visible.is-last-visible {
    border-radius: 36px;
}

#table-repair-list tbody tr {
    border-bottom: 2px solid #999999;
    transition: background-color 0.2s;
}

#table-repair-list tbody tr:first-child {
    border-top: 2px solid #999999;
}

#table-repair-list tbody tr:hover,
#table-repair-list tbody tr:focus-within {
    background-color: #F3F9D7 !important;
}

#table-repair-list tbody tr:hover .category-badge,
#table-repair-list tbody tr:focus-within .category-badge {
    background-color: black !important;
    border-color: black !important;
    color: white !important;
}

#table-repair-list tbody tr td {
    padding: 1rem 1.5rem;
    border: none !important;
    vertical-align: middle;
}

#table-repair-list tbody::before {
    content: '';
    display: table-row;
    height: 36px;
}

/* 展開列的標題圖示是白色，收合展開後強制轉黑 */
#table-repair-list .dtr-details img {
    filter: brightness(0);
}

/* -------------------⭡ table-repair-list ⭡-------------------- */