/**
 * bs5-migrate.css
 * jQuery Mobile → Bootstrap 5 相容層
 *
 * 讓現有 HTML 中的 jQuery Mobile class / data-role 在移除 JM 函式庫後
 * 仍能正確顯示，無需立即修改所有 PHP 檔案。
 * 後續各頁面改寫完成後，可逐步移除本檔案中的對應規則。
 *
 * 品牌色：主色 #0469BC（原 header background）
 */

/* =================================================================
   1. 多頁面結構（data-role="page"）
   ================================================================= */

[data-role="page"] {
    display: none;          /* 由 app-router.js 控制顯示 */
    min-height: 100vh;
    padding-bottom: 70px;   /* 為固定底部導覽列留空間 */
    max-width: 800px;       /* 模擬手機畫面最大寬度 */
    margin-left: auto;
    margin-right: auto;
}

/* app-router.js 啟用前的 fallback：若 JS 未載入，顯示第一個 page */
[data-role="page"]:first-of-type {
    display: block;
}

/* app-router.js 標記的顯示頁面 */
[data-role="page"].jm-active {
    display: block;
}

/* Dialog 類型的 page（data-dialog="true"）
   這些 dialog 頁面現在是獨立完整頁面（非 jQuery Mobile iframe/popup），
   直接顯示為一般全螢幕頁面，不需要浮動框與背景遮罩。 */
[data-role="page"][data-dialog="true"].jm-active {
    display: block;
    background: #fff;
    min-height: 100vh;
    padding-bottom: 70px;
}

/* 不需要背景遮罩 */
[data-role="page"][data-dialog="true"].jm-active::before {
    display: none;
}

/* =================================================================
   2. Header / Footer 區域
   ================================================================= */

[data-role="header"] {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: #0469BC;
    color: #fff;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    min-height: 50px;
}

[data-role="header"] h1,
[data-role="header"] h2,
[data-role="header"] h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
    flex: 1;
    text-align: center;
}

[data-role="footer"] {
    /* include_footer.php 已移至 </body> 前統一引入，此 wrapper 現為空，隱藏之 */
    display: none;
}

/* =================================================================
   3. Content 區域
   ================================================================= */

[data-role="content"],
.ui-content,
[role="main"].ui-content {
    padding: 1rem;
    font-family: Arial, "微軟正黑體";
    font-size: 16px;
    line-height: 1.6;
}

/* =================================================================
   4. 按鈕（ui-btn 系列）
   ================================================================= */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: 100%;              /* JM 按鈕預設全寬 */
    box-sizing: border-box;
    text-align: center;
}

/* ui-btn-a → 灰色（secondary） */
.ui-btn-a {
    background-color: #6c757d;
    color: #fff !important;
    border-color: #6c757d;
}
.ui-btn-a:hover, .ui-btn-a:focus {
    background-color: #5c636a;
    border-color: #565e64;
    color: #fff !important;
}

/* ui-btn-b → 藍色（primary）*/
.ui-btn-b {
    background-color: #0469BC;
    color: #fff !important;
    border-color: #0469BC;
}
.ui-btn-b:hover, .ui-btn-b:focus {
    background-color: #035da5;
    border-color: #035696;
    color: #fff !important;
}

/* ui-btn-c → 綠色（success）*/
.ui-btn-c {
    background-color: #198754;
    color: #fff !important;
    border-color: #198754;
}
.ui-btn-c:hover, .ui-btn-c:focus {
    background-color: #157347;
    border-color: #146c43;
    color: #fff !important;
}

/* inline 按鈕（JM data-inline="true"）*/
[data-inline="true"],
.ui-btn[data-inline="true"] {
    width: auto;
    display: inline-flex;
}

/* mini 按鈕 */
[data-mini="true"],
.ui-btn[data-mini="true"] {
    padding: 0.2rem 0.5rem;
    font-size: 0.875rem;
}

/* =================================================================
   5. 圓角 & 陰影（大量使用的 JM class）
   ================================================================= */

.ui-corner-all  { border-radius: 0.375rem !important; }
.ui-corner-top  { border-radius: 0.375rem 0.375rem 0 0 !important; }
.ui-corner-bottom { border-radius: 0 0 0.375rem 0.375rem !important; }
.ui-shadow      { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.1) !important; }

/* =================================================================
   6. Grid 系統（ui-grid-a/b/c → flex）
   ================================================================= */

.ui-grid-a,
.ui-grid-b,
.ui-grid-c,
.ui-grid-d {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.25rem;
    box-sizing: border-box;
}

/* ui-grid-a：2欄 */
.ui-grid-a > .ui-block-a,
.ui-grid-a > .ui-block-b {
    flex: 1 1 calc(50% - 0.125rem);
    box-sizing: border-box;
}

