.clinic-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 40PX;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI","Microsoft JhengHei",sans-serif;
    color: var(--text-main);
    background-color: var(--bg-body);
}

.clinic-timing {
    display: flex;
    gap: 16px;
    align-items: stretch;
    justify-content: space-between;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}

.timing-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /*讓內容垂直置中，視覺更平衡*/
}

.timing-right {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clinic-title h1 {
    font-size: 22px;
    margin: 0;
}

.clinic-sub {
    margin-top: 8px;
    color: #4b5563;
    line-height: 1.6;
}

.btn-primary-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    padding: 0 14px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border: 0;
}

    .btn-primary-lg.is-disabled {
        background: #cbd5e1;
        color: #475569;
        cursor: not-allowed;
    }

.timing-hint {
    font-size: 12px;
    color: #6b7280;
    padding: 0;
}

.lock-title {
    font-weight: 800;
    color: #9a3412;
    margin-bottom: 6px;
}

.lock-desc {
    font-size: 13px;
    color: #7c2d12;
    line-height: 1.5;
}

.clinic-body {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
}

.kv {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #eef2f7;
}

    .kv:last-child {
        border-bottom: none;
    }

.k {
    color: #6b7280;
    font-size: 12px;
}

.v {
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
}

.actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    color: #0f172a;
    background: #fff;
}

.opd-grid {
    width: 100%;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    overflow: hidden; /* ✅ 回來：不捲動 */
    background: #fff;
}

/* ✅ 用 clip-path 來保留圓角裁切（取代 overflow:hidden） */
@supports (clip-path: inset(0 round 14px)) {
    .opd-grid {
        clip-path: inset(0 round 14px);
    }
}

.opd-row {
    display: grid;
    grid-template-columns: 70px repeat(7, 1fr);
}

    .opd-row.head {
        background: #f8fafc;
        font-weight: 700;
        color: #334155;
    }

.cell {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
    font-size: 13px;
}

.opd-row .cell:last-child {
    border-right: none;
}

.opd-row:last-child .cell {
    border-bottom: none;
}

.cell.label {
    justify-content: flex-start;
    padding-left: 12px;
    font-weight: 700;
    color: #334155;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.on {
        background: #22c55e;
    }

    .dot.off {
        background: #e5e7eb;
    }

.small-note {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
}

.tips {
    margin: 0;
    padding-left: 18px;
    color: #374151;
}

    .tips li {
        margin: 6px 0;
        font-size: 13px;
    }

/* ===== timing RWD ===== */
@media (max-width: 768px) {
    .clinic-timing {
        flex-direction: column;
        gap: 12px;
    }

    .timing-right {
        width: 100%;
    }

    .btn-primary-lg {
        width: 100%;
    }
}
/* ===== Body Layout RWD ===== */
@media (max-width: 1024px) {
    .clinic-body {
        grid-template-columns: 1fr;
    }

    .side-col {
        order: 2; /* 聯絡資訊排在後面 */
    }

    .main-col {
        order: 1;
    }
}
/* ===== Card Padding RWD ===== */
@media (max-width: 576px) {
    .clinic-page {
        padding: 12px;
    }

    .card-h {
        padding: 10px 12px;
        font-size: 14px;
    }

    .card-b {
        padding: 12px;
    }

    .clinic-title h1 {
        font-size: 20px;
    }

    .clinic-sub {
        font-size: 14px;
    }
}
@media (max-width: 576px) {
    .dot {
        width: 12px;
        height: 12px;
    }
}

/* ===== Clinic Marquee ===== */
.marquee-wrap {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    /* ✅ 關鍵修正： */
    flex: 1; /* 佔據剩餘空間 */
    min-width: 0; /* 允許縮小 (Flexbox 必備技巧，否則長文字會無視 overflow:hidden) */
}

.marquee-icon {
    flex: 0 0 auto;
    font-size: 18px;
}

.marquee-wrap {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 14s linear infinite;
}

/* 跑馬燈動畫 */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 使用者滑過時暫停（貼心） */
.clinic-marquee:hover .marquee-text {
    animation-play-state: paused;
}

@media (max-width: 640px) {
    .marquee-text {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }
}

.opd-grid::-webkit-scrollbar {
    height: 10px;
}

.opd-grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 8px;
}

.opd-grid::-webkit-scrollbar-track {
    background: transparent;
}

/* ✅ OPD：手機也要一到日完整顯示，禁止橫向捲動 */
@media (max-width: 600px) {

    /* 外框不允許橫向捲動 */
    .opd-grid {
        overflow: hidden;
    }

    /* 關鍵：7 天用等分，且允許內容縮到 0（不會撐爆） */
    .opd-row {
        grid-template-columns: 52px repeat(7, minmax(0, 1fr));
    }

    /* cell 壓縮：減 padding、字體 */
    .cell {
        padding: 6px 2px;
        font-size: 12px;
        min-width: 0; /* ✅ 防止內容撐寬 */
    }

        .cell.label {
            padding-left: 8px;
            font-size: 12px;
            white-space: nowrap;
        }

    /* 表頭（一二三...）字更小 */
    .opd-row.head .cell {
        font-size: 11px;
        padding: 6px 0;
    }

    /* dot 縮小 */
    .dot {
        width: 8px;
        height: 8px;
    }

    /* 線變淡一點避免擁擠（可選） */
    .cell {
        border-right-color: #f1f5f9;
        border-bottom-color: #f1f5f9;
    }
}

/* --- Card Header 優化 --- */
.card-h-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 如果原本 card-h 有 padding，這裡可以繼承或微調 */
    padding-right: 16px;
}

/* 進度卡片樣式 */
#progressCard {
    border-color: #b3e5fc; /* 淺藍色邊框 */
    box-shadow: 0 4px 12px rgba(3, 169, 244, 0.1);
}

/* 呼吸燈效果 (表示即時) */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #26a69a; /* 綠色 */
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(38, 166, 154, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(38, 166, 154, 0);
    }
}

/* 重新整理按鈕 */
.refresh-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    transition: transform 0.3s;
}

    .btn-icon:hover {
        transform: rotate(180deg);
    }

/* 表格樣式優化 */
.progress-table {
    width: 100%;
    border-collapse: collapse;
}

    .progress-table th {
        font-size: 0.85rem;
        color: #78909c;
        padding: 8px;
        border-bottom: 1px solid #eee;
        font-weight: 500;
    }

    .progress-table td {
        padding: 12px 8px;
        border-bottom: 1px dashed #f0f0f0;
        font-size: 1rem;
        color: #37474f;
    }

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

.empty-state, .error-state {
    text-align: center;
    color: #90a4ae;
    padding: 20px;
    font-size: 0.9rem;
}

/* =========================================
   即時看診進度 (Compact Pro Design)
   ========================================= */

