:root {
    --primary-blue: #3b82f6;
    --dark-blue: #151b2b;
    --page-primary: #2563eb;
    --page-primary-ring: rgba(37,99,235,0.12);
    --sidebar-gradient: #1e1e1e;
    --sidebar-header-bg: #232827;
    --sidebar-hover: rgba(255,255,255,0.05);
    --sidebar-menu-text: #d8d8d8;
    --sidebar-menu-icon: rgba(216,216,216,0.66);
    --bg-light: #f8fafc;
    --white: #ffffff;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --text-light: #9ca3af;
    --border-color: #e5e7eb;
    --blue-light-bg: #eff6ff;
    --banner-bg: #1a233a; /* Dark blue for welcome banner */
    --ms-titlebar-blue: #2852c8;
    --ms-titlebar-blue-shadow: rgba(40, 82, 200, 0.28);
    --ms-sidebar-active-bg: rgba(40,82,200,0.22);
    --ms-sidebar-active-border: rgba(40,82,200,0.26);
    --ms-sidebar-active-text: #dbe7ff;
    --ms-sidebar-active-icon: #8fb0ff;
    --ms-dt-thead-bg:     #eef4ff;   /* อัปเดต (Apple style): จุดเริ่มของพื้นหลัง gradient อ่อน — เดิมน้ำเงินเข้มตัน #2852C8 */
    --ms-dt-thead-bg-to:  #e6efff;   /* จุดสิ้นสุดของพื้นหลัง gradient อ่อน */
    --ms-dt-thead-color:  #2852C8;   /* ตัวอักษร = สีน้ำเงินหลักของระบบ — เดิมสีขาว */
    --ms-dt-thead-border: #c7d5f5;   /* เส้นขอบล่างฟ้าอ่อน — เดิมน้ำเงินเข้ม #1D4ED8 */
    --ms-dt-hover-bg:          #F0F8FF;   /* Alice Blue — subtle hover              */
    --ms-dt-selected-bg:       #DBEAFE;   /* blue-100 — matches thead standard      */
    --ms-dt-selected-child-bg: #EFF6FF;   /* blue-50  — expanded child row          */
    --ms-dt-selected-text:     #1E3A8A;   /* blue-900 — matches thead text          */
    --ms-dt-selected-accent:   #2852c8;   /* titlebar blue — left accent bar        */
    /* Apple-style card tokens (2026-09-22): hairline neutral border + tighter, softer diffuse shadow —
       replaces the old wider/heavier drop shadow. Cascades to every class already using these vars. */
    --ms-card-line:            rgba(15,23,42,.07);
    --ms-card-shadow:          0 1px 2px rgba(15,23,42,.04), 0 12px 28px -14px rgba(15,23,42,.16);
    --ms-card-shadow-hover:    0 2px 6px rgba(15,23,42,.06), 0 20px 40px -16px rgba(15,23,42,.2);
    --yellow: #f59e0b;
    --font-main: 'Sarabun-regular', 'Sarabun', sans-serif;
    --primary-hover: #2563eb;

    /* ── Font Size Tokens ───────────────────────────────────
       ใช้ var(--fs-*) แทน hardcode font-size ในทุกหน้า
       ─────────────────────────────────────────────────── */
    --fs-title:       17px;    /* title-bar heading               */
    --fs-subtitle:    11.5px;  /* title-bar description / subtext */
    --fs-modal-title: 15px;    /* modal / card header title       */
    --fs-section:     13px;    /* section sub-title, messages     */
    --fs-body:        12.5px;  /* body, helper, description       */
    --fs-th:          11.5px;  /* DataTable thead th              */
    --fs-td:          12px;    /* DataTable tbody td              */
    --fs-input:       12.5px;  /* input, Select2, textarea        */
    --fs-label:       12px;    /* form field label                */
    --fs-btn:         13px;    /* primary button                  */
    --fs-btn-sm:      12px;    /* secondary / small button        */
    --fs-badge:       12px;    /* badge, chip, status tag         */
    --fs-caption:     11.5px;  /* DT info, pagination, load-time  */
    --fs-helper:      11px;    /* fine-print, code, muted meta    */
    --fs-tiny:        10.5px;  /* ultra-compact metadata          */
}

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

*:not(i) {
    font-family: 'Sarabun-regular', var(--font-main) !important;
    font-weight: 700 !important;
}

html {
    overflow-y: auto;
}

html.modal-open,
body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.modal-open .content-area {
    overflow: hidden !important;
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    background-color: var(--bg-light);
    color: var(--text-dark);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

html:has(body.ms-app-body) {
    height: 100%;
    overflow: hidden;
}

body.ms-app-body {
    --topbar-height: 64px;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Typography Utilities */
.text-blue { color: var(--primary-blue); }
.text-gray { color: var(--text-gray); }
.bg-blue-light { background-color: var(--blue-light-bg); }
.bg-yellow { background-color: var(--yellow); }
.bg-blue { background-color: var(--primary-blue); }

/* ════════════════════════════════
   Sidebar — Refined Dark Modern
   ════════════════════════════════ */
.sidebar {
    width: 220px;
    background: var(--sidebar-gradient, #1e1e1e);
    color: var(--white);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0; top: 0;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 1px 0 32px rgba(0,0,0,0.35);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ──── Logo ──── */
.sidebar-header {
    padding: 22px 18px 18px;
    background: var(--sidebar-header-bg, #232827);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1;
}

.logo-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; overflow: hidden;
}
.logo-icon::after {
    content: '';
    position: absolute;
    top: -80%; left: -20%;
    width: 140%; height: 50%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,255,255,0.0) 25%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.0) 75%,
        transparent 100%
    );
    animation: logo-sweep 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes logo-sweep {
    0%   { top: -80%; opacity: 0; }
    6%   { opacity: 1; }
    32%  { top: 130%; opacity: 1; }
    33%  { opacity: 0; }
    100% { top: 130%; opacity: 0; }
}

.logo-icon i { font-size: 26px; color: var(--primary-blue); }

.logo-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.logo-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #f1f5f9;
}

.logo-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    font-weight: 500;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Global Tooltip — Apple-style frosted glass (macOS tooltip): พื้นขาวโปร่งฟรอสต์ + hairline + เงานุ่มสองชั้น ไม่มีลูกศร */
#msGlobalTooltip {
    position: fixed;
    z-index: 2147483000;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.06),
        0 12px 28px -10px rgba(15,23,42,0.28),
        inset 0 1px 0 rgba(255,255,255,0.7);
    color: #1e293b;
    font-family: 'Sarabun-regular', 'Sarabun', sans-serif !important;
    font-size: 11.5px;
    font-weight: 700 !important;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 4px, 0) scale(0.96);
    transform-origin: 50% 100%;
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(.2,.8,.2,1), visibility 0.16s ease;
}

#msGlobalTooltip[data-placement="bottom"] { transform-origin: 50% 0; }
#msGlobalTooltip[data-placement="right"]  { transform-origin: 0 50%; }
#msGlobalTooltip[data-placement="left"]   { transform-origin: 100% 50%; }

#msGlobalTooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Apple tooltip ไม่มีลูกศร — ซ่อนไว้ตลอด (JS ยังตั้ง data-placement ตามเดิม) */
#msGlobalTooltip::before { display: none; }

@media (prefers-reduced-transparency: reduce) {
    #msGlobalTooltip { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ──── User Status ──── */
.user-status-container {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.user-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
}

.status-dot {
    width: 6px; height: 6px;
    background: #34d399;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(52,211,153,0.55);
}

/* ──── Nav ──── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Sidebar scrollbar (dark bg) */
.sidebar::-webkit-scrollbar { width: 4px; height: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }



.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--sidebar-menu-text, #d8d8d8);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 12.5px;
    margin-bottom: 1px;
    position: relative;
}

