/* ============================================================================
   order-history.desktop.css — DESKTOP / TABLET · light-2026 · CARD-GRID redesign
   ----------------------------------------------------------------------------
   ยกเครื่องเดสก์ท็อปใหม่หมด (โครงเดิม = ตารางเต็มจอ + hero ใหญ่ → เลิกใช้):
     • หัวบาง (compact header) แทน hero ใหญ่ — กว้างเท่า content (1080px) จัดกลาง
     • toolbar ลอย (ค้นหา · แท็บสถานะ · ตัวกรอง) ไม่มีกรอบการ์ดครอบ
     • รายการบิล = การ์ดกริด 2 คอลัมน์ (แต่ละ .mrow → การ์ด) สวย สแกนง่าย
   Mobile Source-of-Truth (order-history.css) + HTML + JS ไม่ถูกแตะ — สไตล์เฉพาะ body.ptshell ≥768.
   canvas #F4F5F7 · การ์ดขาว · hairline #E8EAEF · เงานุ่ม · มุมโค้ง · ink #181A1D
   ============================================================================ */

:root{
  --l26-canvas:#F4F5F7; --l26-surface:#fff;
  --l26-line:#E8EAEF; --l26-ink:#181A1D; --l26-ink-2:#565C64; --l26-muted:#8A9099;
  --l26-fill:#F7F8FA;
  --l26-shadow:0 22px 48px -30px rgba(20,25,35,.28);
}

