/* ============================================================
   mobile.css — ทำให้ระบบขายฝากใช้งานบนมือถือเหมือนแอป
   โหลดต่อจาก style.css (ทับค่าเดิมเฉพาะจอเล็ก)
   ============================================================ */

:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:58px;
}

/* ให้ทั้งแอปรู้สึกเป็น native ขึ้น: ไม่ให้ลากเลือกข้อความมั่ว, ไม่มีไฮไลต์ฟ้าเวลาแตะ */
body{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:contain;
}
input,textarea,select,[contenteditable]{-webkit-user-select:auto;user-select:auto}

/* ปุ่ม/ลิงก์ตอบสนองการแตะ */
.btn{transition:transform .08s ease,background .15s ease;touch-action:manipulation}
.btn:active{transform:scale(.97)}

/* ---------- แถบเมนูล่าง (bottom tab bar) — เห็นเฉพาะมือถือ ---------- */
.tabbar{display:none}

@media (max-width:820px){
  .tabbar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line);
    padding-bottom:var(--safe-b);
    box-shadow:0 -2px 14px rgba(15,23,42,.06);
  }
  .tabbar a,.tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    height:var(--tabbar-h);
    background:none;border:none;font-family:inherit;cursor:pointer;
    color:var(--muted);font-size:11px;font-weight:600;text-decoration:none;
    padding:0;-webkit-tap-highlight-color:transparent;
  }
  .tabbar .ico{font-size:20px;line-height:1}
  .tabbar a:active,.tabbar button:active{background:#f1f5f9}
  .tabbar a.active{color:var(--brand-d)}
  .tabbar a.active .ico{transform:translateY(-1px)}
  .tabbar a.hilite .ico{
    background:var(--brand);color:#fff;border-radius:50%;
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    font-size:19px;margin-top:-8px;box-shadow:0 4px 10px rgba(13,148,136,.4)
  }
  .tabbar a.hilite{color:var(--brand-d)}

  /* เว้นที่ให้แถบล่าง ไม่ให้ทับเนื้อหา */
  .content{padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px)}

  /* ---------- topbar ---------- */
  .topbar{
    padding:10px calc(12px + var(--safe-r)) 10px calc(10px + var(--safe-l));
    padding-top:calc(10px + var(--safe-t));
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    font-weight:700;font-size:15px;
  }
  /* บนมือถือเหลือแค่ชื่อผู้ใช้ — ปุ่มออกจากระบบย้ายไปอยู่ในเมนูสไลด์ */
  .topbar .who .role,.topbar .who .sep,.topbar .who a{display:none}
  .topbar .who .name{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  .menu-toggle{font-size:22px;padding:4px 8px;border-radius:8px}
  .menu-toggle:active{background:#f1f5f9}

  /* ---------- drawer ---------- */
  .sidebar{padding-top:calc(18px + var(--safe-t));padding-bottom:calc(18px + var(--safe-b))}
  .sidebar a{padding:13px 20px;font-size:15px}

  /* ---------- ฟอร์ม: ตัวอักษร 16px กัน iOS ซูมเองตอนโฟกัส ---------- */
  input,select,textarea{font-size:16px;padding:12px 12px;border-radius:10px}
  label{font-size:14px}
  .btn{padding:13px 18px;font-size:15px;min-height:46px;line-height:1.3}
  .btn.sm{padding:9px 14px;font-size:14px;min-height:40px}

  /* ปุ่มในแถบเครื่องมือเรียงเป็นแถวเลื่อนแนวนอนแทนการล้น */
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar > div{display:flex;gap:8px;flex-wrap:wrap}
  .toolbar > div > .btn{flex:1 1 auto;text-align:center}
  .toolbar input[type=text],.toolbar input[type=search]{max-width:none !important;width:100%}

  h1{font-size:20px;margin-bottom:14px}
  .card{padding:16px;border-radius:14px}

  /* ตัวเลขสรุป: 2 ช่องต่อแถว ให้เห็นภาพรวมได้ในหน้าจอเดียว
     ส่วนช่องสีเขียว (ตัวเลขสำคัญ) กินเต็มแถว */
  .cards{grid-template-columns:1fr 1fr !important;gap:10px;margin-bottom:16px}
  .stat{border-radius:14px;padding:13px 14px}
  .stat .label{font-size:12px;line-height:1.35}
  .stat .num{font-size:19px;margin-top:4px}
  .stat.brand{grid-column:1/-1}
  .stat.brand .num{font-size:26px}
  .stat .btn{margin-top:2px}
}

/* ---------- ตาราง → การ์ด (จอ ≤ 640px) ----------
   สคริปต์ app.js จะใส่ class .as-cards + data-label ให้อัตโนมัติ */
@media (max-width:640px){
  .tbl-wrap{border:none;background:none;border-radius:0;overflow:visible}
  .card{overflow:visible}

  table.as-cards{min-width:0;width:100%;background:none;border-collapse:separate;border-spacing:0}
  table.as-cards thead,table.as-cards tr.head-row{display:none}
  table.as-cards tbody,table.as-cards tr,table.as-cards td{display:block;width:auto}

  table.as-cards tr{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:6px 14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.05)
  }
  table.as-cards tr:hover td{background:none}

  table.as-cards td{
    border:none;border-bottom:1px dashed #eef2f7;
    padding:9px 0;font-size:14px;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    text-align:right;
  }
  table.as-cards td:last-child{border-bottom:none}
  table.as-cards td::before{
    content:attr(data-label);
    flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:600;
    text-align:left;white-space:nowrap;
  }
  table.as-cards td[data-label=""]::before{display:none}

  /* แถวแรกของการ์ด (มักเป็น # หรือชื่อ) ทำให้เด่น */
  table.as-cards td.cell-0{font-weight:700;font-size:15px}

  /* ช่องที่มีปุ่ม: ให้ปุ่มเต็มความกว้าง เรียงแถวเดียว */
  table.as-cards td.cell-actions{
    display:flex;gap:8px;padding:12px 0 10px;justify-content:stretch;
  }
  table.as-cards td.cell-actions::before{display:none}
  table.as-cards td.cell-actions .btn{flex:1;text-align:center}

  /* แถว colspan: "ไม่มีข้อมูล" = กลาง / แถวรวมยอด = ชิดขวา */
  table.as-cards td.cell-full{display:block;color:var(--muted)}
  table.as-cards td.cell-full::before{display:none}
  table.as-cards tr.row-empty td{text-align:center}
  table.as-cards tr.row-total{display:flex;justify-content:space-between;align-items:baseline;background:#f8fafc}
  table.as-cards tr.row-total td{color:var(--ink);padding:6px 0}
  table.as-cards tr.row-total td:empty{display:none}

  /* ตารางที่ไม่ได้แปลงเป็นการ์ด ยังเลื่อนแนวนอนได้ */
  table:not(.as-cards){min-width:560px}
  .card > table:not(.as-cards),.tbl-wrap > table:not(.as-cards){display:table}
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}
}

