/* ===========================================================================
   native.css — โหมดมือถือแบบแอป (PWA) ของ Face in Time · โหลดต่อจาก ui.css
   ใช้กับหน้า AdminMobileView / PassView (page-modes.jsx) เท่านั้น — ใช้ตัวแปรสีจาก gov.css ทั้งสองธีม
   แนวคิด: หัวเรื่องใหญ่แบบ iOS · แถบล่างโปร่งเบลอ · การ์ดมุมมน 18px เส้นคั่นบาง · กดแล้วยุบ (press)
   · เปลี่ยนแท็บมีแอนิเมชัน · ดึงลงเพื่อรีเฟรช · โครงกระดูกตอนโหลด · safe-area ของ iPhone
   =========================================================================== */
.m-app{ display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; background:var(--bg); color:var(--ink); }
.m-app *{ -webkit-tap-highlight-color:transparent; }
.m-app button, .m-app a, .m-app label{ -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.m-app img{ -webkit-user-drag:none; }

/* ── หัวแอป: ชื่อหน่วยงานเล็ก + ชื่อหน้าใหญ่ + ปุ่มโปรไฟล์ ─────────────────── */
.m-top{
  flex:none; position:relative; z-index:5;
  padding:8px 18px 10px; padding-top:calc(env(safe-area-inset-top, 0px) + 18px);
  background:var(--navy); color:#fff;
}
:root[data-theme="dark"] .m-top{ background:var(--surface); border-bottom:1px solid var(--line); color:var(--ink); }
.m-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-top-logo{ width:16px; height:16px; object-fit:contain; vertical-align:-3px; margin-right:6px; opacity:1; }
.m-top-org{ font-size:12px; font-weight:600; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }
.m-top-title{ font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-top:2px; }
.m-top-sub{ font-size:12px; opacity:.72; margin-top:4px; font-variant-numeric:tabular-nums; }
.m-avatar{
  width:40px; height:40px; border-radius:50%; flex:none; border:0; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:14px;
  background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); transition:transform .12s;
}
:root[data-theme="dark"] .m-avatar{ background:var(--primary-soft); color:var(--primary-ink); border-color:var(--line-2); }
.m-avatar:active{ transform:scale(.92); }
.m-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ── เนื้อหา: เลื่อนได้ · เว้นที่ให้แถบล่าง ─────────────────────────────── */
.m-content{ flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; padding:14px 14px calc(16px + env(safe-area-inset-bottom)); position:relative; }
.m-page{ animation:mpage .2s ease-out both; }
@keyframes mpage{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* ดึงลงเพื่อรีเฟรช */
.m-ptr{ height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-size:12px; transition:height .18s; margin:-14px -14px 0; }
.m-ptr.show{ height:44px; }
.m-ptr i{ width:18px; height:18px; border:2px solid var(--line-2); border-top-color:var(--primary); border-radius:50%; display:inline-block; margin-right:8px; animation:mspin .8s linear infinite; }
@keyframes mspin{ to{ transform:rotate(360deg); } }

/* ── แถบเมนูล่าง: โปร่งเบลอ · ปุ่มที่เลือกเป็นเม็ดสี ───────────────────── */
.m-tabbar{
  flex:none; display:flex; align-items:stretch; padding:6px 8px; padding-bottom:max(8px, env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line); position:relative; z-index:5;
}
.m-tab{ flex:1; position:relative; border:0; background:transparent; font-family:inherit; cursor:pointer; color:var(--ink-5); padding:4px 2px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color .15s; }
.m-tab svg{ width:24px; height:24px; display:block; }
.m-tab-ic{ padding:4px 16px; border-radius:999px; line-height:0; transition:background .18s, transform .12s; }
.m-tab.on{ color:var(--primary-ink); }
.m-tab.on .m-tab-ic{ background:var(--primary-soft); }
.m-tab:active .m-tab-ic{ transform:scale(.9); }
.m-tab-l{ font-size:10.5px; font-weight:600; letter-spacing:.01em; }
.m-tab.on .m-tab-l{ font-weight:700; }
.m-badge{ position:absolute; top:0; left:50%; margin-left:8px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; line-height:18px; border:2px solid var(--surface); box-sizing:content-box; }

/* ── การ์ด/แถว/ปุ่ม สไตล์ native ───────────────────────────────────────── */
.m-app .gv-card{ border-radius:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
:root[data-theme="dark"] .m-app .gv-card{ box-shadow:none; }
.m-app .gv-row{ padding:12px 0; }
.m-press, .m-app .gv-card button:not(.gv-btn), .m-app a.m-tile, .m-app button.m-tile{ transition:transform .12s ease, opacity .12s ease; }
.m-press:active, .m-app a.m-tile:active, .m-app button.m-tile:active{ transform:scale(.98); opacity:.85; }
.m-app .gv-btn{ border-radius:14px; min-height:46px; font-size:15px; }
.m-app .gv-btn.sm{ min-height:38px; font-size:13.5px; border-radius:12px; }
.m-app .gv-btn:active{ transform:scale(.97); }
.m-app .gv-input{ border-radius:14px; min-height:46px; font-size:16px; }
.m-app .gv-chip{ border-radius:999px; }
.m-app .gv-sec-title{ font-size:13px; font-weight:700; color:var(--ink-4); text-transform:none; letter-spacing:0; margin:18px 4px 8px; }
/* การ์ดสรุป: ไล่สีแบรนด์ ตัวเลขใหญ่ */
.m-hero{ background:linear-gradient(145deg, var(--navy) 0%, #1A4B86 100%); color:#fff; border:0 !important; }
:root[data-theme="dark"] .m-hero{ background:linear-gradient(145deg, #15202E 0%, #1A3350 100%); }
.m-hero .gv-chip{ background:rgba(255,255,255,.14) !important; color:#fff !important; }
.m-hero .m-hero-num{ color:#fff; }
.m-hero .m-hero-sub{ color:rgba(255,255,255,.75); }
.m-hero .gv-bar{ background:rgba(255,255,255,.18); }
.m-hero .m-stat{ background:rgba(255,255,255,.12); color:#fff; border-radius:14px; padding:10px 6px; text-align:center; flex:1; }
.m-hero .m-stat b{ display:block; font-family:var(--font-display); font-size:22px; line-height:1; }
.m-hero .m-stat span{ font-size:11.5px; opacity:.85; }
/* รายการ (list group) */
.m-list{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.m-list > *{ border-bottom:1px solid var(--line); }
.m-list > *:last-child{ border-bottom:0; }
.m-tile{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; text-decoration:none; color:var(--ink); min-height:64px; box-sizing:border-box; }
.m-tile .m-tile-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; }
.m-tile .m-tile-t{ display:block; font-size:14.5px; font-weight:700; line-height:1.2; }
.m-tile .m-tile-s{ display:block; font-size:11.5px; color:var(--ink-4); margin-top:3px; line-height:1.35; }
.m-chev{ stroke:var(--ink-5); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* โครงกระดูกตอนโหลด */
.m-skel{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:mskel 1.2s ease infinite; border-radius:10px; }
@keyframes mskel{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
/* แผ่นล่าง (bottom sheet) ให้ดูเป็น native: มีที่จับ + เงา */
.m-sheet{ border-radius:24px 24px 0 0 !important; box-shadow:0 -12px 40px rgba(15,23,42,.22); animation:msheet .22s ease-out; }
@keyframes msheet{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
/* ป้ายติดตั้งแอป */
.m-install{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--primary-soft); color:var(--primary-ink); font-size:13px; margin-bottom:12px; }
.m-install b{ display:block; font-size:14px; }

/* บนจอคอม (พรีวิวบัตรกลางจอ) คงกรอบมุมมนไว้ · บนมือถือจริงเต็มจอ ไม่มีกรอบ */
@media (max-width: 768px){
  .fos-pass{ border:0 !important; border-radius:0 !important; }
  html, body{ overscroll-behavior:none; }
}
@media (display-mode: standalone){
  .m-top{ padding-top:calc(env(safe-area-inset-top, 0px) + 18px); }
}