/* ==========================================================================
   fit.css — ปรับขนาดหน้าจอให้โปร่งบนจอคอมขนาดเล็ก (เช่น 17 นิ้ว / 1366×768)
   ทั้งระบบย่อ-ขยายตามขนาดจอแบบต่อเนื่อง: จอ 1920×1080 หน้าตาเท่าเดิม จอเล็กกว่าย่อลง จอใหญ่กว่าขยายขึ้น
   มีผลกับหน้าที่ล็อกอินแล้ว (จอ ≥ 992px) และหน้า Login (จอ ≥ 901px) · ไม่กระทบมือถือและการพิมพ์
   ========================================================================== */
@media screen and (min-width: 992px) {
  /* ตัวอักษรและระยะที่เป็น rem ทั้งระบบ: ยึดด้านที่เล็กกว่าระหว่างกว้างกับสูง
     ไม่ต่ำกว่า 14.5px เพื่อให้ภาษาไทยยังอ่านสบาย · จอใหญ่กว่า 1920×1080 ขยายได้ถึง 18px */
  html:has(.app) { font-size: clamp(14.5px, min(calc(10.8px + .27vw), calc(12.2px + .35vh)), 18px); }

  :root {
    --sidebar-w: clamp(228px, calc(143px + 6.5vw), 300px);
    --topbar-h: clamp(58px, calc(30px + 3.5vh), 76px);
  }

  /* ตัวอักษรเล็กมาก: ไม่ให้เล็กลงตามจนอ่านยาก */
  .brand-sub { font-size: max(.74rem, 11.5px); }
  .dx-kpi-meta { font-size: max(.82rem, 12.5px); }
  .sidebar-foot { padding-inline: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* การ์ดทักทาย: เตี้ยลงตามเนื้อหา ไม่ล็อกความสูง */
  .dx-hero {
    min-height: clamp(142px, 23vh, 196px); container: dx-hero / inline-size;
    padding: clamp(.8rem, 2.6vh, 1.6rem) clamp(1.1rem, 2vw, 1.7rem) clamp(.75rem, 2.2vh, 1.4rem);
  }
  .dx-eyebrow { margin-bottom: clamp(.2rem, .9vh, .55rem); }
  .dx-hero h1 { font-size: clamp(1.3rem, 3.5vh, 1.95rem); line-height: 1.25; }
  .dx-hero p { margin-top: .1rem; font-size: clamp(.86rem, 1.7vh, .98rem); }
  .dx-actions { margin-top: clamp(.45rem, 1.6vh, 1.15rem); }
  .dx-actions .btn { padding: clamp(.28rem, .9vh, .5rem) clamp(.7rem, 1vw, 1rem); font-size: clamp(.84rem, 1.6vh, .92rem); }

  /* การ์ดตัวเลขและแถบติดตาม: เตี้ยลงตามความสูงจอ */
  .dx-kpi { grid-template-rows: auto auto clamp(18px, 5vh, 38px) auto; gap: clamp(.2rem, .8vh, .45rem); padding: clamp(.55rem, 1.6vh, 1.1rem) 1.1rem clamp(.5rem, 1.5vh, 1rem); }
  .dx-kpi-ico { width: clamp(28px, 4.4vh, 36px); height: clamp(28px, 4.4vh, 36px); }
  .dx-kpi-val { font-size: clamp(1.55rem, 4.4vh, 2.3rem); }
  .dx-watch-item { padding-block: clamp(.35rem, 1.1vh, .7rem); }
  .dx-watch { margin-bottom: clamp(.75rem, 2.4vh, 1.5rem); }

  /* กล่องนาฬิกา: ย่อทุกชิ้นตามความสูงจอ ไม่ให้ล้นกล่อง */
  .dx-hero:has(.dx-clock :is(.dx-life, .dx-nextno)) .dx-clock { padding-block: clamp(.3rem, 1vh, .6rem); }
  .dx-clock:has(.dx-life, .dx-nextno) .dx-clock-time b { font-size: clamp(1.45rem, 3.8vh, 2.15rem); }
  .dx-clock:has(.dx-life, .dx-nextno) .dx-clock-time i { font-size: clamp(1.3rem, 3.4vh, 1.9rem); }
  .dx-clock .dx-nextno { gap: clamp(.12rem, .4vh, .25rem); margin-top: clamp(.15rem, .6vh, .4rem); }
  .dx-clock .dx-nn { padding-block: clamp(.05rem, .3vh, .2rem); }
  .dx-clock .dx-nn-ico { width: clamp(1.05rem, 2.2vh, 1.3rem); height: clamp(1.05rem, 2.2vh, 1.3rem); }
  .dx-clock .dx-life, .dx-clock .dx-life:has(.dx-tier) { margin-top: clamp(.12rem, .6vh, .4rem); padding-top: clamp(.1rem, .5vh, .35rem); }

  /* ภาพประกอบใช้ความกว้างของการ์ดเป็นเกณฑ์ ไม่ใช่ความกว้างจอ จึงไม่ทับปุ่มลัด */
  @container dx-hero (max-width: 1180px) {
    .dx-art, .dx-hero:has(.dx-clock :is(.dx-life, .dx-nextno)) .dx-art { display: block; width: 165px; right: 265px; bottom: -4px; }
  }
  @container dx-hero (max-width: 940px) {
    .dx-art, .dx-hero:has(.dx-clock :is(.dx-life, .dx-nextno)) .dx-art { display: none; }
  }
}

/* จอใหญ่: กล่องนาฬิกาขยายตามตัวอักษร ภาพประกอบต้องขยับหนีตาม */
@media screen and (min-width: 2000px) {
  .dx-art { right: 16rem; }
  .dx-hero:has(.dx-clock :is(.dx-life, .dx-nextno)) .dx-art { right: 20rem; }
}

/* ของในกรอบแคบต้องหดและตัดบรรทัดได้ ไม่ดันหน้าล้นจอ */
.meta-grid > dd { min-width: 0; overflow-wrap: anywhere; }
.meta-grid .chip { white-space: normal; max-width: 100%; }
.dx-grid-charts > *, .dx-grid-lists > * { min-width: 0; }
.dx-grid-charts canvas { max-width: 100%; }

/* ตารางทะเบียน: จอไม่กว้างพอ บีบช่องให้เห็นครบทุกคอลัมน์โดยไม่ต้องเลื่อนข้าง */
@media screen and (min-width: 992px) and (max-width: 1699.98px) {
  .table > thead th { padding-inline: .5rem; }
  .table > tbody td { padding: .55rem .5rem; }
  .table td[data-label="เรื่อง"] { min-width: 13rem !important; }
  .table td.col-from { min-width: 0; max-width: 9.5rem; }
  .table td.owner-col { min-width: 7.5rem; }
  .rm-roles th { min-width: 92px; }
  .rm-table .rm-perm-h { min-width: 200px; }
}
@media screen and (min-width: 992px) and (max-width: 1299.98px) {
  .table td[data-label="เรื่อง"] { min-width: 11.5rem !important; }
}

/* จอเตี้ย: เก็บพื้นที่เมนูข้างและการ์ด */
@media screen and (min-width: 992px) and (max-height: 800px) {
  .page-head h1.mb-0 { font-size: 1.15rem !important; line-height: 1.3; } /* ชื่อหนังสือยาว: ไม่ดัน PDF ตกจอ */
  .brand-en { display: none !important; } /* ชนะ .d-block ของ Bootstrap */
  .side-link { padding-block: .5rem; }
  .nav-section { padding-top: .7rem; }
  .sidebar-foot { padding-block: .55rem; }
}

/* ---------- หน้า Login (จอคอม) — เกณฑ์เดียวกับ login.css ---------- */
@media screen and (min-width: 901px) {
  html:has(.lg) { font-size: clamp(14.5px, min(calc(10.8px + .27vw), calc(12.2px + .35vh)), 18px); }
  .lg-box { max-width: 23.75rem; }
}
@media screen and (min-width: 901px) and (max-height: 820px) {
  .lg-logo { width: 96px; margin-bottom: 1.1rem; }
  .lg-input, .lg-btn { height: 44px; }
  .lg-pw button { top: 2px; }
}
@media screen and (min-width: 901px) and (max-height: 680px) {
  .lg-logo { width: 68px; margin-bottom: .75rem; }
  .lg-title { font-size: 1.4rem; }
  .lg-input, .lg-btn { height: 40px; }
  .lg-pw button { top: 0; }
  .lg-foot { margin-top: .75rem; }
}