:root {
    --sch-bg: #f8fcfc;
    --sch-border: var(--medical-border);
    --sch-radius: var(--radius-md);
    /* 時段專屬色系 */
    --time-am-bg: #fff7ed;
    --time-am-text: #c2410c;
    --time-pm-bg: #f0fdf4;
    --time-pm-text: #15803d;
    --time-night-bg: #eff6ff;
    --time-night-text: #1d4ed8;
}

.sch-page {
    padding: clamp(1rem, 3vw, 2rem) 1rem;
    min-height: 80vh;
}

.sch-container {
    max-width: 80rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 121, 107, 0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

/* Header */
.sch-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1.5rem;
}

.sch-title h1 {
    font-size: 1.75rem;
    color: var(--medical-primary-dark);
    margin: 0 0 0.5rem 0;
}

.sch-sub {
    color: var(--medical-text-light);
    font-size: 0.95rem;
}

.sch-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ctrl-select {
    padding: 8px 12px;
    border: 1px solid var(--medical-border);
    border-radius: var(--radius-sm);
    min-width: 160px;
    font-size: 0.95rem;
}

.sch-legend {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--medical-text-light);
    margin-left: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Toolbar */
.sch-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.month-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .month-nav-btn:hover {
        border-color: var(--medical-primary);
        color: var(--medical-primary);
    }

.month-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--medical-primary-dark);
    min-width: 120px;
    text-align: center;
}

/* Desktop Calendar */
.sch-calendar {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--sch-border);
    border-radius: var(--sch-radius);
    overflow: hidden;
}

.cal-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--medical-accent);
    border-bottom: 1px solid var(--sch-border);
    text-align: center;
}

.cal-head-item {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: var(--medical-primary-dark);
    font-size: 0.9rem;
}

.cal-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--sch-border);
    gap: 1px;
}