/* ui-grid-b：3欄 */
.ui-grid-b > .ui-block-a,
.ui-grid-b > .ui-block-b,
.ui-grid-b > .ui-block-c {
    flex: 1 1 calc(33.33% - 0.17rem);
    box-sizing: border-box;
}

/* ui-grid-c：4欄 */
.ui-grid-c > .ui-block-a,
.ui-grid-c > .ui-block-b,
.ui-grid-c > .ui-block-c,
.ui-grid-c > .ui-block-d {
    flex: 1 1 calc(25% - 0.19rem);
    box-sizing: border-box;
}

/* =================================================================
   7. 表單相關
   ================================================================= */

/* Label 隱藏（無障礙保留）*/
.ui-hide-label > label {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    margin: -1px;
}

/* Input 基本樣式 */
.ui-input-text,
input[type="text"].ui-input-text,
input[type="password"].ui-input-text {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #212529;
    box-sizing: border-box;
}

/* Controlgroup */
[data-role="controlgroup"] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
[data-role="controlgroup"][data-type="horizontal"] {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Fieldcontain */
[data-role="fieldcontain"] {
    margin-bottom: 1rem;
}

/* =================================================================
   8. Listview（data-role="listview"）
   ================================================================= */

[data-role="listview"] {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #dee2e6;
}

[data-role="listview"] > li {
    border-bottom: 1px solid #dee2e6;
}

[data-role="listview"] > li > a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: background-color .15s;
}

[data-role="listview"] > li > a:hover {
    background-color: #f8f9fa;
    color: #0469BC;
}

/* =================================================================
   9. Collapsible（data-role="collapsible"）
   ================================================================= */

[data-role="collapsible"] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

[data-role="collapsible"] > h1,
[data-role="collapsible"] > h2,
[data-role="collapsible"] > h3,
[data-role="collapsible"] > h4 {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}

/* =================================================================
   10. Navbar（data-role="navbar"）
   ================================================================= */

/* 注意：data-role="navbar" 有兩種用途：
   (a) 底部導覽列 footer navbar → 已被 include_footer.php 的 BS5 navbar 取代，
       外層由 #footerDiv 包覆，內容應隱藏
   (b) 頁面內 tab 分頁列（在 data-role="tabs" 內部）→ 必須顯示
   以下樣式讓它在 tabs 內顯示為 Bootstrap tabs 風格 */

/* 全域隱藏：底部 footer 用的 navbar（已由 Bootstrap fixed-bottom 取代） */
[data-role="navbar"] {
    display: none;
}

/* data-role="tabs" 內的 navbar → 作為分頁標籤列顯示（由 jm-tabs.js 驅動） */
[data-role="tabs"] > [data-role="navbar"] {
    display: block;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0.75rem;
}

[data-role="tabs"] > [data-role="navbar"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

[data-role="tabs"] > [data-role="navbar"] ul li {
    display: block;
}

[data-role="tabs"] > [data-role="navbar"] ul li a {
    display: block;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    color: #0469BC;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0;
    cursor: pointer;
    transition: background-color .15s;
    margin-bottom: -2px; /* 蓋住 border-bottom */
}

[data-role="tabs"] > [data-role="navbar"] ul li a:hover {
    background-color: #f0f5ff;
}

[data-role="tabs"] > [data-role="navbar"] ul li a.ui-btn-active {
    background-color: #fff;
    color: #212529;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}

/* tab 內容面板 */
[data-role="tabs"] > .jm-tab-panel {
    display: none;
}
[data-role="tabs"] > .jm-tab-panel.jm-tab-active {
    display: block;
}

/* =================================================================
   11. 主題色相容（data-theme="b" → 主色藍）
   ================================================================= */

[data-theme="a"] { /* 灰色 */ }
[data-theme="b"] { /* 藍色，依 .ui-btn-b 處理 */ }

/* =================================================================
   12. 底部導覽列預留空間（配合固定底部 navbar）
   ================================================================= */

body {
    padding-bottom: 65px;   /* 避免內容被底部 navbar 遮住 */
}

/* 桌機才套用外框效果，手機不受影響 */
@media (min-width: 800px) {
    body {
        background-color: #e9ecef;
    }

    [data-role="page"].jm-active {
        background-color: #fff;
        box-shadow: 2px 0 8px rgba(0,0,0,.12), -2px 0 8px rgba(0,0,0,.12);
    }

    /* 底部導覽列跟著限寬置中（只有桌機才需要） */
    .app-bottom-nav {
        max-width: 800px;
        left: 0;
        right: 0;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =================================================================
   13. 移除 JM 動畫殘留
   ================================================================= */

.in, .out,
.slide, .slideup, .slidedown,
.fade, .pop, .flip {
    animation: none !important;
    transition: none !important;
}

/* =================================================================
   14. 響應式補強
   ================================================================= */

@media (max-width: 576px) {
    .ui-btn {
        font-size: 0.95rem;
        padding: 0.5rem 0.6rem;
    }
}