/* ==========================================================================
   Smong Care — สไตล์ชีตหลัก

   ไฟล์เดียวเกือบสามพันบรรทัด ไม่แตกเป็นหลายไฟล์โดยตั้งใจ — โปรเจกต์นี้ไม่มี build step
   การแยกจึงหมายถึงการเพิ่ม <link> หลายอัน (หรือ @import ที่บล็อกการเรนเดอร์)
   โดยไม่ได้อะไรกลับมา ปัญหาจริงคือหาโค้ดไม่เจอ ซึ่งแก้ด้วยสารบัญนี้

   ค้นหาหมวดด้วยการ search คำว่า  [ชื่อหมวด]  ตามรายการนี้

    1. ตัวแปรธีมและ Reset
    2. Container และ Layout พื้นฐาน
    3. Header และแบรนด์
    4. เมนูหลัก (Desktop) และเมนูล่าง (Mobile)
    5. ปุ่มสลับธีม และปุ่มแจ้งเตือนเคสฉุกเฉิน
    6. ป้ายผู้ใช้และเมนูดรอปดาวน์
    7. Sidebar บนมือถือ
    8. การ์ดสรุปตัวเลข (Stat Cards)
    9. รายการในเมนูดรอปดาวน์ และปุ่มใน Header
   10. แท็บผู้ดูแลระบบ
   11. กริดหน้าและการ์ด
   12. แถบค้นหา/กรอง และปุ่มแบบยืดหยุ่น
   13. ตาราง (ผู้ป่วย / ผู้ใช้ / บันทึกกิจกรรม)
   14. ตารางบนจอมือถือ
   15. ป้ายระดับความเสี่ยงและบทบาท
   16. หน้ารายละเอียดผู้ป่วย
   17. โมดัล
   18. ปุ่ม
   19. ฟอร์มและสวิตช์
   20. ตัวแบ่งส่วน หัวข้อ และการแบ่งหน้า
   21. Toast แจ้งเตือน
   22. Skeleton ระหว่างโหลด
   23. นำเข้า CSV
   24. พิมพ์เป็น PDF (@media print)
   ========================================================================== */


/* ==========================================================================
   [ตัวแปรธีมและ Reset]
   ตัวแปรสีทั้งระบบ (:root) ธีมสว่าง box-sizing และ body
   ========================================================================== */
:root {
    --primary: #14b8a6;
    --primary-hover: #0d9488;
    --bg-gradient: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e1b4b 100%);
    --card-bg: rgba(15, 23, 42, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-light: #f8fafc;
    --text-muted: #94a3b8;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
    --info: #06b6d4;
    --panel-bg: rgba(2, 6, 23, 0.3);
    --input-bg: rgba(2, 6, 23, 0.65);
    --input-border: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] {
    --bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(15, 23, 42, 0.08);
    --text-light: #0f172a;
    --text-muted: #475569;
    --panel-bg: rgba(241, 245, 249, 0.7);
    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.18);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Sarabun', 'Outfit', sans-serif;
    /* TOR ข้อ 4.6.2 "ตัวอักษรไม่น้อยกว่า 16 px (1 rem) สำหรับหน้าจอผู้ใช้งาน
       ที่เป็นเจ้าหน้าที่" — ประกาศไว้ชัดเจนแทนที่จะพึ่งค่า default ของเบราว์เซอร์
       ซึ่งบังเอิญเป็น 16px อยู่แล้ว เพราะผู้ใช้ตั้งค่า default เองได้และหน้า
       ตรวจรับต้องพิสูจน์ได้จากซอร์สโค้ด ไม่ใช่จากค่าที่เบราว์เซอร์แถมมาให้
       ใช้ rem ไม่ใช่ px เพื่อไม่ทำลายการซูมของผู้ใช้ที่ตั้งฟอนต์ใหญ่ไว้เอง */
    font-size: 1rem;
    line-height: 1.6;
    background: var(--bg-gradient);
    min-height: 100vh;
    color: var(--text-light);
    padding: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

@media (min-width: 600px) {
    body {
        padding: 20px;
    }
}


/* ==========================================================================
   [Container และ Layout พื้นฐาน]
   ความกว้างหน้า ระยะขอบ และอนิเมชัน fadeIn ที่ใช้ร่วม
   ========================================================================== */
.container {
    width: 100%;
    margin: 0 auto;
    animation: fadeIn 0.6s ease-out;
}

/* opacity only, no transform: a non-"none" transform on .container — even
   just during this animation's 0.6s — would make it the containing block for
   any position:fixed descendant (the mobile bottom nav, the drawer), pinning
   them to .container's box instead of the viewport for that whole window. */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Premium Header */

/* ==========================================================================
   [Header และแบรนด์]
   แถบบนสุด โลโก้ ชื่อระบบ และการยุบ/ขยายตามความกว้างจอ
   ========================================================================== */
header {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
    position: relative;
}

html[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        margin-bottom: 24px;
        /* กันไว้ไม่ให้ล้นจอเด็ดขาด: .brand เป็น flex-shrink: 0 แล้ว ถ้าแถวแคบจน
           brand + เมนู + กล่องผู้ใช้ ใส่บรรทัดเดียวไม่พอ ให้ตกบรรทัดแทนที่จะดัน
           จนเกิด horizontal scroll ทั้งหน้า (เคยเกิดจริงในช่วง 768–880px) */
        flex-wrap: wrap;
    }
}

/* ตัดชื่อผู้ใช้ออกก่อนเป็นอย่างแรกเมื่อจอแคบ — เป็นชิ้นที่กว้างที่สุดในกล่องขวา
   (~94px) และยังเห็นซ้ำอยู่ในเมนูที่กดเปิดอยู่แล้ว ป้ายบทบาท พยาบาล/แอดมิน/อสม.
   ยังอยู่ครบ แค่นี้ก็ทำให้ช่วง 860–1023px กลับมาอยู่บรรทัดเดียวได้ */
@media (min-width: 768px) and (max-width: 1023px) {
    .user-badge .name {
        display: none;
    }
}

/* ต่ำกว่า 860px แม้ซ่อนชื่อแล้วก็ยังไม่พอ (ที่ 820px ต้องการ ~726px แต่มีพื้นที่
   ~705px) แทนที่จะปล่อยให้ตกบรรทัดแบบมั่ว จัดเป็นสองแถวที่ดูตั้งใจ:
   แถวบน โลโก้ ... กล่องผู้ใช้ / แถวล่าง เมนูกึ่งกลาง */
