/* ============================================================
   hub-theme.css — ธีม "Kinduem Hub Glass + Day/Night" (ชุดเดียวกับ hub.kinduem.com)
   ใช้ทุกหน้าของ IT Maintenance: หน้าแจ้งซ่อม (/) · admin login · admin dashboard
   - สลับด้วย <html data-theme="dark|light"> ตั้งโดย /js/theme.js (โหลดใน <head> ก่อนไฟล์นี้) · ค่าเริ่มต้น = มืด
   - ส่วนที่ 1–3 ก๊อปจาก hub (Accset All IT/assets/css/tokens.css) ตรงตัว: token สองโหมด, .glass, ปุ่ม .theme-toggle
   - ส่วนที่ 4 เป็นของโปรเจกต์นี้: ชื่อตัวแปรเดิม (--color-*) + ชั้น "ทาสีทับ" คลาส Tailwind เดิม
     (bg-slate-*, text-slate-*, border-slate-* …) ให้เปลี่ยนตามโหมด โดยไม่แตะโครงหน้า/มาร์กอัปเดิม
   - ไม่มี CDN/ไลบรารีเพิ่ม · แอนิเมชันขยับแค่ transform/opacity · ปิดเมื่อ prefers-reduced-motion
   ============================================================ */

/* ---------- 1) token สองโหมด (จาก hub tokens.css) ---------- */
:root {
    color-scheme: dark;

    /* พื้น */
    --bg-page:    #0b1220;
    --bg-panel:   #1e293b;
    --bg-deep:    #0f172a;
    --bg-card:    #0b1220;
    --border:     #334155;
    --border-soft:#475569;

    /* ตัวอักษร */
    --text-main:  #e5e7eb;
    --text-dim:   #94a3b8;
    --text-faint: #64748b;

    /* สีนำของทั้งระบบ = ฟ้าน้ำเงิน */
    --accent:       #38bdf8;
    --accent-soft:  #7dd3fc;
    --accent-btn:   #2563eb;

    /* สถานะ */
    --ok:    #34d399;
    --warn:  #fbbf24;
    --bad:   #fb7185;
    --bad-ink: #fda4af;

    /* ผิวกระจก — ใช้กับแผง/การ์ด/ตาราง (blur ใช้เฉพาะแผงใหญ่ไม่กี่ชิ้นบนพื้นนิ่ง กันหน้าหน่วง) */
    --glass-bg: linear-gradient(155deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,.045) 100%), rgba(15,23,42,.58);
    --glass-strong: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(17,26,46,.9);
    --glass-border: rgba(255,255,255,.09);
    --glass-hi: inset 0 1px 0 rgba(255,255,255,.08);
    --glass-shadow: 0 18px 40px rgba(0,0,0,.35);
    --glass-blur: blur(16px) saturate(140%);

    /* สีกลางที่เคย hard-code ไว้ตามจุดต่างๆ */
    --hover-bg:     rgba(148,163,184,.10);
    --thead-bg:     rgba(13,20,36,.92);
    --row-line:     rgba(148,163,184,.12);
    --btn-sec-bg:   rgba(51,65,85,.55);
    --btn-sec-hover:rgba(71,85,105,.8);
    --backdrop:     rgba(2,6,23,.6);
    --scroll-thumb-hover: #5b6b84;

    /* กราฟ (หน้าภาพรวม) */
    --chart-1: #38bdf8;
    --chart-2: #4de8c2;
    --chart-3: #fb7185;
    --chart-grid: rgba(148,163,184,.14);

    /* ลายลูกบาศก์ 3D บนพื้นหลัง (นิ่ง ไม่ขยับ) */
    --art-cubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0L56 16L28 32L0 16Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 16L28 32L28 65L0 49Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 16L28 32L28 65L56 49Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 49L28 65L0 81L-28 65Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M-28 65L0 81L0 114L-28 98Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M28 65L0 81L0 114L28 98Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M56 49L84 65L56 81L28 65Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M28 65L56 81L56 114L28 98Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M84 65L56 81L56 114L84 98Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 -49L28 -33L0 -17L-28 -33Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M-28 -33L0 -17L0 16L-28 0Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M28 -33L0 -17L0 16L28 0Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M56 -49L84 -33L56 -17L28 -33Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M28 -33L56 -17L56 16L28 0Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M84 -33L56 -17L56 16L84 0Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M28 98L56 114L28 130L0 114Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 114L28 130L28 163L0 147Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 114L28 130L28 163L56 147Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M28 -98L56 -82L28 -66L0 -82Z' fill='%23fff' fill-opacity='0.055'/%3E%3Cpath d='M0 -82L28 -66L28 -33L0 -49Z' fill='%23fff' fill-opacity='0.022'/%3E%3Cpath d='M56 -82L28 -66L28 -33L56 -49Z' fill='%23000' fill-opacity='0.22'/%3E%3Cpath d='M0 16L28 32L56 16M28 32V65M0 49L28 65L56 49M0 81V114M56 81V114M28 0V-17' fill='none' stroke='%23fff' stroke-opacity='0.05' stroke-width='.6'/%3E%3C/svg%3E");
    --art-glow: radial-gradient(900px 520px at 12% -8%, rgba(14,116,144,.28), transparent 70%),
                radial-gradient(800px 560px at 100% 110%, rgba(29,78,216,.22), transparent 70%);
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg-page:    #e8f1fa;
    --bg-panel:   #ffffff;
    --bg-deep:    #f6f9fc;
    --bg-card:    #ffffff;
    --border:     #d5e1ec;
    --border-soft:#bccbdb;

    --text-main:  #0f1e33;
    --text-dim:   #4a5d75;
    --text-faint: #6f8299;

    --accent:       #0284c7;
    --accent-soft:  #0369a1;
    --accent-btn:   #2563eb;

    --ok:    #059669;
    --warn:  #b45309;
    --bad:   #e11d48;
    --bad-ink: #be123c;

    --glass-bg: linear-gradient(155deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 100%);
    --glass-strong: linear-gradient(155deg, #ffffff, rgba(255,255,255,.94));
    --glass-border: rgba(15,40,80,.10);
    --glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
    --glass-shadow: 0 14px 34px rgba(30,64,120,.10);

    --hover-bg:     rgba(2,132,199,.07);
    --thead-bg:     rgba(241,246,251,.97);
    --row-line:     rgba(15,40,80,.08);
    --btn-sec-bg:   rgba(255,255,255,.9);
    --btn-sec-hover:#eaf2fa;
    --backdrop:     rgba(15,30,51,.35);
    --scroll-thumb-hover: #94a3b8;

    --chart-1: #0284c7;
    --chart-2: #0d9488;
    --chart-3: #e11d48;
    --chart-grid: rgba(15,40,80,.08);

    --art-cubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0L56 16L28 32L0 16Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 16L28 32L28 65L0 49Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 16L28 32L28 65L56 49Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 49L28 65L0 81L-28 65Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M-28 65L0 81L0 114L-28 98Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M28 65L0 81L0 114L28 98Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M56 49L84 65L56 81L28 65Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M28 65L56 81L56 114L28 98Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M84 65L56 81L56 114L84 98Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 -49L28 -33L0 -17L-28 -33Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M-28 -33L0 -17L0 16L-28 0Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M28 -33L0 -17L0 16L28 0Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M56 -49L84 -33L56 -17L28 -33Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M28 -33L56 -17L56 16L28 0Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M84 -33L56 -17L56 16L84 0Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M28 98L56 114L28 130L0 114Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 114L28 130L28 163L0 147Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 114L28 130L28 163L56 147Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M28 -98L56 -82L28 -66L0 -82Z' fill='%23fff' fill-opacity='0.75'/%3E%3Cpath d='M0 -82L28 -66L28 -33L0 -49Z' fill='%230b3a66' fill-opacity='0.035'/%3E%3Cpath d='M56 -82L28 -66L28 -33L56 -49Z' fill='%230b3a66' fill-opacity='0.075'/%3E%3Cpath d='M0 16L28 32L56 16M28 32V65M0 49L28 65L56 49M0 81V114M56 81V114M28 0V-17' fill='none' stroke='%230b3a66' stroke-opacity='0.06' stroke-width='.6'/%3E%3C/svg%3E");
    --art-glow: radial-gradient(900px 520px at 10% -10%, rgba(125,211,252,.45), transparent 70%),
                radial-gradient(800px 560px at 100% 110%, rgba(147,197,253,.4), transparent 70%);
}

