/* 讓表格文字水平、垂直居中 */
.select-table td {
    padding: 0;
    /* 移除 padding，讓 label 完全佔滿 */
    text-align: center;
    vertical-align: middle;
}

.select-table {
    border-collapse: separate;
    border-spacing: 0;
}

.select-table th,
.select-table td {
    border: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

/* === 表頭固定 === */

/* 第一層表頭 (All / 22G / 26G / 左上角空白) */
.select-table thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    /* 永遠固定在最上方 */
    z-index: 3;
    background: white;
}

/* 第二層表頭 (Argonaute / IP Enriched / Mutant Depleted ...) */
.select-table thead tr:nth-child(2) th {
    position: sticky;
    top: 25px;
    /* 根據第一層實際高度調整 */
    z-index: 3;
    background: white;
}

/* Argonaute 表頭 (第二層第一欄，需要同時固定 top+left) */
.select-table thead tr:nth-child(2) th:first-child {
    left: 0;
    z-index: 6;
    /* 比一般表頭高 */
    background: white;
}

/* 左上角交叉格 (第一層第一欄，需要同時固定 top+left) */
.select-table thead tr:nth-child(1) th:first-child {
    left: 0;
    z-index: 6;
    /* 和 Argonaute 表頭同一層級即可 */
    background: white;
}

/* === 第一欄固定 (Argonaute 欄位 in tbody) === */
.select-table th:first-child,
.select-table td:first-child {
    position: sticky;
    left: 0;
    /* 永遠固定在最左邊 */
    z-index: 4;
    /* 比表頭低一點就好 */
    background: white;
}


/* 讓 label 整個充滿儲存格，並使用 flex 來置中 checkbox */
.checkbox-cell {
    display: flex;
    align-items: left;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* 滑鼠移上去變成可點手指 */
    padding: 1rem;
    /* 增加內邊距讓整體看起來更大 */
}

/* hover 效果，方便使用者知道可點選 */
.checkbox-cell:hover {
    background-color: #f8f9fa;
}

/* 調整 checkbox 大小 */
.checkbox-cell input[type="checkbox"] {
    cursor: pointer;
    /* 鼠標移到 checkbox 上變成手指樣式 */
    width: 2rem;
    height: 2rem;
    margin-right: 5px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    /* 合併邊框 */
    text-align: center;
    /* 文字置中 */
}

.custom-table th,
.custom-table td {
    border: 1px solid gray;
    /* 邊框 */
    padding: 8px;
    /* 內邊距 */
}

.custom-table th {
    /* background-color: #f9f9f9; 表頭背景色 */
    font-weight: bold;
    /* 粗體 */
}

.dt-button {
    background-color: lightskyblue !important;
    /* 背景色 */
    color: black !important;
    /* 文字顏色 */
    border: none !important;
    /* 移除邊框 */
    border-radius: 5px !important;
    /* 圓角 */
    padding: 5px 15px !important;
    /* 內邊距 */
    font-weight: bold !important;
    /* 加粗文字 */
    cursor: pointer !important;
    /* 鼠標樣式 */
}

.dt-button:hover {
    background-color: navy !important;
    /* 滑鼠移動時的背景色 */
    color: white !important;
    /* 滑鼠移動時的文字顏色 */
}

.card-operation {
    width: 40%;
    /* 設定寬度佔父容器的 50% */
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin: auto;
    /* 讓卡片水平置中 */
}