.cal-cell {
    background: #fff;
    min-height: 130px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

    .cal-cell:hover {
        background: #fcfdfd;
        box-shadow: inset 0 0 0 2px var(--medical-accent);
    }

    .cal-cell.today {
        background: #fffbf0;
    }

    .cal-cell.out {
        background: #f9f9f9;
        opacity: 0.6;
        pointer-events: none;
    }

.cell-date {
    font-weight: 700;
    font-size: 1rem;
    color: var(--medical-text);
    margin-bottom: 4px;
}

.cal-cell.today .cell-date {
    color: var(--medical-primary);
}

/* Slot Pills */
.slot-pill {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.85rem;
    margin-bottom: 2px;
    transition: all 0.1s;
}

    .slot-pill:hover {
        border-color: var(--medical-primary);
        z-index: 1;
    }

.slot-tag {
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.slot-name {
    padding: 4px 6px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #334155;
    flex: 1;
}

.slot-pill.slot-A .slot-tag {
    background: var(--time-am-bg) !important;
    color: var(--time-am-text) !important;
}

.slot-pill.slot-A {
    border-left: 3px solid var(--time-am-text) !important;
}

.slot-pill.slot-B .slot-tag {
    background: var(--time-pm-bg) !important;
    color: var(--time-pm-text) !important;
}

.slot-pill.slot-B {
    border-left: 3px solid var(--time-pm-text) !important;
}

.slot-pill.slot-C .slot-tag {
    background: var(--time-night-bg) !important;
    color: var(--time-night-text) !important;
}

.slot-pill.slot-C {
    border-left: 3px solid var(--time-night-text) !important;
}

.slot-pill.full {
    opacity: 0.6;
    background: #f1f5f9;
}

    .slot-pill.full .slot-name {
        text-decoration: line-through;
        color: #444c57db;
    }

.more-btn {
    font-size: 0.8rem;
    color: var(--medical-primary);
    background: var(--medical-accent);
    text-align: center;
    border-radius: 4px;
    padding: 3px 0;
    margin-top: auto;
    font-weight: 600;
}

/* Modal */
.day-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 8px;
}

.period-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.day-period-col .slot-pill {
    margin-bottom: 8px;
    padding: 4px 0;
}

.day-period-col .slot-name {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
}

/* Mobile Optimization */
.sch-list-view {
    display: none;
}

@media (max-width: 768px) {
    .sch-page {
        padding: 10px;
    }

    .sch-container {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .sch-calendar {
        display: none;
    }

    .sch-toolbar {
        display: flex !important;
        width: 100%;
        margin-bottom: 12px;
        padding: 6px;
        gap: 10px;
    }

    .month-title {
        font-size: 1rem;
        min-width: auto;
    }

    .sch-list-view {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .day-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        border-left: 4px solid transparent;
    }

        .day-card.today {
            border-left-color: var(--medical-primary);
            background: #fff;
        }

    .day-header {
        /*display: flex;*/
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1px dashed #eee;
        font-size: 0.95rem;
    }

    .day-title {
        text-align: center;
    }

    .day-date {
        font-weight: 700;
        color: #333;
    }

    .day-week {
        font-size: 1.25rem;
        font-weight: bold;
        color: #1e1e1e;
        margin-left: 4px;
    }

    /* Compact Grid */
    .mobile-slots-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-slot-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 0.85rem;
    }

        .mobile-slot-item.slot-A {
            background: #fffbf0;
            border-color: #fde68a;
        }

        .mobile-slot-item.slot-B {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

        .mobile-slot-item.slot-C {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .mobile-slot-item.full {
            opacity: 0.6;
            background: #f5f5f5;
            border-color: #eee;
        }

    .ms-left {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow: hidden;
    }

    .ms-tag {
        font-size: 0.7rem;
        font-weight: 700;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .slot-A .ms-tag {
        background: var(--time-am-text);
        color: #fff;
    }

    .slot-B .ms-tag {
        background: var(--time-pm-text);
        color: #fff;
    }

    .slot-C .ms-tag {
        background: var(--time-night-text);
        color: #fff;
    }

    .full .ms-tag {
        background: #999;
    }

    .ms-name {
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ms-status {
        font-size: 0.75rem;
        color: var(--medical-primary);
        font-weight: 500;
        flex-shrink: 0;
    }

    .full .ms-status {
        color: #999;
    }
}


/* 1. 非當月的格子：完全隱形，但保留空間佔位 */
.cal-cell.ghost {
    border: none;
    background: transparent;
    pointer-events: none; /* 禁止滑鼠互動 */
}

/* 2. 當月但無診的格子：像普通背景，無滑鼠手勢 */
.cal-cell.no-slots {
    cursor: default;
    background-color: #f8f9fa; /* 淡淡灰，表示休息 */
}

    .cal-cell.no-slots:hover {
        transform: none; /* 取消浮動特效 */
        box-shadow: none;
        border-color: #eee;
    }

/* 3. 有診的格子：才有手勢跟特效 */
.cal-cell.has-slots {
    cursor: pointer;
}

/* 1. 確保格子本身是 Flex 直向排列 */
.cal-cell {
    /* 原本的設定可能已經有，確保加上這幾行 */
    display: flex;
    flex-direction: column; /* 讓日期在上面，內容在下面 */
    min-height: 100px; /* 給格子一個最小高度，置中才有意義 */
    /* ...其他原本的 border 或 padding 設定... */
}

/* 2. 日期保持在左上 (原本應該就有，確保一下) */
.cell-date {
    flex-shrink: 0; /* 防止日期被壓縮 */
    /* ...原本的 font-size 或 margin... */
}

/* 3. 休診文字專用樣式 (核心修改) */
.empty-state {
    flex: 1; /* 關鍵：自動填滿日期下方的所有剩餘空間 */
    display: flex; /* 讓文字在自己的區塊內置中 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    /* 視覺優化 */
    color: #64748b; /* 加深顏色 (原本是 #cbd5e1 太淺，改用 Slate-500) */
    font-size: 1.1rem; /* 放大字體 (原本是 0.8rem) */
    font-weight: bold; /* 加粗字體 */
    background-color: #f8fafc; /* (選用) 加上極淡的背景色區隔 */
    letter-spacing: 1px; /* 稍微拉開字距增加質感 */
    /* 修正：因為 flex center 會把整塊置中，若不想跟日期擠在一起，可以稍微加一點 padding-bottom */
    padding-bottom: 20px;
}

/* 新增樣式：可點擊的掛號連結 */
a.slot-pill {
    text-decoration: none; /* 移除底線 */
    position: relative;
    transition: all 0.2s;
    display: block; /* 確保它是區塊 */
}

    a.slot-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--medical-primary);
    }

/* 修改後的 .book-action：簡約專業風格 */
/* 調整按鈕容器，讓它靠右且與上方有區隔 */
.book-action {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #e2e8f0; /* 極淡的分隔線 */
    display: flex;
    justify-content: flex-end; /* 靠右對齊 */
}

/* 按鈕本體：Ghost Button 風格 */
.book-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 文字與箭頭的距離 */

    font-size: 0.8rem;
    font-weight: 500;
    color: var(--medical-primary); /* 使用您的主色 (Teal) */
    background-color: transparent;
    padding: 4px 12px;
    border: 1px solid var(--medical-primary); /* 實線邊框 */
    border-radius: 20px; /* 圓角膠囊狀 */

    transition: all 0.2s ease;
    text-decoration: none; /* 去除底線 */
}

    /* 箭頭微動畫 */
    .book-btn-ghost::after {
        content: '→';
        font-family: sans-serif;
        font-size: 1rem;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    /* Hover 互動：填滿背景 */
    .book-btn-ghost:hover {
        background-color: var(--medical-primary);
        color: silver; /* 文字變白 */
        box-shadow: 0 2px 6px rgba(0, 121, 107, 0.2); /* 淡淡陰影 */
    }

        .book-btn-ghost:hover::after {
            transform: translateX(3px); /* 箭頭向右飛 */
        }

/* 手機版微調：按鈕稍微大一點點比較好點 */
@media (max-width: 768px) {
    .book-btn-ghost {
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* schedule.css */

/* 手機版卡片點擊效果 */
.day-card {
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
}

    .day-card:active {
        transform: scale(0.98); /* 微微縮小，模擬按壓感 */
        background-color: #f1f5f9; /* 背景變深一點點 */
    }

/* --- Modal RWD 優化 --- */

/* 1. Modal 容器：手機版滿版或接近滿版，減少邊距 */
@media (max-width: 768px) {
    .modal-dialog {
        width: 90%;
        max-width: none;
        margin: 20px auto; /* 上下留一點空間即可 */
        max-height: 85vh; /* 防止太長超出螢幕 */
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        padding: 12px; /* 縮小內距 */
        overflow-y: auto; /* 內容過長可捲動 */
    }
}

/* 2. Modal 內的網格佈局：手機版改為單欄，但更緊湊 */
.day-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Desktop 維持原樣 */
    gap: 16px;
}

@media (max-width: 768px) {
    .day-modal-grid {
        grid-template-columns: 1fr; /* 手機版強制單欄 */
        gap: 12px; /* 減少間距 */
    }
}

/* 3. 時段區塊 (day-period-col) 優化 */
.day-period-col {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: none;
}

/* 4. 手機版：讓「時段標題」與「內容」更緊湊 */
@media (max-width: 768px) {
    .sch-header {
        padding-bottom: 0px;
    }

    .day-period-col {
        display: flex;
        flex-direction: column; /* 垂直排列 */
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .period-title {
        background-color: #f8fafc; /* 給標題一個淺底色區隔 */
        padding: 8px 12px;
        font-size: 0.9rem;
        border-bottom: 1px solid #eee;
        margin-bottom: 0; /* 緊貼下方內容 */
    }

    /* 改寫 .slot-pill 讓它變成橫向 Flex */
    .day-period-col .slot-pill {
        display: flex;
        align-items: center; /* 垂直置中 */
        justify-content: space-between; /* 左右撐開 */
        margin-bottom: 0; /* 移除下間距 */
        padding: 10px 12px; /* 增加點擊區域 */
        border: none; /* 移除外框 */
        border-bottom: 1px solid #f1f5f9; /* 改用底線分隔 */
        border-radius: 0; /* 變成長條狀 */
        min-height: 48px; /* 手機友善高度 */
    }

        /* 最後一個項目移除底線 */
        .day-period-col .slot-pill:last-child {
            border-bottom: none;
        }

    /* 調整左側標籤 (早/午/晚) */
    .day-period-col .slot-tag {
        display: none; /* 手機版 Modal 已有標題分組，可隱藏個別標籤節省空間 */
        /* 若想保留，可改為 width: auto; margin-right: 8px; */
    }

    /* 調整醫師名稱與診間號 (靠左) */
    .day-period-col .slot-name {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1; /* 佔據剩餘空間 */
        padding: 0;
        font-size: 0.95rem;
        overflow: visible; /* 允許內容超出 (雖然通常不會) */
    }

    /* 診間號 / 額滿狀態 (在 slot-name 裡面的 span) */
    .day-period-col .slot-status {
        font-size: 0.8rem;
        color: #64748b;
        background: #f1f5f9;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: 4px;
    }

        .day-period-col .slot-status.is-full {
            color: #e11d48;
            background: #ffe4e6;
        }

    /* 調整預約按鈕 (靠右) */
    .day-period-col .book-action {
        margin-top: 0; /* 移除原本的上間距 */
        padding-top: 0;
        border-top: none;
        flex-shrink: 0; /* 防止被擠壓 */
    }

    /* 縮小按鈕樣式以適應單行 */
    .day-period-col .book-btn-ghost {
        padding: 4px 10px;
        font-size: 0.8rem;
        background-color: transparent; /* 保持幽靈按鈕 */
    }
}

.is-full {
    color: red !important;
    padding: 0 5px;
}


/* 1. 調整標題列容器：讓按鈕與標題並排且垂直置中 */
.sch-header-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px;
}

    /* 確保標題的 margin 歸零，避免被原有樣式撐開 */
    .sch-header-top h1 {
        margin: 0;
        line-height: 1.2;
        font-size: 1.5rem;
        color: var(--medical-primary-dark);
    }

/* --- 核心修改：控制列容器 --- */
.sch-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    background: #f8fafc; /* 給個淺底色區塊，視覺更整齊 */
    padding: 12px;
    border-radius: 12px;
}

/* 醫師選單 */
.sch-controls {
    flex: 1; /* 佔據剩餘空間 */
    /*min-width: 200px;*/
}

.ctrl-select {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1.3rem;
    background: #fff;
    font-weight: 500;
}

/* 月份導航 (Compact Toolbar) */
.sch-toolbar-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 防止被擠壓 */
}

.nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 圓形按鈕 */
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #64748b;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s;
}

    .nav-btn:hover {
        border-color: var(--medical-primary);
        color: var(--medical-primary);
        background: #f0fdfa;
    }

    .nav-btn.disabled {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
    }

    .nav-btn.text-btn {
        width: auto;
        padding: 0 12px;
        border-radius: 20px;
        font-size: 0.9rem;
    }

.curr-month {
    font-weight: 700;
    font-size: 1.1rem;
    color: #334155;
    white-space: nowrap;
    font-family: 'Roboto Mono', monospace; /* 數字等寬 */
}

/* --- Mobile RWD (手機版優化) --- */
@media (max-width: 768px) {
    .sch-page {
        padding: 10px;
    }

    .sch-header-top h1 {
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 8px; /* 拉近標題與下方距離 */
    }

    /* 控制列容器：改為更緊湊的佈局 */
    .sch-actions-bar {
        display: grid;
        /* 左(選單) 60% | 右(導航) 40% */
        grid-template-columns: 1.5fr 1fr;
        gap: 12px; /* 縮小間距，讓兩者視覺上更靠近 */
        padding: 12px;
        background: #f8fafc;
        border-radius: 12px;
        align-items: center;
        margin-bottom: 0;
    }

    /* 左側：醫師選單 */
    .sch-controls {
        width: 100%;
        margin: 0;
    }

    .ctrl-select {
        width: 100%;
        height: 44px; /* 加高，方便手指點擊 */
        font-size: 1.3rem; /* 字體加大 */
        border: 1px solid #cbd5e1;
        background-color: #fff;
        color: #334155;
        font-weight: 600;
    }

    /* 右側：月份導航 */
    .sch-toolbar-compact {
        display: flex;
        justify-content: flex-end; /* 靠右對齊 */
        align-items: center;
        gap: 8px; /* 按鈕與文字的距離 */
        width: 100%;
    }

    /* 按鈕加大 (好按) */
    .nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #cbd5e1; /* 邊框加深一點，看得比較清楚 */
        color: var(--medical-primary);
        font-size: 1.4rem; /* 箭頭加大 */
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 微陰影增加立體感 */
    }

    /* 月份文字 (顯眼) */
    .curr-month {
        font-size: 1.15rem; /* 字體加大 */
        font-weight: 800; /* 加粗 */
        color: #0f172a; /* 深黑字 */
        white-space: nowrap;
        font-family: 'Roboto Mono', sans-serif;
        background: #e2e8f0; padding: 2px 6px; border-radius: 4px;
    }
}

