/* ตัวหนังสือปกติ (Regular) */
@font-face {
    font-family: 'Noto Sans Thai Local';
    src: url('../../fonts/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ตัวหนา (Bold) */
@font-face {
    font-family: 'Noto Sans Thai Local';
    src: url('../../fonts/NotoSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ==========================================
2. บังคับฟอนต์ทุกจุดรวมถึงปุ่มและอินพุต ให้เป็นฟอนต์ไทย 'Noto Sans Thai Local' (ยกเว้น Code Block)
========================================== */
.swagger-ui,
.swagger-ui *,
.swagger-ui input,
.swagger-ui select,
.swagger-ui textarea,
.swagger-ui button {
    font-family: 'Noto Sans Thai Local', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/** 
    ยกเว้นส่วนที่เป็น Code Block (เช่น JSON Response) 
    ให้ยังคงเป็นแบบ Monospace เพื่อให้อ่านโค้ดง่าย แต่สลับเป็นฟอนต์ไทยเมื่อมีข้อความภาษาไทย 
**/
.swagger-ui code,
.swagger-ui code *,
.swagger-ui pre,
.swagger-ui pre * {
    font-family: Courier New, Courier, monospace, 'Noto Sans Thai Local' !important;
}

/* ==========================================
3. TOPBAR & HEADER (ส่วนหัวสีน้ำเงิน TASCO)
========================================== */
.swagger-ui .topbar {
    background-color: #1b4e9b !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 12px 0;
}

/* ==========================================
4. INFO & BADGES (ข้อมูลทั่วไป และ ป้ายสีส้ม)
========================================== */
.swagger-ui .info .title small {
    background-color: #fca130 !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 700 !important;
    margin-left: 10px;
    vertical-align: middle;
}

/** หัวข้อหลัก title **/
    .swagger-ui .info .title {
        color: #2c3e50;
        font-weight: 700;
    }

/* ==========================================
5. BUTTONS & INTERACTION (ปุ่มต่างๆ)
========================================== */
.swagger-ui .btn.authorize {
    border-color: #fca130 !important;
    color: #fca130 !important;
    background-color: transparent;
    transition: all 0.2s ease;
    font-weight: 700;
}

.swagger-ui .btn.authorize:hover {
    background-color: #fca130 !important;
    color: #fff !important;
}

.swagger-ui .btn.authorize svg {
    fill: #fca130 !important;
}

.swagger-ui .btn.authorize:hover svg {
    fill: #fff !important;
}

.swagger-ui .execute {
    background-color: #1b4e9b !important;
    color: white !important;
    border: none !important;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-weight: 700;
}

.swagger-ui .execute:hover {
    background-color: #12356a !important;
}

.swagger-ui .btn.clear {
    border-radius: 4px;
}

/* ==========================================
6. API BLOCKS (ปรับแต่งแถบแสดงผล API)
========================================== */
.swagger-ui .opblock {
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.08) !important;
}

.swagger-ui table thead tr th {
    color: #1b4e9b;
    border-bottom: 2px solid #1b4e9b;
    font-weight: 700;
}

/* หัวข้อในแต่ละหมวด*/
    .swagger-ui .opblock-tag {
        color: #1b4e9b;
        border-bottom: 1px solid #e5e5e5;
        padding: 10px 0;
        font-weight: 700;
    }

/* ส่วนของรายละเอียดใน endpoint */
    .swagger-ui .opblock .opblock-summary-description {
        color: #0000CD;
        flex: 1 1 auto;
        font-size: 13px;
        word-break: break-word;
    }

    /** endpoint **/
    .swagger-ui .opblock .opblock-summary-path {
        font-size: 15px;
    }

    /** group แต่ละ method **/
.operation-tag-content {
    margin-left: 20px;
}

/* ==========================================
   7. RENDERED MARKDOWN (ปรับขนาดฟอนต์ส่วนคำอธิบาย)
   ========================================== */
/* ปรับขนาดฟอนต์ของข้อความทั่วไปในกล่อง Markdown ให้ใหญ่ขึ้น */
.swagger-ui .renderedMarkdown p {
    font-size: 15px !important; /* ค่าเริ่มต้นมักจะเล็กไป ปรับเป็น 15px หรือ 16px ตามชอบ */
    line-height: 1.6 !important; /* เพิ่มระยะห่างระหว่างบรรทัดให้อ่านภาษาไทยง่ายขึ้น */
    color: #3b4151 !important; /* ปรับสีตัวอักษรให้เข้มชัดเจน */
}

/* ปรับขนาดหัวข้อย่อยด้านใน Markdown (ถ้ามีการใช้ #, ##, ### ใน Description) */
.swagger-ui .renderedMarkdown h1 {
    font-size: 1.6em !important;
    font-weight: 700 !important;
    color: #1b4e9b !important;
}

.swagger-ui .renderedMarkdown h2 {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    color: #1b4e9b !important;
}

.swagger-ui .renderedMarkdown h3 {
    font-size: 1.2em !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
}

/* ปรับฟอนต์สำหรับข้อความที่เป็นรายการสัญลักษณ์ (Bullet Points) */
.swagger-ui .renderedMarkdown li {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 4px;
}

/* ปรับแต่งความสวยงามของตารางที่อยู่ใน Markdown Description (ถ้ามี) */
.swagger-ui .renderedMarkdown table {
    margin-top: 8px !important;
    border-collapse: collapse !important;
}

    .swagger-ui .renderedMarkdown table td {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }


/* ==========================================
   8. REDUCE INFO DESCRIPTION SPACING (ลดช่องว่างบน-ล่าง)
   ========================================== */
/* ลดช่องว่างของกล่องข้อความอธิบายภาพรวมด้านบนสุด */
.swagger-ui .info .description {
    margin-top: 5px !important; /* ลดช่องว่างด้านบนของข้อความ */
    margin-bottom: 5px !important; /* ลดช่องว่างด้านล่างของข้อความ */
    padding: 0 !important; /* ล้างค่าระยะห่างภายใน */
}

    /* ลดช่องว่างของย่อหน้า (Paragraph) ด้านในกล่อง Markdown ของ Info */
    .swagger-ui .info .description .renderedMarkdown p {
        margin-top: 0 !important;
        margin-bottom: 8px !important; /* เว้นระยะห่างระหว่างบรรทัดพารากราฟให้พอดี */
    }

/* ลดขอบเขตด้านล่างรวมของเซกชัน Info ทั้งหมดก่อนจะเริ่มเข้าสู่แถบ API */
.swagger-ui .info {
    margin: 15px 0 4px 0 !important;
}

/* ==========================================
   9. REDUCE SCHEME-CONTAINER SPACING (ลดช่องว่างแถบโปรโตคอล/Authorize)
   ========================================== */
.swagger-ui .scheme-container {
    margin: 10px 0 !important; /* ลดระยะห่างภายนอก (บนและล่าง) ให้เหลือ 10px */
    padding: 12px 0 !important; /* ลดระยะห่างภายใน (ความหนาของแถบ) ให้กระชับขึ้น */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* ปรับเงาให้บางลง ดูมินิมอลขึ้น */
}

    /* ลดช่องว่างของกล่องเลือกสกีมาด้านใน (ถ้าระบบมีหลายสกีมา) */
    .swagger-ui .scheme-container .schemes {
        padding: 0 20px !important; /* ปรับระยะเยื้องซ้าย-ขวาให้พอดีกับขอบคอนเทนต์ */
        display: flex;
        align-items: center; /* จัดกึ่งกลางแนวตั้งให้อินพุตกับปุ่มบาลานซ์กัน */
    }

/* ==========================================
   10. MODEL-BOX CUSTOMIZATION (ขยายกว้างและจัดแถวเดียว)
   ========================================== */
/* ขยายตัวกล่องโมเดลหลักให้กว้างเต็มพื้นที่โครงสร้างซ้าย-ขวา */
.swagger-ui .model-box {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

    /* บังคับให้โครงสร้างตัวแปรแต่ละบรรทัดแสดงผลแบบยืดหยุ่น (Flexbox) */
    .swagger-ui .model-box .model-box-wrapper {
        width: 100% !important;
    }

/* จัดระเบียบตัวแปรแต่ละบรรทัด (Property Row) */
.swagger-ui .model-table tr,
.swagger-ui .property-row {
    display: flex !important;
    flex-wrap: nowrap !important; /* ห้ามหลุดไปบรรทัดใหม่ */
    align-items: baseline !important;
    padding: 6px 0 !important; /* เพิ่มพื้นที่ช่องไฟให้อ่านง่าย */
    border-bottom: 1px dashed #f0f0f0; /* ใส่เส้นคั่นจางๆ ให้ดูเป็นระเบียบ */
}

    /* บังคับให้ชื่อตัวแปร (Key) และ ชนิดข้อมูล (Type) อยู่แถวเดียวกัน */
    .swagger-ui .property-row .key {
        flex: 0 0 auto !important; /* คงขนาดของชื่อตัวแปรไว้ */
        white-space: nowrap !important; /* ห้ามชื่อตัวแปรตัดบรรทัดเด็ดขาด */
        margin-right: 15px !important; /* เว้นระยะห่างก่อนไปเจอคำอธิบาย */
    }

    /* ส่วนแสดงผล ชนิดข้อมูล และ รายละเอียดเพิ่มเติม */
    .swagger-ui .property-row .model,
    .swagger-ui .property-row .prop-format,
    .swagger-ui .property-row .prop-type {
        display: inline-flex !important;
        white-space: nowrap !important; /* ล็อกชนิดข้อมูลให้อยู่แถวเดียวกับชื่อตัวแปร */
        margin-right: 10px !important;
    }

    /* ส่วนของข้อความอธิบายตัวแปร (Description) ถ้ามี ให้ขยายพื้นที่เต็มที่เหลือ */
    .swagger-ui .property-row .markdown {
        flex: 1 1 auto !important;
        display: inline-block !important;
    }

    /* ==========================================
   11. FIX DATATYPE TD (เจาะจงโครงสร้างจริงตาม HTML)
   ========================================== */
    /* สั่งซ่อนแท็ก <br> ตัวการที่ฝังมาใน Property เพื่อไม่ให้ระเบิดบรรทัด */
    .swagger-ui .property-row td .prop br {
        display: none !important;
    }

    /* บังคับให้กล่องหุ้มชั้นในสุดจัดเรียงข้อมูลแบบแนวนอน */
    .swagger-ui .property-row td .prop {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 15px !important; /* เว้นช่องไฟระหว่าง string กับ minLength และคำอธิบายอย่างละ 15px */
    }

    /* บังคับให้โครงสร้างย่อยทั้งหมดเป็นแถวเดียว ไม่ยอมให้ตัดคำเด็ดขาด */
    .swagger-ui .property-row td .prop-type,
    .swagger-ui .property-row td .property.primitive,
    .swagger-ui .property-row td .renderedMarkdown,
    .swagger-ui .property-row td .renderedMarkdown p {
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        color: navy !important;
    }

    /* ตกแต่งความสวยงามเพิ่มเติม (ตามใจชอบ) */
    /* ให้ตัวเลเบลเงื่อนไข เช่น minLength: 1 มีสีเทาอ่อนลงเพื่อความสบายตา */
    .swagger-ui .property-row td .property.primitive {
        color: #7f8c8d !important;
        font-size: 0.9em !important;
    }

    /* เพิ่มเครื่องหมายคั่นจางๆ หรือเพิ่มขอบเขตของช่องภาษาไทย */
    .swagger-ui .property-row td .renderedMarkdown {
        color: #2c3e50 !important;
    }