/* ════════════════════════════════════════════════════════════════
   ธีมกระจก (Glass) · พื้นเข้ม + แสงสีด้านหลัง + การ์ดกระจกฝ้า
   สีพื้นหลังเลือกได้ 5 แบบ (html[data-glass=violet|gold|emerald|rose|ocean])
   ════════════════════════════════════════════════════════════════ */
html.glass {
  --g1a: #1a0640; --g1b: #5a1fc0; --g1c: #8f3df0; --g1rim: rgba(230,170,255,.5); --g1glow: rgba(140,60,255,.35);
  --g2a: #3f6bff; --g2b: #1d36d9; --g2c: #0c1a7a; --g2rim: rgba(150,180,255,.7); --g2glow: rgba(40,90,255,.45);
  --hot: #C8F53C; --hot-2: #E4FF8A;
}
html.glass[data-glass="gold"]    { --g1a:#1e1005; --g1b:#5e3a14; --g1c:#a8783a; --g1rim:rgba(255,215,150,.45); --g1glow:rgba(214,168,92,.3);
                                   --g2a:#b7782f; --g2b:#7a4a1a; --g2c:#3a2410; --g2rim:rgba(255,205,140,.6); --g2glow:rgba(190,120,50,.35); --hot:#F2D08A; --hot-2:#FFF0C8; }
html.glass[data-glass="emerald"] { --g1a:#03261f; --g1b:#0b6b52; --g1c:#22a67c; --g1rim:rgba(160,255,220,.45); --g1glow:rgba(40,200,150,.3);
                                   --g2a:#1aa3a3; --g2b:#0b5f73; --g2c:#06283a; --g2rim:rgba(150,240,240,.6); --g2glow:rgba(20,160,170,.35); }
html.glass[data-glass="rose"]    { --g1a:#3a0624; --g1b:#c0287a; --g1c:#ff6fb1; --g1rim:rgba(255,190,225,.5); --g1glow:rgba(255,80,160,.32);
                                   --g2a:#7a3cff; --g2b:#4a1fb0; --g2c:#1e0a55; --g2rim:rgba(200,170,255,.6); --g2glow:rgba(120,60,255,.35); --hot:#FFD36B; --hot-2:#FFE9B0; }
html.glass[data-glass="ocean"]   { --g1a:#03203a; --g1b:#0c5a96; --g1c:#2a9fd8; --g1rim:rgba(170,230,255,.5); --g1glow:rgba(60,180,255,.32);
                                   --g2a:#2b5cff; --g2b:#1735b0; --g2c:#081650; --g2rim:rgba(160,190,255,.65); --g2glow:rgba(40,90,255,.4); }

html.glass[data-mode] {
  --bg: #05050c; --surface: rgba(18,16,34,.42); --surface-2: rgba(255,255,255,.07); --ink: #F5F4FA; --ink-2: rgba(245,244,250,.78); --muted: rgba(245,244,250,.55);
  --line: rgba(255,255,255,.13); --accent: #0a0a0f; --accent-ink: #FFFFFF; --accent-soft: rgba(255,255,255,.08); --accent-text: var(--hot);
  --side-bg: rgba(18,16,34,.38); --side-ink: rgba(245,244,250,.72); --side-active: rgba(255,255,255,.14); --side-active-ink: #FFFFFF; --side-line: rgba(255,255,255,.14);
  --bar: rgba(255,255,255,.22); --bar-hi: var(--hot);
  --ok: #9FE3A9; --ok-soft: rgba(159,227,169,.14); --bad: #FF9B86; --bad-soft: rgba(255,155,134,.14); --warn: #FFD27A; --warn-soft: rgba(255,210,122,.14);
  --shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14); --card-border: rgba(255,255,255,.16);
  --insight: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); --insight-ink: #FFFFFF;
  --c1: var(--hot); --c2: #FFFFFF; --c3: #9C8CFF; --c4: #6FC7FF; --c5: rgba(255,255,255,.3);
  color-scheme: dark;
}
html.glass { background: #05050c; }
html.glass body, html.glass .layout, html.glass .main { background: transparent !important; }
html.glass body { position: relative; }
/* แสงสีด้านหลัง: โค้งบน + วงใหญ่ด้านล่าง (ขอบคม มีแสงขอบ) */
html.glass body::before, html.glass body::after { content: ''; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; }
html.glass body::before { width: 150vmax; height: 150vmax; left: -30vmax; top: -128vmax;
  background: linear-gradient(200deg, var(--g1a) 10%, var(--g1b) 58%, var(--g1c) 82%);
  box-shadow: inset 0 -10px 24px var(--g1rim), 0 0 90px var(--g1glow); }
html.glass body::after { width: 180vmax; height: 180vmax; left: -8vmax; top: 58vh;
  background: radial-gradient(circle at 50% 8%, var(--g2a) 0%, var(--g2b) 18%, var(--g2c) 40%, #050a20 70%);
  box-shadow: inset 0 14px 34px var(--g2rim), 0 -10px 120px var(--g2glow); }

/* กระจกฝ้า */
html.glass .card, html.glass .side, html.glass .modal, html.glass .insight, html.glass .kpi {
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
html.glass .card, html.glass .insight { background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.03)), rgba(10,8,26,.36); }
html.glass .modal { background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(12,10,28,.72); border: 1px solid rgba(255,255,255,.16); }
html.glass .modal-bg { background: rgba(4,4,12,.45); }
@media (min-width: 761px) {
  html.glass .side { border-right: 0; margin: 12px 0 12px 12px; height: calc(100vh - 24px); border-radius: 28px; top: 12px;
    border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 50px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2); }
}
@media (max-width: 760px) { html.glass .side { left: 8px; right: 8px; bottom: 8px; width: auto; border-radius: 22px; border: 1px solid rgba(255,255,255,.16); } }
html.glass .nav.on { background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.3); position: relative; }
html.glass .nav.on::before { content: ''; position: absolute; left: -9px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
html.glass .nav.on svg { color: var(--hot); }
html.glass .nav-badge { background: #07070a; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }
html.glass .logo { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
/* ปุ่มหลัก = ดำเงา */
html.glass .btn:not(.soft):not(.line):not(.ghost):not(.danger) { background: linear-gradient(145deg, #1d1d24, #050507); color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.2); }
html.glass .btn.soft { background: rgba(255,255,255,.1); }
html.glass .chip { background: rgba(255,255,255,.06); }
html.glass .chip.on { background: #07070a; color: #fff; border-color: var(--hot); }
html.glass .input, html.glass select.input, html.glass textarea.input { background: rgba(255,255,255,.07); color: var(--ink); }
html.glass .input:focus { border-color: var(--hot); }
html.glass select.input option { background: #14121f; color: #fff; }
html.glass .spinner { border-top-color: var(--hot); }
html.glass #toast { background: rgba(10,10,16,.9); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); }
/* กราฟ: แท่งวันนี้สีเด่น */
html.glass .bar-past { fill: rgba(255,255,255,.24); }
html.glass .bar-today { fill: var(--hot); filter: drop-shadow(0 0 12px var(--hot)); }
html.glass .hbar i { background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); }
html.glass .kpi-tap.on { outline-color: var(--hot); }
/* POS: พื้นที่ขายต้องอ่านชัด ใช้กระจกทึบขึ้น */
html.glass .pos-main .card, html.glass .pos-main .modal { background: rgba(14,12,28,.78); }
/* ตัวเลือกสีในตั้งค่า */
.gl-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.gl-opt { width: 74px; border: 1.5px solid var(--line); border-radius: 16px; padding: 6px 6px 5px; background: var(--surface); cursor: pointer; color: inherit; font: inherit; text-align: center; }
.gl-opt i { display: block; height: 46px; border-radius: 11px; margin-bottom: 5px; }
.gl-opt small { font-size: 11.5px; }
.gl-opt.on { border-color: var(--hot, var(--accent)); box-shadow: 0 0 0 2px var(--hot, var(--accent)); }
html.glass rect[fill="var(--bar-hi)"] { filter: drop-shadow(0 0 10px var(--hot)); }