@charset "UTF-8";
/* ============================================================
   雙和慢箋預約領藥系統 — BConSFront.aspx 專用樣式
   2026-09-03 建立。搭配 bootstrap/bootstrap.min.css (v4.5.3)。

   設計前提（改動時請務必維持）：
   1. 手機優先。斷點沿用 Bootstrap 4 的 md = 768px。
   2. 預約表格在手機上以「純 CSS」改成卡片式，絕不改 GridView
      的標記結構 —— BConSFront.aspx 的 validateDate() 依賴
      input.closest("tr")，DOM 必須維持真正的 table。
   3. 表格欄位標題用 nth-child + ::before 產生，因此
      **欄位順序若變動，本檔 .booking-table 的 nth-child 也要跟著改**。
   ============================================================ */

:root {
    --bcs-primary: #1266a3;
    --bcs-primary-dark: #0d4d7c;
    --bcs-ink: #22303c;
    --bcs-muted: #667784;
    --bcs-line: #dfe6ec;
    --bcs-bg: #f4f7fa;
    --bcs-warn-bg: #fff8e6;
    --bcs-warn-line: #f0c674;
    --bcs-radius: 10px;
}

/* ── 版面基礎 ───────────────────────────────────────────── */

body {
    background-color: var(--bcs-bg);
    color: var(--bcs-ink);
    font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%; /* 避免 iOS 橫置時自動放大字級 */
}

.bcs-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 16px 12px 40px;
}

/* ── 頁首 ───────────────────────────────────────────────── */

.bcs-header {
    text-align: center;
    margin-bottom: 20px;
}

.bcs-logo {
    max-width: 260px;
    width: 100%;
    height: auto;
}

.bcs-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 12px 0 0;
    color: var(--bcs-primary-dark);
}

/* ── 卡片 ───────────────────────────────────────────────── */

.bcs-card {
    background: #fff;
    border: 1px solid var(--bcs-line);
    border-radius: var(--bcs-radius);
    padding: 20px 16px;
    margin-bottom: 16px;
}

/* 輸入區：寬度取「預約系統開放時間…」那行能單行顯示的最小值。
   25 個全形字 + 11 個半形字，在 .875rem 下約 430px，加上卡片與提示框的
   內距後需要約 490px，取 540px 留餘裕。這也是加寬的唯一理由 —— 不要再放大。 */
.bcs-card--form {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}

/* 這張卡片刻意壓縮垂直節奏 */
.bcs-card--form .bcs-card__title {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.bcs-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bcs-primary);
    color: var(--bcs-primary-dark);
}

/* ── 表單 ───────────────────────────────────────────────── */

/* 觸控目標：iOS 建議最小 44px。同時 16px 字級可避免 iOS 聚焦時整頁縮放 */
.bcs-page .form-control {
    min-height: 44px;
    font-size: 16px;
    border-color: #c6d2dc;
}

.bcs-page .form-control:focus {
    border-color: var(--bcs-primary);
    box-shadow: 0 0 0 3px rgba(18, 102, 163, .15);
}

.bcs-label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.bcs-hint {
    color: var(--bcs-muted);
    font-size: .875rem;
}

/* ── 病歷號 / 或 / 身分證 一列 ──────────────────────────── */

.bcs-idrow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    column-gap: 10px;
    margin-bottom: 12px;
}

.bcs-idrow__or {
    color: var(--bcs-muted);
    font-size: .875rem;
    padding-bottom: 12px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .bcs-idrow {
        display: block;
    }

    .bcs-idrow__or {
        text-align: center;
        padding: 0;
        margin: 6px 0;
    }

    .bcs-idrow__col + .bcs-idrow__or {
        margin-top: 8px;
    }
}

/* ── 驗證碼列 ───────────────────────────────────────────── */

.bcs-vrow {
    margin-bottom: 14px;
}

.bcs-vmeta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* ── 驗證碼 ─────────────────────────────────────────────── */

/* 驗證碼圖與輸入框並排 */
.bcs-captcha {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.bcs-captcha img {
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bcs-line);
    border-radius: 6px;
    background: #fff;
}

.bcs-captcha .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── 按鈕 ───────────────────────────────────────────────── */

.bcs-page .btn {
    min-height: 44px;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 8px;
}

