/* ============================================================
   PTCARGO Responsive AppShell — LAYOUT LAYER ONLY (frozen Pattern P1)
   2026 LIGHT THEME: เปลี่ยนเฉพาะ "สี" เป็นธีมสว่าง · คงเรขาคณิตเดิมทั้งหมด
   (sidebar ชิดซ้าย 72/248px · offset 54px · ไม่ floating) → หน้าอื่นแค่เปลี่ยนสี ไม่ขยับ layout
   Responsibility: sidebar · active menu · responsive chrome · shared topbar frame.
   Mobile (<768) = Source-of-Truth ไฟล์เดิม ไม่ถูกแตะ.
   ============================================================ */

/* the ONLY non-@media rules — guarantee mobile purity */
.dk-nav,.dk-topbuttons,.dk-toplevel,.dk-promo,.dk-search{display:none}
body.ptshell .sec.pad{margin:10px 15px}

/* ===== FOUC guard (2026-07): กัน "มือถือแวบขึ้นมาแล้วหาย" บน desktop =====
   desktop body-box (max-width/margin/padding ที่เว้นที่ให้ sidebar+topbar) เดิมผูกกับ
   body.ptshell — ซึ่ง ptcargo-shell.js เพิ่มด้วย JS "หลัง" paint แรก → ก่อน JS รัน หน้าจึง
   แสดง mobile layout ก่อน แล้วค่อย "เด้ง" เป็น desktop. ย้ายมาผูกกับ viewport ล้วนตรงนี้
   (appshell.css เป็น render-blocking อยู่ใน <head>) = มีผลตั้งแต่ paint แรก: content ลงตำแหน่ง
   desktop ทันที · JS แค่เติม sidebar/topbar เข้าช่องว่างที่จองไว้ (ไม่มี reflow/แวบ).
   ค่าทุกจุดตรงกับ .ptshell ด้านล่างเป๊ะ จึงไม่เปลี่ยนภาพตอน JS ทำงาน. */
@media (min-width:768px){
  html body{max-width:none;margin:0;padding-top:88px;padding-bottom:0;padding-left:108px}
}
@media (min-width:1280px){
  html body{padding-left:272px}
}