@media (min-width: 768px) and (max-width: 859px) {
    .header-top {
        order: 1;
    }
    .user-nav {
        order: 2;
    }
    .main-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ต้นตอจริงของหัวเว็บที่ดูอึดอัด: width: 100% ด้านบนตั้งไว้สำหรับมือถือ (ที่ header
   เป็น column) แต่ไม่เคยถูกรีเซ็ตตอน header กลายเป็น row บน desktop กล่องนี้จึง
   ขอพื้นที่เต็มแถวแล้วยอมถูกบีบลงมาเรื่อยๆ จนโลโก้เหลือ 158px และชื่อตกบรรทัด
   บน desktop ให้กว้างเท่าเนื้อหาจริงและไม่ยุบ */
@media (min-width: 768px) {
    .header-top {
        width: auto;
        flex-shrink: 0;
    }
}

/* flex-shrink: 0 — .header-top เป็น flex ที่มี .main-nav เป็นเพื่อนบ้าน ถ้าไม่กัน
   ไว้ .brand จะเป็นตัวที่ยอมยุบให้เมนูก่อนเสมอ เคยยุบจนเหลือ 158px แล้วชื่อกับ
   คำโปรยตกบรรทัดจนโลโก้สูง 131px */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo {
    font-size: 2.3rem;
    filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.4));
}

@media (min-width: 768px) {
    .brand-logo {
        font-size: 2.6rem;
    }
}

.brand-text h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
    .brand-text h1 {
        font-size: 1.75rem;
    }
}

.brand-text p {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* คำโปรยยาว 40+ ตัวอักษร ถ้าปล่อยให้แสดงบนจอแคบจะดัน .brand กว้างจนเบียดเมนู
   ซ่อนต่ำกว่า 1200px แทน — ชื่อ "Smong Care" ยังอยู่ครบ ไม่เสียการจดจำแบรนด์ */
@media (max-width: 1199px) {
    .brand-text p {
        display: none !important;
    }
}

.user-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

@media (max-width: 767px) {
    .actions-area.desktop-actions {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .actions-area.mobile-actions {
        display: none !important;
    }
    .user-nav {
        width: auto;
        border-top: none;
        padding-top: 0;
        gap: 20px;
    }
}

.actions-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Top nav tabs (desktop) — ผู้ป่วย/แผนที่/ผู้ใช้งาน/ประวัติกิจกรรม pulled out
   of the dropdown so they're one click away; only account-related actions
   (profile, password, logout) stay in the dropdown on desktop. */

/* ==========================================================================
   [เมนูหลัก (Desktop) และเมนูล่าง (Mobile)]
   main-nav บนจอใหญ่ สลับเป็น mobile-bottom-nav บนจอเล็ก
   ========================================================================== */
.main-nav {
    display: none;
}

@media (min-width: 768px) {
    .main-nav {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

.main-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 24px !important;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.main-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border-radius: 24px !important;
}

html[data-theme="light"] .main-nav-item:hover {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 24px !important;
}

.main-nav-item.active {
    background: rgba(20, 184, 166, 0.18) !important;
    color: var(--primary);
    border-radius: 24px !important;
}

.main-nav-divider {
    width: 1px;
    align-self: stretch;
    margin: 4px 2px;
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .main-nav-divider {
    background: rgba(15, 23, 42, 0.1);
}

/* เดิมมีกฎซ่อน .dropdown-admin-mobile-only บน desktop เพราะเมนูจัดการระบบ
   ถูกวางซ้ำไว้ใน .main-nav ด้วย — ตอนนี้ .main-nav เหลือแค่เมนูใช้ประจำวัน
   3 ตัว และ dropdown เป็นที่อยู่เดียวของเมนูจัดการระบบทุกขนาดจอ จึงไม่มีอะไร
   ให้ซ่อนอีก (คลาสนั้นถูกถอดออกจาก header.php แล้ว) */

/* Mobile bottom nav — same destinations, reachable in one tap instead of
   opening the header dropdown first. Desktop already has .main-nav. */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    body {
        padding-bottom: 76px;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        background: #0f172a;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }

    html[data-theme="light"] .mobile-bottom-nav {
        background: #ffffff;
        border-top-color: rgba(15, 23, 42, 0.08);
    }
}

.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    font-family: inherit;
    /* TOR 4.6.2 — เดิม 0.65rem (10.4px) เล็กเกินไปสำหรับป้ายเมนูที่ต้องอ่านจริง
       บนมือถือ ปรับเป็น 0.85rem (13.6px) ซึ่งเป็นค่าที่ใหญ่ที่สุดที่ยังไม่ทำให้
       ป้าย 4 เมนูตัดบรรทัดบนจอ 360px ตามเกณฑ์กว้างต่ำสุดในข้อเดียวกัน */
    font-size: 0.85rem;
    cursor: pointer;
}

.mobile-bottom-nav-item.active {
    color: var(--primary);
}


/* ==========================================================================
   [ปุ่มสลับธีม และปุ่มแจ้งเตือนเคสฉุกเฉิน]
   รวม badge นับเคสและอนิเมชันไฟกระพริบ (TOR 4.4(1))
   ========================================================================== */
.theme-toggle-header-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.theme-icon-slot svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 768px) {
    .theme-toggle-header-btn {
        width: 48px;
        height: 48px;
    }
}

.emergency-nav-btn {
    position: relative;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--text-light);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    font-size: 1.25rem;
    padding: 0;
}

@media (min-width: 768px) {
    .emergency-nav-btn {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }
}

.emergency-nav-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px) scale(1.05);
}

.emergency-nav-btn.has-alert {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    animation: pulse-red-glow 1.6s infinite;
}

.emergency-nav-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #ffffff;
    /* TOR 4.6.2 — เดิม 0.72rem (11.5px) ขยายเป็น 0.85rem (13.6px) พร้อมขยาย
       วงกลมจาก 20px เป็น 22px ให้เลขไม่ล้นขอบ ตัวเลขนี้เป็นจำนวนเคสฉุกเฉิน
       ที่ค้างอยู่ตามข้อ 4.2 กลุ่มที่ 2 ข้อ 3 อ่านผิดแล้วเสียหายจริง */
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--card-bg, #0f172a);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    line-height: 1;
}

@keyframes pulse-red-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7), 0 4px 12px rgba(239, 68, 68, 0.2);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0), 0 4px 12px rgba(239, 68, 68, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 4px 12px rgba(239, 68, 68, 0.2);
    }
}


/* ==========================================================================
   [ป้ายผู้ใช้และเมนูดรอปดาวน์]
   user-badge, dropdown trigger/menu และข้อมูลผู้ใช้ในเมนู
   ========================================================================== */
.user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.user-badge .name {
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .user-badge .name {
        font-size: 1.05rem;
    }
    .user-badge {
        gap: 14px;
    }
}

