/* ===================================================================== clinic-ui-8.css — ดีไซน์ใหม่ (Claude Design 9–10 ต.ค. 2569 · รุ่นสมดุล) ที่มา: design-handoff/clinic-base.css + design.md + README (กติการ่วมทุกหน้า) ชั้นบนสุด ทับ style.css + clinic-ui-2..7 · ไม่แก้ชื่อคลาสเดิม แค่เปลี่ยนหน้าตา ห้ามใช้ vh/vw ตรง ๆ (หน้าถูกซูมตามขนาดตัวหนังสือ) → calc(100vh / var(--zf, 1)) ===================================================================== */ /* ── 0. ตัวแปร: เทา 80% · เทาถ่าน (เมนู) · มะกอก (สีประจำคลินิก) · สีความหมาย ── */ :root { --nav: #2a2e35; --bg: #f2f4f7; --bg-soft: #f5f7fa; --surface: #ffffff; --card: #fff; --line-strong: #d5dbe3; --chip: #eef1f5; --text: #1a2230; --text-2: #4b5565; --text-3: #667085; --brand: #5a6427; --brand-soft: #eef0e4; --brand-viz: #6b7a2e; --go: #3f6212; --go-hover: #34520f; --go-press: #2a420b; --go-bg: #ecf3e2; --danger-text: #b91c1c; --danger-bg: #fdecec; --danger-line: #ecc8c8; --warn: #b45309; --warn-bg: #fdf1e1; --warn-text: #8f4407; --info: #2556c4; --info-bg: #e7eefa; --info-text: #1e4a96; --disabled-bg: #e1e6ec; --disabled-ink: #667085; /* ชื่อเดิมของระบบ → สีใหม่ (ทุกหน้าที่ใช้ตัวแปรเดิมเปลี่ยนตามทันที) */ --primary: #5a6427; --primary-dark: #454d1e; --primary-soft: #eef0e4; --muted: #667085; --faint: #7a8494; --border: #e4e8ee; --line: #edf0f4; --danger: #c62828; --danger-soft: #fdecec; --danger-ink: #b91c1c; --green: #3f6212; --green-soft: #ecf3e2; --green-ink: #3f6212; --amber: #b45309; --amber-soft: #fdf1e1; --amber-ink: #8f4407; --info-soft: #e7eefa; --accent-bg: #eef0e4; --r: 8px; --r-lg: 12px; --sh: 0 1px 2px rgba(31,36,25,.04); --sh-lg: 0 10px 30px rgba(0,0,0,.22); --sh-modal: 0 18px 48px rgba(26,34,48,.30); --hit: 44px; --fs-min: 14px; --fs-sm: 15px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: 24px; --fs-num: 28px; --h-btn: 56px; --h-btn-2: 52px; --h-btn-sm: 40px; --h-input: 48px; } /* ── 1. พื้นฐาน ── */ body { background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.45; } a { color: var(--info-text); } :focus-visible { outline: 3px solid var(--info); outline-offset: 2px; } .muted { color: var(--text-3); font-size: var(--fs-min); } label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } th { font-size: var(--fs-min); } .badge { font-size: var(--fs-min); } table { font-variant-numeric: tabular-nums; } /* ── 2. แถบเมนูบน: เทาถ่าน 56px · แท็บที่เลือกต่อกับเนื้อหา ── */ nav#topnav { background: var(--nav); color: #fff; min-height: 56px; padding: 0 12px; gap: 4px; flex-wrap: nowrap; align-items: stretch; box-shadow: none; position: relative; z-index: 40; } nav#topnav .brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 0; margin-right: 2px; flex: none; font-size: 17px; } nav#topnav .brand .logo { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; overflow: hidden; } nav#topnav .brand .logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; } nav#topnav .brand .bn { display: flex; flex-direction: column; line-height: 1.15; } nav#topnav .brand .bn b { font-size: 17px; font-weight: 700; white-space: nowrap; } nav#topnav .brand .bn small { font-size: 14px; color: #c9d2df; white-space: nowrap; } nav#topnav #navTabs { display: flex; align-items: flex-end; flex: 1 1 auto; min-width: 0; gap: 0; } nav#topnav a.tab { height: 46px; align-self: flex-end; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: #fff; padding: 0 9px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } nav#topnav a.tab:hover { background: rgba(255,255,255,.10); color: #fff; } nav#topnav a.tab.active { background: var(--bg); color: var(--text); border-bottom: 0; } nav#topnav a.tab .tab-n, nav#topnav .tab-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } nav#topnav .nav-more { align-self: flex-end; display: flex; } nav#topnav .nav-more > .more-btn { height: 46px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: #fff; padding: 0 10px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 0; box-shadow: none; } nav#topnav .nav-more.active > .more-btn { background: var(--bg); color: var(--text); } nav#topnav .nav-more > .more-btn .pin { width: 10px; height: 10px; border-radius: 5px; background: #ff6b6b; } nav#topnav .nav-more-menu { top: 52px; left: 0; width: 250px; border-radius: 10px; box-shadow: var(--sh-lg); padding: 6px; border: 0; } nav#topnav .nav-more-menu a { min-height: 46px; border-radius: 8px; font-size: 17px; color: var(--text); } nav#topnav .nav-more-menu a:hover { background: var(--chip); } /* ช่องค้นหาชิดขวา */ nav#topnav .nav-search { margin-left: auto; align-self: center; } nav#topnav .nav-search input { height: 40px; min-height: 40px; border-radius: 8px; background: #fff; border: 0; font-size: 16px; width: 200px; } nav#topnav .nav-right { margin-left: 8px; align-self: center; gap: 6px; font-size: 15px; color: #fff; padding: 0; flex: none; } nav#topnav .nav-right .nr-btn { height: 40px; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: none; text-decoration: none; white-space: nowrap; } nav#topnav .nav-right .nr-btn:hover { background: rgba(255,255,255,.12); } nav#topnav .nav-right .nr-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff6b6b; color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } nav#topnav .user-menu { position: relative; } nav#topnav .user-pop { display: none; position: absolute; right: 0; top: 46px; width: 270px; background: #fff; color: var(--text); border-radius: 10px; box-shadow: var(--sh-lg); padding: 6px; z-index: 45; flex-direction: column; } nav#topnav .user-menu.open .user-pop { display: flex; } nav#topnav .user-pop .up-who { padding: 8px 12px 6px; font-size: 15px; color: var(--text-2); border-bottom: 1px solid var(--line); margin-bottom: 4px; } nav#topnav .user-pop .up-who b { display: block; color: var(--text); font-size: 17px; } nav#topnav .user-pop .up-h { padding: 6px 12px 2px; font-size: 14px; font-weight: 700; color: var(--text-3); } nav#topnav .user-pop button, nav#topnav .user-pop a { min-height: 46px; border: 0; background: #fff; color: var(--text); border-radius: 8px; text-align: left; justify-content: flex-start; padding: 0 12px; font-size: 17px; font-weight: 500; display: flex; align-items: center; gap: 8px; box-shadow: none; width: 100%; } nav#topnav .user-pop button:hover, nav#topnav .user-pop a:hover { background: var(--chip); } nav#topnav .user-pop button.on { font-weight: 700; background: var(--brand-soft); } nav#topnav .user-pop .up-logout { color: var(--danger-text); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; } /* แชทอยู่บนเมนูแล้ว — ซ่อนปุ่มลอยบนจอคอม (มือถือยังใช้ปุ่มลอย) */ @media (min-width: 761px) { body.nav-chat .chat-fab { display: none !important; } .chat-panel { top: 64px; bottom: auto; } } @media (max-width: 1100px) { nav#topnav .brand .bn small, nav#topnav .nr-label { display: none; } nav#topnav .nav-search input { width: 140px; } } /* ── 3. แถบชื่อหน้า = h1 + กล่อง "ตอนนี้ต้องทำ" + ขั้นตอนคนไข้ + เพิ่มเติม ▾ ── */ .page-head { background: var(--brand-soft); border-bottom: 1px solid #dde3eb; padding: 8px 16px; gap: 12px; flex-wrap: nowrap; position: sticky; top: 0; z-index: 36; } .page-head .t { font-size: var(--fs-xl); font-weight: 700; white-space: nowrap; margin: 0; letter-spacing: 0; } .page-head .now-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #b9c2cf; border-radius: 10px; padding: 5px 6px 5px 10px; min-height: 48px; } .page-head .now-box:has(.now-text:empty):not(:has(#nowAct button)) { visibility: hidden; } .page-head .now-tag { font-size: 14px; font-weight: 700; color: #fff; background: var(--brand); border-radius: 6px; padding: 2px 8px; white-space: nowrap; } .page-head .now-text { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); } .page-head #nowAct:empty { display: none; } .page-head #nowAct button { min-height: 40px; height: 40px; background: var(--brand-soft); color: var(--brand); border: 0; font-weight: 700; padding: 0 12px; white-space: nowrap; } .page-head #nowAct button:hover { filter: brightness(.95); background: var(--brand-soft); } .page-head .steps { display: flex; align-items: center; gap: 4px; flex: none; } .page-head .steps .step { padding: 4px 10px; border-radius: 8px; font-size: 15px; font-weight: 700; border: 1.5px solid #dde3eb; background: #fff; color: var(--text-3); white-space: nowrap; } .page-head .steps .step.is-done { border-color: #c4d6a4; color: var(--go); } .page-head .steps .step.is-done::before { content: "✓ "; } .page-head .steps .step.is-current { background: var(--nav); border-color: var(--nav); color: #fff; } .page-head .steps .arr { color: var(--text-3); font-weight: 700; } .page-head .acts { margin-left: 0; flex: none; gap: 8px; flex-wrap: nowrap; } .page-head .acts button { min-height: 48px; font-size: 17px; } .page-head .acts button.primary { background: var(--go); color: #fff; font-weight: 700; } .page-head .acts button.primary:hover { background: var(--go-hover); } .page-head .acts button.ghost, .page-head .acts .more-dd-btn { background: #fff; color: var(--brand); border: 2px solid var(--brand); font-weight: 700; } .page-head + .container { margin-top: 16px; } body:has(.page-head) .sticky-head { top: 66px; } @media (max-width: 1250px) { .page-head .steps { display: none; } } @media (max-width: 760px) { .page-head { flex-wrap: wrap; padding: 8px 12px; } .page-head .t { font-size: 20px; } .page-head .now-box { flex-basis: 100%; order: 3; } .page-head .now-text { font-size: 16px; } } /* ── 4. ปุ่ม: 5 สถานะ · เขียวหน้าละ 1 ปุ่ม ── */ button, .btn { min-height: 44px; border-radius: 10px; font-weight: 700; font-size: var(--fs-base); } button:active, .btn:active { filter: brightness(.9); transform: none; } /* ปุ่มที่ไม่ได้ใส่คลาส = ปุ่มรอง (กรอบมะกอก) — ในหน้าต่างเด้งเป็นปุ่มบันทึกสีเขียว (ข้อ 9) */ button:not([class]), a.btn:not([class*="btn-"]) { background: #fff; color: var(--brand); border: 2px solid var(--brand); padding: 8px 16px; } button:not([class]):hover { background: var(--brand-soft); color: var(--brand); } .btn-green, button.btn-green, .btn.btn-green { background: var(--go); color: #fff; border-color: var(--go); } .btn-green:hover { background: var(--go-hover); color: #fff; border-color: var(--go-hover); } .btn-green:active { background: var(--go-press); } .btn-outline { background: #fff; color: var(--brand); border: 2px solid var(--brand); } .btn-outline:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); } .btn-gray { background: #fff; color: var(--text-2); border: 2px solid #a3adbb; } .btn-gray:hover { background: var(--chip); color: var(--text); border-color: #a3adbb; } .btn-red { background: #fff; color: var(--danger-text); border: 2px solid var(--danger-text); } .btn-red:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-text); } .btn-sm, button.btn-sm { min-height: 40px; height: auto; padding: 6px 12px; font-size: 15px; border-width: 1.5px; border-radius: 8px; } .btn-sm.btn-outline, .btn-sm.btn-gray { border-color: var(--line-strong); color: var(--text); } .btn-sm.btn-outline:hover, .btn-sm.btn-gray:hover { background: var(--chip); border-color: #a3adbb; } .btn-sm.btn-green { color: #fff; border-color: var(--go); } .btn-sm.btn-red { color: var(--danger-text); border-color: #e3b3b3; } button:disabled, .btn:disabled, button[aria-disabled="true"], .btn[aria-disabled="true"] { background: var(--disabled-bg) !important; color: var(--disabled-ink) !important; border-color: transparent !important; cursor: not-allowed; filter: none; } .btn-reason { font-size: 14px; font-weight: 700; color: var(--warn-text); margin-top: 2px; } /* ปุ่มหลักของหน้า (ส่งต่อ / เก็บเงิน) — สูง 56 ตัวหนังสือ 19/700 */ .action-bar .btn-green, #sendBtn, #toPharmBtn, #payGoBtn, .btn-main { min-height: var(--h-btn) !important; font-size: 19px !important; font-weight: 700 !important; padding: 0 24px !important; border-radius: 10px !important; } .is-loading, button.is-loading { pointer-events: none; } /* ── 5. ช่องกรอก ── */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { border: 1.5px solid var(--line-strong); border-radius: 8px; font-size: var(--fs-base); background: #fff; color: var(--text); } input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.ss-native), select:not(.ss-native) { min-height: var(--h-input); } input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(90,100,39,.15); outline: none; } input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--go); } .ss-pop .ss-it { font-size: 17px; } /* ── 6. การ์ด · การ์ดตัวเลข · ตาราง ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh); padding: 14px 16px; } .card h2 { font-size: var(--fs-md); font-weight: 700; color: var(--text); } .card h3 { font-size: var(--fs-base); font-weight: 700; } .stat-box, .stat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .stat-box .lbl, .stat .lbl { font-size: 16px; font-weight: 600; color: var(--text-2); } .stat-box .val, .stat .val { font-size: 30px; font-weight: 700; letter-spacing: 0; color: var(--text); } .stat-box .note, .stat .note { font-size: var(--fs-min); color: var(--text-3); } .stat-box .note.warn { color: var(--warn-text); } .stat-box .note.bad { color: var(--danger-text); } .stat-box .note.good { color: var(--go); } .table-wrap { border: 1px solid var(--border); border-radius: 12px; background: #fff; } th { background: var(--bg-soft); color: var(--text-2); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); } td { padding: 10px 12px; border-bottom: 1px solid var(--line); } tbody tr:hover td { background: #fafbfc; } /* ── 7. ชิปกรอง (เลือก = เทาถ่าน) · แท็บ (เลือก = ขีดเขียว) ── */ .chip, button.chip { min-height: 40px; height: auto; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--text); font-size: 16px; font-weight: 600; } .chip:hover { border-color: #a3adbb; background: #fff; color: var(--text); } .chip.on, .chip[aria-pressed="true"] { background: var(--nav); border-color: var(--nav); color: #fff; } .chip .n { background: var(--chip); color: var(--text); border-radius: 99px; padding: 0 7px; font-size: 14px; font-weight: 700; } .chip.on .n { background: #fff; color: var(--nav); } .tab-btns { gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .tab-btns button { background: transparent; border: 0; border-bottom: 4px solid transparent; border-radius: 0; min-height: 44px; padding: 8px 12px; font-size: 18px; font-weight: 700; color: var(--text-3); box-shadow: none; } .tab-btns button:hover { background: transparent; color: var(--text); } .tab-btns button.on { background: transparent; color: var(--text); border-bottom-color: var(--go); } /* ── 8. ป้าย ── */ .badge { border-radius: 6px; padding: 1px 8px; font-weight: 700; } .b-waiting { background: var(--brand-soft); color: var(--brand); } .b-examining { background: var(--nav); color: #fff; } .b-pharmacy { background: var(--warn-bg); color: var(--warn-text); } .b-paid, .b-done { background: var(--go-bg); color: var(--go); } .b-low { background: var(--danger-bg); color: var(--danger-text); } .b-drug, .b-service { background: var(--chip); color: var(--text-2); } .opd-tag { background: var(--info-bg); color: var(--info-text); border-color: transparent; border-radius: 6px; font-size: 14px; } .opd-tag.new { background: #eef1f5; color: var(--text-2); border-color: transparent; } /* แพ้ยา: แถบแดงเต็มกว้าง · กล่องแดงสรุป */ .allergy-pill, .allergy-bar { background: var(--danger); color: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 700; border: 0; } .allergy-pill.none { background: var(--go-bg); color: var(--go); } .alert-red, .alert.danger { background: var(--danger-bg); border: 2px solid var(--danger); color: var(--danger-text); border-radius: 8px; } .alert { border-radius: 8px; font-size: var(--fs-base); } /* ── 9. หน้าต่างเด้ง: มุม 14 · ✕ 44×44 · พื้นหลังมืด ── */ .modal-bg { background: rgba(26,34,48,.5); backdrop-filter: none; } .modal { border-radius: 14px; box-shadow: var(--sh-modal); } .modal h2 { font-size: var(--fs-lg); font-weight: 700; } .modal-x { width: 44px !important; height: 44px !important; min-height: 44px !important; font-size: 22px !important; border: 0 !important; background: transparent !important; color: var(--text-2) !important; border-radius: 8px !important; } .modal-x:hover { background: var(--chip) !important; color: var(--text) !important; } /* ปุ่มในหน้าต่าง: ปุ่มที่ไม่มีคลาส = ปุ่มบันทึก (เขียว) */ .modal button:not([class]), .modal .m-foot button:not([class]), .confirm button.ok { background: var(--go); color: #fff; border-color: var(--go); } .modal button:not([class]):hover { background: var(--go-hover); color: #fff; } /* ── 10. กล่องยืนยัน · แจ้งเตือน + เลิกทำ ── */ .confirm-bg { background: rgba(26,34,48,.5); } .confirm { border-radius: 14px; } .confirm .warn, .confirm .cf-warn { background: var(--warn-bg); color: var(--warn-text); border-radius: 8px; } #toast { background: var(--text); color: #fff; border-radius: 10px; font-size: 17px; padding: 12px 20px; bottom: 22px; } .toast-undo { background: var(--text); border-radius: 10px; } .toast-undo button { background: var(--brand-soft); color: var(--text); border: 0; min-height: 42px; } /* ── 11. สถานะหน้า ── */ .state { border: 2px dashed var(--line-strong); border-radius: 12px; color: var(--text-2); } .card .state { border: 0; } .state .t { font-size: 18px; font-weight: 700; color: var(--text); } .state.error { border: 2px solid var(--danger); background: #fff; } .sk { background: #e9edf2; } /* ── 12. คิว ── */ .queue-item { border: 1.5px solid #e1e6ec; border-radius: 10px; background: #fff; margin-bottom: 6px; padding: 8px 10px; } .queue-item.active { background: var(--brand-soft); border-color: var(--brand); box-shadow: none; } .queue-item:hover { background: #fafbfc; } .queue-item.active:hover { background: var(--brand-soft); } .qm-item { border: 1.5px solid #e1e6ec; border-radius: 10px; } .danger { color: var(--danger-text); } /* ── 13. ราคาแก้ไม่ได้ (ห้องยา) ── */ .locked { color: var(--text-2); white-space: nowrap; } .locked::after { content: " 🔒"; } /* ── 13b. มือถือจอเล็ก (iPhone 402px ฯลฯ) — กันของซ้อนกัน ── */ /* ป้าย OPD ยาว ๆ ตัดบรรทัดได้ ไม่ดันปุ่มข้าง ๆ (เช่น ⏫ แรก ในคิว) */ .opd-tag { max-width: 100%; white-space: normal; } .qm-name { min-width: 0; } @media screen and (max-width: 760px) { /* ปุ่ม "เมนู" บนแถบล่างเป็น