/* ============================================================
   U1E — UNIFIED THEME LAYER
   Login + Home + Dashboard  ·  Light (ขาว/แดง/ดำ) · Dark (ดำเทา/ม่วง)
   ============================================================

   ⚠️ วิธีที่เลือกใช้ และเหตุผล
   ------------------------------------------------------------
   ไฟล์นี้เป็น "ชั้นทับ" (theme layer) โหลดต่อจาก style.css
   ไม่ได้เขียนทับสีเดิมในไฟล์ต้นฉบับแม้แต่บรรทัดเดียว

   ทำไมไม่แก้ style.css ตรง ๆ:
     รอบก่อนผมลองแปลงสีทั้งไฟล์ (727 จุด) ด้วยสคริปต์ แล้วพัง —
     เพราะสี rgba() ความหมายขึ้นกับพื้นข้างหลัง สคริปต์รู้แค่ค่าตัวเลข
     ไม่รู้ว่าซ้อนอยู่บนอะไร ผลคือแถบเมนูยังดำ การ์ดกลายเป็นเทาซีด

   ข้อดีของวิธีนี้:
     · ถอดออกได้ทันที — ลบบรรทัด <link> ที่โหลดไฟล์นี้ ระบบกลับเป็นธีมเดิม 100%
     · ไม่แตะ business logic / API / permission / login flow เลย
     · ตรวจสอบง่าย เพราะการเปลี่ยนแปลงทั้งหมดอยู่ในไฟล์เดียว

   🔒 โลโก้: ไฟล์นี้ไม่มีกฎใดแตะ .brandBadgeBg / u1e-logo.png
      ทั้ง 2 โหมดใช้โลโก้เดิม ไม่ recolor ไม่ใส่ filter ไม่ทำ glow
============================================================ */


/* ============================================================
   1) DESIGN TOKENS  (ชุดเดียว ใช้ร่วมกันทั้ง 3 หน้า)
============================================================ */
:root,
html[data-theme="light"]{
    color-scheme: light;

    --t-bg:           #FFFFFF;
    --t-bg2:          #F7F7F8;
    --t-surface:      #FFFFFF;
    --t-surface-2:    #F7F7F8;
    --t-border:       #E5E7EB;

    --t-text:         #111111;
    --t-text2:        #4B5563;
    --t-muted:        #6B7280;

    --t-primary:      #E11D2E;
    --t-primary-h:    #C91526;
    --t-primary-soft: #FFF1F2;
    --t-on-primary:   #FFFFFF;

    --t-success:      #16A34A;
    --t-warning:      #D97706;
    --t-danger:       #DC2626;
    --t-info:         #2563EB;

    /* ⚠️ token ในสเปกออกแบบมาสำหรับ "พื้น/ขอบ" ซึ่งเหมาะสมแล้ว
       แต่ถ้าเอาไปใช้เป็น "ตัวอักษร" บนพื้นขาว contrast ไม่ถึง 4.5 (AA):
         primary #E11D2E บน #F7F7F8 = 4.44 ❌
         success #16A34A บน #FFFFFF = 3.30 ❌
         warning #D97706 บน #FFFFFF = 3.19 ❌
       จึงแยกตัวแปรสำหรับ "ข้อความ" ออกมาให้เข้มขึ้นพอดี
       -> สีพื้น/ขอบยังตรงสเปกเป๊ะ · ข้อความอ่านออกตามมาตรฐาน */
    --t-primary-text: #B80F26;
    --t-success-text: #0F6B35;
    --t-warning-text: #8A5200;
    --t-danger-text:  #DC2626;
    --t-info-text:    #2563EB;

    --t-shadow:       0 1px 2px rgba(17,17,17,.06), 0 8px 24px rgba(17,17,17,.06);
    --t-ring:         0 0 0 3px rgba(225,29,46,.22);
}

html[data-theme="dark"]{
    color-scheme: dark;

    --t-bg:           #090A0C;
    --t-bg2:          #101216;
    --t-surface:      #15171B;
    --t-surface-2:    #1B1E24;
    --t-border:       #2B2F36;

    --t-text:         #F3F4F6;
    --t-text2:        #C4C7CF;
    --t-muted:        #8C93A3;

    --t-primary:      #A855F7;
    --t-primary-h:    #9333EA;
    --t-primary-soft: rgba(168,85,247,.12);
    /* ⚠️ ขาวบนม่วง #A855F7 = 3.96 (ตก AA) -> ใช้ม่วงเข้มเกือบดำแทน = 4.68 ✅ */
    --t-on-primary:   #1B0B2E;

    --t-success:      #22C55E;
    --t-warning:      #F59E0B;
    --t-danger:       #EF4444;
    --t-info:         #60A5FA;

    /* โหมดมืด: สีสถานะสว่างพออยู่แล้ว · ปรับเฉพาะ primary ที่ใช้เป็นข้อความ
       บนพื้น primary-soft (ม่วงโปร่ง) ให้ผ่าน AA */
    --t-primary-text: #C18BFA;
    --t-success-text: var(--t-success);
    --t-warning-text: var(--t-warning);
    --t-danger-text:  var(--t-danger);
    --t-info-text:    var(--t-info);

    --t-shadow:       0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
    --t-ring:         0 0 0 3px rgba(168,85,247,.28);
}

/* ---- แม็ปเข้าตัวแปรเดิมของระบบ ----
   style.css ใช้ --bg --panel --text --muted --border --green ฯลฯ อยู่แล้ว
   จับคู่ไว้ตรงนี้ที่เดียว = component เดิมที่ใช้ var() เปลี่ยนตามทันที
   โดยไม่ต้องไล่แก้ทีละ selector */
html[data-theme="light"],
html[data-theme="dark"]{
    --bg:        var(--t-bg);
    --panel:     var(--t-surface);
    --panel2:    var(--t-surface-2);
    --col-head:  var(--t-surface-2);
    --border:    var(--t-border);
    --text:      var(--t-text);
    --muted:     var(--t-muted);
    --badge:     var(--t-surface-2);
    --green:     var(--t-primary);      /* สีหลักของแบรนด์ในระบบเดิม */
    /* ⚠️ (แก้ 2026-08) เดิมผมแม็ป gold/amber/orange เป็นตัวเดียวกันหมด
       ทำให้สถานะ "เตือน" (เหลือง) กับ "วิกฤต" (ส้ม) แยกไม่ออก
       และ .totalNumber ที่ใช้ var(--gold) ก็เพี้ยนไปด้วย
       -> แยกเฉดคืน + ใช้ค่าที่ contrast ผ่านบนพื้นขาว */
    --gold:      #8A6100;   /* ทองเข้ม — ตัวเลขยอดรวมสถานะปกติ   5.65 */
    --gold-soft: var(--t-primary-soft);
    --amber:      #B45309;   /* เตือน (ส้มอมเหลือง)  5.02 */
    --amber-ink:  var(--t-surface-2);
    --orange:     #C2410C;   /* วิกฤต (ส้มแดง)      5.21 */
    --orange-ink: var(--t-surface-2);
    --red:        var(--t-danger);
    --red-ink:    var(--t-surface-2);
}


/* ============================================================
   2) พื้นฐานหน้า
============================================================ */
html[data-theme] body{
    background: var(--t-bg) !important;
    color: var(--t-text) !important;
}
html[data-theme="light"] body{ background: var(--t-bg2) !important; }

/* ============================================================
   🧹 ล้างพื้นหลังตกแต่งออกทั้งหมด (ตามที่หน้างานสั่ง)
   ตัวอย่างที่ให้มาเป็นพื้นเรียบ ไม่มีภาพฉากมือ/ออร่า
   ------------------------------------------------------------
   ⚠️ ซ่อนด้วย CSS เท่านั้น ไม่ได้ลบ element หรือแตะ JS
      ระบบอัปโหลดพื้นหลังของแอดมินยังทำงานเหมือนเดิมทุกอย่าง
      ถอด theme.css ออก = ภาพกลับมาเหมือนเดิม */
html[data-theme] .u1e-dashbg,
html[data-theme] .ld-scene,
html[data-theme] #dashboardBg,
html[data-theme] .bgArt,
html[data-theme] .bg-art{
    display: none !important;
}
/* gradient ตกแต่งบน body ของธีมเดิม */
html[data-theme] body::before,
html[data-theme] body::after{ display:none !important; }

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3{ color: var(--t-text) !important; }


/* ============================================================
   3) SIDEBAR  (Home + Dashboard ใช้ตัวเดียวกัน)
============================================================ */
html[data-theme] .u1e-sidebar{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
    color: var(--t-text) !important;
}
html[data-theme] .u1e-sidebar *{ border-color: var(--t-border); }

