/* ===== Mobile / PWA shared styles ===== */
/* bottom tab bar — โชว์เฉพาะมือถือ */
.tabbar { display: none; }

@media (max-width: 720px) {
  /* ซ่อนเมนูบนสุด เหลือแค่แบรนด์ + user */
  .nav-links { display: none !important; }
  .navbar { padding: 0 14px !important; }
  .navbar-user span { display: none; }          /* ซ่อนชื่อยาวๆ */
  .navbar-brand { font-size: 16px !important; }

  /* ทุก grid → คอลัมน์เดียว */
  .grid { grid-template-columns: 1fr !important; }
  .container { padding: 0 12px !important; margin-top: 14px !important; }
  .right { position: static !important; }        /* ปลด sticky บนมือถือ */

  /* เผื่อที่ให้ bottom tab ไม่ทับเนื้อหา */
  body { padding-bottom: 76px !important; }

  /* แตะง่าย: กันซูมตอนโฟกัส (iOS) + เป้าแตะใหญ่ขึ้น */
  input, select, textarea { font-size: 16px !important; padding: 12px 14px !important; }
  button, .btn, .btn-post, .btn-go, .btn-refresh, .toggle, .selbtn, .chip, .seg button { min-height: 44px; }
  .page-item, .ppost, .row, .lib-row, .pp-bar, .camp-head, .set-row { min-height: 48px; }

  /* การ์ด/หัวข้อ พอดีจอ */
  .card { padding: 16px !important; }
  .page-title { font-size: 20px !important; }

  /* bottom tab bar */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: #fff; border-top: 1px solid #e3e8ef;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 2px 6px; text-decoration: none;
    color: #8a93a2; font-size: 10px; font-weight: 600;
  }
  .tabbar a .ic { font-size: 19px; line-height: 1; }
  .tabbar a.active { color: #1877f2; }
}

/* desktop: ถ้าหน้าจอใหญ่ ไม่ต้องมี bottom tab อยู่แล้ว (display:none ด้านบน) */