@charset "UTF-8";
/* ============================================================
   BConS02.aspx（查詢／取消慢箋預約記錄）專用樣式
   2026-09-03 建立。搭配 bootstrap/bootstrap.min.css (v4.5.3)。

   由 BConS02.aspx 的 <asp:Content ContentPlaceHolderID="head"> 引入，
   因此 MasterPage、BConSFront、BConS01 完全不受影響。

   維護注意：
   1. 絕對不要用 #控制項ID 當選擇器。本頁走 MasterPage 且 targetFramework
      未設，ClientIDMode 預設為 AutoID，實際 id 會帶
      ctl00_ContentPlaceHolder1_ 前綴。需要指到伺服器控制項時用
      [id$="名稱"] 或包裝元素的 class。
   2. 手機版清單的欄位名稱來自 data-label，由 BConS02.aspx.vb 的
      gv_ConBooking_RowDataBound 從 HeaderText 複製而來 —— 不是 nth-child。
      SEQ_NO 欄是 Visible="False" 不會輸出儲存格，nth-child 序號會位移。
      本檔的 nth-child 只用來決定「欄寬」，不決定欄位名稱：欄位有變動時
      最多是版面配對錯位，不會標錯資料。
   ============================================================ */

:root {
    --b02-primary: #1266a3;
    --b02-primary-dark: #0d4d7c;
    --b02-ink: #22303c;
    --b02-muted: #667784;
    --b02-line: #dfe6ec;
    --b02-bg: #f4f7fa;
    --b02-head: #eef4f9;
    --b02-radius: 10px;
}

body {
    background: var(--b02-bg);
    color: var(--b02-ink);
    font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
}

.b02-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 12px 32px;
    text-align: left;
}

/* 本頁的預設對齊。原本是為了抵銷 MasterPage 外層的 <div align="center">，
   2026-09-03 拿掉 MasterPage 後已無外層置中，但保留為明確的預設值。
   預約記錄表格另外置中，見 .booking-list td。 */
.b02-page,
.b02-page td,
.b02-page th {
    text-align: left;
}

/* 頁首。拿掉 MasterPage 後這是頁面唯一的系統識別，字級與配色比照
   BConSFront 的 .bcs-header / .bcs-title。 */
.b02-header {
    text-align: center;
    margin-bottom: 16px;
}

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

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

.b02-banner {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
}

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

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

.b02-card--form {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.b02-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--b02-primary-dark);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--b02-primary);
}

/* ── 表單控制項 ─────────────────────────────────────────── */

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

.b02-page input[type="text"] {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* 低於 16px 時 iOS 聚焦會整頁放大 */
    padding: 6px 10px;
    border: 1px solid #c6d2dc;
    border-radius: 6px;
}

.b02-page input[type="text"]:focus {
    outline: none;
    border-color: var(--b02-primary);
    box-shadow: 0 0 0 3px rgba(18, 102, 163, .15);
}

/* 病歷號 / 或 / 身分證，桌機並排、576px 以下堆疊 */
.b02-idrow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    column-gap: 10px;
    margin-bottom: 12px;
}

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

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

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

/* 驗證碼：圖與輸入框同一行 */
.b02-vrow {
    margin-bottom: 12px;
}

.b02-captcha {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

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

.b02-captcha input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

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

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

.b02-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.b02-page input[type="submit"],
.b02-page input[type="button"] {
    min-height: 44px;
    padding: 8px 22px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--b02-primary);
    background: var(--b02-primary);
    color: #fff;
    cursor: pointer;
}

.b02-page input[type="submit"]:hover,
.b02-page input[type="button"]:hover {
    background: var(--b02-primary-dark);
    border-color: var(--b02-primary-dark);
}

.b02-page .b02-btn-secondary {
    background: #fff;
    color: var(--b02-primary-dark);
}