.user-badge .role {
    font-size: 0.8rem;
    background: var(--primary);
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* User Profile Dropdown Styles */
.user-dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

@media (min-width: 768px) {
    .user-dropdown-container {
        width: auto;
    }
}

/* The top user-badge dropdown is replaced by the mobile bottom nav's "เมนู"
   button (opens the same menu as a slide-in sidebar, see .user-dropdown-menu
   mobile styles below) — the trigger itself has no reason to show up top. */
@media (max-width: 767px) {
    .user-dropdown-trigger {
        display: none !important;
    }
    .user-nav {
        border-top: none;
        padding-top: 0;
    }
}

.user-dropdown-trigger {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 14px;
    transition: background 0.2s ease;
    outline: none;
    color: inherit;
    font-family: inherit;
    width: 100%;
}

@media (min-width: 768px) {
    .user-dropdown-trigger {
        background: transparent;
        border: none;
        padding: 4px 8px;
        border-radius: 12px;
        width: auto;
        justify-content: flex-start;
    }
}

.user-dropdown-trigger .role-badge {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-dropdown-trigger .role-badge .role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.user-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .user-dropdown-trigger:hover {
    background: rgba(15, 23, 42, 0.05);
}

.dropdown-chevron {
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.user-dropdown-container.open .dropdown-chevron {
    transform: rotate(180deg);
}

/* .user-dropdown-menu / .mobile-sidebar-overlay live as siblings of <header>
   in the markup (not nested inside it): header has backdrop-filter, which
   makes it the containing block for any position:fixed descendant and would
   clip a fixed child to header's own box instead of the viewport. Visibility
   is driven by body.user-menu-open (toggled in core.js) rather than a
   .open class on an ancestor, since these elements no longer live inside
   .user-dropdown-container. On desktop, core.js sets top/left inline via
   getBoundingClientRect() to anchor the menu under .user-dropdown-trigger;
   on mobile it becomes a full-height slide-in sidebar (see below). */
.user-dropdown-menu {
    position: fixed;
    z-index: 1000;
    min-width: 240px;
    width: 260px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    display: none;
    flex-direction: column;
    gap: 6px;
    animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] .user-dropdown-menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

body.user-menu-open .user-dropdown-menu {
    display: flex;
}

.dropdown-user-info {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 8px;
}

/* On desktop screens (> 767px), hide user info box inside dropdown menu as name is already displayed in navbar trigger */
@media (min-width: 768px) {
    .dropdown-user-info,
    .dropdown-user-info + .dropdown-divider {
        display: none !important;
    }
}

html[data-theme="light"] .dropdown-user-info {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.dropdown-user-info .user-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    text-align: left;
}

.dropdown-user-info .user-badge .name {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-light);
    white-space: normal;
    word-break: break-word;
    text-align: left;
    line-height: 1.3;
}

.dropdown-user-info .role-badge {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-user-info .role-badge .role-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   [Sidebar บนมือถือ]
   เมนูสไลด์จากข้างพร้อม overlay สำหรับจอแคบ
   ========================================================================== */
.mobile-sidebar-overlay {
    display: none;
}

.mobile-sidebar-header {
    display: none;
}

/* Below 768px, the menu triggered by the bottom nav's "เมนู" button becomes a
   full-height slide-in sidebar instead of a small dropdown anchored under a
   (now hidden) top trigger. */
@media (max-width: 767px) {
    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1100;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    body.user-menu-open .mobile-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }

    .user-dropdown-menu {
        display: flex !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        bottom: 0;
        width: 82%;
        max-width: 320px;
        min-width: 0;
        margin: 0;
        border-radius: 20px 0 0 20px;
        box-shadow: -12px 0 36px rgba(0, 0, 0, 0.6);
        overflow-y: auto;
        z-index: 1200;
        /* Past 100%, not exactly 100%: the box-shadow's blur radius reaches
           beyond the element's own box, so a plain translateX(100%) still
           leaves a sliver of shadow visible at the screen edge while closed. */
        transform: translateX(calc(100% + 60px));
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

        /* ต้องยกเลิก animation ของกฎฐาน (dropdownFade) บนมือถือ ไม่งั้น sidebar
           จะแวบขึ้นมาทุกครั้งที่โหลดหน้าใหม่:
           บนมือถือกล่องนี้เป็น display: flex ตลอดเวลา (ซ่อนด้วยการเลื่อนออกนอกจอ
           ไม่ใช่ display: none) dropdownFade จึงถูกเล่นทุกครั้งที่หน้าโหลด และ
           keyframes มี transform: translateY(...) อยู่ด้วย — ค่า transform จาก
           animation ชนะค่า transform ปกติเสมอตามลำดับ cascade กล่องจึงถูกดึงกลับ
           มาที่ translateX(0) ตลอด 0.2 วินาทีที่ animation ทำงาน แล้วเด้งกลับออก
           นอกจอเมื่อจบ = อาการแวบที่เห็น
           การเลื่อนเข้า-ออกบนมือถือใช้ transition ด้านบนอยู่แล้ว ไม่ต้องพึ่ง animation */
        animation: none;
    }

    body.user-menu-open .user-dropdown-menu {
        transform: translateX(0);
    }

    .mobile-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 8px 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--card-border);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .mobile-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        border-radius: 50%;
        color: var(--text-light);
        cursor: pointer;
    }

    body.user-menu-open {
        overflow: hidden;
    }
}

/* Summary Analytics Cards Responsive Grid (2 columns on mobile) */

/* ==========================================================================
   [การ์ดสรุปตัวเลข (Stat Cards)]
   การ์ด 4 ใบบนแดชบอร์ด กดเพื่อกรองตามระดับความเสี่ยง
   ========================================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }
}

.stat-card {
    background: var(--card-bg);
    border-radius: 18px;
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
}

.stat-card-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.stat-card-title {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-card-num {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-light);
    line-height: 1.15;
}

.stat-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .stats-grid {
        gap: 10px;
    }
    .stat-card {
        padding: 14px 10px !important;
        border-radius: 16px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .stat-card-info {
        text-align: center !important;
    }
    .stat-card-title {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    .stat-card-num {
        font-size: 2.1rem !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
    }
    .stat-card-icon {
        display: none !important;
    }
}


/* ==========================================================================
   [รายการในเมนูดรอปดาวน์ และปุ่มใน Header]
   dropdown-item, ปุ่มออกจากระบบ และปุ่มโปรไฟล์
   ========================================================================== */
@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1.02rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(20, 184, 166, 0.12);
    color: var(--primary);
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px 2px 14px;
}

.dropdown-divider {
    height: 1px;
    background: var(--card-border);
    margin: 4px 0;
}

.dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* หน้าที่กำลังเปิดอยู่ — เมนูจัดการระบบย้ายจาก .main-nav (ที่มี .active อยู่แล้ว)
   เข้ามาใน dropdown จึงต้องมีตัวบอกตำแหน่งที่นี่ด้วย ไม่งั้นเปิดเมนูมาแล้วไม่รู้ว่า
   ตัวเองอยู่หน้าไหน */
.dropdown-item.active {
    background: rgba(20, 184, 166, 0.14);
    color: var(--primary);
    font-weight: 700;
}

/* Enlarge User Dropdown Menu text & icons on mobile screens (< 600px) */
@media (max-width: 600px) {
    .user-dropdown-menu {
        padding: 12px 10px !important;
        border-radius: 20px 0 0 20px !important;
        gap: 8px !important;
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.7) !important;
    }
    .dropdown-header {
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        padding: 8px 14px 4px 14px !important;
    }
    .dropdown-item {
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        padding: 14px 18px !important;
        border-radius: 14px !important;
        gap: 14px !important;
    }
    .dropdown-item svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}
html[data-theme="light"] .theme-toggle-header-btn {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
}