.card-operation-header {
    background: lightgray;
    color: black;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.card-operation-body {
    display: flex;
    justify-content: space-around;
    /* ✅ 讓 radio button 平均分配 */
    align-items: center;
    /* ✅ 垂直居中對齊 */
    padding: 15px;
    position: relative;
    /* ✅ 讓 Difference 下方的 DX-DY 定位 */
    min-height: 50px;
    /* ✅ 設定最小高度，避免 Difference 增高影響佈局 */
}

.card-operation-body label {
    flex: 1;
    /* ✅ 讓每個 radio button 佔據相同寬度 */
    text-align: center;
    /* ✅ 讓文字置中 */
    white-space: nowrap;
}

.operation-diff-container {
    flex: 1;
    /* ✅ 讓 Difference 佔據與其他 radio 相同寬度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* ✅ 讓 DX-DY 相對於 Difference 定位 */
}

#difference-options {
    display: none;
    /* ✅ 預設隱藏 */
    position: absolute;
    top: 100%;
    /* ✅ 讓 DX-DY 顯示在 Difference 按鈕下方 */
    left: 50%;
    transform: translateX(-50%);
    /* ✅ 水平置中 */
    background: white;
    /* ✅ 背景顏色確保可讀性 */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    /* ✅ 確保不被其他元素蓋住 */
    display: flex;
    /* ✅ 讓 DX-DY 和 DY-DX 並排 */
    gap: 15px;
    /* ✅ 設定間距 */
}

.card-dataset {
    width: 40%;
    /* 設定寬度佔父容器的 50% */
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin: auto;
    /* 讓卡片水平置中 */
}

.card-dataset-header {
    background: rgb(255, 255, 223);
    color: black;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

#dataset-table {
    width: 100%;
    border-collapse: collapse;
}

#dataset-table th,
#dataset-table td {
    border: 1px solid #ddd;
    text-align: center;
}

#dataset-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Argonaute dropdown button text */
#argonauteDropdown {
    font-size: 1.5rem;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    /* w-100 時更穩 */
    white-space: nowrap;
    /* 不換行 */
    overflow: hidden;
    /* 超出隱藏 */
    text-overflow: ellipsis;
    /* ... */
    padding-right: 2.2rem;
    /* 預留給 dropdown caret（避免文字蓋到箭頭） */
}

/* Dropdown item (option) text */
.dropdown-menu .dropdown-item {
    font-size: 1.4rem;
    line-height: 1.6;
}

/* Checkbox larger for readability */
.dropdown-menu input.argonaute-option {
    margin-right: 10px;
    transform: scale(1.15);
    vertical-align: middle;
}

/* Keep the dropdown from closing when clicking inside (visual comfort) */
.dropdown-menu {
    user-select: none;
}

/* Argonaute dropdown: Select all / Clear buttons */
#arg-select-all,
#arg-clear-all {
    font-size: 1.4rem;
    /* 字體大小（可自行調 1.0–1.15） */
    font-weight: 600;
    /* 稍微加粗，操作型按鈕更清楚 */
    padding: 4px 10px;
    /* 讓按鈕不會太扁 */
    line-height: 1.4;
}

/* 若想讓兩顆按鈕高度一致、間距舒服 */
#arg-select-all+#arg-clear-all {
    margin-left: 6px;
}

#arg-select-all {
    border-width: 2px;
}

#arg-clear-all {
    border-width: 2px;
}

.select-table th,
.select-table td {
    vertical-align: middle;
}

/* Argonaute button bar: horizontal scroll, looks like nav/pills */
.argonaute-switchbar {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    gap: 8px;
    padding-left: 4px;
}