.bcs-page .btn-primary {
    background-color: var(--bcs-primary);
    border-color: var(--bcs-primary);
}

.bcs-page .btn-primary:hover,
.bcs-page .btn-primary:focus {
    background-color: var(--bcs-primary-dark);
    border-color: var(--bcs-primary-dark);
}

/* ── 訊息區 ─────────────────────────────────────────────── */

/* 錯誤訊息是針對輸入區的，寬度與 .bcs-card--form 對齊 */
.bcs-errmsg:not(:empty) {
    display: block;
    max-width: 540px;
    margin: 0 auto 14px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 600;
    text-align: center;
}

.bcs-notice {
    background: var(--bcs-warn-bg);
    border: 1px solid var(--bcs-warn-line);
    border-radius: var(--bcs-radius);
    padding: 10px 16px;
    margin-bottom: 16px;
}


.bcs-notice p:last-child {
    margin-bottom: 0;
}

/* 系統開放時間：放在輸入區內，確認鈕下方。
   卡片寬度就是為了讓這行單行顯示，見 .bcs-card--form。 */
.bcs-hours {
    margin: 12px 0 10px;
    padding: 8px 10px;
    background: var(--bcs-warn-bg);
    border: 1px solid var(--bcs-warn-line);
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
}

/* 查詢到的病歷號與姓名，與簡訊提醒同一區塊。
   原本有 min-height:1.4em 保留一行高度以防版面跳動，2026-09-03 移除 ——
   查詢是整頁 postback、本來就會重新渲染，不存在頁內跳動，而那一行在
   查詢前是 25px 的純空白（實測整個區塊 144px 中的 25px）。 */
.bcs-patient {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 改成 flex 後預設 nowrap，長姓名在窄螢幕會撐破版面 */
    gap: .75em; /* 病歷號與姓名的間距。不要在標記裡放全形空格 —— U+3000
                   不是可摺疊空白，查詢前會被渲染出來，硬撐出 25px 空行 */
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bcs-primary-dark);
    margin: 0 0 6px;
    line-height: 1.4;
}

/* 尚未查詢時 lb_chr / lb_pat 都是空字串，會 render 成兩個空 <span>。
   空的 inline 元素仍會產生 line box（實測 25.2px），必須 display:none
   才能讓整列真正收合為 0。flex 容器會忽略只有空白的文字節點，
   因此兩個 span 都隱藏後，這一列就完全不占高度。 */
.bcs-patient span:empty {
    display: none;
}

/* 領藥提醒（原本是 h1 + deeppink 行內樣式）。
   2026-09-04 改為「動作 + 兩個物件」的結構：病人真正要記住的是「帶哪兩樣
   東西」，把那兩個詞獨立成膠囊比把整句話放大更容易掃視。

   色系刻意用綠，與 BConS01 的 .b01-remind 呼應（那塊是 #008000 / #ccffcc）。
   這裡把飽和度與明度拉到與本站其他區塊一致，但維持同一個色相家族。
   不用琥珀：本頁已有 .bcs-notice 與 .bcs-hours 兩個琥珀色塊，再加第三個會讓
   琥珀從「注意」退化成背景裝飾。改色請連同 css/bcons01.css 一起考慮。 */
.bcs-remind {
    --bcs-remind-bg: #f1f9f1;
    --bcs-remind-line: #c9e2c9;
    --bcs-remind-ink: #1b5e20;
    --bcs-remind-chip: #2e7d32;

    background: var(--bcs-remind-bg);
    border: 2px solid var(--bcs-remind-line);
    border-radius: var(--bcs-radius);
    padding: 16px;
    text-align: center;
}

.bcs-remind__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--bcs-remind-ink);
    font-size: 1.5rem;
    font-weight: 700;
}

/* SVG 的 stroke 取 currentColor，圖示顏色跟著標題走 */
.bcs-remind__icon {
    flex: 0 0 auto;
}

.bcs-remind__items {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bcs-remind__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bcs-remind-chip);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 20px;
}

/* 圖示的 stroke 是 currentColor，會跟著膠囊文字色走 */
.bcs-remind__itemicon {
    flex: 0 0 auto;
}

/* 簡訊提醒狀態列。
   margin-bottom 明寫，否則會吃到 Bootstrap 的 p{margin-bottom:1rem} = 16px。 */
.bcs-sms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── 預約表格：桌機 ─────────────────────────────────────── */

