/* จันทน์นิยม — ตัวแปรสีแบรนด์กลาง ใช้ร่วมกันทุกหน้าใน WebAdmin.UI
   หมายเหตุ: --text-muted ใช้ #767676 ไม่ใช่ #777777 เดิม เพราะ #777777 บนพื้นขาวคำนวณ Contrast ได้ ~4.48:1
   ซึ่งไม่ผ่านเกณฑ์ WCAG 2.1 AA (ต้องการ 4.5:1 ขึ้นไปสำหรับตัวอักษรขนาดปกติ) ส่วน #767676 ได้ ~4.54:1 ผ่านเกณฑ์

   ✅ อัปเดต (กลับคำตัดสินใจ §42 อย่างเป็นทางการตามคำขอผู้ใช้ — ดู PROGRESS.md §46): ตอนนี้
   --card-bg / --text-main / --text-muted ถูก Override ใน [data-theme="dark"] แล้ว เพราะทุกหน้า Admin
   ถูกไล่แก้สี Hardcode (#fff/#fafafa/#eee/#ddd) ให้เป็น Token ครบทั้งหมดในรอบเดียวกัน ธีมมืดจึงทำงาน
   ทั้งระบบจริงๆ — ⚠️ กติกาใหม่: ห้ามใช้สีขาว/เทาอ่อน Hardcode ในหน้า Admin อีก ให้ใช้ Token เหล่านี้เสมอ
   (ยกเว้น Login.razor ที่ใช้ EmptyLayout ธีมคงที่โดยเจตนา — ดู §12.6) */
:root {
    --primary-yellow: #FDB813;
    --dark-bg: #1A1614;
    --card-bg: #FFFFFF;
    --text-main: #333333;
    --text-muted: #767676;

    /* ชุด Token สีของแถบเมนู (Navbar) — ค่าเดียวกับ --cn-* ของฝั่งลูกค้า (WebCustomer.UI/wwwroot/css/brand.css)
       เป๊ะทุกตัว เพื่อให้แถบเมนู Admin หน้าตา/ธีมเหมือนฝั่งลูกค้าตามที่ผู้ใช้ขอ (ต่างแค่ชื่อปุ่ม)
       ⚠️ ถ้าแก้ค่าฝั่งลูกค้า ให้มาแก้ตรงนี้ให้ตรงกันด้วยเสมอ */
    --cn-bg: #FFFDF8;
    --cn-bg-alt: #FFF6E4;
    --cn-fg: #2E2416;
    --cn-fg-muted: #8A7A64;
    --cn-yellow: #FDB813;
    --cn-yellow-deep: #E5A300;
    --cn-card: #FFFFFF;
    --cn-border: rgba(46,36,22,0.10);
    --cn-shadow: 0 4px 20px rgba(46,36,22,0.06);

    /* พื้นหลังรวมของ Shell — ดู PROGRESS.md §41-42, §46 */
    --admin-shell-bg: #F5F5F5;
    --admin-border: #E5E5E5;

    /* Token เสริมสำหรับเนื้อหาในหน้า (เพิ่มใน §46 ตอนทำธีมมืดทั้งระบบ) */
    --panel-bg: #FAFAFA;        /* กล่อง/ฟอร์มย่อยบนการ์ด (แทน #fafafa เดิม) */
    --alert-soft-bg: #FFF7E0;   /* กล่องแจ้งเตือนโทนเหลืองอ่อน (แทน #FFF7E0/#FFF8E7 เดิม) */
    --success-text: #1A7A3A;    /* ตัวหนังสือสถานะบวก เช่น "จ่ายแล้ว" */
    --danger-text: #B32121;     /* ตัวหนังสือสถานะลบ เช่น "ยังไม่จ่าย/ยกเลิก" */

    /* เฉพาะหน้า Home Hub เท่านั้น (การ์ดต้อนรับ/ทางลัด/เคล็ดลับ) — แยกจาก --card-bg/--text-main ข้างบน
       โดยตั้งใจ เพื่อไม่ให้กระทบหน้าอื่นที่ยังไม่รองรับธีมมืด (ดูคำอธิบายเต็มด้านบน) */
    --hub-card-bg: #FFFFFF;
    --hub-hero-from: #FFF8E7;
    --hub-hero-to: #FFFFFF;
    --hub-text: #333333;
    --hub-text-muted: #767676;
    --hub-border: #eeeeee;
}

[data-theme="dark"] {
    --admin-shell-bg: #14110F;
    --admin-border: #332C27;

    /* ธีมมืดทั้งระบบ (§46) — ค่าโทนเดียวกับ --hub-* เพื่อให้ทุกหน้ากลมกลืนกับ Home Hub */
    --card-bg: #221D1A;
    --text-main: #F0EAE0;
    --text-muted: #A89B8C;
    --panel-bg: #2A2420;
    --alert-soft-bg: #3A3222;
    --success-text: #7BD9A5;
    --danger-text: #F19999;

    /* Token แถบเมนูธีมมืด — ค่าเดียวกับฝั่งลูกค้าเป๊ะ (ดูหมายเหตุใน :root ด้านบน) */
    --cn-bg: #3A342C;
    --cn-bg-alt: #423B31;
    --cn-fg: #F5EFE4;
    --cn-fg-muted: #C9BEA9;
    --cn-yellow: #FDB813;
    --cn-yellow-deep: #FFC940;
    --cn-card: #4A4238;
    --cn-border: rgba(253,184,19,0.18);
    --cn-shadow: 0 4px 20px rgba(0,0,0,0.25);

    --hub-card-bg: #221D1A;
    --hub-hero-from: #2A231D;
    --hub-hero-to: #1D1815;
    --hub-text: #F0EAE0;
    --hub-text-muted: #A89B8C;
    --hub-border: #332C27;
}

/* =========================================
   Theme Logo Switching & Aura Glow
   ========================================= */

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(253, 184, 19, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(253, 184, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 184, 19, 0); }
}

/* ⚠️ แก้บั๊กที่เจอใน §42: เดิมไฟล์นี้มีกฎสลับโลโก้ Light/Dark ของตัวเอง (สร้างไว้ตั้งแต่ก่อนทำ Navbar
   ใน §38-41) ขัดแย้งกับกฎที่เพิ่มใหม่ใน MainLayout.razor.css (ตั้งใจให้ใช้แค่โลโก้ Light เสมอ เพราะ Topbar
   เข้มคงที่ไม่ว่าธีมไหน) สองระบบชนกันทำให้โลโก้หายไปทั้งคู่ตอนเปิดธีมมืด — ลบกฎเดิมออกให้เหลือระบบเดียว
   (การกำหนดขนาด/การซ่อนโลโก้ทั้งหมดอยู่ใน MainLayout.razor.css แล้ว ไฟล์นี้ให้แค่ Animation ออร่าเรืองแสง) */
.brand-logo-light, .brand-logo-dark {
    animation: pulseGlow 2s infinite;
}

/* คนที่ตั้งค่าเครื่องไม่ให้มี Animation (เช่นเวียนหัวง่าย) จะไม่เจอออร่ากระพริบที่โลโก้
   (Pattern เดียวกับที่ฝั่งลูกค้าแก้ไว้ใน §23 — ฝั่ง Admin เพิ่งตามมาเก็บให้ครบ) */
@media (prefers-reduced-motion: reduce) {
    .brand-logo-light, .brand-logo-dark {
        animation: none;
    }
}