.theme-toggle-header-btn:hover {
    transform: scale(1.1) rotate(15deg);
    background: rgba(20, 184, 166, 0.15);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
}

.btn-logout {
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 20px;
    color: #ef4444;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .btn-logout {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

.btn-logout:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-light);
    text-decoration: none;
    font-size: 1.15rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    outline: none;
}

html[data-theme="light"] .btn-profile {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
}

.btn-profile:hover {
    transform: scale(1.1);
    background: rgba(20, 184, 166, 0.15);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
}

/* Navigation Tabs for Admin */

/* ==========================================================================
   [แท็บผู้ดูแลระบบ]
   admin-tabs ที่ใช้ในหน้าจัดการผู้ใช้และบทเรียน
   ========================================================================== */
.admin-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding: 5px;
    background: rgba(2, 6, 23, 0.4);
    border-radius: 30px !important;
    border: 1px solid var(--card-border);
}

html[data-theme="light"] .admin-tabs {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.08);
}

.tab-btn {
    flex: 1;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 28px !important;
    transition: all 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .admin-tabs {
        flex-direction: column;
        gap: 6px;
        padding: 6px;
        border-radius: 20px !important;
    }
    .tab-btn {
        width: 100%;
        padding: 10px 14px;
        font-size: 0.95rem;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 20px !important;
    }
}

.tab-btn:hover {
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 28px !important;
}

html[data-theme="light"] .tab-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 28px !important;
}