.bcs-table-wrap {
    /* 桌機寬度不足時允許橫向捲動，而非撐破版面 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.booking-table {
    width: 100%;
    margin-bottom: 0;
    background: #fff;
}

.booking-table th,
.booking-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--bcs-line);
    vertical-align: middle;
}

.booking-table th {
    background: #eef4f9;
    color: var(--bcs-primary-dark);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid var(--bcs-primary);
    text-align: center;
}

.booking-table tr:last-child td {
    border-bottom: none;
}

/* GridView 的 EmptyDataText（無資料） */
.booking-table td[colspan] {
    text-align: center;
    color: var(--bcs-muted);
    padding: 28px 10px;
}

/* 表格內的日期輸入框不要被 100% 撐滿整格 */
.booking-table .form-control {
    min-width: 130px;
}

/* 預約領藥日、取藥方式兩欄允許換行，抵銷 GridView 行內的 white-space:nowrap，
   否則 9 個欄位在桌機上仍會撐出橫向捲軸。 */
.booking-table td:nth-child(7),
.booking-table td:nth-child(8) {
    white-space: normal;
}

/* 取藥方式的 RadioButtonList 是 RepeatLayout="Flow"，輸出為
   <input><label><input><label> 的平坦結構，沒有可包住每組的容器。
   讓 label 佔滿該行剩餘寬度，下一組 radio 就會被擠到新行 —— 等同直式堆疊，
   而且不動標記，JS 的 previousElementSibling（radio↔label 配對）仍然成立。 */
.booking-table input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

.booking-table label {
    margin: 0;
    font-weight: 400;
    vertical-align: middle;
}

.booking-table td:nth-child(8) label {
    display: inline-block;
    width: calc(100% - 30px);
    margin-bottom: 6px;
}

/* ── 預約表格：手機（<768px）改為卡片式 ──────────────────
   注意：只改 display，不動 DOM 結構，closest("tr") 仍然有效。
   GridView 的 Style="white-space: nowrap" 是行內樣式，需要 !important。
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

    .bcs-table-wrap {
        overflow-x: visible;
    }

    .booking-table {
        white-space: normal !important;
        background: transparent;
    }

    .booking-table,
    .booking-table tbody,
    .booking-table td {
        display: block;
        width: 100%;
    }

    /* tr 用 flex，讓前 6 個唯讀欄位能兩欄並排。
       不用 inline-block + width:50%：GridView 輸出的 <td> 之間可能夾著
       空白字元，兩個 50% 加上空白會超過 100% 而換行。
       改 display 不影響 DOM，validateDate() 的 input.closest("tr") 仍成立。 */
    .booking-table tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: #fff;
        border: 1px solid var(--bcs-line);
        border-radius: var(--bcs-radius);
        margin-bottom: 14px;
        padding: 4px 0;
        overflow: hidden;
    }

    /* 表頭列（第一列，整列都是 th）在卡片式下不需要 */
    .booking-table tr:first-child {
        display: none;
    }

    /* 前 6 欄（就醫日 ~ 領藥訖日）都是短的唯讀值，兩欄並排。
       兩欄而非三欄：375px 下三欄每欄僅約 110px，而科別簡稱可能長到
       「代謝及體重管理中心」（9 字）而折行。 */
    .booking-table td:nth-child(-n+6) {
        flex: 0 0 50%;
        width: 50%;
    }

    /* 其餘欄位（預約領藥日、取藥方式、按鈕）維持整列 */
    .booking-table td:nth-child(n+7) {
        flex: 0 0 100%;
    }

    /* 空資料列只有一個 td，必須整列，否則會變半寬 */
    .booking-table td[colspan] {
        flex: 0 0 100%;
        width: 100%;
    }

    .booking-table td {
        border: none;
        border-bottom: 1px dashed var(--bcs-line);
        padding: 8px 12px;
        text-align: left;
    }

    .booking-table tr td:last-child {
        border-bottom: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 「預約領藥日」與「取藥方式」的標記裡，輸入元件後面都有 <br /> 再接
       錯誤訊息 Label。錯誤訊息為空時那個 <br /> 仍佔掉一整行。
       改為隱藏 <br>，錯誤 Label 只在非空時獨立成行。
       validateDate() 主動顯示訊息時會設行內 style.display="block"，
       優先級更高，所以照樣有效。 */
    .booking-table td br {
        display: none;
    }

    .booking-table td span[id*="ERR"]:not(:empty) {
        display: block;
        margin-top: 4px;
    }

    /* 每格前面補上欄位名稱。順序對應 aspx 的 Columns 宣告順序。 */
    .booking-table td::before {
        display: block;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--bcs-muted);
        margin-bottom: 2px;
    }

    .booking-table td:nth-child(1)::before { content: "就醫日"; }
    .booking-table td:nth-child(2)::before { content: "科別名稱"; }
    .booking-table td:nth-child(3)::before { content: "醫師"; }
    .booking-table td:nth-child(4)::before { content: "次數"; }
    .booking-table td:nth-child(5)::before { content: "領藥起日"; }
    .booking-table td:nth-child(6)::before { content: "領藥訖日"; }
    .booking-table td:nth-child(7)::before { content: "預約領藥日"; }
    .booking-table td:nth-child(8)::before { content: "取藥方式"; }
    .booking-table td:nth-child(9)::before { content: none; }

    /* 無資料那一列不要有欄位標籤 */
    .booking-table td[colspan]::before {
        content: none;
    }

    /* 預約按鈕在手機上撐滿，方便點按 */
    .booking-table tr td:last-child input[type="submit"],
    .booking-table tr td:last-child input[type="button"] {
        width: 100%;
    }

    .booking-table .form-control {
        width: 100%;
    }

    .bcs-remind {
        font-size: 1.0625rem;
    }
}

