/* ════════════════════════════════════════════════════════════════
   Navasri · Token Compatibility Layer (Path B — Hybrid)
   Iteration R3 · 14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════
   PURPOSE:
   Drop-in CSS variable layer ที่ map ทั้ง new tokens (sage + cream)
   และ legacy aliases — รองรับ CSS rules 2,500+ บรรทัดของเดิม
   โดยไม่ต้องแก้ทันที

   ENHANCED จาก Claude Design v2 ด้วย Codebase Analyst audit:
   - Blocker #1 fix: เพิ่ม 8 legacy vars (text1, accent-dark, bg2,
     background, border-color, muted, primary, surface3) ที่ HTML/JS
     ใน codebase อ้างอิงอยู่
   - Caution #3 fix: badge dual naming (red↔danger, green↔success, ฯลฯ)
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════
     NEW DESIGN TOKENS (canonical names)
     ════════════════════════════════════════ */

  /* Brand */
  --brand:       #2e6b4f;
  --brand-dark:  #1f4d38;
  --brand-light: #5e9479;

  /* Sage scale */
  --sage-50:  #f4f8f5;
  --sage-100: #e8f2ec;
  --sage-200: #d1e3d8;
  --sage-300: #a8c8b8;
  --sage-400: #7eab94;
  --sage-500: #4a8b6e;
  --sage-600: #2e6b4f;     /* = brand */
  --sage-700: #1f4d38;
  --sage-800: #14352a;
  --sage-900: #0a201a;

  /* Warm neutrals */
  --bg:            #faf8f3;
  --surface:       #ffffff;
  --surface-2:     #f4f1ea;
  --surface-3:     #ebe7da;
  --border:        #e5e0d1;
  --border-strong: #d2cab5;
  --divider:       #ede9dc;

  /* Ink */
  --ink:        #1a221c;
  --ink-2:      #3d4640;
  --ink-3:      #6f7770;
  --ink-4:      #9ca29c;
  --ink-on-brand: #e8f2ec;

  /* Semantic — 4 tones */
  --success:      #3d8862;
  --success-bg:   #e6efe8;
  --success-text: #1f4d38;
  --warning:      #b88240;
  --warning-bg:   #f5e9d4;
  --warning-text: #6e4715;
  --danger:       #a8554d;
  --danger-bg:    #f3e1dc;
  --danger-text:  #6b2820;
  --info:         #5a7d9e;
  --info-bg:      #e2eaf2;
  --info-text:    #2a3f57;

  /* Extra semantic (รองรับ legacy purple/tan/yellow ใน 8 stat cards) */
  --purple:      #7c6da4;
  --purple-bg:   #e9e4f0;
  --purple-text: #3e3360;
  --amber:       #c89e3a;
  --amber-bg:    #f5e9c4;
  --amber-text:  #6b4d10;

  /* Radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;
  --radius:  var(--r-lg);     /* legacy alias */

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(40,50,30,0.04);
  --shadow-sm: 0 1px 2px rgba(40,50,30,0.05), 0 2px 4px rgba(40,50,30,0.04);
  --shadow-md: 0 2px 4px rgba(40,50,30,0.05), 0 6px 16px rgba(40,50,30,0.06);
  --shadow-lg: 0 4px 8px rgba(40,50,30,0.06), 0 12px 28px rgba(40,50,30,0.10);
  --shadow:    var(--shadow-sm);   /* legacy */

  /* Type */
  --font: 'IBM Plex Sans Thai', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ════════════════════════════════════════
     LEGACY ALIASES — ห้ามลบจนกว่าจะ migrate หมด
     ════════════════════════════════════════
     ค่าใหม่ผ่าน var() — ถ้าเปลี่ยน token ค่าเก่าจะอัปเดตด้วย */

  /* Text (legacy --text/--text2/--text3) */
  --text:           var(--ink);
  --text2:          var(--ink-2);
  --text3:          var(--ink-3);

  /* Accent — เดิมเป็น teal #2ec4b6 / #26a89c
     map เป็น brand sage ใหม่ */
  --accent:         var(--brand);
  --accent2:        var(--brand-dark);
  --accent-light:   var(--sage-100);

  /* Surface */
  --surface2:       var(--surface-2);

  /* Semantic — green */
  --green:          var(--success);
  --green-dark:     var(--success-text);
  --green-light:    var(--success-bg);

  /* Semantic — red (เดิม #e05a6a → ใหม่ danger #a8554d) */
  --red:            var(--danger);
  --red-light:      var(--danger-bg);

  /* Semantic — orange (เดิม #f5a453 → ใหม่ warning #b88240) */
  --orange:         var(--warning);
  --orange-light:   var(--warning-bg);

  /* Semantic — blue (เดิม #7ab8d4 → ใหม่ info #5a7d9e) */
  --blue:           var(--info);
  --blue-light:    var(--info-bg);

  /* Semantic — tan/yellow (เก็บไว้สำหรับ stat-card.yellow) */
  --tan:            var(--amber);
  --tan-light:      var(--amber-bg);

  /* Cream — เดิม #f8f5ee → ใหม่ surface-2 (cream-toned แล้ว) */
  --cream:          var(--surface-2);

  /* Gold — เดิมใช้ใน sidebar-logo .logo-icon
     map เป็น warning amber (โทนใกล้เคียง gold) */
  --gold:           var(--amber);

  /* Sage (legacy alias) */
  --sage:           var(--brand);
  --sage-light:     var(--sage-100);

  /* ════════════════════════════════════════
     ADDITIONAL LEGACY ALIASES (Blocker #1 — codebase audit 14พค69)
     ════════════════════════════════════════
     vars ที่ HTML inline styles + JS template strings อ้างอิง
     ที่ไม่อยู่ใน TOKEN_LAYER v2 เดิม — เพิ่มเพื่อกัน text/visual หาย */

  --text1:          var(--ink);          /* 25 ครั้ง (typo-style legacy) */
  --accent-dark:    var(--brand-dark);   /* 9 ครั้ง (HTML+JS) */
  --bg2:            var(--surface-2);    /* 8 ครั้ง */
  --background:     var(--bg);           /* 1 ครั้ง */
  --border-color:   var(--border);       /* 2 ครั้ง */
  --muted:          var(--ink-3);        /* 2 ครั้ง */
  --primary:        var(--brand);        /* 2 ครั้ง */
  --surface3:       var(--surface-3);    /* 2 ครั้ง */

  /* ════════════════════════════════════════
     OC-* (8 stat-card colors) — keep as legacy
     ════════════════════════════════════════
     ค่าเหล่านี้ถูก hardcode ใน HTML ผ่าน class
     stat-card.teal/red/green/blue/purple/yellow/turquoise/...
     map เข้า semantic tone ใหม่ + เก็บโทนที่ใกล้เคียงเดิม */

  --oc-ice:        var(--info-bg);     --oc-ice-text:       var(--info-text);
  --oc-mint:       var(--success-bg);  --oc-mint-text:      var(--success-text);
  --oc-carnation:  var(--danger-bg);   --oc-carnation-text: var(--danger-text);
  --oc-lavender:   var(--purple-bg);   --oc-lavender-text:  var(--purple-text);
  --oc-yellow:     var(--amber-bg);    --oc-yellow-text:    var(--amber-text);
  --oc-turquoise:  var(--sage-200);    --oc-turquoise-text: var(--sage-700);
  --oc-celadon:    var(--sage-100);    --oc-celadon-text:   var(--sage-800);
  --oc-powder:     var(--info-bg);     --oc-powder-text:    var(--info-text);

  /* ─── R16-C: KPI tone palettes (gold/orange/red/green/blue/gray) ─── */
  /* GOLD — มูลค่ารวม / financial value KPIs */
  --tone-gold-bg:     #fdf6e0;
  --tone-gold-border: #e8d090;
  --tone-gold-accent: #b8860b;
  --tone-gold-text:   #6b4d10;
  --tone-gold-text-2: #7a5a10;
  --tone-gold-text-3: #8a6a20;

  /* ORANGE — ใกล้หมด / low-stock alerts */
  --tone-orange-bg:     #fdf3e8;
  --tone-orange-border: #f5c842;
  --tone-orange-accent: #e67e22;
  --tone-orange-text:   #7a4310;
  --tone-orange-text-2: #d35400;
  --tone-orange-deep:   #c0392b;

  /* RED — หมดอายุ / critical / overdue */
  --tone-red-bg:     #fde7e7;
  --tone-red-border: #f1a8a8;
  --tone-red-accent: #c0392b;
  --tone-red-text:   #7a1d1d;
  --tone-red-text-2: #8a3030;
  --tone-red-deep:   #a52a2a;

  /* GREEN — active / success / patient พักอยู่ */
  --tone-green-bg:     #e0f7ec;
  --tone-green-border: #5ecba1;
  --tone-green-accent: #1f8a52;
  --tone-green-text:   #0a3626;
  --tone-green-text-2: #1f5132;

  /* BLUE — hospital / info */
  --tone-blue-bg:     #eaf3fc;
  --tone-blue-border: #8ec1ea;
  --tone-blue-accent: #2980b9;
  --tone-blue-text:   #1a3a5a;
  --tone-blue-text-2: #1f4e7a;

  /* GRAY — inactive / discharged */
  --tone-gray-border: #95a5a6;
  --tone-gray-text:   #5d6d7e;
}

/* ════════════════════════════════════════════════════════════════
   STAT-CARD COLOR REMAP (8 → 4 semantic, R3)
   ════════════════════════════════════════════════════════════════
   HTML ใน pages.html ใช้ hardcoded class — เขียน CSS ใหม่ที่ map
   แต่ละ legacy class เป็น token ใหม่ + keep visual distinction
   ════════════════════════════════════════════════════════════════ */

.stat-card {
  border-radius: var(--r-lg);
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
}
.stat-card .stat-label,
.stat-card .stat-sub  { opacity: 0.8; font-weight: 500; }
.stat-card .stat-value { font-family: var(--mono); font-weight: 600; }
.stat-card .stat-icon { opacity: 0.85; }

.stat-card.teal { background: var(--sage-100); }
.stat-card.teal .stat-label,
.stat-card.teal .stat-sub,
.stat-card.teal .stat-value,
.stat-card.teal .stat-icon { color: var(--sage-800); }

.stat-card.red { background: var(--danger-bg); }
.stat-card.red .stat-label,
.stat-card.red .stat-sub,
.stat-card.red .stat-value,
.stat-card.red .stat-icon { color: var(--danger-text); }

.stat-card.green { background: var(--success-bg); }
.stat-card.green .stat-label,
.stat-card.green .stat-sub,
.stat-card.green .stat-value,
.stat-card.green .stat-icon { color: var(--success-text); }

.stat-card.orange { background: var(--warning-bg); }
.stat-card.orange .stat-label,
.stat-card.orange .stat-sub,
.stat-card.orange .stat-value,
.stat-card.orange .stat-icon { color: var(--warning-text); }

.stat-card.yellow { background: var(--amber-bg); }
.stat-card.yellow .stat-label,
.stat-card.yellow .stat-sub,
.stat-card.yellow .stat-value,
.stat-card.yellow .stat-icon { color: var(--amber-text); }

.stat-card.purple { background: var(--purple-bg); }
.stat-card.purple .stat-label,
.stat-card.purple .stat-sub,
.stat-card.purple .stat-value,
.stat-card.purple .stat-icon { color: var(--purple-text); }

.stat-card.blue { background: var(--info-bg); }
.stat-card.blue .stat-label,
.stat-card.blue .stat-sub,
.stat-card.blue .stat-value,
.stat-card.blue .stat-icon { color: var(--info-text); }

