/* ══════════════════════════════════════════
   โครงหน้าจอ เฟส 2 — เมนูซ้าย (คอม) · เมนูล่าง (มือถือ)
   โหลดหลัง app.css จึงเขียนทับกฎเดิมได้
   ══════════════════════════════════════════ */

:root{ --side-w:238px; --nav-h:60px; }

/* ── หัวหน้า: ชื่อหน้าอยู่ซ้าย ปุ่มทดสอบ/กระดิ่งอยู่ขวา ── */
header{display:flex;align-items:flex-start;gap:10px}
.hd-left{flex:1;min-width:0}
.hd-act{display:flex;gap:7px;flex-shrink:0;padding-top:4px}

/* ── เมนูข้าง ── */
.side{background:var(--card);display:flex;flex-direction:column;gap:14px;padding:16px 12px}
.side-brand{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;padding:2px 12px 0}
.side-brand span{display:block;font-family:'IBM Plex Sans Thai',system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:3px}
.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav button,.side-sys button,.side-user #logout{display:block;width:100%;text-align:left;background:none;border:none;border-radius:8px;font-family:inherit;cursor:pointer}
.side-nav button{padding:11px 12px;font-size:14px;font-weight:600;color:var(--ink)}
.side-nav button.cur{background:var(--blue-soft);color:var(--blue)}
.side-nav button:active{background:var(--blue);color:#fff}
.side-cap{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px;margin-bottom:5px}
.side-sys{border-top:1px solid var(--line);padding-top:13px;display:flex;flex-direction:column;gap:1px}
.side-sys button{padding:9px 12px;font-size:13px;font-weight:500;color:var(--muted)}
.side-sys button:active{background:var(--paper)}
.side-user{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.side-user .who{font-size:14px;font-weight:600;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .who span{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:1px}
.side-user #logout{padding:10px 12px;margin-top:7px;font-size:13px;font-weight:600;color:var(--red)}
.side-user #logout:active{background:var(--paper)}

/* ── หน้าที่เคยเป็นกล่องเปิดทับ ── */
.page-view{display:none}
.page-view.show{display:block}
.page-view .ov-bar{position:static;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;
                    max-width:820px;margin:0 auto 12px}
.page-view .ov-bar span{color:var(--ink);font-size:13px}
.page-view .ov-close{display:none}
.page-view .ov-body{padding:0;max-width:820px!important;margin:0 auto}

/* ── ระยะล่างของหน้า (แถบยอดรวมโผล่เฉพาะหน้าใบเสนอราคา) ── */
body{padding-bottom:26px}
body.quote-on{padding-bottom:160px}

/* ══════════ จอคอม ══════════ */
@media (min-width:900px){
  body:has(#app:not(.hide)){padding-left:var(--side-w)}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);overflow:auto;border-right:1px solid var(--line);z-index:60}
  #bnav,#sideBd{display:none}
  .totalbar{left:var(--side-w)}
  .wrap:has(.page-view.show){max-width:1120px}
  header .eyebrow{display:none}
}

/* ══════════ มือถือและแท็บเล็ต ══════════ */
@media (max-width:899px){
  .side{position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);overflow:auto;z-index:130;
        transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 30px rgba(16,21,28,.22)}
  .side.show{transform:none}
  #sideBd{position:fixed;inset:0;background:rgba(16,21,28,.42);z-index:120;display:none}
  body:has(.side.show) #sideBd{display:block}

  #bnav{position:fixed;left:0;right:0;bottom:0;min-height:var(--nav-h);background:var(--card);border-top:1px solid var(--line);
        display:flex;z-index:70;padding-bottom:env(safe-area-inset-bottom,0px)}
  #bnavList{display:flex;flex:1}
  #bnav button{flex:1;background:none;border:none;font-family:inherit;font-size:10.5px;font-weight:600;color:var(--muted);
               display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;cursor:pointer;
               white-space:nowrap;overflow:hidden}
  #bnav button i{font-style:normal;font-size:17px;line-height:1}
  #bnav button.cur{color:var(--blue)}
  #btnMore{max-width:78px}

  .totalbar{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(26px + var(--nav-h))}
  body.quote-on{padding-bottom:calc(150px + var(--nav-h))}
}

/* ── หน้าตั้งค่าระบบ ── */
.side-set{border-top:1px solid var(--line);padding-top:12px}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.card-title + .set-row{border-top:none;padding-top:0}
.set-txt{flex:1;min-width:0}
.set-txt b{display:block;font-size:14px}
.set-txt span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.set-btn{flex-shrink:0;background:var(--blue-soft);color:var(--blue);border:none;border-radius:8px;padding:9px 13px;
         font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;max-width:48%;white-space:normal;text-align:center}
.set-btn.danger{background:#FBEAEA;color:var(--red)}
.set-btn:active{filter:brightness(.92)}
.set-row:has(> .set-btn[hidden]){display:none}
.set-group:not(:has(.set-btn:not([hidden]))){display:none}
/* หน้าย่อยของตั้งค่า มีปุ่มกลับ */
.page-view.sub .ov-close{display:inline-block}

/* ── กล่องยืนยัน / กล่องแจ้ง (แทน confirm/alert) ── */
.dlg-bd{position:fixed;inset:0;background:rgba(16,21,28,.5);z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
.dlg-bd.show{display:flex}
.dlg{background:var(--card);border-radius:12px;width:100%;max-width:420px;padding:18px 18px 14px;box-shadow:0 12px 40px rgba(0,0,0,.28);
     max-height:86vh;display:flex;flex-direction:column}
.dlg-head{display:flex;gap:9px;align-items:flex-start}
.dlg-ic:empty{display:none}
.dlg-ic{font-size:18px;line-height:1.35}
.dlg-title{font-size:15.5px;line-height:1.45}
.dlg-msg{font-size:14px;color:var(--ink);white-space:pre-line;line-height:1.6;margin-top:8px;overflow:auto;word-break:break-word}
.dlg.t-err .dlg-title{color:var(--red)}
.dlg.t-ok  .dlg-title{color:var(--green)}
.dlg-act{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.dlg-act button{border:none;border-radius:8px;padding:11px 16px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;min-width:92px}
.dlg-no{background:var(--paper);color:var(--ink)}
.dlg-ok{background:var(--blue);color:#fff}
.dlg-ok.danger{background:var(--red)}

/* ── toast ── */
#toasts{position:fixed;top:14px;right:14px;z-index:310;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:#fff;border-radius:9px;padding:11px 15px;font-size:13.5px;font-weight:500;line-height:1.5;
       white-space:pre-line;max-width:360px;box-shadow:0 6px 22px rgba(0,0,0,.22);border-left:4px solid var(--green);
       opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;cursor:pointer}
.toast.show{opacity:1;transform:none}
.toast.t-warn{border-left-color:#E0A21A}
.toast.t-err{border-left-color:#E0484F}
.toast.t-info{border-left-color:#5B9BD8}
@media (max-width:899px){
  #toasts{left:12px;right:12px;align-items:stretch}
  .toast{max-width:none}
}

@media print{
  .side,#bnav,#sideBd,.dlg-bd,#toasts{display:none!important}
  body{padding:0!important}
}

/* ═══ รอบ 2C · ความเคลื่อนไหวล่าสุด ═══ */
.act-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line);margin-left:7px;vertical-align:middle;position:relative;top:-1px}
.act-live.on{background:var(--green);box-shadow:0 0 0 3px rgba(27,112,64,.15)}
.act-li{align-items:flex-start;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:7px}
.act-li:last-child{padding-bottom:7px}
.act-li .d-li-t{font-size:12px;line-height:1.35;padding-top:1px}
.act-li .d-li-t small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.act-m{flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.act-m b{font-weight:700}
.act-new{animation:actIn 2.6s ease-out both}
@keyframes actIn{
  0%  {opacity:0;transform:translateY(-8px);background:var(--amber-soft)}
  12% {opacity:1;transform:none;background:var(--amber-soft)}
  65% {background:var(--amber-soft)}
  100%{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .act-new{animation-name:actHl}
  @keyframes actHl{0%,65%{background:var(--amber-soft)}100%{background:transparent}}
}