/* หัวข้อกลุ่มเมนู (หลัก / จัดการ / ระบบ) */
html[data-theme] .u1e-sidebar .sb-sec,
html[data-theme] .u1e-sidebar .sec-label{
    color: var(--t-muted) !important;
}

/* ปุ่มเมนู */
html[data-theme] .u1e-sidebar a,
html[data-theme] .u1e-sidebar .m-btn{
    color: var(--t-text2) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme] .u1e-sidebar a:hover,
html[data-theme] .u1e-sidebar .m-btn:hover{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
}
/* เมนูที่เลือกอยู่ — Light: แดงอ่อน+ตัวแดง · Dark: ม่วงโปร่ง+ตัวม่วง */
html[data-theme] .u1e-sidebar a.active,
html[data-theme] .u1e-sidebar .m-btn.active,
html[data-theme] .u1e-sidebar .m-btn.on{
    background: var(--t-primary-soft) !important;
    border: 1px solid var(--t-primary) !important;
    color: var(--t-primary-text) !important;
    font-weight: 700;
}

/* การ์ดผู้ใช้ด้านล่าง sidebar */
html[data-theme] .whoami{
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}
html[data-theme] .whoami small,
html[data-theme] .whoami .sub{ color: var(--t-muted) !important; }
/* จุดออนไลน์ = เขียวเสมอ ทั้ง 2 โหมด (สถานะต้องคงความหมาย) */
html[data-theme] .whoami .dot,
html[data-theme] .avatar-dot{ background: var(--t-success) !important; }


/* ============================================================
   4) การ์ด / พาเนล / ตาราง
============================================================ */
html[data-theme] .totalCard,
html[data-theme] .folder,
html[data-theme] .m-card,
html[data-theme] .cc-box,
html[data-theme] .cc-cell,
html[data-theme] .card,
html[data-theme] .panel{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
    color: var(--t-text) !important;
}

html[data-theme] .folder-header,
html[data-theme] .cc-h,
html[data-theme] .cc-top,
html[data-theme] .card-h{
    background: var(--t-surface-2) !important;
    border-bottom: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}

/* แถวรายการ (LINE OA / ทีม) */
html[data-theme] .oa-item,
html[data-theme] .ps-row,
html[data-theme] .cc-row,
html[data-theme] .cc-tr{
    background: var(--t-surface) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}
html[data-theme] .oa-item:hover,
html[data-theme] .cc-row:hover{
    background: var(--t-surface-2) !important;
    border-color: var(--t-primary) !important;   /* hover เบา ๆ ไม่ขยับการ์ด */
}

/* ตัวเลขสำคัญ — Light แดง · Dark ม่วง */
html[data-theme] .totalCard .big,
html[data-theme] .totalCard b,
html[data-theme] .cc-fig,
html[data-theme] .kpi-num{ color: var(--t-primary-text) !important; }

/* 🐞 FIX: ชื่อรายการในแถวจางเกินไปในโหมดสว่าง (เดิมเป็นสีอ่อนสำหรับพื้นดำ) */
html[data-theme] .oa-item .name,
html[data-theme] .folder-header b,
html[data-theme] .folder-header .name{
    color: var(--t-text) !important;
    font-weight: 600;
}
html[data-theme] .muted,
html[data-theme] .sub,
html[data-theme] .small,
html[data-theme] .cc-note{ color: var(--t-muted) !important; }


/* ============================================================
   5) ปุ่ม / ฟอร์ม
============================================================ */
html[data-theme] button,
html[data-theme] .btn{
    background: var(--t-surface-2);
    color: var(--t-text);
    border: 1px solid var(--t-border);
}
html[data-theme] button:hover,
html[data-theme] .btn:hover{ border-color: var(--t-primary); }
html[data-theme] button:focus-visible,
html[data-theme] .btn:focus-visible,
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible{
    outline: none;
    box-shadow: var(--t-ring);          /* focus เห็นชัดด้วยคีย์บอร์ด */
    border-color: var(--t-primary);
}
html[data-theme] button:disabled,
html[data-theme] .btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ปุ่มหลัก */
html[data-theme] #loginBtn,
html[data-theme] .btn-primary,
html[data-theme] .primary{
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    font-weight: 700;
}
html[data-theme] #loginBtn:hover,
html[data-theme] .btn-primary:hover,
html[data-theme] .primary:hover{
    background: var(--t-primary-h) !important;
    border-color: var(--t-primary-h) !important;
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder{ color: var(--t-muted) !important; }
/* dropdown บนธีมเข้ม — option ใช้สีของ OS ถ้าไม่กำหนดจะจมพื้น */
html[data-theme] select option{
    background: var(--t-surface);
    color: var(--t-text);
}


/* ============================================================
   6) ป้ายสถานะ — ความหมายคงเดิมทั้ง 2 โหมด
============================================================ */
html[data-theme] .status.online,
html[data-theme] .badge.ok,
html[data-theme] .chip.ok{ color: var(--t-success-text) !important; border-color: var(--t-success) !important; }

html[data-theme] .status.offline,
html[data-theme] .badge.bad,
html[data-theme] .chip.bad{ color: var(--t-danger-text) !important; border-color: var(--t-danger) !important; }

html[data-theme] .badge.warn,
html[data-theme] .chip.warn{ color: var(--t-warning-text) !important; border-color: var(--t-warning) !important; }

html[data-theme] .badge.info,
html[data-theme] .chip.info{ color: var(--t-info-text) !important; border-color: var(--t-info) !important; }

/* 🐞 FIX: .badge เดิมตั้ง color:#0d0f16 (เข้มตายตัว) คู่กับพื้นสีแบรนด์เข้ม
   พอเปลี่ยนพื้นเป็นสีอ่อน ตัวเลขเลยกลืนหาย -> ต้องคุมทั้งพื้นและตัวอักษรคู่กัน
   ตัวเลขในแถวรายการคือข้อมูลสำคัญ ใช้พื้นสีหลัก + ตัวอักษรที่ contrast ผ่าน */
html[data-theme] .oa-item .badge,
html[data-theme] .folder .badge{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border: none !important;
}
/* ค่าเป็นศูนย์ = ไม่ต้องเด่น ใช้พื้นกลาง ๆ */
html[data-theme] .oa-item .badge.zero,
html[data-theme] .oa-item .badge[data-zero="1"]{
    background: var(--t-surface-2) !important;
    color: var(--t-muted) !important;
}

html[data-theme] .chip,
html[data-theme] .status{
    background: var(--t-surface-2) !important;
}


/* ============================================================
   7) LOGIN
============================================================ */
html[data-theme] #loginScreen{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
    color: var(--t-text) !important;
}
html[data-theme] #loginScreen .eyebrow{
    color: var(--t-primary-text) !important;
    letter-spacing:.12em;
}
html[data-theme] #loginError{ color: var(--t-danger-text) !important; }
html[data-theme] #loginNote,
html[data-theme] .authSwitch{ color: var(--t-muted) !important; }
html[data-theme] .authSwitch a{ color: var(--t-primary-text) !important; }

/* 🔒 โลโก้ — ไม่มีกฎใดแตะ .brandBadgeBg โดยตั้งใจ
   ปรับได้แค่กรอบรอบโลโก้ให้เข้าธีม (ตัวรูปคงเดิม 100%) */
html[data-theme] .brandLockup{ background: transparent !important; }


/* ============================================================
   8) POPUP / DROPDOWN / TOAST — ห้ามหลุดธีม
============================================================ */
html[data-theme] .popup,
html[data-theme] .modal,
html[data-theme] .dropdown,
html[data-theme] .menu,
html[data-theme] .toast,
html[data-theme] .um-box,
html[data-theme] .tooltip{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}
html[data-theme] .popup-ok{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border-color: var(--t-primary) !important;
}


/* ============================================================
   9) ปุ่มสลับธีม
============================================================ */
.u1e-theme-btn{
    position:fixed; right:16px; top:16px; z-index:9999;
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1;
    background: var(--t-surface); color: var(--t-text);
    border:1px solid var(--t-border);
    box-shadow: var(--t-shadow);
}
.u1e-theme-btn:hover{ border-color: var(--t-primary); color: var(--t-primary-text); }
.u1e-theme-btn:focus-visible{ outline:none; box-shadow: var(--t-ring); }
@media (max-width:640px){ .u1e-theme-btn{ width:36px; height:36px; right:10px; top:10px; } }


/* ============================================================
   10) ปรับให้ใกล้ตัวอย่างที่ให้มา (spacing / รูปทรง / น้ำหนักตัวอักษร)
   ------------------------------------------------------------
   ⚠️ ปรับเฉพาะ "หน้าตา" ไม่ขยับตำแหน่ง element และไม่แตะ layout grid
      เพื่อไม่ให้ผู้ใช้ต้องเรียนรู้ใหม่ (ตามที่สเปกกำชับ)
============================================================ */