.tab-btn.active {
    color: #0f172a;
    background: var(--primary) !important;
    border-radius: 28px !important;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

/* Layout Grid */

/* ==========================================================================
   [กริดหน้าและการ์ด]
   dashboard-grid และ .card ที่ใช้ห่อทุกบล็อกเนื้อหา
   ========================================================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 992px) {
    .dashboard-grid.patients-view {
        grid-template-columns: 1.4fr 1fr;
        gap: 24px;
    }
    .dashboard-grid.users-view {
        grid-template-columns: 1fr;
    }
}

/* Main Section Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.2rem;
    }
}


/* ==========================================================================
   [แถบค้นหา/กรอง และปุ่มแบบยืดหยุ่น]
   ช่องค้นหา ดรอปดาวน์ระดับความเสี่ยง และปุ่มที่ย่อข้อความบนจอเล็ก
   ========================================================================== */
.patient-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

@media (min-width: 768px) {
    .patient-filter-controls {
        width: auto;
    }
}

.patient-filter-controls .search-box-wrapper {
    position: relative;
    flex: 1;
    min-width: 180px;
    width: 100%;
}

@media (max-width: 767px) {
    .patient-filter-controls .search-box-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

.patient-search-input {
    padding: 12px 18px !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    min-height: 48px !important;
    border-radius: 28px !important;
    width: 100% !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .patient-search-input {
        padding: 8px 16px !important;
        font-size: 0.88rem !important;
        font-weight: normal !important;
        min-height: auto !important;
        width: 220px !important;
    }
}

.patient-subcontrols {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.user-action-buttons-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 576px) {
    .patient-subcontrols {
        width: auto;
    }
}

.patient-risk-select {
    padding: 13px 18px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    min-height: 48px !important;
    border-radius: 28px !important;
    flex: 1;
    background: var(--input-bg);
    color: var(--text-light);
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .patient-risk-select {
        flex: initial;
        width: auto !important;
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
        font-weight: normal !important;
        min-height: auto !important;
    }
}

/* Small screens: give the risk-level dropdown its own line instead of
   crowding it next to the action buttons (refresh/trash/import/add). */
@media (max-width: 767px) {
    .patient-subcontrols {
        flex-wrap: wrap;
    }

    .patient-risk-select {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Logs view: keep action select dropdown and refresh button side-by-side on the same row */
    .logs-view .patient-subcontrols {
        flex-wrap: wrap !important;
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .logs-view .patient-risk-select {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 120px !important;
    }
    .logs-view .btn-refresh-responsive {
        flex: 0 0 auto !important;
    }
}

.log-date-input {
    width: auto !important;
    min-width: 140px !important;
    color-scheme: dark;
}

html[data-theme="light"] .log-date-input {
    color-scheme: light;
}

@media (max-width: 767px) {
    .log-date-input {
        min-width: 130px !important;
    }
}

.btn-refresh-responsive {
    padding: 13px 20px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    border-radius: 28px !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (min-width: 576px) {
    .btn-refresh-responsive {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        font-weight: normal !important;
        min-height: auto !important;
        border-radius: 24px !important;
    }
}

.btn-add-user-responsive {
    padding: 13px 20px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    border-radius: 28px !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    margin: 0 !important;
}

@media (min-width: 576px) {
    .btn-add-user-responsive {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        font-weight: normal !important;
        min-height: auto !important;
        border-radius: 24px !important;
    }
}

/* Mobile Icon-Only Toggle Trash Button */
@media (max-width: 600px) {
    #btn-toggle-trash #trash-btn-text {
        display: none !important;
    }
    #btn-toggle-trash {
        padding: 12px 16px !important;
        font-size: 1.25rem !important;
        min-height: 48px !important;
        min-width: 48px !important;
        border-radius: 28px !important;
        justify-content: center !important;
    }
}

/* Patient Table Styles */

/* ==========================================================================
   [ตาราง (ผู้ป่วย / ผู้ใช้ / บันทึกกิจกรรม)]
   หัวตาราง แถว hover ป้าย HN และดรอปดาวน์แก้ อสม. แบบ inline
   ========================================================================== */
.patient-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.patient-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.patient-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .patient-table th {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.patient-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

html[data-theme="light"] .patient-table td {
    border-bottom-color: rgba(0, 0, 0, 0.03);
}

.patient-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] .patient-table tr:hover td {
    background: rgba(15, 23, 42, 0.02);
}

/* Caregiver reassignment cell — clickable only on desktop (see
   startCaregiverInlineEdit's width check in patients.js), so the hover
   affordance only shows there too. */
.caregiver-edit-hint {
    display: none;
}

.caregiver-inline-select {
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
    min-width: 160px;
    max-width: 220px;
}

@media (min-width: 768px) {
    .caregiver-cell-display {
        cursor: pointer;
        border-bottom: 1px dashed var(--text-muted);
        padding-bottom: 1px;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

    .caregiver-cell-display:hover {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

    .caregiver-edit-hint {
        display: inline;
        opacity: 0;
        margin-left: 2px;
        font-size: 0.8em;
        transition: opacity 0.15s ease;
    }

    .caregiver-cell-display:hover .caregiver-edit-hint {
        opacity: 0.8;
    }
}

.hn-badge {
    font-family: 'Outfit', sans-serif;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-light);
}

html[data-theme="light"] .hn-badge {
    background: rgba(15, 23, 42, 0.06);
}

/* Log Table Column Width Specifications */
.log-table th:nth-child(1), .log-table td:nth-child(1) {
    width: 165px;
    white-space: nowrap;
}
.log-table th:nth-child(2), .log-table td:nth-child(2) {
    width: 140px;
    white-space: nowrap;
}
.log-table th:nth-child(3), .log-table td:nth-child(3) {
    width: 130px;
    white-space: nowrap;
}
.log-table th:nth-child(5), .log-table td:nth-child(5) {
    width: 120px;
    white-space: nowrap;
}

/* HN caption under the patient name on mobile (see .patient-hn-mobile below) —
   hidden by default since tablet/desktop already show HN as its own column. */
.patient-hn-mobile {
    display: none;
}

/* Mobile View Compact List Layout */

/* ==========================================================================
   [ตารางบนจอมือถือ]
   ซ่อน thead แล้วเปลี่ยนแต่ละแถวเป็นการ์ดที่มี label กำกับทีละช่อง
   ========================================================================== */
@media (max-width: 640px) {
    .patient-table thead, .user-table thead, .log-table thead {
        display: none;
    }
    .patient-table tr, .user-table tr, .log-table tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 8px;
        min-height: 56px; /* comfortable tap target for the whole row */
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 10px 14px;
        background: rgba(2, 6, 23, 0.4);
        cursor: pointer;
        transition: background 0.2s ease;
    }
    html[data-theme="light"] .patient-table tr, html[data-theme="light"] .user-table tr, html[data-theme="light"] .log-table tr {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(0, 0, 0, 0.08);
    }
    .patient-table tr:hover, .user-table tr:hover, .log-table tr:hover {
        background: rgba(20, 184, 166, 0.1);
    }
    /* Risk text label restored at a compact size (was display:none) — a
       color-only dot isn't readable for colorblind users and orange/red are
       easy to confuse at a glance. */
    .patient-table .risk-badge .risk-text-label {
        display: inline !important;
        /* TOR 4.6.2 — เดิม 0.66rem (10.6px) ป้ายระดับความเสี่ยงเป็นข้อมูลทาง
           คลินิกที่ต้องอ่านออกจริง ไม่ใช่ของประดับ ปรับเป็น 0.85rem (13.6px) */
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    .patient-table .risk-badge {
        padding: 4px 10px !important;
        border-radius: 20px !important;
        font-size: 1rem !important;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        justify-content: center;
        white-space: nowrap;
    }
    .patient-table td, .user-table td, .log-table td {
        display: block;
        padding: 0;
        border: none;
        font-size: 0.95rem;
        text-align: left;
        white-space: nowrap;
    }
    .patient-table td::before, .user-table td::before, .log-table td::before {
        display: none !important;
    }
    .patient-table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px 12px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
    }
    /* Age, Caregiver, and Next Visit stay hidden on mobile */
    .patient-table td:nth-child(1), /* HN standalone column */
    .patient-table td:nth-child(3), /* Age */
    .patient-table td:nth-child(6), /* Caregiver */
    .patient-table td:nth-child(7)  /* Next Visit */ {
        display: none !important;
    }
    .patient-table td:nth-child(2) { /* Name — Row 1 Left */
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 4px 0 !important;
    }
    .patient-table td:nth-child(5) { /* Risk Badge — Row 1 Right */
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    .patient-table td:nth-child(4) { /* Phone Number — Row 2 on NEW ROW */
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 4px !important;
        padding-top: 6px !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
        display: block !important;
    }
    html[data-theme="light"] .patient-table td:nth-child(4) {
        border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
    .patient-table td:nth-child(4) a,
    .patient-table td:nth-child(4) span {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        display: inline-block !important;
    }
    .patient-table td:nth-child(2) a {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .patient-name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        font-size: 1.22rem;
        font-weight: 700;
    }
    .patient-table .patient-hn-mobile {
        display: block;
        font-size: 0.76rem;
        font-weight: 500;
        color: var(--text-muted);
        letter-spacing: 0.02em;
    }
    /* Enlarge tap targets on the row-ending action button and the name/user
       link — both measured under 40px tall in testing, below the ~44px
       minimum recommended for touch. */
    .patient-table td:last-child button,
    .user-table td:last-child button {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 8px 14px !important;
    }
    /* 3-row card for mobile:
       Row 1: Full Name alone on its own line
       Row 2: Phone number, Role badge, Patients count (vhv), LINE status badge
       Row 3: Last login timestamp on a dashed border line */
    .user-table tr {
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 8px !important;
    }
    .user-table td:nth-child(1), /* ID */
    .user-table td:nth-child(4)  /* Username */ {
        display: none !important;
    }
    .user-table td:nth-child(2) { /* Name — row 1, full width on its own */
        order: 1;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }
    .user-table td:nth-child(2) a,
    .user-table td:nth-child(2) span {
        display: inline-flex !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Row 2: Phone alone on its own line */
    .user-table td:nth-child(3) {
        order: 2;
        display: block !important;
        flex: 0 0 100% !important;
        font-size: 1.15rem !important;
        font-weight: 600 !important;
        padding: 2px 0 !important;
        text-align: left !important;
    }
    .user-table td:nth-child(3) a,
    .user-table td:nth-child(3) span {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 1.15rem !important;
        font-weight: 600 !important;
    }

    /* Row 3: Role + Patient count + LINE badge on a new line together */
    .user-table td:nth-child(5),  /* Role */
    .user-table td:nth-child(6),  /* Patients-in-care count (vhv only) */
    .user-table td:nth-child(7)   /* LINE Status Badge */ {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        flex-shrink: 0;
    }
    .user-table td:nth-child(5) { order: 3; }
    .user-table td:nth-child(6) { order: 4; }
    .user-table td:nth-child(7) { order: 5; margin-left: auto; }

    /* Row 3: Last login, full width on its own */
    .user-table td:nth-child(8) {
        order: 6;
        display: block !important;
        flex: 0 0 100% !important;
        font-size: 0.78rem !important;
        color: var(--text-muted);
        padding-top: 6px !important;
        margin-top: 2px;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        text-align: left !important;
    }
    .user-table td:nth-child(8)::before {
        content: "🕒 เข้าใช้งานล่าสุด: ";
        font-weight: 500;
        color: var(--text-muted);
    }
    html[data-theme="light"] .user-table td:nth-child(8) {
        border-top-color: rgba(0, 0, 0, 0.08);
    }

    /* Log Table Mobile Layout Improvements (2-Row Compact Card) */
    .log-table tr {
        flex-wrap: wrap !important;
        gap: 6px 10px !important;
        padding: 12px 14px !important;
    }
    .log-table td:nth-child(3), /* Action Badge - Hide on mobile */
    .log-table td:nth-child(5)  /* IP Address - Hide on mobile */ {
        display: none !important;
    }
    .log-table td:nth-child(2) { /* Username - Row 1 Left */
        order: 1;
        width: auto !important;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--primary);
    }
    .log-table td:nth-child(1) { /* Date/time - Row 1 Right */
        order: 2;
        display: block;
        width: auto !important;
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-left: auto;
    }
    .log-table td:nth-child(4) { /* Details - Row 2 Full Width */
        order: 4;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word;
        font-size: 0.88rem;
        color: var(--text-light);
        padding-top: 6px;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        margin-top: 4px;
    }
    html[data-theme="light"] .log-table td:nth-child(4) {
        border-top-color: rgba(0, 0, 0, 0.05);
    }

    /* Show button text labels on mobile screens & distribute buttons evenly */
    .user-action-buttons-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: 6px;
    }
    .user-action-buttons-group > :only-child {
        grid-column: 1 / -1;
    }
    .user-action-buttons-group .btn-add-user-responsive,
    .user-action-buttons-group .btn-refresh-responsive {
        width: 100% !important;
        flex: initial !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        border-radius: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    .btn-add-user-responsive .btn-text-label {
        display: inline-block !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
    .user-table .role-badge .role-text-label {
        display: inline !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    .user-table .role-badge {
        padding: 4px 10px !important;
        font-size: 0.88rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

/* Risk & Role Badges */

/* ==========================================================================
   [ป้ายระดับความเสี่ยงและบทบาท]
   risk-badge (เขียว/ส้ม/แดง) และ role-badge (admin/nurse/vhv/doctor)
   ========================================================================== */
.risk-badge, .role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.risk-red { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.risk-orange { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.risk-green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }

.role-admin { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.role-nurse { background: rgba(6, 182, 212, 0.15); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.3); }
.role-vhv { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.role-doctor { background: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }
/* ผู้จัดการรายกรณี (TOR 4.2 กลุ่มที่ 4) — สีฟ้าครามให้ต่างจากพยาบาล (เขียว)
   และแพทย์ (ม่วง) ชัดเจน เพราะเป็นบทบาทที่เห็นข้อมูลได้เท่ากันแต่แก้ไม่ได้ */
.role-cm { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }

/* Detail Sidebar Section */

/* ==========================================================================
   [หน้ารายละเอียดผู้ป่วย]
   โปรไฟล์ ข้อมูลติดต่อ และการ์ดผลประเมิน/การเยี่ยม
   ========================================================================== */
.detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.detail-placeholder .icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.patient-profile {
    animation: fadeIn 0.4s ease-out;
}

.profile-header {
    margin-bottom: 16px;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .profile-name {
        font-size: 1.4rem;
    }
}

.profile-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.profile-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: var(--panel-bg);
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.3s ease;
}

html[data-theme="light"] .profile-details {
    border-color: rgba(0, 0, 0, 0.03);
}

@media (min-width: 480px) {
    .profile-details {
        grid-template-columns: 1fr 1fr;
        padding: 16px;
        gap: 16px;
        margin-bottom: 24px;
    }
}

.profile-details div {
    display: flex;
    flex-direction: column;
}

.profile-details label {
    /* TOR 4.6.2 — เดิม 0.7rem (11.2px) ต่ำกว่าขั้นต่ำ 12px ของข้อความประกอบ */
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.profile-details span {
    font-weight: 500;
    font-size: 0.9rem;
}

.assessment-list-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[data-theme="light"] .assessment-list-title {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.assessment-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

html[data-theme="light"] .assessment-card {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 0, 0, 0.04);
}

.assessment-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.assessment-date {
    font-weight: 600;
    color: var(--info);
}

.assessment-type {
    /* TOR 4.6.2 — เดิม 0.7rem (11.2px) ต่ำกว่าขั้นต่ำ 12px ของข้อความประกอบ */
    font-size: 0.8rem;
    background: rgba(20, 184, 166, 0.1);
    color: var(--primary);
    padding: 1px 6px;
    border-radius: 4px;
}

.assessment-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.score-pill {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

html[data-theme="light"] .score-pill {
    background: rgba(15, 23, 42, 0.05);
}

.score-val {
    font-weight: 600;
    color: var(--primary);
}

.assessment-notes {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.user-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
}

/* Modal Box Styles */

/* ==========================================================================
   [โมดัล]
   โครงโมดัลทั้งหมด หัว/ตัว/ปุ่ม และการปรับบนจอเล็ก
   ========================================================================== */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

/* These are opened from a button inside #patient-detail-modal while it
   stays open behind them (openPatientDetailModal is re-called on success to
   refresh it) — every .modal shares the same z-index above, so which one
   paints on top otherwise depends on DOM order in modals.php, which is
   fragile (whoever adds the next modal after #patient-detail-modal in the
   markup would silently break this again). Pin these above the base 1000
   explicitly instead of relying on source order.

   #record-consent-modal was exactly the case this comment warned about: it
   was added to modals.php ABOVE #patient-detail-modal without being listed
   here, so the detail modal painted over it and the consent form appeared
   to open "behind" the patient popup. Add any new detail-modal child here. */
#add-assessment-modal,
#add-visit-modal,
#invite-family-modal,
#record-consent-modal,
#report-emergency-modal,
#edit-patient-modal,
#edit-user-modal,
#import-patients-modal,
#import-users-modal {
    z-index: 1020 !important;
}

/* Confirmation and sub-action popups that can open on top of edit or detail modals */
#unlink-line-confirm-modal,
#unlock-confirm-modal,
#suspend-confirm-modal,
#delete-patient-confirm-modal,
#logout-confirm-modal {
    z-index: 1040 !important;
}


.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    text-align: left;
}

@keyframes scaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[data-theme="light"] .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close-btn:hover {
    color: var(--text-light);
}

.modal-body {
    padding: 24px;
    max-height: 80vh;
    overflow-y: auto;
}

/* Enlarge Modal Action Buttons (Back, Register, Save) */
.modal-body .btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}

.modal-body .btn-group .btn {
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 28px !important;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-body .btn-group .btn-primary {
    flex: 1.4;
    font-size: 1.02rem;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}

.modal-body .btn-group .btn-secondary {
    flex: 1;
}

@media (max-width: 600px) {
    .modal-body .btn-group {
        margin-top: 20px;
    }
    /* Specificity note: the "force 1 column" rule below (.modal-body
       div[style*="grid-template-columns"]:not(.keep-2col)) also matches
       every confirm/cancel modal's btn-group (logout, unlock, delete,
       restore, etc.) and sets gap:0 !important at specificity (0,3,1) —
       higher than a plain ".modal-body .btn-group" rule (0,2,0), so that
       always won even with !important here, leaving the stacked Cancel/
       Confirm buttons touching with no gap between them. This selector
       matches ancestors .modal-content + .modal-body explicitly to reach
       (0,4,1) and reliably beat it regardless of source order. */
    .modal-content .modal-body div.btn-group[style*="grid-template-columns"] {
        gap: 16px !important;
    }
    .modal-body .btn-group .btn {
        padding: 13px 16px !important;
        font-size: 1rem !important;
        min-height: 48px !important;
        border-radius: 28px !important;
    }
}

/* Responsive Modal Grids: Force 1 input field per row on mobile screens (< 600px), except keep-2col */
@media (max-width: 600px) {
    .modal-body form div[style*="grid-template-columns"]:not(.keep-2col):not(.keep-2col-equal),
    .modal-body div[style*="grid-template-columns"]:not(.keep-2col):not(.keep-2col-equal),
    .form-row-grid:not(.keep-2col):not(.keep-2col-equal) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .keep-2col {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr !important;
        gap: 10px !important;
    }
    .keep-2col-equal {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .user-detail-boxes-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .user-detail-box {
        padding: 10px 12px !important;
        gap: 3px !important;
    }
    .user-detail-box-label {
        font-size: 0.78rem !important;
    }
    .user-detail-box-val {
        font-size: 0.88rem !important;
    }
    .modal-body {
        padding: 20px !important;
    }
    .modal {
        padding: 10px !important;
    }
    .modal-content {
        border-radius: 16px !important;
    }
}

/* User Detail Modal Box Grid Base Styles */
.user-detail-boxes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    text-align: left;
}

.user-detail-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-detail-box-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    display: block;
}

.user-detail-box-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-light);
    word-break: break-word;
}

@media (max-width: 576px) {
    .modal {
        padding: 12px;
    }
    .modal-body {
        padding: 16px !important;
    }
    .modal-header {
        padding: 16px 18px;
    }
}


/* ==========================================================================
   [ปุ่ม]
   ปุ่มขนาดเล็กในตาราง และปุ่มมาตรฐาน primary/secondary/danger/success
   ========================================================================== */
.btn-action-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    color: var(--primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
}

.btn-action-small:hover {
    background: var(--primary);
    color: #0f172a;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
}

/* Show/hide label based on screen size */
.btn-label-desktop {
    display: none;
}

@media (min-width: 768px) {
    .btn-label-desktop {
        display: inline;
    }
    .btn-action-small {
        width: auto;
        padding: 0 12px;
        border-radius: 20px;
    }
}

.btn {
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
    box-sizing: border-box;
}

.btn-secondary {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-light);
}

html[data-theme="light"] .btn-secondary {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.08);
}

.btn-primary {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.35);
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

/* Form styling matching login.php & profile.php */

/* ==========================================================================
   [ฟอร์มและสวิตช์]
   form-control, select, input วันที่ และสวิตช์เปิด/ปิด
   ========================================================================== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
    text-align: left;
}

.form-control {
    width: 100%;
    padding: 12px 20px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 24px;
    color: var(--text-light);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Fix input[type="date"] alignment, appearance & padding on mobile browsers */
input[type="date"].form-control,
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    min-height: 46px;
    display: block;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.8);
    padding: 0;
    margin: 0 0 0 8px;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.form-control[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.15);
}

/* Custom Premium Dropdown select styles */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px !important;
    cursor: pointer;
}

html[data-theme="light"] select.form-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select option {
    background-color: #0f172a;
    color: #f8fafc;
}

html[data-theme="light"] select option {
    background-color: #ffffff;
    color: #0f172a;
}

/* iOS-style toggle switch button */
.switch-container {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

html[data-theme="light"] .switch-slider {
    background-color: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.05);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #cbd5e1;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

html[data-theme="light"] .switch-slider:before {
    background-color: #ffffff;
}

.switch-container input:checked + .switch-slider {
    background-color: var(--primary);
}

.switch-container input:checked + .switch-slider:before {
    transform: translateX(24px);
    background-color: #ffffff;
}

/* Section dividers for forms matching profile.php */

/* ==========================================================================
   [ตัวแบ่งส่วน หัวข้อ และการแบ่งหน้า]
   section-divider, section-title และแถบเปลี่ยนหน้า
   ========================================================================== */
.section-divider {
    margin: 24px 0 16px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .section-divider {
    border-top-color: rgba(15, 23, 42, 0.05);
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--card-border);
    background: rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

@media (max-width: 576px) {
    .pagination-container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 14px 16px;
    }
    .pagination-info {
        font-size: 0.9rem;
    }
    .pagination-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

html[data-theme="light"] .pagination-container {
    background: rgba(0, 0, 0, 0.015);
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.pagination-buttons {
    display: flex;
    gap: 12px;
}

.pagination-btn {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-light);
    padding: 8px 16px;
    font-size: 0.825rem;
    font-weight: 600;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    outline: none;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.2);
    transform: translateY(-1px);
}

.pagination-btn:active:not(:disabled) {
    transform: translateY(0);
}

.pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 14px;
}

/* Glassmorphism Premium Toast Container Styles */

/* ==========================================================================
   [Toast แจ้งเตือน]
   กล่องแจ้งผลมุมจอ แบบสำเร็จ/ผิดพลาด
   ========================================================================== */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: calc(100% - 48px);
    pointer-events: none;
}

