/* =====================================================================
   รอบ 40: หน้าแอดมินกลาง "บอท Telegram" (/platform/telegram — Pages/Platform/PlatformTelegram.razor)
   ใช้คลาสของ platform.css (pf-kpi, pf-card, pf-st, pf-switch, pf-callout …) เพิ่มเฉพาะส่วนที่ขาด — ทุกคลาสขึ้นต้นด้วย pftg-
   ===================================================================== */
@media screen {
  .pf-kpis.pftg-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .pftg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .pftg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

  /* หัวการ์ดสถานะ: ไอคอนบอท + @username + ป้ายสถานะ */
  .pftg-bot { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .pftg-bot-ico {
    flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    background: var(--chip); color: var(--muted);
  }
  .pftg-bot-ico.on { background: var(--brand); color: var(--brand-ink, #fff); }
  .pftg-bot-ico svg { transform: translateX(-1px); }
  .pftg-bot-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .pftg-bot-name { font-size: 1.15rem; font-weight: 800; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
  a.pftg-bot-name { color: var(--brand-strong); }
  a.pftg-bot-name:hover { text-decoration: underline; }
  .pftg-pills { display: flex; flex-wrap: wrap; gap: 6px; }

  .pftg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .pftg-facts > div { padding: 8px 10px; border-radius: 10px; background: var(--bg); min-width: 0; }
  .pftg-facts dt { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pftg-facts dd { margin: 0; font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
  .pftg-mono { font-family: var(--font-mono); font-size: .85em; overflow-wrap: anywhere; }

  .pftg-err {
    display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
    background: var(--danger-soft); color: var(--danger); font-size: .86rem; line-height: 1.45;
  }

  /* ช่อง token + ปุ่มแสดง/ซ่อน */
  .pftg-token { position: relative; display: block; }
  .pftg-token input { width: 100%; padding-right: 46px; }
  .pftg-eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center;
    width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
  }
  .pftg-eye:hover { background: var(--chip); color: var(--ink); }
  .pftg-actions { display: flex; justify-content: flex-end; gap: 8px; }

  /* ขั้นตอนตั้งค่า */
  .pftg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: pftg; }
  .pftg-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 40px; min-height: 28px; counter-increment: pftg; font-size: .9rem; line-height: 1.5; }
  .pftg-steps li::before {
    content: counter(pftg); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px;
    border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-weight: 800; font-size: .85rem;
  }
  .pftg-steps li strong { color: var(--ink); }
  .pftg-steps li span { color: var(--muted); overflow-wrap: anywhere; }
}

/* จอเล็กกว่า 1440: 5 ช่องเรียงแถวเดียว ซ่อนไอคอนเพื่อให้ตัวหนังสือพอ */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .pftg-kpis .pf-kpi { padding: 12px 14px; }
  .pftg-kpis .pf-kpi-ico { display: none; }
}

@media screen and (max-width: 1024px) {
  .pf-kpis.pftg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pftg-grid { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 760px) {
  .pf-kpis.pftg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kpis.pftg-kpis > .pf-kpi:first-child { grid-column: 1 / -1; }
  .pftg-grid, .pftg-col { gap: 12px; }
  .pftg-actions .btn { flex: 1 1 auto; }
  .pftg-facts { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   รอบ 127: แท็บ "ผู้รับแจ้งเตือนของระบบ" (PfTgRecipients.razor) + แท็บ ทดลอง→จ่าย ในหน้ารายได้ (PlatformRevenueTrial.razor)
   ===================================================================== */
@media screen {
  .pftg-pane { display: contents; }
  .pf-kpis.pftg-kpis.pftg-kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-rv-chips.pftg-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pftg-link {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px;
    background: var(--brand-tint, var(--brand-soft)); border: 1px solid var(--brand); min-width: 0;
  }
  .pftg-link-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

  .pftg-rcpts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .pftg-rcpt { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
  .pftg-rcpt.off { opacity: .7; }
  .pftg-rcpt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
  .pftg-rcpt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pftg-rcpt-name strong { overflow-wrap: anywhere; }
  .pftg-rcpt-name small { overflow-wrap: anywhere; }
  .pftg-evs { display: flex; flex-wrap: wrap; gap: 4px; }
  .pftg-ev { padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: .76rem; font-weight: 600; }
  .pftg-rcpt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .pftg-rcpt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .pftg-rcpt-actions .danger-text { color: var(--danger); }

  .pftg-evpick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .pftg-evpick legend { font-weight: 700; margin-bottom: 4px; }
  .pftg-evpick .check { align-items: flex-start; }
  .pftg-evpick .check span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
}

@media screen and (max-width: 760px) {
  .pf-kpis.pftg-kpis.pftg-kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kpis.pftg-kpis.pftg-kpis4 > .pf-kpi:first-child { grid-column: auto; }
  .pf-rv-chips.pftg-sum { grid-template-columns: minmax(0, 1fr); }
  .pftg-rcpts { grid-template-columns: minmax(0, 1fr); }
  .pftg-link-btns .btn, .pftg-rcpt-actions .btn { flex: 1 1 auto; }
}