/* HimGo — windows-classic theme + MDI chrome (สืบทอดจาก GoCard/pharmGO:
   Sarabun, title bar น้ำเงิน #1a5276→#003366, ปุ่ม bevel แบบ classic) */

:root {
  --title-grad: linear-gradient(180deg, #1a5276 0%, #003366 100%);
  --title-grad-inactive: linear-gradient(180deg, #7a8a99 0%, #5a6a7a 100%);
  --face: #ece9d8;
  --face-dark: #d4d0c8;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --bevel-darker: #404040;
  --accent: #1a5276;
  --desktop-bg: #3a6ea5;
  --hilite: #316ac5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Sarabun', 'Tahoma', sans-serif;
  font-size: 14px;
}

/* ============ App chrome ============ */

.desktop-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--desktop-bg);
}

#app-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--title-grad);
  color: #fff;
  font-weight: 600;
  user-select: none;
  flex: none;
}

.app-user { margin-left: auto; font-weight: 400; display: flex; align-items: center; gap: 8px; }

.btn-titlebar {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  padding: 1px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.btn-titlebar:hover { background: rgba(255,255,255,.3); }

/* ============ Menu bar (VB6 MDI) ============ */

#menubar {
  display: flex;
  flex-wrap: wrap;
  background: var(--face);
  border-bottom: 1px solid var(--bevel-dark);
  padding: 1px 2px;
  user-select: none;
  flex: none;
  position: relative;
  z-index: 5000;
}

.menubar-item {
  padding: 3px 10px;
  cursor: default;
  white-space: nowrap;
  position: relative;
}

/* ปุ่มย่อ/ยืดแถบเมนู */
.menubar-toggle {
  margin-left: auto;
  padding: 3px 9px;
  cursor: pointer;
  color: #555;
  font-size: 10px;
  user-select: none;
}
.menubar-toggle:hover { background: var(--hilite); color: #fff; }

#menubar-ghost {
  background: var(--face);
  border-bottom: 1px solid var(--bevel-dark);
  padding: 1px 10px;
  font-size: 11px;
  color: #444;
  cursor: pointer;
  user-select: none;
  flex: none;
}
#menubar-ghost:hover { background: var(--hilite); color: #fff; }
.menubar-item:hover, .menubar-item.open {
  background: var(--hilite);
  color: #fff;
}

/* popup ลอยบน body เป็น position:fixed — JS (himgo-mdi.js) คำนวณ left/top/maxHeight
   ห้ามฝังซ้อนใน popup แม่ ไม่งั้นโดน overflow clip จนเมนูลูกกดไม่ได้ */
.menu-popup {
  position: fixed;
  min-width: 230px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--face);
  color: #000;
  border: 1px solid var(--bevel-darker);
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
  padding: 2px;
  z-index: 6000;
}