/* ---------- ฟอร์ม: บังคับช่องกรอกเต็มความกว้าง (ทับ style="width:200px" ที่ฝังในหน้า) ---------- */
@media (max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select,textarea{width:100% !important;max-width:100% !important}
  .form-grid,.review-grid{grid-template-columns:1fr !important;gap:12px}
  form > div[style*="grid"]{grid-template-columns:1fr !important}
}

/* ---------- ตัวช่วยขั้นตอน (wizard) ในหน้าเปิดเคสใหม่ ---------- */
@media (max-width:640px){
  .stepper{position:sticky;top:52px;background:var(--soft);z-index:15;margin-bottom:16px}
  .stepper .s{font-size:12px;padding:10px 2px}
  .stepper .s:not(.active) span:not(.n){display:none}   /* โชว์ชื่อเฉพาะขั้นที่ทำอยู่ */
  .stepper .s .n{width:22px;height:22px;line-height:22px;margin-right:4px}
  .wizard-nav{
    position:sticky;bottom:calc(var(--tabbar-h) + var(--safe-b));
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);margin:18px -16px -16px;padding:12px 16px;
    gap:10px;z-index:20
  }
  .wizard-nav .btn{flex:1;text-align:center}
  .wizard-nav span:empty{display:none}
  /* รูปโฉนด/ไฟล์แนบ: 2 คอลัมน์บนมือถือ */
  .card div[style*="minmax(170px"]{grid-template-columns:repeat(2,1fr) !important}
}

/* ---------- แถบปุ่มลอยด้านล่างของฟอร์ม (ใส่ class="actionbar" ได้) ---------- */
@media (max-width:820px){
  .actionbar{
    position:sticky;bottom:calc(var(--tabbar-h) + var(--safe-b));
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    margin:16px -16px 0;padding:12px 16px;
    display:flex;gap:10px;z-index:20;
  }
  .actionbar .btn{flex:1;text-align:center}
}

/* ---------- หน้า login ---------- */
@media (max-width:820px){
  .login-wrap{padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b))}
  .login-box{width:100%;max-width:400px;padding:28px 22px;border-radius:18px}
}

/* ---------- แถบชวนติดตั้งแอป ---------- */
.install-bar{
  display:none;position:fixed;z-index:60;
  left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 12px);
  background:var(--ink);color:#fff;border-radius:14px;
  padding:12px 14px;align-items:center;gap:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.35);font-size:14px;
}
.install-bar.show{display:flex}
.install-bar .txt{flex:1;line-height:1.35}
.install-bar button{
  border:none;border-radius:9px;padding:9px 14px;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;background:var(--brand);color:#fff
}
.install-bar .close{background:transparent;color:#94a3b8;padding:9px 6px;font-weight:400}
@media (min-width:821px){.install-bar{bottom:calc(var(--safe-b) + 16px);left:auto;right:16px;max-width:380px}}

/* ---------- โหมดแอป (เปิดจากไอคอนหน้าจอโฮม) ---------- */
@media (display-mode:standalone){
  .install-bar{display:none !important}
  body{overscroll-behavior:none}
}

/* ---------- แจ้งเตือนออฟไลน์ ---------- */
.offline-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:70;
  background:var(--warn);color:#fff;text-align:center;
  font-size:13px;font-weight:600;padding:calc(6px + var(--safe-t)) 8px 6px;
}
body.is-offline .offline-bar{display:block}

/* ---------- ไม่พิมพ์ส่วนของแอปตอนสั่งพิมพ์เอกสาร ---------- */
@media print{
  .tabbar,.install-bar,.offline-bar,.sidebar,.topbar,.overlay{display:none !important}
  .content{padding:0}
}