/* ──────────────────────────────────────────────────────────────────────────
   DEKTHAI — กล่องยืนยัน/แจ้งเตือน/ป้อนข้อความ + toast ตามธีมเว็บ (ใช้ทั้งเว็บ)
   คู่กับ public/assets/js/dt-dialog.js (window.DTUI) · ห้ามใช้ alert/confirm/prompt ของเบราว์เซอร์
   สี = design system (ink #0A0A0B · lime #D4FF3E · good #10B981 · warn #F59E0B · danger #EF4444)
   z-index สูงกว่า sheet/modal ทุกตัวในระบบ (สูงสุดเดิม 99999)
   ────────────────────────────────────────────────────────────────────────── */
.dtui-ov{
  --dtui-bg:#fff;--dtui-ink:#0A0A0B;--dtui-t2:#52576A;--dtui-t3:#8B92A0;--dtui-line:#E8E9EC;--dtui-line2:#D5D8DD;
  --dtui-mute:#F4F5F7;--dtui-lime:#D4FF3E;--dtui-ok-bg:#0A0A0B;--dtui-ok-fg:#fff;
  position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;background:rgba(10,10,11,.48);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:Prompt,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  animation:dtuiFade .16s ease-out both
}
.dtui-ov *,.dtui-ov *::before,.dtui-ov *::after{box-sizing:border-box}
.dtui-box{
  position:relative;width:100%;max-width:420px;background:var(--dtui-bg);color:var(--dtui-ink);
  border:1px solid var(--dtui-line);border-radius:20px;padding:24px 22px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 80px -20px rgba(10,10,11,.45),0 8px 24px -12px rgba(10,10,11,.25);
  max-height:min(calc(100vh - 40px),calc(var(--dtui-vvh,100vh) - 40px));overflow:auto;overscroll-behavior:contain;
  animation:dtuiIn .22s cubic-bezier(.2,.8,.2,1) both;text-align:left
}
.dtui-box:focus{outline:none}
.dtui-ov.is-out{animation:dtuiFadeOut .14s ease-in both}
.dtui-ov.is-out .dtui-box{animation:dtuiOut .14s ease-in both}

.dtui-head{display:flex;align-items:flex-start;gap:14px}
.dtui-ic{flex:none;width:48px;height:48px;border-radius:100px;display:grid;place-items:center;font-size:26px;
  background:var(--dtui-ink);color:var(--dtui-lime);box-shadow:0 0 0 6px rgba(212,255,62,.18)}
.dtui-box.t-danger .dtui-ic{background:#FDECEC;color:#EF4444;box-shadow:0 0 0 6px rgba(239,68,68,.10)}
.dtui-box.t-good .dtui-ic{background:#E7F8F1;color:#10B981;box-shadow:0 0 0 6px rgba(16,185,129,.10)}
.dtui-box.t-warn .dtui-ic{background:#FEF3E2;color:#F59E0B;box-shadow:0 0 0 6px rgba(245,158,11,.12)}
.dtui-tx{min-width:0;flex:1;padding-top:2px}
.dtui-title{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--dtui-ink);overflow-wrap:anywhere}
.dtui-msg{margin:6px 0 0;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--dtui-t2);white-space:pre-line;overflow-wrap:anywhere}
.dtui-msg:empty{display:none}

.dtui-field{margin-top:16px}
.dtui-lb{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--dtui-t2);margin:0 0 6px}
.dtui-lb i{font-size:16px;color:var(--dtui-ink)}
.dtui-ov .dtui-in{display:block;width:100%;margin:0;padding:12px 14px;border:1px solid var(--dtui-line2);border-radius:12px;
  font-family:inherit;font-size:16px;line-height:1.4;color:var(--dtui-ink);background:var(--dtui-bg);outline:none;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.dtui-ov textarea.dtui-in{min-height:96px;resize:vertical}
.dtui-ov .dtui-in:focus{border-color:var(--dtui-ink);box-shadow:0 0 0 3px rgba(212,255,62,.45)}
.dtui-ov .dtui-in.is-match{border-color:#10B981}
.dtui-hint{margin:6px 0 0;font-size:12px;color:var(--dtui-t3)}
.dtui-hint b{color:var(--dtui-ink);font-weight:700}

.dtui-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.dtui-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 20px;border-radius:100px;
  border:1px solid transparent;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:transform .12s,background-color .15s,box-shadow .15s,opacity .15s;white-space:nowrap}
.dtui-btn i{font-size:19px;flex:none}
.dtui-btn:active{transform:scale(.97)}
.dtui-no{background:transparent;color:var(--dtui-ink);border-color:var(--dtui-line2)}
.dtui-no:hover{background:var(--dtui-mute)}
.dtui-ok{background:var(--dtui-ok-bg);color:var(--dtui-ok-fg)}
.dtui-ok:hover{box-shadow:0 8px 20px -8px rgba(10,10,11,.55)}
.dtui-box.t-danger .dtui-ok{background:#EF4444;color:#fff}
.dtui-box.t-danger .dtui-ok:hover{box-shadow:0 8px 20px -8px rgba(239,68,68,.6)}
.dtui-ok:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.dtui-btn:focus-visible{outline:2px solid var(--dtui-ink);outline-offset:2px;box-shadow:0 0 0 5px var(--dtui-lime)}
.dtui-ov .dtui-in:focus-visible{outline:none}

/* มือถือ = bottom sheet · ดันขึ้นเหนือคีย์บอร์ดด้วย --dtui-kb (visualViewport) */
@media (max-width:560px){
  .dtui-ov{align-items:flex-end;padding:10px 10px calc(10px + var(--dtui-kb,0px) + env(safe-area-inset-bottom,0px))}
  .dtui-box{max-width:none;border-radius:22px;padding:26px 18px 16px;
    max-height:calc(var(--dtui-vvh,100vh) - 20px);animation-name:dtuiUp}
  .dtui-box::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--dtui-line2)}
  .dtui-ov.is-out .dtui-box{animation-name:dtuiDown}
  .dtui-ic{width:44px;height:44px;font-size:24px}
  .dtui-title{font-size:17px}
  .dtui-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dtui-btns.is-one{grid-template-columns:minmax(0,1fr)}
  .dtui-btn{min-height:48px;padding:0 12px;white-space:normal;text-align:center}
}

