/* 三欄 Flex 佈局 */
.container{
	display:flex;
	height:calc(100vh - 86px);
	width:100%;
}
.column{
	display:flex; flex-direction:column;
	padding:5px; gap:5px; height:100%;
}
.left-col,.right-col { flex:1 1 25%; min-width:150px; }
.center-col { flex:1 1 50%; min-width:300px; }
@media(max-width:768px){
	.container{flex-wrap:wrap; overflow:auto;}
	.column{flex:1 1 100%;}
}

/* Widget */
.widget{
	background:#fff; border:1px solid #ccc; border-radius:5px;
	box-shadow:0 1px 3px rgba(0,0,0,.1); overflow:hidden;
	display:flex; flex-direction:column;
}
.widget .title{
	display:flex;justify-content:space-between;align-items:center;
	height:34px;padding:0 10px;border-bottom:1px solid #e7e7e7;background:#f4f4f4;
	font-weight:600;
}
.widget .title .title-action{
	height:26px; line-height:26px; padding:0 10px;
	border:1px solid #bbb; border-radius:6px; background:#ffc107; cursor:pointer;
}
.widget .content{ padding:8px; overflow:auto; }

/* 左欄各 widget 高度比例（與舊版一致） */
#widget-registration-list{ flex:2 1 auto; max-height:250px; }
#widget-visit-record-list{ flex:1 1 auto; max-height:130px; }
#widget-visit-history-detail{ flex:3 1 auto; max-height:410px; }
/* 中欄固定高度 */
#widget-patient-info{ flex:0 0 80px; }
#widget-lab-results{ flex:0 0 50px; }
#widget-current-diagnosis{ flex:1; max-height:660px; }
/* 右欄比例 */
#widget-lab-record-list { flex:1 1 auto; max-height:300px; }
#widget-lab-record-detail{ flex:2 1 auto; max-height:500px; }

