/**
 * TGF 響應式樣式與修正
 * 從 PTGL tgl.css 遷移
 */

/* ========================================
   響應式樣式
   ======================================== */

/* 響應式圖片（手機版） */
@media (max-width: 600px) {
    .responsive-img {
        width: 100px;
    }
}

/* ========================================
   SweetAlert2 字體大小修正
   ======================================== */

/**
 * 問題：app.css 設置 html { font-size: 62.5%; }，導致 1rem = 10px
 * SweetAlert2 的 .swal2-popup 使用 font-size: 1rem，導致基礎字體只有 10px
 * 所有內部元素使用 em 單位，相對於這個 10px，所以全部都很小
 *
 * 解決：直接修正 .swal2-popup 的基礎字體大小為 16px
 */

/* 修正 SweetAlert2 彈窗的基礎字體大小（最關鍵！） */
div:where(.swal2-container) div:where(.swal2-popup) {
    font-size: 16px !important; /* 覆蓋原本的 1rem (10px) */
}

/* Toast 模式也需要修正 */
.swal2-popup.swal2-toast {
    font-size: 16px !important;
}

/* 以下是額外的微調（可選） */

/* 彈窗標題 - 原本是 1.875em，現在基於 16px */
div:where(.swal2-container) h2:where(.swal2-title) {
    /* 1.875em × 16px = 30px - 已經正常，不需要額外設置 */
}

/* 按鈕文字 - 原本是 1em，現在基於 16px */
div:where(.swal2-container) button:where(.swal2-styled) {
    /* 1em × 16px = 16px - 已經正常，不需要額外設置 */
}

/* 如果還是覺得太小，可以調大一點 */
/*
div:where(.swal2-container) div:where(.swal2-popup) {
    font-size: 18px !important;
}
*/

/* ========================================
   分頁元素字體大小修正
   ======================================== */

/**
 * 問題：Bootstrap 預設的分頁元素字體太小（受 html { font-size: 62.5%; } 影響）
 * 解決：增大分頁元素的字體大小和按鈕尺寸，提升可讀性和可點擊性
 */

/* 增大分頁元素的字體大小 */
.pagination .page-link {
    font-size: 1.125rem;  /* 18px (基於 16px × 1.125，但實際會是 10px × 1.125 = 11.25px，所以使用 !important) */
    font-size: 18px !important;  /* 強制使用 18px，不受 html font-size 影響 */
    padding: 0.5rem 0.75rem;
}

/* 增大分頁按鈕的最小寬度 */
.pagination .page-item .page-link {
    min-width: 2.5rem;
    text-align: center;
}

/* 增大上一頁/下一頁箭頭符號 */
.pagination .page-link span {
    font-size: 1.25rem;  /* 20px */
    font-size: 20px !important;  /* 強制使用 20px */
}

ul.navbar-nav li.nav-item.dropdown .dropdown-menu span button {
    color: #305ba0;
    background: transparent !important;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    z-index: 3;
    width: 100%;
    border: none;
    padding: 0px;
}

ul.navbar-nav li.nav-item.dropdown .dropdown-menu span button:focus, ul.navbar-nav li.nav-item.dropdown .dropdown-menu span button:hover {
    color: #DF654B;
    background: transparent !important;
}

/* ========================================
   Bootstrap Table 分頁下拉選單修正
   ======================================== */

/**
 * 問題：Bootstrap Table 的分頁下拉選單（選擇每頁筆數）被父容器遮住
 * 原因：父容器可能有 overflow: hidden 或 overflow: auto 設定
 * 解決：設定所有可能的父容器為 overflow: visible
 */

/* 確保所有父容器不會裁切下拉選單 */
.content-page,
.news-content,
.rim,
.edit-form,
.bd-callout,
.bootstrap-table,
.bootstrap-table .fixed-table-toolbar,
.bootstrap-table .fixed-table-container,
.bootstrap-table .fixed-table-body,
.bootstrap-table .fixed-table-pagination,
.bootstrap-table .page-list,
.bootstrap-table .page-list .btn-group {
    overflow: visible !important;
}

/* 修正下拉選單樣式 */
.bootstrap-table .page-list .dropdown-menu {
    z-index: 99999 !important;
    background-color: #ffffff !important;
    border: 1px solid #999 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
    min-width: 60px !important;
    padding: 4px 0 !important;
}

/* 確保下拉選項可見且樣式正確 */
.bootstrap-table .page-list .dropdown-menu .dropdown-item {
    display: block !important;
    padding: 6px 16px !important;
    color: #333 !important;
    background-color: #ffffff !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

.bootstrap-table .page-list .dropdown-menu .dropdown-item:hover,
.bootstrap-table .page-list .dropdown-menu .dropdown-item:focus {
    background-color: #3bafda !important;
    color: #fff !important;
}

.bootstrap-table .page-list .dropdown-menu .dropdown-item.active {
    background-color: #e6f4fa !important;
    color: #3bafda !important;
    font-weight: bold !important;
}

.bootstrap-table .fixed-table-pagination .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
}