.compact-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    /* 邊界增強 */
    border: 1px solid #e2e8f0;
    border-top: none; /* 頂部與 Card Header 接合 */
    border-radius: 0 0 16px 16px; /* 圓角加大 */
    /* 增加立體感 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* 單行容器：加大間距，增加隔線對比 */
.compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px; /* ✅ 關鍵：加大內距，讓畫面不擁擠 */
    border-bottom: 1px solid #e2e8f0; /* 線條顏色加深一點點，更清晰 */
    height: auto; /* 改為自動高度，適應內容 */
    min-height: 72px; /* 設定最小高度 */
    transition: background-color 0.15s;
}

    .compact-row:last-child {
        border-bottom: none;
    }

    /* 斑馬紋效果 (可選，增加閱讀性) */
    .compact-row:nth-child(even) {
        background-color: #fafbfc;
    }

    .compact-row:hover {
        background-color: #f1f5f9;
    }

/* 左側：醫師資訊 */
.row-left {
    display: flex;
    align-items: center;
    gap: 12px; /* 名字跟狀態的距離 */
}

    .doc-name {
        font-size: 1.05rem;
        font-weight: 700;
        color: #334155; /* Slate-700 */
        letter-spacing: 0.5px;
    }

    /* 狀態標籤 (極簡圓角框) */
    .status-badge {
        font-size: 0.75rem;
        padding: 2px 8px;
        border-radius: 6px;
        font-weight: 500;
        line-height: 1.4;
    }

    .st-active {
        color: #059669; /* Emerald-600 */
        background-color: #ecfdf5; /* Emerald-50 */
        border: 1px solid #d1fae5;
    }

    .st-idle {
        color: #94a3b8; /* Slate-400 */
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
    }

/* 右側：數據群組 */
.row-right {
    display: flex;
    align-items: center;
    gap: 24px; /* 兩組數據的間距 */
    text-align: right;
}

.data-group {
    display: flex;
    flex-direction: column; /* 上標籤 下數字 */
    justify-content: center;
    align-items: flex-end;
    line-height: 1;
}

    .data-label {
        font-size: 0.7rem;
        color: #94a3b8;
        margin-bottom: 4px;
        font-weight: 400;
    }

    .data-val {
        font-family: 'Roboto Mono', monospace; /* 數字使用等寬字體 */
        font-weight: 700;
    }

    /* 目前號碼 (視覺焦點) */
    .num-active {
        font-size: 1.6rem;
        color: var(--medical-primary); /* 跟隨主色 */
        letter-spacing: -1px;
    }

    .num-idle {
        font-size: 1.6rem;
        color: #cbd5e1;
    }

    /* 候診人數 (次要) */
    .sub .data-val {
        font-size: 1rem;
        color: #64748b;
        font-weight: 500;
    }

/* --- RWD 手機版微調 --- */
@media (max-width: 480px) {
    .compact-row {
        padding: 10px 16px; /* 手機版再縮一點邊距 */
        height: auto; /* 允許內容撐開 */
    }

    .row-left {
        gap: 8px;
        flex-direction: column; /* 醫師名與狀態上下排，節省橫向空間 */
        align-items: flex-start;
    }

    .status-badge {
        font-size: 0.7rem;
        padding: 1px 6px;
    }

    .row-right {
        gap: 16px;
    }

    .num-active, .num-idle {
        font-size: 1.4rem;
    }
}

/* --- 掛號狀態燈號列 --- */
.reg-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右等寬 */
    gap: 12px;
    margin-bottom: 4px;
}

.status-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 8px; /* 微圓角，更俐落 */
    font-size: 1rem;
    font-weight: 700; /* 加粗字體 */
    background-color: #fff;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

    /* 左側強調色條 - 增加專業感與識別度 */
    .status-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
    }

    /* --- 狀態：需現場/不可掛 (Unavailable) --- */
    .status-card.unavailable {
        background-color: #fef2f2; /* 極淡紅底 */
        color: #b91c1c; /* 深紅字 */
        border-color: #fee2e2;
    }

        .status-card.unavailable::before {
            background-color: #ef4444; /* 亮紅色條 */
        }

.status-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: flex; /* Ensure icon is centered vertically */
    align-items: center;
}