/* การ์ดกลุ่ม — มุมมนขึ้น เงาเบา เส้นคั่นบาง ตามตัวอย่าง */
html[data-theme] .folder{
    border-radius: 14px !important;
    overflow: hidden;
}
html[data-theme] .folder-header{
    font-weight: 700;
    padding: 12px 14px !important;
}
/* ชื่อกลุ่มในหัวการ์ด — ตัวอย่างใช้สีหลัก (แดง/ม่วง) */
html[data-theme] .folder-header .name,
html[data-theme] .folder-header b{
    color: var(--t-primary-text) !important;
}
/* ตัวเลขรวมมุมขวาของหัวการ์ด */
html[data-theme] .folder-header .badge{
    background: var(--t-surface) !important;
    color: var(--t-primary-text) !important;
    border: 1px solid var(--t-border) !important;
    font-weight: 800;
}

/* แถวรายการ — เส้นคั่นบางแทนกล่องซ้อนกล่อง */
html[data-theme] .oa-item{
    border: none !important;
    border-top: 1px solid var(--t-border) !important;
    border-radius: 0 !important;
    padding: 11px 14px !important;
}
html[data-theme] .folder .oa-item:first-of-type{ border-top: none !important; }

/* แถวที่มีค่ามาก (highlight) — พื้นอ่อนสีหลัก ตามตัวอย่าง */
html[data-theme] .oa-item.hot,
html[data-theme] .oa-item.alert{
    background: var(--t-primary-soft) !important;
}

/* การ์ดยอดรวม */
html[data-theme] .totalCard{
    border-radius: 14px !important;
}
html[data-theme] .totalCard .big{
    font-weight: 800;
    letter-spacing: -.5px;
}

/* Sidebar — เมนูมนขึ้น ระยะห่างสบายตาแบบตัวอย่าง */
html[data-theme] .u1e-sidebar{ border-radius: 18px !important; }
html[data-theme] .u1e-sidebar .m-btn,
html[data-theme] .u1e-sidebar a{
    border-radius: 10px !important;
    padding: 9px 11px !important;
}

/* Login card */
html[data-theme] #loginScreen{
    border-radius: 18px !important;
    padding: 26px 24px !important;
}
html[data-theme] #loginScreen input{
    border-radius: 10px !important;
    padding: 12px 14px !important;
}
html[data-theme] #loginBtn{
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 15px;
}


/* ============================================================
   11) ปรับตามตัวอย่าง (mockup) — โครงเดิม หน้าตาใหม่
============================================================ */

/* ---- ไอคอนเส้นในเมนู ---- */
html[data-theme] .sb-ic{
    width:19px; height:19px; flex:0 0 auto;
    stroke: currentColor;
}
html[data-theme] .sb-item{
    display:flex !important; align-items:center; gap:11px;
    width:100%; text-align:left;
    padding:10px 12px !important;
    border-radius:11px !important;
    background:transparent !important;
    border:1px solid transparent !important;
    color: var(--t-text2) !important;
    font-weight:500;
}
html[data-theme] .sb-item:hover{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
}
/* เมนูที่เลือก — Light แดงอ่อน+ขอบแดง · Dark ม่วงโปร่ง+ขอบม่วง */
html[data-theme] .sb-item.active{
    background: var(--t-primary-soft) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
    font-weight:700;
}
html[data-theme] .sb-item.sb-danger{ color: var(--t-danger-text) !important; }
html[data-theme] .sb-item.sb-danger:hover{
    background: var(--t-primary-soft) !important;
}

/* หัวข้อกลุ่มเมนู (หลัก / จัดการ / ระบบ) */
html[data-theme] .sb-sec,
html[data-theme] .u1e-sidebar .sec{
    font-size:11.5px; letter-spacing:.04em;
    color: var(--t-muted) !important;
    margin:14px 4px 6px;
}

/* แบรนด์บนหัว sidebar */
html[data-theme] .sb-brand{
    color: var(--t-primary-text) !important;
    font-weight:800; letter-spacing:.5px;
    padding-bottom:14px; margin-bottom:8px;
    border-bottom:1px solid var(--t-border) !important;
}
html[data-theme] .sb-brand span{ color: var(--t-text2) !important; font-weight:600; }

/* ---- การ์ดกลุ่ม แบบตัวอย่าง ---- */
html[data-theme] .folder{
    border-radius:16px !important;
    box-shadow: var(--t-shadow) !important;
}
html[data-theme] .folder-header{
    background: var(--t-surface) !important;
    border-bottom:1px solid var(--t-border) !important;
    padding:14px 16px !important;
}
html[data-theme] .oa-item{
    padding:12px 16px !important;
}
html[data-theme] .oa-item .name{ font-weight:500; }

/* ป้ายตัวเลขในแถว — ตัวอย่างใช้พื้นอ่อน ตัวเลขสีหลัก (ไม่ใช่ทึบ) */
html[data-theme] .oa-item .badge{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border:none !important;
    font-size:14px !important;
    padding:3px 11px !important;
    min-width:34px; text-align:center;
}
/* ตัวเลขรวมบนหัวการ์ด — เด่นกว่า */
html[data-theme] .folder-header .badge{
    background: transparent !important;
    color: var(--t-primary-text) !important;
    border:none !important;
    font-size:18px !important;
    font-weight:800 !important;
    padding:0 !important;
}

/* ---- การ์ดยอดรวม ---- */
html[data-theme] .totalCard{
    border-radius:16px !important;
    padding:16px 22px !important;
}
html[data-theme] .totalCard .big{
    color: var(--t-primary-text) !important;
    font-size:44px !important; font-weight:800; letter-spacing:-1px;
}

/* ---- Login ตามตัวอย่าง ---- */
html[data-theme] #loginScreen{
    border-radius:20px !important;
    padding:30px 26px !important;
    max-width:400px;
}
html[data-theme] #loginScreen .eyebrow{
    font-size:12.5px; font-weight:700; letter-spacing:.22em;
    margin-bottom:18px;
}
html[data-theme] #loginScreen input{
    border-radius:12px !important;
    padding:13px 15px !important;
    font-size:14.5px;
}
html[data-theme] #loginBtn{
    border-radius:12px !important;
    padding:13px !important;
    font-size:15.5px; font-weight:700;
    box-shadow:none !important;
}
html[data-theme] .authSwitch{ font-size:13px; }

/* ---- Empty state (การ์ดที่ไม่มีรายการ) ---- */
html[data-theme] .folder .oa-item:only-child .badge{ opacity:.55; }


/* ============================================================
   12) แก้จุดที่หลุดธีม (จากภาพหน้างาน)
============================================================ */

/* ---- 🐞 ป๊อปอัป "ข้อมูลของฉัน" ยังเป็นพื้นเข้มตอนโหมดสว่าง ----
   สาเหตุ: ใช้คลาส .sm-* ซึ่งตั้งสีตายตัวไว้ (#eef0f6 บนพื้นเข้ม)
   ไม่ตรงกับ .popup/.modal ที่ผมครอบไว้รอบก่อน */