.stat-card.powder {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.stat-card.powder .stat-label,
.stat-card.powder .stat-sub,
.stat-card.powder .stat-value,
.stat-card.powder .stat-icon { color: var(--ink-2); }

/* ════════════════════════════════════════════════════════════════
   BADGE DUAL NAMING (Caution #3 — codebase audit 14พค69)
   ════════════════════════════════════════════════════════════════
   JS ใช้: badge-red / badge-green / badge-orange / badge-blue / badge-gray
   Mockup ใช้: badge-danger / badge-success / badge-warning / badge-info / badge-neutral
   รองรับทั้ง 2 naming ใน CSS rule เดียวกัน
   ════════════════════════════════════════════════════════════════ */

.badge-red,    .badge-danger   { background: var(--danger-bg);  color: var(--danger-text); }
.badge-green,  .badge-success  { background: var(--success-bg); color: var(--success-text); }
.badge-orange, .badge-warning  { background: var(--warning-bg); color: var(--warning-text); }
.badge-blue,   .badge-info     { background: var(--info-bg);    color: var(--info-text); }
.badge-gray,   .badge-neutral  { background: var(--surface-2);  color: var(--ink-3); }
.badge-purple                  { background: var(--purple-bg);  color: var(--purple-text); }

/* ════════════════════════════════════════════════════════════════
   PRINT MODE — force white bg, ink black, remove tints
   ════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --border: #cccccc;
    --ink: #000000;
    --ink-2: #222222;
    --ink-3: #444444;
  }
  .stat-card,
  .card,
  .modal {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: 1px solid #cccccc !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END OF TOKEN COMPATIBILITY LAYER
   ════════════════════════════════════════════════════════════════ */


  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; }

  /* Layout */
  .app { display: flex; min-height: 100vh; }
  /* [R3 14พค69 hotfix] R2 .sidebar ลบ — ดู R3 rules ที่ Session B */
  .sidebar {
    width: 240px; height: 100vh;
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; z-index: 100;
    transition: transform 0.3s; overflow: hidden;
    background: var(--sage-50);
    border-right: 1px solid var(--sage-200);
    color: var(--sage-800);
  }
  /* [R20 15พค69] .sidebar-logo merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .sidebar-logo .logo-icon merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .sidebar-logo .logo-name merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .sidebar-logo .logo-sub merged into R3 rule (only-legacy props moved) */
  .sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; overflow-x: hidden; }
  /* [R20 15พค69] .nav-section merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .nav-item merged into R3 rule (only-legacy props moved) */
  /* [R3 14พค69 hotfix] R2 nav-item color states ลบ — ดู R3 Session B */
  .nav-item .icon { width: 18px; text-align: center; font-size: 15px; }
  /* [R20 15พค69] .sidebar-footer merged into R3 rule (only-legacy props moved) */

  .main { margin-left: 240px; min-height: 100vh; }
  /* [R20 15พค69] .topbar merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .page-title merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .topbar-right merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .topbar-date merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .btn merged into R3 rule @line ~2845 (functional props moved) */
  /* [R3 14พค69 hotfix] R2 btn-primary ลบ — ดู R3 rules ที่ Session B (line ~2830) */
  /* [R20 15พค69] ลบ legacy .btn-secondary/.btn-ghost/.btn-danger/.btn-success (+:hover) — ดู R3 rules @line ~2878 */
  .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 5px; }

  /* Toggle Switch */
  .toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
  .toggle-switch input { opacity:0; width:0; height:0; }
  .toggle-slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:24px; transition:.3s; }
  .toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
  .toggle-switch input:checked + .toggle-slider { background:var(--green); }
  .toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }

  /* Checkbox row */
  .checkbox-row { display:flex; align-items:flex-start; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:background .15s; }
  .checkbox-row:hover { background:var(--surface2); }
  .checkbox-row input[type=checkbox] { margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }

  /* Guide modal */
  .guide-step { display:flex; gap:10px; align-items:flex-start; font-size:13px; }
  .guide-num { background:var(--accent); color:white; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }



  .content { padding: 28px; }

  /* Cards & Panels */
  /* [R20 15พค69] .card family merged into R3 rules @line ~2907 (legacy-only props moved) */
  .card-body { padding: 20px; }

  /* Stats Grid */
  /* [R20 15พค69] .stats-grid merged into R3 rule (only-legacy props moved) */
  /* [R3 14พค69 hotfix] ลบ stat-card .{teal,red,green,orange,blue,purple,yellow,powder}
     rules ที่ override R3 TOKEN_LAYER — ดู rules ใหม่ที่ line ~200 */
  .stat-value { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1; }
  .stat-sub { font-size: 10px; margin-top: 4px; opacity: 0.7; }
  .stat-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
  .stat-icon { position: absolute; top: auto; bottom: 10px; right: 10px; font-size: 28px; opacity: 0.85; pointer-events: none; }

  /* Table */
  .table-wrap { overflow-x: auto; }
  /* [R20 15พค69] table merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] th merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] td merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] tr:last-child td merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] tr:hover td merged into R3 rule (only-legacy props moved) */

  /* Badges */
  /* [R20 15พค69] ลบ legacy .badge — ดู R3 rule @line ~3301 */
  .badge-red { background: var(--red-light); color: var(--red); }
  .badge-orange { background: var(--tan-light); color: var(--tan); }
  .badge-green { background: var(--green-light); color: var(--green); }
  .badge-blue { background: var(--blue-light); color: var(--blue); }
  .badge-purple { background: var(--purple-bg); color: var(--purple); }
  .badge-gray { background: var(--surface2); color: var(--text2); }

  /* Stock level bar */
  /* [R20 15พค69] .stock-bar merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .stock-fill merged into R3 rule (only-legacy props moved) */

  /* Modal */
  /* [R20 15พค69] .modal-overlay merged into R3 rule @line ~3047 (functional props moved) */
  .modal-overlay.open { display: flex; }
  .modal, .modal-box {
    background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
    width: 540px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
    animation: slideUp 0.2s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* [R20 15พค69] .modal-header merged into R3 rule @line ~3059 */
  /* [R20 15พค69] ลบ legacy .modal-title + .modal-close + .modal-close:hover — ดู R3 rules @line ~3062 (functional props moved into redesign rule) */
  .modal-body { padding: 20px 24px; }
  /* [R20 15พค69] .modal-footer merged into R3 rule @line ~3081 */

  /* Form */
  .form-group { margin-bottom: 16px; }
  /* ── .form-label + .required moved to redesign block (line ~2976) ── */
  /* ── .form-control base rule — moved to redesign block (line ~2989) ── */
  /* ── Select arrow fix (iOS Safari doesn't render default arrow on styled selects) ── */
  select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232e6b4f' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    padding-right: 32px;
  }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-row { display: flex; gap: 12px; align-items: flex-end; }
  .form-row .form-group { flex: 1; margin-bottom: 0; }

  /* ── Multi-row form components ── */
  .mr-shared {
    background: var(--green-light);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    border-left: 4px solid var(--green-dark);
  }
  .mr-shared-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--green-dark);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
  }
  .mr-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 12px 12px 12px;
    margin-bottom: 10px;
    position: relative;
  }
  .mr-item.urine { background: var(--warning-bg); border-color: #f0e0a0; }
  .mr-item.stool { background: var(--warning-bg); border-color: #d4a574; }
  .mr-item.vomit { background: var(--danger-bg); border-color: var(--danger); }
  .mr-item.other { background: #f0f0ff; border-color: #a0a0e0; }
  .mr-item.intake { background: #f0f8ff; border-color: #a0c8e0; }
  .mr-item.editing { border-width: 2px; border-color: var(--green-dark); box-shadow: 0 0 0 3px var(--green-light); }
  .mr-item.new-row { border-style: dashed; }
  .mr-badge {
    position: absolute;
    top: -8px;
    left: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
  }
  .mr-badge.editing { background: var(--orange); }
  .mr-badge.new-row { background: #4a90e2; }
  .mr-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mr-add-row {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 2px dashed var(--accent);
    color: var(--accent2);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    cursor: pointer;
  }
  .mr-add-row.danger { border-color: var(--red); color: var(--red); }

  /* Type chips (urine/stool/vomit/other) — main type selector */
  .type-chips {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
  }
  .type-chip {
    padding: 8px 4px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    background: #fff;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
  }
  .type-chip .icon { font-size: 15px; }
  .type-chip.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--green-dark);
  }

  /* Multi-select characteristics chips */
  .char-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .char-chip {
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    background: #fff;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    line-height: 1;
  }
  .char-chip.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--green-dark);
    font-weight: 600;
  }
  .char-chip.active::before {
    content: "✓";
    font-weight: 700;
    color: var(--accent2);
    font-size: 13px;
  }
  .char-chip.custom {
    border-style: dashed;
    border-color: var(--accent);
    color: var(--green-dark);
  }
  .char-chip-remove {
    cursor: pointer;
    color: var(--red);
    font-weight: 700;
    font-size: 13px;
    margin-left: 2px;
  }
  .char-custom-wrap {
    background: rgba(46, 196, 182, 0.06);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 4px;
  }
  .char-custom-label {
    font-size: 10px;
    color: var(--green-dark);
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
  }
  .char-custom-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
  }
  .char-custom-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn-now {
    height: 44px;
    background: var(--accent-light);
    color: var(--green-dark);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .cond-field-inline {
    background: rgba(46, 196, 182, 0.06);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
  }

  /* Alert */
  .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
  .alert-warning { background: var(--orange-light); border: 1px solid #f5c97a; color: #8a4d00; }
  .alert-danger { background: var(--red-light); border: 1px solid var(--danger); color: var(--red); }
  .alert-success { background: var(--green-light); border: 1px solid var(--success); color: var(--green); }

  /* Search */
  /* [R20 15พค69] .search-wrap merged into R3 rule (only-legacy props moved) */
  .search-wrap input { padding-left: 36px; }
  /* [R20 15พค69] .search-icon merged into R3 rule (only-legacy props moved) */

  /* Tabs */
  /* [R20 15พค69] .tabs merged into R3 rule (only-legacy props moved) */
  .tab { padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text2); transition: all 0.15s; }
  .tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
  /* [R20 15พค69] .tab.tab-alert merged into R3 rule (only-legacy props moved) */

  /* Category color dots */
  .cat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
  /* [R20 15พค69] .cat-red merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .cat-orange merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .cat-blue merged into R3 rule (only-legacy props moved) */
  .cat-black { background: #555; }
  /* [R20 15พค69] .cat-purple merged into R3 rule (only-legacy props moved) */

  /* Timeline */
  .timeline { }
  .tl-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .tl-item:last-child { border-bottom: none; }
  .tl-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
  .tl-content { flex: 1; }
  .tl-title { font-size: 13.5px; font-weight: 500; }
  .tl-meta { font-size: 12px; color: var(--text2); }

  /* Empty state */
  .empty { text-align: center; padding: 48px 24px; color: var(--text3); }
  .empty-icon { font-size: 40px; margin-bottom: 12px; }
  .empty-text { font-size: 14px; }

  /* Toast */
  .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
  /* [R20 15พค69] .toast merged into R3 rule (only-legacy props moved) */
  /* .toast.success/.warning/.error backgrounds — REMOVED R19. Use redesign border-left-color instead. */
  @keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

  /* Responsive */
  @media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1100; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .topbar { padding: 0 12px; }
  }
  #sidebarOverlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 1099;
  }
  #sidebarOverlay.show { display: block; }
  #hamburgerBtn {
    display: none; background: none; border: none;
    font-size: 22px; cursor: pointer; padding: 4px 8px;
    color: #d4eede; margin-right: 8px;
  }
  @media (max-width: 768px) {
    #hamburgerBtn { display: inline-block; }
  }

  .tag { display: inline-block; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; font-size: 11px; color: var(--text2); font-family: var(--mono); }

  .number { font-family: var(--mono); }

  .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

  .low-stock { background: var(--orange-light) !important; }
  .critical-stock { background: var(--red-light) !important; }
  .row-highlight td { font-weight: 500; }

  /* ── LOGIN SCREEN ── */
  #loginScreen {
    position: fixed; inset: 0; z-index: 9000;
    background: #2e6b4f;
    display: flex; align-items: center; justify-content: center;
  }
  .login-box {
    background: var(--surface); border-radius: 16px;
    padding: 40px 44px; width: 400px; max-width: 95vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(46,107,79,0.3);
    border-top: 3px solid #2e6b4f;
  }
  .login-logo {
    text-align: center; margin-bottom: 28px;
  }
  .login-logo .ico {
    width: 60px; height: 60px; background: #2e6b4f;
    border-radius: 14px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 28px; margin-bottom: 12px;
  }
  .login-logo h1 { font-size: 17px; font-weight: 700; }
  .login-logo p { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
  .login-error {
    background: var(--red-light); border: 1px solid var(--danger);
    color: var(--red); border-radius: 7px; padding: 9px 13px;
    font-size: 13px; margin-bottom: 14px; display: none;
  }

  /* user chip in topbar */
  /* [R20 15พค69] .user-chip merged into R3 rule (only-legacy props moved) */
  /* [R20 15พค69] .user-chip:hover merged into R3 rule (only-legacy props moved) */
  .user-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
  }

  /* ── REQUISITION FORM (screen) ── */
  .req-form-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    max-width: 820px;
  }
  .req-form-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; border-bottom: 1px solid var(--border);
  }
  .req-form-title { font-size: 15px; font-weight: 700; }
  .req-item-row {
    display: flex; gap: 10px; align-items: flex-end;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px; margin-bottom: 8px;
  }
  .req-item-row .form-group { margin: 0; }

  /* ── PRINT STYLES / REQUISITION FORM ── */
  @media print {
    body * { visibility: hidden; }
    #printArea, #printArea * { visibility: visible; }
    #printArea { position: fixed; inset: 0; background: white; padding: 0; }
    .no-print { display: none !important; }
  }

  /* Requisition print layout */
  .rq-print {
    font-family: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
    width: 210mm; min-height: 148mm; margin: 0 auto;
    padding: 18mm 18mm 14mm; background: white; color: #000;
    font-size: 13px; line-height: 1.6;
  }
  .rq-print-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--warning-text);
  }
  .rq-hospital-name { font-size: 16px; font-weight: 700; }
  .rq-hospital-sub { font-size: 11px; color: #444; margin-top: 2px; }
  .rq-doc-title {
    text-align: center; font-size: 16px; font-weight: 700;
    margin: 10px 0 14px; letter-spacing: 0.03em;
  }
  .rq-doc-ref {
    display: flex; justify-content: space-between; font-size: 12px;
    margin-bottom: 12px; gap: 20px;
  }
  .rq-doc-ref span { display: block; }
  .rq-doc-ref strong { font-weight: 600; }
  .rq-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12.5px; }
  .rq-table th {
    background: var(--surface-2); border: 1px solid #bbb;
    padding: 6px 10px; text-align: center; font-weight: 700;
  }
  .rq-table td { border: 1px solid #bbb; padding: 6px 10px; }
  .rq-table .center { text-align: center; }
  .rq-sign-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; margin-top: 24px;
  }
  .rq-sign-box { text-align: center; }
  .rq-sign-line {
    border-bottom: 1px solid #000; margin: 32px 10px 6px;
  }
  .rq-sign-label { font-size: 11.5px; color: #444; }
  .rq-sign-name { font-size: 12px; font-weight: 600; margin-top: 2px; }
  .rq-status-badge {
    display: inline-block; padding: 3px 12px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; border: 1.5px solid;
  }
  .rq-status-pending { color: var(--warning-text); border-color: var(--warning-text); background: var(--warning-bg); }
  .rq-status-approved { color: var(--brand); border-color: var(--brand); background: var(--success-bg); }
  .rq-status-rejected { color: var(--danger-text); border-color: var(--danger-text); background: var(--danger-bg); }
  .rq-note-box {
    border: 1px solid #ccc; border-radius: 4px;
    padding: 8px 10px; min-height: 36px; margin-top: 10px;
    font-size: 12px; color: #444;
  }

  /* workflow timeline in print */
  .rq-timeline {
    display: flex; align-items: center; gap: 0; margin: 12px 0;
    font-size: 11px;
  }
  .rq-tl-step {
    flex: 1; text-align: center; position: relative;
  }
  .rq-tl-step:not(:last-child)::after {
    content: ''; position: absolute;
    top: 10px; left: 50%; width: 100%; height: 1.5px;
    background: #bbb; z-index: 0;
  }
  .rq-tl-circle {
    width: 20px; height: 20px; border-radius: 50%;
    background: #eee; border: 1.5px solid #bbb; color: #888;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; position: relative; z-index: 1;
    margin-bottom: 4px;
  }
  .rq-tl-circle.done { background: var(--brand); border-color: var(--brand); color: white; }
  .rq-tl-circle.active { background: var(--warning-text); border-color: var(--warning-text); color: white; }

/* ── MOBILE RESPONSIVE IMPROVEMENTS (max-width: 768px) ── */
@media (max-width: 768px) {

  /* Content padding */
  .content { padding: 12px 10px; }

  /* Page header buttons — stack vertically on very small screens */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Tables — horizontal scroll always on */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
  th, td { font-size: 12px; padding: 8px 10px; }

  /* Cards */
  .card { border-radius: 8px; }
  .card-header { flex-wrap: wrap; gap: 6px; }
  .card-title { font-size: 13px; }

  /* Stats grid — 2 cols already but shrink padding */
  .stat-card { padding: 12px 10px; }
  .stat-value { font-size: 26px; }

  /* Modals — full width on mobile */
  .modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto;
  }
  .modal-body { padding: 14px 12px; }

  /* Forms */
  .form-row { flex-direction: column; gap: 8px; }
  .form-group { width: 100% !important; }
  .form-control { font-size: 14px; }

  /* Buttons in header — smaller */
  .page-header .btn { font-size: 12px; padding: 6px 10px; }

  /* Tabs — scrollable horizontal */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .tab { font-size: 12px; padding: 7px 12px; flex-shrink: 0; }

  /* Topbar */
  .topbar-date { display: none; }
  #userDisplayName { display: none; }
  .topbar { height: 52px; }

  /* Notification bell panel */
  #notif-panel { width: 90vw; right: -8px; }

  /* Billing/report grids */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-value { font-size: 22px; }
  table { min-width: 380px; }
  .tab { font-size: 11px; padding: 6px 9px; }
}

/* Mobile UX Phase M1 - Touch targets */
@media (max-width: 768px) {
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .btn-xs { min-height: 32px; padding: 6px 10px; font-size: 12px; }

  .form-control,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="date"],
  input[type="time"], input[type="datetime-local"],
  select, textarea {
    min-height: 48px;
    font-size: 16px !important;
    padding: 10px 12px;
  }
  textarea { min-height: 80px; line-height: 1.5; }
  select { background-position: right 12px center; background-size: 16px; }

  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  label { cursor: pointer; user-select: none; }

  .form-group { margin-bottom: 14px; }
  .form-label { font-size: 13px; margin-bottom: 6px; }

  .modal { padding: 18px; }
  .modal-header { margin-bottom: 14px; }
  .modal-footer { padding-top: 14px; }
  .modal-footer .btn, .mr-add-row { width: 100%; margin-bottom: 6px; }

  .type-chip, .char-chip {
    min-height: 44px; padding: 10px 14px; font-size: 13px;
  }

  td .btn-ghost.btn-sm {
    min-height: 36px; min-width: 36px; padding: 4px 8px;
  }

  .btn:hover, .type-chip:hover, .char-chip:hover { transform: none; }
}

/* ═══ Task C: Patient Tab Grid (mobile) ═══════════════════════ */

/* Desktop: ซ่อน grid + back, แสดง tabs เหมือนเดิม */
.pat-app-grid { display: none; }
.pat-app-back { display: none; }

/* Mobile: ซ่อน tabs, แสดง grid */
@media (max-width: 768px) {
  #patprofileTabs { display: none !important; }
  .pat-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
    padding: 4px;
  }
  .pat-app-btn {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-align: center;
    min-height: 88px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .pat-app-btn:active {
    transform: scale(0.96);
    box-shadow: 0 0 0 2px var(--accent);
  }
  .pat-app-icon {
    font-size: 26px;
    line-height: 1;
  }
  .pat-app-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
  }
  .pat-app-back {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ═══ Task D: Bottom Tab Bar (mobile) ═══════════════════════ */

/* ซ่อนบน desktop */
.bottom-tab-bar { display: none; }
.bottom-more-overlay { display: none; }

@media (max-width: 768px) {
  /* Bottom Tab Bar */
  .bottom-tab-bar {
    display: grid !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border);
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    z-index: 200;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  }
  .bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    gap: 2px;
    cursor: pointer;
    position: relative;
    min-height: 50px;
    color: var(--text2);
  }
  .bottom-tab-item .tab-icon {
    font-size: 20px;
    line-height: 1;
  }
  .bottom-tab-item .tab-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
  }
  .bottom-tab-item.active {
    color: var(--accent2);
  }
  .bottom-tab-item.active .tab-icon {
    transform: scale(1.1);
  }
  .bottom-tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
  }

  /* Body padding-bottom เพื่อกัน content โดน bar บัง */
  body {
    padding-bottom: 64px;
  }

  /* More menu overlay */
  .bottom-more-overlay {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 250;
    display: flex !important;
    align-items: flex-end;
  }
  .bottom-more-panel {
    background: white;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    max-height: 75vh;
    overflow-y: auto;
    animation: slideUp 0.2s ease-out;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .bottom-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .bottom-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .bottom-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    background: var(--bg);
    border-radius: 12px;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid var(--surface-2);
    min-height: 76px;
  }
  .bottom-more-item:active {
    transform: scale(0.95);
    background: var(--accent-light);
  }
  .bottom-more-item .icon { font-size: 22px; line-height: 1; }
  .bottom-more-item .label { font-size: 11px; font-weight: 600; color: var(--text); }
  .bottom-more-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  /* Hide hamburger บนมือถือ (ใช้ Bottom Tab Bar แทน) */
  #hamburgerBtn { display: none !important; }
}

