* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft JhengHei", sans-serif; }
        body { background-color: #f8fafc; margin: 0; padding: 20px; color: #1e293b; }
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: white; padding: 15px 25px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        h1 { margin: 0; font-size: 20px; color: #0f172a; display: flex; align-items: center; gap: 10px; }
        .role-tag { background: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: bold; }
        
        /* 垂直佈局：掛號在上方 (橫向排列)，看板在下方 */
        .main-layout { display: flex; flex-direction: column; gap: 20px; }
        .registration-panel { width: 100%; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
        .board-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; }
        
        /* 表單樣式 */
        h2 { margin-top: 0; font-size: 16px; color: #334155; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 500; color: #475569; } /* 字體放大 */
        input, select { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 16px; height: 42px; line-height: 1.2; } /* 字體放大，統一高度避免 input/select 視覺不一致 */
        input:focus, select:focus { outline: none; border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,0.1); }
        .btn { width: 100%; padding: 12px; background: #0284c7; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; } /* 字體放大 */
        .btn:hover { background: #0369a1; }

        /* 桌面版掛號區塊收合（mobile 由 @media 規則接管） */
        .registration-panel h2 {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
        }
        .registration-panel h2::after {
            content: "▴ 收合";
            color: #94a3b8;
            font-size: 13px;
            font-weight: normal;
        }
        .registration-panel.collapsed h2::after { content: "▾ 展開"; }
        .registration-panel.collapsed > *:not(h2) { display: none !important; }
        .registration-panel.collapsed h2 { border-bottom: none; padding-bottom: 0; }
        
        /* 看板分區樣式 (門診 vs 住院) */
        .section-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
        .section-title { font-size: 18px; font-weight: bold; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; } /* 字體放大 */
        .title-opd { color: #0d9488; border-left: 4px solid #0d9488; padding-left: 8px; }
        .title-backstage { color: #4f46e5; border-left: 4px solid #4f46e5; padding-left: 8px; }
        .title-finished { color: #64748b; border-left: 4px solid #64748b; padding-left: 8px; }
        
        /* 表格樣式 */
        table { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; } /* 字體放大 */
        th { background: #f8fafc; padding: 12px; font-weight: 600; color: #64748b; border-bottom: 1px solid #e2e8f0; }
        td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        tr:hover { background-color: #f8fafc; }
        
        /* 狀態標籤與顏色控制 */
        .status-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 14px; font-weight: bold; } /* 字體放大 */
        .status-0 { background: #f1f5f9; color: #64748b; } /* 預約未報到 */
        .status-1 { background: #ccfbf1; color: #0f766e; } /* 1 已報到 */
        .status-2 { background: #e0f2fe; color: #0369a1; } /* 2 看診中 */
        .status-3 { background: #fef9c3; color: #a16207; } /* 3 等候檢查 */
        .status-4 { background: #f3e8ff; color: #6b21a8; } /* 4 等處理及藥物 */
        .status-5 { background: #ffedd5; color: #c2410c; animation: pulse 2s infinite; } /* 5 等結帳及手續 */
        .status-6 { background: #f1f5f9; color: #64748b; } /* 6 結束 (改為不起眼的灰色) */
        .status-7 { background: #fee2e2; color: #b91c1c; } /* 7 未到 */
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        /* 時間警示樣式 */
        .time-alert { font-weight: 500; color: #64748b; }
        .time-warning { color: #ea580c; font-weight: bold; }
        .time-danger { color: #dc2626; font-weight: bold; }

        /* 類別顏色：預約=淡橘、現場=淡綠、遲到=淡紫 */
        .regtype-預約 { background: #ffedd5 !important; color: #c2410c !important; }
        .regtype-現場 { background: #dcfce7 !important; color: #15803d !important; }
        .regtype-遲到 { background: #f3e8ff !important; color: #6b21a8 !important; }

        /* 主治醫師顏色標記 */
        .doctor-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
        }
        .doctor-陳醫師 { background: #ffedd5; color: #c2410c; } /* 橘（同預約） */
        .doctor-林醫師 { background: #dcfce7; color: #15803d; } /* 綠（同現場） */
        .doctor-其他   { background: #e0f2fe; color: #0369a1; } /* 藍（同看診中） */

        /* 備註欄位限制寬度，避免長內容撐爆其他欄位 */
        #opdTable td:nth-child(4),
        #backstageTable td:nth-child(3),
        #finishedTable td:nth-child(4) {
            min-width: 110px;
            max-width: 150px;
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }
        /* 備註 inline 編輯輸入框 */
        .note-input {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid transparent;
            border-radius: 4px;
            background: transparent;
            font-size: 14px;
            color: #334155;
            font-family: inherit;
        }
        .note-input:hover { background: #f8fafc; border-color: #e2e8f0; cursor: text; }
        .note-input:focus { outline: none; background: white; border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2,132,199,0.2); }
        .note-input.dirty { background: #fffbeb; border-color: #fbbf24; }

        /* 預約未報到的列：文字淡化以區別正在處理中的門診 */
        tr.row-pending td { color: #94a3b8; }
        tr.row-pending td strong { color: #94a3b8; font-weight: 500; }
        /* 連同醫師色塊與類別色塊也轉為灰階 */
        tr.row-pending .doctor-tag,
        tr.row-pending [class*="regtype-"] {
            background: #f1f5f9 !important;
            color: #94a3b8 !important;
        }

        /* 已歸檔 Modal */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
            z-index: 1000; display: none; align-items: center; justify-content: center;
            padding: 20px;
        }
        .modal-overlay.open { display: flex; }
        .modal-content {
            background: white; border-radius: 12px; padding: 20px;
            width: 100%; max-width: 900px; max-height: 85vh;
            display: flex; flex-direction: column; gap: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #f1f5f9; padding-bottom: 10px;
        }
        .modal-close {
            background: none; border: none; font-size: 20px;
            cursor: pointer; color: #64748b; padding: 4px 10px; border-radius: 6px;
        }
        .modal-close:hover { background: #f1f5f9; }
        #archiveSearch {
            padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px;
            font-size: 14px; width: 100%; height: 40px;
        }
        #archiveListContainer { overflow: auto; flex: 1; }
        #archiveListContainer table { width: 100%; border-collapse: collapse; font-size: 14px; }
        #archiveListContainer th {
            background: #f8fafc; padding: 10px; text-align: left;
            font-size: 13px; color: #64748b; border-bottom: 1px solid #e2e8f0;
            position: sticky; top: 0;
        }
        #archiveListContainer td { padding: 10px; border-bottom: 1px solid #f1f5f9; }
        #archiveListContainer tr:hover { background: #f8fafc; }
        .archive-empty { color: #94a3b8; text-align: center; padding: 30px; }

        /* 連線狀態樣式 */
        .connection-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; transition: all 0.3s; }
        .dot-online { background-color: #10b981; box-shadow: 0 0 6px #10b981; }
        .dot-syncing { background-color: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: blink 1s infinite; }
        .dot-offline { background-color: #ef4444; box-shadow: 0 0 6px #ef4444; }
        @keyframes blink { 50% { opacity: 0.3; } }
        
        /* 前台操作按鈕 */
        .action-btn { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; } /* 字體放大 */
        .action-btn:hover { background: #e2e8f0; }
        .btn-checkout { background: #f97316; color: white; border: none; }
        .btn-checkout:hover { background: #ea580c; }
        .btn-modify { background: #64748b; color: white; border: none; margin-left: 4px; }
        .btn-modify:hover { background: #475569; }

        /* ===== 窄螢幕（手機 / iPad 分割視窗）卡片佈局 ===== */
        @media (max-width: 1000px) {
            body { padding: 8px; }
            header { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
            h1 { font-size: 16px; }
            #live-clock { font-size: 13px; }
            .connection-status { font-size: 12px; }

            .registration-panel { padding: 14px; }
            .registration-panel > div { gap: 10px !important; }
            .registration-panel .form-group { min-width: 100% !important; flex: 1 1 100% !important; }

            /* 掛號區塊預設收合 */
            .registration-panel h2 {
                margin: 0; cursor: pointer;
                display: flex; justify-content: space-between; align-items: center;
                border-bottom: none; padding-bottom: 0;
            }
            .registration-panel h2::after {
                content: "▾ 展開掛號";
                color: #94a3b8; font-size: 13px; font-weight: normal;
            }
            .registration-panel.expanded h2::after { content: "▴ 收合掛號"; }
            .registration-panel:not(.expanded) > *:not(h2) { display: none !important; }

            .section-card { padding: 14px; }
            .section-title { font-size: 16px; }

            /* 隱藏批次變更（手機很少用） */
            #bulk-action-area { display: none !important; }

            /* 表格 → 卡片 */
            table { display: block; }
            table thead { display: none; }
            table tbody { display: block; }

            table tbody tr {
                display: block;
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 10px;
                margin-bottom: 8px;
                box-shadow: 0 1px 2px rgba(0,0,0,0.03);
            }
            table tbody tr:hover { background: #fff; }

            /* ====== 精簡模式（預設）：一行顯示 病歷號 名字 報到時間 等候時間 狀態 ====== */
            table tbody tr:not(.expanded) {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px 12px;
                padding: 10px 14px;
                cursor: pointer;
            }
            table tbody tr:not(.expanded) td {
                padding: 0; border: none; display: none;
            }
            /* 顯示這幾欄 */
            table tbody tr:not(.expanded) td[data-label="病歷號"],
            table tbody tr:not(.expanded) td[data-label="貓咪名字"],
            table tbody tr:not(.expanded) td[data-label="報到時間"],
            table tbody tr:not(.expanded) td[data-label="等候時間"],
            table tbody tr:not(.expanded) td[data-label="住院天數"],
            table tbody tr:not(.expanded) td[data-label="目前狀態"],
            table tbody tr:not(.expanded) td[data-label="最終狀態"] {
                display: flex;
                align-items: center;
                flex-shrink: 0;
            }
            /* 隱藏所有 ::before label，後面再個別恢復 */
            table tbody tr:not(.expanded) td::before { display: none; }

            table tbody tr:not(.expanded) td[data-label="病歷號"] {
                font-size: 16px; font-weight: bold; color: #0f172a;
            }
            table tbody tr:not(.expanded) td[data-label="貓咪名字"] {
                font-size: 16px; color: #1e293b;
            }
            table tbody tr:not(.expanded) td[data-label="報到時間"] {
                font-size: 13px; color: #64748b;
            }
            table tbody tr:not(.expanded) td[data-label="報到時間"]::before {
                content: "報到 ";
                display: inline !important;
                color: #94a3b8; margin-right: 4px;
            }
            table tbody tr:not(.expanded) td[data-label="等候時間"] {
                font-size: 13px; color: #64748b;
            }
            table#backstageTable tbody tr:not(.expanded) td[data-label="等候時間"]::before {
                content: "等候 ";
                display: inline !important;
                color: #94a3b8; margin-right: 4px;
            }
            table tbody tr:not(.expanded) td[data-label="住院天數"] {
                font-size: 13px; color: #64748b;
            }
            /* 狀態用 order 移到最右（不受 DOM 順序影響）*/
            table tbody tr:not(.expanded) td[data-label="病歷號"]     { order: 1; }
            table tbody tr:not(.expanded) td[data-label="貓咪名字"]   { order: 2; }
            table tbody tr:not(.expanded) td[data-label="報到時間"]   { order: 3; }
            table tbody tr:not(.expanded) td[data-label="等候時間"]   { order: 4; }
            table tbody tr:not(.expanded) td[data-label="住院天數"]   { order: 5; }
            table tbody tr:not(.expanded) td[data-label="目前狀態"],
            table tbody tr:not(.expanded) td[data-label="最終狀態"] {
                order: 9;
                margin-left: auto;
            }

            /* ====== 展開模式：顯示所有欄位 ====== */
            table tbody tr.expanded { padding: 10px 14px; }
            table tbody tr.expanded td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 7px 0;
                border-bottom: 1px dashed #f1f5f9;
                gap: 12px;
                text-align: right;
            }
            table tbody tr.expanded td:last-child {
                border-bottom: none;
                padding-top: 12px;
                margin-top: 4px;
                border-top: 1px solid #e2e8f0;
            }
            table tbody tr.expanded td[data-label]:not([data-label=""])::before {
                content: attr(data-label);
                font-weight: 600;
                color: #64748b;
                font-size: 13px;
                flex-shrink: 0;
                text-align: left;
            }
            /* 勾選框那欄縮小 */
            table tbody tr.expanded td:not([data-label]),
            table tbody tr.expanded td[data-label=""] {
                justify-content: flex-start;
                padding: 4px 0;
                border-bottom: none;
            }
            /* 操作選項按鈕 */
            table tbody tr.expanded td:last-child > div {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                justify-content: flex-end;
                flex: 1;
            }
            .action-btn { padding: 8px 14px; font-size: 14px; min-height: 36px; }
            .btn-modify { margin-left: 0; }
            table tbody td select { padding: 6px 8px; font-size: 14px; min-height: 36px; }
        }