/* 可選：在較寬畫面允許換行（避免一直捲） */
@media (min-width: 992px) {
    .argonaute-switchbar {
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* 每個按鈕不要被壓扁 */
.argonaute-switchbar .btn {
    flex: 0 0 auto;
    font-size: 1.5rem;
}

/* ===== Quick Examples ===== */
.quick-examples {
    font-size: 1.75rem;
    /* 整體放大（原本約 1.05rem） */
}

.quick-examples strong {
    font-size: 1.5rem;
    /* Quick examples: 標題再大一點 */
}

.quick-examples a {
    font-size: 1.5rem;
    /* ex1 / ex2 連結文字 */
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.quick-examples a:hover {
    color: #0d6efd;
    /* Bootstrap primary */
    text-decoration-thickness: 2px;
}

.example-label {
    font-size: 1.5rem;
}

.tooltip-label {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.tooltip-label:hover {
    text-decoration-style: solid;
}

.tooltip-inner {
    font-size: 1.3rem;
    /* 原本大約是 0.875rem */
    line-height: 1.4;
    max-width: 320px;
    /* 避免長 citation 被擠成一行 */
}

/* 讓 Dataset：+ buttons 同一行 */
.dataset-switch-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* buttons 太多時才會自動換行 */
}

/* Dataset：字不要被壓扁換行 */
.dataset-switch-label {
    white-space: nowrap;
    font-weight: 700;
}

/* 讓 switchbar 本身是橫向 */
.dataset-switch-row .argonaute-switchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* buttons 太多時才換行 */
}

/* 讓 datasetPick 被選取時保持樣式（不依賴 Bootstrap 的 :checked + label） */
.argonaute-switchbar .argonaute-pill label.btn.is-active {
    background: #0d6efd;
    /* Bootstrap primary */
    color: #fff;
    border-color: #0d6efd;
}

/* hover 一樣好看 */
.argonaute-switchbar .argonaute-pill label.btn:hover {
    filter: brightness(0.95);
}

.example-panel.is-inactive .mode-title,
.example-panel.is-inactive .mode-sub,
.example-panel.is-inactive .example-list {
    color: #999;
}

.mode-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mode-label {
    display: block;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.mode-title {
    font-weight: 700;
}

.mode-sub {
    font-size: 1.7rem;
}

.example-list {
    margin-top: 8px;
}

.example-item {
    display: inline-block;
    margin: 4px 8px 0 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #0d6efd;
    /* font-size: 1.5rem; */
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.example-item:hover {
    background: #dce8ff;
}

/* inactive 內容不能互動（包含 example list 的 <a>） */
.example-panel.is-inactive a,
.example-panel.is-inactive button,
.example-panel.is-inactive [role="button"] {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* 也禁止鍵盤 tab 進去 */
.example-panel.is-inactive a {
    outline: none;
}

.filter-mapping {
    pointer-events: none;
}

.enrichment-swal-html {
    max-height: 70vh;
    overflow-y: auto;
}

.enrichment-table {
    width: 100%;
    table-layout: fixed;
    font-size: 1.4rem;
}

.enrichment-table th,
.enrichment-table td {
    width: 33.333%;
}

.results-toolbar {
    display: flex;
    align-items: end;
    /* label + select 底部對齊 */
    gap: 20px;
    /* 兩個區塊間距 */
    justify-content: flex-start;
    /* 靠左 */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 5px !important;
    /* 往下撐開 */
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 5px !important;
    /* 往上撐開 */
}

.sticky-results-head th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-top: 1px solid #dee2e6 !important;
}

.enrichment-swal-popup {
    font-size: 1.4rem;
}

.datasets-link {
    cursor: pointer;
    text-decoration: underline;
}

#transcriptsDataTable {
    width: 100% !important;
}

#transcriptsDataTable_wrapper {
    width: 100%;
}

#transcriptsDataTable {
    width: 100% !important;
}

#transcriptsDataTable_wrapper {
    width: 100%;
}

/* DataTables scrollX header/body 寬度同步 */
#transcriptsDataTable_wrapper .dataTables_scroll {
    width: 100%;
}


/* 避免 header 文字被壓縮 */
#transcriptsDataTable_wrapper th,
#transcriptsDataTable_wrapper td {
    white-space: nowrap;
}

#dataset-table th,
#dataset-table td {
    text-align: center;
    vertical-align: middle;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

#dataset-table .checkbox-cell,
#dataset-table .history-checkbox-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    min-height: 2.2rem;
}

#dataset-table input[type="checkbox"] {
    margin: 0;
}

#dataset-table td:nth-child(2) {
    white-space: normal;
    line-height: 1.5;
}