/* ==========================================================================
   pxhr — Design tokens + ธีมสว่าง/มืด
   แนวทาง: คง Bootstrap 5 เป็นฐาน (modal/dropdown/offcanvas ทำงานอยู่ทุกวันแล้ว
   ไม่แตะกลไก JS) แต่ retheme สีผ่าน CSS variables ของ Bootstrap เอง (--bs-*)
   เพื่อให้ทุกหน้า/ทุก badge/ปุ่ม/การ์ดที่มีอยู่แล้วเปลี่ยนหน้าตาอัตโนมัติ
   โดยไม่ต้องแก้ class ใน PHP ทีละไฟล์
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root {
    /* ----- Design tokens (โทนสว่าง) ----- */
    --color-primary: #4f46e5;
    --color-primary-rgb: 79, 70, 229;
    --color-primary-hover: #4338ca;
    --color-primary-soft: #eef2ff;

    --color-bg: #f4f5fa;
    --color-surface: #ffffff;
    --color-surface-hover: #f8f9fc;
    --color-border: #e5e7f0;
    --color-text: #1e2130;
    --color-text-secondary: #6b7189;

    --color-success: #16a34a;
    --color-success-rgb: 22, 163, 74;
    --color-warning: #d97706;
    --color-warning-rgb: 217, 119, 6;
    --color-danger: #dc2626;
    --color-danger-rgb: 220, 38, 38;
    --color-info: #0891b2;
    --color-info-rgb: 8, 145, 178;
    --color-secondary: #64748b;
    --color-secondary-rgb: 100, 116, 139;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(20, 22, 40, .06), 0 1px 2px rgba(20, 22, 40, .04);
    --shadow-md: 0 4px 14px rgba(20, 22, 40, .08);

    --sidebar-w: 248px;
    --topbar-h: 60px;
    --font-family: 'Noto Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ----- ผูก token เข้ากับตัวแปรของ Bootstrap เอง ----- */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: var(--color-danger-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
}

/* ----- โทนมืด: กำหนดใหม่เฉพาะ token ที่ต้องเปลี่ยน ----- */
[data-theme="dark"] {
    --color-primary: #818cf8;
    --color-primary-rgb: 129, 140, 248;
    --color-primary-hover: #a5b4fc;
    --color-primary-soft: #1e2150;

    --color-bg: #14151f;
    --color-surface: #1b1d2b;
    --color-surface-hover: #23253680;
    --color-border: #2c2f42;
    --color-text: #e7e8f2;
    --color-text-secondary: #9497b0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    color-scheme: dark;
}

* { scrollbar-width: thin; }

html, body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

body {
    font-family: var(--font-family);
    font-size: clamp(.85rem, .8rem + .2vw, .95rem);
    transition: background-color .15s ease, color .15s ease;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold, .fw-semibold {
    font-family: var(--font-family);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* ==========================================================================
   Bootstrap component re-theme (ใช้ตัวแปร --bs-btn-* / --bs-*  ตามสเปกของ
   Bootstrap 5.3 เอง กันไม่ต้องไปแก้ class ในไฟล์ PHP ทีละหน้า)
   ========================================================================== */
.btn { border-radius: var(--radius-sm); font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}
.btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); }
.btn-outline-success { --bs-btn-color: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); }
.btn-danger { --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); }
.btn-outline-danger { --bs-btn-color: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); }
.btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-outline-warning { --bs-btn-color: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-hover-bg: var(--color-warning); --bs-btn-hover-border-color: var(--color-warning); }
.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-surface-hover);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-border-color: var(--color-border);
}

.dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-surface-hover); color: var(--color-text); }