/* 共用按鈕 */
.btn-primary{ background:#4caf50; color:#fff; border:none; border-radius:6px; padding:6px 14px; cursor:pointer; }
.btn-secondary{ background:#ddd; color:#333; border:1px solid #bbb; border-radius:6px; padding:6px 14px; cursor:pointer; }
.btn-outline{ background:#fff; color:#4caf50; border:1px solid #4caf50; }

/* 掛號圓球（自動換列＋只垂直捲動） */
.registration-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); /* 自動塞滿、可換列 */
	grid-auto-rows: 44px;            /* 每格高度固定，讓球是正方形 */
	gap: 10px;
	padding: 6px 0;

	/* 關閉水平捲動，僅允許垂直捲動 */
	overflow-x: hidden;
	overflow-y: auto;

	/* 視需求設定最大高度，超過就出垂直捲軸 */
	max-height: var(--reg-grid-max-height, 360px);
	/* 如果外層有 layout 需要，可以加上：width: 100%; */
}

/* 掛號球 */
.circle{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display:flex; align-items:center; justify-content:center;
	font-weight:700; font-size:14px; color:#fff; cursor:pointer; user-select:none;
}

/* 既有狀態色維持 */
.circle.reported{ background:#43a047; }
.circle.not-reported{ background:#bdbdbd; }
.circle.current{ background:#fb8c00; }

.reg-search-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }

/* 保險：外層若有設過 white-space/overflow 造成水平捲軸，一併關閉 */
.registration-widget, .widget, .widget-body {
	white-space: normal;
	overflow-x: hidden;
}

/* 表格：Excel 風格 */
.table-excel{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table-excel th, .table-excel td{
	border:1px solid #e3e3e3; padding:6px 8px; word-break:break-all;
}
.table-excel thead th{ background:#f7f7f7; font-weight:600; }
.table-excel.compact td, .table-excel.compact th{ padding:4px 6px; }
.excel-center{ text-align:center; }
.pager{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; align-items:center; }
.pager .sep{ opacity:.65; }
.pager button{ min-width:34px; padding:2px 8px; border:1px solid #bbb; background:#fff; border-radius:4px; cursor:pointer; }
.pager button.active{ background:#4caf50; color:#fff; border-color:#4caf50; }
.pager button:disabled{ opacity:.5; cursor:not-allowed; }

/* 無框線表格（病患個資、理科、明細） */
.borderless-table{ width:100%; border-collapse:collapse; }
.borderless-table td{ padding:4px 8px; border:none; }

/* Fieldset 通用 */
.fieldset{ border:1px solid #e6e6e6; border-radius:6px; padding:8px; margin-bottom:8px; }
.fieldset legend{ font-weight:600; color:#444; }
.fieldset label{ display:block; margin-top:6px; margin-bottom:4px; color:#333; }
.fieldset textarea{ width:100%; min-height:56px; resize:vertical; }

/* OPD 按鈕列：清空/儲存/更新 同行 */
.opd-buttons{ display:flex; gap:10px; justify-content:flex-start; align-items:center; margin-top:8px; }

/* ── 切診（沿用舊版要求） ───────────────────────── */
.cut-table{ width:100%; table-layout:fixed; border-collapse:collapse; }
.cut-table thead td{ text-align:center; border-bottom:1px solid #eee; font-weight:600; }
.cut-table td{ border:1px solid #f0f0f0; padding:2px 4px; }

.cut-table thead td:first-child,
.cut-table tbody td:first-child{ width:25px; text-align:center; }
.cut-table thead td.side-title{ width:150px; }
.cut-table thead td.pulse-title{ width:200px; }

.cut-table tbody tr{ height:125px; }             /* 寸/關/尺列高 */
.cut-table tbody td:nth-child(2),
.cut-table tbody td:nth-child(3){ width:150px; } /* 左手/右手欄寬 */
.cut-table tbody td:nth-child(4){
	width:200px; height:375px; vertical-align:middle; text-align:center;
}

.input-group-set{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:100%; }
.input-group-set input{
	width:120px; height:28px; text-align:center; border:1px solid #bbb; border-radius:6px; background:#fff;
}
.input-group-set input.selected-input{ border-width:2px; border-color:#4caf50; }

/* 脈象鈕 2 x 15（30 顆），80x25 */
#buttonPanel{
	display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
	width:200px; margin:0 auto;
}
#buttonPanel button{
	width:80px; height:25px; border:1px solid #bbb; border-radius:6px; background:#fafafa; cursor:pointer;
}
#buttonPanel button.button-active{ background:#ffe082; border-color:#f1b000; }

/* ── 證型（新介面：無 textarea） ─────────────────── */
.pattern-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.pattern-toolbar .category-btn{
	height:28px; padding:0 10px; border:1px solid #bbb; border-radius:6px; background:#f6f6f6; cursor:pointer;
}
.pattern-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; min-height:36px; border:1px solid #e6e6e6; border-radius:6px; margin:6px 0; }
.chip{ padding:4px 8px; border-radius:20px; background:#e9f5ff; border:1px solid #cce8ff; }
.chip .chip-remove{ margin-left:6px; cursor:pointer; }

/* 置中的彈出層（多欄自適應、最高 6 列） */
#patternPopover{
	position:fixed; z-index:2147483647; overflow-y:auto; overflow-x:hidden; max-height:calc(100vh - 40px);
	border:1px solid #444; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25);
	padding:10px 36px 10px 10px;
}
#patternPopover[hidden]{ display:none; }
.pattern-item{ width:120px; height:auto; border:1px solid #bbb; border-radius:6px; background:#f9f9f9; cursor:pointer; }
.pattern-item.selected{ background:#ffeb3b; border-color:#f1b000; }
#patternPopover, #patternPopover *{ pointer-events:auto; }

/* 讓頁面上所有 table 都有基本 Excel 風格（跳過無框表） */
table{ border-collapse:collapse; }
table:not(.borderless-table) th,
table:not(.borderless-table) td{ border:1px solid #e3e3e3; padding:4px 6px; }
table:not(.borderless-table) thead th{ background:#f7f7f7; }

/* header-less widget（個資、理科）只有 content 區 */
#widget-patient-info .content, #widget-lab-results .content{ padding-top:6px; }

/* pager 圖示按鈕 */
.pager{
	display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; align-items:center;
}
.pager .sep{ opacity:.65; }
.pager button{
	min-width:34px; padding:2px 8px; border:1px solid #bbb; background:#fff; border-radius:4px; cursor:pointer;
}
.pager button.active{ background:#4caf50; color:#fff; border-color:#4caf50; }
.pager button:disabled{ opacity:.5; cursor:not-allowed; }

/* 圖示型按鈕尺寸固定 */
.pager .pager-icon{
	min-width:auto; padding:2px 4px;
	display:inline-flex; align-items:center; justify-content:center;
}
.pager .pager-icon img{ width:18px; height:18px; display:block; }

/* pattern chips 的關閉按鈕更好點 */
.pattern-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; min-height:36px; border:1px solid #e6e6e6; border-radius:6px; margin:6px 0; }
.chip{ padding:4px 8px; border-radius:20px; background:#e9f5ff; border:1px solid #cce8ff; display:inline-flex; align-items:center; }
.chip .chip-remove{ margin-left:6px; cursor:pointer; font-weight:700; }

/* 本次診斷標題右側動作鈕（清空/儲存 or 回復/更新） */
.diagnosis-title-with-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

#diagnosisActionsDock {
	display: flex;
	gap: 6px;
	align-items: center;
}

#diagnosisActionsDock .action-group[hidden] {
	display: none !important;
}

#diagnosisActionsDock button {
	border: none;
	background: #1976d2;
	color: #fff;
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 13px;
	cursor: pointer;
}
#diagnosisActionsDock button:first-child {
	background: #9e9e9e;
}

/* 我的病患列表 */
#myPatientsBody .my-patient-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:6px 4px;
	border-bottom:1px solid #eee;
	cursor:pointer;
}
#myPatientsBody .my-patient-row:hover{
	background:#f5f5f5;
}
#myPatientsBody .mp-name small{
	color:#888;
	margin-left:4px;
}
#myPatientsBody .mp-meta{
	color:#555;
	font-size:12px;
}

/* ===================== 舊方劑欄位隱藏 ===================== */
.legacy-formula-label,
.legacy-formula-textarea {
	display: none;
}

/* ===================== 治療方法主表 ===================== */
#treatment-wrapper {
	border: 1px solid #c0dcee;
	padding: 8px;
	margin-top: 4px;
	background-color: #f8fbff;
}

.treatment-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.treatment-toolbar .btn-small {
	padding: 3px 10px;
	font-size: 13px;
}

.treatment-toolbar .btn-icon {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
}

.treatment-table {
	width: 100%;
	table-layout: fixed;
	font-size: 13px;
}

/* excel 風格：奇偶列不同背景 */
.treatment-table tbody tr:nth-child(odd) {
	background-color: #ffffff;
}
.treatment-table tbody tr:nth-child(even) {
	background-color: #f3f7fb;
}

/* 欄位 */
.treatment-table th {
	background-color: #e4eef9;
	font-weight: bold;
}

/* ===================== dialog 共用樣式 ===================== */

dialog {
	border: 2px solid #DEDEDE;
	border-radius: 15px;
	padding: 0;
	margin: 0;                 /* 避免瀏覽器預設外距 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	max-height: 80vh;
	background-color: #fff;    /* 內部底色一致 */
	display: flex;             /* 讓 header / body / footer 垂直排布 */
	flex-direction: column;
	overflow: hidden;          /* 確保內容不超出框線 */
}

#dlgTreatmentFormula {
	width: 600px;
	height: 400px;
}

#dlgTreatmentAcupuncture {
	width: 600px;
	height: 420px;
}

.modal-header {
	display: flex;
	margin: 0;
	align-items: center;
	text-align: center;
	justify-content: space-between;
	padding: 4px 10px;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
}

.modal-body {
	flex: 1;              /* 撐開剩餘高度 */
	margin: 0;
	padding: 6px 10px;
	overflow-y: auto;
	min-height: 0;
}

.modal-footer {
	display: flex;
	margin: 0;
	justify-content: center;
	gap: 12px;
	border-top: 1px solid #ddd;
	background-color: #f9f9f9;
	padding: 8px 0;
	flex-shrink: 0;
}

dialog .modal-footer {
	flex-shrink: 0;     /* 讓 footer 固定高度 */
}

.form-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 5px;
}

.dialog-label {
	flex: 0 0 100px;
	line-height: 24px;
}

.dialog-field {
	flex: 1;
}

.dialog-close {
	border: none;
	background: transparent;
	font-size: 18px;
	cursor: pointer;
}

/* ===================== 方劑 dialog 內部 ===================== */

#formulaSearchInput {
	width: 100%;
	box-sizing: border-box;
}

.formula-search-dropdown {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	max-height: 140px;
	overflow-y: auto;
	border: 1px solid #ccc;
	background-color: #fff;
	position: relative;
	z-index: 10;
	display: none;
}

.formula-search-dropdown li {
	padding: 4px 8px;
	cursor: pointer;
	font-size: 13px;
}

.formula-search-dropdown li:hover,
.formula-search-dropdown li.active {
	background-color: #ffeaa7;
}

/* 樹狀處方 */
.formula-tree {
	border: 1px solid #ccc;
	height: 200px;
	overflow-y: auto;
	padding: 4px 6px;
	background-color: #fff;
	font-size: 13px;
}

.formula-item-root {
	margin-bottom: 4px;
	font-weight: bold;
}

.formula-item-children {
	margin-left: 16px;
}

.formula-node {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

/* =========================================
 * dlgTreatmentFormula：純藥材列正確排列
 * 目標：
 *  黃耆 [ 3 ]                              ✕
 * ========================================= */

.formula-node.material-node {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 藥名：不要撐開 */
.formula-node.material-node .formula-name {
	flex: 0 0 auto !important;
	white-space: nowrap;
}

/* 份量：緊接藥名 */
.formula-node.material-node .formula-qty {
	width: 70px;
}

/* ✕：推到最右側 */
.formula-node.material-node .formula-remove {
	margin-left: auto !important;
}

#formulaNote {
	width: -webkit-fill-available;
}

.formula-qty {
	width: 46px;
	margin-right: 4px;
}

.formula-name {
	flex: 1;
}

.formula-remove {
	margin-left: 4px;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #d63031;
}

/* ==== 治療方法：新增處方 / 劑型選擇 ==== */

/* 包住輸入框 + radio 的容器 */
.formula-input-row {
	display: flex;
	flex-direction: column;
}

/* 讓輸入框 + 劑型選擇同一列排列 */
.formula-input-with-type {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* 縮短「藥材名稱」輸入框寬度 */
#formulaSearchInput {
	flex: 0 0 260px;       /* 依畫面可自行再微調 */
	max-width: 260px;
}

/* 劑型 radio 區塊 */
.formula-type-group {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	white-space: nowrap;
}

.formula-type-group label {
	cursor: pointer;
}

.formula-type-group input[type="radio"] {
	margin-right: 4px;
}

/* 讓下拉選單貼齊輸入框下方 */
.formula-input-row .formula-search-dropdown {
	margin-top: 4px;
}

/* ===================== 針炙 dialog 內部 ===================== */

#dlgTreatmentAcupuncture .modal-body {
	flex: 1;
	overflow-y: auto;
	min-height: 0; /* 關鍵：避免 Flex 壓縮時無法捲動 */
}

.treatment-acu-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.acu-section {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 4px 6px;
	background-color: #fdfdfd;
}

.acu-section-points {
	flex: 0 0 200px; /* 固定高度 200px */
	overflow-y: auto;
	min-height: 0;
	padding: 8px 10px;
}

.acu-title {
	font-weight: bold;
	margin-bottom: 4px;
}

.acu-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.acu-btn {
	min-width: 60px;
	padding: 4px 6px;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: #f2f2f2;
	font-size: 13px;
	cursor: pointer;
}

.acu-btn.point-selected {
	background-color: #fff9c4; /* 淡黃色 */
}

.acu-btn.disabled {
	opacity: 0.5;
	cursor: default;
}

/* 預設：淺灰 */
.acu-btn {
	color: #000000;
	background-color: #f0f0f0;
}

/* 規則 1：選中（白色） */
.acu-btn.meridian-selected {
	color: #000000;
	background-color: #ffffff;
}

/* 規則 2：底下穴位有選（淺黃） */
.acu-btn.meridian-has-selected {
	color: #000000;
	background-color: #fff6c7;
}

/* 規則 3：井(木)預設（青色） */
.acu-btn.well-point {
	color: #FFFFFF;
	background-color: #3A7D34;
}

/* 規則 4：熒(火)預設（赤色） */
.acu-btn.spring-point {
	color: #FFFFFF;
	background-color: #C8102E;
}

/* 規則 5：俞(土)預設（明黃） */
.acu-btn.stream-point {
	color: #000000;
	background-color: #F5E642;
}

/* 規則 6：原(土)預設（土黃） */
.acu-btn.source-point {
	color: #000000;
	background-color: #B59A5A;
}

/* 規則 7：經(金)預設（白色） */
.acu-btn.river-point {
	color: #000000;
	background-color: #FFFFFF;
}

/* 規則 8：合(水)預設（黑色） */
.acu-btn.sea-point {
	color: #FFFFFF;
	background-color: #000000;
}

.acu-point-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.acu-hand-btn {
	padding: 3px 10px;
	border: 1px solid #aaa;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.acu-hand-btn.active {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* ===================== 癒後追蹤 (followUp) 新樣式 ===================== */

.followup-block {
	border: 1px solid #333;
	padding: 6px 8px;
	margin-top: 4px;
	font-size: 13px;
}

.followup-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 4px;
}

.followup-row:last-child {
	margin-bottom: 0;
}

.followup-label {
	flex: 0 0 72px;
	line-height: 1.4;
}

.followup-label .followup-unit {
	font-size: 12px;
	color: #666;
}

/* 基本控制區 */
.followup-control {
	flex: 1;
}

/* 這個 class 專門給 radio 用，排成一列不換行 */
.followup-control.inline-options {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
}

.followup-control label {
	margin-right: 8px;
	white-space: nowrap;
}

/* 0~10 分的間距略小 */
.followup-score label {
	margin-right: 4px;
}

/* 副作用 textarea */
.followup-sideeffects textarea {
	width: 100%;
	min-height: 60px;
	resize: vertical;
}

/* 歷史明細 readonly */
.followup-block.followup-readonly .followup-sideeffect-text {
	min-height: 60px;
	border: 1px solid #e0e0e0;
	padding: 4px 6px;
	white-space: pre-wrap;
}

.followup-display-value {
	white-space: nowrap;
}

/* 隱藏實際送出的 followUp textarea */
textarea#followUp[hidden] {
	display: none;
}

/* =========================
卡片（統一一列）
========================= */

.treat-card {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 8px;
	margin-bottom: 8px;
	background: #fafafa;
	cursor: pointer;
}

/* =========================
標題
========================= */

.treat-title {
	font-weight: bold;
	margin-bottom: 4px;
}

.treat-title.modified {
	color: #d32f2f;
}

/* =========================
藥材 inline
========================= */

.treat-inline span {
	display: inline-block;
	margin-right: 10px;
}

/* =========================
diff 樣式
========================= */

.treat-added {
	color: #2e7d32;
	margin-top: 4px;
}

.treat-removed {
	color: #636363;
	margin-top: 4px;
}

.treat-changed {
	color: #ed6c02;
	margin-top: 4px;
}

.treat-changed .old {
	text-decoration: line-through;
	margin: 0 4px;
}

.treat-changed .new {
	font-weight: bold;
	margin: 0 4px;
}

/* =========================
單味藥卡
========================= */

.material-card {
	background: #fff8e1;
}

/* =========================
diff 收合
========================= */

.treat-diff.collapsed {
	display: none;
}

/* =========================
   針炙穴位：選取狀態
   必須放在 well/spring/stream/source/river/sea 樣式後面
========================= */

.acu-btn.point-selected,
.acu-btn.well-point.point-selected,
.acu-btn.spring-point.point-selected,
.acu-btn.stream-point.point-selected,
.acu-btn.source-point.point-selected,
.acu-btn.river-point.point-selected,
.acu-btn.sea-point.point-selected {
        background: #fff9c4 !important;
        color: #111 !important;
        border-color: #111 !important;
        font-weight: bold;
        box-shadow: 0 0 0 2px #ffd54f inset;
}

/* =========================
   經絡按鈕
========================= */

.acu-meridian-btn {
        border: 1px solid #aaa;
        background: #fff;
        color: #333;
        border-radius: 6px;
        padding: 6px 12px;
        cursor: pointer;
        transition: all .15s ease;
}

/* 已有穴位 */
.acu-meridian-btn.has-points {
        background: #fff3cd;
        border-color: #f0ad4e;
        color: #8a5800;
}

/* 目前選取 */
.acu-meridian-btn.active {
        background: #1976d2 !important;
        border-color: #1976d2 !important;
        color: #fff !important;
        font-weight: bold;
}