/* 膠囊本體 */
.status-pill {
    flex: 1; /* 平均分配 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px; /* 縮小內距 */
    border-radius: 8px; /* 小圓角 */
    font-size: 0.9rem;
    font-weight: 500;
    /* 讓背景色淡一點，視覺比較舒服 */
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

    /* 🟢 綠燈樣式 (Available) */
    .status-pill.available {
        background-color: #f0fdfa;
        color: #0f766e;
        border-color: #ccfbf1;
    }

        .status-pill.available .status-icon {
            background-color: #10b981; /* 實心綠圓 */
            color: #fff;
        }

    /* 🔴 紅燈樣式 (Unavailable) */
    .status-pill.unavailable {
        background-color: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

        .status-pill.unavailable .status-icon {
            background-color: #ef4444; /* 實心紅圓 */
            color: #fff;
        }

/* 圖示圓圈 (打勾/打叉) */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
}

/* RWD 手機版微調 */
@media (max-width: 480px) {
    .reg-status-row {
        gap: 10px;
    }

    .status-card {
        font-size: 0.9rem;
        padding: 10px 4px;
    }
}

/* 手機版字體再縮小一點，確保不換行 */
@media (max-width: 360px) {
    .btn-action {
        font-size: 0.95rem;
        padding: 0 16px;
    }
}

/* --- Tab Navigation --- */
.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.tab-btn {
    padding: 12px 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px; /* 讓 active 線條蓋過底線 */
}

    .tab-btn:hover {
        color: var(--medical-primary);
    }

    .tab-btn.active {
        color: var(--medical-primary);
        border-bottom-color: var(--medical-primary);
    }

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 醫師列表 (Grid Layout) --- */
.doctor-grid {
    display: grid;
    gap: 20px;
}

/* 單張醫師卡片 */
.doc-card {
    display: flex;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    /* 輕微陰影增加質感 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}

    .doc-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

/* 左側照片 */
.doc-visual {
    width: 140px;
    flex-shrink: 0;
    background-color: #f8fafc;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
}

    .doc-visual img {
        width: 100px;
        height: 100px;
        border-radius: 50%; /* 圓形頭像比較親切 */
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

/* 右側資訊 */
.doc-info {
    flex: 1;
    padding: 20px;
}

.doc-head {
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.doc-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

    .doc-name small {
        font-size: 0.9rem;
        color: #64748b;
        font-weight: 500;
        margin-left: 8px;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 10px;
    }

.doc-section {
    margin-bottom: 12px;
}

.sec-title {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 專長標籤 */
.tag-cloud-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.doc-tag {
    font-size: 0.85rem;
    color: #0f766e;
    background: #f0fdfa;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #ccfbf1;
}

/* 經歷列表 */
.exp-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

    .exp-list li {
        margin-bottom: 2px;
    }

/* --- RWD 手機版微調 --- */
@media (max-width: 640px) {
    .doc-card {
        flex-direction: column; /* 手機版改為直向 */
    }

    .doc-visual {
        width: 100%;
        height: auto;
        padding: 20px 0 10px;
        background: linear-gradient(to bottom, #f8fafc, #fff);
    }

    .doc-info {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .row-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

    .data-group {
        min-width: 72px;
    }
}

/* =========================================
   Mobile-First Progress List (手機版優先設計)
   ========================================= */

.compact-list {
    background: #fff;
    width: 100%;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* 單行容器：使用 Flexbox 自動推擠，保持單行不換行 */
.compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右推到底 */
    padding: 12px 16px; /* 手機版舒適的觸控間距 */
    border-bottom: 1px solid #f1f5f9;
    height: 56px; /* 固定高度，讓列表整齊劃一 */
}

    .compact-row:last-child {
        border-bottom: none;
    }

/* --- 左側群組 (醫師) --- */
.grp-left {
    display: flex;
    align-items: center;
    gap: 8px; /* 名字與狀態的距離 */
    flex: 0 0 auto; /* 不壓縮 */
    width: 50%; /* 給予固定寬度，讓中間對齊更整齊 */
}

.doc-name {
    font-size: 1.05rem; /* 字體適中 */
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 名字太長自動省略 */
}

/* 狀態標籤 (空心樣式比較清爽) */
.status-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.st-active {
    color: #059669;
    border-color: #a7f3d0;
    background-color: #ecfdf5;
}

.st-idle {
    color: #94a3b8;
    border-color: #e2e8f0;
    background-color: #f8fafc;
}


/* --- 中間群組 (資訊膠囊) --- */
.grp-mid {
    flex: 1; /* 佔據中間剩餘空間 */
    display: flex;
    justify-content: center; /* 居中 */
    padding: 0 4px;
}

/* 灰色膠囊 (視覺亮點) */
.meta-pill {
    background-color: #f8fafc; /* 極淡灰 */
    color: #64748b; /* 灰色字 */
    /*border: 1px solid #e2e8f0;*/ /* 邊框 */
    border-radius: 6px; /* 圓角 */
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.5px;
}


/* --- 右側群組 (號碼) --- */
.grp-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 靠右對齊 */
    justify-content: center;
    flex: 0 0 100px; /* 固定寬度防止被擠壓 */
    gap: 2px;
}

/* 目前號碼區 */
.num-box {
    display: flex;
    align-items: baseline; /* 讓號碼跟「號」底部對齊 */
    gap: 2px;
    line-height: 1;
}

.num-val {
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    font-size: 1.5rem; /* 稍微縮小防止跑版 */
    color: var(--medical-primary);
}

.num-unit {
    font-size: 0.85rem;
    color: var(--text-sub);
    font-weight: 500;
}

/* 候診人數區塊 (精緻小字) */
.wait-group {
    display: flex;
    align-items: center;
    background-color: #f1f5f9; /* 淺灰底 */
    border-radius: 4px;
    padding: 2px 6px;
    border: 1px solid #e2e8f0;
}

.wait-label {
    font-size: 11px;
    color: #64748b;
    margin-right: 4px;
}

.wait-count {
    font-size: 13px;
    font-weight: 800;
    color: var(--medical-primary);
    font-family: 'Roboto Mono', monospace;
}
/* 修正中間膠囊 meta-pill 不要太寬 */
.grp-mid {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0; /* 允許縮小 */
}

.meta-pill {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    min-width: 70px;
}

/* RWD 手機版微調 */
@media (max-width: 480px) {
    .compact-row {
        padding: 10px 12px; /* 減少內距 */
    }

    .grp-right {
        flex: 0 0 85px;
    }

    .num-val {
        font-size: 1.3rem;
    }

    .doc-name {
        font-size: 0.95rem;
    }
}

.num-unit {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}

.num-highlight {
    color: var(--medical-primary, #00796b);
}

.num-mute {
    color: #cbd5e1;
}


/* --- RWD 電腦版微調 (螢幕變大時) --- */
@media (min-width: 768px) {
    .compact-row {
        padding: 16px 24px; /* 電腦版加大間距 */
        height: 64px;
    }

    .doc-name {
        font-size: 1.15rem;
    }

    .meta-pill {
        padding: 2px 8px; /* 膠囊變長 */
        font-size: 0.9rem;
    }

    .grp-right {
        min-width: 70px;
    }

    .num-val {
        font-size: 1.5rem;
    }

    .wait-group {
        padding: 1px 4px;
    }
}

.doc-link {
    color: #1e293b;
    text-decoration: none;
}

    .doc-link:hover {
        text-decoration: underline;
    }

/* 建立一個 Grid 容器，讓輸入框在電腦版並排 */
.query-grid {
    display: grid;
    grid-template-columns: 1fr; /* 手機版：單欄 */
    gap: 12px; /* 欄位間距縮小 */
    margin-bottom: 16px;
}

/* 電腦版 (平板以上) */
@media (min-width: 600px) {
    .query-grid {
        grid-template-columns: 1fr 1fr; /* ✅ 變為兩欄並排 */
        align-items: end; /* 對齊底部 */
    }

    /* 讓搜尋按鈕橫跨兩欄 (如果放在 grid 內) 或保持獨立 */
}

.form-group {
    margin-bottom: 0;
}

.form-label {
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #64748b;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    height: 42px;
    font-size: 1rem;
}

/* 查詢結果區塊間距 */
#qryResults {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
}

/* 按鈕樣式 (若原本沒有) */
.btn-outline-lg {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--medical-primary);
    color: var(--medical-primary);
    background: #fff;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

    .btn-outline-lg:hover {
        background: #f0fdfa;
    }

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    to {
        transform: translateY(0);
    }
}

/* =========================================
   預約紀錄卡片 (Booking Record Card)
   ========================================= */

.records-wrap {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

/* 卡片容器 */
.booking-record-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    border-left: 5px solid var(--medical-primary); /* 左側色條標示 */
}

    .booking-record-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

/* 卡片頭部 (日期與時段) */
.br-header {
    background-color: #f8fafc;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.br-date {
    font-weight: 700;
    color: #334155;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.br-session-badge {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    background: #e0f2f1;
    color: #00695c;
}

/* 卡片內容 (醫師與號碼) */
.br-body {
    padding: 16px 20px; /* 縮減上下內距 */
    display: flex;
    justify-content: space-between; /* 左右推開 */
    align-items: center; /* 垂直置中 */
    gap: 16px;
}

.br-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1; /* 佔據剩餘空間 */
    min-width: 0; /* 防止文字過長破版 */
}

.br-doctor {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

/* 時間顯示優化 */
.br-time-hint {
    font-size: 0.9rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.icon-clock {
    font-size: 1rem;
    opacity: 0.7;
}

/* 右側：號碼區塊 (緊湊化) */
.br-number-box {
    text-align: center;
    background: #f0fdfa; /* 淡綠底色，強調號碼 */
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    padding: 6px 12px;
    min-width: 70px;
    flex-shrink: 0; /* 禁止被壓縮 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.br-num-label {
    font-size: 0.7rem;
    color: #0f766e;
    margin-bottom: 0;
    line-height: 1;
    opacity: 0.8;
}

.br-num-val {
    font-size: 1.6rem; /* 數字加大 */
    font-weight: 800;
    color: #00695c; /* 深綠色 */
    font-family: 'Roboto Mono', monospace;
    line-height: 1.1;
}

/* 底部按鈕區：更加緊湊 */
.br-footer {
    padding: 10px 20px; /* 縮小高度 */
    border-top: 1px dashed #e2e8f0;
    display: flex;
    justify-content: flex-end;
    background: #fff;
}

/* 按鈕樣式 */
.btn-cancel-ghost {
    color: #ef4444; /* 紅色系 */
    background: #fff;
    border: 1px solid #fee2e2;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-cancel-ghost:hover {
        background: #fef2f2;
        border-color: #ef4444;
    }

    .btn-cancel-ghost:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: grayscale(1);
    }
/* RWD 手機版：保持左右並排，但字體微調 */
@media (max-width: 576px) {
    .br-body {
        padding: 12px 16px;
    }

    .br-doctor {
        font-size: 1.1rem;
    }

    .br-num-val {
        font-size: 1.4rem;
    }

    /* 手機版按鈕滿版 */
    .btn-cancel-ghost {
        width: 100%;
        justify-content: center;
    }

    .br-footer {
        width: 100%;
    }
}

/* 空狀態 */
.empty-state {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 16px;
    color: #64748b;
    border: 2px dashed #e2e8f0;
    font-family: '標楷體', serif;
    font-weight: 600;
    font-size: 20px;
}

/* =========================================
   統一按鈕設計系統 (Action Buttons)
   ========================================= */

.timing-actions {
    display: flex;
    flex-direction: column; /* 手機版垂直排列 */
    gap: 12px;
    width: 100%;
}

/* 電腦版：左右並排 (大於 768px) */
@media (min-width: 768px) {
    .timing-actions {
        flex-direction: row; /* Side by side on desktop */
    }

    .btn-action {
        flex: 1; /* Equal width */
    }
}

/* 手機版：垂直堆疊 (預設) - 這是解決不協調的關鍵 */
@media (max-width: 767px) {
    .timing-actions {
        grid-template-columns: 1fr; /* 強制單欄 */
    }
}

/* 1. 按鈕基礎架構 (共用) */
.btn-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .btn-action svg {
        width: 20px;
        height: 20px;
    }

    .btn-action.btn-primary {
        background: var(--medical-primary);
        color: #fff;
        border: none;
        box-shadow: 0 2px 6px rgba(58, 90, 64, 0.2);
    }

        .btn-action.btn-primary:hover {
            background: var(--medical-primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(58, 90, 64, 0.3);
        }

@media (max-width: 400px) {
    .btn-action {
        font-size: 0.95rem; /* 小螢幕稍微縮小字體 */
        padding: 0 12px;
    }
}

/* 2. 主要按鈕 (Primary) - 前往掛號 */
.btn-primary {
    background: linear-gradient(to bottom, #0f9ca0, #0c858b);
    color: #fff;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.3);
}

    .btn-primary:hover {
        background: linear-gradient(to bottom, #0d9488, #0f766e);
        transform: translateY(-1px);
        box-shadow: 0 6px 8px -1px rgba(13, 148, 136, 0.4);
    }

    .btn-primary:active {
        transform: translateY(1px);
        box-shadow: none;
    }

/* 3. 次要按鈕 (Secondary) - 掛號查詢 */
.btn-secondary {
    background-color: #fff;
    color: #475569;
    border: 2px solid #e2e8f0;
}

    .btn-secondary:hover {
        border-color: #0ea5a4;
        color: #0ea5a4;
        background-color: #f0fdfa;
    }

    .btn-secondary:active {
        background-color: #f1f5f9;
        border-color: #cbd5e1;
        color: #334155;
    }

    /* 4. 禁用狀態 (Disabled) */
    .btn-primary.is-disabled,
    .btn-secondary:disabled {
        background-color: #e2e8f0;
        color: #94a3b8;
        border-color: transparent;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================
   RWD 手機版適配
   ========================================= */
@media (max-width: 576px) {
    /* 手機版改成上下排列，且前往掛號在上面 */
    .timing-actions {
        grid-template-columns: 1fr; /* 單欄 */
        gap: 12px;
    }

    .btn-action {
        width: 100%; /* 滿版 */
        height: 52px; /* 手機版再加高，方便手指點擊 */
        font-size: 1.05rem;
    }

    .timing-hint {
        margin-top:0 !important;
    }
}

/* 針對超大螢幕 (大於 1100px) 恢復左右並排 */
@media (min-width: 1101px) {
    .timing-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* 手機版 (原本的設定，其實已經被 max-width: 1100px 涵蓋了，可以合併或保留) */
@media (max-width: 576px) {
    .btn-action {
        height: 52px; /* 手機版再高一點 */
        font-size: 1.05rem;
    }
}
/* === 已取消的卡片樣式 (原地變灰) === */
.booking-record-card.is-cancelled {
    background-color: #f3f4f6; /* 變灰底 */
    border-color: #e5e7eb;
    border-left-color: #94a3b8; /* 左側標示變灰 */
    opacity: 0.8;
}

    .booking-record-card.is-cancelled .br-date,
    .booking-record-card.is-cancelled .br-doctor,
    .booking-record-card.is-cancelled .br-num-val {
        color: #94a3b8; /* 文字變淡 */
        text-decoration: line-through; /* 刪除線 (選用) */
    }

/* 已取消的按鈕狀態 */
.btn-status-cancelled {
    background: #e2e8f0;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================
   1. 診所品牌卡片 (Brand Card)
   ========================================= */
.clinic-brand-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-left: 2px;
}

/* --- Logo 容器 --- */
.clinic-brand-logo {
    flex-shrink: 0;
    width: 72px; /* 稍微加大，展現大器感 */
    height: 72px;
    /* 形狀與邊框：使用變數 */
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    /* 陰影：使用中等陰影增加層次 */
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* 預設 SVG 圖示 */
.default-logo-placeholder svg {
    width: 36px;
    height: 36px;
    color: var(--medical-primary); /* 使用品牌主色 */
    opacity: 0.9;
    transition: transform 0.3s ease;
}

/* 滑鼠移過去時的微互動 */
.clinic-brand-card:hover .default-logo-placeholder svg {
    transform: scale(1.1);
}

.clinic-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 文字排版 --- */
.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 中文名稱 */
.c-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main); /* 使用標題黑 */
    line-height: 1.25;
    margin: 0;
    letter-spacing: 0.5px;
}

/* 英文名稱 */
.c-eng-name {
    font-size: 0.85rem;
    color: var(--text-muted); /* 使用輔助灰 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 7px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================
   2. 跑馬燈 (Notification Bar) - 整合版
   配色邏輯：
   背景 -> --medical-accent (淺青)
   文字 -> --text-sub (內文灰)
   圖示 -> --medical-highlight (橘紅，視覺焦點)
   ========================================= */
.notice-bar {
    display: flex;
    align-items: center;
    /* 使用您的淺色背景變數 */
    background-color: var(--medical-accent);
    /* 邊框使用極淡的邊框色，保持乾淨 */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 44px; /* 高度 */
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

/* 左側標籤區 */
.notice-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 100%;
    /* 文字使用主色，建立關聯 */
    color: var(--medical-primary);
    font-size: 1.1rem;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /* 右側分隔線 */
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

/* 鈴鐺圖示 - 使用橘紅色 (--medical-highlight) */
.bell-icon {
    display: flex;
    align-items: center;
    color: var(--medical-highlight); /* 重點色！讓鈴鐺跳出來 */
    animation: swing 3s infinite ease-in-out;
}

/* 右側滾動內容區 */
.notice-content-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding-left: 12px;
    /* 內容文字使用深灰色 */
    color: var(--text-sub);
    font-size: 1rem;
    font-weight: 600;
    /* 漸層遮罩 */
    mask-image: linear-gradient(to right, transparent, black 15px, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15px, black 95%, transparent);
}

.notice-scroller {
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 20s linear infinite;
}

/* 動畫設定 */
@keyframes swing {
    0%, 100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0deg);
    }
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* =========================================
   RWD 手機版適配
   ========================================= */
@media (max-width: 576px) {
    .clinic-brand-card {
        gap: 12px;
        margin-bottom: 16px;
    }

    .clinic-brand-logo {
        width: 56px;
        height: 56px;
        border-radius: var(--radius-md);
    }

    .default-logo-placeholder svg {
        width: 28px;
        height: 28px;
    }

    .c-name {
        font-size: 1.35rem;
    }

    .c-eng-name {
        margin-top: 4px;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    /* 手機版跑馬燈 */
    .notice-bar {
        height: 40px;
        /* 手機版背景改回極淡灰，避免顏色太重 */
        background-color: var(--bg-body);
    }

    .notice-label {
        padding: 0 10px;
    }

    /* 螢幕太小時隱藏文字，只留鈴鐺 */
    .label-text {
        display: none;
    }

    @media (min-width: 360px) {
        .label-text {
            display: inline;
        }
    }
}

.notice-bar:hover .notice-scroller {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
    cursor: default; /* 讓滑鼠游標變回箭頭，暗示已互動 */
}

/* 確保內容層也可以觸發 hover */
.notice-content-wrap {
    pointer-events: auto; /* 確保滑鼠事件能穿透 */
    z-index: 5;
}

.clinic-brand-logo {
    position: relative;
    border: 2px solid var(--medical-primary);
}

    /* 模擬傳統印章的殘損感 (選用) */
    .clinic-brand-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...') opacity(0.05); /* 疊加一點點紙張紋理 */
        pointer-events: none;
    }

/* --- 主要按鈕 (前往掛號) 配色優化 --- */
.btn-primary {
    /* 改為墨綠漸層，與中醫主色呼應 */
    background: linear-gradient(to bottom, #3a6d33, #2d5a27);
    color: #fff;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(45, 90, 39, 0.2);
}

    .btn-primary:hover {
        background: linear-gradient(to bottom, #2d5a27, #1e3d1a);
        transform: translateY(-1px);
        box-shadow: 0 6px 8px -1px rgba(45, 90, 39, 0.3);
    }

/* --- 次要按鈕 (查詢/取消) 配色優化 --- */
.btn-secondary {
    background-color: #fff;
    color: #4b5563; /* 沉穩灰 */
    border: 2px solid #e2e8f0;
}

    .btn-secondary:hover {
        /* Hover 時才顯現中醫主色 */
        border-color: var(--medical-primary);
        color: var(--medical-primary);
        background-color: var(--medical-accent); /* 使用米白色背景 */
    }

/* --- 查詢 Modal 內的按鈕同步更新 --- */
.btn-primary-lg {
    background: var(--medical-primary) !important;
}

/* --- 1. 診所品牌區優化 --- */
.clinic-brand-card {
    border-bottom: 2px solid var(--medical-primary); /* 加入底線強調品牌 */
    padding-bottom: 16px;
}

.clinic-brand-logo {
    border: 2px solid var(--medical-primary);
    background-color: #fff;
    /* 輕微圓角增加印章質感 */
    border-radius: 12px;
}

.c-name {
    color: var(--medical-primary);
    font-weight: 800;
}

/* --- 2. 掛號狀態燈號 (中醫風格優化) --- */
.status-card.available {
    background-color: #f1f7f0; /* 草藥綠極淺色 */
    color: var(--medical-primary);
    border: 1px solid #d1e2cf;
}

    .status-card.available::before {
        background-color: var(--medical-primary);
    }

.status-card.unavailable {
    background-color: #fff5f5;
    color: var(--medical-highlight);
    border: 1px solid #fbd5d5;
}

    .status-card.unavailable::before {
        background-color: var(--medical-highlight);
    }

/* --- 3. 按鈕系統 (Action Buttons) --- */
.btn-primary {
    background: linear-gradient(135deg, #3a6d33, #2d5a27);
    border: none;
    box-shadow: 0 4px 10px rgba(45, 90, 39, 0.2);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #2d5a27, #1e3d1a);
        box-shadow: 0 6px 14px rgba(45, 90, 39, 0.3);
    }

.btn-secondary {
    border: 2px solid var(--medical-primary);
    color: var(--medical-primary);
    background: transparent;
}

    .btn-secondary:hover {
        background-color: var(--medical-accent);
        color: var(--medical-primary-dark);
    }

/* --- 4. 跑馬燈公告 --- */
.notice-bar {
    background-color: var(--medical-accent); /* 宣紙色背景 */
    border-left: 4px solid var(--medical-highlight); /* 硃砂紅側邊條 */
}

.bell-icon {
    color: var(--medical-highlight);
}

/* --- 5. 門診時間表格優化 --- */
.opd-row.head {
    background-color: var(--medical-primary);
    color: #fff; /* 表頭改為深綠底白字，更有權威感 */
}

.cell.label {
    background-color: var(--medical-accent);
    color: var(--medical-primary);
}

.dot.on {
    background-color: var(--medical-primary); /* 開診點改為墨綠 */
}

/* --- 看診進度脈動感優化 --- */
.pulse-container {
    display: inline-flex;
    align-items: center;
    background-color: #f1f7f0; /* 極淡綠 */
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #d1e2cf;
}

.pulse-text {
    font-size: 0.85rem;
    color: var(--medical-primary);
    font-weight: 700;
    margin-left: 4px;
}

/* --- 地圖區域：和諧化處理 --- */
.map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--medical-border);
    /* 輕微棕褐色濾鏡，讓地圖色彩不突兀 */
    filter: sepia(15%) contrast(95%) brightness(98%);
    transition: filter 0.3s ease;
}

    .map-container:hover {
        filter: none; /* 滑鼠移入恢復原色 */
    }

/* --- 門診表渲染優化 --- */
.opd-row.head {
    background-color: var(--medical-primary) !important;
    color: #fff !important;
}

.cell.label {
    background-color: var(--medical-accent) !important;
    color: var(--medical-primary) !important;
    border-right: 1px solid #dcd9d0;
}

.dot.on {
    background-color: var(--medical-primary) !important;
    box-shadow: 0 0 4px rgba(45, 90, 39, 0.4);
}

/* --- 預約紀錄卡片 (細緻繪製) --- */
.booking-record-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--medical-primary); /* 墨綠標示 */
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.br-header {
    background-color: var(--medical-accent); /* 宣紙色頭部 */
    padding: 10px 16px;
    border-bottom: 1px solid #dcd9d0;
    font-weight: 700;
    color: var(--medical-primary);
}

.br-body {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.br-num-val {
    color: var(--medical-highlight); /* 硃砂紅強調號碼 */
    font-size: 1.8rem;
    font-weight: 800;
}

.br-footer {
    padding: 10px 16px;
    background-color: #fafafa;
    border-top: 1px dashed var(--border-color);
    text-align: right;
}

/* 查詢/取消：降低邊框對比度 */
.btn-action.btn-secondary {
    background-color: #fff;
    color: var(--text-main);
    border: 1.5px solid #b5bcc5;
}

    .btn-action.btn-secondary:hover {
        border-color: var(--medical-primary);
        color: var(--medical-primary);
        background-color: var(--medical-accent);
    }

/* --- 2. 班表表格 (和諧化) --- */
.opd-grid {
    border: 1px solid var(--border-color);
    background: #fff;
}

/* 表頭：改為較淺的墨綠或帶灰的色調 */
.opd-row.head {
    background-color: #e9ece7 !important; /* 淺草綠底 */
    color: var(--medical-primary) !important;
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
}

.cell {
    border-bottom: 1px solid #f1f0eb;
    border-right: 1px solid #f1f0eb;
    color: var(--text-main);
}

    /* 左側時段標籤 */
    .cell.label {
        background-color: var(--medical-accent) !important;
        color: var(--medical-primary) !important;
        font-weight: 600;
    }

/* 開診圓點：縮小並改為墨綠色，讓畫面變「安靜」 */
.dot {
    width: 8px;
    height: 8px;
}

    .dot.on {
        background-color: var(--medical-primary) !important;
        opacity: 0.8;
    }

    .dot.off {
        background-color: #e0e0e0;
    }

/* --- 3. 即時看診膠囊 (和諧化) --- */
.pulse-container {
    background-color: var(--medical-accent);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
}

.pulse-text {
    color: var(--medical-primary);
    font-weight: 600;
}

/* --- 4. 地圖視覺 (和諧化) --- */
.map-container {
    filter: sepia(25%) contrast(90%) brightness(96%); /* 降低地圖鮮艷感，融入頁面 */
    border: 1px solid var(--border-color);
}

/* --- 5. 預約紀錄紀錄卡片 --- */
.booking-record-card {
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--medical-primary);
}

.br-header {
    background-color: var(--medical-accent);
    color: var(--medical-primary);
    border-bottom: 1px solid var(--border-color);
}

.br-num-val {
    color: var(--medical-highlight); /* 使用硃砂紅，有如印章蓋章 */
}

/* --- 查看完整班表按鈕優化 --- */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: var(--medical-accent); /* 使用米白色底，與頁面呼應 */
    border: 1px solid var(--medical-primary); /* 墨綠邊框 */
    border-radius: 20px;
    color: var(--medical-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(45, 90, 39, 0.1);
}

    .link-action span {
        position: relative;
        top: 0px;
    }

    .link-action .icon-arrow {
        transition: transform 0.3s ease;
        stroke: var(--medical-primary);
    }

    /* Hover 特效：背景反轉，產生明顯的互動感 */
    .link-action:hover {
        background-color: var(--medical-primary);
        color: #fff;
        box-shadow: 0 4px 8px rgba(45, 90, 39, 0.2);
        transform: translateY(-1px);
    }

        .link-action:hover .icon-arrow {
            stroke: #fff;
            transform: translateX(3px); /* 箭頭向右滑動，暗示「進入」下一頁 */
        }

/* RWD 手機版：加大點擊面積，確保手指好點 */
@media (max-width: 480px) {
    .link-action {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    /* 在極小螢幕下，如果標題太長，讓它靠右對齊 */
    .card-h-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* --- 標題圖示統一處理 --- */
.h-title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--medical-primary); /* 墨綠標題 */
}

.title-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    stroke: var(--medical-primary);
}

/* --- 中式「印章感」按鈕優化 --- */
/* --- 硃砂印章按鈕重新設計 --- */
.btn-stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 40px !important; /* 增加左側空間讓印章呼吸 */
    background-color: #fff;
    border: 1px solid var(--medical-primary);
    border-radius: 6px;
    color: var(--medical-primary);
    font-size: 0.95rem;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 2px 2px 0px rgba(45, 90, 39, 0.1); /* 輕微硬陰影增加立體感 */
}

    /* 印章本體：硃砂質感 */
    .btn-stamp::before {
        content: "診";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        /* 硃砂紅漸層：中心略亮，四周深，模擬印泥不均勻感 */
        background: radial-gradient(circle at center, var(--medical-highlight) 0%, #8e3235 100%);
        color: #fff;
        /* 字體微調：使用楷體或仿宋增加古韻 */
        font-family: "標楷體", "Kaiti", "BiauKai", serif;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        /* 邊緣殘損效果：透過 clip-path 或 border-radius 組合模擬 */
        border-radius: 3px;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
        /* 增加一個細微的「刻印」感邊框 */
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    /* Hover 互動優化 */
    .btn-stamp:hover {
        background-color: var(--medical-accent);
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0px rgba(45, 90, 39, 0.1);
    }

    .btn-stamp:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0px rgba(45, 90, 39, 0.1);
    }

    /* 箭頭圖示微調 */
    .btn-stamp .icon-arrow {
        stroke-width: 3px;
        width: 14px;
        height: 14px;
        opacity: 0.7;
    }

/* --- 標題圖示的平衡處理 --- */
.h-title-with-icon {
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    border-left: 4px solid var(--medical-primary); /* 加入左側飾條平衡右側印章 */
    padding-left: 12px;
}

    .h-title-with-icon svg {
        margin-right: 4px;
    }

/* --- RWD 微調 --- */
@media (max-width: 480px) {
    .btn-stamp {
        padding: 8px 12px 8px 30px !important;
        font-size: 0.85rem;
    }

        .btn-stamp::before {
            width: 18px;
            height: 18px;
            left: 6px;
        }
}

.title-icon {
    width: 20px;
    height: 20px;
    stroke: var(--medical-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

/* 就診提醒清單樣式優化，讓它看起來更像筆記 */
.tips {
    margin: 0;
    padding-left: 20px;
    list-style-type: none;
}

    .tips li {
        position: relative;
        margin-bottom: 8px;
        font-size: 0.95rem;
        color: var(--text-main);
        line-height: 1.6;
    }

        /* 在列表前加上一個墨綠色的小圓點，呼應整體風格 */
        .tips li::before {
            content: "";
            position: absolute;
            left: -15px;
            top: 10px;
            width: 5px;
            height: 5px;
            background-color: var(--medical-primary);
            border-radius: 50%;
            opacity: 0.6;
        }

/* --- 整合式標題欄 --- */
.card-h-flex-integrated {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(to right, #ffffff, var(--medical-accent));
}

.h-title-group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.h-main-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--medical-primary);
    white-space: nowrap;
}

/* --- 融入式的印章連結 --- */
.h-sub-link-stamp {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-sub);
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-left: auto; /* 推到右側 */
}

/* 精緻印章小方塊 */
.stamp-box {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at center, var(--medical-highlight) 0%, #8e3235 100%);
    color: #fff;
    font-size: 11px;
    font-family: "標楷體", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(166, 61, 64, 0.3);
}

.link-text {
    border-bottom: 1px dashed transparent; /* 預留底線空間 */
    font-weight: 500;
}

/* Hover 效果：讓整個標題組產生聯動 */
.h-sub-link-stamp:hover {
    background-color: rgba(45, 90, 39, 0.05);
    color: var(--medical-primary);
}

    .h-sub-link-stamp:hover .link-text {
        border-bottom-color: var(--medical-primary);
    }

    .h-sub-link-stamp:hover .stamp-box {
        transform: scale(1.1) rotate(-5deg); /* 模擬蓋章的動態感 */
        box-shadow: 2px 2px 4px rgba(166, 61, 64, 0.4);
    }

.icon-mini-arrow {
    opacity: 0.5;
    transition: transform 0.3s;
}

.h-sub-link-stamp:hover .icon-mini-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* --- RWD 手機版 --- */
@media (max-width: 480px) {
    .h-title-group {
        flex-direction: row; /* 保持橫向，避免標題斷行 */
    }

    .link-text {
        display: none; /* 手機版隱藏長文字，只留印章與圖示 */
    }

    .h-sub-link-stamp {
        padding: 4px;
    }

        .h-sub-link-stamp::after {
            content: "班表"; /* 改顯短文字 */
            font-size: 0.8rem;
            margin-left: 4px;
        }
}

/* --- 即時進度整合標籤 --- */
.h-sub-status-stamp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background-color: var(--medical-accent);
    padding: 2px 4px 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* 脈動球：改為深墨綠或硃砂紅，這裡建議用墨綠代表穩定的開診狀態 */
.pulse-container-mini {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--medical-primary);
    border-radius: 50%;
    position: relative;
    animation: tcm-pulse 2s infinite;
}

@keyframes tcm-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 90, 39, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(45, 90, 39, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(45, 90, 39, 0);
    }
}

.pulse-text-mini {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--medical-primary);
    letter-spacing: 1px;
}

.update-time-text {
    font-size: 0.7rem;
    color: var(--text-sub);
    opacity: 0.8;
}

/* 重新整理按鈕融入化 */
.btn-refresh-integrated {
    background: #fff;
    border: 1px solid var(--border-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--medical-primary);
    transition: all 0.3s ease;
}

    .btn-refresh-integrated:hover {
        background-color: var(--medical-primary);
        color: #fff;
        transform: rotate(180deg);
    }

/* 內容區載入文字風格 */
/* --- 進度載入中動畫優化 --- */
.loading-tcm {
    position: relative;
    padding: 10px 20px;
    color: var(--medical-primary);
    font-family: "標楷體", serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    white-space: nowrap; /* 強制文字不換行 */
    display: inline-block; /* 確保寬度隨內容伸縮 */
    text-align: center;
}

    /* 墨跡暈染動畫效果 */
    .loading-tcm::after {
        content: "...";
        position: absolute; /* 改為絕對定位，避免點點跳動影響佈局 */
        right: 0;
        animation: ink-fade 2s infinite;
    }

@keyframes ink-fade {
    0% {
        opacity: 0;
        filter: blur(5px);
    }

    50% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        filter: blur(5px);
    }
}

/* 進度內容顯示後的字體微調 */
.doc-name {
    font-family: "Microsoft JhengHei", sans-serif;
    font-weight: 700;
}

/* 將目前的號碼數字稍微加深，模擬墨跡感 */
.num-highlight {
    font-family: 'Roboto Mono', serif;
    font-weight: 900;
    color: var(--medical-highlight) !important;
    filter: drop-shadow(1px 1px 0px rgba(166, 61, 64, 0.2));
}

/* --- 進度清單內容優化 --- */
.compact-row {
    background-color: #fff;
    border-bottom: 1px dashed var(--border-color) !important; /* 改為虛線，增加紙質公文感 */
}

    .compact-row:last-child {
        border-bottom: none !important;
    }

.meta-pill {
    background-color: var(--medical-accent) !important;
    border: 1px solid #dcd9d0 !important;
    color: var(--medical-primary) !important;
}

/* --- 查詢結果卡片優化 --- */
.booking-record-card {
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--medical-primary);
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    transition: transform 0.2s;
}

    .booking-record-card.is-cancelled {
        filter: grayscale(0.8) opacity(0.7);
        border-left-color: var(--text-muted);
    }

.br-header {
    background-color: var(--medical-accent);
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--medical-primary);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcd9d0;
}

.br-session-badge {
    color: var(--medical-highlight);
    background: #fff;
    padding: 1px 8px;
    border: 1px solid var(--medical-highlight);
    border-radius: 4px;
    font-size: 0.75rem;
}

/* --- 取消按鈕細節 --- */
.btn-cancel-ghost {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: var(--text-sub);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

    .btn-cancel-ghost:hover {
        background-color: #fff5f5;
        color: var(--medical-highlight);
        border-color: var(--medical-highlight);
    }


.card {
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
}

.card-h {
    padding: 10px 16px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.3); /* 半透明白讓背景透出來 */
    border-bottom: 1px solid var(--border-color) !important;
}

.card-b {
    padding: 14px;
}

/* --- 卡片層次化調整 --- */
.card, .clinic-timing {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    border-radius: 12px;
}

/* --- 表格格子與虛線優化 --- */
.opd-grid {
    border-color: var(--border-color) !important;
}

.cell {
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

.opd-row.head {
    background-color: #e9ece7 !important; /* 淺草綠底 */
    color: var(--medical-primary) !important;
    border-bottom: 2px solid var(--medical-primary);
}

.cell.label {
    background-color: var(--medical-accent) !important;
    color: var(--medical-primary) !important;
    font-weight: 600;
}

.dot.on {
    background-color: var(--medical-primary) !important; /* 圓點改墨綠 */
}

.h-sub-link-stamp {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-sub);
}

.stamp-box {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, var(--medical-highlight) 0%, #8e3235 100%);
    color: #fff;
    font-family: "標楷體", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(166, 61, 64, 0.3);
}

.pulse-container-mini.is-closed .pulse-dot {
    display: none;
}

.pulse-container-mini.is-closed {
    opacity: .75;
}
/* 針對長者設計的行列 */
.older-friendly {
    padding: 15px 20px !important;
    height: auto !important; /* 取消固定高度，讓內容能自然撐開 */
    min-height: 90px;
    background-color: #ffffff;
}

/* 左側：呼吸燈 + 姓名與診別垂直排列 */
.doc-main-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pulse-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .pulse-status.is-active {
        background-color: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        animation: simple-pulse 2s infinite;
    }

    .pulse-status.is-idle {
        background-color: #cbd5e1;
    }

@keyframes simple-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.doc-name-lg {
    font-size: 1.25rem; /* 更大的字體 */
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.room-pill-sm {
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 4px;
}

/* 右側：專注於數字與候診人數 */
.grp-right-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.num-highlight-box {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.num-val-xl {
    font-size: 2.2rem; /* 極大數字，一目了然 */
    font-family: 'Roboto Mono', monospace;
    font-weight: 900;
    line-height: 1;
}

.num-active {
    color: #8e3235;
}
/* 使用硃砂紅，對比明顯 */
.num-mute {
    color: #cbd5e1;
}

.unit-text {
    font-size: 1rem;
    font-weight: 700;
    color: #475569;
}

/* 候診人數：用完整的句子描述，長者更易懂 */
.wait-text-row {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
    margin-top: 4px;
}

.wait-count-bold {
    color: #3a6d33; /* 墨綠色 */
    font-size: 1.1rem;
    font-weight: 800;
    padding: 0 2px;
}

/* 手機版微調：確保號碼不縮小 */
@media (max-width: 480px) {
    .older-friendly {
        padding: 12px 15px !important;
    }

    .num-val-xl {
        font-size: 1.8rem;
    }

    .doc-name-lg {
        font-size: 1.15rem;
    }
}
/* 容器：強制橫向一行 */
.line-mode {
    display: flex !important;
    flex-direction: row !important; /* 強制不換行 */
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
    height: 70px !important; /* 固定高度，畫面更整齊 */
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

/* 左側：醫師資訊 (自動縮放) */
.line-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0; /* 關鍵：允許內部文字縮排不撐開 */
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.is-active {
        background: #22c55e;
        box-shadow: 0 0 6px #22c55e;
    }

    .status-dot.is-idle {
        background: #cbd5e1;
    }

.doc-name-main {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 名字太長自動省略，不影響右側 */
}

.room-tag-mini {
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 右側：數據資訊 (固定寬度) */
.line-right {
    display: flex;
    align-items: center; /* 讓號碼與候診人數在同一水平線上 */
    gap: 12px;
    flex-shrink: 0;
    margin-left: 10px;
}

.num-highlight-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.num-xl {
    font-family: 'Roboto Mono', sans-serif;
    font-size: 1.8rem; /* 大字體 */
    font-weight: 900;
    line-height: 1;
}

.c-red {
    color: #b91c1c;
}
/* 深紅，視覺最強 */
.c-gray {
    color: #e2e8f0;
}

.unit-sm {
    font-size: 0.9rem;
    font-weight: 700;
    color: #475569;
}

/* 候診人數：極簡化呈現 */
.wait-inline {
    display: flex;
    align-items: center;
    background: #f0fdf4; /* 淡淡的綠底 */
    border: 1px solid #dcfce7;
    padding: 2px 8px;
    border-radius: 20px; /* 膠囊型 */
}

.wait-label-sm {
    font-size: 0.75rem;
    color: #166534;
    margin-right: 2px;
}

.wait-count-sm {
    font-size: 1.1rem;
    font-weight: 800;
    color: #166534;
}

/* ⚡ 手機直向極小螢幕優化 ⚡ */
@media (max-width: 380px) {
    .line-mode {
        padding: 10px 12px !important;
    }

    .doc-name-main {
        font-size: 1rem;
    }

    .num-xl {
        font-size: 1.5rem;
    }

    .wait-inline {
        padding: 2px 5px;
    }

    .line-right {
        gap: 6px;
    }
}

/* --- 暫停服務卡片容器 --- */
.offline-status-card {
    background-color: #fffaf9; /* 極淡的米紅底，呼應硃砂 */
    border: 1.5px solid #f8d7da;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(142, 50, 53, 0.05);
    margin-top: 4px;
}

/* --- 印章與標題組 --- */
.offline-seal-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 傳統圓形印章感 */
.tcm-seal-offline {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle at center, #8e3235 0%, #702628 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "標楷體", serif;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,255,255,0.2);
}

.offline-content {
    flex: 1;
}

.offline-main-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #8e3235; /* 硃砂紅 */
    letter-spacing: 1px;
}

.offline-sub-desc {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.4;
}

/* --- 電話按鈕優化 --- */
.btn-offline-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #fff;
    border: 1px solid #8e3235;
    color: #8e3235;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .btn-offline-call:hover {
        background-color: #8e3235;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(142, 50, 53, 0.2);
    }

/* --- RWD 微調 --- */
@media (max-width: 480px) {
    .offline-status-card {
        padding: 16px;
    }

    .tcm-seal-offline {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .offline-main-title {
        font-size: 1.05rem;
    }
}