/* ═══ Task E: iOS-specific tweaks ═══════════════════════════ */
@media (max-width: 768px) {
  /* Safe area สำหรับ notch + home indicator */
  .topbar {
    padding-top: env(safe-area-inset-top, 0);
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  /* ป้องกัน overscroll/bounce ที่ iOS ทำให้ดูแปลก */
  html, body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ปิด text selection โดย default สำหรับ buttons + chips (เลือกได้ใน content) */
  .btn, .tab, .type-chip, .char-chip, .pat-app-btn, .bottom-tab-item, .bottom-more-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* ปิด iOS auto-format/auto-capitalize สำหรับ input */
  input[type="text"], input[type="email"], input[type="search"] {
    -webkit-appearance: none;
  }

  /* Modal — รองรับ safe area */
  .modal-overlay {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Standalone mode (Add to Home Screen) — แสดง padding-top เผื่อ status bar */
  @supports (-webkit-touch-callout: none) {
    body { padding-top: env(safe-area-inset-top, 0); }
  }
}

/* ═══ Task F (R-1): Responsive Card Table ═════════════════════ */
@media (max-width: 768px) {
  /* แปลง table.responsive-card-table → card-list view */
  .responsive-card-table { display: block; }
  .responsive-card-table thead { display: none; }
  .responsive-card-table tbody { display: block; }
  .responsive-card-table tr {
    display: block;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .responsive-card-table tr:hover {
    background: white;
  }
  .responsive-card-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    text-align: right;
    font-size: 13px;
  }
  .responsive-card-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text2);
    font-size: 12px;
    text-align: left;
    margin-right: 8px;
    flex-shrink: 0;
  }
  /* td ที่ไม่มี data-label (เช่น คอลัมน์ #, action) — ไม่แสดง label */
  .responsive-card-table td[data-label=""]:before {
    display: none;
  }
  /* คอลัมน์แรก (#) — ซ่อนบนมือถือ */
  .responsive-card-table td:first-child {
    display: none;
  }
  /* คอลัมน์ชื่อ (มี photo) — แสดงเต็ม ไม่ใช่ split */
  .responsive-card-table td[data-label="ชื่อ-นามสกุล"] {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    text-align: left;
  }
  .responsive-card-table td[data-label="ชื่อ-นามสกุล"]:before {
    display: none;
  }
  /* คอลัมน์ action — แสดงด้านล่าง flex row */
  .responsive-card-table td[data-label=""]:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  .responsive-card-table td[data-label=""]:last-child:before {
    display: none;
  }
}

/* ═══ Fix Mobile Patient Profile Layout ═════════════════════ */

/* Desktop: ซ่อน mobile header */
.patprofile-mobile-header { display: none; }

@media (max-width: 768px) {
  /* Mobile: layout 1 column + ซ่อน left col */
  .patprofile-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .patprofile-left-col {
    display: none !important;
  }

  /* แสดง mobile header */
  .patprofile-mobile-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent2, #26a89c));
    color: white;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(46, 196, 182, 0.25);
  }
  .pmh-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    flex-shrink: 0;
  }
  .pmh-photo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }
  .pmh-info {
    flex: 1;
    min-width: 0;
  }
  .pmh-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pmh-meta {
    font-size: 11px;
    opacity: 0.95;
    line-height: 1.3;
  }
  .pmh-info-btn {
    background: rgba(255,255,255,0.25) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: white !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
    min-height: auto !important;
  }
  .pmh-info-btn:hover {
    background: rgba(255,255,255,0.35) !important;
  }

  /* Allergy banner ถ้ามี */
  .allergy-banner { margin-bottom: 10px; }
}

/* ═══ Fix Modal Center (z-index + hide bottom-bar) ═════════════════════ */

/* บน mobile: modal z-index สูงกว่า bottom-tab-bar */
@media (max-width: 768px) {
  .modal-overlay,
  .modal-overlay.open {
    z-index: 300 !important;
  }
  /* ปุ่ม patient info modal ก็ z-index 300 */
  .patient-info-modal-overlay {
    z-index: 310 !important;
  }
  /* Bottom Tab Bar z-index 200 — ต่ำกว่า modal */
  .bottom-tab-bar {
    z-index: 200 !important;
  }
  /* ซ่อน bottom bar เมื่อ modal เปิด — ใช้ :has() (Safari 15.4+, Chrome 105+) */
  body:has(.modal-overlay.open) .bottom-tab-bar,
  body:has(.patient-info-modal-overlay) .bottom-tab-bar {
    display: none !important;
  }
  /* Modal กลางจอ + max-height ครอบคลุม viewport */
  .modal-overlay .modal,
  .modal-overlay .modal-box {
    margin: auto;
    max-height: 88vh;
  }
}

/* Make Patient app grid scrollable (สำหรับ 19 tabs) */
@media (max-width: 768px) {
  .pat-app-grid {
    /* ไม่จำกัด height — ให้ scroll ตามปกติของ body */
    overflow-y: visible;
  }
  /* เนื่องจาก body มี padding-bottom: 64px อยู่แล้ว (เพื่อกันชน bottom bar)
     และมี container scroll หลัก = window  → grid จะ scroll พร้อม window
     ถ้า user เลื่อนลง จะเห็น tab ทั้ง 19 ตัว */
}


/* === Dashboard Mobile Lock (12พค69 บ่าย) === */
/* Lock horizontal scroll เฉพาะหน้า Dashboard บน mobile */
/* ใช้ :has() apply เฉพาะตอน #page-dashboard active เพื่อไม่กระทบเมนูอื่น */
/* ไม่แตะ html/body overflow-x เพื่อไม่ block vertical scroll (hard rule #4) */
@media (max-width: 768px) {
  .main:has(.content > #page-dashboard:not([style*="display: none"])) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .content:has(> #page-dashboard:not([style*="display: none"])) {
    overflow-x: hidden !important;
    max-width: 100%;
  }
  #page-dashboard {
    overflow-x: hidden;
    max-width: 100%;
  }
  #page-dashboard .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100%;
  }
  #page-dashboard > div:not(.stats-grid):not(.card) {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
  #page-dashboard .card {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}


/* === Patients Mobile Lock (12พค69 ค่ำ) === */
/* Lock horizontal scroll หน้า Patients + บีบตาราง card view ไม่ให้ล้นจอ */
/* ใช้ :has() apply เฉพาะ #page-patients active = ไม่กระทบเมนูอื่น */
@media (max-width: 768px) {
  .main:has(.content > #page-patients:not([style*="display: none"])) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .content:has(> #page-patients:not([style*="display: none"])) {
    overflow-x: hidden !important;
    max-width: 100%;
  }
  #page-patients {
    overflow-x: hidden;
    max-width: 100%;
  }
  #page-patients .table-wrap {
    overflow-x: hidden !important;
    max-width: 100%;
  }
  #page-patients .table-wrap table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* === Patients Summary Chips 2x2 Grid (12พค69 ค่ำ) === */
/* จัด 4 chips (ทั้งหมด/พักอยู่/อยู่โรงพยาบาล/ออกแล้ว) เป็น 2x2 เต็มจอบน mobile */
/* #patSummary เป็น id unique = ไม่กระทบหน้าอื่น */
@media (max-width: 768px) {
  #patSummary > div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #patSummary > div > div {
    min-width: 0;
    text-align: center;
  }
}


