/* ============================================================================
   DDC-CPBMS — ชั้นปรับหน้าจอ (responsive layer)  ๙ ก.ย. ๒๕๖๙
   ----------------------------------------------------------------------------
   ไฟล์นี้ "ทับ" กฎเดิมอย่างเดียว ไม่ได้แก้ CSS ของเดิมสักบรรทัด
   จึงต้องถูกโหลด "หลัง" สไตล์อื่นทั้งหมดเสมอ (ดู layouts/responsive_head.php)

   ช่วงจอที่รองรับ
     <= 767px    มือถือ
     768-1024px  ไอแพด (แนวตั้ง/แนวนอน)   -> เมนูข้างกลายเป็นลิ้นชักเลื่อนออก
     1025-1440px โน้ตบุ๊ก                 -> โครงเดิม แต่กันตารางล้นขอบจอ
     > 1440px    จอตั้งโต๊ะ                -> ไม่แตะต้องของเดิมเลย

   จุดตัดสำคัญคือ 1024px เพราะ public/assets/js/app.js เดิมใช้ค่านี้อยู่แล้ว
   (initEnlarge: จอ < 1025 ใส่ .enlarged) การใช้ค่าเดียวกันทำให้ไม่มีช่วงจอไหน
   ตกอยู่ระหว่างสองพฤติกรรม  responsive.js จะถอด .enlarged ออกในช่วงนี้แล้ว
   ใช้ลิ้นชักแทน เพราะเมนูแบบแถบไอคอนของเดิมกางเมนูย่อยด้วย :hover
   ซึ่งนิ้วสัมผัสบนไอแพดสั่งไม่ได้
   ============================================================================ */

/* ── ๑. รากฐาน ──────────────────────────────────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* กันหน้าจอเลื่อนไปทางข้างเวลามีของล้นขอบ (อาการ "ปัดแล้วมีที่ว่างขาว")
   ใส่เฉพาะจอที่เล็กกว่าโน้ตบุ๊ก เพื่อไม่ให้กระทบหน้าที่ตั้งใจให้เลื่อนแนวนอนบนจอใหญ่ */