.menu-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 22px 4px 10px;
  cursor: default;
  white-space: nowrap;
}
.menu-entry:hover { background: var(--hilite); color: #fff; }
.menu-entry.disabled { color: #9a968c; }
.menu-entry.disabled:hover { background: none; color: #9a968c; }
.menu-entry .sub-arrow { margin-left: auto; margin-right: -14px; font-size: 10px; }
.menu-entry .ported-dot { color: #2e8b57; font-size: 10px; }
.menu-entry:hover .ported-dot { color: #b8ffd8; }

.menu-sep { border-top: 1px solid var(--bevel-dark); border-bottom: 1px solid var(--bevel-light); margin: 3px 2px; }

/* ============ Desktop + icons ============ */

#desktop {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#desktop-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  gap: 6px;
  padding: 14px;
  user-select: none;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
}
.desktop-icon:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); }
.desktop-icon .icon-glyph { font-size: 34px; line-height: 1; text-shadow: 1px 2px 3px rgba(0,0,0,.5); }
.desktop-icon .icon-label { color: #fff; font-size: 12px; text-shadow: 1px 1px 2px #000; line-height: 1.25; }

/* ============ MDI windows ============ */

.mdi-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 180px;
  background: var(--face);
  border: 1px solid var(--bevel-darker);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  resize: both;
  overflow: hidden;
}
.mdi-window.maximized { resize: none; }
.mdi-window.minimized { display: none; }

.mdi-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--title-grad-inactive);
  color: #e8e8e8;
  font-weight: 600;
  cursor: default;
  user-select: none;
  flex: none;
}
.mdi-window.active > .mdi-titlebar { background: var(--title-grad); color: #fff; }

.mdi-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.mdi-btn {
  width: 22px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  font-family: 'Tahoma', sans-serif;
  background: var(--face);
  color: #000;
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  cursor: pointer;
  padding: 0;
}
.mdi-btn:active { border-color: var(--bevel-darker) var(--bevel-light) var(--bevel-light) var(--bevel-darker); }
.mdi-btn.close-btn:hover { background: #c0392b; color: #fff; }

.mdi-body {
  flex: 1;
  overflow: auto;
  padding: 8px;
  background: var(--face);
}

/* ============ Taskbar ============ */

#taskbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--face);
  border-top: 1px solid var(--bevel-light);
  flex: none;
  user-select: none;
}

.taskbar-brand {
  font-weight: 700;
  color: var(--accent);
  padding: 2px 10px;
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  background: var(--face-dark);
}

#taskbar-windows { display: flex; gap: 4px; flex: 1; overflow-x: auto; }

.task-btn {
  max-width: 180px;
  min-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  cursor: pointer;
}
.task-btn.active {
  background: #fff;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  font-weight: 600;
}

#taskbar-clock { font-size: 12px; padding: 0 8px; color: #333; }

/* ============ Shared widgets ============ */

.btn {
  font-family: inherit;
  font-size: 13px;
  padding: 3px 14px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-darker) var(--bevel-darker) var(--bevel-light);
  cursor: pointer;
}
.btn:active { border-color: var(--bevel-darker) var(--bevel-light) var(--bevel-light) var(--bevel-darker); }
.btn-primary {
  background: linear-gradient(180deg, #2874a6 0%, #1a5276 100%);
  color: #fff;
  font-weight: 600;
}

.vb-frame {
  border: 1px solid var(--bevel-dark);
  border-radius: 0;
  margin: 0 0 8px 0;
  padding: 8px 10px;
  background: var(--face);
}
.vb-frame legend { font-size: 13px; color: #003366; padding: 0 6px; }

.field-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.field-grid label { font-size: 13px; }

input[type=text], input[type=password], select {
  font-family: inherit;
  font-size: 13px;
  padding: 2px 5px;
  border: 1px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  background: #fff;
}
input:focus, select:focus { outline: 1px solid var(--accent); }

.grid-wrap {
  border: 1px solid var(--bevel-dark);
  background: #fff;
  max-height: 340px;
  overflow: auto;
}

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  position: sticky;
  top: 0;
  background: var(--face-dark);
  border: 1px solid var(--bevel-dark);
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
}
.data-table td { border: 1px solid #e0e0e0; padding: 3px 6px; }
.data-table tbody tr:nth-child(even) { background: #f2f6fa; }
.data-table tbody tr:hover { background: #dce9f7; }
.data-table .empty-row { text-align: center; color: #888; padding: 14px; }

.findpt-status { font-size: 12px; color: #003366; margin: 4px 2px 6px; }

.pt-banner {
  margin-top: 8px;
  padding: 5px 8px;
  background: #fffbe6;
  border: 1px solid #d4c97a;
  font-size: 13px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 10px;
  font-size: 13px;
}
.detail-grid label { color: #555; }
.detail-grid b, .detail-grid span { min-height: 18px; }

/* ============ แท็บประวัติ (SSTab สไตล์ VB6) ============ */

.hist-tabs {
  display: flex;
  gap: 0;
  margin: 6px 0 0;
  border-bottom: 1px solid var(--bevel-dark);
  flex-wrap: wrap;
}

.hist-tab {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 14px;
  border: 1px solid var(--bevel-dark);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #e8e4d8, #d4cfc0);
  cursor: pointer;
  margin-right: 2px;
  color: #333;
}

.hist-tab.active {
  background: #fff;
  font-weight: 700;
  color: #003366;
  position: relative;
  top: 1px;
}

/* stub window for un-ported forms */
.stub-form { padding: 18px 12px; text-align: center; color: #333; }
.stub-form .stub-icon { font-size: 40px; }
.stub-form code { background: #fff; border: 1px solid var(--bevel-dark); padding: 1px 6px; display: inline-block; margin-top: 4px; }

/* ============ Modal dialog (แทน prompt/confirm) ============ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 40, .35);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  position: static;
  width: 400px;
  min-height: 0;
  resize: none;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
}
.modal-dialog .mdi-body { padding: 14px 16px; }
.modal-msg { font-size: 14px; white-space: pre-line; margin-bottom: 10px; }
.modal-input { width: 100%; padding: 4px 6px; font-size: 14px; margin-bottom: 4px; }
.modal-dialog .dialog-buttons { margin-top: 10px; }
.modal-dialog .btn { min-width: 84px; }

/* ============ Login page ============ */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--desktop-bg);
}

.login-dialog { width: 400px; resize: none; }
.login-form { padding: 14px 18px; }

.login-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.login-logo { font-size: 42px; }
.login-appname { font-size: 20px; font-weight: 700; color: #003366; }
.login-hosname { font-size: 13px; color: #444; }

.field-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; margin-bottom: 10px; }
.field-row input { width: 100%; padding: 4px 6px; }

.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.login-error {
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #c0392b;
  font-size: 13px;
  padding: 5px 8px;
  margin-bottom: 8px;
}

/* คั่น "หรือ" ก่อนปุ่ม Provider ID */
.login-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  color: #7a8aa0;
  font-size: 12px;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #cdd6e2;
}

/* ปุ่มเข้าใช้งานผ่าน Provider ID (MOPH) */
.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0a7c5a 0%, #0e9b6e 100%);
  border: 1px solid #0a6e50;
  padding: 7px 10px;
}
.btn-provider:hover { filter: brightness(1.06); }
.btn-provider .provider-mark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  background: rgba(255, 255, 255, .22);
  border-radius: 3px;
  padding: 1px 5px;
}

/* โลโก้ Provider ID ด้านล่าง (พื้นโปร่งใส — วางบนพื้นครีมตรง ๆ) */
.provider-brand {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.provider-brand img {
  height: 60px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
}

/* ============ 🎨 ธีมโมเดิร์น (สลับด้วยปุ่มที่ taskbar — จำใน localStorage) ============ */

body.theme-modern {
  --title-grad: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --title-grad-inactive: linear-gradient(135deg, #64748b 0%, #475569 100%);
  --face: #f8fafc;
  --face-dark: #e2e8f0;
  --bevel-light: #e2e8f0;
  --bevel-dark: #cbd5e1;
  --bevel-darker: #94a3b8;
  --accent: #2563eb;
  --desktop-bg: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #0e7490 100%);
  --hilite: #2563eb;
}

body.theme-modern.desktop-body,
body.theme-modern.login-body { background: var(--desktop-bg); }

body.theme-modern #app-titlebar {
  background: rgba(15, 23, 42, .92);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
}
body.theme-modern .btn-titlebar { border-radius: 8px; }

body.theme-modern #menubar {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #dbe2ea;
  padding: 2px 6px;
}
body.theme-modern .menubar-item { border-radius: 6px; padding: 4px 11px; }
body.theme-modern .menubar-item:hover, body.theme-modern .menubar-item.open {
  background: var(--hilite); color: #fff;
}

body.theme-modern .menu-popup {
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 5px;
}
body.theme-modern .menu-entry { border-radius: 6px; padding: 5px 22px 5px 10px; }
body.theme-modern .menu-sep { border-top: 1px solid #e7ecf2; border-bottom: none; }

body.theme-modern .desktop-icon { border-radius: 10px; }
body.theme-modern .desktop-icon:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
}

body.theme-modern .mdi-window {
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(2, 8, 23, .45);
  background: #fff;
}
body.theme-modern .mdi-titlebar { padding: 6px 10px; border-radius: 11px 11px 0 0; }
body.theme-modern .mdi-window.maximized,
body.theme-modern .mdi-window.maximized .mdi-titlebar { border-radius: 0; }
body.theme-modern .mdi-btn {
  border: none;
  border-radius: 6px;
  width: 24px;
  height: 21px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
body.theme-modern .mdi-btn:hover { background: rgba(255, 255, 255, .38); }
body.theme-modern .mdi-btn.close-btn:hover { background: #dc2626; }
body.theme-modern .mdi-body { background: #fff; padding: 10px; }

body.theme-modern #taskbar {
  background: rgba(255, 255, 255, .95);
  border-top: 1px solid #dbe2ea;
  padding: 4px 8px;
}
body.theme-modern .taskbar-brand {
  border: none;
  border-radius: 8px;
  background: var(--title-grad);
  color: #fff;
}
body.theme-modern .task-btn {
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
}
body.theme-modern .task-btn.active {
  background: #eff6ff;
  border-color: var(--accent);
  color: #1d4ed8;
}

body.theme-modern .btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 4px 14px;
  transition: background .12s, box-shadow .12s;
}
body.theme-modern .btn:hover { background: #f1f5f9; }
body.theme-modern .btn:active { border-color: #94a3b8; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
body.theme-modern .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: #2563eb;
  color: #fff;
}
body.theme-modern .btn-primary:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
body.theme-modern .btn-success {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-color: #0d9488;
  color: #fff;
}
body.theme-modern .btn-danger,
body.theme-modern button[data-role=del] {
  border-radius: 8px;
}

body.theme-modern .vb-frame {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  padding: 10px 12px;
}
body.theme-modern .vb-frame legend {
  color: #1d4ed8;
  font-weight: 600;
}

body.theme-modern input[type=text], body.theme-modern input[type=password],
body.theme-modern input[type=date], body.theme-modern input[type=number],
body.theme-modern input[type=time], body.theme-modern select,
body.theme-modern textarea {
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 3px 8px;
  background: #fff;
}
body.theme-modern input:focus, body.theme-modern select:focus,
body.theme-modern textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

body.theme-modern .grid-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
body.theme-modern .data-table th {
  background: #f1f5f9;
  border: none;
  border-bottom: 2px solid #dbe2ea;
  color: #334155;
}
body.theme-modern .data-table td {
  border: none;
  border-bottom: 1px solid #eef2f6;
}
body.theme-modern .data-table tbody tr:nth-child(even) { background: #f8fafc; }
body.theme-modern .data-table tbody tr:hover { background: #eff6ff; }

body.theme-modern .findpt-status { color: #1d4ed8; }
body.theme-modern .pt-banner {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 8px;
}

body.theme-modern .hist-tab {
  border: 1px solid #dbe2ea;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f1f5f9;
}
body.theme-modern .hist-tab.active { background: #fff; color: #1d4ed8; }

body.theme-modern .modal-dialog { border-radius: 12px; }
body.theme-modern .stub-form code {
  border: 1px solid #dbe2ea;
  border-radius: 6px;
}
body.theme-modern .login-dialog { border-radius: 12px; }
body.theme-modern .login-appname { color: #1d4ed8; }
body.theme-modern .login-error { border-radius: 8px; }

/* ปุ่มสลับธีมที่ taskbar */
.theme-toggle {
  flex: none;
  min-width: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 2px 10px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
body.theme-modern .theme-toggle {
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
}
.theme-toggle:hover { background: #eef6ff; }

/* ปุ่มบน title bar ในธีมโมเดิร์น — ห้ามโดน .btn override จนตัวหนังสือขาวบนพื้นขาว */
body.theme-modern .btn-titlebar {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  border-radius: 8px;
}
body.theme-modern .btn-titlebar:hover { background: rgba(255, 255, 255, .3); }

/* ปุ่มจัดเรียงหน้าต่างบน taskbar (เมนู Window ของ VB6 MDI) */
.winctl-group { display: flex; gap: 2px; flex: none; padding: 0 4px; }
.winctl-btn {
  width: 26px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  background: var(--face);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  padding: 0;
}
.winctl-btn:hover { background: #fff; }
.winctl-btn:active { border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.winctl-btn.winctl-close:hover { background: #c0392b; color: #fff; }
body.theme-modern .winctl-btn {
  border: 1px solid #dbe2ea;
  border-radius: 6px;
  background: #fff;
}
body.theme-modern .winctl-btn:hover { background: #eff6ff; }
body.theme-modern .winctl-btn.winctl-close:hover { background: #dc2626; color: #fff; }

/* ============ 📋 แผงคิวขวามือ (dock ใน MDI workspace) ============ */

#workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; }
#workspace > #desktop { flex: 1; min-width: 0; }

#queue-splitter {
  width: 5px;
  cursor: col-resize;
  background: var(--face-dark);
  border-left: 1px solid var(--bevel-dark);
  flex: none;
}
#queue-splitter:hover { background: var(--hilite); }

#queue-panel {
  width: 320px;
  min-width: 220px;
  max-width: 60vw;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--face);
  border-left: 1px solid var(--bevel-dark);
  overflow: hidden;
}
body.queue-hidden #queue-panel, body.queue-hidden #queue-splitter { display: none; }

.qp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--title-grad);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.qp-count { font-weight: 400; font-size: 11px; opacity: .9; flex: 1; }
.qp-btn {
  width: 22px; height: 20px; padding: 0;
  font-size: 11px; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
}
.qp-btn:hover { background: rgba(255,255,255,.35); }

.qp-filter {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--bevel-dark);
  flex: none;
}
.qp-filter input[type=text] { flex: 1; min-width: 0; }

.qp-body { flex: 1; overflow: auto; background: #fff; }
.qp-empty { text-align: center; padding: 28px 10px; color: #999; font-size: 12px; }

.qp-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 2px 8px;
  padding: 5px 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 12px;
}
.qp-row:hover { background: #dce9f7; }
.qp-row .qp-no {
  grid-row: span 2;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  align-self: center;
  text-align: center;
}
.qp-row .qp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-row .qp-state { font-size: 10.5px; }
.qp-row .qp-sub { grid-column: 2 / 4; font-size: 10.5px; color: #777; }
.qp-row.qp-done { opacity: .55; }
.qp-row.qp-allergy .qp-name { color: #b03a2e; }

.qp-foot {
  padding: 3px 8px;
  font-size: 10.5px;
  color: #777;
  border-top: 1px solid var(--bevel-dark);
  flex: none;
}

body.theme-modern #queue-panel { background: #fff; border-left: 1px solid #dbe2ea; }
body.theme-modern #queue-splitter { background: #e8edf3; border-left: 1px solid #dbe2ea; }
body.theme-modern #queue-splitter:hover { background: var(--accent); }
body.theme-modern .qp-btn { border: none; border-radius: 5px; }
body.theme-modern .qp-row:hover { background: #eff6ff; }

/* แท็บโหมดในแผงคิว + ส่วนเรียกคิว */
.qp-mode { display: flex; flex: none; border-bottom: 1px solid var(--bevel-dark); background: var(--face-dark); }
.qp-mode-btn {
  flex: 1;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #444;
}
.qp-mode-btn.active { background: var(--face); border-bottom-color: var(--accent); font-weight: 600; color: var(--accent); }
#qp-sec-visits, #qp-sec-call { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.qc-group { border-bottom: 1px solid var(--bevel-dark); }
.qc-group-head {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--face-dark);
  color: #333;
  position: sticky;
  top: 0;
}
.qc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.qc-row .qc-no { font-size: 17px; font-weight: 700; color: var(--accent); min-width: 38px; text-align: center; }
.qc-row .qc-info { flex: 1; min-width: 0; }
.qc-row .qc-sub { font-size: 10.5px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-row .qc-act { display: flex; gap: 3px; }
.qc-row .qc-act button {
  width: 26px; height: 22px; padding: 0;
  font-size: 12px; cursor: pointer;
  background: var(--face);
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.qc-row .qc-act button:hover { background: #fff; }
.qc-row.qc-miscall .qc-no { color: #c0392b; }
.qc-row.qc-called { background: #f3f9f3; }
body.theme-modern .qp-mode { background: #f1f5f9; border-bottom: 1px solid #dbe2ea; }
body.theme-modern .qc-row .qc-act button { border: 1px solid #dbe2ea; border-radius: 5px; }
body.theme-modern .qc-group-head { background: #f1f5f9; }

/* ปุ่มบน title bar — ใช้ #app-titlebar ชนะ .btn เสมอ (เดิม .btn ที่อยู่ท้าย
   ไฟล์ทับพื้นเป็นสีครีม → ตัวหนังสือขาวอ่านไม่ออกในธีมคลาสสิค) */
#app-titlebar .btn-titlebar {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 2px 12px;
}
#app-titlebar .btn-titlebar:hover { background: rgba(255, 255, 255, .35); }
body.theme-modern #app-titlebar .btn-titlebar { border-radius: 8px; }

/* ============ 🔍 dropdown ค้นหาได้ (select ที่ตัวเลือกเยอะ) ============ */
.selfilter-pop {
  position: fixed;
  z-index: 9500;
  min-width: 240px;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--bevel-darker);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}
.selfilter-pop input {
  margin: 4px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--bevel-dark);
}
.selfilter-list { overflow-y: auto; max-height: 300px; }
.selfilter-item {
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selfilter-item:hover, .selfilter-item.hi { background: var(--hilite); color: #fff; }
.selfilter-item.cur { font-weight: 700; }
.selfilter-empty { padding: 10px; font-size: 12px; color: #999; text-align: center; }
body.theme-modern .selfilter-pop { border: 1px solid #dbe2ea; border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.2); }
body.theme-modern .selfilter-pop input { border-radius: 7px; border: 1px solid #cbd5e1; }
body.theme-modern .selfilter-item { border-radius: 6px; margin: 0 4px; }

/* ============ 📅 datepicker พ.ศ. ไทย (ครอบ input[type=date] ทุกตัว) ============ */
.thdate-disp {
  font-family: inherit;
  font-size: 13px;
  padding: 2px 5px;
  border: 1px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  background: #fff;
  width: 110px;
  cursor: pointer;
}
body.theme-modern .thdate-disp { border: 1px solid #cbd5e1; border-radius: 7px; padding: 3px 8px; }
.thdate-pop {
  position: fixed;
  z-index: 9500;
  background: #fff;
  border: 1px solid var(--bevel-darker);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  padding: 6px;
  font-size: 13px;
  user-select: none;
}
.thdate-head { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.thdate-head select { font-size: 12.5px; padding: 1px 3px; }
.thdate-head button {
  width: 24px; height: 22px; padding: 0; cursor: pointer;
  background: var(--face); border: 1px solid var(--bevel-dark); font-size: 12px;
}
.thdate-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 1px; text-align: center; }
.thdate-grid .dow { font-size: 10.5px; color: #777; padding: 2px 0; font-weight: 700; }
.thdate-grid .day {
  padding: 3px 0; cursor: pointer; border-radius: 3px;
}
.thdate-grid .day:hover { background: var(--hilite); color: #fff; }
.thdate-grid .day.other { color: #bbb; }
.thdate-grid .day.today { outline: 1px solid var(--accent); font-weight: 700; }
.thdate-grid .day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.thdate-foot { display: flex; gap: 4px; margin-top: 5px; }
.thdate-foot button {
  flex: 1; font-family: inherit; font-size: 12px; padding: 2px 6px; cursor: pointer;
  background: var(--face); border: 1px solid var(--bevel-dark);
}
body.theme-modern .thdate-pop { border: 1px solid #dbe2ea; border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.2); }
body.theme-modern .thdate-pop button { border-radius: 6px; border-color: #cbd5e1; background: #fff; }

/* ============ 💧 ลายน้ำกันแคปหน้าจอ (ชื่อผู้ใช้ + วันเวลา) ============
   จางมากและ pointer-events:none — ไม่บังสายตา ไม่ขวางการคลิก/พิมพ์ใด ๆ
   อยู่บนสุดเสมอเพื่อให้ติดไปกับภาพถ่าย/แคปหน้าจอ ระบุคน+เวลาได้ */
#himgo-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  background-repeat: repeat;
  /* ให้ลายน้ำติดไปด้วยเมื่อผู้ใช้สั่งพิมพ์หน้าจอเว็บ (Ctrl+P) — browser
     ปกติไม่พิมพ์ background จึงบังคับด้วย print-color-adjust
     (งานพิมพ์จากปุ่มในฟอร์ม เช่น ใบคิว/บัตร/ฉลาก เป็นหน้าแยกที่ไม่มี
     ลายน้ำอยู่แล้ว — สะอาดเหมือนเดิม) */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}