/* ── Toast ── */
.dtui-toasts{position:fixed;top:16px;right:16px;z-index:2147483001;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;font-family:Prompt,system-ui,sans-serif;max-width:calc(100vw - 32px)}
.dtui-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:240px;max-width:380px;padding:11px 10px 11px 12px;
  border-radius:16px;background:#0A0A0B;color:#fff;box-shadow:0 18px 40px -16px rgba(10,10,11,.6);border:1px solid rgba(255,255,255,.08);
  font-size:14px;line-height:1.5;animation:dtuiToastIn .22s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
.dtui-toast.is-out{animation:dtuiToastOut .18s ease-in both}
.dtui-toast-ic{flex:none;width:26px;height:26px;border-radius:100px;display:grid;place-items:center;font-size:17px;background:#D4FF3E;color:#0A0A0B}
.dtui-toast.t-good .dtui-toast-ic{background:#10B981;color:#fff}
.dtui-toast.t-warn .dtui-toast-ic{background:#F59E0B;color:#0A0A0B}
.dtui-toast.t-danger .dtui-toast-ic{background:#EF4444;color:#fff}
.dtui-toast.t-info .dtui-toast-ic{background:#3B82F6;color:#fff}
.dtui-toast-tx{flex:1;min-width:0;white-space:pre-line;overflow-wrap:anywhere}
.dtui-toast-x{flex:none;width:28px;height:28px;border:0;border-radius:100px;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;display:grid;place-items:center;font-size:18px}
.dtui-toast-x:hover{background:rgba(255,255,255,.1);color:#fff}
.dtui-toast-x:focus-visible{outline:2px solid #D4FF3E;outline-offset:1px}
.dtui-toast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#D4FF3E;transform-origin:left;animation:dtuiBar linear both}
@media (max-width:560px){
  .dtui-toasts{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:12px;left:12px;align-items:stretch;max-width:none}
  .dtui-toast{max-width:none;min-width:0}
}

/* ── โหมดมืดของ POS (html[data-theme="dark"]) ── */
html[data-theme="dark"] .dtui-ov{--dtui-bg:#17171A;--dtui-ink:#F2F2F4;--dtui-t2:#B5BAC4;--dtui-t3:#8B92A0;--dtui-line:rgba(255,255,255,.10);
  --dtui-line2:rgba(255,255,255,.18);--dtui-mute:#26262B;--dtui-ok-bg:#D4FF3E;--dtui-ok-fg:#0A0A0B;background:rgba(0,0,0,.62);color-scheme:dark}
html[data-theme="dark"] .dtui-box{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 80px -20px rgba(0,0,0,.8)}
html[data-theme="dark"] .dtui-ic{background:#0A0A0B;color:#D4FF3E;box-shadow:0 0 0 1px rgba(212,255,62,.35),0 0 0 6px rgba(212,255,62,.10)}
html[data-theme="dark"] .dtui-box.t-danger .dtui-ic{background:rgba(239,68,68,.16);color:#F87171}
html[data-theme="dark"] .dtui-box.t-good .dtui-ic{background:rgba(16,185,129,.16);color:#34D399}
html[data-theme="dark"] .dtui-box.t-warn .dtui-ic{background:rgba(245,158,11,.16);color:#FBBF24}
html[data-theme="dark"] .dtui-lb i{color:#D4FF3E}
html[data-theme="dark"] .dtui-ov .dtui-in{background:#0E0E10}
html[data-theme="dark"] .dtui-ov .dtui-in:focus{border-color:#D4FF3E}
html[data-theme="dark"] .dtui-btn:focus-visible{outline-color:#D4FF3E;box-shadow:0 0 0 5px rgba(212,255,62,.35)}
html[data-theme="dark"] .dtui-toast{background:#1F1F24;border-color:rgba(255,255,255,.12)}

@keyframes dtuiFade{from{opacity:0}}
@keyframes dtuiFadeOut{to{opacity:0}}
@keyframes dtuiIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes dtuiOut{to{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes dtuiUp{from{opacity:.4;transform:translateY(40px)}}
@keyframes dtuiDown{to{opacity:0;transform:translateY(40px)}}
@keyframes dtuiToastIn{from{opacity:0;transform:translateY(-8px) scale(.97)}}
@keyframes dtuiToastOut{to{opacity:0;transform:translateX(16px)}}
@keyframes dtuiBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .dtui-ov,.dtui-box,.dtui-ov.is-out,.dtui-ov.is-out .dtui-box,.dtui-toast,.dtui-toast.is-out{animation:none!important}
  .dtui-toast-bar{display:none}
  .dtui-btn{transition:none}
}
@media print{.dtui-ov,.dtui-toasts{display:none!important}}