@media (max-width: 1024px) {
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* รูป/สื่อฝัง ไม่ให้ดันหน้าจอกว้างเกิน
   ไม่แตะ <canvas> กับ <svg> เพราะ Chart.js และ Highcharts กำหนดขนาดเองผ่าน
   inline style ถ้าไปบังคับ height:auto กราฟจะยุบแบน */
img,
video {
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* ── ๒. ตาราง ───────────────────────────────────────────────────────────── */

/* กล่องเลื่อนแนวนอน  responsive.js จะติดคลาสนี้ให้ "กล่องแม่ของตารางที่ล้นจริง"
   เท่านั้น (ไม่ได้ห่อ DOM ใหม่ เพื่อไม่ให้ .parent() ของสคริปต์เดิมเพี้ยน) */
.rsp-xscroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* บอกผู้ใช้ว่าปัดข้างได้ — ไล่เฉดขาวจางที่ขอบขวา */
.rsp-xscroll.rsp-xscroll-hint {
  background-image: linear-gradient(to left, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 24px);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 24px 100%;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {

  /* ตารางที่ถูกตรึงความกว้างไว้เป็นพิกเซล ให้ยุบตามเนื้อหาแทน
     (ยังกว้างเกินจอได้ แต่จะอยู่ในกล่อง .rsp-xscroll ที่ปัดได้) */
  table[width],
  table[style*="width"] {
    max-width: none;
  }

  .rsp-xscroll > table {
    margin-bottom: 0;
  }
}

/* ── ๓. ตัวเลือก/ฟอร์ม ─────────────────────────────────────────────────── */

@media (max-width: 767.98px) {

  /* iOS ซูมหน้าเข้าเองทุกครั้งที่จิ้มช่องกรอกที่ font-size < 16px
     เป็นต้นเหตุของอาการ "จิ้มช่องแล้วหน้าเบี้ยว" ที่แก้ด้วย user-scalable=no ไม่ได้
     (และไม่ควรแก้แบบนั้น เพราะปิดการซูมของผู้ใช้ไปด้วย) */
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* ช่องกรอกที่ถูกตรึงความกว้างเป็นพิกเซลในโค้ดเดิม */
  .form-control,
  .form-select,
  input[type=text],
  input[type=number],
  input[type=date],
  input[type=email],
  input[type=password],
  input[type=search],
  select,
  textarea {
    max-width: 100% !important;
  }

  .form-inline .form-control,
  .form-inline .form-group,
  .form-inline .input-group {
    width: 100% !important;
    margin-bottom: .5rem;
  }

  .form-inline {
    display: block !important;
  }

  /* select2 / bootstrap-select ที่ตั้งความกว้างมาเป็นพิกเซล */
  .select2-container,
  .bootstrap-select,
  .dropdown-menu.inner {
    max-width: 100% !important;
  }

  .select2-container {
    width: 100% !important;
  }

  /* แถวปุ่มท้ายฟอร์ม เรียงลงเป็นแถวเดียวจะกดง่ายกว่าบีบให้อยู่บรรทัดเดียว */
  .btn-group-vertical-sm-down,
  .rsp-btn-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}

/* ปุ่มบนจอสัมผัส ต้องกดโดนด้วยนิ้ว — เกณฑ์ที่ใช้กันคือ 44px */
@media (pointer: coarse) {

  /* เปลี่ยน display ได้เฉพาะกับคลาสปุ่มของเฟรมเวิร์ก ซึ่งเป็นปุ่มจริงแน่นอน
     ห้ามเหมารวม button / [role=button] เพราะระบบนี้ใส่ role="button" ให้ "การ์ด"
     เพื่อ a11y อยู่หลายที่ (เช่น .folder-card ใน global_file_manager.php)
     พอโดน display:inline-flex + align-items:center การ์ดจะยุบทั้งใบ
     — เคยพังมาแล้วจริง จึงเหลือไว้แค่ min-height ที่ไม่กระทบการจัดวาง */
  .btn,
  .page-link,
  .nav-link,
  .dropdown-item {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  button,
  [role=button] {
    min-height: 40px;
  }

  .btn-sm,
  .btn-xs {
    min-height: 34px;
  }

  /* ปุ่มไอคอนเล็ก ๆ ในตาราง (แก้ไข/ลบ) ขยายพื้นที่กดโดยไม่ขยายตัวปุ่ม */
  td .btn-sm,
  td .btn-xs {
    padding: .3rem .5rem;
  }

  .dropdown-item {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}

/* ── ๔. หน้าต่างซ้อน (modal / SweetAlert) ─────────────────────────────── */

@media (max-width: 767.98px) {
  .modal-dialog {
    margin: .5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .modal-body {
    padding: .75rem !important;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  .modal-footer > .btn {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
  }

  .swal2-popup {
    width: 92% !important;
    font-size: 15px !important;
  }

  /* <dialog> ของ UA มี max-width: calc(100% - 6px - 2em) ซึ่งกินขอบจนเนื้อหาหัก */
  dialog {
    max-width: calc(100% - 1rem) !important;
    width: calc(100% - 1rem) !important;
  }
}

/* ── ๕. DataTables ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  /* รุ่น 1.x */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: .5rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
  }

  /* รุ่น 2.x (dt-container / dt-layout-row) */
  div.dt-container .dt-layout-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  div.dt-container .dt-layout-cell {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: .25rem 0 !important;
  }

  div.dt-container .dt-search input {
    width: 100% !important;
  }

  div.dt-container .dt-paging {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
  }

  /* ปุ่ม export (Buttons) ตกบรรทัดแทนที่จะดันตารางให้กว้าง */
  div.dt-buttons {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
  }
}

/* ── ๖. จอ <= 1024px : เมนูข้างกลายเป็นลิ้นชัก ─────────────────────────── */

/* .rsp-mobile ติดที่ <body> โดย responsive.js เท่านั้น
   ใช้คลาสแทน media query ล้วน ๆ เพราะต้องคุมสถานะเปิด/ปิดลิ้นชักด้วย JS อยู่ดี
   และทำให้กฎเดิมที่มี !important ถูกทับได้แน่นอนโดยไม่ต้องแข่งความเฉพาะเจาะจง */

/* แถบบนสูง 58px แทน 90px — วัดจากของจริงแล้วพอดีกับแถวเดียวของปุ่มขวามือ */
body.rsp-mobile .topbar {
  height: 58px !important;
}

/* บล็อกโลโก้ซ้าย 300px กินพื้นที่เกินครึ่งจอมือถือ — ซ่อนทั้งบล็อก
   แล้วให้แถบขวาเริ่มจากขอบจอ ปุ่มขีดสามขีดจะไปอยู่ตรงมุมซ้ายบนแทน */
body.rsp-mobile .topbar .topbar-left,
body.rsp-mobile .topbar-logo {
  display: none !important;
}

body.rsp-mobile .navbar-custom {
  margin-left: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  padding-left: 56px !important;
  padding-right: 6px !important;
}

body.rsp-mobile .navbar-custom .nav-link {
  padding: 0 2px;
}

/* แถวปุ่มขวามือ (โปรไฟล์/ออกจากระบบ) สูง 70px ดันแถบบนเกิน
   บีบให้อยู่ในแถวเดียวสูง 58px */
body.rsp-mobile .navbar-custom .navbar-right {
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

body.rsp-mobile .navbar-custom .navbar-right > li {
  float: none !important;
  display: flex !important;
  align-items: center;
}

/* ── ปุ่มขีดสามขีด ────────────────────────────────────────────────────
   ปัญหาที่วัดเจอจากหน้าจริง: ul.menu-left ที่ครอบปุ่มนี้อยู่หลัง
   ul.navbar-right ที่ float:right เต็มความกว้าง ปุ่มจึงตกไปบรรทัดที่สอง
   ทำให้ .topbar สูง 128px คลุมทับเนื้อหาด้านล่างแบบมองไม่เห็น
   แก้ด้วยการถอด ul.menu-left ออกจากการไหลของข้อความ ไปวางทับบล็อกซ้าย
   (.topbar เป็น position:fixed จึงเป็น containing block ให้ absolute ได้เลย) */
body.rsp-mobile .topbar .menu-left {
  /* absolute ไม่ใช่ fixed — .navbar-custom มี backdrop-filter ซึ่งทำให้มัน
     กลายเป็น containing block ของลูกที่ position:fixed ไปด้วย
     (วัดจากหน้าจริง: ตั้ง fixed left:0 แล้วปุ่มไปโผล่ที่ x=62 ไม่ใช่ 0)
     พอซ่อน .topbar-left และตั้ง margin-left:0 แล้ว absolute left:0
     จึงตรงกับขอบจอพอดี */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 56px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10060;
}

body.rsp-mobile .topbar .menu-left > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* ชื่อระบบยาว ๆ ที่อยู่ใน menu-left ด้วย ต้องซ่อน ไม่งั้นทับปุ่ม */
body.rsp-mobile .topbar .menu-left > li:not(:first-child) {
  display: none !important;
}

/* ของเดิมสั่ง display:none !important ไว้ใน navbar.php บรรทัด ~1337 */
body.rsp-mobile .button-menu-mobile {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .06);
}

body.rsp-mobile .button-menu-mobile i {
  font-size: 20px;
}

/* ปุ่มที่ responsive.js สร้างให้เองในระบบย่อยที่ไม่มีปุ่มมาแต่เดิม
   ค่าตั้งต้นต้องซ่อน ไม่งั้นพอย่อ/ขยายกลับไปจอใหญ่ ปุ่มจะค้างอยู่บนแถบบน
   (ปุ่มถูกสร้างครั้งเดียวแล้วอยู่ใน DOM ตลอด ไม่ได้ถูกลบทิ้งตอนออกจากโหมด) */
.button-menu-mobile.rsp-made-btn {
  display: none;
}

body.rsp-mobile .button-menu-mobile.rsp-made-btn {
  border: none;
  color: #334155;
  cursor: pointer;
}

body.rsp-mobile .button-menu-mobile svg {
  width: 20px;
  height: 20px;
}

/* ระบบย่อยที่ไม่มี .topbar-left ให้ปุ่มอยู่ในสายการไหลปกติ ไม่ต้องดันไปมุม */
body.rsp-mobile .navbar-custom > .button-menu-mobile {
  position: absolute;
  top: 7px;
  left: 6px;
  z-index: 10060;
}

/* ── ลิ้นชักเมนู ──────────────────────────────────────────────────────
   ใช้ left ไม่ใช่ transform  — ทดสอบบนหน้าจริงแล้วพบว่ามีกฎ
   -webkit-transform ที่อ่านจาก CSSOM ไม่เห็น ทับ transform ของเราอยู่
   (ตั้ง translateX(-999px) !important ยังได้ matrix เอกลักษณ์)
   ส่วน left ทับได้จริง และ headerStyle.css ก็ประกาศ
   transition: left .3s !important ไว้อยู่แล้ว จึงได้อนิเมชันฟรี */
body.rsp-mobile .left.side-menu {
  position: fixed !important;
  top: 58px !important;
  bottom: 0 !important;
  left: -320px !important;
  width: 280px !important;
  max-width: 84vw;
  height: auto !important;
  z-index: 10050 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  transition: left .28s cubic-bezier(.4, 0, .2, 1) !important;
  box-shadow: none;
}

body.rsp-mobile.rsp-nav-open .left.side-menu {
  left: 0 !important;
  /* กฎเดิมที่จอ <= 768px สั่ง box-shadow: none !important ไว้ */
  box-shadow: 4px 0 24px rgba(0, 0, 0, .28) !important;
}

/* ฉากหลังทึบเวลาลิ้นชักเปิด — กดที่ฉากเพื่อปิด */
#rsp-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

body.rsp-mobile.rsp-nav-open #rsp-nav-overlay {
  opacity: 1;
  visibility: visible;
}

/* พื้นที่เนื้อหาเต็มจอ ไม่ต้องเว้นที่ให้เมนูอีกแล้ว */
body.rsp-mobile .content-page {
  margin-left: 0 !important;
}

body.rsp-mobile .content-page .content {
  margin-top: 64px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.rsp-mobile #wrapper {
  overflow-x: hidden;
  /* headerStyle.css สั่ง #wrapper{padding-top:70px !important} ที่จอ <= 768px
     รวมกับ .content{margin-top} เดิมแล้วเนื้อหาถูกดันลงไป 135px
     ทั้งที่แถบบนสูงแค่ 58px — เกิดเป็นแถบว่างใหญ่ใต้หัวเรื่องทุกหน้า */
  padding-top: 0 !important;
}

/* เมนูย่อยของเดิมกางด้วย :hover ตอนอยู่โหมดแถบไอคอน
   ในลิ้นชักต้องกลับไปใช้การกด (metisMenu) จึงต้องล้างกฎ hover ทิ้ง */
body.rsp-mobile #sidebar-menu ul > li:hover > ul {
  display: none;
}

body.rsp-mobile #sidebar-menu ul > li > a span {
  display: inline !important;
}

body.rsp-mobile #sidebar-menu ul li a {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ล็อกไม่ให้หน้าหลังเลื่อนตามตอนลิ้นชักเปิด */
body.rsp-nav-open {
  overflow: hidden !important;
}

/* ── ๗. จอ <= 767px : บีบเพิ่มอีกชั้น ─────────────────────────────────── */

@media (max-width: 767.98px) {

  /* ปุ่มมุมขวาบนรวมกัน 420px บนจอ 390px จึงล้นไปทางซ้ายทับปุ่มขีดสามขีด
     (วัดจากหน้าจริง: หน้าแรก 126 + โปรไฟล์ 156 + ออกจากระบบ 118)
     เหลือแต่ไอคอน = 158px พอดีจอ  ข้อความเต็มยังอยู่ครบตั้งแต่ไอแพดขึ้นไป */
  body.rsp-mobile .btn-home-navbar-direct,
  body.rsp-mobile .btn-logout-navbar-direct {
    /* ข้อความเป็น text node ลอย ๆ ข้าง <svg> เลือกด้วย selector ไม่ได้
       จึงยุบด้วย font-size:0 แล้วคืนขนาดให้ไอคอนเอง */
    font-size: 0 !important;
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.rsp-mobile .btn-home-navbar-direct svg,
  body.rsp-mobile .btn-logout-navbar-direct svg,
  body.rsp-mobile .btn-home-navbar-direct i,
  body.rsp-mobile .btn-logout-navbar-direct i {
    font-size: 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  body.rsp-mobile .nav-user-pill-modern .user-text-col,
  body.rsp-mobile #navbarUserChevron {
    display: none !important;
  }

  body.rsp-mobile .nav-user-pill-modern {
    padding: 0 6px !important;
  }


  body.rsp-mobile .content-page .content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .card {
    border-radius: 10px;
  }

  .card-body {
    padding: .75rem !important;
  }

  /* คอลัมน์ของ Bootstrap ที่ถูกกำหนดไว้แค่ระดับ lg/xl จะไม่ยุบบนมือถือ
     เพราะไม่มีคลาสระดับ col-12 กำกับ — บังคับให้เต็มแถว */
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-md-2, .col-md-3, .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* หัวข้อใหญ่เกินจอ */
  h1 { font-size: 20px; }
  h2 { font-size: 19px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  h5 { font-size: 15px; }

  /* แถบเครื่องมือ/แถวปุ่มที่จัดชิดขวาไว้ ให้ตกบรรทัดแทนล้นขอบ */
  .d-flex.justify-content-between,
  .card-header {
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* breadcrumb / pagination ยาวเกินจอ */
  .breadcrumb,
  .pagination {
    flex-wrap: wrap;
  }

  /* ตารางสรุปที่ใช้ font เล็กอยู่แล้ว อ่านไม่ออกบนมือถือ */
  table.table td,
  table.table th {
    padding: .45rem .4rem;
  }
}

/* ── ๘. ไอแพดแนวตั้ง 768-1024 ─────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {

  /* กริดที่ตั้งไว้ 3-4 คอลัมน์บนจอใหญ่ เหลือ 2 คอลัมน์กำลังพอดี */
  .col-xl-3,
  .col-xl-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* กริดแบบ CSS grid ที่ตรึงจำนวนคอลัมน์ไว้ */
  .bud-cards,
  .rsp-grid-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── ๙. โน้ตบุ๊ก 1025-1440 ─────────────────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1440px) {

  /* ไม่แตะโครงเมนู (เมนูข้าง 300px ยังอยู่ครบ) แค่กันเนื้อหาล้นขอบขวา
     ซึ่งเป็นอาการหลักบนโน้ตบุ๊ก 1366x768 */
  .content-page {
    max-width: 100%;
    overflow-x: hidden;
  }

  .content-page .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* การ์ดสี่ใบต่อแถวบีบจนตัวเลขตกบรรทัดบนจอ 1366 */
  .mini-stat .mini-stat-info,
  .card .card-title {
    word-break: break-word;
  }
}

/* ── ๑๐. จอสูงน้อย (โน้ตบุ๊ก 768px แนวสูง) ───────────────────────────── */

@media (max-height: 800px) and (min-width: 1025px) {

  /* แถบบน 90px + เมนู กินพื้นที่แนวตั้งไปมากบนจอ 1366x768 */
  .content-page .content {
    margin-bottom: 20px;
  }
}

/* ── ๑๑. พิมพ์ ─────────────────────────────────────────────────────────── */

@media print {

  #rsp-nav-overlay,
  .button-menu-mobile {
    display: none !important;
  }

  /* ตอนพิมพ์ต้องเห็นตารางครบ ห้ามตัดด้วยกล่องเลื่อน */
  .rsp-xscroll {
    overflow: visible !important;
  }
}