.toast {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition: all 0.3s ease;
}

@keyframes toastSlideIn {
    from { transform: translateX(100%) scale(0.95); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

.toast-success {
    border-left: 4px solid var(--primary);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, var(--card-bg) 60%);
    box-shadow: 0 10px 30px -5px rgba(20, 184, 166, 0.2);
}

.toast-error {
    border-left: 4px solid var(--danger);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, var(--card-bg) 60%);
    box-shadow: 0 10px 30px -5px rgba(244, 63, 94, 0.2);
}

.toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.toast-success .toast-icon {
    background: rgba(20, 184, 166, 0.2);
    color: var(--primary);
}

.toast-error .toast-icon {
    background: rgba(244, 63, 94, 0.2);
    color: var(--danger);
}

.toast-message {
    flex-grow: 1;
    font-weight: 500;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.toast-close:hover {
    opacity: 1;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.1);
}

/* Premium Skeleton Loading Animations */

/* ==========================================================================
   [Skeleton ระหว่างโหลด]
   แถบเทาวิ่งแทนเนื้อหาระหว่างรอข้อมูลจาก API
   ========================================================================== */
.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

html[data-theme="light"] .skeleton-box {
    background-color: rgba(15, 23, 42, 0.08);
}

.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.18) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 1.5s infinite;
    content: '';
}