/* ---------- 2) แผงกระจกใช้ซ้ำ (จาก hub) ---------- */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-hi), var(--glass-shadow);
    border-radius: 1rem;
}

/* ---------- 3) ปุ่มสลับธีม .theme-toggle (จาก hub — มาร์กอัป/CSS/พฤติกรรมเหมือนกันเป๊ะ) ---------- */
/* ============================================================
   ปุ่มสลับโหมดมืด/สว่าง — แคปซูลฉากกลางคืน ⇄ กลางวัน
   มืด: ฟ้าคืน ดาวกะพริบ ดาวตก เมฆ พระจันทร์เต็มดวงเรืองแสงอยู่ขวา
   สว่าง: ฟ้ากลางวัน เมฆขาว พระอาทิตย์อยู่ซ้าย
   ขยับแค่ transform/opacity เท่านั้น (ไม่แตะ box-shadow/filter ใน keyframes)
   ============================================================ */
.theme-toggle {
    --tt-w: 64px; --tt-h: 30px; --tt-k: 24px;
    position: relative; flex: 0 0 auto; width: var(--tt-w); height: var(--tt-h);
    padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle .tt-track {
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; isolation: isolate;
    background: linear-gradient(180deg, #070b24 0%, #141c4a 62%, #24306b 100%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.08),
                0 0 0 1px rgba(255,255,255,.1), 0 6px 18px rgba(8,12,40,.45);
}
/* ฟ้ากลางวัน — ซ้อนทับแล้วค่อยๆ เฟดเข้า */
.theme-toggle .tt-track::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
    background: linear-gradient(180deg, #3aa0f0 0%, #6fc3ff 60%, #a9dcff 100%);
    transition: opacity .5s ease;
}
/* ดาว */
.theme-toggle .tt-stars {
    position: absolute; inset: 0; z-index: 1; transition: opacity .4s ease;
    background:
        radial-gradient(1px 1px at 12% 28%, #fff 99%, transparent),
        radial-gradient(1px 1px at 24% 62%, #dbe6ff 99%, transparent),
        radial-gradient(1.4px 1.4px at 36% 22%, #fff 99%, transparent),
        radial-gradient(1px 1px at 47% 48%, #c7d6ff 99%, transparent),
        radial-gradient(1px 1px at 58% 18%, #fff 99%, transparent),
        radial-gradient(1.2px 1.2px at 30% 40%, #fff 99%, transparent),
        radial-gradient(1px 1px at 8% 70%, #dbe6ff 99%, transparent);
    animation: tt-twinkle 3.2s ease-in-out infinite;
}
@keyframes tt-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* ดาวตก */
.theme-toggle .tt-shoot {
    position: absolute; z-index: 1; top: 6px; left: 46%; width: 14px; height: 1px; opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
    transform: rotate(-28deg);
    animation: tt-shoot 5.5s ease-in 1.5s infinite;
}
@keyframes tt-shoot {
    0%, 82% { opacity: 0; transform: translate(0, 0) rotate(-28deg); }
    86% { opacity: 1; }
    94%, 100% { opacity: 0; transform: translate(-20px, 11px) rotate(-28deg); }
}
/* จันทร์เสี้ยวเล็กมุมซ้าย (ตอนกลางคืน) */
.theme-toggle .tt-crescent {
    position: absolute; z-index: 1; left: 9px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 3px -2px 0 0 #f6c453; transform: rotate(-20deg); transition: opacity .35s ease, transform .5s ease;
}
/* เมฆ — ก้อนกลมซ้อนกันแถวล่าง 2 ชั้น */
.theme-toggle .tt-clouds, .theme-toggle .tt-clouds::before {
    position: absolute; left: -6px; right: -6px; bottom: -6px; height: 18px; z-index: 2;
    background:
        radial-gradient(circle at 6% 100%,  var(--tt-cloud) 0 8px,  transparent 8.5px),
        radial-gradient(circle at 20% 90%,  var(--tt-cloud) 0 9px,  transparent 9.5px),
        radial-gradient(circle at 34% 100%, var(--tt-cloud) 0 7px,  transparent 7.5px),
        radial-gradient(circle at 50% 95%,  var(--tt-cloud) 0 10px, transparent 10.5px),
        radial-gradient(circle at 66% 100%, var(--tt-cloud) 0 8px,  transparent 8.5px),
        radial-gradient(circle at 82% 92%,  var(--tt-cloud) 0 9px,  transparent 9.5px),
        radial-gradient(circle at 96% 100%, var(--tt-cloud) 0 8px,  transparent 8.5px);
    transition: transform .6s cubic-bezier(.65,.05,.36,1);
}
.theme-toggle .tt-clouds { --tt-cloud: rgba(170,190,240,.55); }
.theme-toggle .tt-clouds::before {
    content: ""; left: -2px; right: -10px; bottom: 5px; z-index: -1;
    --tt-cloud: rgba(120,140,210,.35); transform: translateX(6px);
}
/* ลูกบิด = พระจันทร์ (มืด) / พระอาทิตย์ (สว่าง) */
.theme-toggle .tt-knob {
    position: absolute; z-index: 3; top: calc((var(--tt-h) - var(--tt-k)) / 2); left: 3px;
    width: var(--tt-k); height: var(--tt-k); border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffffff 0%, #eef2fb 45%, #c8d2e8 100%);
    box-shadow: 0 0 8px 2px rgba(220,230,255,.55), 0 0 22px 6px rgba(150,170,255,.28), inset -2px -2px 4px rgba(120,135,170,.35);
    transform: translateX(calc(var(--tt-w) - var(--tt-k) - 6px));
    transition: transform .55s cubic-bezier(.65,.05,.36,1), background .5s ease, box-shadow .5s ease;
}
/* หลุมบนดวงจันทร์ */
.theme-toggle .tt-knob::before, .theme-toggle .tt-knob::after {
    content: ""; position: absolute; border-radius: 50%; background: rgba(140,155,190,.45); transition: opacity .3s ease;
}
.theme-toggle .tt-knob::before { width: 6px; height: 6px; top: 6px; left: 12px; }
.theme-toggle .tt-knob::after  { width: 4px; height: 4px; top: 14px; left: 6px; }

:root[data-theme="light"] .theme-toggle .tt-track::before { opacity: 1; }
:root[data-theme="light"] .theme-toggle .tt-stars,
:root[data-theme="light"] .theme-toggle .tt-shoot { opacity: 0; animation: none; }
:root[data-theme="light"] .theme-toggle .tt-crescent { opacity: 0; transform: rotate(-20deg) translateY(-8px); }
:root[data-theme="light"] .theme-toggle .tt-clouds { --tt-cloud: rgba(255,255,255,.95); transform: translateX(-4px); }
:root[data-theme="light"] .theme-toggle .tt-clouds::before { --tt-cloud: rgba(255,255,255,.7); }
:root[data-theme="light"] .theme-toggle .tt-knob {
    transform: translateX(0);
    background: radial-gradient(circle at 35% 32%, #fff8cf 0%, #ffd84a 48%, #f6a823 100%);
    box-shadow: 0 0 8px 2px rgba(255,214,90,.7), 0 0 22px 7px rgba(255,190,60,.35), inset -2px -2px 4px rgba(214,120,10,.35);
}
:root[data-theme="light"] .theme-toggle .tt-knob::before,
:root[data-theme="light"] .theme-toggle .tt-knob::after { opacity: 0; }
:root[data-theme="light"] .theme-toggle .tt-track {
    box-shadow: inset 0 2px 6px rgba(10,60,120,.35), inset 0 -1px 0 rgba(255,255,255,.4),
                0 0 0 1px rgba(15,40,80,.12), 0 6px 16px rgba(30,100,180,.25);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle *, .theme-toggle *::before, .theme-toggle *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   4) ของโปรเจกต์ IT Maintenance
   ============================================================ */

/* ---------- 4.1 ชื่อตัวแปรเดิมของโปรเจกต์ → ชี้ไปที่ token ของ hub ----------
   ใช้โดย custom-select.js, กราฟ Chart.js และ CSS ในหน้า dashboard (ห้าม hard-code สีใหม่ ใช้ตัวแปรเหล่านี้) */
:root {
    --color-bg-page: var(--bg-page);
    --color-bg-panel: var(--bg-panel);
    --color-bg-subtle: var(--bg-deep);
    --color-bg-raised: rgba(51,65,85,.55);
    --color-border: rgba(148,163,184,.16);
    --color-border-strong: var(--border-soft);
    --color-text: var(--text-main);
    --color-text-muted: #cbd5e1;
    --color-text-subtle: var(--text-dim);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-soft);
    --table-grid-line: var(--row-line);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.22);
    --shadow-card: var(--glass-hi), var(--glass-shadow);
    --shadow-hover: var(--glass-hi), 0 14px 32px rgba(0,0,0,.4);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.38);

    /* พื้นผิวที่ใช้ทาทับคลาส Tailwind เดิม */
    --surface-panel: var(--glass-bg);          /* bg-slate-800 = แผง/การ์ด → กระจก */
    --surface-solid: var(--glass-strong);       /* popover / dropdown / modal / SweetAlert → กระจกทึบ */
    --surface-well: rgba(6,11,24,.42);          /* bg-slate-900/950 = กล่องชั้นใน */
    --surface-raised: rgba(51,65,85,.5);        /* bg-slate-700/600 = ชิป/ปุ่มรอง */
    --surface-hover: rgba(71,85,105,.55);       /* hover:bg-slate-* */
    --line: rgba(148,163,184,.16);              /* border-slate-700/800 */
    --line-strong: rgba(148,163,184,.3);        /* border-slate-600/500 */
    --field-bg: var(--bg-deep);
    --field-border: var(--border-soft);
    --field-placeholder: #94a3b8;
}
:root[data-theme="light"] {
    --color-bg-raised: #eaf1f8;
    --color-border: #d5e1ec;
    --color-text-muted: #34475f;
    --shadow-sm: 0 2px 6px rgba(30,64,120,.08);
    --shadow-hover: var(--glass-hi), 0 16px 34px rgba(30,64,120,.16);
    --shadow-lg: 0 20px 48px rgba(30,64,120,.18);

    --surface-well: #f3f7fb;
    --surface-raised: #eaf1f8;
    --surface-hover: #e1ebf5;
    --line: #d5e1ec;
    --line-strong: #c3d2e1;
    --field-placeholder: var(--text-faint);
}

/* ---------- 4.2 พื้นหลังทั้งหน้า: แสงฟุ้ง + ลายลูกบาศก์ 3D นิ่ง (เหมือนหลังบ้าน hub) ----------
   html ถือสีพื้น · body โปร่ง · ลายอยู่ชั้น fixed แยก (ไม่วาดใหม่ตอนเลื่อน ไม่ขยับ) */
html { background-color: var(--bg-page); }
html[data-theme] body { background: transparent !important; color: var(--text-main); }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--art-glow), var(--art-cubes) 0 0 / 112px 196px;
    -webkit-mask-image: radial-gradient(130% 95% at 60% 40%, rgba(0,0,0,.35) 0%, #000 75%);
            mask-image: radial-gradient(130% 95% at 60% 40%, rgba(0,0,0,.35) 0%, #000 75%);
}

/* scrollbar */
html[data-theme] ::-webkit-scrollbar-track { background: var(--bg-page); }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 6px; }
html[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- 4.3 ช่องกรอก (input/select/textarea) — ทุกหน้า ทุกโหมด ---------- */
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not(.numInput):not(.custom-select-search), select:not(.flatpickr-monthDropdown-months), textarea) {
    background-color: var(--field-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--field-border) !important;
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not(.numInput):not(.custom-select-search), select:not(.flatpickr-monthDropdown-months), textarea):focus {
    border-color: var(--accent) !important;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--field-placeholder) !important; opacity: 1; }
html[data-theme] select option,
html[data-theme] select option[style] { background-color: var(--bg-panel) !important; color: var(--text-main) !important; }

/* ---------- 4.4 พื้นผิว Tailwind เดิม → กระจก (ทั้งสองโหมด) ----------
   :where() ทำให้ specificity ต่ำ กฎเฉพาะจุด (ช่องกรอก, หัวตาราง sticky, hover) ชนะได้ */
html[data-theme] :is(.bg-slate-800, .bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-800\/60, .bg-slate-800\/70, .bg-slate-800\/80):where(:not(input, select, textarea, body)) {
    background: var(--surface-panel) !important;
}
html[data-theme] :is(.bg-slate-900, .bg-slate-900\/20, .bg-slate-900\/40, .bg-slate-900\/50, .bg-slate-900\/60, .bg-slate-900\/70, .bg-slate-900\/80, .bg-slate-900\/85, .bg-slate-950):where(:not(input, select, textarea, body)) {
    background-color: var(--surface-well) !important;
}
html[data-theme] :is(.bg-slate-700, .bg-slate-700\/20, .bg-slate-700\/30, .bg-slate-700\/40, .bg-slate-700\/50, .bg-slate-700\/60, .bg-slate-700\/70, .bg-slate-700\/80, .bg-slate-600, .bg-slate-600\/20, .bg-slate-600\/50):where(:not(input, select, textarea, body)) {
    background-color: var(--surface-raised) !important;
}
/* ของที่ลอยทับเนื้อหา (dropdown/popover/ป้ายบนรูป) ต้องทึบ ไม่งั้นตัวหนังสือข้างหลังทะลุ */
html[data-theme] :is(.absolute, .fixed):is(.bg-slate-800, .bg-slate-800\/80, .bg-slate-900, .bg-slate-900\/80, .bg-slate-900\/85, .bg-slate-950) {
    background: var(--surface-solid) !important;
}
html[data-theme] [class*="hover:bg-slate-"]:hover { background-color: var(--surface-hover) !important; }

/* เส้นขอบ */
html[data-theme] :is(.border-slate-700, .border-slate-700\/30, .border-slate-700\/40, .border-slate-700\/50, .border-slate-700\/60, .border-slate-700\/70, .border-slate-800, .border-slate-800\/60) {
    border-color: var(--line) !important;
}
html[data-theme] :is(.border-slate-600, .border-slate-600\/40, .border-slate-600\/50, .border-slate-600\/60, .border-slate-500, .border-slate-500\/30, .border-slate-500\/40) {
    border-color: var(--line-strong) !important;
}
html[data-theme] :is(.divide-slate-700, .divide-slate-700\/60, .divide-slate-700\/70, .divide-slate-800, .divide-slate-800\/80) > * {
    border-color: var(--line) !important;
}

/* ---------- 4.5 SweetAlert2 (ป๊อปอัพเดิมของโปรเจกต์) → กระจกทึบตามโหมด ----------
   ค่า background/color ที่ส่งใน Swal.fire เป็น inline style → ทับด้วย !important */
html[data-theme] .swal2-popup {
    background: var(--surface-solid) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-hi), 0 24px 60px rgba(2,6,23,.45);
}
html[data-theme] .swal2-title,
html[data-theme] .swal2-html-container { color: inherit !important; }
html[data-theme] .swal2-close { color: var(--text-faint); }
html[data-theme] .swal2-close:hover { color: var(--text-main); }

/* ============================================================
   4.6 โหมดสว่าง "ฟ้าใส" — สีตัวอักษร/ป้าย/ปุ่มที่ hard-code ไว้สำหรับพื้นมืด
   (ตัวอักษรสีอ่อนบนพื้นขาวอ่านไม่ออก → เปลี่ยนเป็นหมึกเข้มของสีเดิม)
   ============================================================ */
:root[data-theme="light"] {
    --ink-blue:   #0369a1;
    --ink-indigo: #4338ca;
    --ink-violet: #6d28d9;
    --ink-teal:   #0f766e;
    --ink-green:  #047857;
    --ink-amber:  #b45309;
    --ink-red:    #be123c;
}
html[data-theme="light"] :is(.text-white, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-900, .text-gray-100, .text-gray-200, .text-gray-300) { color: var(--text-main) !important; }
html[data-theme="light"] :is(.text-slate-400, .text-gray-400) { color: var(--text-dim) !important; }
html[data-theme="light"] :is(.text-slate-500, .text-slate-600) { color: var(--text-faint) !important; }
html[data-theme="light"] :is(.text-blue-200, .text-blue-300, .text-blue-400, .text-sky-200, .text-sky-300, .text-sky-300\/80, .text-sky-400, .text-cyan-200, .text-cyan-300, .text-cyan-400) { color: var(--ink-blue) !important; }
html[data-theme="light"] :is(.text-indigo-100, .text-indigo-300, .text-indigo-400) { color: var(--ink-indigo) !important; }
html[data-theme="light"] :is(.text-violet-300, .text-violet-400) { color: var(--ink-violet) !important; }
html[data-theme="light"] :is(.text-teal-300, .text-teal-400) { color: var(--ink-teal) !important; }
html[data-theme="light"] :is(.text-emerald-200\/90, .text-emerald-300, .text-emerald-300\/80, .text-emerald-400, .text-emerald-400\/80, .text-emerald-400\/90, .text-green-200, .text-green-300, .text-green-400) { color: var(--ink-green) !important; }
html[data-theme="light"] :is(.text-amber-200, .text-amber-200\/90, .text-amber-300, .text-amber-300\/70, .text-amber-300\/80, .text-amber-300\/90, .text-amber-400, .text-amber-400\/90, .text-yellow-200, .text-yellow-300, .text-yellow-400, .text-yellow-500\/90, .text-orange-300, .text-orange-400) { color: var(--ink-amber) !important; }
html[data-theme="light"] :is(.text-red-200, .text-red-200\/90, .text-red-300, .text-red-400, .text-red-500, .text-rose-300, .text-rose-400, .text-rose-500) { color: var(--ink-red) !important; }

/* hover สีตัวอักษร */
html[data-theme="light"] :is(.hover\:text-white, .hover\:text-slate-200, .hover\:text-slate-300, .hover\:text-slate-900):hover { color: var(--text-main) !important; }
html[data-theme="light"] :is(.hover\:text-blue-300, .hover\:text-sky-300, .hover\:text-cyan-300, .hover\:text-teal-300, .hover\:text-indigo-300, .hover\:text-violet-300):hover { color: var(--accent) !important; }
html[data-theme="light"] :is(.hover\:text-emerald-300):hover { color: var(--ink-green) !important; }
html[data-theme="light"] :is(.hover\:text-amber-100, .hover\:text-amber-300):hover { color: var(--ink-amber) !important; }
html[data-theme="light"] :is(.hover\:text-red-200, .hover\:text-red-300, .hover\:text-red-400, .hover\:text-rose-300):hover { color: var(--ink-red) !important; }

/* ปุ่ม/ป้ายพื้นสีทึบ (ฟ้า เขียว แดง ม่วง ฯลฯ) — ตัวอักษรขาวคงเดิม */
html[data-theme="light"] :is(.bg-blue-500, .bg-blue-600, .bg-blue-600\/70, .bg-blue-600\/80, .bg-indigo-500, .bg-indigo-600, .bg-indigo-600\/80, .bg-emerald-500, .bg-emerald-600, .bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-500, .bg-rose-600, .bg-sky-500, .bg-sky-600, .bg-sky-600\/80, .bg-cyan-500, .bg-cyan-600, .bg-cyan-600\/80, .bg-teal-500, .bg-teal-600, .bg-teal-600\/80, .bg-violet-500, .bg-violet-600, .bg-violet-600\/80, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-orange-600\/80, .bg-amber-600, .bg-amber-600\/80, .bg-green-700, .bg-yellow-700, .bg-\[\#10b981\], .bg-\[\#3b82f6\], .bg-\[\#2563eb\], .bg-\[\#059669\], .bg-gradient-to-r):is(.text-white, .text-slate-100),
html[data-theme="light"] :is(.bg-blue-500, .bg-blue-600, .bg-blue-600\/70, .bg-blue-600\/80, .bg-indigo-500, .bg-indigo-600, .bg-indigo-600\/80, .bg-emerald-500, .bg-emerald-600, .bg-red-500, .bg-red-600, .bg-red-700, .bg-rose-500, .bg-rose-600, .bg-sky-500, .bg-sky-600, .bg-sky-600\/80, .bg-cyan-500, .bg-cyan-600, .bg-cyan-600\/80, .bg-teal-500, .bg-teal-600, .bg-teal-600\/80, .bg-violet-500, .bg-violet-600, .bg-violet-600\/80, .bg-purple-600, .bg-orange-500, .bg-orange-600, .bg-orange-600\/80, .bg-amber-600, .bg-amber-600\/80, .bg-green-700, .bg-yellow-700, .bg-\[\#10b981\], .bg-\[\#3b82f6\], .bg-\[\#2563eb\], .bg-\[\#059669\], .bg-gradient-to-r) :is(.text-white, .text-slate-100, .text-indigo-100),
html[data-theme="light"] :is(.hover\:bg-blue-500, .hover\:bg-blue-600):hover,
html[data-theme="light"] :is(.hover\:bg-blue-500, .hover\:bg-blue-600):hover * { color: #fff !important; }

/* พื้นจางสีเข้ม (-900/xx) ของโหมดมืด → พื้นจางสีอ่อนบนพื้นขาว */
html[data-theme="light"] :is(.bg-red-900, .bg-red-900\/20, .bg-red-900\/25, .bg-red-900\/30, .bg-red-900\/40, .bg-red-900\/50, .bg-rose-900\/20, .bg-rose-900\/60, .bg-rose-950\/35) { background-color: rgba(225,29,72,.08) !important; }
html[data-theme="light"] :is(.bg-amber-900\/20, .bg-yellow-900\/40, .bg-yellow-900\/50) { background-color: rgba(217,119,6,.1) !important; }
html[data-theme="light"] :is(.bg-emerald-900\/20, .bg-emerald-900\/30, .bg-green-900\/40, .bg-green-900\/50) { background-color: rgba(5,150,105,.09) !important; }
html[data-theme="light"] :is(.bg-indigo-900\/20, .bg-indigo-900\/30, .bg-indigo-900\/40, .bg-violet-900\/30) { background-color: rgba(79,70,229,.08) !important; }
html[data-theme="light"] :is(.bg-blue-900\/20, .bg-blue-900\/25, .bg-blue-900\/50, .bg-sky-900\/20, .bg-sky-900\/30, .bg-cyan-900\/40) { background-color: rgba(2,132,199,.08) !important; }
html[data-theme="light"] .hover\:bg-red-800\/80:hover { background-color: rgba(225,29,72,.16) !important; }

/* กล่องไล่เฉดพื้นมืด (from-slate-*) → กล่องฟ้าอ่อน */
html[data-theme="light"] .bg-gradient-to-b.from-slate-800 { background-image: none !important; background-color: var(--surface-well) !important; }

/* เงาสีน้ำเงินเข้มของโหมดมืด → เงาฟ้าจางแบบ hub */
html[data-theme="light"] :is(.shadow-blue-900\/20, .shadow-blue-900\/50, .shadow-2xl) { box-shadow: var(--glass-hi), var(--glass-shadow) !important; }

/* SweetAlert โหมดสว่าง: ข้อความที่ใส่สีแบบ inline สำหรับพื้นมืด */
html[data-theme="light"] .swal2-popup { box-shadow: var(--glass-hi), 0 24px 60px rgba(30,64,120,.2); }
html[data-theme="light"] .swal2-popup [style*="color:#"] { color: var(--text-main) !important; }
html[data-theme="light"] .swal2-popup :is([style*="color:#cbd5e1"], [style*="color:#94a3b8"], [style*="color:#64748b"]) { color: var(--text-dim) !important; }
html[data-theme="light"] .swal2-container.swal2-backdrop-show { background: var(--backdrop) !important; }