/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ==========================================================================================
   Responsive modal fixes — ใช้ร่วมกันทุกหน้า (ไฟล์นี้โหลดจาก template/head.php อยู่แล้วทุกหน้า)
   แทนที่จะไปแก้ทีละไฟล์ ที่มาของปัญหา: แต่ละหน้ามักประกาศคลาสกว้างโมดัลของตัวเอง (.modal-70,
   .modal-80, .modal-85, .modal-90, .modal-xl) เป็น max-width แบบ % + margin:1.75rem แบบ desktop
   ซึ่งใช้ได้ดีตั้งแต่จอ tablet ขึ้นไป (มี media query ที่ 768px/992px อยู่แล้ว) แต่ยังไม่ได้ปรับสำหรับ
   จอมือถือจริงๆ (iPhone ฯลฯ กว้าง ~375-430px) โดยเฉพาะ 2 จุด:
   1. margin แนวตั้งแบบ desktop (1.75rem บน+ล่าง) ยังกินพื้นที่จอที่มีจำกัดอยู่ (ยิ่งแย่ตอนคีย์บอร์ด
      มือถือเด้งขึ้นมา เหลือพื้นที่แนวตั้งน้อยลงไปอีก)
   2. เนื้อหากว้างในโมดัล (ตาราง 3 คอลัมน์ของ change_payment_methods, ตารางตั้งเป้าหมายรายเดือนของ
      dashboard ฯลฯ) จะโดน .modal{overflow-x:hidden} ของ Bootstrap "ตัดขอบขวาทิ้งเฉยๆ" ไม่ใช่แค่ทำให้
      หน้าเว็บล้นแนวนอน — ผู้ใช้มองไม่เห็นส่วนที่ถูกตัดเลย ไม่มีทางเลื่อนไปดูได้

   ใช้ selector 2 ชั้น (.modal .modal-dialog ฯลฯ) โดยตั้งใจ เพื่อให้ specificity (0,2,0) สูงกว่าคลาส
   เดี่ยวที่แต่ละหน้าประกาศเอง (.modal-70 ฯลฯ specificity 0,1,0) การันตีว่ากฎที่นี่ชนะเสมอไม่ว่าจะโหลด
   ก่อนหรือหลัง แม้ทั้งคู่จะใช้ !important ก็ตาม (specificity ตัดสินก่อนลำดับการโหลดเสมอเมื่อ !important
   เท่ากัน)
   ========================================================================================== */
@media (max-width: 576px) {
    .modal .modal-dialog {
        width: auto !important;
        max-width: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
    }

    /* จำกัดความสูงกล่อง modal-content ไว้อย่างเดียวโดยไม่ตัด/เลื่อนเนื้อหาข้างในจะทำให้เนื้อหายาว
       (เช่นฟอร์มพนักงานที่มีหลายฟิลด์) ล้นออกมานอกกรอบกล่องให้เห็น (ไม่ใช่ล้นแบบมีสกรอลบาร์) — ต้องตั้ง
       overflow:hidden ที่ตัวกล่อง + flex-shrink:0 ที่ header/footer (ไม่ให้ถูกบีบ) + overflow-y:auto
       เฉพาะที่ modal-body เพื่อให้ตัวฟอร์มที่ยาวเลื่อนขึ้นลงได้เองในกรอบ ส่วน header/footer ล็อกอยู่กับที่
       เสมอ (พฤติกรรมเดียวกับ Bootstrap .modal-dialog-scrollable แต่ใช้ได้ทุกโมดัลโดยไม่ต้องเติมคลาสนั้น) */
    .modal .modal-dialog {
        max-height: calc(100vh - 1rem);
    }

    .modal .modal-content {
        max-height: calc(100vh - 1rem);
        overflow: hidden;
    }

    /* บางหน้า (เช่น user/employee.php) ห่อ modal-body + modal-footer ไว้ด้วย <form> อีกชั้นหนึ่ง
       ก่อนถึง modal-content — <form> ธรรมดาไม่ใช่ flex container จึงตัดสายการกระจายพื้นที่ของ
       flexbox ระหว่าง modal-content (flex column) กับ modal-body ทำให้ modal-body คำนวณความสูงจาก
       เนื้อหาไม่จำกัด (ไม่ยอมหด) แล้วโดน overflow:hidden ของ modal-content ตัดเนื้อหาส่วนเกินทิ้งเงียบๆ
       (มองไม่เห็นเลย ไม่ใช่แค่เลื่อนไม่ได้) ต้องบังคับ <form> ที่เป็นลูกตรงของ modal-content ให้เป็น
       flex column ด้วยเหมือนกัน เพื่อให้ modal-body ข้างในหดตามพื้นที่ที่เหลือได้จริง — ทดสอบยืนยันแล้ว
       ว่าขาดข้อนี้ไปจุดเดียว ทำให้ scrollbar ไม่ขึ้นเลยแม้ modal-body จะตั้ง overflow-y:auto ไว้แล้วก็ตาม */
    .modal .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .modal .modal-header {
        padding: 0.85rem 1rem;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .modal .modal-title {
        font-size: 1.05rem;
    }

    .modal .modal-body {
        padding: 0.85rem 1rem;
        /* เนื้อหายาว/กว้าง (ฟอร์มหลายฟิลด์, ตาราง/ฟอร์มหลายคอลัมน์) เลื่อนดูได้ในกรอบโมดัลเอง
           แทนที่จะถูกตัดขอบทิ้งหรือล้นออกนอกกล่อง */
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal .modal-footer {
        padding: 0.65rem 0.75rem;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .modal .modal-footer > * {
        margin: 0.2rem 0.25rem !important;
    }

    /* ฟอร์มควบคุมที่ตั้ง width ตายตัวเป็น px ในหน้าเดิม (เช่น select ปี/เดือน, input ตัวเลขเป้าหมาย)
       ต้องไม่ดันความกว้างเกินจอมือถือ */
    .modal .modal-body input[style*="width"],
    .modal .modal-body select[style*="width"] {
        max-width: 100% !important;
    }

    .modal .modal-body .row > [class^="col-"],
    .modal .modal-body .row > [class*=" col-"] {
        margin-bottom: 0.5rem;
    }
}