/* ------------------------------------------------------------------
   rwd.std.css — 手機版排版（全民台語認證 std）

   注意：本站的 bootstrap.min.css 是 Bootstrap 2 的「非 responsive」版本，
   整份檔案沒有任何 @media query，.container / .modal 等都是寫死像素寬。
   斷點、欄位堆疊、對話框寬度都必須在這裡自己補。

   本檔案接在 style.std.*.css / form.css 之後載入，套用於 templates/ 下的
   form_*.html、confirm.std.html、result_*_std.html、user*.std.html、
   maintenance.html。不含任何顏色，主題色仍留在各自的 style.*.css。
   ------------------------------------------------------------------ */


/* ===== 共用 ===== */

*, *:before, *:after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* 寫死寬度的容器改成流動寬度。
   左右留白只在小螢幕加，桌機版才會和原本的 680px 完全一致。 */
.navbar-fixed-top .container {
    width: auto;
    max-width: 680px;
}

#main {
    width: auto;
    max-width: 680px;
}

/* 寬表格自己橫向捲動，不要把整頁撐寬。
   clear:both 是必要的 —— overflow 會讓它成為 BFC，而 BFC 盒不會和 float
   重疊、只會縮窄避開；成績表前面就有一顆 .pull-right 的下載按鈕。 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    clear: both;
}


/* ===== 報名表單 ===== */

#main.form input[type="text"],
#main.form textarea,
#main.form select { max-width: 100%; }

#main.form textarea { width: 100%; }

/* 選項文字過長時可以折行；bootstrap 的 .radio / .checkbox 本來就有
   padding-left:18px + input 負 margin，折行會自動對齊 */
#main.form .controls label.radio,
#main.form .controls label.checkbox,
#main.form .controls label.radio.inline,
#main.form .controls label.checkbox.inline {
    margin-bottom: 4px;
    white-space: normal;
}

/* 出生日期的年 / 月 / 日 */
#main.form .birth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#main.form .birth-row select { min-width: 0; }


/* ===== 確認 / 提示對話框 =====
   本頁有 #dlg-confirm 與 #dlg-deny 兩個，故用 .modal 一起處理。
   Bootstrap 2 的 .modal 是寫死 width:560px + margin:-250px 0 0 -280px 置中。
   （另外：.modal 在 BS2 必須帶 hide class 才會 display:none，
     少了它對話框會以 opacity:0 蓋在頁面上吃掉點擊，見 template 內的註解） */
#main ~ .modal,
.modal {
    width: 560px;
    max-width: calc(100% - 20px);
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
}


/* ===== 小螢幕 ===== */