/* ===== Tablet 768–1279: collapsed icon rail ===== */
@media (min-width:768px){
  html body.ptshell{max-width:none !important; margin:0 !important; box-shadow:none !important; padding-top:88px !important}
  /* light neutral canvas. !important is REQUIRED: ptcargo-shell.js injects a <style> at runtime with
     @media(min-width:480px){html{background:#e7e0d7}} for the mobile phone-frame backdrop. That injected
     rule ties on specificity (html) but wins on source order (appended to <head> after this link), so
     without !important the html stays brown (#e7e0d7) and peeks through the body's top margin as a
     "brown strip" at the very top on every app-shell page. */
  html{background:#F4F5F7 !important}
  /* DESKTOP SCROLL FIX (fleet-wide): many pages set html,body{overflow-x:hidden}. On desktop that
     coupling makes <body> a (non-scrolling) scroll-container; combined with ptcargo-lock.js
     overscroll-behavior:none, a mouse wheel over the content can't chain to the real scroller and
     the page gets stuck. overflow-x:clip prevents horizontal overflow WITHOUT creating a scroll-
     container, so the viewport scrolls normally. Desktop-only → mobile Source-of-Truth untouched. */
  html{overflow-x:clip !important}
  body.ptshell{overflow-x:clip !important; overflow-y:visible !important}
  body.ptshell{padding-bottom:0 !important; padding-left:108px}
  .pts-bot,.pts-fab,.pts-menu,.pts-mov,.pts-sc,.pts-scg,.pts-scov,.pts-tt{display:none !important}
  body.ptshell .pts-pmenu{right:20px !important; top:84px !important; max-height:calc(100vh - 96px) !important; overflow-y:auto !important;
    border:1px solid #E8EAEF !important; box-shadow:0 24px 60px -28px rgba(20,25,35,.28) !important}
  /* TOPBAR — light glass "ลอย" (เว้นขอบ + มุมโค้ง) */
  html body.ptshell .pts-top{left:108px !important; right:16px !important; top:16px !important; width:auto !important; max-width:none !important;
    height:56px !important; border-radius:18px !important;
    background:rgba(255,255,255,.85) !important; -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px);
    border:1px solid #EAECF1 !important; box-shadow:0 16px 38px -26px rgba(20,25,35,.30) !important; color:#181A1D !important}
  body.ptshell .pts-nav{display:none !important}
  body.ptshell .pts-logo{display:none !important}
  /* cloned mobile bottom-bar buttons in the topbar */
  .dk-topbuttons{display:flex;align-items:center;gap:2px;margin-left:auto}
  .dk-topbuttons a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;text-decoration:none;color:#565C64;font-family:var(--fd,'Mitr',sans-serif);font-weight:500;font-size:13px;white-space:nowrap;position:relative;transition:.15s}
  .dk-topbuttons a:hover{background:#F4F5F7}
  .dk-topbuttons a.on{color:#F2560B;background:#FFF1E8}
  .dk-topbuttons a svg{width:19px;height:19px;flex:none}
  .dk-topbuttons a .lbl,.dk-topbuttons a span{font-size:13px}
  .dk-topbuttons a .fabc{display:inline-flex}
  .dk-toplevel{display:inline-block;width:24px;height:24px;flex:none;margin:0 6px;cursor:default}
  .dk-topbuttons a .bdg{position:absolute;top:0;left:18px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#E5484D;color:#fff;font-size:9px;font-weight:700;line-height:1;display:grid;place-items:center;font-family:var(--fb,'Prompt',sans-serif);border:1.5px solid #fff;box-shadow:0 2px 5px -1px rgba(229,72,77,.5)}

  /* ช่องค้นหา/วางลิงก์ ใน topbar (เดสก์ท็อป) — เติมพื้นที่ว่างฝั่งซ้าย */
  .dk-search{display:flex;align-items:center;gap:6px;flex:1 1 auto;max-width:560px;margin-right:16px;height:40px;padding:0 6px 0 12px;background:#F4F5F7;border:1px solid #EAECF1;border-radius:999px;transition:.15s}
  .dk-search:focus-within{background:#fff;border-color:#F2560B;box-shadow:0 0 0 3px rgba(242,86,11,.12)}
  .dk-search .dk-search-go{border:none;background:none;color:#98A0A8;display:grid;place-items:center;cursor:pointer;padding:0;width:24px;height:24px;flex:none;order:-1}
  .dk-search .dk-search-go svg{width:18px;height:18px}
  .dk-search:focus-within .dk-search-go{color:#F2560B}
  .dk-search .dk-search-in{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--fd,'Mitr',sans-serif);font-size:13.5px;color:#181A1D}
  .dk-search .dk-search-in::placeholder{color:#98A0A8;font-size:12px}

  /* SIDEBAR — light (เรขาคณิตเดิม: ชิดซ้าย 72px flush) */
  .dk-nav{
    /* box-sizing:border-box so width (76 rail / 240 expanded) is the ACTUAL footprint incl. its
       padding+border. Without it the sidebar is content-box (76+24+2=102 / 240+24+2=266), so its right
       edge (118 / 282) overruns the reserved content offset (108 / 272) by 10px → the fixed topbar
       (z:9950) renders OVER the sidebar's right edge. border-box restores the intended 16px gap. */
    box-sizing:border-box;
    display:flex;flex-direction:column;position:fixed;left:16px;top:16px;bottom:16px;width:76px;z-index:60;
    background:#fff;color:#181A1D;padding:16px 12px;gap:3px;overflow:hidden;border-radius:24px;
    border:1px solid #E8EAEF;box-shadow:0 26px 60px -34px rgba(20,25,35,.30)
  }
  .dk-brand{display:flex;align-items:center;gap:10px;padding:2px 4px 12px}
  .dk-logo{width:40px;height:40px;object-fit:contain;flex:none;display:block}
  .dk-btxt{display:none}
  /* level card — light */
  .dk-level{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 2px 8px;padding:8px 0;border-radius:13px;background:#F4F5F7;border:1px solid #EDEFF3}
  .dk-lv-ic{width:34px;height:34px;flex:none;display:block}
  .dk-lv-tx{display:none;flex:1;min-width:0}
  .dk-lv-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
  .dk-lv-name{font-family:var(--fd,'Mitr',sans-serif);font-weight:700;font-size:13.5px;color:#181A1D}
  .dk-lv-tag{font-family:var(--fn,'Space Grotesk',sans-serif);font-size:8px;letter-spacing:1.2px;color:#F2560B}
  .dk-lv-bar{height:5px;background:#E8EAEF;border-radius:3px;overflow:hidden;margin:5px 0 3px}
  .dk-lv-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF9A3D,#F2560B);border-radius:3px;transition:width .6s ease}
  .dk-lv-sub{font-family:var(--fn,'Space Grotesk',sans-serif);font-size:9px;color:#98A0A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dk-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none}
  .dk-list::-webkit-scrollbar{width:0;height:0;display:none}
  .dk-item{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:11px;color:#565C64;text-decoration:none;white-space:nowrap;font-family:var(--fd,'Mitr',sans-serif);font-size:13.5px;font-weight:500;transition:.15s}
  .dk-item svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
  .dk-item span{display:none}
  .dk-item:hover{background:#F4F5F7;color:#181A1D}
  .dk-item.on{background:#FFF1E8;color:#F2560B;font-weight:600}

  /* uniform content spacing */
  body.ptshell .cHero{padding:20px 10% !important}
  body.ptshell .sec.pad{margin:15px 20px !important}
  html body.ptshell .pybar,html body.ptshell .paybar,html body.ptshell .actbar,html body.ptshell .buybar,
  html body.ptshell .btmbar,html body.ptshell .subbar,html body.ptshell .addbar,html body.ptshell .bar-cta{
    position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;
    width:auto !important;max-width:100% !important;transform:none !important}

  /* wallet — light */
  .dk-wallet{display:flex;flex-direction:column;gap:4px;padding:10px;margin-top:8px;border-radius:13px;background:#F4F5F7;border:1px solid #EDEFF3}
  .dk-bal{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0;border-radius:11px;text-decoration:none;color:#181A1D}
  .dk-bal:hover{background:#EDEFF3}
  .dk-coin{width:28px;height:28px;flex:none}
  .dk-bal-tx{display:none;min-width:0}
  .dk-bal-l{font-family:var(--fn,'Space Grotesk',sans-serif);font-size:9px;letter-spacing:.4px;color:#98A0A8;text-transform:uppercase;line-height:1.3}
  .dk-bal-v{font-family:var(--fn,'Space Grotesk',sans-serif);font-weight:700;font-size:13px;color:#181A1D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .page-header{position:sticky;top:88px;z-index:40}
  /* desktop: ซ่อน header ของหน้า (header.hd) เพราะใช้ topbar/sidebar ของ shell แทน */
  body.ptshell header.hd{display:none}
}

/* ===== Desktop ≥1280: expand sidebar (labels) ===== */
@media (min-width:1280px){
  body.ptshell{padding-left:272px}
  html body.ptshell .pts-top{left:272px !important}
  .dk-nav{width:240px;padding:18px 12px}
  .dk-btxt{display:block}
  .dk-bname{font-family:var(--fd,'Mitr',sans-serif);font-weight:700;line-height:1.1;font-size:15px;color:#181A1D}
  .dk-bsub{font-family:var(--fn,'Space Grotesk',sans-serif);font-size:9.5px;letter-spacing:2px;color:#98A0A8}
  .dk-item span{display:inline}
  .dk-nl{font-family:var(--fn,'Space Grotesk',sans-serif);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#98A0A8;margin:12px 10px 3px}
  .dk-bal{justify-content:flex-start;padding:6px 8px}
  .dk-bal-tx{display:block}
  .dk-level{justify-content:flex-start;padding:9px 8px}
  .dk-lv-tx{display:block}
  /* sidebar promo (โชว์เฉพาะตอนขยาย) */
  .dk-promo{display:block;margin:8px 0 4px;border-radius:13px;overflow:hidden;border:1px solid #E8EAEF}
  .dk-promo img{width:100%;height:auto;display:block}
  /* promo slider (fade · auto · ปัดไม่ได้) */
  .dk-promo-slider{position:relative;aspect-ratio:432/240}
  .dk-promo-slider .dk-promo-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:block}
  .dk-promo-slider .dk-promo-slide.on{opacity:1}
  .dk-promo-slider img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:1279px){ .dk-nl{display:none} }