html[data-theme="light"] .skeleton-box::after {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.7) 60%,
        rgba(255, 255, 255, 0)
    );
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Mobile Optimization: Enlarge buttons and fonts in Patient Detail Popup on mobile (< 600px) */

/* ==========================================================================
   [นำเข้า CSV]
   พื้นที่ลากไฟล์ และตารางตัวอย่างก่อนยืนยันนำเข้า
   ========================================================================== */
@media (max-width: 600px) {
    #patient-detail-modal .modal-content {
        padding: 16px 12px !important;
        border-radius: 20px !important;
    }
    #patient-detail-modal .profile-name {
        font-size: 1.95rem !important;
        line-height: 1.3 !important;
    }
    #patient-detail-modal .profile-meta {
        font-size: 1.18rem !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
    }
    #patient-detail-modal .profile-header {
        padding: 18px 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #patient-detail-modal .profile-header > div:last-child {
        width: 100% !important;
    }
    #patient-detail-modal .profile-header .btn {
        width: 100% !important;
        padding: 14px 18px !important;
        font-size: 1.1rem !important;
        justify-content: center !important;
        min-height: 50px !important;
        border-radius: 28px !important;
    }
    #patient-detail-modal .profile-details {
        padding: 18px 16px !important;
        gap: 18px !important;
    }
    #patient-detail-modal .profile-details label {
        font-size: 1.05rem !important;
    }
    #patient-detail-modal .profile-details span,
    #patient-detail-modal .profile-details a {
        font-size: 1.22rem !important;
    }
    #patient-detail-modal .profile-details .btn {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 1.08rem !important;
        justify-content: center !important;
        min-height: 50px !important;
        border-radius: 28px !important;
    }
    #patient-detail-modal .assessment-list-title h4 {
        font-size: 1.38rem !important;
    }
    #patient-detail-modal .assessment-card {
        padding: 18px 16px !important;
    }
    #patient-detail-modal .assessment-date {
        font-size: 1.15rem !important;
    }
    #patient-detail-modal .score-pill {
        font-size: 1.05rem !important;
        padding: 7px 16px !important;
    }
}