@media (max-width: 767px) {

    body { padding: 0; }

    /* 標題列改成隨頁面捲動，不佔掉小螢幕的高度 */
    .navbar-fixed-top { position: static; }
    .navbar-fixed-top .container { padding: 8px 15px; }
    .navbar .brand {
        display: block;
        float: none;
        font-size: 19px;
        line-height: 1.4;
        white-space: normal;
    }
    .navbar .navbar-text.pull-right { float: none; margin: 4px 0 0; }

    #main {
        margin-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }


    /* --- 表單 --- */

    /* label 從左邊移到欄位上方 */
    #main.form .form-horizontal .control-label {
        float: none;
        width: auto;
        padding-top: 0;
        margin-bottom: 4px;
        text-align: left;
        line-height: 1.5;
    }
    #main.form .form-horizontal .control-label br { display: none; }
    #main.form .form-horizontal .controls { margin-left: 0; }
    #main.form .form-horizontal .form-actions {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 加大輸入區塊；font-size 維持 16px，iOS 才不會一 focus 就自動放大整頁 */
    #main.form input[type="text"],
    #main.form textarea,
    #main.form select {
        width: 100%;
        height: auto;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 16px;
        line-height: 1.4;
    }
    #main.form textarea { min-height: 84px; }
    #main.form .input-mini,
    #main.form .input-small { width: 100%; }

    #main.form .birth-row select[name="birth[0]"] { flex: 1.6 1 0; }
    #main.form .birth-row select[name="birth[1]"],
    #main.form .birth-row select[name="birth[2]"] { flex: 1 1 0; }

    /* twzipcode 的縣市 / 鄉鎮兩個下拉並排 */
    #main.form .controls select[name="city"],
    #main.form .controls select[name="dist"] {
        display: inline-block;
        width: calc(50% - 4px);
        margin-bottom: 8px;
    }

    #main.form .controls .help-inline {
        display: block;
        padding-left: 0;
        margin: 6px 0 0;
    }

    /* 原本靠 <br> 分行的勾選群組，改成一列一項 */
    #main.form .controls br { display: none; }
    #main.form .controls label.radio,
    #main.form .controls label.checkbox,
    #main.form .controls label.radio.inline,
    #main.form .controls label.checkbox.inline,
    #main.form .controls label.radio.inline + label.radio.inline,
    #main.form .controls label.checkbox.inline + label.checkbox.inline {
        display: block;
        margin: 0 0 8px;
    }

    #main.form .form-actions .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }
    #main.form .form-actions .btn:last-child { margin-bottom: 0; }


    /* --- 同意事項 / 驗證碼 --- */

    #main.confirm { font-size: 16px; }
    #main.confirm .well { padding: 15px; }
    #main.confirm ol { margin: 0 0 0 20px; }
    #main.confirm ol li { line-height: 1.7; margin-bottom: 8px; }
    #main.confirm form { padding: 10px 0 0; }
    #main.confirm form img { display: block; margin: 8px auto; }
    #main.confirm input[name="scode"] {
        display: block;
        width: 100%;
        max-width: 240px;
        height: auto;
        min-height: 48px;
        margin: 0 auto 12px;
        font-size: 24px;
        text-align: center;
    }
    #main.confirm .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }

    /* 考生身分選擇（confirm.std.html 的 #role） */
    #role {
        width: auto;
        max-width: 680px;
        margin: 15px auto 0;
        padding: 0 15px;
    }
    #role .role-selector { margin-bottom: 10px; }
    #role .role-selector .btn {
        display: block;
        width: 100%;
        white-space: normal;
    }


    /* --- 報名完成 --- */

    #main.result h1 { font-size: 24px; line-height: 1.3; }
    #main.result h2 { font-size: 20px; line-height: 1.3; }
    #main.result p { font-size: 16px; line-height: 1.7; }
    #main.result span.label { font-size: 18px; }
    #main.result table { font-size: 15px; }
    #main.result .btn {
        display: block;
        width: 100%;
        font-size: 20px;
        padding: 12px 16px;
    }


    /* --- 查詢登入 / 忘記密碼 --- */

    /* style.std.2012.css 把 .input-xlarge 寫死 400px，390px 手機會直接溢出 */
    #main.login .input-xlarge,
    #main.login input[type="text"] {
        width: 100%;
        height: auto;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 16px;
        line-height: 1.4;
    }
    #main.login .form-horizontal .control-label {
        float: none;
        width: auto;
        margin: 0 0 4px;
        padding-top: 0;
        text-align: left;
        line-height: 1.5;
    }
    #main.login .form-horizontal .controls { margin-left: 0; }
    #main.login .form-horizontal .form-actions {
        padding-left: 15px;
        padding-right: 15px;
    }
    #main.login .form-actions .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px;
    }
    #main.login .form-actions .btn:last-child { margin-bottom: 0; }
    #main.login .page-header h1 { font-size: 26px; line-height: 1.3; }
    #main.login p,
    #main.login .alert li { font-size: 16px; line-height: 1.7; }
    #main.login .alert ol,
    #main.login .alert ul { margin-left: 20px; }


    /* --- 個人資料查詢 --- */

    #main.doc p { font-size: 16px; line-height: 1.7; }
    #main.doc h2 { font-size: 22px; line-height: 1.3; }
    #main.doc .alert ol,
    #main.doc .alert ul { margin-left: 20px; }
    #main.doc .alert ol li,
    #main.doc .alert ul li { line-height: 1.7; }

    /* 手機上不要讓下載按鈕浮動，否則會把後面的表格擠窄 */
    #main.doc .pull-right.btn,
    #main.doc .btn.pull-right {
        float: none;
        display: block;
        width: 100%;
        white-space: normal;
        margin-bottom: 10px;
    }

    #main.doc .nav-tabs > li > a {
        padding: 8px 10px;
        font-size: 15px;
    }

    /* bootstrap 2 的 .tab-content 是 display:table，table box 會被內容撐開
       而不是裁切，min-width 的表格會連帶把整頁撐寬；改成一般 BFC 才能讓
       .table-scroll 的 overflow-x 生效。 */
    #main.doc .tab-content {
        display: block;
        display: flow-root;
    }

    /* 個人資料表：th 原本寫死 200px，收窄並允許長字串斷行 */
    #main.doc table.stat th,
    #main.result table.stat th { width: 32%; }
    #main.doc table.stat th,
    #main.doc table.stat td,
    #main.result table.stat th,
    #main.result table.stat td {
        line-height: 1.6;
        word-break: break-word;
    }
    #main.doc table.stat .btn,
    #main.result table.stat .btn {
        display: block;
        width: 100%;
        white-space: normal;
    }

    /* 成績表 5 欄且寫死欄寬，硬擠會把字拆行，改由 .table-scroll 橫向捲動 */
    #main.doc table.grade { font-size: 14px; }
    #main.doc table.grade-wide { min-width: 520px; }
    #main.doc table.grade-wide td,
    #main.doc table.grade-wide th { white-space: nowrap; }
}

.control-label { font-weight: bold; color: #0a6d1b; }