.form-control, .form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    min-height: 42px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--color-primary-rgb), .18);
}
.form-control::placeholder { color: var(--color-text-secondary); opacity: .7; }
.input-group-text {
    background-color: var(--color-surface-hover);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
.form-label { color: var(--color-text); }
.form-text { color: var(--color-text-secondary); }

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.modal-header, .modal-footer { border-color: var(--color-border); }

.alert-danger { --bs-alert-bg: rgba(var(--color-danger-rgb), .1); --bs-alert-color: var(--color-danger); --bs-alert-border-color: rgba(var(--color-danger-rgb), .25); }
.alert-success { --bs-alert-bg: rgba(var(--color-success-rgb), .1); --bs-alert-color: var(--color-success); --bs-alert-border-color: rgba(var(--color-success-rgb), .25); }
.alert-warning { --bs-alert-bg: rgba(var(--color-warning-rgb), .1); --bs-alert-color: var(--color-warning); --bs-alert-border-color: rgba(var(--color-warning-rgb), .25); }
.alert-info { --bs-alert-bg: rgba(var(--color-info-rgb), .1); --bs-alert-color: var(--color-info); --bs-alert-border-color: rgba(var(--color-info-rgb), .25); }

/* ==========================================================================
   Card / Table / Badge
   ========================================================================== */
.card {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: clamp(0px, 0px, 0px);
}

.card-header {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-weight: 700;
    padding: 16px clamp(16px, 2vw, 24px);
}
.card-body { padding: clamp(16px, 2vw, 24px); }
.card-footer { background-color: var(--color-surface); border-color: var(--color-border); }

.stat-card {
    border-radius: var(--radius-lg);
    color: #fff;
    padding: clamp(16px, 2vw, 24px);
    box-shadow: var(--shadow-md);
}
.stat-card .stat-icon { font-size: 2.4rem; opacity: .85; }
.stat-card .stat-value { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; }
.stat-card .stat-label { font-size: .85rem; opacity: .9; }

.table {
    color: var(--color-text);
    --bs-table-bg: transparent;
}
.table thead th {
    background-color: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: none;
    white-space: nowrap;
}
.table td { vertical-align: middle; font-size: .88rem; border-color: var(--color-border); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--color-surface-hover); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.badge { font-weight: 600; padding: .4em .65em; border-radius: 999px; }

.badge-status-active { background-color: rgba(var(--color-success-rgb), .12); color: var(--color-success); }
.badge-status-inactive { background-color: rgba(var(--color-danger-rgb), .12); color: var(--color-danger); }

.btn-action { padding: .3rem .65rem; font-size: .8rem; border-radius: var(--radius-sm); }

.text-muted { color: var(--color-text-secondary) !important; }
hr { border-color: var(--color-border); opacity: 1; }

/* ==========================================================================
   App shell — Sidebar (desktop) + Topbar + Off-canvas (mobile/tablet)
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: none;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
@media (min-width: 992px) { .app-sidebar { display: flex; } }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.sidebar-brand i { color: var(--color-primary); font-size: 1.3rem; }

/* เลื่อนได้เหมือนเดิมถ้าเมนูยาวเกินจอ แต่ซ่อนแถบเลื่อนไม่ให้โชว์ (ดูรกสายตา)
   min-height:0 จำเป็นเพราะเป็น flex item ที่มี overflow-y ของตัวเอง — ถ้าไม่ใส่
   เบราว์เซอร์จะไม่ยอมให้ตัวนี้เตี้ยกว่าเนื้อหาข้างใน ทำให้ล้นออกไปเป็นแถบเลื่อนของทั้งหน้า/
   ทั้ง sidebar แทน ซึ่งเป็นสาเหตุที่ยังเห็นแถบเลื่อนยาวเต็มความสูง sidebar ทั้งที่ซ่อนไว้แล้ว */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-secondary);
    padding: 14px 12px 6px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    margin-bottom: 2px;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-link:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.sidebar-link.active { background-color: var(--color-primary-soft); color: var(--color-primary); }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--color-border); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--topbar-h);
    padding: 0 clamp(12px, 2vw, 24px);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.topbar-toggle {
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1.35rem;
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--radius-sm);
}
.topbar-toggle:hover { background-color: var(--color-surface-hover); }
.topbar-title {
    font-weight: 700;
    font-size: clamp(.95rem, .85rem + .3vw, 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.theme-toggle, .topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: .85rem;
    font-weight: 600;
}
.theme-toggle:hover, .topbar-user:hover { background-color: var(--color-surface-hover); }
.theme-toggle { padding: 7px 9px; }

.app-content { flex: 1; min-width: 0; width: 100%; }

@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.app-content .container-fluid { animation: page-fade-in .28s ease-out; }

/* offcanvas mobile sidebar — คง Bootstrap component เดิม แค่ retheme สี */
.offcanvas { background-color: var(--color-surface); color: var(--color-text); }
.offcanvas-header { border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   Employee bottom tab bar (มือถือ/แท็บเล็ต ต่ำกว่า lg — เดสก์ท็อปใช้ sidebar
   เหมือนแอดมินแทน) ให้ความรู้สึกเหมือนแอพมือถือ พร้อม animation ตอนสลับแท็บ
   ========================================================================== */
@keyframes bn-pop-in {
    0%   { transform: translateY(4px) scale(.85); opacity: 0; }
    60%  { transform: translateY(-1px) scale(1.08); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.employee-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom);
}

.employee-bottom-nav .bn-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: .68rem;
    line-height: 1.1;
    transition: color .18s ease, transform .12s ease;
}

.employee-bottom-nav .bn-item i {
    font-size: 1.3rem;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}

.employee-bottom-nav .bn-item:active { transform: scale(.92); }

.employee-bottom-nav .bn-item.active {
    color: var(--color-primary);
    font-weight: 700;
}

.employee-bottom-nav .bn-item.active i {
    animation: bn-pop-in .32s cubic-bezier(.34,1.56,.64,1);
}

/* pill ไฮไลต์เลื่อนนุ่มๆ อยู่หลังไอคอนของแท็บที่ active */
.employee-bottom-nav .bn-item.active::before {
    content: '';
    position: absolute;
    top: 2px;
    width: 40px;
    height: 26px;
    background: var(--color-primary-soft);
    border-radius: 999px;
    z-index: -1;
    animation: bn-pop-in .28s ease-out;
}

@media (max-width: 991.98px) {
    body.has-bottom-nav { padding-bottom: 64px; }
}

/* แถบบนสีน้ำเงินเข้มคงที่ ไม่ผูกกับ --bs-primary ที่เปลี่ยนเป็นสีอ่อนตอนโหมดมืด
   (กันปัญหาตัวอักษรสีขาวคอนทราสต์ไม่พอกับพื้นหลังตอนสลับธีม) */
.navbar.bg-primary { background-color: #4338ca !important; }
[data-theme="dark"] .navbar.bg-primary { background-color: #2e2a7a !important; }

/* stat-card สีน้ำเงินให้เข้มสดเท่าใบอื่น (success/warning/info) เสมอ — ไม่ให้จางลงตาม
   --bs-primary ที่ปรับให้อ่อนลงตอนโหมดมืดเพื่อ contrast ของปุ่ม/ลิงก์ (คนละวัตถุประสงค์กัน) */
[data-theme="dark"] .stat-card.bg-primary { background-color: #4f46e5 !important; }

/* .bg-light / .bg-white ของ Bootstrap ไม่ได้ผูกกับ token สีของโปรเจกต์นี้เลย (ตัวแปร --bs-light/
   --bs-white เป็นค่าคงที่ขาว/เทาอ่อนของ Bootstrap เอง) ทำให้กล่องที่ใช้ 2 คลาสนี้ (เช่น การ์ดย่อย
   ในโมดัลแก้ไขเงินเดือน/เพิ่มพนักงาน) พื้นหลังยังขาวค้างตอนสลับเป็นโหมดมืด ทั้งที่ตัวหนังสือเปลี่ยน
   เป็นสีอ่อนตามธีมแล้ว อ่านไม่ออก — ไม่แก้ที่ตัวแปร --bs-light/--bs-white ตรงๆ เพราะตัวแปรนั้นถูกใช้
   ร่วมกับ .text-white/.border-white ที่อื่นซึ่งต้องการขาวจริงเสมอ (เช่น ตัวหนังสือขาวบนปุ่ม/แบดจ์สีเข้ม)
   จึงปิดเฉพาะคลาส .bg-light/.bg-white ตรงนี้แทน */
[data-theme="dark"] .bg-light { background-color: var(--color-surface-hover) !important; }
[data-theme="dark"] .bg-white { background-color: var(--color-surface) !important; }

/* .table-light ของ Bootstrap ก็เป็นค่าคงที่ขาว/เทาอ่อนแบบเดียวกัน (ผูกกับตัวแปร --bs-table-bg/
   --bs-table-color ของมันเอง ไม่ใช่ --bs-light) ใช้กับแถวสรุป/หัวตาราง (เช่น tfoot สรุปยอดรวมใน
   payroll_detail, payroll_summary, attendance ฯลฯ) ต้อง override ตัวแปรนี้แยกต่างหาก */
[data-theme="dark"] .table-light {
    --bs-table-bg: var(--color-surface-hover);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
}

/* คลาส "-light"/"-white" ที่เหลือของ Bootstrap แต่ละตัวก็ผูกกับตัวแปรของตัวเองคนละชุด (ไม่ใช่
   --bs-light/--bs-white เหมือน .bg-light/.bg-white ข้างบน) ปิดรวดเดียวทุกตัวไว้กันพลาดซ้ำ แม้บาง
   คลาสยังไม่ได้ใช้ในหน้าไหนตอนนี้ก็ตาม เผื่อมีการเพิ่มหน้าใหม่ภายหลัง (.text-white/.border-white/
   .btn ปุ่มสีเข้มยังคงขาวจริงตามเดิม ไม่ถูกกระทบ) */
[data-theme="dark"] .alert-light {
    --bs-alert-bg: var(--color-surface-hover);
    --bs-alert-color: var(--color-text);
    --bs-alert-border-color: var(--color-border);
    --bs-alert-link-color: var(--color-text);
}
[data-theme="dark"] .list-group-item-light {
    --bs-list-group-color: var(--color-text);
    --bs-list-group-bg: var(--color-surface-hover);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-action-hover-bg: var(--color-border);
    --bs-list-group-action-active-bg: var(--color-border);
}
[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface-hover);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-border);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-border);
    --bs-btn-active-border-color: var(--color-border);
    --bs-btn-disabled-color: var(--color-text-secondary);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border);
}
[data-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-hover);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-surface-hover);
    --bs-btn-active-border-color: var(--color-border);
    --bs-btn-disabled-color: var(--color-text-secondary);
    --bs-btn-disabled-border-color: var(--color-border);
}
[data-theme="dark"] .text-bg-light { color: var(--color-text) !important; background-color: var(--color-surface-hover) !important; }
[data-theme="dark"] .border-light { border-color: var(--color-border) !important; }