html[data-theme] .sm-profile{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 14px !important;
    color: var(--t-text) !important;
}
html[data-theme] .sm-row + .sm-row{
    border-top: 1px solid var(--t-border) !important;
}
html[data-theme] .sm-k{ color: var(--t-muted) !important; }
html[data-theme] .sm-v{ color: var(--t-text) !important; }
html[data-theme] .sm-edit{
    background: var(--t-surface-2) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .sm-edit:hover{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border-color: var(--t-primary) !important;
}
html[data-theme] .sm-head{ color: var(--t-muted) !important; }
/* ปุ่มเมนูในป๊อปอัป (เปลี่ยนรหัสผ่าน / 2FA) */
html[data-theme] .sm-btn,
html[data-theme] .sm-link,
html[data-theme] #settingsModalBody button{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .sm-btn:hover,
html[data-theme] #settingsModalBody button:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}
/* กล่องครอบ modal ทั้งหมดของระบบ */
html[data-theme] .modal-box,
html[data-theme] .modalCard,
html[data-theme] #settingsModal,
html[data-theme] #settingsModalBody{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}
/* ฉากหลังมืดของ modal — โหมดสว่างใช้ดำจาง ไม่ใช่ดำทึบ */
html[data-theme="light"] .modal-back,
html[data-theme="light"] .sm-back,
html[data-theme="light"] .um-bk{
    background: rgba(17,17,17,.38) !important;
}

/* ---- 🐞 การ์ดยอดรวม: ตัวหนังสือจาง + ตัวเลขเบลอ ----
   สาเหตุ 3 อย่าง:
     1) background เป็น gradient เข้มตายตัว (#161616 -> #0a0a0a)
     2) .totalNumber ใช้ font serif + text-shadow เรืองแสง -> เบลอบนพื้นขาว
     3) .totalLabel เป็นสีจางสำหรับพื้นดำ */
html[data-theme] .totalCard{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}
html[data-theme] .totalCard::before{ display:none !important; }   /* เส้นเรืองแสงด้านบน */

html[data-theme] .totalLabel{
    color: var(--t-text2) !important;
    font-weight: 600;
    text-shadow: none !important;
}
html[data-theme] .totalNumber{
    /* ใช้ฟอนต์เดียวกับทั้งระบบ อ่านชัดกว่า serif + ไม่มีเงาเรืองแสง (แก้อาการเบลอ)
       ⚠️ ไม่ตั้ง color — หน้างานสั่งให้แก้แค่ 2 บรรทัดข้อความ ตัวเลขคงสีเดิม */
    font-family: inherit !important;
    text-shadow: none !important;
    font-weight: 800;
    letter-spacing: -1.5px;
}
/* สถานะเตือน/วิกฤต — ปล่อยให้ระบบเดิมจัดการสีเอง (มีกฎ .has-warn/.has-crit อยู่แล้ว) */

html[data-theme] .totalCard .upd,
html[data-theme] .totalCard small{ color: var(--t-muted) !important; }


/* ============================================================
   13) การ์ดผู้ใช้ท้าย sidebar + เก็บพื้นหลังให้หมด
============================================================ */

/* ---- 🐞 การ์ดผู้ใช้ยังเป็นสไตล์กระจกฝ้าของธีมมืด ----
   .whoami เดิมใช้ backdrop-filter blur + พื้นขาวโปร่ง + เงาเข้ม
   ออกแบบมาให้ลอยอยู่บนภาพพื้นหลัง พอไม่มีภาพแล้วดูลอย ๆ ไม่เข้าธีม */
html[data-theme] .whoami{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--t-text) !important;
    padding: 12px 14px !important;
    width: 100%;
}
/* จุดออนไลน์ = เขียวเสมอ (สถานะต้องคงความหมาย ไม่ใช่สีธีม) */
html[data-theme] .whoami-dot{
    background: var(--t-success) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-success) 22%, transparent) !important;
}
html[data-theme] .whoami-name{ color: var(--t-text) !important; font-weight:700; }
html[data-theme] .whoami-nick,
html[data-theme] .whoami-user,
html[data-theme] .whoami-time,
html[data-theme] .whoami-l2{ color: var(--t-muted) !important; }
html[data-theme] .whoami-role{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700;
}
html[data-theme] .whoami-edit,
html[data-theme] .whoami-settings-btn{
    background: transparent !important;
    color: var(--t-muted) !important;
    border: 1px solid transparent !important;
}
html[data-theme] .whoami-edit:hover,
html[data-theme] .whoami-settings-btn:hover{
    background: var(--t-surface-2) !important;
    color: var(--t-primary-text) !important;
}
/* สถานะเชื่อมต่อเซิร์ฟเวอร์ */
html[data-theme] .whoami .connStatus,
html[data-theme] .whoami .connText{ color: var(--t-muted) !important; }
html[data-theme] .whoami .connText.ok,
html[data-theme] .connText.connected{ color: var(--t-success) !important; }

/* ปุ่มออกจากระบบ — แดงเสมอทั้ง 2 โหมด (การกระทำอันตราย) */
html[data-theme] .whoami-logout{
    background: transparent !important;
    color: var(--t-danger-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 10px !important;
    font-weight: 700;
}
html[data-theme] .whoami-logout:hover{
    background: var(--t-danger) !important;
    color: #FFFFFF !important;
    border-color: var(--t-danger) !important;
    transform: none !important;
}

/* แถวเลือกภาษา */
html[data-theme] .langRow,
html[data-theme] .lang-row,
html[data-theme] .u1e-sidebar .lang{
    background: transparent !important;
    color: var(--t-text2) !important;
    border-top: 1px solid var(--t-border) !important;
}

/* ---- 🧹 พื้นหลังรูปมือ: ปิดให้ขาดทุกทาง ----
   ตัว element ถูกซ่อนไปแล้วในหมวด "ล้างพื้นหลัง" ด้านบน
   ตรงนี้กันเพิ่มเผื่อ JS ตั้ง style ตรง ๆ (db.style.backgroundImage = ...)
   ⚠️ ยังไม่ลบ element และไม่แตะ JS — ถอด theme.css ออก ภาพกลับมาเหมือนเดิม */
html[data-theme] .u1e-dashbg{
    display: none !important;
    background-image: none !important;
    opacity: 0 !important;
}
html[data-theme] .u1e-dashbg video{ display: none !important; }


/* ============================================================
   14) 🐞 ตัวหนังสือหายบนพื้นขาว — เก็บให้ครบ
   ------------------------------------------------------------
   สาเหตุเดียวกันทั้งหมด: ธีมเดิมเป็นธีมมืด จึงใช้สีตัวอักษร "อ่อน"
   (#eef0f6 / #c7ced6 / rgba(255,255,255,…)) ซึ่งพอพื้นเป็นขาวก็หายไปเลย

   ⚠️ ตั้งเฉพาะ "สีตัวอักษร" ไม่แตะขนาด/ตำแหน่ง/โครงสร้าง
      และไม่เขียนทับสีสถานะ (เขียว/ส้ม/แดง/ฟ้า) ซึ่งมีกฎเฉพาะของตัวเองอยู่แล้ว
============================================================ */

/* ---- ชื่อรายการในตาราง/รายการของ Dashboard ---- */
html[data-theme] .cc-row .nm,
html[data-theme] .cc-act .nm,
html[data-theme] .cc-cell .nm,
html[data-theme] .cc-title,
html[data-theme] .cc-tr .nm,
html[data-theme] .ov-name,
html[data-theme] .ps-row .nm,
html[data-theme] .row .nm,
html[data-theme] .nm{
    color: var(--t-text) !important;
}
/* บรรทัดรายละเอียดใต้ชื่อ (โฟลเดอร์ · เวลา · รอนานสุด) */
html[data-theme] .cc-row .sub,
html[data-theme] .cc-act .sub,
html[data-theme] .cc-note,
html[data-theme] .cc-legend,
html[data-theme] .cc-xaxis,
html[data-theme] .sub{
    color: var(--t-muted) !important;
}

/* ---- System Health ---- */
html[data-theme] .hs-row,
html[data-theme] .hs-name,
html[data-theme] .sys-row,
html[data-theme] .sys-name{
    color: var(--t-text) !important;
}

/* ---- หัวข้อการ์ด/แผงต่าง ๆ ---- */
html[data-theme] .cc-h,
html[data-theme] .cc-h b,
html[data-theme] .cc-top b,
html[data-theme] .card-h,
html[data-theme] .card-h b,
html[data-theme] .panel-title,
html[data-theme] .sec-title{
    color: var(--t-text) !important;
}

/* ---- ป๊อปอัป: หัวเรื่อง + ปุ่มเมนู ---- */
html[data-theme] .sm-title,
html[data-theme] .modal-title,
html[data-theme] #settingsModal h2,
html[data-theme] #settingsModal h3,
html[data-theme] #settingsModalBody h2,
html[data-theme] #settingsModalBody h3{
    color: var(--t-text) !important;
}
html[data-theme] .sm-narrow,
html[data-theme] #settingsModalBody a,
html[data-theme] #settingsModalBody .row{
    color: var(--t-text) !important;
}

/* ---- การ์ดผู้ใช้: ชื่อในบรรทัดแรก ---- */
html[data-theme] .u1e-sidebar .sb-u-txt,
html[data-theme] .u1e-sidebar .sb-u-txt b,
html[data-theme] .whoami-l1,
html[data-theme] .whoami-l1 *{
    color: var(--t-text) !important;
}
html[data-theme] .whoami-nick,
html[data-theme] .whoami-user,
html[data-theme] .whoami-time{ color: var(--t-muted) !important; }
/* ป้าย "แอดมิน" ต้องไม่โดนกฎด้านบนทับ */
html[data-theme] .whoami-l1 .whoami-role{ color: var(--t-primary-text) !important; }

/* ---- ตาข่ายกันพลาด (โหมดสว่างเท่านั้น) ----
   ถ้ายังมี element ไหนตั้งสีขาวไว้ตรง ๆ แล้วผมยังไม่ได้ครอบ
   ให้ตกมาเป็นสีตัวอักษรหลักแทนที่จะหายไปเลย
   ⚠️ ใช้ specificity ต่ำ (ไม่มี !important) เพื่อไม่ให้ทับสีสถานะที่ตั้งไว้เจาะจง */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#eef0f6"],
