/* โหมดกลางคืนแบบ "กลับสีทั้งหน้า" สำหรับระบบที่ออกแบบเป็นหน้าสว่างล้วน
   (สแกนนิ้ว/เวลาของฉัน ในแอป · หน้าแยก saraban, itservice, oform, album, roombook)
   - ใช้ตามปุ่มสลับโหมดของ CKR Connect (localStorage ckr_theme → html[data-theme]) หรือตามเครื่องถ้ายังไม่เคยเลือก
   - กลับสีพื้น/ตัวอักษร/การ์ด แล้วหมุนเฉดสีกลับ สีเขียว/แดง/เหลืองจึงยังเป็นสีเดิม (อ่อนลง)
   - รูปภาพ/วิดีโอ/แผ่นวาดรูป และส่วนที่เป็นสีเข้มอยู่แล้ว (.dfx-keep: แถบบน/หัวระบบ ฯลฯ) กลับสีซ้ำให้เหมือนเดิม
   - หน้าที่เป็นสีเข้มอยู่แล้ว (html.dfx-dark-native เช่น แต่งรูป): กลับสีเมื่อเลือกโหมดกลางวันแทน
   หน้าแยกโหลด /darkfx.js ใน <head> (ใส่ class dfx-page + ปุ่มสลับโหมดให้เอง) */

:root[data-theme="dark"].dfx-page:not(.dfx-dark-native),
:root[data-theme="light"].dfx-page.dfx-dark-native,
:root[data-theme="dark"] :is(#v-fingerscan,#v-fingerscan-hr,#v-mytime).on{filter:invert(.9) hue-rotate(180deg)!important}
:root[data-theme="dark"].dfx-page:not(.dfx-dark-native){background:#fff}
:root[data-theme="dark"] body.sys-mode:has(#v-fingerscan.on,#v-fingerscan-hr.on,#v-mytime.on){background:#191C1B}
:root[data-theme="dark"].dfx-page:not(.dfx-dark-native) :is(img,video,picture,iframe,canvas,.dfx-keep,.shbar,.shhero,.help-card,.site-header,[style*="url("]):not(:is(.dfx-keep,.shbar,.shhero,.help-card,.site-header) *),
:root[data-theme="light"].dfx-page.dfx-dark-native :is(img,video,picture,iframe,canvas,.dfx-keep,[style*="url("]):not(.dfx-keep *),
:root[data-theme="dark"] :is(#v-fingerscan,#v-fingerscan-hr,#v-mytime).on :is(img,video,picture,iframe,.shbar,.shhero,[style*="url("]):not(:is(.shbar,.shhero) *){filter:invert(1) hue-rotate(180deg)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]).dfx-page:not(.dfx-dark-native),
  :root:not([data-theme="light"]) :is(#v-fingerscan,#v-fingerscan-hr,#v-mytime).on{filter:invert(.9) hue-rotate(180deg)!important}
  :root:not([data-theme="light"]).dfx-page:not(.dfx-dark-native){background:#fff}
  :root:not([data-theme="light"]) body.sys-mode:has(#v-fingerscan.on,#v-fingerscan-hr.on,#v-mytime.on){background:#191C1B}
  :root:not([data-theme="light"]).dfx-page:not(.dfx-dark-native) :is(img,video,picture,iframe,canvas,.dfx-keep,.shbar,.shhero,.help-card,.site-header,[style*="url("]):not(:is(.dfx-keep,.shbar,.shhero,.help-card,.site-header) *),
  :root:not([data-theme="light"]) :is(#v-fingerscan,#v-fingerscan-hr,#v-mytime).on :is(img,video,picture,iframe,.shbar,.shhero,[style*="url("]):not(:is(.shbar,.shhero) *){filter:invert(1) hue-rotate(180deg)}
}

/* ปุ่มสลับโหมด (darkfx.js ใส่ให้): ในแถบบน .shbar หรือปุ่มลอยมุมซ้ายล่างถ้าหน้านั้นไม่มีแถบบน */
.dfx-tg{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-right:10px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#DCEBE7;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.dfx-tg:hover{background:rgba(255,255,255,.14);border-color:rgba(226,189,107,.6);color:#fff}
.dfx-tg:focus-visible{outline:2px solid #E2BD6B;outline-offset:2px}
.dfx-tg svg{width:19px;height:19px}
.dfx-tg.float{position:fixed;left:16px;bottom:16px;z-index:2147483000;margin:0;width:44px;height:44px;background:#0B2622;border-color:rgba(226,189,107,.45);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.45)}
.dfx-tg.float:hover{background:#12392F}
@media print{.dfx-tg{display:none}}