/* ปุ่มสลับธีมของฝั่งพนักงาน (มือถือ ใช้ไอคอนล้วนในแถบบน) */
.employee-theme-toggle {
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    line-height: 1;
}
.employee-theme-toggle:hover { background: rgba(255,255,255,.15); }

/* Login */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    padding: 16px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 32px);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* Skeleton loading / empty state helpers ใช้ร่วมกันได้ทุกหน้า */
.skeleton {
    background: linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-border) 37%, var(--color-surface-hover) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty-state { text-align: center; padding: 48px 16px; color: var(--color-text-secondary); }
.empty-state i { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: .6; }

/* ==========================================================================
   Toggle switch — ใช้แทนปุ่ม toggle ธรรมดา + แทน confirm() ของเบราว์เซอร์สำหรับ
   การกระทำที่ย้อนกลับได้ (เปิด/ปิดสถานะ, เปิด/ปิดโอที ฯลฯ) กดแล้วบันทึกทันที ไม่มี popup ถาม
   ========================================================================== */
.toggle-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.toggle-switch-track {
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    flex-shrink: 0;
    transition: background-color .15s ease;
}
.toggle-switch-track.on { background: var(--color-success); }
.toggle-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    transition: left .15s ease;
}
.toggle-switch-track.on .toggle-switch-thumb { left: 19px; }
.toggle-switch-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.toggle-switch-link:hover .toggle-switch-label { color: var(--color-text); }

/* badge ที่กดสลับสถานะได้ตรงๆ (แทน switch เปล่าๆ ที่ไม่มีคำอธิบาย) — คลิกที่ badge เอง */
.badge-toggle-link {
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: filter .12s ease, transform .12s ease;
}
.badge-toggle-link:hover { filter: brightness(1.12); transform: translateY(-1px); }
.badge-toggle-link:active { transform: translateY(0); }

/* Slip */
@media print {
    .no-print { display: none !important; }
    .card { box-shadow: none !important; }
}