.sticky-top {
    background-color: var(--bs-body-bg)
}

html[data-bs-theme="dark"] .sticky-top {
    background-color: var(--bs-body-bg)
}

/* ---- Page ---- */
@media (max-width: 760px) {
    .pagination {
        margin-bottom: 10px !important;
    }

    .page-total {
        width: 100%;
        justify-content: center !important;
    }
}

.card-glass {
    background: rgba(255, 255, 255, 0.10); /* 提高透明度，讓背後更模糊 */
    backdrop-filter: blur(24px) saturate(150%); /* 加強模糊與飽和感 */
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.25); /* 微亮邊框，區分層次 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); /* 外陰影 + 內亮線 */
    transition: all 0.3s ease;
}

/* ---- Loading Msg ---- */
.swal-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    animation: swalFadeIn 0.35s ease-out;
}

@keyframes swalFadeIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---- Icon ---- */
.swal-icon {
    font-size: 2rem;
    font-weight: bold;
    /*color: var(--bs-primary);*/
    animation: swalIconBounce 0.6s ease;
}

@keyframes swalIconBounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* ---- Buttons ---- */
.swal-btn-primary {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50rem;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
    transition: all 0.25s ease;
}

    .swal-btn-primary:hover {
        background: var(--bs-primary-dark, #0b5ed7);
        transform: translateY(-1px);
        color: #fff;
    }

.swal-btn {
    border-radius: 50rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

    .swal-btn:hover {
        transform: translateY(-1px);
    }

/* ---- Dark mode adaptation ---- */
html[data-bs-theme="dark"] .swal-card {
    background: #222;
    color: #eee;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
}

html[data-bs-theme="dark"] .swal-btn-primary {
    background: var(--bs-primary);
    color: #fff;
}

html[data-bs-theme="dark"] .swal-icon {
    /*color: var(--bs-info);*/
}

.btn {
}

html[data-bs-theme="dark"] [class^="btn-outline-"],
html[data-bs-theme="dark"] [class*=" btn-outline-"] {
    color: #fff !important;
}

.multi-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 顯示兩行 */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}


/* === 手機：把每個 <td> 做成「標籤｜值」兩欄，穩定不跑版 === */
@media (max-width: 767.98px) {
    /* 隱藏表頭（桌機用 d-md-xx 類別顯示即可） */
    .table-mobile thead, .table-mobile colgroup {
        display: none !important;
    }

    /* 每列做成卡片外框 */
    .table-mobile tbody tr {
        display: block;
        padding: .75rem;
        margin-top: .5rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        background-color: var(--bs-body-bg);
    }

    /* 每個 td 自己變兩欄 grid → 左標籤、右值 */
    .table-mobile td {
        display: grid;
        grid-template-columns: 5em 1fr; /* 左欄固定寬，右欄自動撐開 */
        gap: .25rem .5rem;
        align-items: center; /* 垂直置中 */
        justify-content: start; /* 水平靠左 */
        padding: .5rem !important;
        border: 0 !important;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        text-align: start !important;
    }

        /* 強化內部元素垂直置中（避免 input / checkbox 偏移） */
        .table-mobile td > * {
            vertical-align: middle;
            align-self: center; /* 重點：確保右側元素居中 */
        }

        /* 左側標籤 */
        .table-mobile td::before {
            content: attr(data-label);
            color: var(--bs-secondary-color);
            font-size: .875rem;
            line-height: 1.2;
            align-self: center; /* ← 改成 center，而不是 start */
        }


        /* 右側內容預設靠左；數字欄保持靠右 */
        .table-mobile td.text-end {
            text-align: right;
        }

            .table-mobile td.text-end::before {
                text-align: left;
            }

        /* 置中欄位（例如狀態 badge） */
        .table-mobile td.text-center {
            text-align: left;
        }
            /* 內容仍在右欄，通常左對齊更穩 */
            .table-mobile td.text-center > * {
                justify-self: start;
            }

        /* 操作欄：佔滿一整列，按鈕好點 */
        .table-mobile td[data-full] {
            grid-template-columns: 1fr; /* 只有內容，不要再顯示左標籤欄 */
            padding-top: .5rem !important;
        }

            .table-mobile td[data-full]::before {
                content: none;
            }

            .table-mobile td[data-full] .btn {
                width: 100%;
            }
}

/* 桌機維持表格語義與對齊 */
@media (min-width: 768px) {
    .table-mobile th, .table-mobile td {
        vertical-align: middle;
    }
}

/* 打開時輕微浮起 */
.theme-modal.show .modal-content {
    transform: translateY(0) scale(1);
    box-shadow: 0 24px 60px rgba(0,0,0,.38), 0 10px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.05) inset;
}

/* （可選）開啟半透明背景，讓主卡片更浮 */
.modal-backdrop.show {
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 1; /* 覆蓋 bootstrap 的淡入 */
}