/* ============================================================
 * FASTUP · assets/press.css · 🫱 ปุ่มต้องมีมิติ ชี้แล้วเห็น กดแล้วรู้สึก
 *
 *   โค้ชแจ้ง 29/08: "ทุกปุ่มดูแบน ไม่มีมิติเลย ทุกบล็อกทุกการ์ดเหมือนกันหมด
 *                    เอาเมาส์ไปชี้ก็ไม่มีเอฟเฟกต์ใดๆ กดแล้วไม่รู้ว่าติดหรือไม่ติด"
 *   ตรงกับมาตรฐานที่โค้ชวางไว้: "ทุกปุ่มต้องยวบ + ไฟติด"
 *
 *   🔑 หลักการของไฟล์นี้ — แตะเฉพาะ "ความรู้สึก" ไม่แตะ "สี"
 *      ใส่แค่ เงา / ยก / ยวบ / ไฟวาบ / ขอบโฟกัส → ของเดิมทุกหน้าสีไม่เพี้ยน
 *      ไม่ใช้ !important เลย ยกเว้นบล็อก 'ลดการเคลื่อนไหว' ที่ต้องชนะเสมอ (เรื่องการเข้าถึง)
 *      → หน้าไหนอยากคุมเอง ยังเขียนทับได้ตามปกติ
 * ========================================================== */

/* ── ปุ่มทุกชนิดในระบบ ── */
button,
input[type="submit"],
input[type="button"],
.btn, .oa-btn, .oa-b, .ld-b, .c-b, .c-cta, .cv-b, .eb-btn,
.sc-b, .cf-go, .cf-cancel, .tb-home, .tb-logout, .tb-back, .tb-burger,
a[class*="-btn"], a[class*="-cta"], a[class*="-tab"], a[class*="-chip"],
[role="button"], summary {
  position: relative;
  transition: transform .12s cubic-bezier(.2,.7,.3,1),
              box-shadow .12s ease,
              filter .12s ease,
              outline-color .12s ease;
  box-shadow: 0 1px 0 rgba(13,31,60,.10),
              0 2px 5px rgba(13,31,60,.13);
}

/* ชี้แล้วเห็น — ยกขึ้นนิดเดียว + เงาลึกขึ้น + สว่างขึ้นนิดหน่อย */
/* เติม body นำหน้า — บางหน้าเขียน :active/:hover ของตัวเองไว้แบบเบาๆ ซึ่งอยู่ทีหลังในลำดับ
   ถ้าไม่เติม มาตรฐานกลางจะถูกทับ แล้วปุ่มหน้านั้นก็ยังแบนเหมือนเดิม */
@media (hover: hover) and (pointer: fine) {
  body button:hover:not(:disabled),
  body input[type="submit"]:hover:not(:disabled),
  body .btn:hover, body .oa-btn:hover, body .oa-b:hover, body .ld-b:hover,
  body .c-b:hover, body .c-cta:hover,
  body .cv-b:hover, body .eb-btn:hover, body .sc-b:hover, body .cf-go:hover, body .cf-cancel:hover,
  body a[class*="-btn"]:hover, body a[class*="-cta"]:hover,
  body a[class*="-tab"]:hover, body a[class*="-chip"]:hover,
  body [role="button"]:hover, body summary:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 3px 0 rgba(13,31,60,.10),
                0 8px 18px rgba(13,31,60,.20);
    filter: brightness(1.06) saturate(1.04);
  }
}

/* กดแล้วรู้สึก — ยวบลงไป เงาหด มีเงาในตัวเหมือนถูกกดจริง */
body button:active:not(:disabled),
body input[type="submit"]:active:not(:disabled),
body .btn:active, body .oa-btn:active, body .oa-b:active, body .ld-b:active,
body .c-b:active, body .c-cta:active,
body .cv-b:active, body .eb-btn:active, body .sc-b:active, body .cf-go:active, body .cf-cancel:active,
body .tb-home:active, body .tb-logout:active, body .tb-back:active, body .tb-burger:active,
body a[class*="-btn"]:active, body a[class*="-cta"]:active,
body a[class*="-tab"]:active, body a[class*="-chip"]:active,
body [role="button"]:active, body summary:active {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 0 0 3px rgba(255,255,255,.30),
              inset 0 2px 7px rgba(13,31,60,.22);
  filter: brightness(1.09) saturate(1.08);
}

/* เลื่อนด้วยแป้นพิมพ์ก็ต้องเห็นว่าอยู่ปุ่มไหน */
button:focus-visible,
input[type="submit"]:focus-visible,
a[class*="-btn"]:focus-visible, a[class*="-cta"]:focus-visible,
.btn:focus-visible, .oa-btn:focus-visible, .c-cta:focus-visible,
a[class*="-tab"]:focus-visible, a[class*="-chip"]:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
  outline: 3px solid #c9a961;
  outline-offset: 2px;
}

/* ปุ่มที่กดไม่ได้ ต้องดูออกว่ากดไม่ได้ */
button:disabled, input[type="submit"]:disabled {
  box-shadow: none;
  transform: none;
  filter: grayscale(.35) opacity(.7);
  cursor: not-allowed;
}

/* ── ช่องกรอก: คลิกแล้วต้องรู้ว่าอยู่ช่องไหน ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: #c9a961;
  box-shadow: 0 0 0 3px rgba(201,169,97,.22);
}

/* ── การ์ด/กล่อง: ให้มีความตื้นลึก ไม่แบนเท่ากันหมด ── */
.kpi-card, .oa-card, .ld-box, .c-box, .cv-row, .c-list, .c-now-t, .q, .step {
  transition: box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 1px 2px rgba(13,31,60,.06),
              0 4px 14px rgba(13,31,60,.07);
}
@media (hover: hover) and (pointer: fine) {
  .kpi-card:hover, .oa-card:hover, .cv-row:hover, .q:hover {
    box-shadow: 0 2px 4px rgba(13,31,60,.08),
                0 10px 26px rgba(13,31,60,.13);
    transform: translateY(-2px);
  }
}

/* การ์ดที่กดได้ (กล่องบอร์ดแคส) — ยกชัดกว่าเดิม เพราะมันคือปุ่ม */
.bx { transition: transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s ease }
@media (hover: hover) and (pointer: fine) {
  .bx:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,31,60,.17) }
}
.bx:active { transform: translateY(1px) scale(.99) }

/* แถวในรายการที่กดได้ */
.c-ep, .cf-p, .cf-grp > summary, .lk-panel summary, .dd-more summary {
  transition: background .13s ease
}
@media (hover: hover) and (pointer: fine) {
  .c-ep:hover, .cf-grp > summary:hover, .lk-panel summary:hover { background: #f8fafc }
}
.c-ep:active, .cf-grp > summary:active { background: #f1f5f9 }

/* ── คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว ต้องเคารพ ── */
@media (prefers-reduced-motion: reduce) {
  button, input[type="submit"], .btn, .oa-btn, .c-cta, .bx,
  .kpi-card, .oa-card, .cv-row, .q, .c-ep, [role="button"], summary {
    transition: none !important;
    transform: none !important;
  }
}