/* === Patients Action Buttons 3-col Grid (12พค69 ค่ำ) === */
/* 3 ปุ่ม (Excel/จัดการห้องพัก/+เพิ่มผู้รับบริการ) เท่ากันเต็มจอบน mobile */
/* Container ไม่มี id/class → ใช้ structural selector: div ที่มีลูก 3 button พอดี */
@media (max-width: 768px) {
  #page-patients div:has(> button:nth-child(3)):not(:has(> button:nth-child(4))):not(:has(> :not(button))) {
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-patients div:has(> button:nth-child(3)):not(:has(> button:nth-child(4))):not(:has(> :not(button))) > button {
    font-size: 13px !important;
    padding: 8px 4px !important;
    min-width: 0;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* === Stock + Billing Mobile Layout (12พค69 ค่ำ) === */
@media (max-width: 768px) {
  /* Stock lock */
  .main:has(.content > #page-stock:not([style*="display: none"])),
  .content:has(> #page-stock:not([style*="display: none"])),
  #page-stock {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .main:has(.content > #page-stock:not([style*="display: none"])) { max-width: 100vw !important; }
  #page-stock > div { max-width: 100% !important; box-sizing: border-box; }
  #page-stock > .card { max-width: 100% !important; overflow: hidden; }
  #page-stock .table-wrap { overflow-x: auto !important; max-width: 100%; }
  #page-stock > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  #page-stock > div:first-child > .search-wrap {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    flex: none !important;
  }
  #page-stock > div:first-child > select { width: 100% !important; min-width: 0 !important; }
  #page-stock > div:first-child > button {
    width: 100% !important; min-width: 0 !important;
    font-size: 13px !important; padding: 8px 4px !important;
    justify-content: center !important; text-align: center !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Billing lock */
  .main:has(.content > #page-billing:not([style*="display: none"])),
  .content:has(> #page-billing:not([style*="display: none"])),
  #page-billing {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .main:has(.content > #page-billing:not([style*="display: none"])) { max-width: 100vw !important; }
  #page-billing > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  #page-billing > div:first-child > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px;
  }
  #page-billing > div:first-child > button {
    width: 100% !important; min-width: 0 !important;
    font-size: 13px !important; padding: 8px 4px !important;
    justify-content: center !important; text-align: center !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #billing-tabs { overflow-x: auto !important; max-width: 100%; }
  #billing-tab-invoices > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  #billing-tab-invoices > div:first-child > #billing-search {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    width: 100% !important; min-width: 0 !important;
  }
  #billing-tab-invoices > div:first-child > select {
    grid-row: 2 !important;
    width: 100% !important; min-width: 0 !important;
    font-size: 12px !important; padding: 6px 4px !important;
    text-align: center !important; text-align-last: center !important;
  }
  #billing-tab-invoices > div:first-child > select option { text-align: center; }
  #billing-tab-invoices > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  #billing-tab-invoices > div:nth-child(2) > div { min-width: 0; max-width: 100%; }
  #billing-tab-invoices > div:nth-child(3) {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}


/* === Universal Mobile Layout for All Main Pages (12พค69 ค่ำ Phase 1) === */
@media (max-width: 768px) {
  /* Lock horizontal scroll on 16 main pages */
  .main:has(.content > #page-bi:not([style*="display: none"])),
  .main:has(.content > #page-history:not([style*="display: none"])),
  .main:has(.content > #page-report:not([style*="display: none"])),
  .main:has(.content > #page-staff:not([style*="display: none"])),
  .main:has(.content > #page-purchasehistory:not([style*="display: none"])),
  .main:has(.content > #page-accounts:not([style*="display: none"])),
  .main:has(.content > #page-reqform:not([style*="display: none"])),
  .main:has(.content > #page-incident:not([style*="display: none"])),
  .main:has(.content > #page-dietary:not([style*="display: none"])),
  .main:has(.content > #page-deposits:not([style*="display: none"])),
  .main:has(.content > #page-suppliers:not([style*="display: none"])),
  .main:has(.content > #page-supplierinvoices:not([style*="display: none"])),
  .main:has(.content > #page-purchaserequests:not([style*="display: none"])),
  .main:has(.content > #page-expenses:not([style*="display: none"])),
  .main:has(.content > #page-assets:not([style*="display: none"])),
  .main:has(.content > #page-audit:not([style*="display: none"])) {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .content:has(> #page-bi:not([style*="display: none"])),
  .content:has(> #page-history:not([style*="display: none"])),
  .content:has(> #page-report:not([style*="display: none"])),
  .content:has(> #page-staff:not([style*="display: none"])),
  .content:has(> #page-purchasehistory:not([style*="display: none"])),
  .content:has(> #page-accounts:not([style*="display: none"])),
  .content:has(> #page-reqform:not([style*="display: none"])),
  .content:has(> #page-incident:not([style*="display: none"])),
  .content:has(> #page-dietary:not([style*="display: none"])),
  .content:has(> #page-deposits:not([style*="display: none"])),
  .content:has(> #page-suppliers:not([style*="display: none"])),
  .content:has(> #page-supplierinvoices:not([style*="display: none"])),
  .content:has(> #page-purchaserequests:not([style*="display: none"])),
  .content:has(> #page-expenses:not([style*="display: none"])),
  .content:has(> #page-assets:not([style*="display: none"])),
  .content:has(> #page-audit:not([style*="display: none"])) {
    overflow-x: hidden !important;
    max-width: 100%;
  }
  #page-bi,
  #page-history,
  #page-report,
  #page-staff,
  #page-purchasehistory,
  #page-accounts,
  #page-reqform,
  #page-incident,
  #page-dietary,
  #page-deposits,
  #page-suppliers,
  #page-supplierinvoices,
  #page-purchaserequests,
  #page-expenses,
  #page-assets,
  #page-audit {
    overflow-x: hidden;
    max-width: 100%;
  }
  #page-bi .table-wrap,
  #page-history .table-wrap,
  #page-report .table-wrap,
  #page-staff .table-wrap,
  #page-purchasehistory .table-wrap,
  #page-accounts .table-wrap,
  #page-reqform .table-wrap,
  #page-incident .table-wrap,
  #page-dietary .table-wrap,
  #page-deposits .table-wrap,
  #page-suppliers .table-wrap,
  #page-supplierinvoices .table-wrap,
  #page-purchaserequests .table-wrap,
  #page-expenses .table-wrap,
  #page-assets .table-wrap,
  #page-audit .table-wrap {
    overflow-x: auto !important;
    max-width: 100%;
  }
  #page-bi > .card,
  #page-history > .card,
  #page-report > .card,
  #page-staff > .card,
  #page-purchasehistory > .card,
  #page-accounts > .card,
  #page-reqform > .card,
  #page-incident > .card,
  #page-dietary > .card,
  #page-deposits > .card,
  #page-suppliers > .card,
  #page-supplierinvoices > .card,
  #page-purchaserequests > .card,
  #page-expenses > .card,
  #page-assets > .card,
  #page-audit > .card {
    max-width: 100% !important;
    overflow: hidden;
  }

  /* Stat cards: reduce font size to fit mobile screens */
  #page-bi .stat-value,
  #page-history .stat-value,
  #page-report .stat-value,
  #page-staff .stat-value,
  #page-purchasehistory .stat-value,
  #page-accounts .stat-value,
  #page-reqform .stat-value,
  #page-incident .stat-value,
  #page-dietary .stat-value,
  #page-deposits .stat-value,
  #page-suppliers .stat-value,
  #page-supplierinvoices .stat-value,
  #page-purchaserequests .stat-value,
  #page-expenses .stat-value,
  #page-assets .stat-value,
  #page-audit .stat-value {
    font-size: 16px !important;
    word-break: break-all;
  }
  #page-bi .stat-label,
  #page-history .stat-label,
  #page-report .stat-label,
  #page-staff .stat-label,
  #page-purchasehistory .stat-label,
  #page-accounts .stat-label,
  #page-reqform .stat-label,
  #page-incident .stat-label,
  #page-dietary .stat-label,
  #page-deposits .stat-label,
  #page-suppliers .stat-label,
  #page-supplierinvoices .stat-label,
  #page-purchaserequests .stat-label,
  #page-expenses .stat-label,
  #page-assets .stat-label,
  #page-audit .stat-label {
    font-size: 11px !important;
  }
  #page-bi .stat-sub,
  #page-history .stat-sub,
  #page-report .stat-sub,
  #page-staff .stat-sub,
  #page-purchasehistory .stat-sub,
  #page-accounts .stat-sub,
  #page-reqform .stat-sub,
  #page-incident .stat-sub,
  #page-dietary .stat-sub,
  #page-deposits .stat-sub,
  #page-suppliers .stat-sub,
  #page-supplierinvoices .stat-sub,
  #page-purchaserequests .stat-sub,
  #page-expenses .stat-sub,
  #page-assets .stat-sub,
  #page-audit .stat-sub {
    font-size: 10px !important;
  }
  #page-bi .stat-icon,
  #page-history .stat-icon,
  #page-report .stat-icon,
  #page-staff .stat-icon,
  #page-purchasehistory .stat-icon,
  #page-accounts .stat-icon,
  #page-reqform .stat-icon,
  #page-incident .stat-icon,
  #page-dietary .stat-icon,
  #page-deposits .stat-icon,
  #page-suppliers .stat-icon,
  #page-supplierinvoices .stat-icon,
  #page-purchaserequests .stat-icon,
  #page-expenses .stat-icon,
  #page-assets .stat-icon,
  #page-audit .stat-icon {
    font-size: 20px !important;
  }

  /* Page header (title + buttons row with justify-content:space-between) → stack column */
  #page-bi > div[style*="justify-content:space-between"]:first-child,
  #page-history > div[style*="justify-content:space-between"]:first-child,
  #page-report > div[style*="justify-content:space-between"]:first-child,
  #page-staff > div[style*="justify-content:space-between"]:first-child,
  #page-purchasehistory > div[style*="justify-content:space-between"]:first-child,
  #page-accounts > div[style*="justify-content:space-between"]:first-child,
  #page-reqform > div[style*="justify-content:space-between"]:first-child,
  #page-incident > div[style*="justify-content:space-between"]:first-child,
  #page-dietary > div[style*="justify-content:space-between"]:first-child,
  #page-deposits > div[style*="justify-content:space-between"]:first-child,
  #page-suppliers > div[style*="justify-content:space-between"]:first-child,
  #page-supplierinvoices > div[style*="justify-content:space-between"]:first-child,
  #page-purchaserequests > div[style*="justify-content:space-between"]:first-child,
  #page-expenses > div[style*="justify-content:space-between"]:first-child,
  #page-assets > div[style*="justify-content:space-between"]:first-child,
  #page-audit > div[style*="justify-content:space-between"]:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Generic: 2 action buttons with margin-left:auto → grid 1fr 1fr */
  #page-bi div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-history div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-report div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-staff div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-purchasehistory div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-accounts div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-reqform div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-incident div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-dietary div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-deposits div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-suppliers div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-supplierinvoices div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-purchaserequests div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-expenses div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-assets div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  #page-audit div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) {
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-bi div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-history div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-report div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-staff div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-purchasehistory div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-accounts div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-reqform div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-incident div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-dietary div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-deposits div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-suppliers div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-supplierinvoices div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-purchaserequests div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-expenses div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-assets div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
  #page-audit div[style*="margin-left:auto"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Generic: 3 action buttons with margin-left:auto → grid 1fr 1fr 1fr */
  #page-bi div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-history div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-report div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-staff div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-purchasehistory div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-accounts div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-reqform div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-incident div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-dietary div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-deposits div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-suppliers div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-supplierinvoices div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-purchaserequests div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-expenses div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-assets div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))),
  #page-audit div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) {
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-bi div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-history div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-report div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-staff div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-purchasehistory div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-accounts div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-reqform div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-incident div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-dietary div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-deposits div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-suppliers div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-supplierinvoices div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-purchaserequests div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-expenses div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-assets div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button,
  #page-audit div[style*="margin-left:auto"]:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) > button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Staff: 6 chips → 3x2 grid (over inline flex-wrap) */
  #staffSummary > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #staffSummary > div > div {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-size: 11px !important;
    padding: 8px 4px !important;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    box-sizing: border-box;
  }

  /* Purchasehistory toolbar: title + 3 controls 1fr 1fr 1fr */
  #ph-section-purchase > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #ph-section-purchase > div:first-child > div:first-child {
    flex: none !important;
    margin-bottom: 8px;
  }
  #ph-section-purchase > div:first-child > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #ph-section-purchase > div:first-child > div:nth-child(2) > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  #ph-section-purchase > div:first-child > div:nth-child(2) > button {
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #ph-section-purchase > div:first-child > div:nth-child(2) > select {
    font-size: 12px !important;
    padding: 6px 4px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
}


/* === Requisition Form Layout (12พค69 ค่ำ #1) === */
@media (max-width: 768px) {
  /* ขยายช่องรายการสินค้า (col 2) ลด จำนวน/หน่วยนับ (col 3, 4) */
  #page-requisition div[style*="align-items:flex-end"]:has(> div):has(> button) > div:nth-child(2) {
    flex: 7 !important;
  }
  #page-requisition div[style*="align-items:flex-end"]:has(> div):has(> button) > div:nth-child(3) {
    flex: 0 0 60px !important;
    min-width: 60px !important;
  }
  #page-requisition div[style*="align-items:flex-end"]:has(> div):has(> button) > div:nth-child(4) {
    flex: 0 0 70px !important;
    min-width: 70px !important;
  }
  /* ปุ่มล่างสุด ล้างข้อมูล + บันทึก: equal 1fr 1fr */
  #page-requisition div[style*="justify-content:flex-end"]:has(> button.btn-ghost):has(> button.btn-primary) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }
  #page-requisition div[style*="justify-content:flex-end"]:has(> button.btn-ghost):has(> button.btn-primary) > button {
    width: 100% !important;
  }
}


/* === Rooms Mobile Layout fix (12พค69 ค่ำ #2) === */
@media (max-width: 768px) {
  /* Top section: flex column - บังคับ stack ทุกบรรทัด */
  #page-rooms > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* ← กลับ ปุ่มเล็กชิดซ้าย ขึ้นบรรทัดแรก */
  #page-rooms > div:first-child > button {
    align-self: flex-start;
    order: -2 !important;
  }
  /* H2 ใหญ่กึ่งกลาง บรรทัด 2 */
  #page-rooms > div:first-child > h2 {
    order: -1 !important;
    font-size: 20px !important;
    text-align: center;
    margin: 0;
  }
  /* 4 buttons (Excel/ประวัติ/+เพิ่มห้อง/+เพิ่มเตียง) → 2x2 grid */
  #page-rooms > div:first-child > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-rooms > div:first-child > div[style*="margin-left:auto"] > button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* room summary cards: 2 cols */
  #room-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* === HealthReport Summary Chips 3 cols equal (12พค69 ค่ำ #3) === */
@media (max-width: 768px) {
  #hr-summary > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #hr-summary > div > div {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    font-size: 11px !important;
    padding: 8px 4px !important;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    box-sizing: border-box;
  }
}


/* === Touch-ups #5-#13 Mobile (12พค69 ค่ำ) === */
@media (max-width: 768px) {

  /* #5 Settings: 2 ปุ่มทดสอบเท่ากัน */
  #page-settings div[style*="gap:8px"][style*="margin-top:12px"][style*="flex-wrap:wrap"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #page-settings div[style*="gap:8px"][style*="margin-top:12px"][style*="flex-wrap:wrap"]:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* #6 Purchaserequests: ทุกสถานะ + เพิ่มรายการ — 2 cols เท่ากัน */
  #page-purchaserequests > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #page-purchaserequests > div:first-child > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  #page-purchaserequests > div:first-child > button {
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
  }
  #page-purchaserequests > div:first-child > select {
    font-size: 12px !important;
    padding: 6px 4px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  /* #7 Incident: 2 บรรทัดบนสุดเท่ากัน */
  #page-incident > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #page-incident > div:first-child > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #page-incident > div:first-child > div > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  #page-incident > div:first-child > div > button {
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
  }
  #page-incident > div:first-child > div > select {
    font-size: 12px !important;
    padding: 6px 4px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  /* #8 Dietary: บรรทัดบนสุด 2 ปุ่มเท่ากัน */
  #page-dietary > div:first-child > div:first-child:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-dietary > div:first-child > div:first-child > button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* #9 Deposits: search + dropdown 50/50 */
  #page-deposits div[style*="display:flex"][style*="gap:8px"][style*="align-items:center"]:has(> #deposit-search):has(> #deposit-filter-status) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #page-deposits #deposit-search,
  #page-deposits #deposit-filter-status {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* #10 BI: เดือน toolbar — เดือน + อัปเดต 1fr 1fr เต็ม + spacer/caption stack */
  #bi-section-analytics > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #bi-section-analytics > div:first-child > div:nth-child(1) {
    width: 100% !important;
  }
  #bi-section-analytics > div:first-child > button:nth-child(2) {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #bi-section-analytics > div:first-child > div:nth-child(3) {
    display: none !important;
  }
  #bi-section-analytics > div:first-child > div:nth-child(4) {
    grid-column: 1 / -1 !important;
    text-align: center;
  }

  /* #11 Expenses: title แถวบน + ปุ่ม 2 cols + filter row */
  #page-expenses > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #page-expenses > div:first-child > div:first-child {
    flex: none !important;
    width: 100%;
  }
  /* container ของ 2 ปุ่ม (+ บันทึก / Export) อยู่หลัง title — selectable as nth-child 2+ ที่เป็น button หรือ div with button */
  #page-expenses > div:first-child > button {
    width: 100% !important;
  }
  /* filter row (block 2): 3 dropdowns ใส่กริด 1fr 1fr 1fr + search เต็มแถว */
  #page-expenses > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  #page-expenses > div:nth-child(3) > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  #page-expenses > div:nth-child(3) > select {
    font-size: 12px !important;
    padding: 6px 4px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
  #page-expenses > div:nth-child(3) > input {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }

  /* #12 Assets: title แถวบน + 2 ปุ่มเท่ากัน */
  #page-assets > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* container ของปุ่มอยู่ใน block 0 */

  /* #13 Audit: 2 cols (4 fields rows 1-2, วันที่สิ้น+ล้าง row 3) */
  #page-audit > div:nth-child(2) > .card-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: end !important;
  }
  #page-audit > div:nth-child(2) > .card-body > * {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #page-audit > div:nth-child(2) > .card-body input,
  #page-audit > div:nth-child(2) > .card-body select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #page-audit > div:nth-child(2) > .card-body > button {
    grid-column: auto !important;
    font-size: 13px !important;
    padding: 8px 4px !important;
    justify-content: center !important;
    text-align: center !important;
    height: 50px !important;
  }
}


/* === BI Analytics toolbar fix #10b: align baseline + force input full width === */
@media (max-width: 768px) {
  #bi-section-analytics > div:first-child {
    align-items: end !important;
  }
  #bi-section-analytics > div:first-child > div:nth-child(1) input[type="month"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #bi-section-analytics > div:first-child > div:nth-child(1) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
  }
  #bi-section-analytics > div:first-child > button:nth-child(2) {
    height: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* === Universal Modal Mobile (12พค69 ค่ำ) === */
@media (max-width: 768px) {
  /* [R3 14พค69] Modal frame rule ลบออก — Mobile Modal CSS ใหม่จะ
     ทำ full-screen pattern แทน (จะเพิ่มใน Session D) */
  /* form-grid rows: align inputs by their bottom (label heights vary) */
  .modal .form-grid {
    align-items: end !important;
  }
  /* form-group: stack label on top, input below */
  .modal .form-grid > .form-group,
  .modal .form-group {
    display: flex !important;
    flex-direction: column !important;
  }
  .modal .form-grid > .form-group > label,
  .modal .form-group > label {
    margin-bottom: 6px !important;
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  /* Modal body / header padding tighter on mobile */
  .modal .modal-body {
    padding: 16px !important;
  }
  .modal .modal-header {
    padding: 14px 16px !important;
  }
  /* Footer: action buttons span full width equally */
  div.modal-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  div.modal-footer:has(> button:nth-child(3)):not(:has(> button:nth-child(4))) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  div.modal-footer > button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 12px 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   MOBILE FIX — #modal-addItem form-grid label alignment
   Issue: when one label wraps to 2 lines (e.g. 'บาร์โค้ดผู้ผลิต (ถ้ามี)')
   and the other stays at 1 line, align-items:end causes the
   input on the 1-line side to appear visually misaligned.
   Fix: switch to align-items:start + force label min-height
        to 2 lines so inputs share the same top.
   Scope: mobile only (≤ 480px), modal-addItem only.
   Date: 2026-05-13
   ============================================================ */
@media (max-width: 480px) {
  #modal-addItem .form-grid {
    align-items: start !important;
  }
  #modal-addItem .form-grid > .form-group > .form-label {
    min-height: 2.6em !important;
  }
}

/* ============================================================
   MOBILE — #page-bi (BI & วิเคราะห์กำไร) layout fixes
   1) Tab bar (.bi-tab parent): 2x2 grid ปุ่มสูงเท่ากัน
   2) Month/update row: 2 cols + align bottom + caption ลงล่าง
   3) KPI cards (#bi-kpi-cards inner): 2 columns + ใส่กรอบ + เงา
   4) Section cards (case/roi/investor): กั้นซ้ายขวาเท่ากัน + ปิด overflow
   Date: 2026-05-13
   ============================================================ */
@media (max-width: 480px) {
  /* (4) gutter ซ้ายขวาเท่ากัน + ปิดบล็อกล้นขอบขวา */
  #page-bi {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  #page-bi #bi-section-case,
  #page-bi #bi-section-roi,
  #page-bi #bi-section-investor {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  #page-bi #bi-section-case .card,
  #page-bi #bi-section-roi .card,
  #page-bi #bi-section-investor .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* (1) Tab bar: parent of .bi-tab — 2x2 grid */
  #page-bi .bi-tab:first-child,
  #page-bi .bi-tab {
    /* see parent override below */
  }
  /* parent of .bi-tab is the inline-styled flex-wrap container */
  #page-bi div:has(> .bi-tab) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  #page-bi .bi-tab {
    text-align: center !important;
    justify-content: center !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    box-sizing: border-box !important;
  }
  #page-bi .bi-tab.active {
    border-bottom-color: var(--accent) !important;
  }

  /* (2) Month/update row: parent of #bi-month — use :has() */
  #page-bi div:has(> #bi-month) {
    /* this is the inner flex container with label+input — keep as is */
  }
  /* The grandparent (sibling row with input + button + caption) */
  #page-bi #bi-section-analytics > div:first-of-type:has(#bi-month) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: end !important;
  }
  /* Caption ("ข้อมูลจาก: ...") — last text-only DIV in that row, span full width */
  #page-bi #bi-section-analytics > div:first-of-type:has(#bi-month) > div:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }
  /* Hide empty spacer DIV (between button and caption) */
  #page-bi #bi-section-analytics > div:first-of-type:has(#bi-month) > div:nth-child(3):empty {
    display: none !important;
  }

  /* (3) KPI cards inner grid: 2 columns + frame + shadow */
  #page-bi #bi-kpi-cards > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #page-bi #bi-kpi-cards > div:first-child > * {
    width: auto !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   MOBILE — #bi-profitbed (ตารางกำไร/เตียง) layout
   - grid ที่มี #bi-profitbed: stack vertical (1 card เต็มจอ, Scenario ลงข้างล่าง)
   - card max-height 280px + table scroll แนวตั้งภายใน
   - table width 100% เต็มกรอบ, font 13px, columns 2-5 align left
   Date: 2026-05-13
   ============================================================ */
@media (max-width: 480px) {
  #page-bi #bi-section-analytics > div[style*="grid-template-columns:1fr 1fr"]:has(#bi-profitbed) {
    grid-template-columns: minmax(0, 360px) !important;
    justify-content: start !important;
  }
  #page-bi #bi-profitbed {
    max-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #page-bi #bi-profitbed .table-wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #page-bi #bi-profitbed table {
    width: 100% !important;
    table-layout: auto !important;
    font-size: 13px !important;
  }
  #page-bi #bi-profitbed th,
  #page-bi #bi-profitbed td {
    padding: 8px 6px !important;
  }
  #page-bi #bi-profitbed th:not(:first-child),
  #page-bi #bi-profitbed td:not(:first-child) {
    text-align: left !important;
  }
}

/* ============================================================
   FIX 1: Login button "เข้าสู่ระบบ" — center text (all roles)
   ปุ่ม btn-primary ใน #loginScreen ใช้ inline-flex ทำให้ text-align ไม่ทำงาน
   ต้องใช้ justify-content: center แทน

   FIX 2: Topbar user display name — show on mobile (all roles)
   #userDisplayName ถูก display:none บน mobile ทำให้ชื่ออ่านไม่ออก
   show + ellipsis ถ้าชื่อยาวเกิน max-width

   Date: 2026-05-13
   ============================================================ */
#loginScreen .btn-primary {
  justify-content: center !important;
}
@media (max-width: 480px) {
  #userDisplayName {
    display: inline-block !important;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ============================================================
   FIX: Patient Profile Mobile Layout (all roles, all 19 sub-tabs)
   ปัญหาเดิม:
   1. .main shrink-to-fit ทำให้ tab ที่ content น้อยหน้าหด ทาบที่ยาวหน้าขยาย
   2. .patprofile-grid ใช้ inline "300px 1fr" บนมือถือก็ยังเป็น 2 col → overflow
   3. .card มี border แต่ไม่มี border-box ทำให้ R=391.6 (เกิน 1.6px)
   4. .section-header inline flex ไม่ wrap → ปุ่มออกนอกจอ
   5. table 5+ cols กว้างกว่าจอ → ดันหน้าทั้งหมด
   6. card-title บางอัน center align ไม่ตรงกับ header อื่น
   วิธีแก้:
   - .main + #page-patprofile + content lock 100% width
   - .patprofile-grid → 1 column on mobile (stack vertical)
   - .card → box-sizing border-box + max-width 100%
   - .section-header + inline flex → flex-wrap
   - table → display block + overflow-x:auto (scroll ภายในการ์ดเอง)
   - .card-title → left align
   Date: 2026-05-13
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Lock main + page-patprofile + content to viewport width */
  .main:has(#page-patprofile:not([style*="display: none"])) {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  #page-patprofile {
    width: 100% !important;
  }
  #page-patprofile > * {
    max-width: 100% !important;
  }
  #patprofile-content {
    width: 100% !important;
  }

  /* 2. patprofile-grid stack vertical on mobile */
  #page-patprofile .patprofile-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #page-patprofile .patprofile-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 3. card border-box + clamp width */
  #page-patprofile .card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* 4. section-header & inline flex children → wrap */
  #page-patprofile .section-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #page-patprofile .section-header > div {
    flex-wrap: wrap !important;
  }
  #page-patprofile [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* 5. table inside patprofile → scroll horizontally inside card */
  #page-patprofile .patprofile-grid table,
  #page-patprofile #patprofile-content table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #page-patprofile .responsive-card-table,
  #page-patprofile .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 6. headers left-align */
  #page-patprofile .card-title,
  #page-patprofile .card-header > * {
    text-align: left !important;
  }
}


