/* รอบ 28: ปรับหน้าแบบหน้าเดียว (fit-lists)
   หน้า: ผู้จำหน่าย, สาขา, สกุลเงิน, วิธีจัดส่ง, ผู้ใช้, บัญชีรับเงิน, ประวัติการใช้งาน, ความเคลื่อนไหวสต็อก, ลูกค้าออนไลน์
   ใช้คู่กับ fit.css — คลาสทั้งหมดขึ้นต้นด้วย fitl- */

@media screen {
  /* ---------- แถบตัวกรองแถวที่สอง ---------- */
  .fitl-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; }
  .fitl-bar.fitl-filters { justify-content: flex-start; }
  .fitl-push { margin-left: auto; }

  /* ปุ่มกรองแบบแถบเม็ดยา (หน้าตาเดียวกับแท็บหน้าพิมพ์ฉลาก) */
  .fitl-seg {
    display: inline-flex; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; background: var(--chip);
    max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none;
  }
  .fitl-seg::-webkit-scrollbar { display: none; }
  .fitl-seg button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px;
    background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .fitl-seg button:hover { color: var(--ink); }
  .fitl-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .fitl-n {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--surface); color: var(--muted); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .fitl-seg button.on .fitl-n { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .fitl-seg button.on.warn .fitl-n { background: var(--warn-soft); color: var(--warn-text, #7a5300); }

  /* ตัวกรองวันที่/ประเภทแบบกระชับ (ประวัติ, ความเคลื่อนไหว) */
  .fitl-bar.fitl-filters { gap: 8px; }
  .fitl-filters .field.inline { gap: 6px; font-size: .85rem; white-space: nowrap; }
  .fitl-filters .field.inline input, .fitl-filters .field.inline select { min-height: 42px; padding: 6px 8px; font-size: .92rem; }
  .fitl-filters .field.inline input[type="date"] { width: 128px; }
  .fitl-filters .field.inline select { max-width: 200px; text-overflow: ellipsis; }
  .fitl-filters .fitl-seg button { padding: 0 10px; }
  .fitl-filters > .btn { min-height: 42px; padding-left: 14px; padding-right: 14px; }

  /* โควตาแพ็กเกจ (สาขา / ผู้ใช้) */
  .fitl-usage { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: .85rem; color: var(--muted); }
  .fitl-usage strong { color: var(--ink); font-size: .95rem; }
  .fitl-meter { position: relative; width: 120px; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
  .fitl-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand); }
  .fitl-usage.full .fitl-meter i { background: var(--danger); }
  .fitl-usage.full strong { color: var(--danger); }
  .fitl-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-text, #7a5300); font-size: .9rem; }

  /* ป้ายสถานะในตาราง/การ์ด */
  .fitl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted); }
  .fitl-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
  .fitl-pill.on { background: var(--ok-soft); color: var(--ok); }
  .fit .table tr.dim td .fitl-pill { opacity: 1; }

  .fitl-act { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--chip); color: var(--ink); font-size: .84rem; white-space: nowrap; }
  .fitl-act.warn { background: var(--warn-soft); color: var(--warn-text, #7a5300); font-weight: 600; }

  /* ผู้ใช้: รูปย่อ + บทบาท */
  .fitl-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .fitl-avatar { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); font-weight: 700; font-size: .9rem; }
  .fit .table tr.dim .fitl-avatar { background: var(--chip); color: var(--muted); }
  .fitl-role { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--chip); color: var(--ink); white-space: nowrap; }
  .fitl-role.owner { background: var(--brand); color: var(--brand-ink, #fff); }
  .fitl-role.admin { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .fitl-tags .tag { margin: 2px 4px 2px 0; }

  /* แถวว่างเมื่อกรองแล้วไม่พบ */
  .fit-empty-filter .link { margin-left: 6px; }

  /* ตัวเลขสรุป (ลูกค้าออนไลน์) */
  .fitl-stats .fit-stat { padding: 10px 16px; }
  .fitl-stats .fit-stat.fitl-hl strong { color: var(--brand-strong, var(--brand)); }

  /* ---------- สกุลเงิน: ตาราง + แผงสรุปด้านขวา ---------- */
  .fitl-pane-flat { min-width: 0; }
  .fitl-cur td.nowrap { white-space: normal; }
  .fitl-cur-name > span { flex: none; white-space: nowrap; }
  .fitl-cur-name { display: inline-flex; align-items: center; gap: 6px 10px; }
  .fitl-code { display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--chip); color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .03em; }
  .fitl-side { padding: 18px; }
  .fitl-side > .fit-scroll { display: flex; flex-direction: column; gap: 12px; }
  .fitl-base { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--brand-tint); }
  .fitl-base > div { display: flex; flex-direction: column; min-width: 0; }
  .fitl-base strong { font-size: 1.05rem; }
  .fitl-base-sym { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: var(--brand-ink, #fff); font-size: 1.5rem; font-weight: 700; }
  .fitl-side-title { margin: 6px 0 0; font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .fitl-rates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .fitl-rates li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
  .fitl-rates li:last-child { border-bottom: 0; }
  .fitl-rates li.dim { opacity: .55; }
  .fitl-conv li strong { font-size: 1.05rem; }
  .fitl-conv-in input { width: 100%; font-size: 1.1rem; font-weight: 600; }
  .fitl-side-note { margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); line-height: 1.55; }
  .fitl-side-note span { display: block; margin-top: 6px; color: var(--warn-text, #7a5300); }

  /* ---------- วิธีจัดส่ง: การ์ด ---------- */
  .fitl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: stretch; }
  .fitl-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
  .fitl-card.dim { opacity: .62; }
  .fitl-card-top { display: flex; align-items: flex-start; gap: 12px; }
  .fitl-card-title { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
  .fitl-card-title strong { font-size: 1.02rem; overflow-wrap: anywhere; }
  .fitl-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .fitl-ico.t-pickup { background: var(--ok-soft); color: var(--ok); }
  .fitl-ico.t-localdelivery { background: var(--chip); color: var(--ink); }
  .fitl-card-desc { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
  .fitl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .fitl-facts > div { padding: 8px 10px; border-radius: 10px; background: var(--bg); min-width: 0; }
  .fitl-facts dt { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fitl-facts dd { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fitl-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; flex-wrap: wrap; }
  .fitl-card-foot .tag { margin-right: auto; }

  /* ---------- บัญชีรับเงิน: การ์ดกว้างขึ้น QR ใหญ่ขึ้น ---------- */
  .fit .fitl-accounts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
  .fit .fitl-acc { gap: 16px; padding: 16px; border: 0; box-shadow: var(--shadow); align-items: stretch; }
  .fit .fitl-acc img, .fit .fitl-acc .qr-empty { width: 128px; height: 128px; align-self: flex-start; }
  .fit .fitl-acc .account-info { flex: 1 1 auto; gap: 3px; }
  .fitl-acc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .fitl-acc-top strong { font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
  .fitl-accno { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
  .fitl-acc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
  .fitl-acc-foot .tag { margin-right: auto; }
  .fit .fitl-acc .account-info .fitl-acc-foot .btn { margin-top: 0; align-self: center; }
}

/* ---------- จอคอม ---------- */
@media screen and (min-width: 1025px) {
  /* สกุลเงิน: ตารางเต็มความสูงทางซ้าย */
  .fit-split.fitl-cur { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
  .fitl-cur > .fitl-pane-flat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .fitl-cur > .fitl-pane-flat > .fit-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 0; }
  .fitl-side > .fit-scroll { margin: 0 -6px; padding: 0 6px; }
  .fit-body.scroll > .fitl-grid, .fit-body.scroll > .fitl-accounts { padding-top: 2px; }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .fit-split.fitl-cur { grid-template-columns: minmax(0, 1fr) 280px; }
  .fitl-side { padding: 14px; }
}

/* ---------- แท็บเล็ต ---------- */
@media screen and (max-width: 1024px) {
  .fitl-push { margin-left: 0; }
}

/* ---------- มือถือ ---------- */
@media screen and (max-width: 760px) {
  .fitl .fit-tools .fit-search { min-width: 0; flex: 1 1 auto; }
  .fitl .fit-tools > .btn { white-space: nowrap; }
  .fitl .fit-tools.fitl-tools-solo { justify-content: flex-end; }
  .fitl-bar { gap: 8px; }
  .fitl-filters .field.inline input[type="date"] { width: 100%; }
  .fitl-bar > .fitl-seg { width: 100%; }
  .fitl-seg button { flex: 1 0 auto; justify-content: center; min-height: 38px; }
  .fitl-usage { width: 100%; justify-content: space-between; }
  .fitl-meter { flex: 1 1 auto; width: auto; }
  .fitl-filters .field.inline { flex: 1 1 calc(50% - 4px); }
  .fitl-filters .field.inline select, .fitl-filters .fitl-product select { max-width: none; }
  .fitl-filters .fitl-product { flex: 1 1 60%; }
  .fitl-filters > .btn { flex: 1 1 30%; align-self: flex-end; }
  .fitl-stats .fit-stat { padding: 10px 12px; }
  .fit .table.cards td.fitl-tags { flex-wrap: wrap; justify-content: flex-end; }
  .fit .table.cards td.fitl-tags::before { margin-right: auto; }
  .fitl-grid { gap: 10px; }
  .fitl-card { padding: 14px; }
  .fit .fitl-acc { padding: 12px; gap: 12px; }
  .fit .fitl-acc img, .fit .fitl-acc .qr-empty { width: 96px; height: 96px; }
  .fitl-side { padding: 14px; }
}

@media screen {
  html[data-theme="dark"] .fitl-seg button.on { box-shadow: 0 1px 3px rgba(0,0,0,.5); background: var(--raised, var(--surface)); }
  html[data-theme="dark"] .fitl-n { background: var(--bg); }
  html[data-theme="dark"] .fitl-facts > div { background: var(--chip); }
}