.b02-page .b02-btn-secondary:hover {
    background: var(--b02-head);
}

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

    .b02-page .b02-actions input[type="submit"],
    .b02-page .b02-actions input[type="button"] {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

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

/* 補充說明（原 .style1 的紅字位置改用這個；.style3 孤兒 class 也一併取代） */
.b02-hint {
    color: var(--b02-muted);
    font-size: .8125rem;
    margin: 8px 0 12px;
}

/* 注意事項（原 .style2 綠字） */
.b02-notice {
    background: #f0f7f0;
    border: 1px solid #c9e2c9;
    border-radius: 8px;
    padding: 10px 12px;
    color: #2f6b2f;
    font-size: .875rem;
    margin: 12px 0;
}

/* UpdateProgress 的「處理中」（原 .style4 藍粗） */
.b02-progress {
    color: var(--b02-primary);
    font-weight: 700;
}

/* 錯誤訊息（lb_ErrMsg01 仍帶行內 color:#FF0000） */
.b02-err:not(:empty) {
    display: block;
    max-width: 540px;
    margin: 0 auto 14px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
}

/* 返回連結。2026-09-03 拿掉 MasterPage 後導覽選單消失，這是唯一的返回路徑，
   所以刻意做得明顯一點、觸控目標也夠大。 */
.b02-back {
    text-align: center;
    margin-top: 4px;
}

.b02-back a {
    display: inline-block;
    padding: 10px 18px;
    min-height: 44px;
    line-height: 24px;
    border: 1px solid var(--b02-line);
    border-radius: 8px;
    background: #fff;
    color: var(--b02-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.b02-back a:hover {
    background: var(--b02-head);
    border-color: var(--b02-primary);
}

/* 查無資料 */
.b02-empty {
    display: block;
    text-align: center;
    color: var(--b02-muted);
    padding: 24px 10px;
}

/* ── 查詢結果標頭（姓名 / 病歷號）────────────────────────── */

.b02-patient {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

.b02-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--b02-line);
}

.b02-field:last-child {
    border-bottom: none;
}

.b02-field__label {
    flex: 0 0 auto;
    width: 76px;
    font-weight: 700;
    color: var(--b02-primary-dark);
}

.b02-field__value {
    flex: 1 1 120px;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .b02-patient {
        grid-template-columns: 1fr;
    }
}

/* ── 預約記錄清單：桌機 ─────────────────────────────────── */

.b02-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

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

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

/* 資料格與表頭一起置中。欄位值都很短（日期、科別、次數、取藥方式），
   置中比靠左整齊。必須寫在 .b02-page td 之後才會生效 ——
   兩者選擇器權重相同（0,1,1），由順序決勝。 */
.booking-list td {
    text-align: center;
}

.booking-list input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* 分頁列 */
.booking-list td[colspan] {
    padding: 12px 8px;
    text-align: center;
}

.booking-list td[colspan] a,
.booking-list td[colspan] span {
    display: inline-block;
    min-width: 32px;
    padding: 4px 8px;
    margin: 0 2px;
    border: 1px solid var(--b02-line);
    border-radius: 6px;
    color: var(--b02-primary);
    text-decoration: none;
}

.booking-list td[colspan] span {
    background: var(--b02-primary);
    border-color: var(--b02-primary);
    color: #fff;
    font-weight: 700;
}

/* ── 預約記錄清單：手機（<768px）改為卡片式 ───────────────
   欄位名稱來自 data-label（見檔頭維護注意第 2 點）。
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

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

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

    .booking-list tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: #fff;
        border: 1px solid var(--b02-line);
        border-radius: var(--b02-radius);
        margin-bottom: 12px;
        padding: 4px 0;
        overflow: hidden;
    }

    /* 表頭列在卡片式下不需要 */
    .booking-list tr:first-child {
        display: none;
    }

    .booking-list td {
        border: none;
        border-bottom: 1px dashed var(--b02-line);
        padding: 8px 12px;
    }

    /* 前 4 欄（看診日／科別／預約日期／預約領藥次數）兩欄並排；
       取藥方式與取消預約維持整列。
       這裡的 nth-child 只影響欄寬，欄位名稱一律取自 data-label。 */
    .booking-list td:nth-child(-n+4) {
        flex: 0 0 50%;
        width: 50%;
    }

    .booking-list td:nth-child(n+5) {
        flex: 0 0 100%;
    }

    /* 分頁列與「查無資料」只有一個 td，必須整列 */
    .booking-list td[colspan] {
        flex: 0 0 100%;
        width: 100%;
        border-bottom: none;
    }

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

    /* 欄位名稱由 RowDataBound 寫入的 data-label 產生 */
    .booking-list td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--b02-muted);
        margin-bottom: 2px;
    }

    /* 分頁列不要標籤 */
    .booking-list td[colspan]::before {
        content: none;
    }

    /* 分頁列內部是 GridView 自己產生的巢狀表格。上面把 td 設成 block、
       tr 設成 flex 會把它拆散成一行一個頁碼，這裡明確還原成表格顯示。 */
    .booking-list td[colspan] table {
        display: table;
        width: auto;
        margin: 0 auto;
    }

    .booking-list td[colspan] tbody {
        display: table-row-group;
    }

    .booking-list td[colspan] tr {
        display: table-row;
        background: none;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    .booking-list td[colspan] td {
        display: table-cell;
        width: auto;
        flex: none;
        border: none;
        padding: 2px;
    }
}