/* ═══════════════════════════════════════
   เฮงเฮง ปังจัง — Dark Mode (Shared)
   Include ในทุกหน้า customer
   ═══════════════════════════════════════ */

:root{--bg:#EAEDF2;--card:#fff;--text:#1a1a1a;--text2:#888;--text3:#bbb;--border:#eee;--shadow:rgba(0,0,0,0.04);--input-bg:#fff;--input-border:#eee;}
.dark{--bg:#121212;--card:#1e1e1e;--text:#e0e0e0;--text2:#aaa;--text3:#555;--border:#2a2a2a;--shadow:rgba(0,0,0,0.3);--input-bg:#2a2a2a;--input-border:#3a3a3a;}

/* Base */
.dark body,.dark .app-shell{background:var(--bg)!important;}
.dark .page-content{color:var(--text);}

/* Cards & surfaces */
.dark .card,.dark .stats .stat,.dark .st,.dark .sum-st,
.dark .qa-icon,.dark .rs-card,.dark .vl-card,.dark .feed,
.dark .noti,.dark .cu-card,.dark .cl-item,.dark .cpn,
.dark .qr-card{background:var(--card)!important;border-color:var(--border)!important;}

/* Headers & top bars */
.dark .h-top,.dark .topbar{background:var(--card)!important;border-color:var(--border)!important;box-shadow:0 2px 10px var(--shadow)!important;}
.dark .page-header{background:linear-gradient(135deg,#B80E00,#8B0000)!important;}

/* Text */
.dark .h-name,.dark .h-greeting,.dark h1,.dark h2,.dark .card-title,
.dark .sec-title,.dark .cu-name,.dark .fi-name,.dark .feed-hdr,
.dark .noti-hdr,.dark .card-t{color:var(--text)!important;}
.dark .h-greeting,.dark .stat-l,.dark .sec-label,.dark .qa-label,
.dark .rs-name,.dark .vl-name,.dark .st-l,.dark .sum-st-l,
.dark .cu-meta,.dark .fi-time,.dark .bi-sub,.dark .cl-date{color:var(--text2)!important;}

/* Stats numbers keep colors */
.dark .stat-n,.dark .st-n.red{color:#FF6B6B!important;}
.dark .st-n.green{color:#5DCAA5!important;}
.dark .st-n.gold,.dark .st-n.gold{color:#FFD700!important;}

/* Inputs */
.dark input,.dark select,.dark textarea,.dark .fi{background:var(--input-bg)!important;border-color:var(--input-border)!important;color:var(--text)!important;}
.dark input::placeholder,.dark textarea::placeholder{color:var(--text3)!important;}

/* Hero banner */
.dark .hero-banner{border-color:var(--border)!important;}

/* Bottom nav */
.dark .bnav{background:var(--card)!important;box-shadow:0 -1px 8px var(--shadow)!important;}

/* Misc */
.dark .dd-sep{border-color:var(--border)!important;}
.dark .dropdown{background:var(--card)!important;border-color:var(--border)!important;box-shadow:0 4px 20px var(--shadow)!important;}
.dark .dropdown a{color:var(--text)!important;}
.dark .dropdown a:hover{background:var(--bg)!important;}
.dark .noti-panel{background:var(--card)!important;border-color:var(--border)!important;}
.dark .empty{color:var(--text3)!important;}
.dark .overlay{background:rgba(0,0,0,.6)!important;}
.dark .bill-info b,.dark .bi-title{color:var(--text)!important;}
.dark .cpn-modal-card{background:var(--card)!important;}

/* Dark mode button */
.dm-btn{width:36px;height:36px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:all .3s;position:relative;overflow:hidden;}
.dm-btn:active{transform:scale(0.9);}
.dm-btn .dm-sun,.dm-btn .dm-moon{position:absolute;transition:transform .4s,opacity .3s;}
.dm-btn .dm-sun{color:#F59E0B;opacity:1;transform:rotate(0deg);}
.dm-btn .dm-moon{color:#6366F1;opacity:0;transform:rotate(-90deg);}
.dark .dm-btn{background:#2a2a2a;}
.dark .dm-btn .dm-sun{opacity:0;transform:rotate(90deg);}
.dark .dm-btn .dm-moon{opacity:1;transform:rotate(0deg);color:#FFD700;}