/* โหมดมืด: โหลดไฟล์นี้ท้ายสุด ทับสีของทุกไฟล์
   - เปิดด้วย <html data-theme="dark"> (App.razor ใส่ให้เฉพาะหน้าหลังร้าน ตามคุกกี้ theme=dark)
   - หน้าร้านออนไลน์ / หน้าเข้าสู่ระบบ ไม่มี data-theme จึงสว่างเสมอ
   - ทุกกฎอยู่ใน @media screen: ตอนพิมพ์ (ใบเสร็จ 80mm/A4, ใบแจ้งยอดพักบิล, ป้ายบาร์โค้ด) ยังเป็นดำบนขาว
   - พาเลตอุ่นต่อจากดีไซน์ B: พื้น #151412 แผง #1F1D1B ยกขึ้น #2A2724 เส้น #3A3632 ตัวหนังสือ #ECE7E1 รอง #A59D94 */

/* ---------- ปุ่มสลับโหมด (ใช้ทั้งโหมดสว่างและมืด) ---------- */
@media screen {
  .theme-toggle {
    flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px;
    background: var(--chip); color: var(--ink); font: inherit;
  }
  .theme-toggle:hover { background: var(--line); }
  .theme-toggle .theme-sun { display: none; }
  .theme-toggle.on-brand { background: rgba(0,0,0,.18); color: #fff; width: 38px; height: 38px; }
  .theme-toggle.on-brand:hover { background: rgba(0,0,0,.28); }
  .theme-toggle.on-dark { background: rgba(255,255,255,.08); color: #D8CCC2; width: 38px; height: 38px; }
  .theme-toggle.on-dark:hover { background: rgba(255,255,255,.14); color: #fff; }
  .who-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .who-tools .lang-switch.on-dark { align-self: center; }

  html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
  html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
}

@media screen {
  /* ---------- ตัวแปรหลัก ---------- */
  html[data-theme="dark"] {
    --bg: #151412;
    --surface: #1F1D1B;
    --raised: #2A2724;
    --chip: #2A2724;
    --ink: #ECE7E1;
    --muted: #A59D94;
    --line: #3A3632;
    --field: #191816;
    --placeholder: #7A726A;
    /* สีของร้านแบบอ่อนที่ฉีดมาใน :root เป็นสีอ่อนบนพื้นขาว → ทำใหม่ให้เป็นสีเข้มผสมสีร้าน */
    --brand-soft: color-mix(in srgb, var(--brand) 24%, #1F1D1B);
    --brand-tint: color-mix(in srgb, var(--brand) 13%, #1F1D1B);
    /* --brand-strong ใช้เป็น "ตัวหนังสือสีร้านบนพื้นอ่อน" แทบทุกที่ → ในโหมดมืดต้องสว่างขึ้นจึงจะอ่านออก */
    --brand-strong: color-mix(in srgb, var(--brand) 58%, #F6EFE8);
    --brand-text: color-mix(in srgb, var(--brand) 58%, #F6EFE8);
    /* เส้นขอบสีร้าน (สว่างขึ้นเล็กน้อย เผื่อร้านเลือกสีเข้มมากจนกลืนกับพื้น) */
    --brand-line: color-mix(in srgb, var(--brand) 72%, #F6EFE8);
    --ok: #6FD39A;
    --ok-soft: #16301F;
    --danger: #FF8F84;
    --danger-soft: #3B1F1C;
    --warn-soft: #3A2F17;
    --warn-text: #F0C873;
    --info-soft: #172A3D;
    --info-text: #8CC4F2;
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 10px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.55);
    --scrim: rgba(0,0,0,.6);
    color-scheme: dark;
    scrollbar-color: #4A453F transparent;
  }
  html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

  /* แถบเลื่อน */
  html[data-theme="dark"] * { scrollbar-color: #4A453F transparent; }
  html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
  html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A453F; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #5C564E; }
  html[data-theme="dark"] .sidebar .nav { scrollbar-color: rgba(255,255,255,.16) transparent; }

  /* ตัวอักษรแนะนำในช่องกรอก */
  html[data-theme="dark"] ::placeholder { color: var(--placeholder); opacity: 1; }
  html[data-theme="dark"] :focus-visible { outline-color: color-mix(in srgb, var(--brand-text) 70%, transparent); }

  /* ลิงก์ในเนื้อหา (ไม่รวมเมนู/ปุ่ม) */
  html[data-theme="dark"] :is(.content, .mdl, .drw) a:not([class]),
  html[data-theme="dark"] .content .link, html[data-theme="dark"] .mdl .link, html[data-theme="dark"] .drw .link { color: var(--brand-text); }

  /* ---------- โครงหน้า: เมนูข้าง หัวจอ แถบล่าง ---------- */
  html[data-theme="dark"] .sidebar { background: #100F0E; color: #EDE4DC; box-shadow: 1px 0 0 #26231F; }
  html[data-theme="dark"] .nav a.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  html[data-theme="dark"] .who { border-top-color: rgba(255,255,255,.1); }
  html[data-theme="dark"] .who .link, html[data-theme="dark"] .link.on-dark { color: #D8CCC2; }
  html[data-theme="dark"] .lang-switch.on-dark a.on { background: #ECE7E1; color: #1A1816; }
  html[data-theme="dark"] .lang-switch a.on { background: #3A3632; color: var(--ink); box-shadow: none; }
  html[data-theme="dark"] .lang-switch.on-brand a.on { background: #ECE7E1; color: #1A1816; }
  html[data-theme="dark"] .topbar { background: var(--surface); border-bottom-color: var(--line); }
  html[data-theme="dark"] .branch-switch select { background: var(--field); color: var(--ink); border-color: var(--line); }
  html[data-theme="dark"] .tabbar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0,0,0,.4); }
  html[data-theme="dark"] .tabbar a.active { color: var(--brand-text); }
  html[data-theme="dark"] .scrim, html[data-theme="dark"] .nav-toggle:checked ~ .shell .scrim { background: var(--scrim); }

  /* มือถือ: หัวจอเป็นสีเข้ม (สีร้านเหลือเป็นจุดเน้นที่แถบหน้าขาย/ปุ่ม) */
  html[data-theme="dark"] .mobile-bar { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  @media (max-width: 760px) {
    html[data-theme="dark"] .topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
    html[data-theme="dark"] .main:has(.posb-hero) .topbar { border-bottom: 0; }
    html[data-theme="dark"] .topbar .muted { color: var(--muted); }
    html[data-theme="dark"] .topbar .tag { background: var(--brand-soft); color: var(--brand-text); }
    html[data-theme="dark"] .topbar .branch-switch select { background: var(--chip); color: var(--ink); border: 1px solid var(--line); }
    html[data-theme="dark"] .mobile-bar .lang-switch.on-brand { background: var(--chip); }
    html[data-theme="dark"] .mobile-bar .lang-switch.on-brand a { color: var(--muted); }
    html[data-theme="dark"] .mobile-bar .lang-switch.on-brand a.on { background: #3A3632; color: var(--ink); }
    html[data-theme="dark"] .mobile-bar .theme-toggle.on-brand { background: var(--chip); color: var(--ink); }
    html[data-theme="dark"] .tabbar a.active .tab-icon { background: var(--brand-soft); }
    /* หน้าขาย: แถบค้นหาต่อจากหัวจอ → ใช้สีเดียวกับหัวจอ (เข้ม) แทนสีร้าน */
    html[data-theme="dark"] .posb-hero { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
    html[data-theme="dark"] .posb-search { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
  }

  /* ---------- ปุ่ม / ฟอร์ม / แผง ---------- */
  :where(html[data-theme="dark"]) .btn { background: var(--raised); border-color: var(--line); color: var(--ink); }
  :where(html[data-theme="dark"]) .btn:hover { border-color: #5C564E; }
  :where(html[data-theme="dark"]) .btn.ghost { background: transparent; }
  html[data-theme="dark"] .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  html[data-theme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--brand) 86%, #fff); border-color: color-mix(in srgb, var(--brand) 86%, #fff); }
  html[data-theme="dark"] .btn.danger { background: #B8392C; border-color: #B8392C; color: #fff; }
  html[data-theme="dark"] .rcv-add { background: transparent; }

  html[data-theme="dark"] :is(.field input, .field select, .field textarea, .search, .qty, .table select, .table input:not([type="checkbox"]),
    .note-input, .void-box input, .units-grid input, .stack.tight input, .stack.tight textarea, .bill-discount input,
    .branch-opt select, .rate-input input, .pospromo-coupon input, .return-box > input, .shop-search input) {
    background: var(--field); color: var(--ink); border-color: var(--line);
  }
  html[data-theme="dark"] .field input:disabled { background: var(--bg); color: var(--muted); }
  html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
  html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
  html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
  html[data-theme="dark"] select option { background: var(--surface); color: var(--ink); }
  html[data-theme="dark"] .topbar .branch-switch select option { color: var(--ink); }

  html[data-theme="dark"] .panel { box-shadow: var(--shadow); }
  html[data-theme="dark"] .table-wrap { box-shadow: var(--shadow); }
  html[data-theme="dark"] .empty { background: var(--surface); }

  /* ป้าย / ชิป / สถานะ */
  html[data-theme="dark"] .tag { background: var(--brand-soft); color: var(--brand-text); }
  html[data-theme="dark"] .tag.warn { background: var(--warn-soft); color: var(--warn-text); }
  :where(html[data-theme="dark"]) .chip { background: var(--surface); border-color: var(--line); color: var(--ink); }
  :where(html[data-theme="dark"]) .status-pill { background: var(--raised); color: var(--ink); }
  html[data-theme="dark"] :is(.status-pending, .status-paymentreview) { background: var(--warn-soft); color: var(--warn-text); }
  html[data-theme="dark"] .status-awaitingpayment { background: #3D2616; color: #F4A86B; }
  html[data-theme="dark"] .status-confirmed { background: var(--brand-soft); color: var(--brand-text); }
  html[data-theme="dark"] .status-shipped { background: var(--info-soft); color: var(--info-text); }
  html[data-theme="dark"] .status-completed, html[data-theme="dark"] .status-pill.scust-on { background: var(--ok-soft); color: var(--ok); }
  html[data-theme="dark"] .status-cancelled { background: var(--danger-soft); color: var(--danger); }

  /* ปุ่ม/ชิปที่ "เลือกอยู่" ใช้พื้น --ink (ในโหมดมืดเป็นสีครีม) → ตัวหนังสือเข้ม */
  html[data-theme="dark"] :is(.segmented button.on, .chip.on, .posb-cats button.on, .paysheet-chips button.on, .brand-preview-pill) {
    background: #ECE7E1; border-color: #ECE7E1; color: #1A1816;
  }
  html[data-theme="dark"] .segmented { border-color: var(--line); }
  :where(html[data-theme="dark"]) .segmented button { background: var(--surface); color: var(--ink); }
  html[data-theme="dark"] .segmented button + button { border-left-color: var(--line); }

  /* ตาราง */
  html[data-theme="dark"] .table td { border-bottom-color: #2A2724; }
  html[data-theme="dark"] .table tr.clickable:hover td, html[data-theme="dark"] .table tr.open td, html[data-theme="dark"] .table tr.detail td { background: var(--brand-tint); }
  html[data-theme="dark"] .table tr.low td { background: #2A2416; }
  html[data-theme="dark"] .table tr.voided td { text-decoration-color: rgba(255,143,132,.55); }
  @media (max-width: 760px) {
    html[data-theme="dark"] .table.cards tr { background: var(--surface); border-color: var(--line); }
    html[data-theme="dark"] .table.cards tr.low { background: #2A2416; border-color: #6B5626; }
    html[data-theme="dark"] .table-wrap:has(> .table.cards) { box-shadow: none; }
  }

  /* ป๊อปอัป / ลิ้นชัก / พื้นหลังมืด */
  html[data-theme="dark"] :is(.modal-backdrop, .mdl-scrim, .drw-scrim, .pay-scrim, .sheet-scrim) { background: var(--scrim); }
  html[data-theme="dark"] .mdl-wrap:has(.rcv-draft) ~ .mdl-scrim { background: rgba(0,0,0,.45); }
  html[data-theme="dark"] .mdl { background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px #2E2B27; }
  html[data-theme="dark"] .mdl-body .actions { background: var(--surface); }
  html[data-theme="dark"] .drw { background: var(--surface); box-shadow: -16px 0 48px rgba(0,0,0,.55), -1px 0 0 #2E2B27; }
  html[data-theme="dark"] .drw-foot { background: var(--surface); }
  html[data-theme="dark"] .reconnect { background: rgba(0,0,0,.65); }
  html[data-theme="dark"] .reconnect-card { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
  html[data-theme="dark"] .qr-full { background: rgba(0,0,0,.88); }
  /* กล่อง QR ต้องขาวเสมอ (สแกนง่าย) → ตัวหนังสือเข้มเฉพาะในกล่อง */
  html[data-theme="dark"] .qr-full-card { --ink: #1F1A17; --muted: #6B5F57; background: #fff; color: #1F1A17; }
  html[data-theme="dark"] .qr-mini { background: var(--chip); }

  /* ---------- หน้าขาย (POS) ---------- */
  html[data-theme="dark"] .tile-price, html[data-theme="dark"] .tile-units button { color: var(--brand-text); }
  html[data-theme="dark"] .tile-units button:hover { color: #fff; }
  html[data-theme="dark"] .posb-search { background: var(--surface); color: var(--muted); }
  html[data-theme="dark"] .posb-search input { color: var(--ink); }
  :where(html[data-theme="dark"]) .posb-cats button { background: var(--surface); border-color: var(--line); color: var(--ink); }
  html[data-theme="dark"] .posb-tile { box-shadow: 0 0 0 1px #2A2724, var(--shadow); }
  html[data-theme="dark"] .posb-badge:not(.pospromo-badge) { background: rgba(21,20,18,.86); color: #ECE7E1; }
  :where(html[data-theme="dark"]) .posb-unit { background: var(--chip); color: var(--ink); }
  :where(html[data-theme="dark"]) .posb-unit:hover { background: var(--brand-soft); }
  html[data-theme="dark"] .posb-unit.on { background: var(--brand); color: #fff; }
  html[data-theme="dark"] .posb-cart { box-shadow: 0 0 0 1px #2A2724, var(--shadow); }
  :where(html[data-theme="dark"]) .posb-cart .stepper button, :where(html[data-theme="dark"]) .stepper button { background: var(--raised); color: var(--ink); border-color: var(--line); }
  :where(html[data-theme="dark"]) .quick-cash button { background: var(--chip); color: var(--ink); }
  html[data-theme="dark"] .posb-pay-btn, html[data-theme="dark"] .paysheet-confirm { background: #ECE7E1; color: #1A1816; }
  html[data-theme="dark"] .posb-pay-btn strong { color: #fff; }
  html[data-theme="dark"] .paysheet-check { color: #fff; }
  html[data-theme="dark"] .posb-bar { background: #2F2C29; box-shadow: 0 0 0 1px #45403A, var(--shadow-lg); }
  html[data-theme="dark"] .posb-bar-held .held-badge { border-color: #2F2C29; }
  html[data-theme="dark"] .held-pill-count { color: var(--brand); }
  html[data-theme="dark"] .held-list-btn .held-pill-count { color: #fff; }
  @media (max-width: 1024px) {
    html[data-theme="dark"] .posb-cart, html[data-theme="dark"] .receipt { box-shadow: 0 -10px 34px rgba(0,0,0,.55), 0 -1px 0 #3A3632; }
    html[data-theme="dark"] .heldb-float .heldb-chip { box-shadow: 0 4px 14px rgba(0,0,0,.45); }
    html[data-theme="dark"] .posl-foot { box-shadow: 0 -6px 14px rgba(0,0,0,.3); }
  }
  html[data-theme="dark"] button.icon-btn.sheet-close { background: var(--chip); border: 1px solid var(--line); color: var(--ink); }
  html[data-theme="dark"] .cart-bar { box-shadow: 0 8px 24px rgba(0,0,0,.5); }

  /* แผ่นชำระเงิน */
  html[data-theme="dark"] .paysheet { background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px #2E2B27; }
  :where(html[data-theme="dark"]) .paysheet-methods button { background: var(--raised); color: var(--ink); border-color: var(--line); }
  html[data-theme="dark"] .paysheet-methods button.on { background: var(--brand-tint); color: var(--brand-text); border-color: var(--brand); }
  :where(html[data-theme="dark"]) .paysheet-chips button { background: var(--raised); color: var(--ink); border-color: var(--line); }
  :where(html[data-theme="dark"]) .paysheet-notes button { background: var(--chip); color: var(--ink); }
  html[data-theme="dark"] .paysheet-notes button.on { background: var(--brand); color: #fff; }
  html[data-theme="dark"] .paysheet-amount { background: var(--field); border-color: var(--brand-line); }
  html[data-theme="dark"] .paysheet-methods button.on { border-color: var(--brand-line); }
  html[data-theme="dark"] :is(.posa-chip.on, .heldb-chip.on, .hpk-card.on, .rcv-pk-row.on, .posa-cust-row.on, .order-card.open) { border-color: var(--brand-line); }
  html[data-theme="dark"] .promo-type.on { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-line) inset; }
  html[data-theme="dark"] :is(.paysheet-notes button.on, .posb-unit.on, .tile-units button:hover) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  html[data-theme="dark"] :is(.field input:focus, .field select:focus, .field textarea:focus, .search:focus) { outline-color: var(--brand-line); }

  /* พักบิล / ลูกค้า / โค้ด */
  html[data-theme="dark"] .heldb-plus, html[data-theme="dark"] .promo-picked { color: var(--brand-text); }
  html[data-theme="dark"] .heldb-reserved { background: var(--warn-soft); color: var(--warn-text); }
  html[data-theme="dark"] .heldb-shift-warn { background: var(--warn-soft); color: var(--warn-text); }
  html[data-theme="dark"] .hpk-card.old .hpk-age { background: var(--warn-soft); color: var(--warn-text); }
  html[data-theme="dark"] .hpk-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.4); }
  html[data-theme="dark"] .held-icon-btn.danger:hover { border-color: #7A3A33; color: var(--danger); background: var(--danger-soft); }
  html[data-theme="dark"] .pospromo-chip button { background: rgba(255,255,255,.08); }
  html[data-theme="dark"] .unit-remove:hover { background: var(--danger-soft); color: var(--danger); }

  /* ---------- ขาย / รับสินค้า / โปรโมชัน / แบนเนอร์ ---------- */
  html[data-theme="dark"] .sla-chip.refund { color: var(--warn-text); }
  html[data-theme="dark"] :is(.sla-chip.vat, .sla-chip.inv) { background: #1E2340; color: #A9B4F5; }
  html[data-theme="dark"] .promo-code-tag { color: var(--brand-text); }
  html[data-theme="dark"] :is(.promo-st-scheduled, .bn-st-scheduled) { color: var(--warn-text); }
  html[data-theme="dark"] .upload:hover { color: var(--brand-text); }
  html[data-theme="dark"] .bn-slide-btn { color: #1F1A17; }
  html[data-theme="dark"] .swatch { border-color: var(--surface); }
  html[data-theme="dark"] .account-card img, html[data-theme="dark"] .qr-empty { border-color: var(--line); }
  html[data-theme="dark"] .qr-empty { background: var(--chip); }
  html[data-theme="dark"] .auth-shop, html[data-theme="dark"] .amount-in { color: var(--brand-text); }

  /* ---------- แต้มสะสม (loyalty.css) / ป้ายบาร์โค้ด (labels.css) ---------- */
  /* ตัวอย่างฉลาก/แผ่น A4 เป็น "กระดาษ" ขาวดำเสมอ (ตรงกับที่พิมพ์ออกมา) เปลี่ยนแค่เงาให้เห็นบนพื้นมืด */
  html[data-theme="dark"] .lbl-missing { color: var(--warn-text); }
  html[data-theme="dark"] .lblp-area.is-roll .lblp-label { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.5); }
  html[data-theme="dark"] .lblp-sheet { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.55); }
  html[data-theme="dark"] .lbl-preview-box { background: #121110; }
}