/* ============================================================
   FIX: 5-task mobile layout fixes (2026-05-13)
   1. ครุภัณฑ์ (assets page): table scroll inside card, lock card frame
   2. บันทึกพยาบาล (nursing sub-tab): use grid-template-areas
   3. Vital Signs: date row 1 line, filter buttons 4-equal grid below
   4. ขับถ่าย/น้ำเข้าออก: filter buttons 4-equal grid
   5. Dashboard + all pages: lock .main 100% width (was shrinking to 303px)
   ============================================================ */
@media (max-width: 768px) {
  /* TASK 5: lock .main 100% width on mobile for ALL pages */
  .main {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* TASK 1: assets page — table scroll inside card */
  #page-assets .card {
    overflow: hidden !important;
  }
  #page-assets .card table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100% !important;
  }

  /* TASKS 2,3,4: Filter row layout (vital/excretion/nursing)
     Target: parent div with date inputs + 4 filter buttons
     Layout: 
       Row 1 = "จาก: [input] ถึง: [input]" centered, inputs 130px wide
       Row 2 = 4 equal buttons (วันนี้/7วัน/เดือนนี้/เดือนที่แล้ว) centered
       Row 3 = "+ บันทึกใหม่" centered (nursing only) */
  #page-patprofile div:has(> input[type="date"] + span):has(> button + button + button + button) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Labels (จาก:/ถึง:) — small fixed */
  #page-patprofile div:has(> input[type="date"] + span):has(> button + button + button + button) > span {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }
  /* Date inputs — 130px wide so "13/05/2026" shows in full */
  #page-patprofile div:has(> input[type="date"] + span):has(> button + button + button + button) > input[type="date"] {
    flex: 0 1 130px !important;
    min-width: 120px !important;
    max-width: 130px !important;
    font-size: 12px;
    padding: 6px 4px !important;
  }
  /* 4 filter buttons — equal 25% (force wrap to row 2) */
  #page-patprofile div:has(> input[type="date"] + span):has(> button + button + button + button) > button:nth-of-type(-n+4) {
    flex: 1 1 calc(25% - 6px) !important;
    max-width: calc(25% - 6px) !important;
    min-width: 0 !important;
    padding: 6px 2px !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center !important;
    text-align: center !important;
  }
  /* 5th+ button (e.g. "+ บันทึกใหม่") — full row, centered */
  #page-patprofile div:has(> input[type="date"] + span):has(> button + button + button + button) > button:nth-of-type(n+5) {
    flex: 0 0 auto !important;
    min-width: 200px;
    max-width: 280px;
    font-size: 14px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    text-align: center !important;
  }}



/* ============================================================
   FIX: Desktop main width consistency (2026-05-13)
   Problem: .main uses flex:0 1 auto + flex-basis:auto on desktop
   หน้าที่ content แคบ (assets, deposits) → .main shrink 651px
   หน้าที่ content กว้าง (staff, patients) → .main expand 1236px
   = ขอบขวาไม่ตรงกันระหว่างหน้าต่าง ๆ
   Fix: บังคับ .main ขยายเต็มพื้นที่ที่เหลือ (viewport - sidebar)
   ============================================================ */
@media (min-width: 769px) {
  .main {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}


/* ============================================================
   FIX: Reserve scrollbar gutter (2026-05-13)
   Problem: หน้า content สั้นไม่มี scrollbar → main = 1296
            หน้า content ยาวมี scrollbar → main = 1281
            = สลับเมนู → layout shift 15px
   Fix: scrollbar-gutter:stable → เว้น gutter เสมอ ไม่ว่ามี scrollbar หรือไม่
   = ทุกหน้า width 1281 เสมอกัน (กลุ่ม 1 เหมือนกลุ่ม 2)
   ============================================================ */
html {
  scrollbar-gutter: stable;
}


/* ============================================================
   FIX: Topbar align with content + user-chip wider (2026-05-13)
   1. Topbar margin-right 28px → ขอบเขียวด้านขวาตรงกับ card ด้านล่าง
   2. User-chip min-width 200px + center text → กรอบกว้างพอใส่ชื่อยาว
   ============================================================ */
@media (min-width: 769px) {
  .topbar {
    margin-right: 28px !important;
  }
  .user-chip {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* Hide user-avatar circle on ALL viewports (mobile + desktop) */
.user-chip #userAvatar {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   R3 COMPONENT CSS REFRESH (Session B · 14พค69)
   ════════════════════════════════════════════════════════════════
   Refresh component visual ให้เข้ากับ sage+cream design tokens
   Strategy: Override rules เดิมด้วย selector เดียวกัน + รวมท้ายไฟล์
              (specificity เท่า, ลำดับชนะ — no !important spam)

   ตามลำดับ MIGRATION_MAP sections:
   1. Sidebar  2. Topbar  3. Buttons  4. Cards  5. Tables
   6. Forms    7. Tabs    8. Modals   9. Bottom tab bar

   Rollback: ลบทั้ง block นี้ → กลับสู่ Session A baseline
   ════════════════════════════════════════════════════════════════ */

/* ──────────── 1. SIDEBAR ──────────── */
/* .sidebar — merged into legacy block @line 343 (R19) */
.sidebar-logo {
  padding: 16px 14px 14px;
  border-bottom: none;
  background: var(--brand);
  color: var(--ink-on-brand);
}
.sidebar-logo .logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 18px;
  background: var(--amber);
  color: var(--brand-dark);
}
.sidebar-logo .logo-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-on-brand);
}
.sidebar-logo .logo-sub {
  font-size: 11px;
  margin-top: 2px;
  color: rgba(232, 242, 236, 0.7);
}
.nav-section {
  padding: 12px 16px 4px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  cursor: pointer;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  color: var(--sage-800);
  border-left: 3px solid transparent;
}
.nav-item:hover {
  background: rgba(46, 107, 79, 0.08);
  color: var(--sage-900);
}
.nav-item.active {
  background: var(--brand);
  color: var(--ink-on-brand);
  border-left-color: var(--sage-300);
}
.sidebar-footer {
  padding: 16px 20px;
  font-size: 12px;
  font-weight: 500;
  border-top: 1px solid var(--sage-200);
  color: var(--sage-700);
}

/* ──────────── 2. TOPBAR ──────────── */
.topbar {
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  background: var(--brand);
  border-bottom: 1px solid var(--brand-dark);
  color: var(--ink-on-brand);
}
.page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-on-brand);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-on-brand);
}
.topbar-date {
  font-size: 12px;
  font-family: var(--mono);
  color: rgba(232, 242, 236, 0.7);
}
#notif-bell-btn {
  color: var(--ink-on-brand);
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink-on-brand);
}
.user-chip:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ──────────── 3. BUTTONS ──────────── */
.btn {
  padding: 7px 16px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-md);
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-primary {
  background: var(--brand);
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--brand-dark);
  transform: none;            /* remove lift effect ที่ไม่เข้ากับ professional tone */
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--ink-4);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover {
  background: var(--danger-text);
}
.btn-success {
  background: var(--success);
  color: white;
}
.btn-success:hover {
  background: var(--success-text);
}
.btn-soft {
  background: var(--sage-100);
  color: var(--sage-700);
}
.btn-soft:hover {
  background: var(--sage-200);
}

/* ──────────── 4. CARDS ──────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ──────────── 5. TABLES ──────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
th {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 10px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--divider);
  color: var(--ink-2);
}
tr:last-child td {
  border-bottom: none;
}
tr:hover td {
  background: var(--sage-50);
}
/* Zebra striping สำหรับ responsive-card-table บน desktop เท่านั้น
   (mobile transform อยู่ใน @media block อื่น — ไม่กระทบ) */
@media (min-width: 769px) {
  .responsive-card-table tbody tr:nth-child(even) td {
    background: rgba(244, 241, 234, 0.4);
  }
  .responsive-card-table tbody tr:nth-child(even):hover td {
    background: var(--sage-50);
  }
}

/* ──────────── 6. FORMS ──────────── */
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}
.form-control {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13.5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--sage-100);
}
.form-control::placeholder {
  color: var(--ink-4);
}

/* ──────────── 7. TABS (Unified 6 variants) ──────────── */
.tabs {
  display: flex;
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  gap: 0;
  margin-bottom: 16px;
}
.tab,
.bi-tab,
.sr-tab,
.history-tab,
.billing-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  box-shadow: none;
  transition: color 0.15s, border-color 0.15s;
}
.tab.active,
.bi-tab.active,
.sr-tab.active,
.history-tab.active,
.history-tab.active-htab,
.billing-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}
.tab:hover:not(.active),
.bi-tab:hover:not(.active),
.sr-tab:hover:not(.active),
.history-tab:hover:not(.active-htab),
.billing-tab:hover:not(.active) {
  color: var(--ink);
}
.tab.tab-alert {
  color: var(--danger);
  font-weight: 700;
}

/* ──────────── 8. MODALS ──────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(20, 30, 15, 0.42);
  backdrop-filter: blur(3px);
}
.modal,
.modal-box {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--divider);
}
.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 2px 6px;
  color: var(--ink-3);
  border-radius: var(--r-sm);
}
.modal-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.modal-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--divider);
  background: var(--surface-2);
}

/* ──────────── 9. BOTTOM TAB BAR (mobile) ──────────── */
@media (max-width: 768px) {
  .bottom-tab-bar {
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(40, 50, 30, 0.06);
  }
  .bottom-tab-item {
    color: var(--ink-4);
    min-height: 44px;
  }
  .bottom-tab-item.active {
    color: var(--brand);
    font-weight: 600;
  }
}

/* ──────────── 10. SEARCH WRAP + ICON ──────────── */
.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-4);
}
.search-wrap input.form-control {
  padding-left: 36px;
}

/* ════════════════════════════════════════════════════════════════
   END OF R3 COMPONENT CSS REFRESH
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R3 PER-PAGE CSS REFRESH (Session C · 14พค69)
   ════════════════════════════════════════════════════════════════
   Refresh per-page visual ให้เข้ากับ design system ใหม่
   Strategy: Append ท้ายไฟล์ — specificity เท่า, ลำดับชนะ rule เดิม
              ไม่แก้ template literals ใน JS modules

   ขอบเขต:
   1. Patient Profile (mobile header gradient, app grid, generic table refresh)
   2. Page filter bars (Dashboard, Patient list, Stock, Billing)
   3. Cat-dot indicators (category colors)
   4. Card variations + alerts
   5. Inline-style tab overrides (BI, History, Billing tabs)

   Rollback: ลบทั้ง block นี้ → กลับ Session B baseline
   ════════════════════════════════════════════════════════════════ */

/* ──────────── 1. PATIENT PROFILE — Mobile Header Gradient ──────────── */
/* เดิม: gradient teal/accent → ใหม่: brand sage gradient */
@media (max-width: 768px) {
  .patprofile-mobile-header {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
    box-shadow: 0 2px 8px rgba(46, 107, 79, 0.25) !important;
  }
  .pmh-info-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }
}

/* ──────────── 2. PATIENT APP GRID (Mobile) ──────────── */
@media (max-width: 768px) {
  .pat-app-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
  }
  .pat-app-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 2px var(--brand);
  }
  .pat-app-label {
    color: var(--ink);
  }
}

/* ──────────── 3. CAT-DOT (Category Indicators) ──────────── */
/* Map color hex เก่าเข้ากับ semantic ใหม่ */
.cat-red    { background: var(--danger); }
.cat-orange { background: var(--warning); }
.cat-blue   { background: var(--info); }
.cat-green  { background: var(--success); }
.cat-purple { background: var(--purple); }
.cat-yellow { background: var(--amber); }
.cat-gray   { background: var(--ink-4); }

/* ──────────── 4. STATS-GRID Layout (Dashboard + Patient list) ──────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
  gap: 14px;
}
@media (min-width: 769px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ──────────── 5. INLINE-STYLE TAB OVERRIDES ──────────── */
/* HTML มี inline style: border-bottom:2px solid var(--accent); color:var(--accent)
   ที่ apply เฉพาะ active state ของ bi-tab, history-tab, billing-tab
   → ใช้ Session B rules ทำงานได้แล้ว เพราะ var(--accent) → var(--brand)
   แต่บาง inline ใช้ color:var(--text2) สำหรับ non-active — เรา override ด้วย ink-3
   เพื่อให้ค่าใหม่ถูก */

/* ──────────── 6. CARD VARIATIONS (Dashboard widgets) ──────────── */
/* Dashboard card-header ที่มี inline bg color #eef4ff, #fff8f0 ฯลฯ
   ปล่อยไว้ — compat layer จัดการให้แล้ว (Strategy Y)
   ถ้าจะ override ทั้งหมดต้องใช้ !important ซึ่ง hacky */

/* Card hover lift effect ลดลง */
.card:hover {
  box-shadow: var(--shadow-md);
  transform: none;
}

/* ──────────── 7. SEARCH WRAP (Patient/Staff/Stock filter bars) ──────────── */
.search-wrap {
  position: relative;
}
.search-wrap > input.form-control {
  padding-left: 36px !important;
}

/* ──────────── 8. SETTINGS PAGE GENERIC ──────────── */
/* No mockup — generic component styles take effect */

/* ──────────── 9. BI PAGE — KPI Cards + Section Cards ──────────── */
#page-bi .card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
#page-bi .stat-card {
  /* ใช้ Token Layer rules — visual ตรงกับ Dashboard */
}

/* ──────────── 10. AUDIT TRAIL TABLE ──────────── */
#page-audit table th {
  font-size: 10.5px;
}
#page-audit table td {
  font-size: 12.5px;
  font-family: var(--mono);
}

/* ──────────── 11. STAFF PROFILE — Profile Head Gradient ──────────── */
/* Generic application ถ้า JS render มี .profile-head class */
.profile-head {
  background: linear-gradient(135deg, var(--sage-50) 0%, var(--surface) 100%);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-lg);
}
.profile-photo {
  background: var(--brand);
  color: white;
  border-radius: var(--r-lg);
}

/* ──────────── 12. EMPTY/LOADING/ERROR STATES ──────────── */
.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-3);
}
.empty-state .ico {
  font-size: 40px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
.empty-state .h {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.empty-state .body {
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 320px;
  margin: 0 auto;
}

/* [R25 15พค69] Loading state — สำหรับ async data fetch */
.loading-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-3);
}
.loading-state .ico {
  font-size: 32px;
  opacity: 0.6;
  display: inline-block;
  margin-bottom: 8px;
  animation: spin 1.2s linear infinite;
}
.loading-state .h {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.loading-state .body {
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 320px;
  margin: 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* [R25 15พค69] Error state — สำหรับ failed data fetch */
.error-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
}
.error-state .ico {
  font-size: 36px;
  opacity: 0.7;
  display: block;
  margin-bottom: 8px;
}
.error-state .h {
  font-size: 14px;
  font-weight: 600;
  color: var(--danger-text);
  margin-bottom: 4px;
}
.error-state .body {
  font-size: 12.5px;
  color: var(--danger-text);
  max-width: 320px;
  margin: 0 auto 12px;
  opacity: 0.85;
}
.error-state .btn-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--surface);
  color: var(--danger-text);
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.error-state .btn-retry:hover {
  background: var(--danger-bg);
}

.skeleton-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  animation: skel-pulse 1.5s infinite ease-in-out;
}
@keyframes skel-pulse {
  0%, 100% { background: var(--surface); }
  50% { background: var(--surface-2); }
}

/* ──────────── 13. PATIENT PROFILE — Generic Card Refresh ──────────── */
/* clinical-profile.js render .card หลายตัวใน patprofile-content
   ใช้ Component refresh ของ .card อยู่แล้ว — ไม่ต้อง override เพิ่ม */

/* แก้ #patprofileTabs ให้เข้ากับ unified tab style */
#patprofileTabs {
  background: transparent;
  padding: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  margin-bottom: 16px;
  gap: 0;
}
#patprofileTabs .tab {
  padding: 10px 16px;
  font-size: 13px;
}

/* ──────────── 14. BADGES IN PATIENT/STAFF LISTS ──────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}

/* ──────────── 15. NOTIFICATION PANEL ──────────── */
#notif-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
#notif-badge {
  background: var(--danger) !important;
}

/* ──────────── 16. TOAST CONTAINER ──────────── */
.toast {
  padding: 12px 18px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.25s ease;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error,
.toast.danger  { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--info); }

/* ──────────── 17. STOCK BAR (Inventory progress) ──────────── */
.stock-bar {
  height: 6px;
  overflow: hidden;
  margin-top: 4px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
}
.stock-fill {
  height: 100%;
  transition: width 0.5s;
  border-radius: var(--r-pill);
}

/* ──────────── 18. TYPEAHEAD DROPDOWN ──────────── */
.ta-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.ta-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--divider);
}
.ta-item:last-child {
  border-bottom: none;
}
.ta-item:hover,
.ta-item.active {
  background: var(--sage-50);
}