html[data-theme="light"] [style*="color:#c7ced6"]{
    color: var(--t-text) !important;
}

/* (2026-08) ตัวเลขยอดรวม — คงสีเดิมของระบบไว้ตามที่หน้างานสั่ง
   "แก้แค่ ยอดรวมทั้งหมด / อัปเดต เป็นสีแดง" -> ไม่แตะ .totalNumber */


/* ============================================================
   15) 🐞 หน้าสมัครสมาชิก / เปลี่ยนรหัสผ่าน / ลืมรหัสผ่าน
   ------------------------------------------------------------
   modal เหล่านี้ใช้ id เฉพาะตัว (#registerModal ฯลฯ) และตั้งสีตายตัวไว้
   จึงไม่โดนกฎ .modal/.popup ที่ครอบไว้ก่อนหน้า
============================================================ */
html[data-theme] #registerModal,
html[data-theme] #registerMktModal,
html[data-theme] #changePwModal,
html[data-theme] #forgotPwModal,
html[data-theme] #adminModal,
html[data-theme] #oaConnectModal,
html[data-theme] #twofaSetupModal,
html[data-theme] #permSettingsModal{
    background: rgba(17,17,17,.42) !important;      /* ฉากหลัง */
}
html[data-theme="dark"] #registerModal,
html[data-theme="dark"] #registerMktModal,
html[data-theme="dark"] #changePwModal,
html[data-theme="dark"] #forgotPwModal,
html[data-theme="dark"] #adminModal,
html[data-theme="dark"] #oaConnectModal,
html[data-theme="dark"] #twofaSetupModal,
html[data-theme="dark"] #permSettingsModal{
    background: rgba(0,0,0,.62) !important;
}

/* กล่องเนื้อหา */
html[data-theme] #registerModal .box,
html[data-theme] #registerMktModal .box,
html[data-theme] #changePwModal .box,
html[data-theme] #forgotPwModal .box,
html[data-theme] #adminModal .box,
html[data-theme] #oaConnectModal .box,
html[data-theme] #twofaSetupModal .box,
html[data-theme] #permSettingsModal .box{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--t-shadow) !important;
}
/* หัวเรื่อง + คำอธิบายใต้หัวเรื่อง */
html[data-theme] #registerModal .box h2,
html[data-theme] #registerMktModal .box h2,
html[data-theme] #changePwModal .box h2,
html[data-theme] #forgotPwModal .box h2,
html[data-theme] #registerModal .box h3,
html[data-theme] #registerMktModal .box h3{
    color: var(--t-text) !important;
}
html[data-theme] #registerModal .box p,
html[data-theme] #registerMktModal .box p,
html[data-theme] #changePwModal .box p,
html[data-theme] #forgotPwModal .box p,
html[data-theme] #registerModal .hint,
html[data-theme] #registerMktModal .hint,
html[data-theme] #registerMktModal label,
html[data-theme] #registerModal label{
    color: var(--t-text2) !important;
}

/* ช่องกรอก */
html[data-theme] #registerModal input,
html[data-theme] #registerMktModal input,
html[data-theme] #changePwModal input,
html[data-theme] #forgotPwModal input,
html[data-theme] #registerModal select,
html[data-theme] #registerMktModal select{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 11px !important;
}
html[data-theme="dark"] #registerModal input,
html[data-theme="dark"] #registerMktModal input,
html[data-theme="dark"] #changePwModal input,
html[data-theme="dark"] #forgotPwModal input{
    background: var(--t-surface-2) !important;
}
html[data-theme] #registerModal input::placeholder,
html[data-theme] #registerMktModal input::placeholder,
html[data-theme] #changePwModal input::placeholder,
html[data-theme] #forgotPwModal input::placeholder{
    color: var(--t-muted) !important;
}
html[data-theme] #registerModal input:focus,
html[data-theme] #registerMktModal input:focus,
html[data-theme] #changePwModal input:focus,
html[data-theme] #forgotPwModal input:focus{
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    outline: none;
}

/* ปุ่ม */
html[data-theme] #registerModal .primary,
html[data-theme] #registerMktModal .primary,
html[data-theme] #changePwModal .primary,
html[data-theme] #forgotPwModal .primary{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border: 1px solid var(--t-primary) !important;
    font-weight: 700;
}
html[data-theme] #registerModal .primary:hover,
html[data-theme] #registerMktModal .primary:hover{
    background: var(--t-primary-h) !important;
    border-color: var(--t-primary-h) !important;
}
html[data-theme] #registerModal .secondary,
html[data-theme] #registerMktModal .secondary,
html[data-theme] #changePwModal .secondary,
html[data-theme] #forgotPwModal .secondary{
    background: var(--t-surface-2) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #registerModal .secondary:hover,
html[data-theme] #registerMktModal .secondary:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}

/* ปุ่มเลือกบริษัท MKT365 / MKT656 / … */
html[data-theme] #registerMktModal .mkt-pick,
html[data-theme] #registerMktModal .pick,
html[data-theme] #registerMktModal .chip{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #registerMktModal .mkt-pick.on,
html[data-theme] #registerMktModal .pick.on,
html[data-theme] #registerMktModal .chip.on{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border-color: var(--t-primary) !important;
    font-weight: 700;
}


/* ============================================================
   16) หน้า Loading · ยอดรวม · ป๊อปอัปข้อมูลของฉัน (จากภาพหน้างาน)
============================================================ */

/* ---- 🐞 หน้า LOADING: ตัวอักษรจางจนอ่านไม่ออกในโหมดสว่าง ----
   .loadTitle ใช้ฟอนต์ serif + var(--text) · .loadPercent ใช้ var(--muted)
   แต่แถบ .loadBarFill เป็น gradient ทอง->เขียวของธีมเดิม */
html[data-theme] #loadingScreen{
    background: var(--t-bg) !important;
}
html[data-theme] .loadTitle{
    font-family: inherit !important;
    color: var(--t-text) !important;
    font-weight: 800;
    letter-spacing: .18em;
}
html[data-theme] .loadPercent{
    color: var(--t-primary-text) !important;
    font-weight: 800;
}
html[data-theme] .loadBarTrack{
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .loadBarFill{
    background: var(--t-primary) !important;
}
/* วงแหวนหมุนรอบโลโก้ — โหมดสว่างใช้สีหลัก · โหมดมืดใช้ม่วง
   🔒 ตัวโลโก้ (.u1e-spin-logo) ไม่ถูกแตะ */
html[data-theme] .u1e-spin-ring{
    background: conic-gradient(from 0deg,
        var(--t-primary), var(--t-primary-h), var(--t-primary)) !important;
    filter: none !important;
}
html[data-theme] #loadingScreen.release .u1e-spin-ring{ filter: none !important; }

/* ---- 🐞 "ยอดรวมทั้งหมด" + "อัปเดต 16:25" ต้องเป็นสีหลัก ---- */
html[data-theme] .totalCard .totalLabel,
html[data-theme] #dashboard .totalLabel{
    color: var(--t-primary-text) !important;
    font-weight: 700;
}
html[data-theme] .totalCard .upd,
html[data-theme] .totalCard .totalUpd,
html[data-theme] .totalCard small,
html[data-theme] .totalCard .sub{
    color: var(--t-primary-text) !important;
    opacity: .85;
}

/* ---- 🐞 ป๊อปอัป "ข้อมูลของฉัน" กล่องนอกยังเป็นพื้นเข้ม ----
   กล่องชั้นนอก (#settingsModal) ไม่ใช่ .sm-profile ที่ครอบไว้รอบก่อน */
html[data-theme] #settingsModal,
html[data-theme] #settingsModalBack{
    background: rgba(17,17,17,.42) !important;
}
html[data-theme="dark"] #settingsModal,
html[data-theme="dark"] #settingsModalBack{
    background: rgba(0,0,0,.6) !important;
}
html[data-theme] #settingsModal > div,
html[data-theme] #settingsModal .box,
html[data-theme] #settingsModalCard,
html[data-theme] .sm-wrap,
html[data-theme] .sm-sheet{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 16px !important;
}
html[data-theme] #settingsModal .sm-x,
html[data-theme] #settingsModal .close,
html[data-theme] .sm-close{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}


/* ============================================================
   17) กราฟใน Dashboard — ให้เข้ากับธีม
   ------------------------------------------------------------
   ⚠️ ปรับเฉพาะสีของ SVG/แกน/เส้นตาราง ไม่แตะข้อมูลหรือการคำนวณ
============================================================ */