/* ── 預約 Modal ─────────────────────────────────────────── */

/* 觸發重新整理用，不需要被看到 */
.bcs-hidden-btn {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#bcsBookingModal .modal-header {
    background: var(--bcs-primary);
    color: #fff;
    border-bottom: none;
}

#bcsBookingModal .modal-header .close {
    color: #fff;
    opacity: .9;
    text-shadow: none;
}

#bcsBookingModal .modal-content {
    border: none;
    border-radius: var(--bcs-radius);
    overflow: hidden;
}

#bcsBookingFrame {
    display: block;
    width: 100%;
    height: 72vh;
    border: 0;
    background: #fff;
}

@media (max-width: 767.98px) {
    /* 手機：全螢幕，把可用高度全給預約流程。
     *
     * 刻意不使用 100vh 做算術。原本寫成 calc(100vh - 56px)，有兩個問題：
     *  1. 56px 是對標題列高度的猜測，實測是 62px，導致 Modal 內多出 6px
     *     的無謂捲動（會晃一下再彈回）。
     *  2. iOS Safari 與 Android Chrome 的 100vh 是「網址列收起時」的高度，
     *     比實際可見區域大，Modal 底部（含 BConS01 的送出按鈕）會被藏在
     *     瀏覽器工具列後面。
     *
     * 改用 flex 讓高度自行分配：Bootstrap 的 .modal 本身是
     * position:fixed; height:100%，所以這裡的 height:100% 是對「實際的
     * 固定定位視窗」求值，而非 100vh —— 兩個問題一併解決，也不再有寫死的
     * 標題列高度。
     */
    #bcsBookingModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
        /* .modal-dialog-centered 是 display:flex + align-items:center，
           全螢幕時要改成拉伸，否則 modal-content 的 height:100% 會被壓縮 */
        align-items: stretch;
    }

    #bcsBookingModal .modal-content {
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #bcsBookingModal .modal-header {
        flex: 0 0 auto;
    }

    /* min-height:0 是必要的：flex 項目的預設 min-height:auto 會讓它拒絕
       縮到內容以下，iframe 就撐破容器 */
    #bcsBookingModal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    #bcsBookingFrame {
        height: 100%;
    }
}

/* ── jQuery UI datepicker 與 Bootstrap 4 共存 ───────────── */

/* BS4 的 reboot 會把 box-sizing 設為 border-box，datepicker 的
   表格版面在小螢幕上會被壓縮，這裡給它一個可讀的最小寬度並提高
   z-index，避免被卡片的 border-radius / overflow 裁切。 */
.ui-datepicker {
    z-index: 1050 !important;
    min-width: 17em;
    font-size: 1rem;
}

.ui-datepicker td a,
.ui-datepicker td span {
    padding: .45em .3em;
    text-align: center;
}