/* ──────────── 19. REQUISITION LINE ITEMS (siline-*) ──────────── */
/* JS query: .siline-item, .siline-name, .siline-qty, .siline-price, etc.
   ใช้ class เดิม + เพิ่ม visual refinement */
.siline-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.siline-badge {
  border-radius: var(--r-pill);
  font-weight: 600;
}

/* ──────────── 20. PRINT AREA RESET ──────────── */
@media print {
  .sidebar, .topbar, .bottom-tab-bar, #notif-bell-wrap {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END OF R3 PER-PAGE CSS REFRESH
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R3 MOBILE MODAL CSS — Full-screen Pattern (Session D · 14พค69)
   ════════════════════════════════════════════════════════════════
   แปลง .modal-overlay > .modal (center popup) เป็น full-screen
   บน mobile (≤768px) — CSS only, ไม่แตะ HTML/JS

   Modal ขนาดเล็ก (confirm/alert) override ผ่าน attribute
   data-modal-size="small" ใน HTML — ยังเป็น centered popup

   Strategy:
   - ลำดับ CSS: append ท้ายไฟล์ = ชนะ Universal Modal Mobile rules
   - ใช้ z-index 300 (modal) > 200 (bottom-tab-bar)
   - รองรับ iOS safe area
   - ไม่กระทบ openModal()/closeModal() ใน JS
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ──────────── Overlay: stretch ทั้งจอ ──────────── */
  .modal-overlay.open {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    backdrop-filter: none;          /* ประหยัด GPU บน mobile */
    background: var(--bg);
  }

  /* ──────────── Modal: full-screen + slide-up ──────────── */
  .modal-overlay.open .modal,
  .modal-overlay.open .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;      /* รองรับ iOS Safari (URL bar) */
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    animation: r3-mobile-modal-slide-up 0.25s ease-out;
  }

  @keyframes r3-mobile-modal-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* ──────────── Modal Header: brand top bar ──────────── */
  .modal-overlay.open .modal-header {
    background: var(--brand) !important;
    color: var(--ink-on-brand) !important;
    padding: 14px 16px !important;
    border-bottom: none !important;
    flex-shrink: 0;
    min-height: 56px;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }

  .modal-overlay.open .modal-title {
    color: var(--ink-on-brand) !important;
    font-size: 16px;
    font-weight: 600;
  }

  .modal-overlay.open .modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18) !important;
    color: var(--ink-on-brand) !important;
    border-radius: 8px !important;
    font-size: 16px;
  }
  .modal-overlay.open .modal-close:hover {
    background: rgba(255, 255, 255, 0.28) !important;
  }

  /* ──────────── Modal Body: scroll inside ──────────── */
  .modal-overlay.open .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px !important;
    background: var(--bg);
  }

  /* ──────────── Modal Footer: sticky bottom, safe-area aware ──────────── */
  .modal-overlay.open .modal-footer {
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border) !important;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    /* keep existing grid layout from Universal Modal Mobile */
  }

  /* ──────────── Form inputs: 16px ป้องกัน iOS zoom ──────────── */
  .modal-overlay.open .form-control {
    min-height: 44px;
    font-size: 16px;
  }

  /* ──────────── Body scroll lock ตอน modal open ──────────── */
  body:has(.modal-overlay.open) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SMALL MODAL OVERRIDE (Confirm/Alert) — Center popup เหมือนเดิม
   ════════════════════════════════════════════════════════════════
   HTML: <div class="modal-overlay" data-modal-size="small">
   ใช้กับ modal-customConfirm + modal-customAlert
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .modal-overlay[data-modal-size="small"].open,
  .modal-overlay[data-modal-size="small"][style*="display: flex"],
  .modal-overlay[data-modal-size="small"][style*="display:flex"] {
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 30, 15, 0.42);
  }
  .modal-overlay[data-modal-size="small"].open .modal,
  .modal-overlay[data-modal-size="small"].open .modal-box,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal-box,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal-box {
    width: 90vw !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: var(--r-xl) !important;
    margin: auto !important;
    animation: none !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .modal-overlay[data-modal-size="small"].open .modal-header,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal-header,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal-header {
    background: var(--surface) !important;
    color: var(--ink) !important;
    padding: 18px 22px 0 !important;
    min-height: auto;
    padding-top: 18px !important;
  }
  .modal-overlay[data-modal-size="small"].open .modal-title,
  .modal-overlay[data-modal-size="small"].open h3,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal-title,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] h3,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal-title,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] h3 {
    color: var(--ink) !important;
  }
  .modal-overlay[data-modal-size="small"].open .modal-body,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal-body,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal-body {
    background: var(--surface);
    padding: 8px 22px 16px !important;
  }
  .modal-overlay[data-modal-size="small"].open .modal-footer,
  .modal-overlay[data-modal-size="small"][style*="display: flex"] .modal-footer,
  .modal-overlay[data-modal-size="small"][style*="display:flex"] .modal-footer {
    padding-bottom: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════
   END OF R3 MOBILE MODAL CSS
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R4 P1 · PATIENT PROFILE — Header Card + Breadcrumb + Allergy Banner
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.patprofile-breadcrumb button:hover {
  background: var(--sage-50, #f0f5f1) !important;
}

/* Header card hover effect on action buttons handled by .btn rules */
.patprofile-header-card .btn-ghost:hover {
  background: var(--sage-50, #f0f5f1);
}

/* Allergy banner — animation on appearance + hover feedback */
.patprofile-allergy-banner {
  animation: r4-allergy-fade-in 0.3s ease-out;
}
@keyframes r4-allergy-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Desktop: ซ่อน left column เดิม (info จะอยู่บน header card) === */
@media (min-width: 901px) {
  .patprofile-grid {
    grid-template-columns: 1fr !important;
  }
  .patprofile-left-col {
    display: none !important;
  }
}

/* === Mobile (≤900px) === */
@media (max-width: 900px) {
  .patprofile-breadcrumb {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .patprofile-header-card {
    padding: 16px 16px !important;
    gap: 12px !important;
  }
  .patprofile-header-card .patprofile-header-avatar > * {
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
  }
  .patprofile-header-info h2 {
    font-size: 18px !important;
  }
  .patprofile-header-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    font-size: 12px !important;
    gap: 6px 14px !important;
  }
  .patprofile-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .patprofile-header-actions .btn {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 6px 10px;
  }
  /* บน mobile ใช้ legacy left-col + ซ่อน new header (mobile-header เดิมยังใช้ได้) */
  .patprofile-header-card {
    display: none;
  }
  .patprofile-breadcrumb {
    display: none;
  }
  .patprofile-allergy-banner {
    padding: 10px 12px !important;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R4 P1 PATIENT PROFILE
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R4 P2 · PATIENT PROFILE — Tabs Pills + Count Badges
   ════════════════════════════════════════════════════════════════ */

/* Patient profile tabs container — clean underline style */
.patprofile-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e8e3d4);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0;
  margin-bottom: 16px;
  scrollbar-width: thin;
}
.patprofile-tabs::-webkit-scrollbar {
  height: 6px;
}
.patprofile-tabs::-webkit-scrollbar-thumb {
  background: var(--sage-200, #dbe5dc);
  border-radius: 3px;
}

/* Each tab — pill style with bottom underline on active */
.patprofile-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2, #5e5e5e);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  position: relative;
}
.patprofile-tabs .tab:hover {
  color: var(--brand, #2e6b4f);
  background: var(--sage-50, #f4f8f5);
}
.patprofile-tabs .tab.active {
  color: var(--brand, #2e6b4f);
  font-weight: 600;
  border-bottom-color: var(--brand, #2e6b4f);
  background: transparent;
}
.patprofile-tab-icon {
  font-size: 15px;
  margin-right: 6px;
}
.patprofile-tab-label {
  display: inline;
}

/* Active tab — count badge gets brand color */
.patprofile-tabs .tab.active .patprofile-tab-count {
  filter: brightness(0.98);
}

/* Mobile grid badge — already in inline styles, just position fine-tune */
.pat-app-btn .pat-app-badge {
  z-index: 1;
}

/* === Mobile responsive === */
@media (max-width: 900px) {
  .patprofile-tabs {
    display: none; /* mobile ใช้ grid แทน */
  }
  .patprofile-tabs .tab {
    font-size: 13px;
    padding: 8px 10px;
  }
  .patprofile-tab-label {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R4 P2
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R4 P3 · PATIENT PROFILE — Tab Content (History + Medical)
   ════════════════════════════════════════════════════════════════ */

.patprofile-info-card {
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

@media (max-width: 900px) {
  .patprofile-info-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    font-size: 13px !important;
  }
  .patprofile-info-card {
    padding: 14px 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R4 P3
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R4 P4 · PATIENT PROFILE — Meds + Allergy + Contacts
   ════════════════════════════════════════════════════════════════ */

.patprofile-contact-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .patprofile-contact-card {
    padding: 12px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R4 P4
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R5-A · VITAL SIGNS MODAL — Patient pill + Plex Mono + Real-time alert
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* Modal title */
.vital-modal-r5 .vital-modal-title { letter-spacing: -0.4px; }

/* Patient pill — already styled inline, just enhance hover */
.vital-patient-pill { transition: all 0.15s; }

/* Vital chip selector — enhance type-chip in vital modal context */
.vital-modal-r5 .type-chip {
  border: 1.5px solid var(--border, #e8e3d4);
  background: var(--surface, #fdfcf8);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vital-modal-r5 .type-chip:hover {
  border-color: var(--brand, #2e6b4f);
  background: var(--sage-50, #f4f8f5);
}
.vital-modal-r5 .type-chip.active {
  border-color: var(--brand, #2e6b4f);
  background: var(--sage-100, #eaf1eb);
  color: var(--brand, #2e6b4f);
  font-weight: 600;
}
.vital-modal-r5 .type-chip .icon { font-size: 18px; }

/* Vital value inputs — Plex Mono large */
.vital-modal-r5 .vital-value-input {
  border-radius: 8px;
  border: 1.5px solid var(--border, #e8e3d4);
  background: white;
  transition: all 0.15s;
}
.vital-modal-r5 .vital-value-input:focus {
  border-color: var(--brand, #2e6b4f);
  outline: 2px solid var(--sage-100, #eaf1eb);
  outline-offset: -1px;
}

/* Alert message animation */
.vital-modal-r5 .vital-alert-msg {
  animation: r5-alert-slide 0.2s ease-out;
}
@keyframes r5-alert-slide {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Range hint — subtle */
.vital-modal-r5 .vital-range-hint {
  opacity: 0.75;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .vital-modal-r5 .type-chip {
    padding: 8px 10px;
    font-size: 12px;
  }
  .vital-modal-r5 .vital-value-input {
    height: 52px !important;
    font-size: 24px !important;
  }
  .vital-patient-pill {
    padding: 10px 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R5-A
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R5-B · I/O MULTI-ROW MODAL — Patient pill + type-coded sections
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

.io-modal-r5 .io-patient-pill { transition: all 0.15s; }

/* Type chips ใน I/O modal — สีตามประเภท */
.io-modal-r5 .type-chip {
  border: 1.5px solid var(--border, #e8e3d4);
  background: var(--surface, #fdfcf8);
  padding: 12px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.io-modal-r5 .type-chip:hover {
  border-color: var(--brand, #2e6b4f);
  background: var(--sage-50, #f4f8f5);
}
.io-modal-r5 .type-chip.active {
  border-color: var(--brand, #2e6b4f);
  background: var(--sage-100, #eaf1eb);
  color: var(--brand, #2e6b4f);
  font-weight: 600;
}
.io-modal-r5 .type-chip .icon { font-size: 22px; line-height: 1; }

/* Volume input ใหญ่ — Plex Mono */
.io-modal-r5 input[type="number"].volume-input {
  height: 48px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: var(--mono, monospace) !important;
  letter-spacing: -0.5px;
  text-align: center;
  border-radius: 8px;
  border: 1.5px solid var(--border, #e8e3d4);
}

/* Char chips — multi-select pills */
.io-modal-r5 .char-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 12px;
  border: 1.5px solid var(--border, #e8e3d4);
  background: white;
  font-size: 12px;
  cursor: pointer;
  margin: 2px;
  transition: all 0.15s;
}
.io-modal-r5 .char-chip:hover {
  border-color: var(--brand, #2e6b4f);
}
.io-modal-r5 .char-chip.active {
  background: var(--sage-100, #eaf1eb);
  border-color: var(--brand, #2e6b4f);
  color: var(--brand, #2e6b4f);
  font-weight: 600;
}

@media (max-width: 600px) {
  .io-modal-r5 .type-chip { padding: 10px 6px; font-size: 11px; }
  .io-modal-r5 .type-chip .icon { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   END R5-B
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R5-C · DASHBOARD — Executive Alert + Section Headers
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* Executive alert banner — animation + display setup */
.dashboard-exec-alert {
  animation: r5c-alert-slide 0.3s ease-out;
}
.dashboard-exec-alert[style*="display:flex"],
.dashboard-exec-alert[style*="display: flex"] {
  display: flex !important;
}

@keyframes r5c-alert-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section headers */
.dashboard-section-header {
  user-select: none;
}

@media (max-width: 600px) {
  .dashboard-exec-alert {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .dashboard-section-header h3 {
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R5-C
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R6 · MEDICATIONS + MAR — Rich cards + status pills
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* Med log entry cards (R6-B) */
.medlog-entry-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Med log card container */
.medlog-card-r6 {
  border-radius: 12px;
  overflow: hidden;
}

/* MAR med list card */
.mar-medlist-card-r6 {
  border-radius: 12px;
  overflow: hidden;
}

/* MAR table — softer hover */
.mar-medlist-card-r6 table tbody tr {
  transition: background 0.1s;
}
.mar-medlist-card-r6 table tbody tr:hover {
  background: var(--sage-50, #f4f8f5);
}

@media (max-width: 900px) {
  .medlog-entry-card {
    padding: 10px 12px !important;
  }
  .medlog-entry-card .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R6
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R6-D · MAR ENTRY MODAL — Patient pill + status pills
   ════════════════════════════════════════════════════════════════ */

.mar-entry-modal-r6 .mar-patient-pill { transition: all 0.15s; }

/* Status select styling — make options visible */
.mar-entry-modal-r6 #mar-entry-status {
  font-size: 14px;
  font-weight: 500;
}

/* Time field — Plex Mono */
.mar-entry-modal-r6 #mar-entry-time {
  font-family: var(--mono, monospace);
  font-weight: 600;
}

@media (max-width: 600px) {
  .mar-entry-modal-r6 .mar-patient-pill {
    padding: 10px 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R6-D
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R7 · BILLING PAGE — Header + KPI cards + Table redesign
   14 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* KPI cards hover lift */
.billing-kpi-card {
  transition: all 0.15s;
}
.billing-kpi-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Billing table — Plex Mono on numbers, hover row */
.billing-table-r7 {
  width: 100%;
  border-collapse: collapse;
}
.billing-table-r7 thead th {
  background: var(--sage-50, #f4f8f5);
  color: var(--text2, #5e5e5e);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e8e3d4);
  white-space: nowrap;
}
.billing-table-r7 tbody td {
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border, #e8e3d4);
}
.billing-table-r7 tbody tr {
  transition: background 0.1s;
}
.billing-table-r7 tbody tr:hover {
  background: var(--sage-50, #f4f8f5);
}
.billing-table-r7 tbody tr:last-child td {
  border-bottom: none;
}

/* Status pills in billing table */
.billing-table-r7 .badge,
.billing-table-r7 .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Filter bar */
.billing-filter-bar select:focus,
.billing-filter-bar input:focus {
  outline: 2px solid var(--sage-100, #eaf1eb);
  border-color: var(--brand, #2e6b4f);
}

/* Page header section */
.billing-page-header h2 {
  color: var(--text);
}

/* Tab pills */
#billing-tabs .billing-tab {
  transition: all 0.15s;
  border-radius: 8px 8px 0 0;
}
#billing-tabs .billing-tab:not(.active):hover {
  background: var(--sage-50, #f4f8f5);
  color: var(--brand, #2e6b4f) !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .billing-page-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .billing-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .billing-kpi-card {
    padding: 10px 12px !important;
  }
  .billing-kpi-card div[style*="font-size:22px"] {
    font-size: 18px !important;
  }
  .billing-filter-bar {
    padding: 10px !important;
  }
  .billing-filter-bar select,
  .billing-filter-bar input {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R7
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R7-B · BILLING TABLE — Plex Mono for amount columns + status pills polish
   ════════════════════════════════════════════════════════════════ */

/* Plex Mono สำหรับ amount columns (last 4 ก่อน status + actions) */
.billing-table-r7 tbody td:nth-child(6),
.billing-table-r7 tbody td:nth-child(7),
.billing-table-r7 tbody td:nth-child(8) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px;
  letter-spacing: -0.2px;
}

/* DocNo column — mono too */
.billing-table-r7 tbody td:nth-child(1) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--text2);
}

/* Patient name column — bold */
.billing-table-r7 tbody td:nth-child(3) {
  font-weight: 600;
}

/* Status pills (column 9) — บังคับ rounded pill style ผ่าน existing span */
.billing-table-r7 tbody td:nth-child(9) > span {
  border-radius: 999px !important;
  padding: 3px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex;
  align-items: center;
}

/* Overdue row — left border indicator */
.billing-table-r7 tbody tr[style*="background:#fff8f8"],
.billing-table-r7 tbody tr[style*="background: #fff8f8"] {
  border-left: 3px solid var(--danger-text);
}

/* Action buttons — smaller padding */
.billing-table-r7 tbody td:last-child .btn {
  padding: 4px 8px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   END R7-B
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R8-A · Stock List — Header + KPI cards + Filter bar
   Added 14 พ.ค. 69 · Mockup: PDF Desktop p.29
   Pattern: ตาม R7-A Billing — เพิ่มเฉพาะ hover/focus polish
   ════════════════════════════════════════════════════════════════ */

/* Stock page header — same pattern as billing-page-header */
.stock-page-header h2 {
  color: var(--text);
}

/* KPI cards — hover lift effect (matches R7) */
.stock-kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stock-kpi-card[style*="cursor:pointer"]:hover,
.stock-kpi-card[style*="cursor: pointer"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* KPI value text — slight emphasis on hover (clickable cards only) */
.stock-kpi-card[style*="cursor:pointer"]:hover [id^="stock-kpi-"] {
  filter: brightness(0.92);
}

/* Filter bar polish — focus state */
.stock-filter-bar input[type="text"]:focus,
.stock-filter-bar input#stockSearch:focus,
.stock-filter-bar select:focus {
  outline: none;
  border-color: var(--brand, #2e6b4f);
  box-shadow: 0 0 0 2px var(--sage-100, #e6efe7);
}

/* Filter bar dropdowns — cursor on hover */
.stock-filter-bar select {
  cursor: pointer;
}

/* Expiry warn input — mono font + accent on focus */
#stk-expiry-warn:focus {
  outline: none;
  border-color: var(--brand, #2e6b4f);
  box-shadow: 0 0 0 2px var(--sage-100, #e6efe7);
}

/* ════════════════════════════════════════════════════════════════
   END R8-A
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R8-B · Stock Table polish
   Added 14 พ.ค. 69 · Mockup: PDF Desktop p.29-30
   Pattern: ตาม R7-B Billing table — Plex Mono + status pill + indicator
   ════════════════════════════════════════════════════════════════ */

/* Cleaner header — small caps tone */
.stock-table-r8 thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text2);
  background: var(--surface2, #f8f9fa);
  border-bottom: 2px solid var(--border);
  padding: 10px 12px;
  white-space: nowrap;
}

/* Cell baseline — taller rows for readability */
.stock-table-r8 tbody td {
  padding: 12px 12px;
  vertical-align: middle;
}

/* Row name (col 3) — slight emphasis */
.stock-table-r8 tbody tr.stock-row-r8 td:nth-child(3) {
  font-weight: 600;
  letter-spacing: -0.1px;
}

/* Status pill (col 11) — bullet-proof rounded pill via existing badge */
.stock-table-r8 tbody tr.stock-row-r8 td:nth-child(11) > span.badge {
  border-radius: 999px !important;
  padding: 3px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Critical (qty=0) row — left border indicator + subtle bg */
.stock-table-r8 tbody tr.stock-row-r8.critical-stock {
  border-left: 3px solid var(--danger-text);
  background: var(--danger-bg);
}

/* Low stock row — gentle amber tint + left border */
.stock-table-r8 tbody tr.stock-row-r8.low-stock {
  border-left: 3px solid var(--warning);
  background: var(--bg);
}

/* Action buttons (last col) — slightly tighter */
.stock-table-r8 tbody td:last-child .btn {
  padding: 4px 8px;
  font-size: 12px;
}

/* Smooth row hover */
.stock-table-r8 tbody tr.stock-row-r8:hover {
  background: var(--sage-50, #f4f8f5) !important;
}
.stock-table-r8 tbody tr.stock-row-r8.critical-stock:hover {
  background: var(--danger-bg) !important;
}
.stock-table-r8 tbody tr.stock-row-r8.low-stock:hover {
  background: var(--warning-bg) !important;
}

/* ════════════════════════════════════════════════════════════════
   END R8-B
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R9-A · Patient List — Header + KPI cards + Filter bar
   Added 14 พ.ค. 69 · Mockup: PDF Desktop p.12
   Pattern: ตาม R8-A Stock — เพิ่มเฉพาะ hover/focus polish
   ════════════════════════════════════════════════════════════════ */

/* Patient page header */
.patient-page-header h2 {
  color: var(--text);
}

/* KPI cards — hover lift effect (matches R8) */
.patient-kpi-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.patient-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.patient-kpi-card:hover [id^="pat-kpi-"] {
  filter: brightness(0.92);
}

/* Filter bar — focus state with sage ring */
.patient-filter-bar input[type="text"]:focus,
.patient-filter-bar input#patSearch:focus,
.patient-filter-bar select:focus {
  outline: none;
  border-color: var(--brand, #2e6b4f);
  box-shadow: 0 0 0 2px var(--sage-100, #e6efe7);
}

.patient-filter-bar select {
  cursor: pointer;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .patient-page-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .patient-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .patient-kpi-card {
    padding: 10px 12px !important;
  }
  .patient-kpi-card div[style*="font-size:22px"] {
    font-size: 18px !important;
  }
  .patient-filter-bar {
    padding: 10px !important;
  }
  .patient-filter-bar input,
  .patient-filter-bar select {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R9-A
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R9-B · Patient Table — Plex Mono columns + Avatar + Status pills
   Added 14 พ.ค. 69 · Mockup: PDF Desktop p.13 (Patient List Table)
   Pattern: ตาม R8-B Stock — CSS polish + JS avatar fallback
   Columns: 1#  2Name(+Avatar)  3IDcard  4DOB  5Age  6AdmitDate  7EndDate  8Duration  9Status  10Actions
   ════════════════════════════════════════════════════════════════ */

/* Base table */
.patient-table-r9 {
  width: 100%;
  border-collapse: collapse;
}
.patient-table-r9 thead th {
  background: var(--sage-50, #f4f8f5);
  color: var(--text2, #5e5e5e);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e8e3d4);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.patient-table-r9 tbody td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border, #e8e3d4);
  vertical-align: middle;
}
.patient-table-r9 tbody tr {
  transition: background 0.1s;
}
.patient-table-r9 tbody tr:hover {
  background: var(--sage-50, #f4f8f5);
}
.patient-table-r9 tbody tr:last-child td {
  border-bottom: none;
}

/* Column 1: # — mono center, gray */
.patient-table-r9 tbody td:nth-child(1) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11.5px;
  color: var(--text3, #888);
  text-align: center;
  width: 48px;
}

/* Column 3: เลขบัตรประชาชน — mono */
.patient-table-r9 tbody td:nth-child(3) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--text2);
  letter-spacing: -0.1px;
}

/* Column 4: วันเกิด — mono */
.patient-table-r9 tbody td:nth-child(4) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--text2);
}

/* Column 5: อายุ — mono right */
.patient-table-r9 tbody td:nth-child(5) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

/* Column 6, 7: dates — mono */
.patient-table-r9 tbody td:nth-child(6),
.patient-table-r9 tbody td:nth-child(7) {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--text2);
}

/* Column 8: ระยะเวลา — slight emphasis */
.patient-table-r9 tbody td:nth-child(8) {
  font-size: 12px;
  color: var(--text2);
}

/* Column 9: สถานะ — pill polish */
.patient-table-r9 tbody td:nth-child(9) .badge,
.patient-table-r9 tbody td:nth-child(9) .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px !important;
  padding: 3px 12px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Status-based row left border indicators */
.patient-table-r9 tbody tr.pat-status-hospital {
  border-left: 3px solid var(--info-text);
}
.patient-table-r9 tbody tr.pat-status-inactive {
  border-left: 3px solid var(--ink-3);
  opacity: 0.85;
}
.patient-table-r9 tbody tr.pat-status-active {
  border-left: 3px solid transparent;
}

/* Avatar fallback (initials) — Thai 2 chars, sized to match photo */
.patient-table-r9 .pat-avatar-initials {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid;
  user-select: none;
}
.patient-table-r9 .pat-avatar-active {
  background: var(--sage-100, #e6efe7);
  border-color: var(--brand, #2e6b4f);
  color: var(--brand, #2e6b4f);
}
.patient-table-r9 .pat-avatar-hospital {
  background: var(--info-bg);
  border-color: var(--info-text);
  color: var(--info-text);
}
.patient-table-r9 .pat-avatar-inactive {
  background: var(--surface2, #f8f7f3);
  border-color: var(--ink-3);
  color: var(--ink-2);
}

/* Action buttons (column 10) — tighter */
.patient-table-r9 tbody td:last-child .btn {
  padding: 4px 8px;
  font-size: 12px;
}
.patient-table-r9 tbody td:last-child {
  white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .patient-table-r9 thead th,
  .patient-table-r9 tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }
  .patient-table-r9 .pat-avatar-initials {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R9-B
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   R10-R15 · Consolidated redesign polish (page-redesign-* unified)
   Refactored by R16-A · 14 พ.ค. 69
   Covers 13 pages from R10-R15:
   · R10: suppliers, supplierinvoices, purchaserequests, stockreport
   · R11: deposits, expenses, assets
   · R12: rooms, staff, accounts
   · R13: bi, settings
   · R14: healthreport, incident, dietary
   · R15: requisition, history, purchasehistory, report
   Single source of truth — เปลี่ยน design ที่นี่ apply 17 pages พร้อมกัน
   ════════════════════════════════════════════════════════════════ */

/* Section headers — h2 tone matches body text */
.page-redesign-header h2 {
  color: var(--text);
}

/* Filter bars — focus state with sage ring */
.page-redesign-filter-bar input:focus,
.page-redesign-filter-bar select:focus {
  outline: none;
  border-color: var(--brand, #2e6b4f);
  box-shadow: 0 0 0 2px var(--sage-100, #e6efe7);
}

.page-redesign-filter-bar select {
  cursor: pointer;
}

/* Mobile responsive — single rule for all redesigned pages */
@media (max-width: 600px) {
  .page-redesign-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .page-redesign-filter-bar {
    padding: 10px !important;
  }
  .page-redesign-filter-bar input,
  .page-redesign-filter-bar select {
    width: 100% !important;
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   END R10-R15 CONSOLIDATED — REDESIGN COMPLETE (R3-R15 = 13 iterations, 30+ pages)
   Refactored by R16-A: 11 class variants → 1 unified class (page-redesign-*)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R16-B (v2) · Utility classes for redesigned page sections
   Added 15 พ.ค. 69 · Fixed version after duplicate-class bug
   ════════════════════════════════════════════════════════════════ */

/* ── Section header row ── */
.section-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* ── Section title wrap ── */
.section-title-wrap {
  flex: 1;
  min-width: 240px;
}

/* ── Section h2 title ── */
.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

/* ── Section emoji icon ── */
.section-icon {
  font-size: 24px;
}

/* ── Section subtitle ── */
.section-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
}

/* ── Section actions row ── */
.section-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── KPI card inner header ── */
.kpi-card-r10__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* ── KPI decor (right-side emoji) ── */
.kpi-card-r10__decor {
  font-size: 18px;
  opacity: 0.4;
}

/* ── KPI grid container ── */
.kpi-grid-r10 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

/* ════════════════════════════════════════════════════════════════
   END R16-B (v2)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   R17 · Inline Reduction · 15 พ.ค. 2569
   Utility classes แทน inline styles ใน html/modals.html + pages.html
   ════════════════════════════════════════════════════════════════ */

/* ── Margin/Padding utilities ── */
.m-0 { margin: 0; }
.mb-8 { margin-bottom: 8px; }

/* ── Display utilities ── */
.pos-rel { position: relative; }
.flex-center { display: flex; align-items: center; }
.flex-center-6 { display: flex; align-items: center; gap: 6px; }

/* ── Typography utilities ── */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.text-muted { color: var(--text2); }
.text-subtle { color: var(--text3); }

/* ── Section label pattern (modals.html × 16) ── */
.section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* ── Modal sub-form-label pattern (modals.html × 7) ── */
.field-label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* ── 2-column grid pattern (modals.html × 12) ── */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Typeahead dropdown pattern (modals.html × 12) ── */
.typeahead-dropdown {
  display: none;
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 2px;
}

/* ── Disabled-look field (modals.html × 9) ── */
.field-readonly {
  background: var(--surface2);
  color: var(--text2);
  cursor: default;
}

/* ── Resize utilities ── */
.resize-v { resize: vertical; }

/* ════════════════════════════════════════════════════════════════
   END R17
   ════════════════════════════════════════════════════════════════ */


/* ── R17: pages.html additional utilities ── */
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.p-0 { padding: 0; }
.w-full { width: 100%; }
.mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }

/* ── Filter chip (pages.html × 13) ── */
.filter-chip-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ── Mini select (pages.html × 17) ── */
.mini-select {
  width: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  background: white;
  color: var(--text);
  font-size: 13px;
  height: auto;
}

/* ── Section label small (pages.html × 13) ── */
.label-sm {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}

/* ── Brand chip (pages.html × 10) ── */
.chip-brand {
  white-space: nowrap;
  color: var(--brand);
  border-color: var(--sage-200);
  background: var(--sage-50);
}

/* ── Empty state center (pages.html × 5) ── */
.empty-center {
  text-align: center;
  padding: 40px;
  color: var(--text3);
}

/* ════════════════════════════════════════════════════════════════
   R18 · Inline Reduction Batch 3 · 15 พ.ค. 2569
   ════════════════════════════════════════════════════════════════ */

/* ── Modal max-width sizes ── */
.mw-480 { max-width: 480px; }
.mw-500 { max-width: 500px; }
.mw-520 { max-width: 520px; }
.mw-560 { max-width: 560px; }

/* ── Chip-toggle (modals × 17 รวม 3 sizes) ── */
.chip-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
}
.chip-toggle-sm {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
}
.chip-toggle-xs {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
}

/* ── Form helpers ── */
.accent-brand { accent-color: var(--accent); }

/* ── Help text patterns ── */
.help-text {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}
.help-text-3 {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

/* ── Flex utility variants ── */
.flex-gap8 { display: flex; gap: 8px; align-items: center; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.overflow-y-auto-flex { overflow-y: auto; flex: 1; }

/* ── Typography variants ── */
.fw600-accent { font-weight: 600; font-size: 13px; color: var(--accent); }
.fs-13-muted { font-size: 13px; color: var(--text2); }

/* ── Box / panel patterns ── */
.box-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.panel-light {
  background: var(--surface2);
  border-radius: 8px;
  padding: 10px 14px;
}

/* ── pages.html: tab buttons ── */
.tab-button {
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text2);
}
.tab-button-bold {
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}

/* ── pages.html: misc ── */
.label-mini {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}
.w-160 { width: 160px; }
.fw600-fs135 { font-weight: 600; font-size: 13.5px; }
.row-spread-mb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.fs-12-subtle { font-size: 12px; color: var(--text3); }
.mb-20 { margin-bottom: 20px; }

/* ════════════════════════════════════════════════════════════════
   END R18
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   [R27-P3A 15พค69] Suppliers + similar wide tables — proper scroll
   - UAT-1: ตาราง suppliers มี 14 columns, ล้นจอแม้ desktop 1448px
   - Fix: เพิ่ม min-width บน table → scrollbar ทำงานจริงจัง
   - ครอบ supplier_invoices ด้วย (table โครงคล้ายกัน)
   ════════════════════════════════════════════════════════════════ */
#page-suppliers .table-wrap table,
#page-supplierinvoices .table-wrap table {
  min-width: 1400px;
}
@media (max-width: 768px) {
  #page-suppliers .table-wrap table,
  #page-supplierinvoices .table-wrap table {
    min-width: 1200px; /* mobile: ลดลงเล็กน้อย, scroll ทำงานปกติ */
  }
}

/* ════════════════════════════════════════════════════════════════
   [R27-P3B 15พค69] Billing action bar — mobile responsive
   - UAT-3: 6 ปุ่ม action บน mobile <768px แสดงไม่สวย
   - Fix: ปุ่มเล็กลง, font-size ลด, padding ลด, ปุ่มกระจายเต็มแถว
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #page-billing .billing-page-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #page-billing .section-actions {
    width: 100%;
    gap: 4px;
  }
  #page-billing .section-actions .btn {
    font-size: 12px;
    padding: 6px 8px;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   [R27-P5 15พค69] Small modal z-index fix — BUG-NEW-01 from UAT round 2
   - Problem: confirm dialog z-index 200 = เท่ากับ parent modal 200
     → confirm dialog อาจถูก overlap โดย parent modal
   - Fix: ดัน customConfirm + customAlert ขึ้น z-index 9999
     (เหนือ modal ปกติ 200 + stacked modal 190 + mobile modal 300/310)
   - ครอบทุก viewport (desktop + mobile)
   ════════════════════════════════════════════════════════════════ */
.modal-overlay[data-modal-size="small"] {
  z-index: 9999;
}
.modal-overlay[data-modal-size="small"].open {
  z-index: 9999 !important;
}
@media (max-width: 768px) {
  .modal-overlay[data-modal-size="small"],
  .modal-overlay[data-modal-size="small"].open {
    z-index: 9999 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 · #6 Recent / Pinned (sidebar widget)
   ═══════════════════════════════════════════════════════════════════ */
#sidebar-recent-pinned-wrap {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e0d1);
  margin-bottom: 12px;
}
.rp-list {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rp-section-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3, #6f7770);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 4px 4px;
  margin-top: 4px;
}
.rp-section-title:first-child { margin-top: 0; }
.rp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
  min-height: 36px;
}
.rp-item:hover {
  background: var(--surface-2, #f4f1ea);
}
.rp-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage-200, #d1e3d8);
  color: var(--sage-700, #1f4d38);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.rp-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.rp-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #1a221c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.rp-sub {
  font-size: 10.5px;
  color: var(--ink-3, #6f7770);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-star {
  color: var(--warning, #b88240);
  font-size: 11px;
  flex-shrink: 0;
}
.rp-empty {
  font-size: 11px;
  color: var(--ink-4, #9ca29c);
  padding: 8px 4px;
  font-style: italic;
  text-align: center;
}

/* Pin star button on patient profile */
.pin-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-strong, #d2cab5);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.15s;
  color: var(--ink-3, #6f7770);
}
.pin-toggle-btn:hover {
  background: var(--surface-2, #f4f1ea);
  border-color: var(--warning, #b88240);
}
.pin-toggle-btn.pinned {
  background: var(--warning-bg, #f5e9d4);
  border-color: var(--warning, #b88240);
  color: var(--warning, #b88240);
}

/* ─────────────────────────────────────────────────────────────────
   PHASE 2 · #6-F · Inline pin button (in patient profile header)
   ───────────────────────────────────────────────────────────────── */
.pin-toggle-btn-inline {
  background: transparent;
  border: 1px solid var(--border, #e5e0d1);
  color: var(--ink-3, #6f7770);
  transition: all 0.15s ease;
}
.pin-toggle-btn-inline:hover {
  background: var(--surface-2, #f4f1ea);
  border-color: var(--warning, #b88240);
  color: var(--warning, #b88240);
}
.pin-toggle-btn-inline.pinned {
  background: var(--warning-bg, #f5e9d4);
  border-color: var(--warning, #b88240);
  color: var(--warning, #b88240);
  font-weight: 600;
}
.pin-toggle-btn-inline.pinned:hover {
  background: #ecd9b8;
}
.pin-toggle-btn-inline:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 · #5 Global Search (Cmd+K / Ctrl+K)
   ═══════════════════════════════════════════════════════════════════ */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: gs-fade-in 0.15s ease;
}
.gs-overlay.open {
  display: flex;
}
@keyframes gs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gs-modal {
  width: 92%;
  max-width: 640px;
  max-height: 75vh;
  background: var(--surface, #ffffff);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #e5e0d1);
}
.gs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e5e0d1);
  background: var(--bg, #faf8f3);
}
.gs-icon {
  font-size: 18px;
  color: var(--ink-3, #6f7770);
}
.gs-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--ink, #1a221c);
  outline: none;
  padding: 4px 0;
}
.gs-input::placeholder {
  color: var(--ink-4, #9ca29c);
}
.gs-close {
  background: var(--surface-2, #f4f1ea);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: monospace;
  color: var(--ink-3, #6f7770);
}
.gs-close:hover {
  background: var(--surface-3, #ece7da);
}
.gs-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.gs-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #6f7770);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 18px 4px;
  background: transparent;
}
.gs-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
}
.gs-result:hover {
  background: var(--surface-2, #f4f1ea);
}
.gs-result.selected {
  background: var(--sage-50, #f4f8f5);
  border-left-color: var(--sage-600, #2e6b4f);
}
.gs-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage-100, #eaf1eb);
  color: var(--sage-700, #1f4d38);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.gs-result-body {
  flex: 1;
  min-width: 0;
}
.gs-result-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a221c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.gs-result-name mark {
  background: var(--accent-bg, #fff3d4);
  color: var(--accent, #8b6314);
  padding: 0 2px;
  border-radius: 2px;
}
.gs-result-sub {
  font-size: 12px;
  color: var(--ink-3, #6f7770);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.gs-result-arrow {
  color: var(--ink-4, #9ca29c);
  font-size: 14px;
  flex-shrink: 0;
}
.gs-result.selected .gs-result-arrow {
  color: var(--sage-600, #2e6b4f);
}
.gs-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--ink-3, #6f7770);
  font-size: 14px;
}
.gs-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border, #e5e0d1);
  background: var(--bg, #faf8f3);
  font-size: 11px;
  color: var(--ink-3, #6f7770);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.gs-footer kbd {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: monospace;
  color: var(--ink-2, #333a35);
  box-shadow: 0 1px 0 var(--border, #e5e0d1);
}

/* Mobile: full-screen search */
@media (max-width: 768px) {
  .gs-overlay {
    padding-top: 0;
    align-items: stretch;
  }
  .gs-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .gs-input {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* Search button: hide on print */
#global-search-btn:hover {
  color: var(--sage-700, #1f4d38);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 · #1 Quick Action FAB (Mobile only)
   ═══════════════════════════════════════════════════════════════════ */
.fab-container {
  position: fixed;
  bottom: 88px; /* above bottom-tab-bar */
  right: 16px;
  z-index: 9500;
  display: none; /* mobile only */
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none; /* container ไม่ block click */
}
.fab-container > * { pointer-events: auto; }

@media (max-width: 768px) {
  .fab-container { display: flex; }
}

/* Hide FAB when print or modal open */
@media print {
  .fab-container { display: none !important; }
}

/* Main FAB button */
.fab-main-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-600, #2e6b4f);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(46, 107, 79, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab-main-btn:active {
  transform: scale(0.92);
}
.fab-icon-plus,
.fab-icon-close {
  position: absolute;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  transition: opacity 0.2s, transform 0.2s;
}
.fab-icon-plus {
  opacity: 1;
  transform: rotate(0);
}
.fab-icon-close {
  opacity: 0;
  transform: rotate(-90deg);
  font-size: 22px;
}
.fab-container.open .fab-main-btn {
  background: var(--ink, #1a221c);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.fab-container.open .fab-icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}
.fab-container.open .fab-icon-close {
  opacity: 1;
  transform: rotate(0);
}

/* Shortcuts list */
.fab-shortcuts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.18s, transform 0.18s;
}
.fab-container.open .fab-shortcuts {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 24px;
  padding: 10px 16px 10px 12px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a221c);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transition: transform 0.1s, background 0.1s;
}
.fab-shortcut:active {
  transform: scale(0.96);
  background: var(--surface-2, #f4f1ea);
}
.fab-shortcut-icon {
  font-size: 18px;
  line-height: 1;
}
.fab-shortcut-label {
  font-size: 14px;
}

/* Backdrop (subtle, only when open) */
.fab-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: -1;
}
.fab-container.open .fab-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────
   FAB Patient Picker (overlay)
   ───────────────────────────────────────────────────────────────── */
.fab-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10500;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.fab-picker-overlay.open {
  display: flex;
  animation: fab-fade-in 0.15s ease;
}
@keyframes fab-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fab-picker-modal {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--surface, #ffffff);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fab-slide-up 0.2s ease;
}
@keyframes fab-slide-up {
  from { transform: translateY(40px); }
  to { transform: translateY(0); }
}
.fab-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.fab-picker-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1a221c);
}
.fab-picker-close {
  background: var(--surface-2, #f4f1ea);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fab-picker-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg, #faf8f3);
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.fab-picker-search-icon {
  font-size: 16px;
  color: var(--ink-3, #6f7770);
}
.fab-picker-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px; /* prevent iOS zoom */
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--ink, #1a221c);
}
.fab-picker-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 14px;
  -webkit-overflow-scrolling: touch;
}
.fab-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #6f7770);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 18px 6px;
}
.fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.1s;
  min-height: 56px;
}
.fab-item:active {
  background: var(--surface-2, #f4f1ea);
}
.fab-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sage-100, #eaf1eb);
  color: var(--sage-700, #1f4d38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.fab-body {
  flex: 1;
  min-width: 0;
}
.fab-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a221c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.fab-sub {
  font-size: 12px;
  color: var(--ink-3, #6f7770);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.fab-star {
  color: var(--warning, #b88240);
  font-size: 12px;
}
.fab-badge {
  display: inline-block;
  background: var(--info-bg, #e1ecf5);
  color: var(--info, #2c5d8a);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.fab-badge-gray {
  background: var(--surface-2, #f4f1ea);
  color: var(--ink-3, #6f7770);
}
.fab-arrow {
  color: var(--ink-4, #9ca29c);
  font-size: 16px;
  flex-shrink: 0;
}
.fab-empty,
.fab-hint {
  padding: 24px 18px;
  text-align: center;
  color: var(--ink-3, #6f7770);
  font-size: 13px;
  line-height: 1.5;
}
.fab-hint {
  padding: 8px 18px 16px;
  font-size: 12px;
  color: var(--ink-4, #9ca29c);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 · #4 Shift Handover
   ═══════════════════════════════════════════════════════════════════ */
.ho-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.ho-title-block { flex: 1; min-width: 200px; }
.ho-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #1a221c);
  margin: 0;
  line-height: 1.2;
}
.ho-subtitle {
  font-size: 13px;
  color: var(--ink-3, #6f7770);
  margin-top: 4px;
}
.ho-auto-pill {
  display: inline-block;
  background: var(--sage-100, #eaf1eb);
  color: var(--sage-700, #1f4d38);
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 600;
}
.ho-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ho-select,
.ho-date-input {
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 6px;
  background: var(--surface, #fff);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
}

.ho-loading,
.ho-error {
  text-align: center;
  padding: 40px;
  color: var(--ink-3, #6f7770);
  font-size: 14px;
}
.ho-error { color: var(--danger, #c0392b); }

/* Stats */
.ho-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.ho-stat-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.ho-stat-card.ho-stat-warn {
  background: var(--accent-bg, #fff3d4);
  border-color: var(--accent, #b88240);
}
.ho-stat-icon { font-size: 18px; }
.ho-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #1a221c);
  margin: 2px 0;
  font-family: 'IBM Plex Mono', monospace;
}
.ho-stat-label {
  font-size: 11px;
  color: var(--ink-3, #6f7770);
}

/* 2-column grid */
.ho-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ho-col { display: flex; flex-direction: column; gap: 16px; }

/* Sections */
.ho-section {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 12px;
  overflow: hidden;
}
.ho-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sage-700, #1f4d38);
  background: var(--bg, #faf8f3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.ho-section-body {
  padding: 8px 0;
  max-height: 600px;
  overflow-y: auto;
}
.ho-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-4, #9ca29c);
  font-size: 13px;
  font-style: italic;
}
.ho-hint {
  font-size: 11px;
  color: var(--ink-4, #9ca29c);
  text-align: center;
  padding: 4px 16px 12px;
  font-style: italic;
}

/* Urgent items */
.ho-urgent-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
  border-left: 3px solid transparent;
}
.ho-urgent-item.ho-sev-high {
  border-left-color: var(--danger, #c0392b);
  background: var(--danger-bg, #fef2f0);
}
.ho-urgent-item.ho-sev-med {
  border-left-color: var(--accent, #b88240);
  background: var(--accent-bg, #fff8e8);
}
.ho-urgent-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-3, #6f7770);
  font-weight: 600;
  min-width: 50px;
}
.ho-urgent-body { flex: 1; }
.ho-urgent-patient {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink, #1a221c);
  cursor: pointer;
}
.ho-urgent-patient:hover { color: var(--sage-700, #1f4d38); }
.ho-urgent-detail {
  font-size: 12px;
  color: var(--ink-2, #333a35);
  margin-top: 2px;
}

/* Follow-up */
.ho-followup-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.ho-followup-icon { font-size: 16px; flex-shrink: 0; }
.ho-followup-body { flex: 1; }
.ho-followup-patient {
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink, #1a221c);
}
.ho-followup-patient:hover { color: var(--sage-700, #1f4d38); }
.ho-followup-title {
  font-size: 12px;
  color: var(--accent, #b88240);
  margin-top: 2px;
}
.ho-followup-detail {
  font-size: 11px;
  color: var(--ink-3, #6f7770);
  margin-top: 2px;
}

/* Medications */
.ho-med-group {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.ho-med-group:last-child { border-bottom: none; }
.ho-med-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2, #333a35);
  padding: 4px 0;
}
.ho-med-item {
  font-size: 12px;
  padding: 4px 0;
  line-height: 1.5;
  border-bottom: 1px dashed var(--border, #e5e0d1);
}
.ho-med-item:last-child { border-bottom: none; }
.ho-med-patient {
  color: var(--sage-700, #1f4d38);
  cursor: pointer;
  font-weight: 500;
}
.ho-med-patient:hover { text-decoration: underline; }
.ho-med-note {
  font-size: 11px;
  color: var(--ink-3, #6f7770);
  margin-top: 2px;
  font-style: italic;
}

/* Appointments */
.ho-appt-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.ho-appt-item.ho-appt-tomorrow {
  background: var(--accent-bg, #fff8e8);
  border-left: 3px solid var(--accent, #b88240);
}
.ho-appt-time {
  text-align: center;
  min-width: 60px;
}
.ho-appt-date {
  font-size: 11px;
  color: var(--ink-3, #6f7770);
}
.ho-appt-hour {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #1a221c);
  font-family: 'IBM Plex Mono', monospace;
}
.ho-appt-body { flex: 1; }
.ho-appt-patient {
  font-size: 14px;
  cursor: pointer;
  color: var(--ink, #1a221c);
}
.ho-appt-patient:hover { color: var(--sage-700, #1f4d38); }
.ho-appt-meta {
  font-size: 12px;
  color: var(--ink-3, #6f7770);
  margin-top: 2px;
}
.ho-appt-purpose {
  font-size: 12px;
  color: var(--ink-2, #333a35);
  margin-top: 4px;
}
.ho-appt-prep {
  background: var(--danger-bg, #fef2f0);
  border-left: 3px solid var(--danger, #c0392b);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 6px;
}
.ho-appt-prep-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger, #c0392b);
}
.ho-appt-prep ul {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12px;
}
.ho-appt-transport {
  font-size: 11px;
  color: var(--ink-3, #6f7770);
  margin-top: 4px;
  background: var(--bg, #faf8f3);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Handover notes (editable) */
.ho-note-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e0d1);
}
.ho-note-patient {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.ho-note-patient:hover strong { color: var(--sage-700, #1f4d38); }
.ho-note-edit-btn {
  background: transparent;
  border: 1px solid var(--border, #e5e0d1);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  margin-left: auto;
}
.ho-note-edit-btn:hover {
  background: var(--surface-2, #f4f1ea);
}
.ho-note-text {
  font-size: 12px;
  color: var(--ink-2, #333a35);
  margin-top: 6px;
  line-height: 1.6;
  padding: 8px 12px;
  background: var(--bg, #faf8f3);
  border-radius: 6px;
  white-space: pre-wrap;
}

/* Disclaimer */
.ho-disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--accent-bg, #fff3d4);
  border: 1px solid var(--accent, #b88240);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-2, #333a35);
  text-align: center;
}

/* Mobile */
@media (max-width: 768px) {
  .ho-header { flex-direction: column; }
  .ho-actions { width: 100%; justify-content: stretch; }
  .ho-actions > * { flex: 1; }
  .ho-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ho-grid {
    grid-template-columns: 1fr;
  }
  .ho-section-body { max-height: none; }

  /* [Step B-2a · 20 พ.ค. 69] Handover bar mobile — stack vertically */
  .patient-handover-bar {
    flex-direction: column;
    align-items: stretch !important;
  }
  .patient-handover-bar > div {
    width: 100%;
    justify-content: space-between;
  }
  .patient-handover-bar > div:last-child {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
  }
  .patient-handover-bar button {
    flex: 0 0 auto;
  }
  /* Mobile — admin menu fullwidth from right edge */
  #patHandoverAdminMenu {
    right: 0 !important;
    min-width: 220px !important;
  }
}

/* [Step B-2a] Admin menu item hover */
.patient-handover-menu-item:hover {
  background: var(--surface2, #f5f3ee) !important;
}

/* [Fix · 20 พ.ค. 69] Disabled state สำหรับปุ่ม handover (override inline background) */
#patHandoverCloseBtn:disabled,
#patHandoverReceiveBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
#patHandoverCloseBtn:disabled:hover,
#patHandoverReceiveBtn:disabled:hover {
  opacity: 0.45;
}

/* Print */
@media print {
  .ho-actions, .ho-note-edit-btn,
  .sidebar, .topbar, #fab-container, .bottom-tab-bar { display: none !important; }
  .ho-section-body { max-height: none; overflow: visible; }
  .ho-section { break-inside: avoid; }
  .ho-grid { grid-template-columns: 1fr 1fr !important; }
}