/* เส้นกราฟหลัก + จุด — ใช้สีหลักของธีม */
html[data-theme] .cc-chart path.line,
html[data-theme] .cc-chart .series,
html[data-theme] .cc-chart polyline{
    stroke: var(--t-primary) !important;
}
html[data-theme] .cc-chart circle.dot,
html[data-theme] .cc-chart .pt{
    fill: var(--t-primary) !important;
    stroke: var(--t-surface) !important;
}
/* พื้นใต้เส้น (area fill) — โปร่งเบา ๆ */
html[data-theme] .cc-chart path.area,
html[data-theme] .cc-chart .fill{
    fill: var(--t-primary-soft) !important;
    stroke: none !important;
}
/* เส้นตาราง + แกน */
html[data-theme] .cc-chart line,
html[data-theme] .cc-chart .grid line,
html[data-theme] .cc-chart .axis line,
html[data-theme] .cc-chart .axis path{
    stroke: var(--t-border) !important;
}
/* ตัวเลขบนแกน */
html[data-theme] .cc-chart text,
html[data-theme] .cc-xaxis,
html[data-theme] .cc-yaxis,
html[data-theme] .cc-chart .tick text{
    fill: var(--t-muted) !important;
    color: var(--t-muted) !important;
}
/* พื้นกราฟ */
html[data-theme] .cc-chart,
html[data-theme] .cc-chart svg{
    background: transparent !important;
}
/* คำอธิบายใต้กราฟ */
html[data-theme] .cc-legend,
html[data-theme] .cc-legend *{ color: var(--t-text2) !important; }
html[data-theme] .cc-legend .dot{ background: var(--t-primary) !important; }

/* แถบช่วงเวลา (0–2 นาที / 2–5 นาที …) — คงความหมายสี เขียว→ส้ม→แดง */
html[data-theme] .cc-strip,
html[data-theme] .cc-mini{ background: var(--t-surface-2) !important; }


/* ============================================================
   18) 🐞 ป๊อปอัป "ข้อมูลของฉัน" พื้นหลังยังเป็นสีเดิม
   ------------------------------------------------------------
   สาเหตุ: กล่องนอกไม่ใช่ .sm-profile / .box อย่างที่ผมเดาไว้ 2 รอบก่อน
   ของจริงคือ:
       <div id="settingsModal" class="pos-create-overlay">
         <div class="pos-create-card">          ← กล่องนี้
           <div class="pos-create-head">        ← แถบหัว
           <div id="settingsModalBody">
   คลาส .pos-create-* ถูกใช้ร่วมกับ popup อื่นในระบบด้วย (สร้างตำแหน่ง/โฟลเดอร์)
   ครอบทีเดียวได้ทั้งชุด
============================================================ */
html[data-theme] .pos-create-overlay{
    background: rgba(17,17,17,.42) !important;
}
html[data-theme="dark"] .pos-create-overlay{
    background: rgba(0,0,0,.6) !important;
}
html[data-theme] .pos-create-card{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--t-shadow) !important;
}
html[data-theme] .pos-create-head{
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-border) !important;
}
html[data-theme] .pos-create-title{ color: var(--t-text) !important; font-weight: 700; }
html[data-theme] .pos-create-x{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .pos-create-x:hover{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border-color: var(--t-primary) !important;
}
html[data-theme] .settings-modal-body,
html[data-theme] .pos-create-body{
    background: transparent !important;
    color: var(--t-text) !important;
}
/* ช่องกรอก/ปุ่มภายใน popup กลุ่มนี้ */
html[data-theme] .pos-create-card input,
html[data-theme] .pos-create-card select,
html[data-theme] .pos-create-card textarea{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme="dark"] .pos-create-card input,
html[data-theme="dark"] .pos-create-card select,
html[data-theme="dark"] .pos-create-card textarea{
    background: var(--t-surface-2) !important;
}
html[data-theme] .pos-create-card button{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .pos-create-card button:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}


/* ============================================================
   19) 🐞 ป๊อปอัปยืนยันตัวตน 2FA ยังเป็นธีมเดิม
   ------------------------------------------------------------
   CSS ของป๊อปอัปนี้ฝังอยู่ใน index.html ใช้ selector เจาะจง
   #twofaVerifyModal .xxx  ซึ่ง specificity สูงกว่ากฎทั่วไปที่ผมครอบไว้
   จึงต้องเขียนทับด้วย selector ที่เจาะจงเท่ากันขึ้นไป
============================================================ */

/* ฉากหลัง */
html[data-theme] #twofaVerifyModal{
    background: rgba(17,17,17,.42) !important;
}
html[data-theme="dark"] #twofaVerifyModal{
    background: rgba(0,0,0,.62) !important;
}

/* การ์ด */
html[data-theme] #twofaVerifyModal .tfa-card{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow) !important;
}

/* ไอคอนกุญแจ */
html[data-theme] #twofaVerifyModal .tfa-icon{
    background: var(--t-primary-soft) !important;
    border: 1px solid var(--t-primary) !important;
}

/* หัวเรื่อง + คำอธิบาย */
html[data-theme] #twofaVerifyModal .tfa-title{
    color: var(--t-text) !important;
}
html[data-theme] #twofaVerifyModal .tfa-sub{
    color: var(--t-text2) !important;
}
html[data-theme] #twofaVerifyModal .tfa-sub b{
    color: var(--t-primary-text) !important;
}
html[data-theme] #twofaVerifyModal .tfa-hint{
    color: var(--t-muted) !important;
}

/* ช่องกรอกรหัส 6 หลัก */
html[data-theme] #twofaVerifyModal .tfa-digit{
    color: var(--t-text) !important;
    background: var(--t-surface) !important;
    border: 1.5px solid var(--t-border) !important;
}
html[data-theme="dark"] #twofaVerifyModal .tfa-digit{
    background: var(--t-surface-2) !important;
}
html[data-theme] #twofaVerifyModal .tfa-digit:focus{
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
}

/* ปุ่ม */
html[data-theme] #twofaVerifyModal .tfa-btn-primary{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border: 1px solid var(--t-primary) !important;
    font-weight: 700;
}
html[data-theme] #twofaVerifyModal .tfa-btn-primary:hover{
    background: var(--t-primary-h) !important;
    border-color: var(--t-primary-h) !important;
    filter: none !important;
}
html[data-theme] #twofaVerifyModal .tfa-btn-secondary{
    background: var(--t-surface-2) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #twofaVerifyModal .tfa-btn-secondary:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
    filter: none !important;
}

/* กรอบสั่นตอนรหัสผิด — ใช้สีอันตราย ไม่ใช่สีหลัก (ความหมายต่างกัน) */
html[data-theme] #twofaVerifyModal .tfa-card.tfa-shake .tfa-digit{
    border-color: var(--t-danger) !important;
}

/* ---- ป๊อปอัป 2FA ตอน "ตั้งค่า" (สแกน QR) ---- ดูหมวด 22 ด้านล่าง ---- */


/* ============================================================
   20) 🐞 แถบดำหลังการ์ด (กลุ่มโฟลเดอร์ใหญ่)
   ------------------------------------------------------------
   อาการ: บางคนเห็นแถบไล่สีดำอยู่หลังการ์ด Ctrl+F5 แล้วไม่หาย
   สาเหตุ: คนที่ "เปิดใช้กลุ่มโฟลเดอร์ใหญ่" เท่านั้นที่มี .sf-section
           คนที่ไม่ได้เปิดจะไม่เห็นอาการนี้เลย -> จึงเป็น "บางคน"
   #board .sf-section{
       background:linear-gradient(180deg, rgba(120,18,28,.10), rgba(10,8,10,.55));
       box-shadow:0 18px 44px -22px rgba(0,0,0,.7);
   }
   = พื้นดำโปร่ง 55% + เงาเข้ม ออกแบบมาสำหรับพื้นดำ
============================================================ */
html[data-theme] #board .sf-section,
html[data-theme] .sf-section{
    background: var(--t-bg2) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: none !important;
}
html[data-theme] #board .sf-section.sf-rest,
html[data-theme] .sf-section.sf-rest{
    background: var(--t-bg2) !important;
    border-color: var(--t-border) !important;
}
html[data-theme] .sf-title{
    color: var(--t-text) !important;
}
/* ขีดใต้ชื่อกลุ่ม — ใช้สีหลักของธีม */
html[data-theme] .sf-section:not(.sf-rest) .sf-title::after{
    background: linear-gradient(90deg,
        var(--t-primary), transparent) !important;
}
html[data-theme] .sf-count{ color: var(--t-muted) !important; }
html[data-theme] .sf-btn{
    background: var(--t-surface) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .sf-btn:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}