@media (min-width:768px){

  body.ptshell{ background:var(--l26-canvas); }
  /* mobile top bar ถูกแทนด้วย AppShell topbar/sidebar บนเดสก์ท็อป */
  body.ptshell .page-header{ display:none; }

  /* ══════════════ COMPACT HEADER (แทน hero ใหญ่) ══════════════ */
  body.ptshell .hero.brew{
    max-width:1080px; margin:2px auto 16px; overflow:visible;
    color:var(--l26-ink); background:var(--l26-surface);
    border:1px solid var(--l26-line); border-radius:20px; box-shadow:var(--l26-shadow);
  }
  body.ptshell .hero.brew::before{ display:none; }
  body.ptshell .hero .blob,
  body.ptshell .hero .hicon,

  body.ptshell .hero .hwrap{
    padding:16px 24px; position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  }
  body.ptshell .hero .htop{ align-items:center; gap:0; flex:1 1 auto; min-width:0; }
  body.ptshell .hero .hti{ min-width:0; }
  body.ptshell .hero .eyebrow{
    display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
    background:#FFF1E8; color:var(--sun-deep,#ef5f06); border:1px solid #FFD9C2;
    box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    font-size:11.5px; font-weight:600;
  }
  body.ptshell .hero .eyebrow svg{ width:14px; height:14px; }
  body.ptshell .hero h1{
    color:var(--l26-ink); font-size:21px; font-weight:700; letter-spacing:-.4px;
    margin:7px 0 0; text-shadow:none;
  }
  /* ตัวหนังสือใน .chero ที่เดิมเป็นสีขาว (dark hero) → สีเข้ม ให้เห็นบน hero การ์ดขาว */
  body.ptshell .hero.brew .cti p,
  body.ptshell .hero.brew p{ color:var(--l26-ink-2); opacity:1; }
  body.ptshell .hero.brew .en{ color:var(--l26-muted); }

  /* stats → 3 ชิปเล็กด้านขวาของหัว */
  body.ptshell .hstats{ display:flex; gap:10px; margin:0; flex:none; position:relative; z-index:2; }
  body.ptshell .hstat{
    position:relative; min-width:92px; background:var(--l26-fill); border:1px solid var(--l26-line);
    border-radius:14px; padding:9px 15px 9px 16px; color:var(--l26-ink-2);
    box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    display:flex; flex-direction:column; gap:1px; font-size:11.5px; font-weight:500;
  }
  body.ptshell .hstat b{ color:var(--l26-ink); font-size:20px; font-weight:800; letter-spacing:-.5px; line-height:1.15; }
  body.ptshell .hstat::before{
    content:""; position:absolute; top:12px; right:13px; width:8px; height:8px; border-radius:50%;
    background:var(--l26-muted); opacity:.5;
  }
  body.ptshell .hstat.all::before{  background:#F0490B; opacity:1; }
  body.ptshell .hstat.prog::before{ background:#3B82F6; opacity:1; }
  body.ptshell .hstat.done::before{ background:#1E9E6A; opacity:1; }

  /* ══════════════ CONTENT COLUMN (= header width) ══════════════ */
  body.ptshell main.page{ max-width:1080px; margin-inline:auto; padding:0 0 60px; }

  /* .card เดิม (กล่องครอบใหญ่) → โปร่ง เป็นแค่ตัวจัด toolbar + กริด */
  body.ptshell main.page .card{
    background:transparent; border:none; box-shadow:none; padding:0;
    display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  }

  /* ── TOOLBAR (ลอยบน canvas) ── */
  body.ptshell .searchbar{ flex:1 1 100%; margin:0; }
  body.ptshell .searchbar .ibx{
    background:var(--l26-surface); border:1px solid var(--l26-line); border-radius:13px; color:var(--l26-ink);
  }
  body.ptshell .searchbar .ibx input{ color:var(--l26-ink); }
  body.ptshell .searchbar .ibx input::placeholder{ color:var(--l26-muted); }
  body.ptshell .searchbar .ibx:focus-within{ border-color:var(--sun-deep,#ef5f06); box-shadow:0 0 0 3px rgba(242,86,11,.12); }
  body.ptshell .searchbar .sb{
    background:linear-gradient(135deg,#FF8A34,#EF5F06); color:#fff; border:none; border-radius:13px;
    box-shadow:0 10px 22px -12px rgba(239,95,6,.6);
  }

  /* status tabs (ซ้าย) + ตัวกรอง (ขวา) แถวเดียวกัน */
  body.ptshell .ftabs{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:8px; margin:0; }
  body.ptshell .ftabs .ftab{
    background:var(--l26-surface); border:1px solid var(--l26-line); color:var(--l26-ink-2); border-radius:999px;
  }
  body.ptshell .ftabs .ftab:hover{ border-color:#D8DCE3; }
  body.ptshell .ftabs .ftab.on{ background:#FFF1E8; border-color:#FFCFAD; color:var(--sun-deep,#ef5f06); font-weight:600; }

  body.ptshell .filters{ flex:0 0 auto; display:flex; gap:10px; margin:0; }
  body.ptshell .filters .field{ margin:0; }
  body.ptshell .filters .field label{ display:none; }        /* ตัวเลือกบอกตัวเองอยู่แล้ว (ทุกวันที่/ทุกประเภท) */
  body.ptshell .filters select{
    background:var(--l26-surface); border:1px solid var(--l26-line); color:var(--l26-ink);
    border-radius:12px; padding:10px 34px 10px 14px; font-size:13px; font-weight:500;
  }
  body.ptshell .filters select:focus{ border-color:var(--sun-deep,#ef5f06); box-shadow:0 0 0 3px rgba(242,86,11,.12); }

  /* หัวตาราง (mobile/เดิม) ไม่ใช้ในโหมดการ์ด */
  body.ptshell .mhead{ display:none; }

  /* ══════════════ ROW LIST (แถว · กล่องขาวเดียว มีเส้นคั่น) ══════════════ */
  body.ptshell #ilist{
    flex:1 1 100%;
    display:block;
    overflow:hidden;
  }
  body.ptshell #iempty{ flex:1 1 100%; color:var(--l26-muted); }

  body.ptshell .mrow{
    display:flex; align-items:center; gap:16px; width:auto;
    background:transparent; border:0; border-radius:0; padding:15px 20px;
    border-bottom:1px solid var(--l26-line); box-shadow:none; cursor:pointer;
    transition:background .12s ease;
  }
  body.ptshell #ilist .mrow:last-child{ border-bottom:0; }
  body.ptshell .mrow:hover{ transform:none; box-shadow:none; border-color:var(--l26-line); background:var(--l26-fill); }

  /* icon chip (สีตามประเภทบิล) */
  body.ptshell .mrow .mth{
    width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
    border:none; background:var(--l26-fill); color:var(--l26-ink-2);
  }
  body.ptshell .mrow .mth svg{ width:22px; height:22px; }

  /* info block (เลขบิล · ประเภท / รายละเอียด·วันที่) */
  body.ptshell .mrow .mi{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
  body.ptshell .mrow .mln{ display:flex; align-items:center; gap:10px; min-width:0; }
  body.ptshell .mrow .mno{ font-size:15px; font-weight:700; color:var(--l26-ink); font-family:var(--fn,'Space Grotesk'),'Mitr',sans-serif; line-height:1.2; white-space:nowrap; }
  body.ptshell .mrow .mtype{ display:inline-block; background:none; padding:0; margin:0; font-size:11px; font-weight:600; color:var(--l26-muted); letter-spacing:.02em; flex:none; }
  body.ptshell .mrow .mt{ font-size:12.5px; color:var(--l26-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* meta chips (กลาง-ขวา · ซ่อนถ้าไม่มี/จอแคบ) */
  body.ptshell .mrow .mmeta{ display:flex; flex:0 1 auto; flex-wrap:wrap; gap:7px; justify-content:flex-end; max-width:36%; }
  body.ptshell .mrow .mmeta:empty{ display:none; }
  body.ptshell .mrow .mmeta .mm{ display:flex; flex-direction:column; gap:1px; min-width:0; background:var(--l26-fill); border:1px solid var(--l26-line); border-radius:9px; padding:5px 10px; font-size:12px; font-weight:600; color:var(--l26-ink); white-space:nowrap; }
  body.ptshell .mrow .mmeta .mm i{ font-style:normal; font-size:9.5px; font-weight:600; color:var(--l26-muted); letter-spacing:.02em; }
  @media (max-width:1080px){ body.ptshell .mrow .mmeta{ display:none; } }   /* จอแคบ = ซ่อน meta ให้แถวไม่แน่น */

  /* amount + สถานะ (ขวาสุด) + chevron */
  body.ptshell .mrow .mr{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; min-width:100px; }
  body.ptshell .mrow .mp{ font-size:16px; font-weight:800; color:var(--l26-ink); font-family:var(--fn,'Space Grotesk'),'Mitr',sans-serif; }
  body.ptshell .mrow .mbadge{ margin:0; font-size:11px; font-weight:600; padding:3px 11px; border-radius:999px; border:1px solid transparent; }
  body.ptshell .mrow .mchev{ flex:none; color:var(--l26-muted); display:grid; place-items:center; }

  /* icon chip colour ตามประเภทบิล */
  body.ptshell .mrow[data-type="order"]    .mth{ background:#FFF1E8; color:#EF5F06; }
  body.ptshell .mrow[data-type="import"]   .mth{ background:#EAF1FE; color:#2563EB; }
  body.ptshell .mrow[data-type="sourcing"] .mth{ background:#E4F7F6; color:#0EA5A0; }
  body.ptshell .mrow[data-type="exchange"] .mth{ background:#F1EAFE; color:#7C3AED; }
  body.ptshell .mrow[data-type="paybill"]  .mth{ background:#FEF3E2; color:#D97706; }
  body.ptshell .mrow[data-type="topup"]    .mth{ background:#E6F6EF; color:#1E9E6A; }
  body.ptshell .mrow[data-type="withdraw"] .mth{ background:#FDE8F0; color:#E11D6B; }
  body.ptshell .mrow[data-type="ptcoin"]   .mth{ background:#FBF3DE; color:#B8860B; }
  body.ptshell .mrow[data-type="delivery"] .mth{ background:#E2F6FB; color:#0891B2; }
  body.ptshell .mrow[data-type="container"].mth{ background:#F7ECE4; color:#A9531F; }
  body.ptshell .mrow[data-type="claim"]    .mth{ background:#FCE9E9; color:#DC2626; }
  body.ptshell .mrow[data-type="voucher"]  .mth{ background:#FCE7F3; color:#DB2777; }

  /* status badge pill */
  body.ptshell .mrow .mbadge.wait{ background:#FEF3E2; color:#B45309; border-color:#FADFB0; }
  body.ptshell .mrow .mbadge.go{   background:#EAF1FE; color:#1D4ED8; border-color:#C9DCFB; }
  body.ptshell .mrow .mbadge.ship{ background:#E7F1FF; color:#1E5FD6; border-color:#C7DCFA; }
  body.ptshell .mrow .mbadge.done{ background:#E6F6EF; color:#12805A; border-color:#BFE9D3; }
  body.ptshell .mrow .mbadge.cn{   background:#F1F3F6; color:#6B7280; border-color:#E1E5EB; }
}

/* card style (desktop) — ตาม Owner */
body.ptshell main.page .card{border:none;display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:var(--sp-card-pad,16px);border-radius:var(--radius-lg,20px);background:var(--color-surface)}