/* Drag & Drop Zone & Import Preview Table Styles */
.drop-zone:hover {
    border-color: var(--primary) !important;
    background: rgba(20, 184, 166, 0.06) !important;
}

.import-preview-table th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

html[data-theme="light"] .import-preview-table th {
    background: rgba(15, 23, 42, 0.04);
}

.import-preview-table td {
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

/* ==========================================================================
   การ์ดยุบได้ในโมดัลข้อมูลผู้ป่วย (แผนที่ + กราฟสัญญาณชีพ)
   ทั้งสองการ์ดยาวรวมกันเกิน 400px และไม่ใช่สิ่งที่ต้องดูทุกครั้งที่เปิดผู้ป่วย
   จึงยุบไว้ก่อน — ลูกศรวาดเอง เพราะ marker ปริยายของ <summary> หน้าตาต่างกัน
   ในแต่ละเบราว์เซอร์และตัด list-style ทิ้งไม่ได้ด้วย CSS ตัวเดียว
   ========================================================================== */
.patient-detail-collapsible > summary {
    list-style: none;
    position: relative;
    padding-right: 40px !important;
    transition: background 0.2s ease;
}

.patient-detail-collapsible > summary::-webkit-details-marker {
    display: none;
}

.patient-detail-collapsible > summary::after {
    content: '▾';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.patient-detail-collapsible[open] > summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.patient-detail-collapsible > summary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .patient-detail-collapsible > summary:hover {
    background: rgba(15, 23, 42, 0.05) !important;
}

/* Vitals trend chart (TOR 4.3(3)) — cap canvas height on narrow screens so
   the chart doesn't dominate the modal on mobile. */
@media (max-width: 600px) {
    #patient-detail-vitals-chart-card canvas {
        max-height: 160px !important;
    }
    /* แตะง่ายขึ้นบนมือถือ ให้เท่ากับความสูงปุ่มอื่นในโมดัลนี้ */
    .patient-detail-collapsible > summary {
        min-height: 50px;
        display: flex;
        align-items: center;
        font-size: 1.08rem !important;
    }
}

/* ==========================================================================
   Print-to-PDF: Patient Summary (TOR 4.3(5))
   Triggered by patients.js's printPatientSummary() via window.print(). Hides
   everything except the open patient-detail-modal's content, and strips all
   interactive chrome (buttons, nav, modal backdrop/overlay styling) so the
   printed page reads as a clean document rather than a screenshot of the app.
   ========================================================================== */
@media print {
    body.printing-patient-summary * {
        visibility: hidden;
    }
    body.printing-patient-summary #patient-detail-modal,
    body.printing-patient-summary #patient-detail-modal * {
        visibility: visible;
    }
    body.printing-patient-summary #patient-detail-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff !important;
        backdrop-filter: none !important;
        display: block !important;
    }
    body.printing-patient-summary #patient-detail-modal .modal-content {
        box-shadow: none !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }
    body.printing-patient-summary #patient-detail-modal .modal-body {
        overflow: visible !important;
        max-height: none !important;
    }
    /* Hide interactive-only elements: close button, action buttons (add
       assessment/visit, print), GPS check-in, Google Maps link — none of
       these make sense on paper. */
    body.printing-patient-summary .modal-close-btn,
    body.printing-patient-summary #patient-detail-modal .profile-header > div:last-child,
    body.printing-patient-summary [onclick*="capturePatientGPS"],
    body.printing-patient-summary [onclick*="printPatientSummary"],
    body.printing-patient-summary a[href*="google.com/maps"] {
        display: none !important;
    }
    /* Canvas-based charts don't reliably rasterize into printed output
       across browsers, and the same BP/pulse/DTX numbers are already
       visible per-entry in the timeline below — safest to hide it on print
       rather than risk a blank box. The embedded Google Maps iframe has the
       same problem (and is collapsed by default now, so it may not even have
       loaded); the coordinates print from the GPS field in .profile-details
       instead. */
    body.printing-patient-summary #patient-detail-vitals-chart-card,
    body.printing-patient-summary #patient-detail-map-card {
        display: none !important;
    }
    /* Scrollable timeline list must expand fully — otherwise only the
       visible scroll viewport prints. */
    body.printing-patient-summary #patient-detail-assessment-list {
        max-height: none !important;
        overflow: visible !important;
    }
    body.printing-patient-summary .assessment-card {
        break-inside: avoid;
    }
    @page {
        margin: 1.5cm;
    }
}

/* ==========================================================================
   Print-to-PDF: ใบส่งปรึกษาคลินิกผู้สูงอายุ (TOR 4.3(8))
   สั่งพิมพ์จาก careplan.js's printReferralSlip() ใช้กลไกเดียวกับการพิมพ์สรุป
   ประวัติ คือซ่อนทุกอย่างแล้วเปิดเฉพาะโมดัลที่ต้องการ
   เอกสารนี้ตั้งใจให้เป็น "ขาวดำบนกระดาษ" ไม่ใช่ภาพหน้าจอของแอป จึงบังคับพื้นขาว
   ตัวอักษรดำทับธีมทั้งหมด — ธีมมืดพิมพ์ออกมาแล้วอ่านไม่ออกและเปลืองหมึก
   ========================================================================== */
@media print {
    body.printing-referral-slip * {
        visibility: hidden;
    }
    body.printing-referral-slip #referral-slip-modal,
    body.printing-referral-slip #referral-slip-modal * {
        visibility: visible;
    }
    body.printing-referral-slip #referral-slip-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff !important;
        backdrop-filter: none !important;
        display: block !important;
    }
    body.printing-referral-slip #referral-slip-modal .modal-content {
        box-shadow: none !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: #fff !important;
        border: none !important;
    }
    body.printing-referral-slip #referral-slip-modal .modal-body {
        overflow: visible !important;
        max-height: none !important;
        padding: 0 !important;
    }
    /* หัวโมดัลกับแถบปุ่มเป็นส่วนของแอป ไม่ใช่ของเอกสาร */
    body.printing-referral-slip #referral-slip-modal .modal-header,
    body.printing-referral-slip #referral-slip-modal .referral-slip-actions,
    body.printing-referral-slip .modal-close-btn {
        display: none !important;
    }
    body.printing-referral-slip .referral-slip-doc,
    body.printing-referral-slip .referral-slip-doc * {
        color: #000 !important;
        background: transparent !important;
    }
}