/* ---- 🛡 ตาข่ายกันพลาด (โหมดสว่างเท่านั้น) ----
   ยังมี element อื่นที่ใช้ "พื้นดำโปร่ง" แบบเดียวกันอีกได้
   ถ้ายังไม่ได้ครอบเป็นรายตัว อย่างน้อยอย่าให้เป็นแถบดำกลางหน้าขาว
   ⚠️ ไม่แตะเงา (box-shadow) เพราะเงาดำบนพื้นขาวถูกต้องแล้ว */
html[data-theme="light"] #board [style*="rgba(10,8,10"],
html[data-theme="light"] #board [style*="rgba(0,0,0,.5"],
html[data-theme="light"] #board [style*="rgba(0,0,0,.6"]{
    background: var(--t-bg2) !important;
}

/* พื้นบอร์ดหลัก — กันไม่ให้ gradient ของธีมเดิมโผล่ */
html[data-theme] #board{
    background: transparent !important;
}
html[data-theme] .top,
html[data-theme] header.top{
    background: transparent !important;
}


/* ============================================================
   21) เก็บ element ที่ยังใช้ "พื้นเข้มทึบ" ให้ครบ
   ------------------------------------------------------------
   สแกน style.css หา selector ที่ตั้งพื้นเป็นสีเข้มทึบ (rgba < 50 หรือ #0xxxxx)
   เจอ 40 ตัว — ครอบทั้งหมดตรงนี้ทีเดียว จะได้ไม่ต้องไล่แก้ทีละภาพอีก
   ⚠️ ไม่แตะ box-shadow (เงาดำบนพื้นขาวถูกต้องแล้ว)
      และไม่แตะสีสถานะ (เขียว/ส้ม/แดง/ฟ้า) ที่มีกฎเฉพาะอยู่แล้ว
============================================================ */

/* --- พื้นผิวทั่วไป --- */
html[data-theme] .admin-box,
html[data-theme] .popup-box,
html[data-theme] .whoami-settings-menu,
html[data-theme] .folder-edit,
html[data-theme] .ov-card,
html[data-theme] .cc-box{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #adminModal{
    background: rgba(17,17,17,.42) !important;
}
html[data-theme="dark"] #adminModal{
    background: rgba(0,0,0,.6) !important;
}

/* --- ช่องกรอก / ตัวเลือก --- */
html[data-theme] .admin-search-input,
html[data-theme] .pos-select{
    background: var(--t-surface) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme="dark"] .admin-search-input,
html[data-theme="dark"] .pos-select{
    background: var(--t-surface-2) !important;
}

/* --- ปุ่มยืนยัน / ปุ่มหลักในป๊อปอัป --- */
html[data-theme] .popup-ok,
html[data-theme] .confirm-ok{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border: 1px solid var(--t-primary) !important;
}
html[data-theme] .popup-ok:hover,
html[data-theme] .confirm-ok:hover{
    background: var(--t-primary-h) !important;
}

/* --- chip / toggle / สวิตช์ --- */
html[data-theme] .chip{
    background: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .pos-toggle.on,
html[data-theme] .access-switch.on{
    background: var(--t-primary) !important;
}
html[data-theme] .ps-row input[type="checkbox"]:checked{
    accent-color: var(--t-primary) !important;
}
html[data-theme] .m-btn.approve{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border-color: var(--t-primary) !important;
}

/* --- แถบสิทธิ์รายงาน (rpt segment) --- */
html[data-theme] .rpt-seg-btn{
    background: var(--t-surface-2) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] .rpt-seg-btn.on,
html[data-theme] .rpt-seg-btn.on-dl{
    background: var(--t-primary-soft) !important;
    color: var(--t-primary-text) !important;
    border-color: var(--t-primary) !important;
    font-weight: 700;
}
html[data-theme] .rpt-perm-legend .dot.dl{
    background: var(--t-primary) !important;
}

/* --- ฉากตกแต่ง (ฉากมือ/ออร่า) ที่อาจหลงเหลือ --- */
html[data-theme] .ld-hair,
html[data-theme] .ld-ground,
html[data-theme] .ld-aura,
html[data-theme] .ld-head{
    display: none !important;
}


/* ============================================================
   22) 🐞 ป๊อปอัป 2FA ตอน "ตั้งค่า" (สแกน QR) แก้ไม่หาย
   ------------------------------------------------------------
   รอบก่อนผมเขียนกฎแล้วแต่ไม่ได้ผล เพราะ 2 อย่าง:
     1) ใช้ selector `.qr` ซึ่ง "ไม่มีอยู่จริง" ในหน้านี้
        ของจริงคือ #twofaSetupModal #twofaQrBox img / canvas
     2) กฎเดิมในไฟล์เขียนเจาะจงถึง #twofaQrBox อยู่แล้ว
        specificity สูงกว่ากฎ `#twofaSetupModal img` ที่ผมใส่ -> ไม่ชนะ
   รอบนี้ใช้ selector เดียวกับของเดิมเป๊ะ + !important
============================================================ */

/* ฉากหลัง */
html[data-theme] #twofaSetupModal{
    background: rgba(17,17,17,.42) !important;
}
html[data-theme="dark"] #twofaSetupModal{
    background: rgba(0,0,0,.62) !important;
}

/* กล่อง */
html[data-theme] #twofaSetupModal .box{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
    box-shadow: var(--t-shadow) !important;
}
html[data-theme] #twofaSetupModal h2{ color: var(--t-text) !important; }
html[data-theme] #twofaSetupModal .sub{ color: var(--t-text2) !important; }
/* รหัสลับ (secret) แบบ monospace */
html[data-theme] #twofaSetupModal .sub b{
    color: var(--t-primary-text) !important;
    background: var(--t-surface-2) !important;
    padding: 2px 6px; border-radius: 6px;
}

/* ช่องกรอกรหัส 6 หลัก */
html[data-theme] #twofaSetupModal input{
    background: var(--t-surface) !important;
    border: 1.5px solid var(--t-border) !important;
    color: var(--t-text) !important;
}
html[data-theme="dark"] #twofaSetupModal input{
    background: var(--t-surface-2) !important;
}
html[data-theme] #twofaSetupModal input:focus{
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
}

/* ข้อความ error */
html[data-theme] #twofaSetupModal #twofaSetupMsg,
html[data-theme] #twofaSetupModal #twofaDisableMsg,
html[data-theme] #twofaSetupModal #twofaSetupErrorMsg{
    color: var(--t-danger-text) !important;
}

/* ปุ่ม */
html[data-theme] #twofaSetupModal .primary{
    background: var(--t-primary) !important;
    color: var(--t-on-primary) !important;
    border: 1px solid var(--t-primary) !important;
}
html[data-theme] #twofaSetupModal .primary:hover{
    background: var(--t-primary-h) !important;
}
html[data-theme] #twofaSetupModal .secondary{
    background: var(--t-surface-2) !important;
    color: var(--t-text2) !important;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #twofaSetupModal .secondary:hover{
    border-color: var(--t-primary) !important;
    color: var(--t-primary-text) !important;
}

/* 🔒 QR ต้องพื้นขาวเสมอทั้ง 2 โหมด — กล้องอ่านโค้ดที่ inverted ไม่ได้
   ใช้ selector เดียวกับของเดิมเป๊ะเพื่อให้ชนะ specificity
   และครอบกล่องรอบนอกด้วย กัน padding โปร่งจนขอบ QR ติดพื้นเข้ม */
html[data-theme] #twofaSetupModal #twofaQrBox{
    background: #FFFFFF !important;
    padding: 10px !important;
    border-radius: 12px !important;
    display: inline-block;
    border: 1px solid var(--t-border) !important;
}
html[data-theme] #twofaSetupModal #twofaQrBox img,
html[data-theme] #twofaSetupModal #twofaQrBox canvas{
    background: #FFFFFF !important;
    padding: 6px !important;
    border-radius: 8px !important;
    display: block;
    /* กัน filter/invert ใด ๆ ที่อาจมาจากกฎอื่น */
    filter: none !important;
    mix-blend-mode: normal !important;
}