/* --- Mobile List View (三列式設計) --- */

/* 卡片本體 */
.day-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden; /* 讓內容圓角不溢出 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.1s;
    cursor: pointer;
}

    .day-card.today {
        border: 2px solid var(--medical-primary); /* 今天加粗邊框 */
        background-color: #fff;
    }

/* 卡片標題 (日期) */
.day-header {
    background-color: #f8fafc;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.day-title-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.day-date {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.day-week {
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
}

.badge-today {
    background: #e11d48;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

/* --- 時段列 (核心排版) --- */
.mobile-period-row {
    display: flex; /* 左右排版 */
    border-bottom: 1px dashed #f1f5f9;
}

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

/* 左側：時段標籤 (早/午/晚) */
.mp-label {
    width: 50px; /* 固定寬度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fafbfc;
    border-right: 1px solid #f1f5f9;
    padding: 8px 4px;
    flex-shrink: 0;
}

.mp-icon {
    font-size: 1rem;
    margin-bottom: 2px;
    opacity: 0.7;
}

.mp-text {
    font-weight: 700;
    font-size: 0.9rem;
}

/* 不同時段的顏色標示 */
.period-A .mp-text {
    color: #d97706;
}
/* 早 - 橘 */
.period-B .mp-text {
    color: #059669;
}
/* 午 - 綠 */
.period-C .mp-text {
    color: #2563eb;
}
/* 晚 - 藍 */

/* 右側：醫師內容區 */
.mp-content {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap; /* 醫師多時自動換行 */
    gap: 8px; /* 醫師之間的間距 */
    align-items: center;
}

/* 醫師小膠囊 */
.mp-doc-pill {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.9rem;
    color: #334155;
    transition: background 0.1s;
}

    /* 額滿樣式 */
    .mp-doc-pill.full {
        background: #f1f5f9;
        color: #94a3b8;
        border-color: #f1f5f9;
        text-decoration: line-through; /* 刪除線 */
    }

.mp-name {
    font-weight: 600;
    margin-right: 6px;
}

.mp-room {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
}

.mp-doc-pill.full .mp-room {
    background: transparent;
    color: #ef4444; /* 額滿紅字 */
    text-decoration: none; /* 額滿兩字不刪除線 */
}

/* --- 時段列 --- */
.mobile-period-row {
    display: flex;
    border-bottom: 1px dashed #f1f5f9;
}

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

/* --- 左側標籤 (固定底色或依時段變色) --- */
.mp-label {
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 這裡使用淡灰色底，區隔左側與右側，保持乾淨 */
    background-color: #fafbfc;
    border-right: 1px solid #f1f5f9;
    padding: 8px 4px;
    flex-shrink: 0;
}

.mp-icon {
    font-size: 1rem;
    margin-bottom: 2px;
    opacity: 0.8;
}

.mp-text {
    font-weight: 700;
    font-size: 0.9rem;
}

/* 左側文字顏色 (依時段) */
.period-A .mp-text, .period-A .mp-icon {
    color: #c2410c;
}
/* 早 - 深橘 */
.period-B .mp-text, .period-B .mp-icon {
    color: #15803d;
}
/* 午 - 深綠 */
.period-C .mp-text, .period-C .mp-icon {
    color: #1d4ed8;
}
/* 晚 - 深藍 */


/* --- 右側內容區 --- */
.mp-content {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 膠囊間距 */
    align-items: center;
}

/* --- 醫師膠囊 (核心配色還原) --- */
.mp-doc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    padding: 6px 10px; /* 加大一點點點擊範圍 */
    font-size: 0.95rem;
    font-weight: 500;
    /* 預設邊框與背景 (會被下方覆蓋) */
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    min-width: 100px; /* 讓長度稍微統一一點，視覺較整齊 */
    flex-grow: 1; /* 手機版讓它自動撐滿空間，比較好按 */
    max-width: 48%; /* 一行約兩個 */
}

    /* ✅ 早診配色 (Orange) */
    .mp-doc-pill.slot-A {
        background-color: var(--time-am-bg, #fff7ed);
        border-color: #fed7aa; /* 淺橘邊框 */
        color: var(--time-am-text, #c2410c);
    }

    /* ✅ 午診配色 (Green) */
    .mp-doc-pill.slot-B {
        background-color: var(--time-pm-bg, #f0fdf4);
        border-color: #bbf7d0; /* 淺綠邊框 */
        color: var(--time-pm-text, #15803d);
    }

    /* ✅ 晚診配色 (Blue) */
    .mp-doc-pill.slot-C {
        background-color: var(--time-night-bg, #eff6ff);
        border-color: #bfdbfe; /* 淺藍邊框 */
        color: var(--time-night-text, #1d4ed8);
    }

    /* 額滿狀態 (灰色/刪除線) */
    .mp-doc-pill.full {
        background-color: #f3f4f6 !important;
        border-color: #e5e7eb !important;
        color: #9ca3af !important;
        text-decoration: line-through;
    }

/* 診間號碼 / 額滿文字 */
.mp-room {
    font-size: 0.8rem;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.6); /* 半透明白底，增加層次 */
    color: inherit; /* 跟隨父層顏色 */
    font-weight: 700;
}

.mp-doc-pill.full .mp-room {
    background: transparent;
    color: #ef4444; /* 額滿紅字 */
    text-decoration: none; /* 額滿兩字不刪除線 */
}

/* --- Confirm Modal Styles --- */
.modal-sm {
    max-width: 320px; /* 手機版窄一點比較好看 */
    width: 90%;
    margin: auto;
    border-radius: 16px;
}

.confirm-content {
    background: #f8fafc;
    border-radius: 12px;
    padding: 6px 16px;
    margin-bottom: 12px;
}

.cfm-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 1rem;
}

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

.cfm-label {
    color: #64748b;
    font-weight: 500;
}

.cfm-val {
    color: #334155;
    font-weight: 700;
}
    .cfm-val.highlight {
        color: var(--medical-primary);
        font-size: 1.1rem;
    }

.cfm-date {
    font-size: 20px;
}

.cfm-hint {
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

/* Modal Footer Buttons */
.modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.btn-cancel {
    flex: 1;
    padding: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-confirm {
    flex: 1;
    padding: 12px;
    background: var(--medical-primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    display: block;
}

    .btn-confirm:active {
        background: var(--medical-primary-dark);
    }

/* 手機版卡片：取消點擊感 */
.day-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    /* ✅ 修改：改回預設游標，移除原本的 pointer */
    cursor: default;
    /* 移除原本的 transform active 效果，因為現在不能點了 */
    transition: none;
}

    .day-card:active {
        transform: none;
        background-color: #fff;
    }

/* 醫師膠囊：明確告知可點擊 */
.mp-doc-pill {
    /* ...原有樣式... */
    display: inline-flex;
    align-items: center;
    /* ... */
    /* ✅ 新增：加上手型游標，讓使用者知道這裡可以按 */
    cursor: pointer;
    user-select: none; /* 防止點擊時反白文字 */
}

    /* 額滿狀態不可點 */
    .mp-doc-pill.full {
        cursor: default;
        pointer-events: none; /* 禁止點擊事件 */
    }

/* =========================================
   Modal 專屬優化 (Desktop & Tablet)
   針對 .modal-body 內部的結構進行樣式覆寫
   ========================================= */

/* 1. Modal 容器調整：加寬，讓內容呼吸 */
@media (min-width: 769px) {
    .modal-dialog {
        max-width: 800px; /* 從預設寬度加寬，容納更舒適的排版 */
        width: 90%;
    }

    .modal-body {
        padding: 30px; /* 增加內距 */
        background-color: #fcfdfd; /* 極淡的冷色背景 */
    }
}

/* 2. 網格佈局：改為寬敞的卡片式排列 */
.modal-body .day-modal-grid {
    display: grid;
    /* 自動填滿，但每欄至少 320px，螢幕夠寬會並排，不夠寬自動換行 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px; /* 增加區塊間距 */
}

/* 3. 時段容器 (早/午/晚區塊) */
.modal-body .day-period-col {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px; /* 圓角加大 */
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* 輕微浮起感 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 醫師之間的間距 */
}

/* 4. 時段標題 (如：☀ 上午診) */
.modal-body .period-title {
    font-size: 1.15rem; /* 標題放大 */
    padding-bottom: 12px;
    margin-bottom: 4px;
    color: #334155;
    border-bottom: 2px solid #f1f5f9; /* 加粗分隔線 */
}

/* 5. 醫師卡片 (Slot Pill) 大改造 */
.modal-body .slot-pill {
    /* 改變 display 模式，讓內容更好排版 */
    display: grid;
    grid-template-columns: auto 1fr auto; /* 標籤 | 醫師資訊 | 按鈕 */
    align-items: center;
    gap: 16px;
    padding: 16px; /* 大幅增加點擊範圍與留白 */
    border: 1px solid #e2e8f0;
    background: #fff;
    border-left-width: 6px; /* 左側時段色條加粗 */
    border-radius: 12px;
    margin-bottom: 0; /* 交由父層 gap 控制 */
    min-height: auto; /* 重置月曆格的高度限制 */

    transition: all 0.2s ease;
}

/* 滑鼠懸停特效 */
.modal-body a.slot-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--medical-primary);
}

/* 6. 時段標籤 (早/午/晚 字樣) */
.modal-body .slot-tag {
    width: 36px;
    height: 36px;
    font-size: 1rem; /* 字體放大 */
    border-radius: 8px;
}

/* 7. 醫師姓名與診號區塊 */
.modal-body .slot-name {
    display: flex;
    flex-direction: column; /* 改為垂直排列：上面名字，下面診號 */
    align-items: flex-start;
    padding: 0;
    white-space: normal; /* 允許換行 */
}

/* 醫師姓名本體 */
.modal-body .slot-name {
    font-size: 1.25rem; /* 重點！放大醫師姓名 */
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

    /* 診間號碼 / 額滿狀態 (在 slot-name 裡的 span) */
    .modal-body .slot-name span {
        font-size: 0.95rem !important; /* 強制覆寫原本 inline style */
        color: #64748b !important;
        margin-top: 4px;
        margin-left: 0 !important;
        font-weight: 500;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
    }

        /* 額滿狀態特別樣式 */
        .modal-body .slot-name span.is-full {
            color: #ef4444 !important;
            background: #fee2e2;
        }

/* 8. 預約按鈕區塊 */
.modal-body .book-action {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
}

/* 9. 預約按鈕樣式升級 (實心按鈕) */
.modal-body .book-btn-ghost {
    background-color: var(--medical-primary); /* 改為實心色 */
    color: #fff;
    padding: 8px 20px; /* 寬鬆的按鈕 */
    font-size: 0.95rem;
    border-radius: 50px; /* 膠囊狀 */
    box-shadow: 0 2px 4px rgba(0, 121, 107, 0.2);
    border: 1px solid transparent;
}

    .modal-body .book-btn-ghost:hover {
        background-color: var(--medical-primary-dark);
        color: #fff;
        transform: scale(1.05);
    }

    .modal-body .book-btn-ghost::after {
        content: ' →'; /* 加上箭頭 */
        padding-left: 4px;
        font-weight: bold;
    }

/* 10. 額滿樣式處理 */
.modal-body .slot-pill.full {
    opacity: 0.7;
    background-color: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

    .modal-body .slot-pill.full .slot-name {
        text-decoration: none; /* 移除刪除線，改用顏色區分比較美觀 */
        color: #94a3b8;
    }

/* =========================================
   Modal Header 優化 (修正線條高度與比例)
   ========================================= */

/* 1. 隱藏原本的 Emoji */
.modal-header .modal-title span:first-child {
    display: none !important;
}

/* 2. Header 容器設定 */
.modal-header {
    border-bottom: none;
    padding: 24px 30px 10px 30px;
    align-items: center; /* 讓關閉按鈕跟標題垂直置中 */
}

    /* 3. 日期文字大改造 (核心修改) */
    .modal-header .modal-title span:nth-child(2) {
        display: block;
        position: relative; /* 關鍵：設定定位基準點 */

        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        font-size: 1.8rem; /* 維持大字體 */
        font-weight: 800;
        color: #1e293b;
        line-height: 1; /* 讓文字本身緊湊一點 */

        padding-left: 20px; /* 留出左邊空間給線條 */
        border-left: none; /* 移除原本很醜的 border */
    }

        /* 4. 新增：用偽元素畫出「完美比例」的裝飾線 */
        .modal-header .modal-title span:nth-child(2)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 75%;
            transform: translateY(-50%);
            width: 6px;
            height: 1.3em;
            background-color: var(--medical-primary);
            border-radius: 4px; /* 🔥 加一點圓角，看起來更像設計過的 UI */
        }

/* 5. 關閉按鈕維持原樣 */
.modal-close {
    font-size: 1.5rem;
    color: #94a3b8;
    background: #f1f5f9;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto; /* 確保按鈕被推到最右邊 */
}

    .modal-close:hover {
        background: #e2e8f0;
        color: #ef4444;
        transform: rotate(90deg);
    }

/* =========================================
   Back Button (返回按鈕) 優化設計
   ========================================= */


/* 2. 按鈕本體設計 */
.btn-back-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 圖示與文字間距 */

    padding: 8px 16px;
    height: 40px; /* 固定高度 */

    background-color: #fff;
    border: 1px solid #cbd5e1; /* 淺灰邊框 */
    border-radius: 50px; /* 圓潤膠囊狀 */

    color: #64748b; /* 預設深灰色 */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 滑順動畫 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 微陰影 */
}

    /* SVG 圖示微調 */
    .btn-back-nav svg {
        width: 18px;
        height: 18px;
        transition: transform 0.2s;
    }

    /* Hover 互動效果：變色 + 箭頭位移 */
    .btn-back-nav:hover {
        border-color: var(--medical-primary);
        color: var(--medical-primary);
        background-color: #f0fdfa; /* 淺淺的主色背景 */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

        .btn-back-nav:hover svg {
            transform: translateX(-3px); /* 箭頭向左動一下，暗示「返回」 */
        }

    /* Active 點擊效果 */
    .btn-back-nav:active {
        transform: translateY(0);
        background-color: #e6fffa;
    }

/* 3. Mobile RWD 優化 */
@media (max-width: 768px) {
    .sch-header-top {
        gap: 12px;
        padding-bottom: 12px;
    }

        /* 手機版標題字體調整 (避免太長折行) */
        .sch-header-top h1 {
            font-size: 1.25rem;
            flex: 1; /* 讓標題佔滿剩餘空間 */
        }

    /* 手機版按鈕：變得更精簡 */
    .btn-back-nav {
        padding: 0;
        width: 36px; /* 變成正圓形 */
        height: 36px;
        border-radius: 50%;
    }

        /* 手機版隱藏「返回」文字，只留箭頭 */
        .btn-back-nav span {
            display: none;
        }

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

/* 2. 容器：像攤開的卷軸 */
.sch-container {
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* 3. 標題與返回按鈕：硃砂印章點綴 */
.btn-back-nav {
    border-color: var(--medical-primary) !important;
    color: var(--medical-primary) !important;
}

.btn-back-nav:hover {
    background-color: var(--medical-primary) !important;
    color: #fff !important;
}

/* 4. 醫師選擇器：古風邊框 */
.ctrl-select {
    border: 1px solid var(--border-color);
    background-color: #fff;
    font-family: "標楷體", serif;
}

/* 5. 月曆格子 (Desktop) */
.cal-head {
    background-color: var(--medical-primary) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--medical-primary-dark);
}

.cal-cell {
    background: #fff;
    border-color: var(--border-color) !important;
}

.cal-cell.today {
    background-color: #fffbf0;
    box-shadow: inset 0 0 0 2px var(--medical-highlight); /* 今天用硃砂紅框 */
}

/* 6. 診別膠囊 (Slot Pill) 硃砂印章化 */
.slot-pill {
    border-radius: 4px !important;
    border: 1px solid var(--border-color) !important;
    background: #fff !important;
}

.slot-tag {
    background-color: var(--medical-accent-dark) !important;
    color: var(--medical-primary) !important;
    font-family: "標楷體", serif;
    border-right: 1px solid var(--border-color);
}

/* 額滿標示：紅字硃批感 */
.slot-pill.full .slot-name {
    color: var(--medical-highlight) !important;
    text-decoration: none !important;
    font-weight: bold;
}

/* 7. 手機版列表視圖 (List View) */
.day-card {
    border: 1px solid var(--border-color) !important;
}

.day-header {
    background-color: var(--medical-accent-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.day-date { color: var(--medical-highlight); } /* 日期變紅，像掛曆 */

/* 醫師膠囊 (手機版) */
.mp-doc-pill {
    border-radius: 4px !important;
    font-family: "標楷體", serif;
}

.mp-doc-pill.slot-A { border-left: 4px solid var(--time-am-text); color: var(--time-am-text); }
.mp-doc-pill.slot-B { border-left: 4px solid var(--time-pm-text); color: var(--time-pm-text); }
.mp-doc-pill.slot-C { border-left: 4px solid var(--time-night-text); color: var(--time-night-text); }

/* 8. Modal 彈窗：硃砂批註風格 */
.modal-dialog {
    border: 2px solid var(--medical-primary);
}

.modal-header .modal-title span:nth-child(2)::before {
    background-color: var(--medical-highlight) !important; /* 標題裝飾條改為硃砂紅 */
}

/* --- 桌面版月曆內的藥丸標籤 --- */
.slot-pill {
    /* 核心：將圓角調小，呈現古風箋紙的感覺 */
    border-radius: 3px !important;
    border: 1px solid var(--border-color) !important;
    background: #fff !important;
    /* 硃砂側邊線：寬度變細，看起來更精緻 */
    border-left-width: 4px !important;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    margin-bottom: 3px;
}

.slot-tag {
    /* 左側字體改用楷體，模擬木刻活字 */
    font-family: "標楷體", "Kaiti", serif;
    background-color: var(--medical-accent-dark) !important;
    font-size: 0.7rem;
    padding: 0 4px;
}

/* 額滿標示：不使用刪除線，改用「硃批」紅字 */
.slot-pill.full .slot-name {
    text-decoration: none !important;
    color: var(--medical-highlight) !important;
    font-weight: 700;
}

/* --- 手機版列表的醫師膠囊 --- */
.mp-doc-pill {
    /* 移除大圓角，改為微圓角方塊 */
    border-radius: 4px !important;
    padding: 8px 12px !important;
    background: #fff;
    border: 1px solid var(--border-color);
    /* 增加紙張浮起感 */
    box-shadow: 2px 2px 0px var(--border-color);
}

    /* 不同時段的側邊硃批 */
    .mp-doc-pill.slot-A {
        border-left-color: var(--time-am-text);
    }

    .mp-doc-pill.slot-B {
        border-left-color: var(--time-pm-text);
    }

    .mp-doc-pill.slot-C {
        border-left-color: var(--time-night-text);
    }

/* --- 農曆標籤細節 --- */
.day-lunar {
    font-family: "標楷體", "Kaiti", serif;
    font-size: 0.75rem;
    color: var(--medical-primary);
    background-color: var(--medical-accent);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 10px;
    border: 1px solid rgba(45, 90, 39, 0.15);
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1px;
}

    /* 節氣特別樣式：使用硃砂紅強調，增加專業感 */
    .day-lunar.is-jieqi {
        color: #fff;
        background-color: var(--medical-highlight);
        border-color: var(--medical-highlight);
        box-shadow: 1px 1px 2px rgba(166, 61, 64, 0.2);
    }

/* 針對今天日期的標題組微調 */
.day-card.today .day-lunar {
    border-color: var(--medical-primary);
}

@media (max-width: 768px) {
    .day-title-group {
        display: flex;
        align-items: center; /* 確保國曆數字、週別、農曆對齊 */
    }
}

/* --- 桌機版：日期格內的農曆排版 --- */
.cell-date {
    display: flex;
    align-items: center; /* 讓國曆數字與農曆文字中線對齊 */
    justify-content: flex-start;
    width: 100%;
    font-size: 1.2rem; /* 國曆數字大小 */
}

.cal-lunar-text {
    font-family: "標楷體", "Kaiti", serif;
    font-size: 0.75rem; /* 小字體 */
    color: var(--text-sub);
    opacity: 0.5; /* 極淡，像浮水印 */
    margin-left: 8px;
    font-weight: 400;
    white-space: nowrap;
}

    /* 桌面版節氣：硃砂紅細體 */
    .cal-lunar-text .jq-tag {
        color: var(--medical-highlight);
        margin-left: 4px;
        font-weight: 700;
    }

/* --- 手機版：標題組內的農曆標籤 --- */
.day-lunar {
    font-family: "標楷體", serif;
    font-size: 0.8rem;
    color: var(--medical-primary);
    background-color: var(--medical-accent); /* 米白底 */
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    border: 1px solid rgba(45, 90, 39, 0.1);
    white-space: nowrap;
}

    /* 手機版節氣：強調態 */
    .day-lunar.is-jieqi {
        border-color: var(--medical-highlight);
        color: var(--medical-highlight);
        background-color: #fff; /* 節氣時改為白底紅字，更顯眼 */
    }