.nav-item i {
    font-size: 15px;
    color: var(--sidebar-menu-icon, rgba(216,216,216,0.66));
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #ffffff;
}
.nav-item:hover i { color: #ffffff; }

.nav-item.active {
    background: var(--ms-sidebar-active-bg, rgba(40,82,200,0.22));
    color: var(--ms-sidebar-active-text, #dbe7ff);
    box-shadow: inset 0 0 0 1px var(--ms-sidebar-active-border, rgba(40,82,200,0.26));
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--ms-titlebar-blue, #2852c8);
    border-radius: 0 3px 3px 0;
}
.nav-item.active i { color: var(--ms-sidebar-active-icon, #8fb0ff); }

.nav-item.open {
    background: rgba(255,255,255,0.04);
    color: var(--sidebar-menu-text, #d8d8d8);
}
.nav-item.open i { color: var(--sidebar-menu-icon, rgba(216,216,216,0.66)); }

/* badge */
.badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* submenu caret */
.submenu-caret {
    margin-left: auto;
    font-size: 13px !important;
    color: rgba(255,255,255,0.28) !important;
    transition: transform 0.2s ease;
}
.nav-item.open .submenu-caret { transform: rotate(180deg); }

/* ──── Submenu ──── */
.submenu {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 6px 38px;
    position: relative;
    margin-bottom: 2px;
}
.submenu::before {
    content: '';
    position: absolute;
    left: 22px; top: 0; bottom: 6px;
    width: 1px;
    background: rgba(255,255,255,0.07);
}
.submenu.active { display: flex; }

.submenu-item {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--sidebar-menu-text, #d8d8d8);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: block;
}
.submenu-item:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.05);
}
.submenu-item.active {
    color: var(--ms-sidebar-active-text, #dbe7ff);
    background: rgba(40,82,200,0.18);
    border-left: 2px solid var(--ms-titlebar-blue, #2852c8);
    padding-left: 8px;
}

/* ──── Section Groups ──── */
.nav-section {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sidebar-menu-text, #d8d8d8);
    font-weight: 700;
    padding: 12px 12px 8px;
    text-transform: none;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.section-title:hover { color: #ffffff; background: rgba(255,255,255,0.04); }
.section-caret {
    font-size: 11px;
    opacity: 0.6;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.15s;
    flex-shrink: 0;
}
.section-title:hover .section-caret { opacity: 1; }
.nav-section.sec-collapsed .section-caret { transform: rotate(-90deg); }
.nav-section-body {
    overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.nav-section.sec-collapsed .nav-section-body {
    max-height: 0;
    opacity: 0;
}

.nav-section:first-of-type {
    border-top: none;
    margin-top: 0;
}
.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 12px;
}

/* Main Content */
.main-wrapper {
    flex: 1;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    padding-top: 64px;
    width: 100%;
    max-width: 100%;
}

body.ms-app-body .main-wrapper {
    height: 100vh;
    min-height: 100vh;
    padding-top: var(--topbar-height);
    overflow: hidden;
}

@media (min-width: 1201px) {
    .main-wrapper {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* Topbar */
.topbar {
    height: var(--topbar-height, 64px);
    background-color: var(--white);
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 10px 24px -14px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 14px 0 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
}

.topbar-start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: start;
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #162033;
    text-decoration: none;
}

.topbar-brand-icon {
    width: 30px;
    height: 42px;
    border-radius: 0;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    position: relative;
    overflow: hidden;
}

.topbar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.topbar-brand-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    color: #172033;
    white-space: nowrap;
}

.topbar-brand-version {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 1px 8px;
    border: 1px solid #86efac;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    color: #15803d;
    background: transparent;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

span.topbar-brand-version[role="button"] {
    cursor: pointer;
}

span.topbar-brand-version[role="button"]:hover,
span.topbar-brand-version[role="button"]:focus-visible {
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(21,128,61,0.14);
    outline: none;
}

.hospital-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    justify-self: center;
}

.hospital-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hospital-icon i {
    font-size: 20px;
}

.hospital-details {
    display: flex;
    flex-direction: column;
}

.hospital-code {
    font-size: 12px;
    color: #94a3b8;
}

.hospital-name {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: end;
}

/* Notification button */
.notification-btn {
    position: relative;
    overflow: hidden;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 0;
    background: linear-gradient(160deg, #f8fbff 0%, #eef5ff 100%);
    color: #2852c8;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.24s cubic-bezier(.2,.8,.2,1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    box-shadow:
        0 1px 1px rgba(15,23,42,.03),
        0 6px 12px -8px rgba(40,82,200,.35),
        inset 0 1px 0 rgba(255,255,255,.85);
}
.notification-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.notification-btn i,
.notification-btn > * {
    position: relative;
}
.notification-btn:hover {
    background: linear-gradient(160deg, #edf4ff 0%, #dfeaff 100%);
    color: #1d3f9a;
    transform: translateY(-1.5px);
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 22px -10px rgba(40,82,200,.4),
        0 6px 12px -6px rgba(40,82,200,.3),
        inset 0 1px 0 rgba(255,255,255,.9);
}
.notification-btn:active {
    transform: translateY(0);
}


/* ปุ่มเมนูแอป — โทนม่วง (violet) แยกจากปุ่มนำทางสีน้ำเงิน / home เขียว / แจ้งเตือนส้ม */
.apps-menu-btn {
    background: linear-gradient(160deg, #f5f3ff 0%, #faf5ff 100%);
    color: #7c3aed;
    box-shadow:
        0 1px 1px rgba(15,23,42,.03),
        0 6px 12px -8px rgba(124,58,237,.35),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.apps-menu-btn:hover,
.apps-menu-btn.active {
    background: linear-gradient(160deg, #ede9fe 0%, #f3e8ff 100%);
    color: #6d28d9;
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 22px -10px rgba(124,58,237,.4),
        0 6px 12px -6px rgba(124,58,237,.3),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.apps-google-grid {
    width: 18px;
    height: 18px;
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-auto-rows: 4px;
    gap: 3px;
    align-content: center;
    justify-content: center;
    color: currentColor;
}

.apps-google-grid span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}

.topbar-home-btn {
    background: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 100%);
    color: #059669;
}

.topbar-home-btn:hover {
    background: linear-gradient(160deg, #d1fae5 0%, #ccfbf1 100%);
    color: #047857;
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 22px -10px rgba(5,150,105,.4),
        0 6px 12px -6px rgba(5,150,105,.3),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.topbar-alert-btn {
    background: linear-gradient(160deg, #fff7ed 0%, #fffbeb 100%);
    color: #d97706;
}

.topbar-alert-btn:hover {
    background: linear-gradient(160deg, #ffedd5 0%, #fef3c7 100%);
    color: #b45309;
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 22px -10px rgba(217,119,6,.4),
        0 6px 12px -6px rgba(217,119,6,.3),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.pwa-install-btn {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    color: #059669;
}

.pwa-install-btn:hover {
    background: linear-gradient(135deg, #d1fae5 0%, #ccfbf1 100%);
    color: #047857;
    box-shadow: 0 8px 18px rgba(5,150,105,0.14), inset 0 1px 0 rgba(255,255,255,0.86);
}

.pwa-install-btn:disabled {
    cursor: default;
    opacity: 0.72;
    transform: none;
}

/* Profile trigger pill */
.profile-info {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #eff6ff 100%);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    user-select: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset;
}
.profile-info:hover {
    background: linear-gradient(135deg, #dcfce7 0%, #f8fbff 68%, #eef5ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(21,128,61,0.12), inset 0 1px 0 rgba(255,255,255,0.86);
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.88), 0 8px 16px rgba(15,23,42,0.12);
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.profile-info .ph-caret-down {
    font-size: 13px;
    color: #64748b;
    transition: transform 0.2s ease;
}
.profile-info.active .ph-caret-down { transform: rotate(180deg); }

/* Content Area */
.content-area {
    flex: 1;
    padding: 16px 14px 32px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background:
        linear-gradient(45deg, #cfe4ff 0%, #e2eeff 32%, #f3f8ff 62%, #ffffff 100%);
}

body.ms-app-body .content-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #2852c8 rgba(255,255,255,.6);
}
/* apple.com style — capsule groove สีขาวโปร่งแสง + thumb สีน้ำเงินทึบขอบขาว (คล้าย pill control ของ Apple)
   กว้างบาง โค้งมนเต็ม มีเงานุ่มให้ลอยเหนือพื้น ไม่มีรางสีเทาแบบเดิม */
.content-area::-webkit-scrollbar { width: 9px; }
.content-area::-webkit-scrollbar-track {
    background: rgba(255,255,255,.55);
    border-radius: 999px;
    margin: 3px 0;
}
.content-area::-webkit-scrollbar-thumb {
    background-color: #2852c8;
    border-radius: 999px;
    border: 2px solid #fff;
    background-clip: padding-box;
    box-shadow: 0 1px 3px rgba(15,23,42,.28);
    transition: background-color .2s ease;
}
.content-area::-webkit-scrollbar-thumb:hover { background-color: #1d4ed8; }

/* Welcome Banner */
.welcome-banner {
    background-color: var(--banner-bg);
    background-image: linear-gradient(to right, #111827, #1e3a8a);
    border-radius: 16px;
    padding: 40px;
    color: white;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.welcome-banner h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.welcome-banner p {
    font-size: 16px;
    color: var(--text-light);
}

/* Stats Grid 1 */
.stats-grid-small {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card-small {
    background: var(--white);
    border: 1px solid var(--ms-card-line);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 180px;
    box-shadow: var(--ms-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}



.stat-card-small:hover {
    transform: translateY(-2px);
    box-shadow: var(--ms-card-shadow-hover);
}

.icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


.stat-details {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 15px;
    font-weight: 700; /* Bold */
    color: var(--text-dark);
    font-family: 'Sarabun-regular', var(--font-main);
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-with-icon h2 {
    font-size: 20px;
    font-weight: 700;
}

.title-with-icon i {
    font-size: 22px;
}

.filter-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-label {
    font-size: 13px;
    color: var(--text-gray);
}

.filter-options {
    display: flex;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 4px;
}

.filter-options button {
    background: none;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 16px;
    cursor: pointer;
    color: var(--text-gray);
    font-family: inherit;
    transition: all 0.2s;
}

.filter-options button.active {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Stats Grid 2 */
.stats-grid-large {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card-large {
    background: var(--white);
    border: 1px solid var(--ms-card-line);
    border-radius: 16px;
    padding: 32px 24px; /* Increased top/bottom padding to make it taller */
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--ms-card-shadow);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.stat-title {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 700; /* Bold */
    font-family: 'Sarabun-regular', var(--font-main);
}

.icon-wrap-sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-value-large {
    font-size: 28px;
    font-weight: 700; /* Bold */
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Sarabun-regular', var(--font-main);
}

.stat-value-large .unit {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 400;
}

.progress-bar-container {
    height: 4px;
    background-color: var(--bg-light);
    border-radius: 2px;
    width: 100%;
    margin-top: auto;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 2px;
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    width: 100%;
    max-width: 100%;
}

.chart-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    min-width: 0;
    overflow: hidden;
}

.chart-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.chart-header p {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 24px;
}

.chart-body {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    height: clamp(180px, 28vw, 240px);
    min-height: 180px;
    padding-top: 10px;
    overflow: hidden;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-gray);
    font-size: 12px;
    height: 100%;
    padding-bottom: 20px; /* Space for x axis labels if they existed */
}

.chart-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 20px);
}

.chart-lines .line {
    border-top: 1px dashed var(--border-color);
    width: 100%;
}
/* Title Bar (Premium Banner) */
.title-bar {
    background: var(--ms-titlebar-blue);
    border-radius: 12px;
    padding: 8px 22px;
    color: white;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 18px 34px -14px var(--ms-titlebar-blue-shadow), 0 8px 18px -10px rgba(15,23,42,0.2);
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.title-bar.danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); /* Red gradient */
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2);
}

.title-bar.info {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); /* Blue gradient */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
}

.title-bar.secondary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* Indigo/Purple gradient */
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.2);
}

.title-bar.warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Amber gradient */
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}

.title-bar.success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%); /* Emerald green gradient */
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
}

.title-bar.comfort {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); /* Teal gradient */
    box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.2);
}

.title-bar.soft-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); /* Deep to Royal Blue */
    box-shadow: 0 10px 15px -3px rgba(30, 64, 175, 0.2);
}

.title-bar.relax-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); /* Soft Relaxing Blue */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15);
}

.title-bar.academic {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); /* Deep Navy to Blue */
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.2);
}

body .title-bar[class] {
    background: var(--ms-titlebar-blue) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 18px 34px -14px var(--ms-titlebar-blue-shadow), 0 8px 18px -10px rgba(15,23,42,0.2) !important;
}

body .title-bar[class]::before,
body .title-bar[class]::after {
    background: none !important;
    opacity: 0 !important;
}

body .title-bar[class] .tb-shimmer {
    display: none !important;
}

.title-bar::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.title-bar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 auto;
}
/* Data Table Styles */
.data-table-container {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--ms-card-line);
    overflow: hidden;
    margin-top: 8px;
    box-shadow: var(--ms-card-shadow);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* DataTables vendor default (.no-footer) วาดเส้นใต้ตารางเองเมื่อไม่มี <tfoot> — โปรเจกต์นี้ไม่ใช้ tfoot
   ในตารางทั่วไป จึงปิดเส้นนี้เป็นมาตรฐานกลางทั้งระบบ ไม่ต้องเขียนซ้ำในหน้าใหม่ */
table.dataTable.no-footer { border-bottom: none !important; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    font-family: var(--font-main);
}

.data-table th {
    background-color: var(--bg-light);
    padding: 12px 16px;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-dark);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover {
    background-color: #f8fafc;
}


.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active {
    background-color: #ecfdf5;
    color: #059669;
}

.status-badge.inactive {
    background-color: #fef2f2;
    color: #dc2626;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.admin {
    background-color: #eef2ff;
    color: #4f46e5;
}

.role-badge.user {
    background-color: #f3f4f6;
    color: #4b5563;
}

.role-badge.viewer {
    background-color: #fff7ed;
    color: #c2410c;
}

.action-btns {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.title-bar-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    backdrop-filter: blur(4px);
}
/* ไอคอนหัว title bar ทุกหน้า — พื้นแก้วขาวโปร่ง + glyph สีสลับตามหน้า
   layouts/header.php ตั้ง --tb-icon-fg ให้แต่ละหน้าไม่ซ้ำกับหน้าข้างเคียง (--tb-icon-bg ยังตั้งไว้แต่ไม่ได้ใช้ที่นี่)
   !important เพื่อให้ทุกหน้าเหมือนกัน ทับผิวที่หน้าเดิมเขียนไว้เอง (.xxx-gradient .title-bar-icon) */
.title-bar .title-bar-icon {
    /* พื้น = แก้วขาวโปร่งแบบเดิมของ title bar (ผู้ใช้เลือก 2026-09-28) — สีสลับตามหน้าอยู่ที่ glyph (--tb-icon-fg) */
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--tb-icon-fg, #4338ca) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
}
.title-bar .title-bar-icon i { color: inherit !important; filter: none !important; }

h2 {
    font-size: 14px;
    font-weight: 800;
    font-family: 'Sarabun-regular', var(--font-main);
}

.dt-title { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:#0f172a; }
.dt-title i { color:var(--page-primary); font-size:18px; }
.ms-card-title-sm,
.ms-modal-header-title-sm {
    font-size:14px !important;
    font-weight:800 !important;
    color:var(--ms-modal-head-ink, #1e293b) !important;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}
.ms-card-title-sm > i,
.ms-modal-header-title-sm > i { color:#16a34a; }
.upd-card-title,
.doc-card-title,
.settings-card-title,
.coming-card-title,
.db-card-column-title,
.home-card-label,
.home-domain-title,
.home-panel-title,
.hist-card-title,
.hi-card-title,
.map-card-title,
.ex-card-title,
.im-card-title,
.mch-form-card-title,
.pw-card-title,
.form-card-title,
.dbs-card-title,
.action-card-label,
.ms-ec-pt-card-hd {
    font-size:14px !important;
    font-weight:800 !important;
    color:var(--ms-modal-head-ink, #1e293b) !important;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}
.upd-card-title > i,
.doc-card-title > i,
.settings-card-title > i,
.coming-card-title > i,
.db-card-column-title > i,
.home-card-label > i,
.home-domain-title > i,
.home-panel-title > i,
.hist-card-title > i,
.hi-card-title > i,
.map-card-title > i,
.ex-card-title > i,
.im-card-title > i,
.mch-form-card-title > i,
.pw-card-title > i,
.form-card-title > i,
.dbs-card-title > i,
.action-card-label > i,
.ms-ec-pt-card-hd > i { color:#16a34a !important; }
.mc-header-title { font-size:var(--fs-modal-title,15px); font-weight:800; color:#172033; margin:0; display:flex; align-items:center; gap:8px; }
.mc-header-title i { color:#2563eb; text-shadow:0 1px 0 rgba(255,255,255,0.7); }

/* Modal Header Title Standard — 15px (CLAUDE.md §13) */
.mcf-title,
.mg-header-title,
.mif-header-title,
.mof-header-title,
.rpt-header-title,
.rspt-header-title,
.prpt-header-title,
.lab-header-title,
.ecm-header-title { font-size:var(--fs-modal-title,15px); font-weight:800; color:#172033; margin:0; display:flex; align-items:center; gap:8px; }
.ord-header-title,
.ordf-title,
.ordd-title,
.ordda-title { font-size:var(--fs-modal-title,15px); font-weight:800; color:#172033; margin:0; display:flex; align-items:center; gap:8px; }

.title-bar-content h1 {
    font-size: var(--fs-title, 17px);
    font-weight: 700;
    margin-bottom: 4px;
    color: white;
    font-family: 'Sarabun-regular', var(--font-main);
}

.title-bar-content p {
    font-size: var(--fs-subtitle, 11.5px);
    opacity: 0.9;
    color: white;
    font-family: 'Sarabun-regular', var(--font-main);
}

.title-bar-content {
    min-width: 0;
}

.title-bar-content h1 {
    white-space: nowrap;
}

.title-bar-content p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Thai Diacritics Overflow Guard ─────────────────────────────
   Stacked above-marks (่ ้ ๊ ๋ on ี ื ิ) extend above the
   standard line-box top and get clipped by overflow:hidden on
   elements with tight dimensions. padding-top creates a 3px buffer
   inside the padding-box so marks render within the element.
   ──────────────────────────────────────────────────────────────── */
.hospital-name,
.dropdown-name,
.doc-modal-hd-title,
.acc-summary-value,
.perm-summary-value,
.ft-summary-value,
.cr-kpi-value,
.ct-context-value,
.nt-trend-fund,
.page-name,
.co-chart-row-name {
    padding-top: 3px;
}

.title-bar-right {
    display: flex;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-width: 0;
}

/* Apple-style titlebar icon button (2026-09-22, whole system) — softer squircle radius,
   lighter translucent glass tint, tactile press feedback, calmer transition curve */
.ms-titlebar-refresh {
    order: 999;
    margin-left: auto;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;   /* ใช้เป็น <a> ได้ (เช่น db_status) — ไม่ให้มีเส้นใต้ลิงก์ */
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.ms-titlebar-refresh i {
    font-size: 19px;
    line-height: 1;
}

.ms-titlebar-refresh:hover:not(:disabled) {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}

.ms-titlebar-refresh:active:not(:disabled) {
    transform: scale(.9);
    background: rgba(255,255,255,0.28);
}

.ms-titlebar-refresh:disabled {
    cursor: wait;
    opacity: .78;
}

.ms-titlebar-refresh.is-loading i {
    animation: spin .8s linear infinite;
}

/* ไอคอนหัวโมดัลทุกตัว (CLAUDE.md §13) — app icon แบบ Apple ต้นแบบ: ไอคอนแม่กุญแจโมดัลเข้าสู่ระบบ (.login-brand-icon, layouts/footer.php)
   squircle ไล่สีน้ำเงินสดแบบปุ่ม .login-btn + glyph ขาว + gloss ครึ่งบน + เงานุ่มสีเดียวกัน
   ใส่ class "ms-modal-icon" คู่กับ class เดิมของหน้า — ไม่ยุ่งขนาด (width/height/font-size คงตามหน้า) มุมโค้ง 30% ตามขนาด
   !important เพื่อทับสีเฉพาะหน้า (รวม inline style="background:…") — ห้ามเขียนสีไอคอนหัวโมดัลเองในหน้าอีก */
.ms-modal-icon {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 30% !important;
    background: linear-gradient(180deg, #5b9dff 0%, var(--primary-blue, #3b82f6) 55%, #1d6fe0 100%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 1px rgba(23,64,140,.3),
        0 10px 20px -8px rgba(37,99,235,.55),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.ms-modal-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 0 45% 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 100%) !important;
    pointer-events: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.ms-modal-icon > i,
.ms-modal-icon > svg {
    position: relative;
    color: #fff !important;
    fill: currentColor;
    filter: drop-shadow(0 1px 1.5px rgba(15,23,42,.28));
}

/* ไอคอนหน้า label ในโมดัลทุกตัว (CLAUDE.md §13.4.1) — app icon จิ๋วแบบ Apple ชุดเดียวกับ .ms-modal-icon
   (แบบไอคอนแถวใน Settings ของ iOS: squircle น้ำเงินไล่สี + glyph ขาว)
   เงื่อนไข: <i class="ph…"> ที่เป็นลูกตัวแรกของ label / element ที่ class มีคำว่า label|lbl ภายในโมดัล
   (container ที่ role="dialog" / aria-modal / class มี modal|overlay|dialog, และ SweetAlert2) — ไม่กระทบฟอร์มบนหน้าปกติ */
:is([role="dialog"], [aria-modal="true"], [class*="modal"], [class*="overlay"], [class*="dialog"], .swal2-popup)
    :is(label, [class*="label"], [class*="lbl"]) > i[class*="ph"]:first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75em;
    height: 1.75em;
    margin-right: .45em;
    font-size: .85em !important;
    line-height: 1;
    vertical-align: -0.35em;
    border-radius: 30%;
    color: #fff !important;
    background: linear-gradient(180deg, #5b9dff 0%, var(--primary-blue, #3b82f6) 55%, #1d6fe0 100%) !important;
    box-shadow: 0 1px 1px rgba(23,64,140,.25), 0 3px 6px -3px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ปุ่ม refresh ขวาสุดของ title bar — ผิวชุดเดียวกับไอคอนซ้าย (.title-bar .title-bar-icon): แก้วขาวโปร่ง + glyph สีตามหน้า (--tb-icon-fg จาก layouts/header.php)
   !important เพื่อให้ทุกหน้าเหมือนกัน */
.title-bar .ms-titlebar-refresh {
    background: rgba(255,255,255,0.2) !important;
    color: var(--tb-icon-fg, #fff) !important;
    border-radius: 13px !important;
    backdrop-filter: blur(4px);
}
.title-bar .ms-titlebar-refresh i { filter: none !important; }
.title-bar .ms-titlebar-refresh:hover:not(:disabled) { background: rgba(255,255,255,0.28) !important; }
.title-bar .ms-titlebar-refresh:active:not(:disabled) { background: rgba(255,255,255,0.34) !important; }
.title-bar .ms-titlebar-refresh:focus-visible { outline: none; box-shadow: 0 0 0 3px #e8edf7; }

.title-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.title-stat-value {
    font-size: 17px;
    font-weight: 700;
}

.title-stat-label {
    font-size: 10px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px;
    }
    .title-bar-right {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    /* Responsive Data Table */
    .data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr {
        display: block;
    }
    .data-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .data-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: #fff;
        padding: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }
    .data-table td {
        border: none !important;
        position: relative;
        padding-left: 45% !important;
        text-align: right !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .data-table td:last-child {
        border-bottom: none !important;
    }
    .data-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 40%;
        text-align: left;
        font-weight: 700;
        color: var(--text-dark);
        font-size: 14px;
    }
}

/* Go To Top Button — Apple-style glossy circle (Pattern E, docs/standards/cards-buttons.md)
   ฐานสี = สี sidebar (#1e1e1e) ตาม §15.1, hover = น้ำเงิน title bar 3-stop เหมือน .login-btn */
.go-top-btn {
    position: fixed;
    bottom: 52px; right: 28px;
    width: 44px; height: 44px;
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--sidebar-gradient, #1e1e1e) 68%, #fff 32%) 0%,
        var(--sidebar-gradient, #1e1e1e) 55%,
        color-mix(in srgb, var(--sidebar-gradient, #1e1e1e) 80%, #000 20%) 100%);
    font-size: 19px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 1px 1px rgba(15,23,42,0.25),
        0 12px 22px -8px rgba(15,23,42,0.42),
        inset 0 1px 0 rgba(255,255,255,0.28);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), filter .18s ease;
    pointer-events: none;
    z-index: 500;
}
.go-top-btn::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%);
}
.go-top-btn i {
    position: relative;
    font-size: 19px;
    line-height: 1;
}
.go-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.go-top-btn:hover {
    background: linear-gradient(180deg, #5b9dff 0%, var(--ms-titlebar-blue, #2852c8) 55%, #1a4bb8 100%);
    color: #fff;
    filter: brightness(1.04);
    transform: translateY(-1.5px);
    box-shadow:
        0 1px 1px rgba(15,23,42,0.28),
        0 16px 26px -8px var(--ms-titlebar-blue-shadow, rgba(40,82,200,0.28)),
        inset 0 1px 0 rgba(255,255,255,0.4);
}
.go-top-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #e8edf7,
        0 12px 22px -8px rgba(15,23,42,0.42),
        inset 0 1px 0 rgba(255,255,255,0.28);
}
.go-top-btn:active { transform: translateY(0) scale(0.94); }

/* Page Load Time Standard (CLAUDE.md §15) */
.ms-page-load-time {
    position: fixed;
    bottom: 14px;
    left: 16px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    background: linear-gradient(180deg, #9061f9 0%, #7c3aed 55%, #6d28d9 100%);
    border: none;
    border-radius: 20px;
    padding: 4px 6px 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #f5f3ff;
    box-shadow:
        0 1px 1px rgba(76,29,149,.3),
        0 12px 24px -10px rgba(109,40,217,.55),
        0 4px 10px -4px rgba(109,40,217,.4),
        inset 0 1px 0 rgba(255,255,255,.35);
    pointer-events: auto;
    user-select: none;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ms-page-load-time::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.ms-page-load-time:hover {
    box-shadow:
        0 1px 1px rgba(76,29,149,.32),
        0 16px 30px -10px rgba(109,40,217,.6),
        0 6px 14px -4px rgba(109,40,217,.45),
        inset 0 1px 0 rgba(255,255,255,.4);
    transform: translateY(-1px);
}
.ms-page-load-time > i {
    position: relative;
    font-size: 13px;
    color: #ffffff;
    pointer-events: none;
}
.ms-page-load-time > span:first-of-type {
    position: relative;
    pointer-events: none;
}
.ms-page-load-time strong {
    font-weight: 800;
    color: #ffffff;
}
.ms-plt-divider {
    position: relative;
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,.35);
    margin: 0 1px;
    pointer-events: none;
}
.ms-copy-url-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    font-size: 13px;
    line-height: 1;
}
.ms-copy-url-btn:hover {
    color: #ffffff;
    background: rgba(255,255,255,.18);
}
.ms-copy-url-btn.copied {
    color: #4ade80;
}
.ms-copy-url-btn i {
    font-size: 13px;
}


/* ══════════════════════════════════════
   Import OPD Modal — Shared Module
   ══════════════════════════════════════ */
.ms-import-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(15,23,42,.44); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 44px 44px 16px 16px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ms-import-overlay.visible { opacity: 1; pointer-events: auto; }
.ms-import-modal {
    position: relative;
    background: #fff; border-radius: 14px;
    width: 100%; max-width: 540px;
    display: flex; flex-direction: column;
    border: 1px solid #dbe4f0;
    box-shadow: 0 24px 54px rgba(30,41,59,.24);
    transform: translateY(14px) scale(.985); transition: transform .2s ease;
}
.ms-import-overlay.visible .ms-import-modal { transform: translateY(0) scale(1); }
.ms-import-head {
    background: linear-gradient(135deg,#f8faff 0%,#f5f7fb 100%);
    border-radius: 14px 14px 0 0; padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-shrink: 0; border-bottom: 1px solid #dbe4f0;
}
.ms-import-head-left { display: flex; align-items: center; gap: 12px; }
.ms-import-head-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
}
.ms-import-title { color: #111827; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ms-import-subtitle { color: #667085; font-size: 11px; font-weight: 600; margin-top: 3px; }
.ms-import-close {
    position: absolute; top: -20px; right: -20px;
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: #fff; color: #1f2937;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.20);
    z-index: 3;
    transition: all .2s;
}
.ms-import-close:hover { background: #f8fafc; color: #111827; box-shadow: 0 10px 24px rgba(15,23,42,0.26); transform: translateY(-1px); }
.ms-import-body {
    padding: 22px 24px; display: flex; flex-direction: column; gap: 18px;
}
.ms-import-foot {
    padding: 12px 22px; border-top: 1px solid #dbe4f0;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    flex-shrink: 0; border-radius: 0 0 14px 14px; background: #f8faff;
}
.ms-import-label {
    font-size: 11.5px; font-weight: 800; color: #475569;
    display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.ms-import-label i { color: #1d4ed8; font-size: 14px; }
.ms-import-date-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
    align-items: end; gap: 10px;
}
.ms-import-date-field { display: flex; flex-direction: column; gap: 5px; }
.ms-import-date-field label { font-size: 11px; font-weight: 800; color: #64748b; }
.ms-import-sep { color: #cbd5e1; font-weight: 800; padding-bottom: 10px; }
.ms-import-preview {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px;
    display: none;
}
.ms-import-preview.visible { display: block; }
.ms-import-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-import-preview-cell { display: flex; flex-direction: column; gap: 4px; }
.ms-import-preview-cell + .ms-import-preview-cell { border-left: 1px solid #e2e8f0; padding-left: 12px; }
.ms-import-preview-lbl { font-size: 10.5px; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.ms-import-preview-val { font-size: 18px; font-weight: 800; line-height: 1.1; }
.ms-import-preview-val.src { color: #0284c7; }
.ms-import-preview-val.dst { color: #1d4ed8; }
.ms-import-preview-sub { font-size: 11px; color: #64748b; font-weight: 700; }
.ms-import-note {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0;
    font-size: 11.5px; color: #64748b; font-weight: 700;
}
/* Pattern E — Variant 2 (neutral glossy secondary), CLAUDE.md §10.5 */
.ms-import-btn-check {
    position: relative; overflow: hidden;
    height: 38px; padding: 0 16px; border-radius: 10px;
    border: 1px solid rgba(15,23,42,.1); color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 8px 16px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.ms-import-btn-check::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%); }
.ms-import-btn-check i { position: relative; }
.ms-import-btn-check:hover:not(:disabled) {
    background: linear-gradient(180deg, #fff 0%, #eff6ff 100%); border-color: #93c5fd; color: #1d4ed8;
    transform: translateY(-1.5px);
    box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 24px -12px rgba(29,78,216,.22), inset 0 1px 0 rgba(255,255,255,.8);
}
.ms-import-btn-check:active:not(:disabled) { transform: translateY(0) scale(.97); }
.ms-import-btn-check:disabled { opacity: .55; cursor: not-allowed; }
.ms-import-btn-cancel {
    position: relative; overflow: hidden;
    height: 36px; padding: 0 18px; border-radius: 10px;
    border: 1px solid rgba(15,23,42,.1); color: #475569;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 8px 16px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
}
.ms-import-btn-cancel::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%); }
.ms-import-btn-cancel:hover {
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%); color: #334155;
    transform: translateY(-1.5px);
    box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 24px -12px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.8);
}
.ms-import-btn-cancel:active { transform: translateY(0) scale(.97); }

/* Pattern E — Variant 1 (solid glossy primary), CLAUDE.md §10.5 */
.ms-import-btn-import {
    position: relative; overflow: hidden;
    height: 36px; padding: 0 20px; border-radius: 10px; border: none; color: #fff;
    background: linear-gradient(180deg, #5b9dff 0%, #1d4ed8 55%, #1739a8 100%);
    font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 10px 18px -10px rgba(29,78,216,.55), inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), filter .18s ease;
}
.ms-import-btn-import::before { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%); }
.ms-import-btn-import i { position: relative; }
.ms-import-btn-import:hover:not(:disabled) {
    filter: brightness(1.05); transform: translateY(-1.5px);
    box-shadow: 0 1px 1px rgba(15,23,42,.28), 0 14px 24px -10px rgba(29,78,216,.6), inset 0 1px 0 rgba(255,255,255,.45);
}
.ms-import-btn-import:active:not(:disabled) { transform: translateY(0) scale(.96); }
.ms-import-btn-import:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ms-import-trigger-card {
    background: #fff; border-radius: 12px; border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
    padding: 14px 20px; margin-top: 16px;
    display: flex; align-items: center; gap: 16px;
    cursor: pointer; transition: box-shadow .18s, border-color .18s;
    text-decoration: none;
}
.ms-import-trigger-card:hover { border-color: #93c5fd; box-shadow: 0 4px 16px rgba(29,78,216,.12); }
.ms-import-trigger-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg,#1e40af,#1d4ed8);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: white; box-shadow: 0 4px 12px rgba(29,78,216,.28);
}
.ms-import-trigger-title { font-size: 13.5px; font-weight: 800; color: #1e293b; }
.ms-import-trigger-sub { font-size: 11.5px; color: #94a3b8; font-weight: 600; margin-top: 2px; }
.ms-import-trigger-arrow { margin-left: auto; font-size: 18px; color: #94a3b8; transition: color .15s; }
.ms-import-trigger-card:hover .ms-import-trigger-arrow { color: #1d4ed8; }

/* ──── Sidebar Toggle Button ──── */
.sidebar-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px 11px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.sidebar-toggle-btn:hover {
    background: #eef2ff;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
}
.sidebar-toggle-btn:active { transform: scale(0.88); }

.hbg-line {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #64748b;
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1),
                transform 0.3s cubic-bezier(0.4,0,0.2,1),
                opacity 0.3s ease,
                background 0.2s ease;
}
.hbg-line:nth-child(1) { width: 18px; }
.hbg-line:nth-child(2) { width: 12px; }
.hbg-line:nth-child(3) { width: 18px; }

/* Hover — เส้นกลางขยาย พร้อมเปลี่ยนสี */

.sidebar-toggle-btn:hover .hbg-line { background: #4f46e5; }
.sidebar-toggle-btn:hover .hbg-line:nth-child(2) { width: 18px; }


/* Responsive adjustments */
@media (max-width: 1200px) {
    .main-wrapper {
        margin-left: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
    .topbar {
        padding: 0 16px;
        left: 0;
        gap: 12px;
    }
    .content-area {
        padding: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }
    .stats-grid-small {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid-large {
        grid-template-columns: repeat(2, 1fr);
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Topbar icon row มีหลายปุ่ม (home/back/forward/refresh/apps/bell/database/
   fullscreen/profile) เมื่อจอแคบลง .topbar เป็น flex แถวเดียวไม่ wrap และ
   body มี overflow-x:hidden ปุ่มที่ล้นขอบจะถูกตัดหายไปแบบไม่เป็นระเบียบ
   จึงตัดปุ่มที่ไม่จำเป็นที่สุดออกก่อนแบบตั้งใจ (เหลือ home/refresh/apps/bell/
   profile ที่ใช้บ่อยที่สุด) เพื่อไม่ให้ล้นแบบสุ่ม */
@media (max-width: 1040px) {
    #msNavBackBtn,
    #msNavForwardBtn,
    #msDataDictBtn,
    #msFsToggleBtn {
        display: none;
    }
}

@media (max-width: 640px) {
    body.ms-app-body {
        --topbar-height: 60px;
    }
    .topbar {
        height: var(--topbar-height);
    }
    .topbar-brand {
        gap: 0;
    }
    .topbar-brand-icon {
        width: 30px;
        height: 38px;
        flex-basis: 30px;
    }
    .topbar-brand-text {
        display: none;
    }
    .hospital-name {
        font-size: 14px;
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hospital-code {
        display: none;
    }
    .user-name {
        display: none;
    }
    .user-profile {
        gap: 12px;
    }
    .title-bar {
        padding: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .title-bar-left {
        flex-direction: column;
        gap: 12px;
    }
    .title-bar-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    .title-bar-content h1 {
        font-size: 18px;
    }
    .title-bar-content p {
        font-size: 12px;
    }
    .stats-grid-large {
        grid-template-columns: 1fr !important;
    }
    .stats-grid-small {
        grid-template-columns: 1fr !important;
    }
    .guest-actions {
        gap: 8px !important;
    }
    .guest-btn span {
        display: none; /* Hide text if we add span later, or just reduce padding */
    }
    .guest-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

/* Guest Actions (topbar, not logged in) — Apple style */
.guest-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.guest-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease, border-color .2s ease;
}
.guest-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.guest-btn i {
    position: relative;
    font-size: 15px;
}
.guest-btn:hover { transform: translateY(-1.5px); }
.guest-btn:active { transform: translateY(0) scale(.98); }

.register-btn {
    color: var(--primary-blue);
    background: linear-gradient(180deg, #eff6ff 0%, #e0edff 100%);
    border-color: #dbe7ff;
    box-shadow:
        0 1px 1px rgba(15,23,42,.03),
        0 8px 16px -12px rgba(59,130,246,.3),
        inset 0 1px 0 rgba(255,255,255,.7);
}
.register-btn:hover {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 24px -12px rgba(59,130,246,.38),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.download-btn {
    color: #0d9488;
    background: linear-gradient(180deg, #f0fdfa 0%, #ddfaf4 100%);
    border-color: #ccfbf1;
    box-shadow:
        0 1px 1px rgba(15,23,42,.03),
        0 8px 16px -12px rgba(13,148,136,.3),
        inset 0 1px 0 rgba(255,255,255,.7);
}
.download-btn:hover {
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    border-color: #99f6e4;
    box-shadow:
        0 1px 1px rgba(15,23,42,.04),
        0 14px 24px -12px rgba(13,148,136,.38),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.login-btn {
    color: #fff;
    background: linear-gradient(180deg, #5b9dff 0%, var(--primary-blue) 55%, #1d6fe0 100%);
    border: none;
    box-shadow:
        0 1px 1px rgba(23,64,140,.3),
        0 14px 26px -10px rgba(59,130,246,.55),
        0 6px 12px -6px rgba(59,130,246,.4),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.login-btn:hover {
    background: linear-gradient(180deg, #6ba8ff 0%, #2f7dfb 55%, #1a63cc 100%);
    box-shadow:
        0 1px 1px rgba(23,64,140,.32),
        0 18px 30px -10px rgba(59,130,246,.6),
        0 8px 16px -6px rgba(59,130,246,.45),
        inset 0 1px 0 rgba(255,255,255,.45);
}

/* Responsive Form Helpers */
.responsive-grid {
    display: grid;
    gap: 16px;
}

@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Profile & Services Dropdowns */
.profile-menu-container,
.services-menu-container,
.apps-menu-container {
    position: relative;
}

.apps-menu-btn.active {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    color: #6d28d9;
    box-shadow: 0 8px 18px rgba(124,58,237,0.16), inset 0 1px 0 rgba(255,255,255,0.86);
}

.apps-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(920px, calc(100vw - 28px));
    max-height: min(76vh, 720px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 210;
    overflow: visible;
}

.apps-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.apps-dropdown-inner {
    height: 100%;
    max-height: min(76vh, 720px);
    padding: 12px;
    background:
        linear-gradient(135deg, #eef6ff 0%, #f8fbff 38%, #ffffff 72%),
        #ffffff;
    border: 1px solid #dbe7f6;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.02),
        0 10px 24px rgba(15,23,42,0.08),
        0 24px 54px rgba(15,23,42,0.16);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #2852c8 rgba(255,255,255,.6);
}
.apps-dropdown-inner::-webkit-scrollbar { width: 9px; }
.apps-dropdown-inner::-webkit-scrollbar-track {
    background: rgba(255,255,255,.55);
    border-radius: 999px;
    margin: 3px 0;
}
.apps-dropdown-inner::-webkit-scrollbar-thumb {
    background-color: #2852c8;
    border-radius: 999px;
    border: 2px solid #fff;
    background-clip: padding-box;
    box-shadow: 0 1px 3px rgba(15,23,42,.28);
    transition: background-color .2s ease;
}
.apps-dropdown-inner::-webkit-scrollbar-thumb:hover { background-color: #1d4ed8; }

.apps-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid #dfeaf7;
}

.apps-dropdown-head h2 {
    margin: 0;
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
}

/* Close button — standard floating corner X (CLAUDE.md §13.5) */
.apps-dropdown-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15,23,42,0.20);
    transition: background .2s, color .2s, box-shadow .2s, transform .2s;
    z-index: 3;
}
.apps-dropdown-close i { font-size: 18px; line-height: 1; }
.apps-dropdown-close:hover {
    background: #f8fafc;
    color: #111827;
    box-shadow: 0 10px 24px rgba(15,23,42,0.26);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .apps-dropdown-close { top: -12px; right: -12px; width: 36px; height: 36px; }
}

.apps-dropdown-kicker {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.apps-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0 0;
}

.apps-category-card {
    --apps-tone: #2852c8;
    --apps-tone-bg: #dbeafe;
    position: relative;
    min-height: 76px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 24px -16px rgba(15,23,42,.18);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
}

.apps-category-card:hover,
.apps-category-card:focus-visible {
    border-color: rgba(15,23,42,.14);
    background: #f8fafc;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
    outline: none;
}

.apps-category-card.active {
    border-color: var(--apps-tone, #2852c8);
    background: color-mix(in srgb, var(--apps-tone-bg, #dbeafe) 45%, #fff);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--apps-tone, #2852c8) 16%, transparent);
}

.apps-category-icon,
.apps-app-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--apps-tone-bg, #dbeafe) 100%, #ffffff 0%) 0%, var(--apps-tone-bg, #dbeafe) 100%);
    color: var(--apps-tone, #2852c8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 2px 5px rgba(15,23,42,0.08);
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.apps-category-card:hover .apps-category-icon,
.apps-app-card:hover .apps-app-icon {
    transform: scale(1.06);
}

.apps-category-card.active .apps-category-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--apps-tone, #2852c8) 88%, #fff 12%) 0%, var(--apps-tone, #2852c8) 100%);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px color-mix(in srgb, var(--apps-tone, #2852c8) 55%, transparent);
}

.apps-category-icon i,
.apps-app-icon i {
    font-size: 18px;
}

.apps-category-copy,
.apps-app-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.apps-category-title,
.apps-app-title {
    color: #111827;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.apps-category-desc,
.apps-app-desc {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.apps-category-count {
    min-width: 25px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: #2852c8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    align-self: flex-start;
}

.apps-category-card.active .apps-category-count {
    background: #ffffff;
    color: #1e3a8a;
}

.apps-panels {
    padding-top: 10px;
}

.apps-panel {
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    animation: appsPanelIn 0.18s ease;
}

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

.apps-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 6px 14px;
    border: 1.5px solid var(--apps-tone, #2852c8);
    border-radius: 999px;
    background: var(--apps-tone, #2852c8);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--apps-tone, #2852c8) 30%, transparent);
}

.apps-panel-title i {
    color: #ffffff;
    font-size: 15px;
}

.apps-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.apps-empty-state {
    grid-column: 1 / -1;
    min-height: 74px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.apps-empty-state i {
    color: var(--primary-blue);
    font-size: 17px;
}

.apps-app-card {
    --apps-tone: #2852c8;
    --apps-tone-bg: #dbeafe;
    position: relative;
    overflow: hidden;
    min-height: 74px;
    padding: 10px;
    border: 1px solid rgba(216,231,255,0.9);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    box-shadow:
        0 1px 1px rgba(15,23,42,0.03),
        0 10px 22px -16px rgba(15,23,42,0.35),
        inset 0 1px 0 rgba(255,255,255,0.9);
    transition: background 0.22s cubic-bezier(.2,.8,.2,1), border-color 0.22s ease, box-shadow 0.28s cubic-bezier(.2,.8,.2,1), transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.apps-app-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 46%);
    pointer-events: none;
}

.apps-app-card:hover,
.apps-app-card:focus-visible {
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    border-color: color-mix(in srgb, var(--apps-tone, #2852c8) 45%, #ffffff);
    box-shadow:
        0 1px 1px rgba(15,23,42,0.04),
        0 16px 30px -14px color-mix(in srgb, var(--apps-tone, #2852c8) 38%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.95);
    outline: none;
    transform: translateY(-2px);
}

.apps-tone-indigo  { --apps-tone: #4338ca; --apps-tone-bg: #e0e7ff; }
.apps-tone-amber   { --apps-tone: #d97706; --apps-tone-bg: #fef3c7; }
.apps-tone-blue    { --apps-tone: #2563eb; --apps-tone-bg: #dbeafe; }
.apps-tone-sky     { --apps-tone: #0284c7; --apps-tone-bg: #e0f2fe; }
.apps-tone-violet  { --apps-tone: #7c3aed; --apps-tone-bg: #ede9fe; }
.apps-tone-emerald { --apps-tone: #059669; --apps-tone-bg: #d1fae5; }
.apps-tone-cyan    { --apps-tone: #0891b2; --apps-tone-bg: #cffafe; }
.apps-tone-rose    { --apps-tone: #e11d48; --apps-tone-bg: #ffe4e6; }
.apps-tone-teal    { --apps-tone: #0d9488; --apps-tone-bg: #ccfbf1; }
.apps-tone-orange  { --apps-tone: #ea580c; --apps-tone-bg: #ffedd5; }
/* ไอคอนเมนูแอปห้ามเป็นสีดำ/เทาเข้ม — slate คงไว้เป็น alias ของ teal เผื่อมีที่อ้างถึง */
.apps-tone-slate   { --apps-tone: #0d9488; --apps-tone-bg: #ccfbf1; }

@media (max-width: 980px) {
    .apps-dropdown {
        position: fixed;
        top: calc(var(--topbar-height, 64px) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - var(--topbar-height, 64px) - 24px);
        transform-origin: top center;
    }

    .apps-category-grid,
    .apps-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .apps-dropdown {
        top: calc(var(--topbar-height, 64px) + 8px);
        max-height: calc(100vh - var(--topbar-height, 64px) - 24px);
    }

    .apps-category-grid,
    .apps-card-grid {
        grid-template-columns: 1fr;
    }
}

.services-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.services-info:hover {
    background-color: var(--bg-light);
}

.services-info i:first-child {
    font-size: 20px;
    color: var(--primary-blue);
}

.services-info .user-name {
    font-weight: 700;
}

.profile-dropdown,
.services-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.02),
        0 4px 6px rgba(0,0,0,0.04),
        0 16px 32px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
    overflow: hidden;
}

.profile-dropdown.active,
.services-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown header */
.dropdown-header {
    padding: 14px 16px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 11px;
}

.dropdown-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: white;
    flex-shrink: 0;
}

.dropdown-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dropdown-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-hospital {
    font-size: 11.5px;
    color: #9ca3af;
    font-weight: 500;
}

/* Items padding wrapper */
.dropdown-items {
    padding: 6px;
}

.dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    color: #374151;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: #f8fafc;
}

.dropdown-item i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #6b7280;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.dropdown-item:hover i {
    background: #eff6ff;
    color: #3b82f6;
}

/* Logout item */
.dropdown-item.text-red { color: #dc2626 !important; }
.dropdown-item.text-red i {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}
.dropdown-item.text-red:hover { background: #fff5f5; }
.dropdown-item.text-red:hover i {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.text-red { color: #ef4444 !important; }

/* Sidebar Version */
.sidebar-version {
    padding: 12px 18px;
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    font-weight: 500;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ════════════════════════════════
   Select2 — Global Standard Style
   ════════════════════════════════ */
.select2-container--default .select2-selection--single {
    height: auto !important;
    padding: 10px 36px 10px 14px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
    border-color: var(--page-primary) !important;
    background: white !important;
    box-shadow: 0 0 0 3px var(--page-primary-ring) !important;
    outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    color: #111827 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
}
/* ลบ border เดิมของ Select2 ที่ถูก override */

.select2-container--default .select2-selection--single:focus { outline: none; }
.select2-container--default .select2-selection--single .select2-selection__clear {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 13px; font-weight: 700;
    line-height: 18px; text-align: center;
    margin-top: 11px; margin-right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: #fee2e2; color: #ef4444;
}
/* ──── Medeesoft Standard: Toggle Switch ──── */
.mt-switch-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mt-switch-label { font-size: 12px; font-weight: 700; min-width: 56px; }
.mt-switch-label.on  { color: #16a34a; }
.mt-switch-label.off { color: #9ca3af; }
.mt-switch { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; }
.mt-switch input { opacity: 0; width: 0; height: 0; }
.mt-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #d1d5db; transition: .25s; border-radius: 20px;
}
.mt-slider::before {
    position: absolute; content: "";
    height: 14px; width: 14px; left: 3px; bottom: 3px;
    background: white; transition: .25s; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mt-switch input:checked + .mt-slider { background: #16a34a; }
.mt-switch input:checked + .mt-slider::before { transform: translateX(20px); }
.mt-switch.loading { opacity: 0.5; pointer-events: none; }

/* ── Select2 Selection Box — Global Standard (CLAUDE.md §11.1) ──
   ทรงกล่อง Select2 ตอนปิด (default) ของทั้งโปรเจกต์ — จงใจไม่ใส่ scope class
   และไม่ใส่ !important เพื่อให้หน้าที่มี override เฉพาะบริบทเดิมอยู่แล้ว
   (filter-row 38px ตาม §11, DataTable toolbar ตาม §10, popup เล็ก ๆ
   ที่ตั้งใจย่อขนาด) ยังคงชนะตาม CSS cascade/specificity ตามปกติ
   ห้ามคัดลอกก้อนนี้ไปเขียนซ้ำในหน้าใหม่ — ปล่อยให้ rule นี้ทำงานให้อัตโนมัติ */
.select2-container--default .select2-selection--single {
    height: 40px;
    min-height: 40px;
    padding: 0 38px 0 12px;
    border: 1.5px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 37px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    top: 0;
    right: 10px;
}

.select2-dropdown {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    background: white !important;
    animation: select2Popup 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding: 8px 0 !important;
    z-index: 9999;
}
@keyframes select2Popup {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.select2-results__options { padding: 0 8px !important; }
.select2-results__option {
    padding: 9px 14px !important;
    border-radius: 10px !important;
    margin: 2px 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #f0f9ff !important;
    color: #0369a1 !important;
}

.select2-search--dropdown { padding: 10px 12px 6px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 10px !important;
    border: 1.5px solid #f1f5f9 !important;
    background: #f8fafc !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    outline: none !important;
}

/* ── Flatpickr Month Select2 Dropdown ── */
.fp-month-sel2-dropdown,
.fp-year-sel2-dropdown,
.select2-dropdown.fp-month-sel2-dropdown,
.select2-dropdown.fp-year-sel2-dropdown,
.select2-container--open .fp-month-sel2-dropdown,
.select2-container--open .fp-year-sel2-dropdown {
    z-index: 1000000 !important;
    min-width: 180px !important;
}

/* ── Flatpickr Sunday — header + dates (week starts Mon, Sun = last col) ── */
/* Flatpickr Header Standard: equal month/year controls + weekday spacing */
html body .flatpickr-calendar .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding-top: 4px !important;
}
html body .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 96px !important;
    min-width: 96px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
}
html body .flatpickr-calendar .flatpickr-current-month input.cur-year {
    width: 100% !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 26px !important;
    color: #1e293b !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}
html body .flatpickr-calendar .select2-container {
    width: 96px !important;
    min-width: 96px !important;
}
html body .flatpickr-calendar .select2-container .select2-selection--single {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 24px 0 8px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
html body .flatpickr-calendar .select2-selection__rendered {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 26px !important;
    padding: 0 !important;
}
html body .flatpickr-calendar .select2-selection__arrow {
    height: 28px !important;
    right: 4px !important;
}
html body .flatpickr-calendar .flatpickr-weekdays {
    margin-top: 10px !important;
}

/* Medeesoft Flatpickr project standard: month + BE year select controls */
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-current-month .numInputWrapper,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-current-month .numInputWrapper.fp-year-hidden,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-current-month input.cur-year {
    display: none !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-prev-month,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-next-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111827 !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-prev-month svg,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-next-month svg {
    display: none !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-prev-month i,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-next-month i {
    font-family: "Phosphor-Bold" !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-prev-month:hover,
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-next-month:hover {
    color: #2852c8 !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-monthDropdown-months,
html body .flatpickr-calendar.ms-calendar-standard .fp-be-year-select {
    width: 96px !important;
    min-width: 96px !important;
    height: 28px !important;
    padding: 0 26px 0 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%) !important;
    color: #2852c8 !important;
    font-family: 'Sarabun-regular', 'Sarabun', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 26px !important;
    outline: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background .2s ease !important;
}
html body .flatpickr-calendar.ms-calendar-standard .flatpickr-monthDropdown-months:hover,
html body .flatpickr-calendar.ms-calendar-standard .fp-be-year-select:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%) !important;
}
html body .flatpickr-calendar.ms-calendar-standard .fp-be-year-select:focus {
    box-shadow: 0 0 0 3px rgba(40, 82, 200, .12) !important;
}
html body .flatpickr-calendar.ms-calendar-standard .select2-container {
    width: 96px !important;
    min-width: 96px !important;
}
html body .flatpickr-calendar.ms-calendar-standard .select2-container .select2-selection--single {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 24px 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
html body .flatpickr-calendar.ms-calendar-standard .select2-selection__rendered {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #2852c8 !important;
    line-height: 26px !important;
    padding: 0 !important;
}
html body .flatpickr-calendar.ms-calendar-standard .select2-selection__arrow {
    height: 28px !important;
    right: 4px !important;
}

/* ── Flatpickr Popup Standard (CLAUDE.md §14.1) ─────────────────────────── */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display:none !important; }
/* Apple-style calendar card: neutral hairline border + soft diffuse shadow (2026-09-22) */
.flatpickr-calendar {
    border-radius:20px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    box-shadow:0 2px 10px rgba(15,23,42,.06), 0 28px 56px -18px rgba(15,23,42,.26) !important;
    overflow:hidden !important;
    margin-top:8px !important;
    animation:select2Popup .25s cubic-bezier(.165,.84,.44,1);
}
.flatpickr-monthDropdown-months { font-size:11px !important; font-weight:800 !important; }
.flatpickr-current-month .cur-month { font-size:11px !important; font-weight:800 !important; }
.flatpickr-current-month .numInputWrapper input.numInput { font-size:11px !important; font-weight:800 !important; }

/* วันที่ในตารางปฏิทิน (จ อ พ ... และเลขวัน) ให้ขนาดเท่ากับกล่องเดือน/ปี (12px) */
.flatpickr-calendar .flatpickr-weekday { font-size: 12px !important; font-weight: 800 !important; }
.flatpickr-day { font-size: 12px !important; font-weight: 700 !important; }
/* อัปเดต 2026-09-27: MSCalendar บังคับ firstDayOfWeek:0 ทุกปฏิทินในโปรเจกต์ (ms_calendar.js)
   วันอาทิตย์จึงย้ายมาคอลัมน์ซ้ายสุด (:first-child / nth-child(7n+1)) แทนขวาสุดแบบเดิม (CLAUDE.md §14) */
.flatpickr-weekday:first-child { color: #ef4444 !important; font-weight: 800 !important; }
.flatpickr-days .flatpickr-day:nth-child(7n+1) { color: #ef4444 !important; font-weight: 800 !important; }
.flatpickr-days .flatpickr-day.selected:nth-child(7n+1),
.flatpickr-days .flatpickr-day.selected.startRange:nth-child(7n+1),
.flatpickr-days .flatpickr-day.selected.endRange:nth-child(7n+1) { color: white !important; }

/* Apple-style day circles (อัปเดต — รอบ 4, 2026-09-27): hover เป็น neutral gray tint แทนสีธีม
   (ตาม pattern เดียวกับปุ่ม pagination/stat card ที่ปรับไปก่อนหน้านี้ — สี accent สงวนไว้
   เฉพาะวงกลม .selected/.today เท่านั้น)
   รอบ 4: เปลี่ยนสีอ้างอิงจาก --page-primary (สีเฉพาะหน้า เช่น เขียวของ acc_opd) มาเป็น
   --ms-titlebar-blue (น้ำเงินระบบ #2852c8) แทน — ให้ตรงกับสีของลูกศรเปลี่ยนเดือน/hover ที่เป็น
   น้ำเงินระบบตายตัวอยู่แล้ว (ดู .flatpickr-prev-month:hover ด้านบน) ปฏิทินจึงมี identity สีเดียวกัน
   ทุกหน้าไม่ว่าจะเปิดจากโมดูลไหน แทนที่จะเปลี่ยนสีตามธีมของแต่ละหน้า (เดิมรอบ 1-3 อ้างอิง page-primary)
   รอบ 3 เดิม: .today เปลี่ยนจากวงแหวนเส้นบาง (border 1px ที่แทบสังเกตไม่เห็น) มาเป็นวงกลมพื้นสี
   โทนอ่อน + ตัวเลขสีเข้มตัวหนา (แบบ "วันนี้" ใน Calendar ของ iOS/macOS) — .selected ยังเป็นวงกลม
   พื้นสีทึบเหมือนเดิมแต่เงาเป็นสองชั้น (เงานุ่มใกล้ + แสงฟุ้งสีธีมจาง) ให้มีมิติแบบแคปซูลแก้ว
   (Pattern E) และเพิ่ม press feedback ตอนกดค้าง */
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: rgba(15,23,42,.06) !important;
    border-color: transparent !important;
    color: #1e293b !important;
}
.flatpickr-day.today {
    background: color-mix(in srgb, var(--ms-titlebar-blue, #2852c8) 14%, #fff) !important;
    border-color: transparent !important;
    color: var(--ms-titlebar-blue, #2852c8) !important;
    font-weight: 800 !important;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: color-mix(in srgb, var(--ms-titlebar-blue, #2852c8) 22%, #fff) !important;
    border-color: transparent !important;
    color: var(--ms-titlebar-blue, #2852c8) !important;
}
.flatpickr-day.today:active {
    transform: scale(.92);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--ms-titlebar-blue, #2852c8) !important;
    border-color: var(--ms-titlebar-blue, #2852c8) !important;
    color: #fff !important;
    /* เงาสองชั้น: ชิดใกล้บาง (มิติของวงกลม) + แสงฟุ้งสีธีมจาง (glow) ระยะสั้น — คุมความยาว blur
       ให้พอดีไม่ให้โดน .flatpickr-days ของ vendor (overflow:hidden) ตัดที่แถวบนสุด/ขอบตาราง */
    box-shadow:
        0 1px 2px rgba(15,23,42,.18),
        0 3px 8px -2px var(--ms-titlebar-blue-shadow, rgba(40,82,200,.5)) !important;
    transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: var(--ms-titlebar-blue, #2852c8) !important;
    border-color: var(--ms-titlebar-blue, #2852c8) !important;
    color: #fff !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.2),
        0 4px 10px -2px var(--ms-titlebar-blue-shadow, rgba(40,82,200,.6)) !important;
}
.flatpickr-day.selected:active,
.flatpickr-day.startRange:active,
.flatpickr-day.endRange:active {
    transform: scale(.9);
}

/* ── Global Focus Ring (uses --page-primary per page) ── */
.form-control:focus,
.fp-input:focus,
.register-form-control:focus,
.captcha-input:focus {
    border-color: var(--page-primary) !important;
    box-shadow: 0 0 0 3px var(--page-primary-ring) !important;
    background: white !important;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--page-primary) !important;
    box-shadow: 0 0 0 2px var(--page-primary-ring) !important;
    outline: none !important;
}

/* ช่องกรอกใน login modal ใช้ .ms-input กลาง (§16.2) — ไม่ต้อง override focus ที่นี่ */

#loginModal .login-modal-close:focus-visible,
#loginModal .lm-close-btn:focus-visible,
#loginModal .ms-input-eye:focus-visible,
#loginModal .lm-secondary-btn:focus-visible,
#loginModal #lmSubmitBtn:focus-visible {
    box-shadow: 0 0 0 3px #e8edf7 !important;
    outline: 2px solid #d7deef !important;
    outline-offset: 2px !important;
}

/* SweetAlert2 Global Fixes */
.swal2-container {
    z-index: 99999 !important;
}

.swal2-container, 
.swal2-title, 
.swal2-content, 
.swal2-html-container,
.swal2-confirm,
.swal2-cancel,
.swal2-input,
.swal2-textarea,
.swal2-select {
    font-family: var(--font-main) !important;
    font-weight: 700 !important; /* Bold as requested */
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--page-primary) !important;
    background: white !important;
    box-shadow: 0 0 0 3px var(--page-primary-ring) !important;
    outline: none !important;
}

.swal2-styled:focus,
.swal2-styled:focus-visible {
    /* focus ring กลางตาม CLAUDE.md §12 — ห้ามใช้สีตามธีมหน้า */
    box-shadow: 0 0 0 3px #e8edf7 !important;
    outline: none !important;
}

button {
    font-family: var(--font-main) !important;
}

/* CAPTCHA Styling */
.captcha-container {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.captcha-image-box {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.captcha-image-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

.captcha-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.captcha-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.2s;
    outline: none; /* Remove focus outline */
}

.captcha-link:hover {
    color: var(--primary-hover);
    text-decoration: none; /* No underline on hover */
}

.captcha-link:focus {
    outline: none;
}

.captcha-link i {
    font-size: 16px;
}

.captcha-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.captcha-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.captcha-input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-main) !important;
    background: var(--bg-light);
    transition: 0.2s;
}

.captcha-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Profile Banner Card */
.profile-banner-card {
    display: block;
    width: 100%;
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
}

.profile-banner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.profile-banner-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .profile-banner-card {
        border-radius: 12px;
    }
}

/* Custom Image Stat Card */
.stat-card-custom-img {
    padding: 0 !important;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card-custom-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.stat-card-custom-img:hover img {
    filter: blur(0);
    transform: scale(1.08);
}

.stat-card-custom-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
    filter: none;
    transform: scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-custom-img:hover img {
    transform: scale(1.05);
    filter: brightness(0.85); /* Subtle dim on hover for better text contrast */
}

.banner-with-text {
    position: relative;
}

.banner-overlay-text {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 18px;
    border-radius: 20px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Sarabun-regular', var(--font-main) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 1);
    z-index: 2;
    pointer-events: none;
    transition: all 0.3s ease;
    letter-spacing: 0.2px;
}

.banner-overlay-text.left {
    right: auto;
    left: 12px;
}

.stat-card-custom-img:hover .banner-overlay-text {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}






.banner-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.bg-green-gradient {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.bg-purple-gradient {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

.bg-orange-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.medical-graphic {
    display: flex;
    align-items: center;
    padding-left: 24px;
    overflow: hidden;
    position: relative;
}

.medical-graphic i {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
    transform: rotate(-15deg);
    position: absolute;
    left: -10px;
    bottom: -10px;
}
/* DataTables Bootstrap 5 Style Pagination Override */
.dataTables_wrapper {
    max-width: 100%;
    min-width: 0;
}

.dataTables_wrapper .dataTables_scroll {
    max-width: 100%;
}

/* ── DataTable thead global standard (CLAUDE.md §10.2) ──────────────────────
   อัปเดต (Apple style — ต้นแบบ apps/acc_opd/index.php): เปลี่ยนจากแถบน้ำเงินเข้มตัน
   +ตัวอักษรขาว มาเป็นพื้น gradient ฟ้าอ่อน + ตัวอักษรน้ำเงินเข้ม ให้เข้าธีมเดียวกับ
   badge/pill สีอ่อนที่ใช้ทั่วทั้งระบบ (Pattern F) แทนแถบสีทึบหนักแบบ reversed text
   เดิม — selector นี้มี specificity (0,1,3) สูงกว่า override เฉพาะหน้าส่วนใหญ่ที่เป็น
   รูปแบบ ".xxx-tbl thead th" (0,1,2) จึงครอบคลุมทั้งโปรเจกต์อัตโนมัติโดยไม่ต้องแก้
   ทีละไฟล์ — ถ้าเจอหน้าที่มี selector เฉพาะ (เช่น 2 class ประกบกัน หรือ ID) ที่ยัง
   แสดงแบบเก่าค้างอยู่ ให้ลบ background/color/border-bottom เฉพาะหน้านั้นทิ้ง */
table.dataTable thead th,
table.dataTable thead td {
    background:    linear-gradient(180deg, var(--ms-dt-thead-bg, #eef4ff) 0%, var(--ms-dt-thead-bg-to, #e6efff) 100%) !important;
    color:         var(--ms-dt-thead-color,  #2852C8) !important;
    border-bottom: 1.5px solid var(--ms-dt-thead-border, #c7d5f5) !important;
    border-top:    none !important;
    padding:       11px 12px !important;
    font-family:   'Sarabun-regular','Sarabun',sans-serif !important;
    font-size:     var(--fs-th, 11.5px) !important;
    font-weight:   800 !important;
    white-space:   nowrap;
    text-align:    center !important;
}

/* ══════════════════════════════════════════════════════════════════════
   .ms-table — ผิวตารางกลางสำหรับตาราง HTML ธรรมดาที่ไม่ใช่ DataTables
   (docs/standards/datatables.md §10.8) — หน้าตาเดียวกับ DataTable ทุกหน้า:
   thead = §10.2, แถว = เส้นคั่นบาง + hover §10.4, ปุ่มในเซลล์ = §10.7
   ใช้กับตารางเล็ก/อ้างอิง/สรุปที่ไม่ต้องค้นหา-แบ่งหน้า — ไม่ต้องโหลด DataTables JS
   :not(#ms-table-skin) เพิ่ม specificity ระดับ ID ให้ชนะ CSS thead เฉพาะหน้าเดิม
   (ไม่มี element ใดมี id นี้ ห้ามตั้ง id นี้ให้ element ใด)
   ══════════════════════════════════════════════════════════════════════ */
table.ms-table { border-collapse: collapse; }
table.ms-table:not(#ms-table-skin) thead th,
table.ms-table:not(#ms-table-skin) thead td {
    background:    linear-gradient(180deg, var(--ms-dt-thead-bg, #eef4ff) 0%, var(--ms-dt-thead-bg-to, #e6efff) 100%) !important;
    color:         var(--ms-dt-thead-color,  #2852C8) !important;
    border-bottom: 1.5px solid var(--ms-dt-thead-border, #c7d5f5) !important;
    border-top:    none !important;
    border-left:   none !important;
    border-right:  none !important;
    padding:       11px 12px !important;
    font-family:   'Sarabun-regular','Sarabun',sans-serif !important;
    font-size:     var(--fs-th, 11.5px) !important;
    font-weight:   800 !important;
    white-space:   nowrap;
    text-align:    center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* แถวข้อมูล: specificity (0,1,4) ชนะ ".xxx-table tbody td" ทั่วไป แต่แพ้ cell ที่มี class เฉพาะ
   (เช่น td.amt / td.total) — ให้สีพิเศษของแต่ละหน้ายังอยู่ */
table.ms-table > tbody > tr > td {
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
table.ms-table > tbody > tr:last-child > td { border-bottom: none; }
table.ms-table > tbody > tr:hover > td { background: var(--ms-dt-hover-bg, #F0F8FF); }
table.ms-table > tfoot > tr > td,
table.ms-table > tfoot > tr > th {
    background: #f8faff;
    border-top: 1.5px solid var(--ms-dt-thead-border, #c7d5f5);
    font-weight: 800;
}

/* ปุ่มเรียงลำดับ (sort caret) — ใช้ไอคอน Phosphor จริง (Regular weight) แทนการวาด
   สามเหลี่ยมเอง/glyph Unicode "▲▼" — codepoint คัดลอกจาก assets/icons/regular/style.css
   ยังไม่ได้เรียง (.sorting): ph-caret-up-down (\e140) บอกใบ้ว่าคอลัมน์นี้เรียงได้
   กำลังเรียงขึ้น (.sorting_asc): ph-caret-up (\e13c) ทึบ สีน้ำเงินเข้ม
   กำลังเรียงลง (.sorting_desc): ph-caret-down (\e136) ทึบ สีน้ำเงินเข้ม
   (สี accent สงวนไว้จุดเล็กจุดเดียวตาม §10.5) ใช้ :before เดี่ยวพอ ไม่ต้องมี :after แล้ว */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 22px !important;
}
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
    font-family: "Phosphor-Bold" !important;
    font-weight: normal !important;
    speak:       never;
    content:     "\e140" !important;
    position:    absolute !important;
    top:         50% !important;
    bottom:      auto !important;
    right:       8px !important;
    transform:   translateY(-50%) !important;
    width:       auto !important;
    height:      auto !important;
    border:      none !important;
    font-size:   13px !important;
    line-height: 1 !important;
    color:       #b7c3de !important;
    opacity:     .85 !important;
    transition:  color .18s ease, opacity .18s ease;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    content: none !important;
}
table.dataTable thead th.sorting_asc:before {
    content: "\e13c" !important;
    color:   var(--ms-dt-thead-color, #2852C8) !important;
    opacity: 1 !important;
}
table.dataTable thead th.sorting_desc:before {
    content: "\e136" !important;
    color:   var(--ms-dt-thead-color, #2852C8) !important;
    opacity: 1 !important;
}

/* คอลัมน์ที่กำลังเรียงอยู่ (Whisper Blue) — หัวคอลัมน์เข้มขึ้นเล็กน้อย + เซลล์ข้อมูล
   ทั้งคอลัมน์ทั้งแถวเป็นสีเดียวกันแบบจางบางๆ ให้เห็นว่ากำลังเรียงคอลัมน์ไหนอยู่
   ใช้ class .sorting_1 ที่ DataTables ใส่ให้ทุก td ในคอลัมน์ที่ active sort อัตโนมัติ
   (orderClasses option ค่า default คือ true อยู่แล้ว ไม่ต้องเปิดเพิ่ม) */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background: #dde9ff !important;
}
table.dataTable tbody td.sorting_1 {
    background: rgba(40,82,200,.045) !important;
}

/* ── หัวคอลัมน์ 2 บรรทัด (CLAUDE.md §10.2) ───────────────────────────────────
   สำหรับ thead th ที่รวม 2 field ไว้ในคอลัมน์เดียว (เช่น "HN / เลขบัตรประชาชน",
   "วันที่ / เวลา") ให้ขึ้น 2 บรรทัดเหมือนที่ tbody td ของคอลัมน์นั้นแสดงผลอยู่แล้ว
   (dep-sg-stack pattern) แทนข้อความเดียวคั่นด้วย "/" บรรทัดเดียว — ต้นแบบ
   apps/acc_opd/index.php ห้ามเขียน CSS นี้ซ้ำในหน้าใหม่ ใช้ class ตรงๆ:
   <th><span class="dt-th-stack"><span class="dt-th-stack-main">HN</span>
   <span class="dt-th-stack-sub">เลขบัตรประชาชน</span></span></th> */
table.dataTable thead th .dt-th-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.4;
    gap: 1px;
}
table.dataTable thead th .dt-th-stack-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--ms-dt-thead-color, #2852C8);
    opacity: .62;
}

/* ซ่อน thead duplicate ที่ DataTables สร้างใน scrollBody เมื่อใช้ scrollY
   page CSS ใช้ padding !important ทำให้ DataTables ซ่อนด้วย inline style ไม่ได้ */
.dataTables_scrollBody table.dataTable thead th,
.dataTables_scrollBody table.dataTable thead td {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    line-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}

html body table.dataTable tbody tr:hover > td {
    background: var(--ms-dt-hover-bg, #dcfce7) !important;
}

html body table.dataTable tbody tr.ms-dt-selected-row > td,
html body table.dataTable tbody tr.ms-dt-selected-row:hover > td {
    background: var(--ms-dt-selected-bg, #86efac) !important;
    color: var(--ms-dt-selected-text, #052e16) !important;
}

html body table.dataTable tbody tr.ms-dt-selected-row > td:first-child {
    box-shadow: none !important;
    position: relative !important;
}

html body table.dataTable tbody tr.ms-dt-selected-row > td.ms-dt-accent-cell,
html body table.dataTable tbody tr.ms-dt-selected-row > th.ms-dt-accent-cell {
    background-image: linear-gradient(to right, var(--ms-dt-selected-accent, #16a34a) 0 6px, transparent 6px) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    box-shadow: inset 6px 0 0 var(--ms-dt-selected-accent, #16a34a) !important;
    position: relative !important;
}

html body table.dataTable tbody tr.ms-dt-selected-row > td.td-action,
html body table.dataTable tbody tr.ms-dt-selected-row:hover > td.td-action,
html body table.dataTable tbody tr.ms-dt-selected-row > td[class*="action"],
html body table.dataTable tbody tr.ms-dt-selected-row:hover > td[class*="action"] {
    background: var(--ms-dt-selected-bg, #86efac) !important;
}

html body table.dataTable tbody tr.ms-dt-selected-row + tr.child > td.child {
    background: var(--ms-dt-selected-child-bg, #f0fdf4) !important;
}

html body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td {
    background: var(--ms-dt-selected-bg, #86efac) !important;
    color: var(--ms-dt-selected-text, #052e16) !important;
}

html body table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child {
    box-shadow: none !important;
    position: relative !important;
}

html body table.dataTable.dtr-inline.collapsed > tbody > tr.parent + tr.child > td.child {
    background: var(--ms-dt-selected-child-bg, #f0fdf4) !important;
}

.dt-toolbar,
.dt-header,
.dt-filter-area,
.dt-footer {
    min-width: 0;
}

.dt-search-wrap {
    min-width: 0;
}

.btn-search,
.btn-f43-search,
.btn-rpt-search {
    position: relative !important;
    overflow: hidden !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--page-primary, #4f46e5) 60%, #fff 40%) 0%,
        var(--page-primary, #4f46e5) 55%,
        color-mix(in srgb, var(--page-primary, #4f46e5) 80%, #000 20%) 100%
    ) !important;
    color: #fff !important;
    box-shadow:
        0 1px 1px rgba(15,23,42,.25),
        0 12px 22px -10px var(--page-primary-ring, rgba(79,70,229,.55)),
        0 5px 10px -5px var(--page-primary-ring, rgba(79,70,229,.4)),
        inset 0 1px 0 rgba(255,255,255,.4) !important;
    font-family: inherit !important;
    font-size: var(--fs-btn, 13px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), filter .18s ease, opacity .18s ease !important;
}

.btn-search::before,
.btn-f43-search::before,
.btn-rpt-search::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%) !important;
}

.btn-search i,
.btn-f43-search i,
.btn-rpt-search i {
    position: relative !important;
    color: currentColor !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.btn-search span,
.btn-f43-search span,
.btn-rpt-search span {
    position: relative !important;
}

.btn-search:hover:not(:disabled),
.btn-f43-search:hover:not(:disabled),
.btn-rpt-search:hover:not(:disabled) {
    transform: translateY(-1.5px) !important;
    filter: brightness(1.04) !important;
    box-shadow:
        0 1px 1px rgba(15,23,42,.28),
        0 16px 26px -10px var(--page-primary-ring, rgba(79,70,229,.6)),
        0 7px 14px -5px var(--page-primary-ring, rgba(79,70,229,.45)),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.btn-search:active:not(:disabled),
.btn-f43-search:active:not(:disabled),
.btn-rpt-search:active:not(:disabled) {
    transform: translateY(0) scale(.97) !important;
}

.btn-search:focus-visible,
.btn-f43-search:focus-visible,
.btn-rpt-search:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px #e8edf7,
        0 12px 22px -10px var(--page-primary-ring, rgba(79,70,229,.5)),
        inset 0 1px 0 rgba(255,255,255,.4) !important;
}

.btn-search:disabled,
.btn-f43-search:disabled,
.btn-rpt-search:disabled {
    opacity: .62 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4) !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 1.25em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.dataTables_wrapper .dataTables_paginate span {
    display: flex;
    gap: 0;
}

/* ════════════════════════════════════════════════════════════
   DataTable Pagination Button Standard (CLAUDE.md §10)
   ════════════════════════════════════════════════════════════
   Glossy pill (2026-09-23): same family as .guest-btn/.login-btn in the
   topbar — white glossy pill with gloss overlay + soft layered shadow for
   normal pages, hover lifts (translateY) instead of flat color tint, and
   the current page uses the exact .login-btn 3-stop blue gradient recipe.
   - 10px radius, 40×40px min touch target, 3px gap between buttons
   - Do NOT add page-specific paginate_button overrides in modules
   ════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 9px 16px !important;
    margin: 0 3px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 8px 16px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, color .15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%) !important;
    pointer-events: none !important;
}

/* neutralise old corner-only overrides — all corners uniform */
.dataTables_wrapper .dataTables_paginate .paginate_button:first-child,
.dataTables_wrapper .dataTables_paginate > .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button:last-child,
.dataTables_wrapper .dataTables_paginate > .paginate_button.next {
    border-radius: 10px !important;
    margin-left: 3px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.paginate_button:hover {
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%) !important;
    border-color: rgba(15,23,42,.16) !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 24px -12px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.8) !important;
    transform: translateY(-1.5px) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.paginate_button:active {
    transform: translateY(0) scale(.94) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.current:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.current:active {
    /* หน้าปัจจุบัน = ผิวเดียวกับปุ่ม "เข้าสู่ระบบ" (.login-btn) ทุกประการ — น้ำเงินสด #3b82f6 (อัปเดต 2026-09-29, เดิมใช้ --ms-titlebar-blue เข้มกว่า) */
    background: linear-gradient(180deg, #5b9dff 0%, var(--primary-blue, #3b82f6) 55%, #1d6fe0 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    transform: none !important;
    box-shadow:
        0 1px 1px rgba(23,64,140,.3),
        0 14px 26px -10px rgba(59,130,246,.55),
        0 6px 12px -6px rgba(59,130,246,.4),
        inset 0 1px 0 rgba(255,255,255,.4) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current.current *,
.dataTables_wrapper .dataTables_paginate .paginate_button.current.current:hover * {
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.disabled:active {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    border-color: rgba(15,23,42,.06) !important;
    color: #9ca3af !important;
    cursor: default !important;
    opacity: 0.5 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ════════════════════════════════
   Service Plan Modal
   ════════════════════════════════ */
.service-plan-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px);
    align-items: center; justify-content: center;
    padding: 44px 44px 20px 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-plan-modal.active {
    opacity: 1;
}
.service-plan-content {
    background: #ffffff;
    width: 94%; height: 92%;
    max-width: 1600px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.3);
    overflow: visible;
    display: flex; flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-plan-modal.active .service-plan-content {
    transform: scale(1);
}
.service-plan-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.service-plan-title {
    font-size: 16px; font-weight: 700; color: #1e293b;
}
.service-plan-close {
    cursor: pointer; font-size: 20px; color: #94a3b8; transition: all 0.2s;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}
.service-plan-close:hover { 
    color: #ef4444; background: #fef2f2;
}
.service-plan-body {
    flex: 1; position: relative; background: #f8fafc;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}
.service-plan-body iframe {
    width: 100%; height: 100%; border: none;
    display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   Medeesoft Modal Header Standard
   Soft blue to near-white bronze tint for every project modal header.
   Keep these values aligned with agent.md.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* อัปเดต 2026-09-23: เข้มขึ้นเหมือน .login-modal-head ใน layouts/footer.php (login modal) — ไม่ใช่ gradient จางแบบเดิมอีกต่อไป */
    --ms-modal-head-from: #e6f0ff;
    --ms-modal-head-mid: #f4f9ff;
    --ms-modal-head-to: #ffffff;
    --ms-modal-head-border: #e5effb;
    --ms-modal-head-ink: #172033;
    --ms-modal-head-close-bg: rgba(255,255,255,0.55);
}

:is(
    .service-plan-header,
    .ms-imp-pt-hd,
    .modal-header,
    .acc-modal-header,
    .history-modal-header,
    .hi-modal-header,
    .ms-ec-dxf-hd,
    .lab-header,
    .labf-header,
    .rspick-header,
    .rspt-header,
    .prpick-header,
    .prpt-header,
    .rpt-header,
    .mc-header,
    .mcf-header,
    .mg-header,
    .mgf-header,
    .mt-header,
    .mtf-header,
    .mif-header,
    .miff-header,
    .inv-header,
    .invf-header,
    .invd-header,
    .invdp-header,
    .invdaq-header,
    .invda-header,
    .ord-header,
    .ordf-header,
    .ordd-header,
    .ordda-header,
    .mof-header,
    .moff-header,
    .sc-header
) {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--ms-modal-head-from) 0%, var(--ms-modal-head-mid) 54%, var(--ms-modal-head-to) 100%) !important;
    border-bottom: 1px solid var(--ms-modal-head-border) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

:is(
    .service-plan-header,
    .ms-imp-pt-hd,
    .modal-header,
    .acc-modal-header,
    .history-modal-header,
    .hi-modal-header,
    .ms-ec-dxf-hd,
    .lab-header,
    .labf-header,
    .rspick-header,
    .rspt-header,
    .prpick-header,
    .prpt-header,
    .rpt-header,
    .mc-header,
    .mcf-header,
    .mg-header,
    .mgf-header,
    .mt-header,
    .mtf-header,
    .mif-header,
    .miff-header,
    .inv-header,
    .invf-header,
    .invd-header,
    .invdp-header,
    .invdaq-header,
    .invda-header,
    .ord-header,
    .ordf-header,
    .ordd-header,
    .ordda-header,
    .mof-header,
    .moff-header,
    .sc-header
)::before {
    /* decorative corner blob — เหมือน .login-modal-head::before (login modal) */
    content: '' !important;
    position: absolute !important;
    top: -60% !important;
    right: -18% !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(59,130,246,0.28) 0%, rgba(59,130,246,0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

:is(
    .service-plan-header,
    .ms-imp-pt-hd,
    .modal-header,
    .acc-modal-header,
    .history-modal-header,
    .hi-modal-header,
    .ms-ec-dxf-hd,
    .lab-header,
    .labf-header,
    .rspick-header,
    .rspt-header,
    .prpick-header,
    .prpt-header,
    .rpt-header,
    .mc-header,
    .mcf-header,
    .mg-header,
    .mgf-header,
    .mt-header,
    .mtf-header,
    .mif-header,
    .miff-header,
    .inv-header,
    .invf-header,
    .invd-header,
    .invdp-header,
    .invdaq-header,
    .invda-header,
    .ord-header,
    .ordf-header,
    .ordd-header,
    .ordda-header,
    .mof-header,
    .moff-header,
    .sc-header
)::after {
    /* decorative bottom accent line for light-bg modal headers */
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(180,133,82,0.04)) !important;
    pointer-events: none !important;
    display: block !important;
}

:is(
    .modal-title,
    .ms-imp-pt-hd-title,
    .acc-modal-title,
    .history-modal-header h2,
    .hi-modal-title,
    .ms-ec-dxf-hd-title,
    .lab-header-title,
    .rpt-header-title,
    .rspt-header-title,
    .prpt-header-title,
    .mc-header-title,
    .mcf-title,
    .mg-header-title,
    .mgf-title,
    .mt-header-title,
    .mtf-title,
    .mif-header-title,
    .miff-title,
    .inv-header-title,
    .invf-title,
    .invd-title,
    .invdp-title,
    .invdaq-title,
    .invda-title,
    .ord-header-title,
    .ordf-title,
    .ordd-title,
    .ordda-title,
    .mof-header-title,
    .moff-title,
    .sc-header-title,
    .service-plan-title
) {
    color: var(--ms-modal-head-ink) !important;
}

.ms-ec-dxf-hd > i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background: #e0e7ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    flex: 0 0 34px !important;
}

.ms-ec-dxf-hd-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

:is(
    .module-modal-close,
    .ms-imp-pt-close,
    .service-plan-close,
    .login-modal-close,
    .modal-close,
    .btn-modal-close,
    .history-modal-close,
    .hi-modal-close,
    .ms-ec-dxf-hd-close,
    .lab-close,
    .btn-rspt-close,
    .btn-prpt-close,
    .mc-header-close,
    .mcf-close,
    .mg-header-close,
    .mgf-close,
    .mt-header-close,
    .mtf-close,
    .mif-header-close,
    .miff-close,
    .inv-close,
    .invf-close,
    .invd-close,
    .invdp-close,
    .invdaq-close,
    .invda-close,
    .ord-close,
    .ordf-close,
    .ordd-close,
    .ordda-close,
    .mof-header-close,
    .moff-close,
    .sc-header-close,
    .odr-close,
    .pco-close,
    .disp-close,
    .ddr-close,
    .as-modal-close
) {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    appearance: none !important;
    transition: all 0.2s !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.20) !important;
    z-index: 3 !important;
}
@media (max-width: 480px) {
    :is(
        .module-modal-close,
        .ms-imp-pt-close,
        .service-plan-close,
        .login-modal-close,
        .modal-close,
        .btn-modal-close,
        .history-modal-close,
        .hi-modal-close,
        .ms-ec-dxf-hd-close,
        .lab-close,
        .btn-rspt-close,
        .btn-prpt-close,
        .mc-header-close,
        .mcf-close,
        .mg-header-close,
        .mgf-close,
        .mt-header-close,
        .mtf-close,
        .mif-header-close,
        .miff-close,
        .inv-close,
        .invf-close,
        .invd-close,
        .invdp-close,
        .invdaq-close,
        .invda-close,
        .ord-close,
        .ordf-close,
        .ordd-close,
        .ordda-close,
        .mof-header-close,
        .moff-close,
        .sc-header-close,
        .odr-close,
        .pco-close,
        .disp-close,
        .ddr-close,
        .as-modal-close
    ) {
        top: -12px !important;
        right: -12px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        flex: 0 0 36px !important;
    }
}

:is(
    .module-modal-close,
    .ms-imp-pt-close,
    .service-plan-close,
    .login-modal-close,
    .modal-close,
    .btn-modal-close,
    .history-modal-close,
    .hi-modal-close,
    .ms-ec-dxf-hd-close,
    .lab-close,
    .btn-rspt-close,
    .btn-prpt-close,
    .mc-header-close,
    .mcf-close,
    .mg-header-close,
    .mgf-close,
    .mt-header-close,
    .mtf-close,
    .mif-header-close,
    .miff-close,
    .inv-close,
    .invf-close,
    .invd-close,
    .invdp-close,
    .invdaq-close,
    .invda-close,
    .ord-close,
    .ordf-close,
    .ordd-close,
    .ordda-close,
    .mof-header-close,
    .moff-close,
    .sc-header-close,
    .odr-close,
    .pco-close,
    .disp-close,
    .ddr-close,
    .as-modal-close
) i {
    font-size: 18px !important;
    line-height: 1 !important;
}

:is(
    .module-modal-close,
    .ms-imp-pt-close,
    .service-plan-close,
    .login-modal-close,
    .modal-close,
    .btn-modal-close,
    .history-modal-close,
    .hi-modal-close,
    .ms-ec-dxf-hd-close,
    .lab-close,
    .btn-rspt-close,
    .btn-prpt-close,
    .mc-header-close,
    .mcf-close,
    .mg-header-close,
    .mgf-close,
    .mt-header-close,
    .mtf-close,
    .mif-header-close,
    .miff-close,
    .inv-close,
    .invf-close,
    .invd-close,
    .invdp-close,
    .invdaq-close,
    .invda-close,
    .ord-close,
    .ordf-close,
    .ordd-close,
    .ordda-close,
    .mof-header-close,
    .moff-close,
    .sc-header-close,
    .odr-close,
    .pco-close,
    .disp-close,
    .ddr-close,
    .as-modal-close
):hover {
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.26) !important;
    transform: translateY(-1px) !important;
}

/* Loading State */
.iframe-loading {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; z-index: 5;
}
.spinner {
    width: 40px; height: 40px;
    border: 3px solid #f1f5f9;
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.iframe-loading span {
    font-size: 14px; color: #64748b; font-weight: 500;
}


/* --- SweetAlert2 Global Custom Styling --- */
.swal2-popup {
    border-radius: 20px !important;
    padding: 24px !important;
    font-family: 'Sarabun-regular', var(--font-main) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2) !important;
}
.swal2-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    padding-top: 5px !important;
}
.swal2-html-container {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}
.swal2-icon {
    margin: 5px auto 12px !important;
    transform: scale(0.75);
}
/* ══════════════════════════════════════════════════════════════════════
   DataTable Row Buttons — Apple-style (docs/standards/datatables.md §10.7)
   ① ค่าเริ่มต้นกลาง: ปุ่มที่มีคำว่า "btn" ใน class และอยู่ในเซลล์ DataTable (รวมแถว child ของ Responsive)
      ได้ gloss + เงานุ่ม + ยกขึ้นตอน hover + หดตอนกด โดย "ไม่แตะสี/ขนาด/รูปทรง" ของแต่ละหน้า
      — เขียนด้วย :where() (specificity = 0) เพื่อให้ CSS เฉพาะหน้าที่นิยามเองยังชนะได้เสมอ
      ข้ามได้ด้วย class .no-ms-btn; .ms-pill (ป้ายกดได้) ไม่ถูกแตะ
   ② .dt-act-btn: ปุ่ม action มาตรฐานสำหรับตารางใหม่ (ไอคอน/ไอคอน+ข้อความ) พร้อมโทนสี
   ══════════════════════════════════════════════════════════════════════ */
:where(:is(table.dataTable, table.ms-table) td :is(button, a)[class*="btn"]:not(.ms-pill, .no-ms-btn)) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, color .2s ease, filter .18s ease;
}
:where(:is(table.dataTable, table.ms-table) td :is(button, a)[class*="btn"]:not(.ms-pill, .no-ms-btn))::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 55%);
}
:where(:is(table.dataTable, table.ms-table) td :is(button, a)[class*="btn"]:not(.ms-pill, .no-ms-btn):hover:not(:disabled)) {
    transform: translateY(-1px);
    box-shadow: 0 1px 1px rgba(15,23,42,.06), 0 8px 16px -8px rgba(15,23,42,.3);
}
:where(:is(table.dataTable, table.ms-table) td :is(button, a)[class*="btn"]:not(.ms-pill, .no-ms-btn):active:not(:disabled)) {
    transform: translateY(0) scale(.95);
}
:where(:is(table.dataTable, table.ms-table) td :is(button, a)[class*="btn"]:not(.ms-pill, .no-ms-btn):disabled) {
    opacity: .5;
    cursor: not-allowed;
}

.dt-act-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 32px; height: 32px; padding: 0 9px;
    border-radius: 9px; border: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    color: #475569; font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 6px 12px -8px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
.dt-act-btn i { font-size: 15px; line-height: 1; }
.dt-act-btn:hover:not(:disabled) { background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%); border-color: rgba(15,23,42,.16); color: #1e293b; }
.dt-act-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #e8edf7; }
.dt-act-btn.is-primary { color: #2852c8; border-color: rgba(40,82,200,.18); background: linear-gradient(180deg, #fff 0%, #eef4ff 100%); }
.dt-act-btn.is-primary:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(180deg, #5b9dff 0%, #2852c8 55%, #1a4bb8 100%); box-shadow: 0 1px 1px rgba(15,23,42,.28), 0 10px 18px -8px rgba(40,82,200,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.dt-act-btn.is-success { color: #15803d; border-color: rgba(21,128,61,.18); background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%); }
.dt-act-btn.is-success:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%); box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 10px 18px -8px rgba(22,163,74,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.dt-act-btn.is-warn { color: #b45309; border-color: rgba(217,119,6,.2); background: linear-gradient(180deg, #fff 0%, #fffbeb 100%); }
.dt-act-btn.is-warn:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 10px 18px -8px rgba(217,119,6,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.dt-act-btn.is-danger { color: #dc2626; border-color: rgba(220,38,38,.18); background: linear-gradient(180deg, #fff 0%, #fef2f2 100%); }
.dt-act-btn.is-danger:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); box-shadow: 0 1px 1px rgba(220,38,38,.3), 0 10px 18px -8px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.35); }

/* SweetAlert2 buttons — Apple-style glossy pill (2026-09-27, whole project; Pattern E ใน docs/standards/cards-buttons.md)
   .swal2-confirm ไม่บังคับสีพื้น เพราะแต่ละหน้า/action ตั้ง confirmButtonColor เอง ตามความหมาย
   (เขียว=เปิดใช้งาน, แดง=ลบ/ปิดใช้งาน) — ความมันวาวทำด้วยการซ้อน gradient โปร่งใส (background-image) + gloss ::before
   ทับสีที่ตั้งมา จึงใช้ได้กับทุกสี; .swal2-cancel/.swal2-deny เป็นกลาง จึงบังคับสีมาตรฐานเดียวกันทั้งระบบ */
.swal2-styled {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;                       /* ให้ ::before z-index:-1 อยู่ใต้ตัวอักษรแต่เหนือพื้นปุ่ม */
    min-height: 40px !important;
    border-radius: 10px !important;
    padding: 0 24px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), filter .18s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
}
.swal2-styled::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%);
}
.swal2-styled:hover:not(:disabled) { transform: translateY(-1.5px) !important; }
.swal2-styled:active:not(:disabled) { transform: translateY(0) scale(.97) !important; }
.swal2-styled:disabled { opacity: .6 !important; cursor: not-allowed !important; }

.swal2-confirm {
    color: #fff !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.16) 100%) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 12px 22px -10px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.swal2-confirm:hover:not(:disabled) {
    filter: brightness(1.05);
    background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.16) 100%) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.28), 0 16px 26px -10px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.swal2-cancel {
    color: #475569 !important;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 8px 16px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.swal2-cancel:hover:not(:disabled) {
    color: #1e293b !important;
    background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%) !important;
    border-color: rgba(15,23,42,.16) !important;
    filter: none !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 14px 24px -12px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.swal2-deny {
    color: #dc2626 !important;
    background: linear-gradient(180deg, #fff 0%, #fef2f2 100%) !important;
    border: 1px solid rgba(220,38,38,.18) !important;
    box-shadow: 0 1px 1px rgba(220,38,38,.05), 0 8px 16px -12px rgba(220,38,38,.3), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.swal2-deny:hover:not(:disabled) {
    color: #fff !important;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
    border-color: transparent !important;
    filter: none !important;
    box-shadow: 0 1px 1px rgba(220,38,38,.3), 0 12px 20px -10px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   Donut Legend Standard — msAppleDonut.legend() (CLAUDE.md §10.5 Pattern D)
   แถว: จุดสี + วงแหวนจาง | ชื่อ + แถบ progress 4px | ยอด (สีหมึก) | % chip เทา
   สีของแถวส่งผ่าน CSS variable --legend-color (inline ต่อแถว)
   ══════════════════════════════════════════════════════════════════════ */
.ms-donut-legend {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: #2852c8 #f1f5f9;
}
.ms-donut-legend::-webkit-scrollbar { width: 6px; }
.ms-donut-legend::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.ms-donut-legend::-webkit-scrollbar-thumb { background: #2852c8; border-radius: 999px; }
.ms-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ms-donut-legend-item.is-static { cursor: default; }
.ms-donut-legend-item:hover {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 18px -12px rgba(15,23,42,.22);
}
button.ms-donut-legend-item:active { transform: scale(.99); }
.ms-donut-legend-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #e8edf7;
}
.ms-donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--legend-color, #94a3b8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend-color, #94a3b8) 18%, transparent);
}
.ms-donut-legend-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ms-donut-legend-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
    line-height: 1.2;
}
.ms-donut-legend-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.ms-donut-legend-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--legend-color, #94a3b8);
    transition: width .4s ease;
}
.ms-donut-legend-amt {
    color: #0f172a;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ms-donut-legend-pct {
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    white-space: nowrap;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   Apple-Style Text Field Standard (CLAUDE.md §16.2)
   ช่องกรอกแบบ filled ของ iOS/macOS: พื้นเทาอ่อนทึบ ไม่มีเส้นขอบ
   focus = พื้นขาว + focus ring มาตรฐานกลาง (§12) + เงานุ่มยกขึ้น

   1) Global skin — ครอบ "ทุก textbox ในโปรเจกต์" อัตโนมัติ (input ชนิดข้อความ + textarea)
      คุมเฉพาะ "ผิว" (พื้น/ขอบ/มุม/เงา/focus/hover/invalid/placeholder)
      ไม่แตะ height/padding/width/font-size — ขนาดยังเป็นของแต่ละหน้า layout จึงไม่เพี้ยน
      :not(#ms-input-skin) ใส่ไว้เพิ่ม specificity ระดับ ID ให้ชนะ CSS ช่องกรอกเฉพาะหน้าทั้งหมด
      (รวมถึง rule หน้าที่ใส่ !important) — ไม่มี element ใดมี id นี้
      ข้อยกเว้น: ช่องปี/ตัวเลขในหัวปฏิทิน Flatpickr (.numInput),
      และ element ที่ใส่ class .no-ms-input (opt-out เฉพาะจุด ต้องมี comment เหตุผลกำกับ)
   2) .ms-input — ขนาดมาตรฐานสำหรับฟอร์มใหม่ (46px / .ms-input-sm 40px) + ปุ่มไอคอน .ms-input-eye
   ══════════════════════════════════════════════════════════════════════ */
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin) {
    background-color: var(--ms-input-bg, #f1f4f9) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--ms-input-radius, 10px) !important;
    box-shadow: none !important;
    color: #0f172a;
    outline: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin)::placeholder {
    color: #a0a8b6 !important;
    font-weight: 700 !important;
    opacity: 1;
}
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin):hover:not(:focus):not(:disabled) {
    background-color: #eaeef5 !important;
}
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin):focus {
    background-color: #fff !important;
    border-color: #d7deef !important;
    box-shadow: 0 0 0 3px #e8edf7, 0 6px 16px -10px rgba(15,23,42,.22) !important;
}
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin).is-invalid {
    background-color: #fff7f7 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.08) !important;
}
html body :is(input:is([type="text"],[type="password"],[type="number"],[type="email"],[type="search"],[type="tel"],[type="url"],:not([type])), textarea):not(.no-ms-input):not(.numInput):not(#ms-input-skin):disabled {
    background-color: #f5f7fa !important;
    color: #64748b;
    cursor: not-allowed;
}

/* .ms-input — ขนาดมาตรฐานสำหรับฟอร์มใหม่ (ผิวมาจาก global skin ด้านบน) */
.ms-input {
    --ms-input-radius: 12px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    box-sizing: border-box;
}
/* ขนาดกะทัดรัด — ใช้ใน filter row ที่ต้องสูงเท่า Select2/Flatpickr (38–40px, §11) */
.ms-input.ms-input-sm {
    --ms-input-radius: 10px;
    height: 40px;
    padding: 0 14px;
    font-size: 12.5px;
}
textarea.ms-input {
    height: auto;
    min-height: 92px;
    padding: 12px 16px;
    line-height: 1.5;
    resize: vertical;
}

/* ช่องที่มีปุ่มไอคอนด้านขวา (เช่น แสดง/ซ่อนรหัสผ่าน) */
.ms-input-wrap {
    position: relative;
    display: block;
    min-width: 0;
}
.ms-input-wrap .ms-input { padding-right: 46px; }
.ms-input-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .16s, background .16s;
}
.ms-input-eye:hover { background: rgba(15,23,42,.06); color: #334155; }
.ms-input-eye i { font-size: 18px; line-height: 1; }
.ms-input-eye:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #e8edf7;
}

/* ══════════════════════════════════════════════════════════════════════
   Apple-Style Select2 Skin (CLAUDE.md §11.2) — ผิวเดียวกับ textbox (§16.2)
   กล่อง Select2 ทุกตัวในโปรเจกต์: พื้นเทาอ่อนทึบ ไม่มีเส้นขอบ, hover เข้มขึ้น,
   focus/open = พื้นขาว + focus ring มาตรฐาน (§12) + เงานุ่มยกขึ้น
   คุมเฉพาะผิว — ไม่แตะ height/padding/width/font ของกล่อง (ขนาดยังเป็นของ §11/§11.1/หน้านั้น)
   ยกเว้น Select2 ในหัวปฏิทิน Flatpickr (§14 มีผิวของตัวเอง)
   ══════════════════════════════════════════════════════════════════════ */
html body .select2-container:not(.flatpickr-calendar .select2-container) .select2-selection:is(.select2-selection--single,.select2-selection--multiple):not(#ms-input-skin) {
    background-color: var(--ms-input-bg, #f1f4f9) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--ms-input-radius, 10px) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
html body .select2-container:not(.flatpickr-calendar .select2-container):not(.select2-container--open):not(.select2-container--focus):not(.select2-container--disabled) .select2-selection:is(.select2-selection--single,.select2-selection--multiple):not(#ms-input-skin):hover {
    background-color: #eaeef5 !important;
}
html body .select2-container:not(.flatpickr-calendar .select2-container):is(.select2-container--focus,.select2-container--open) .select2-selection:is(.select2-selection--single,.select2-selection--multiple):not(#ms-input-skin) {
    background-color: #fff !important;
    border-color: #d7deef !important;
    box-shadow: 0 0 0 3px #e8edf7, 0 6px 16px -10px rgba(15,23,42,.22) !important;
}
html body .select2-container:not(.flatpickr-calendar .select2-container).select2-container--disabled .select2-selection:is(.select2-selection--single,.select2-selection--multiple):not(#ms-input-skin) {
    background-color: #f5f7fa !important;
    cursor: not-allowed;
}
html body .select2-container--disabled .select2-selection__rendered { color: #64748b !important; }
/* invalid — หน้าใส่ .is-invalid ที่ <select> ต้นทาง (Select2 ซ่อน select ไว้ก่อน container) */
html body select.is-invalid + .select2-container .select2-selection:is(.select2-selection--single,.select2-selection--multiple):not(#ms-input-skin) {
    background-color: #fff7f7 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.08) !important;
}
html body .select2-container .select2-selection__placeholder { color: #a0a8b6 !important; }

/* ════════════════════════════════════════════════════════════
   Apple-Style Label Pill (CLAUDE.md §10.5 Pattern F)
   ════════════════════════════════════════════════════════════
   ป้ายสถานะ/หมวด/รหัส (badge, tag, pill) ทุกจุดในระบบใช้ class กลางนี้
   - พื้น tint จาง (alpha .10) + เส้นในบางมาก (inset alpha .12) + เงานุ่ม
   - ไม่มีเส้นขอบสีสด ไม่มีจุดสีนำหน้า ตัวอักษรใช้สีเข้มของโทนนั้น
   - โทนสีเลือกด้วย modifier .ms-pill-{tone} (ตั้งแค่ --ms-pill-rgb + --ms-pill-ink)
   - ห้ามเขียน background/border/color/radius ของ badge เองในหน้า
   ════════════════════════════════════════════════════════════ */
.ms-pill {
    --ms-pill-rgb: 100,116,139;
    --ms-pill-ink: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 10px;
    border: none;
    border-radius: 999px;
    background: rgba(var(--ms-pill-rgb), .10);
    color: var(--ms-pill-ink);
    box-shadow: inset 0 0 0 1px rgba(var(--ms-pill-rgb), .12), 0 1px 2px rgba(15,23,42,.04);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}
.ms-pill i { font-size: 12px; line-height: 1; }
.ms-pill-mono { font-family: Consolas, 'SFMono-Regular', Menlo, monospace; letter-spacing: 0; }
.ms-pill-sm { min-height: 18px; padding: 1px 8px; font-size: 10.5px; }
.ms-pill-blue   { --ms-pill-rgb: 40,82,200;   --ms-pill-ink: #2852c8; }
.ms-pill-indigo { --ms-pill-rgb: 79,70,229;   --ms-pill-ink: #4338ca; }
.ms-pill-violet { --ms-pill-rgb: 124,58,237;  --ms-pill-ink: #6d28d9; }
.ms-pill-pink   { --ms-pill-rgb: 219,39,119;  --ms-pill-ink: #be185d; }
.ms-pill-red    { --ms-pill-rgb: 220,38,38;   --ms-pill-ink: #b91c1c; }
.ms-pill-orange { --ms-pill-rgb: 234,88,12;   --ms-pill-ink: #c2410c; }
.ms-pill-amber  { --ms-pill-rgb: 217,119,6;   --ms-pill-ink: #b45309; }
.ms-pill-green  { --ms-pill-rgb: 16,185,129;  --ms-pill-ink: #047857; }
.ms-pill-teal   { --ms-pill-rgb: 13,148,136;  --ms-pill-ink: #0f766e; }
.ms-pill-cyan   { --ms-pill-rgb: 8,145,178;   --ms-pill-ink: #0e7490; }
.ms-pill-slate  { --ms-pill-rgb: 100,116,139; --ms-pill-ink: #475569; }
/* ป้ายที่ต้องตัดข้อความยาวด้วย "…" — inline-flex ตัด ellipsis ไม่ได้ จึงสลับเป็น inline-block
   ความกว้างสูงสุดตั้งผ่าน --ms-pill-max ที่ element/class ของหน้า */
.ms-pill.ms-pill-truncate {
    display: inline-block;
    max-width: var(--ms-pill-max, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    text-align: center;
}
.ms-pill.ms-pill-sm.ms-pill-truncate { line-height: 16px; }

/* ════════════════════════════════════════════════════════════
   Apple-Style Toggle Switch Standard (CLAUDE.md §10.6)
   ════════════════════════════════════════════════════════════
   ต้นแบบ: apps/permissions/index.php (.perm-switch) — สวิตช์แบบ iOS/macOS
   ราง pill สีเทาอ่อนตอนปิด, เขียว Apple (#34c759) ตอนเปิด, ปุ่มกลมมีเงา 2 ชั้น,
   transition สปริงนุ่ม, ปุ่มกลมยืดกว้างขึ้นชั่วคราวตอนกดค้าง (press squish)

   หน้าใหม่ให้ใช้ class .ms-switch / .ms-switch-slider โดยตรง (ดูตัวอย่าง HTML ท้ายบล็อกนี้)
   หน้าเดิมที่มี class เฉพาะหน้าอยู่แล้ว (.perm-switch/.perm-slider ใน permissions,
   .mt-switch/.mt-slider ใน stock_office และ medical_supply) ยังใช้ชื่อเดิมได้ต่อไปโดยไม่ต้อง
   แก้ markup/JS — รวม selector ของทุกชื่อไว้ในกฎเดียวกันด้านล่างนี้แล้ว

   ห้ามเขียน width/height/background/border-radius/box-shadow/transition ของสวิตช์เอง
   ในหน้าใหม่หรือหน้าเดิม — ถ้าต้องปรับสี "เปิด" เฉพาะบริบท (เช่น สวิตช์ในโมดัลสีอื่น)
   ให้ override เฉพาะ background ของ input:checked + slider ด้วย selector เฉพาะหน้า
   (ดูตัวอย่าง .perm-modal .perm-switch ใน apps/permissions/index.php) ห้าม override
   ขนาด/เงา/transition ════════════════════════════════════════════════════════════ */
.ms-switch, .perm-switch, .mt-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}
.ms-switch input, .perm-switch input, .mt-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ms-switch-slider, .perm-slider, .mt-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #e5e7eb;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
    transition: background-color .25s cubic-bezier(.4,0,.2,1);
}
.ms-switch-slider::before, .perm-slider::before, .mt-slider::before {
    position: absolute;
    content: "";
    left: 2px;
    top: 2px;
    height: 22px;
    width: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(15,23,42,.18), 0 1px 2px rgba(15,23,42,.1);
    transition: transform .25s cubic-bezier(.4,0,.2,1), width .18s ease;
}
.ms-switch:active .ms-switch-slider::before,
.perm-switch:active .perm-slider::before,
.mt-switch:active .mt-slider::before { width: 26px; }

.ms-switch:active input:checked + .ms-switch-slider::before,
.perm-switch:active input:checked + .perm-slider::before,
.mt-switch:active input:checked + .mt-slider::before { transform: translateX(14px); }

.ms-switch input:checked + .ms-switch-slider,
.perm-switch input:checked + .perm-slider,
.mt-switch input:checked + .mt-slider { background: #34c759; }

.ms-switch input:checked + .ms-switch-slider::before,
.perm-switch input:checked + .perm-slider::before,
.mt-switch input:checked + .mt-slider::before { transform: translateX(18px); }

.ms-switch.loading, .perm-switch.loading, .mt-switch.loading { opacity: .5; pointer-events: none; }
/* ตัวอย่าง HTML มาตรฐานสำหรับหน้าใหม่:
<label class="ms-switch">
    <input type="checkbox" class="js-xxx-switch-input" data-id="...">
    <span class="ms-switch-slider"></span>
</label>
*/

/* ═══════════════════════════════════════════════════════════════════════
   Quick-Range / Month / Year Selected State (docs/standards/cards-buttons.md — Pattern G)
   ปุ่ม "ช่วงด่วน" + ปุ่มเดือน/ปี ในกล่องตัวกรอง — ตอนถูกเลือกใช้ผิว tinted glossy สีฟ้าอ่อน
   (ต้นแบบ: ปุ่ม "นำเข้า" การ์ด IPD ใน apps/import_manager/ — .im-c3 .im-card-btn)
   สีน้ำเงินคงที่ทุกหน้า (ไม่ใช้ --page-primary) — ห้ามใช้ gradient ทึบ 3 ชั้น (ถูกยกเลิก 2026-09-27)
   ห้ามเขียน .is-active/.active ของปุ่มเหล่านี้ซ้ำในหน้า — เพิ่ม class ใหม่ที่ selector ด้านล่างแทน
   ═══════════════════════════════════════════════════════════════════════ */
.co-range-btn.is-active,
.co-month-btn.is-active,
.co-year-btn.is-active,
.ipd-range-btn.is-active,
.ofm-qbtn.is-active,
.ofm-mbtn.is-active,
.ofm-ybtn.is-active,
.tm-quick-range-btn.is-active,
.nt-range-btn.active,
.nhsoca-range-btn.active {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eff6ff 0%, #e0edff 100%);
    border-color: #bfd4ff;
    color: #1d4ed8;
    box-shadow:
        0 1px 1px rgba(15,23,42,.03),
        0 8px 16px -12px rgba(59,130,246,.45),
        inset 0 1px 0 rgba(255,255,255,.7);
}
.co-range-btn.is-active::before,
.co-month-btn.is-active::before,
.co-year-btn.is-active::before,
.ipd-range-btn.is-active::before,
.ofm-qbtn.is-active::before,
.ofm-mbtn.is-active::before,
.ofm-ybtn.is-active::before,
.tm-quick-range-btn.is-active::before,
.nt-range-btn.active::before,
.nhsoca-range-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%);
}
/* hover บนปุ่มที่เลือกอยู่ — !important เพราะ hover rule ของแต่ละหน้าโหลดทีหลังและ specificity เท่ากัน */
.co-range-btn.is-active:hover:not(:disabled),
.co-month-btn.is-active:hover:not(:disabled),
.co-year-btn.is-active:hover:not(:disabled),
.ipd-range-btn.is-active:hover:not(:disabled),
.ofm-qbtn.is-active:hover:not(:disabled),
.ofm-mbtn.is-active:hover:not(:disabled),
.ofm-ybtn.is-active:hover:not(:disabled),
.tm-quick-range-btn.is-active:hover:not(:disabled),
.nt-range-btn.active:hover:not(:disabled),
.nhsoca-range-btn.active:hover:not(:disabled) {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #a9c4ff !important;
    color: #1d4ed8 !important;
    filter: none;
}
/* ปุ่มไม่มีเส้นขอบ (segmented track ในโมดัลตรวจสิทธิ์ / ตารางเดือน acc_opd_claim) → ใช้ inset ring แทนขอบ */
.nhsoca-range-btn.active,
.ofm-mbtn.is-active {
    box-shadow:
        inset 0 0 0 1px #bfd4ff,
        0 1px 1px rgba(15,23,42,.03),
        0 8px 16px -12px rgba(59,130,246,.45),
        inset 0 1px 0 rgba(255,255,255,.7);
}

/* เครื่องหมายถูก ✓ หน้าข้อความปุ่ม "ช่วงด่วน" ที่เลือกอยู่ (Pattern G) — ใช้ ::after + order:-1 (::before ใช้เป็น gloss แล้ว)
   ไม่ใส่กับปุ่มเดือน/ปี เพราะช่องแคบ (ตารางเดือน 6 คอลัมน์) */
.co-range-btn.is-active,
.ipd-range-btn.is-active,
.ofm-qbtn.is-active,
.tm-quick-range-btn.is-active,
.nt-range-btn.active,
.nhsoca-range-btn.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.co-range-btn.is-active::after,
.ipd-range-btn.is-active::after,
.ofm-qbtn.is-active::after,
.tm-quick-range-btn.is-active::after,
.nt-range-btn.active::after,
.nhsoca-range-btn.active::after {
    content: '';
    order: -1;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: msRangeCheckIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes msRangeCheckIn {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .co-range-btn.is-active::after,
    .ipd-range-btn.is-active::after,
    .ofm-qbtn.is-active::after,
    .tm-quick-range-btn.is-active::after,
    .nt-range-btn.active::after,
    .nhsoca-range-btn.active::after { animation: none; }
}