/* ============================================================
   23) 🐞 ตัวเลข KPI จาง (เห็นเป็นเงา ๆ บนพื้นขาว)
   ------------------------------------------------------------
   .cc-cell .v และ .ov-v ตั้ง color:#f2f4fa (ขาวอมฟ้า) ไว้ตายตัว
   ออกแบบมาสำหรับพื้นดำ -> บนพื้นขาวเลยเกือบมองไม่เห็น
   ⚠️ ตัวเลขที่มีสีสถานะ (.g เขียว / .r แดง / .o ส้ม / .b ฟ้า)
      ต้องคงความหมายเดิม จึงกำหนดแยกให้เข้มพอบนพื้นขาว
============================================================ */
html[data-theme] .cc-cell .v,
html[data-theme] .ov-v,
html[data-theme] .cc-fig .v{
    color: var(--t-primary-text) !important;
}
/* สีสถานะ — คงความหมาย แต่ปรับให้ contrast ผ่านบนพื้นขาว */
html[data-theme="light"] .cc-cell .v.g{ color: #0F6B35 !important; }   /* เขียว 6.61 */
html[data-theme="light"] .cc-cell .v.r{ color: #C62222 !important; }   /* แดง  5.28 */
html[data-theme="light"] .cc-cell .v.o{ color: #8A5200 !important; }   /* ส้ม  6.39 */
html[data-theme="light"] .cc-cell .v.b{ color: #1D6FD0 !important; }   /* ฟ้า  4.55 */
html[data-theme="dark"]  .cc-cell .v.g{ color: var(--t-success) !important; }
html[data-theme="dark"]  .cc-cell .v.r{ color: var(--t-danger)  !important; }
html[data-theme="dark"]  .cc-cell .v.o{ color: var(--t-warning) !important; }
html[data-theme="dark"]  .cc-cell .v.b{ color: var(--t-info)    !important; }

/* หัวข้อ + คำอธิบายใต้ตัวเลข */
html[data-theme] .cc-cell .k,
html[data-theme] .ov-l{ color: var(--t-text) !important; font-weight:600; }
html[data-theme] .cc-cell .s,
html[data-theme] .ov-s,
html[data-theme] .cc-fig .k{ color: var(--t-muted) !important; }

/* กล่องไอคอน — เดิมเป็นพื้นอ่อนจนจม */
html[data-theme] .cc-bigic,
html[data-theme] .ov-ic{
    background: var(--t-primary-soft) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: 10px;
}

/* ============================================================
   24) ✨ แถบหัว "จัดการสมาชิก" — จำนวนพนักงานออนไลน์
============================================================ */
.hdr-online{
    display:flex; align-items:center; gap:10px; margin-left:14px;
    padding:6px 12px; border-radius:11px;
    background:var(--panel2); border:1px solid var(--line);
    font-size:12.5px; cursor:pointer; user-select:none;
}
.hdr-online:hover{ border-color:var(--pri) }
.hdr-online b{ font-size:14.5px }
.hdr-online .on b { color:var(--pri) }
.hdr-online .dotg{
    width:8px; height:8px; border-radius:50%; display:inline-block;
    background:#16A34A; margin-right:5px;
}
.hdr-online .dotx{
    width:8px; height:8px; border-radius:50%; display:inline-block;
    background:var(--muted); margin-right:5px;
}
.hdr-online .sep{ opacity:.4 }


/* ============================================================
   25) 🔴 ตัวเลข KPI — บังคับสีแดง (กันทุกทาง)
   ------------------------------------------------------------
   หมวด 23 เขียนกฎไว้แล้ว แต่เผื่อกรณี:
     · การ์ดอยู่ใน #dashboard / .cc-strip ที่มี selector ยาวกว่า
     · หน้าเว็บใช้ .ov-card แทน .cc-cell (มี 2 แบบในโค้ด)
   จึงเขียนซ้ำแบบเจาะจงกว่า + ครอบทุกโครงที่เป็นไปได้
   ⚠️ ยังคง "ไม่แตะสีสถานะ" (.g/.r/.o/.b มีกฎของตัวเองอยู่ด้านล่าง)
============================================================ */
html[data-theme] #dashboard .cc-strip .cc-cell .v,
html[data-theme] #dashboard .cc-cell .cc-mid .v,
html[data-theme] .cc-strip .cc-cell .v,
html[data-theme] .cc-cell .cc-mid .v,
html[data-theme] #dashboard .ov-card .ov-v,
html[data-theme] .ov-card .ov-v,
html[data-theme] .cc-figs .cc-fig .v{
    color: var(--t-primary-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--t-primary-text) !important;   /* กัน gradient text */
}

/* สีสถานะต้องชนะกฎด้านบน — เขียนทีหลังและเจาะจงกว่า */
html[data-theme="light"] #dashboard .cc-cell .v.g,
html[data-theme="light"] .cc-cell .cc-mid .v.g{
    color:#0F6B35 !important; -webkit-text-fill-color:#0F6B35 !important; }
html[data-theme="light"] #dashboard .cc-cell .v.r,
html[data-theme="light"] .cc-cell .cc-mid .v.r{
    color:#C62222 !important; -webkit-text-fill-color:#C62222 !important; }
html[data-theme="light"] #dashboard .cc-cell .v.o,
html[data-theme="light"] .cc-cell .cc-mid .v.o{
    color:#8A5200 !important; -webkit-text-fill-color:#8A5200 !important; }
html[data-theme="light"] #dashboard .cc-cell .v.b,
html[data-theme="light"] .cc-cell .cc-mid .v.b{
    color:#1D6FD0 !important; -webkit-text-fill-color:#1D6FD0 !important; }

html[data-theme="dark"] #dashboard .cc-cell .v.g,
html[data-theme="dark"] .cc-cell .cc-mid .v.g{
    color:var(--t-success) !important; -webkit-text-fill-color:var(--t-success) !important; }
html[data-theme="dark"] #dashboard .cc-cell .v.r,
html[data-theme="dark"] .cc-cell .cc-mid .v.r{
    color:var(--t-danger) !important; -webkit-text-fill-color:var(--t-danger) !important; }
html[data-theme="dark"] #dashboard .cc-cell .v.o,
html[data-theme="dark"] .cc-cell .cc-mid .v.o{
    color:var(--t-warning) !important; -webkit-text-fill-color:var(--t-warning) !important; }
html[data-theme="dark"] #dashboard .cc-cell .v.b,
html[data-theme="dark"] .cc-cell .cc-mid .v.b{
    color:var(--t-info) !important; -webkit-text-fill-color:var(--t-info) !important; }

/* พื้นการ์ด KPI — เดิมเป็น gradient ดำโปร่ง 72% */
html[data-theme] .cc-cell{
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 12px;
}


/* ============================================================
   26) การ์ดยอดรวม — เฉพาะ 2 บรรทัดข้อความเป็นสีแดง
   ------------------------------------------------------------
   ตามที่หน้างานสั่ง: "แก้แค่ ยอดรวมทั้งหมด / อัปเดต เป็นอักษรสีแดง"
   ⚠️ ไม่แตะ .totalNumber (ตัวเลข) — คงสีเดิมของระบบไว้
============================================================ */
html[data-theme] .totalCard .totalLabel,
html[data-theme] #totalCard .totalLabel,
html[data-theme] #dashboard .totalLabel{
    color: var(--t-primary-text) !important;
    font-weight: 700;
    text-shadow: none !important;
}
html[data-theme] .totalCard .updated,
html[data-theme] #totalCard .updated,
html[data-theme] #updatedAt{
    color: var(--t-primary-text) !important;
    opacity: .85;
    text-shadow: none !important;
}


/* ============================================================
   27) 🐞 ตัวเลขยอดรวมกลายเป็นสีแดงหมด
   ------------------------------------------------------------
   สาเหตุ: ผมแม็ป --gold / --amber / --orange เป็น var(--t-warning) ตัวเดียวกันหมด
   .totalNumber ใช้ var(--gold) · .has-warn ใช้ var(--amber) · .has-crit ใช้ var(--orange)
   -> ทั้ง 3 สถานะกลายเป็นสีเดียวกัน แยกไม่ออกว่าปกติ/เตือน/วิกฤต

   แก้: แยกเฉดคืนให้ต่างกันจริง และเลือกค่าที่ contrast ผ่านบนพื้นขาว
============================================================ */
html[data-theme="dark"]{
    --gold:   #E5C158;   /* ทองนวล — ปกติ */
    --amber:  #FBBF24;   /* เหลืองสด — เตือน */
    --orange: #FB923C;   /* ส้ม — วิกฤต */
}

/* บังคับให้ตัวเลขยอดรวมใช้สีของสถานะเสมอ (กันกฎอื่นมาทับ) */
html[data-theme] #totalCard .totalNumber,
html[data-theme] .totalCard .totalNumber{
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold) !important;
}
html[data-theme] #totalCard.has-warn .totalNumber,
html[data-theme] .totalCard.has-warn .totalNumber{
    color: var(--amber) !important;
    -webkit-text-fill-color: var(--amber) !important;
}
html[data-theme] #totalCard.has-crit .totalNumber,
html[data-theme] .totalCard.has-crit .totalNumber{
    color: var(--orange) !important;
    -webkit-text-fill-color: var(--orange) !important;
}
/* กรอบการ์ดตามสถานะ */
html[data-theme] .totalCard.has-warn{ border-color: var(--amber) !important; }
html[data-theme] .totalCard.has-crit{ border-color: var(--orange) !important; }