/* Filter styles use classes on EzPanel's existing MudGrid.
   Each page has a unique class; native table/action styles remain in .razor.css.
   .mud-grid preserves the specificity of the former isolated wrapper selector. */

/* ReportResultQuality: align the 56px inputs and search action without an outer wrapper. */
.mud-grid.result-quality-page .result-quality-filters {
    padding-top: 8px;
}

.mud-grid.result-quality-page .result-quality-filters .mud-grid-item {
    min-width: 0;
}

.mud-grid.result-quality-page .result-quality-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}


/* ReportSummaryLiterature */
/*
   ภาพรวมการจัดตำแหน่งในหน้านี้
   - ::deep ใช้เข้าถึง HTML ภายใน MudBlazor/EzComponents ที่มี CSS isolation คนละขอบเขต
   - .literature-results เป็นเจ้าของพื้นที่เลื่อน ตารางภายในจึงไม่สร้าง scrollbar ซ้อน
   - thead ตรึงด้านบนทั้งสองแถว ส่วนคอลัมน์นักเรียนตรึงด้านซ้ายตามความกว้างใน colgroup
   - z-index แยกชั้นหัวตารางกับข้อมูล และพื้นทึบป้องกันตัวเลขที่เลื่อนอยู่ด้านล่างมองทะลุ
   เมื่อแก้ความกว้างคอลัมน์แรก ต้องแก้ทั้ง colgroup และระยะ left ของคอลัมน์ถัดไปให้ตรงกัน
*/
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.report-summary-literature-page .literature-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.report-summary-literature-page .literature-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.report-summary-literature-page .literature-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.report-summary-literature-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.report-summary-literature-page .literature-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.report-summary-literature-page .literature-mode-options .mud-radio {
    margin: 0;
}

/* จอใหญ่ให้กรอบโหมดกว้างตามข้อความ และใช้ช่องรายวิชายืดรับพื้นที่ที่เหลือ */
@media (min-width: 1280px) {
    .mud-grid.report-summary-literature-page .literature-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.report-summary-literature-page .literature-subject-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}


/* ReportSummaryLiteratureByTeacherConsult */
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.report-summary-literature-by-teacher-consult-page .literature-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.report-summary-literature-by-teacher-consult-page .literature-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.report-summary-literature-by-teacher-consult-page .literature-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.report-summary-literature-by-teacher-consult-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.report-summary-literature-by-teacher-consult-page .literature-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.report-summary-literature-by-teacher-consult-page .literature-mode-options .mud-radio {
    margin: 0;
}

/* จอใหญ่ให้โหมดกว้างตามข้อความ และให้ห้องเรียนยืดรับพื้นที่ที่เหลือ */
@media (min-width: 1280px) {
    .mud-grid.report-summary-literature-by-teacher-consult-page .literature-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.report-summary-literature-by-teacher-consult-page .literature-class-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}


/* ReportSummaryLiteratureDetail */
/* เว้นขอบแถวตัวกรอง ::deep ใช้เจาะ element ที่ component ลูกสร้าง */
.mud-grid.report-summary-literature-detail-page .literature-filters {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* จอใหญ่ย่อทั้ง MudItem ของ radio ตามเนื้อหา ให้วิชารับพื้นที่ที่เหลือเพื่อไม่เกิดช่องว่างจากคอลัมน์เดิม */
@media (min-width: 1280px) {
    .mud-grid.report-summary-literature-detail-page .literature-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.report-summary-literature-detail-page .literature-subject-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}

.mud-grid.report-summary-literature-detail-page .literature-filters .mud-grid-item {
    min-width: 0;
}

.mud-grid.report-summary-literature-detail-page .literature-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}


/* ReportSummaryQuality */
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.report-summary-quality-page .quality-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.report-summary-quality-page .quality-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.report-summary-quality-page .quality-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.report-summary-quality-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.report-summary-quality-page .quality-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.report-summary-quality-page .quality-mode-options .mud-radio {
    margin: 0;
}

/* จอใหญ่ให้โหมดกว้างตามข้อความ และให้รายวิชายืดรับพื้นที่ที่เหลือ */
@media (min-width: 1280px) {
    .mud-grid.report-summary-quality-page .quality-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.report-summary-quality-page .quality-subject-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}


/* ReportSummaryQualityByTeacherConsult */
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.report-summary-quality-by-teacher-consult-page .quality-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.report-summary-quality-by-teacher-consult-page .quality-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.report-summary-quality-by-teacher-consult-page .quality-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.report-summary-quality-by-teacher-consult-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.report-summary-quality-by-teacher-consult-page .quality-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.report-summary-quality-by-teacher-consult-page .quality-mode-options .mud-radio {
    margin: 0;
}

/* จอใหญ่ให้โหมดกว้างตามข้อความ และให้ห้องเรียนยืดรับพื้นที่ที่เหลือ */
@media (min-width: 1280px) {
    .mud-grid.report-summary-quality-by-teacher-consult-page .quality-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.report-summary-quality-by-teacher-consult-page .quality-class-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}


/* ProcessPerformanceScore */
/* CSS เฉพาะหน้าประมวลผลสมรรถนะ:
   - ใช้ MudGrid/MudItem สำหรับโครงหน้า; ::deep เข้าถึง element ที่ component ลูก render
   - จอ desktop ให้ radio และตัวกรองแบ่งพื้นที่ในแถวเดียว ส่วนจอเล็กใช้ breakpoint ของ MudGrid
   - ตารางขยายตามจำนวนตัวชี้วัด โดยเลื่อนในกรอบผลและตรึงคอลัมน์นักเรียนทางซ้าย
   - ความกว้าง colgroup และระยะ left ของ sticky ต้องแก้คู่กัน เพื่อไม่ให้ข้อมูลทับกัน
   - สีอ้างอิง Mud palette เพื่อให้หัว ผลรวม สถานภาพ และป้ายบันทึกสอดคล้องกับ theme
*/
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.process-performance-score-page .performance-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.process-performance-score-page .performance-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.process-performance-score-page .performance-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.process-performance-score-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.process-performance-score-page .performance-mode-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.process-performance-score-page .performance-mode-options .mud-radio {
    margin: 0;
    flex-shrink: 0;
}

/* บนจอ desktop ให้กรอบ radio เทอม ปี วิชา ห้อง และปุ่มตกลงใช้แถวเดียวกัน
   ใช้ MudGrid/MudItem เหมือน ProcessKnowlege แล้วให้วิชาและห้องแบ่งพื้นที่ที่เหลือ */
@media (min-width: 960px) {
    .mud-grid.process-performance-score-page .performance-mode-item,
    .mud-grid.process-performance-score-page .performance-search-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.process-performance-score-page .performance-term-item {
        flex: 0 0 88px;
        width: 88px;
        max-width: none;
    }

    .mud-grid.process-performance-score-page .performance-year-item {
        flex: 0 0 120px;
        width: 120px;
        max-width: none;
    }

    .mud-grid.process-performance-score-page .performance-subject-item,
    .mud-grid.process-performance-score-page .performance-class-item {
        flex: 1 1 160px;
        width: 0;
        min-width: 160px;
        max-width: none;
    }
}


/* ProcessPerformanceScoreByTeacherConsult */
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.process-performance-score-by-teacher-consult-page .performance-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.process-performance-score-by-teacher-consult-page .performance-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.process-performance-score-by-teacher-consult-page .performance-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.process-performance-score-by-teacher-consult-page .mud-radio {
    white-space: nowrap;
}

.mud-grid.process-performance-score-by-teacher-consult-page .performance-mode-options {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.process-performance-score-by-teacher-consult-page .performance-mode-options .mud-radio {
    margin: 0;
    flex-shrink: 0;
}

/* ให้ช่วงเวลา ห้อง และปุ่มค้นหาอยู่แถวเดียวกันบน desktop */
@media (min-width: 960px) {
    .mud-grid.process-performance-score-by-teacher-consult-page .performance-mode-item,
    .mud-grid.process-performance-score-by-teacher-consult-page .performance-search-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.process-performance-score-by-teacher-consult-page .performance-term-item {
        flex: 0 0 88px;
        width: 88px;
        max-width: none;
    }

    .mud-grid.process-performance-score-by-teacher-consult-page .performance-year-item {
        flex: 0 0 120px;
        width: 120px;
        max-width: none;
    }

    .mud-grid.process-performance-score-by-teacher-consult-page .performance-class-item {
        flex: 1 1 160px;
        width: 0;
        min-width: 160px;
        max-width: none;
    }
}


/* ProcessAptitudeIndicator */
/* ไฟล์นี้เป็น CSS isolation ของหน้า ProcessAptitudeIndicator
   ::deep ใช้กับ element ที่ MudBlazor สร้างภายใน component ลูก ส่วน class ที่หน้าเขียนเองใช้ selector ปกติ
   แก้เฉพาะสัดส่วน/การแสดงผล ไม่เปลี่ยนเงื่อนไขค้นหา วิธีคำนวณ หรือสถานะปุ่ม */
/* เพิ่มระยะด้านบนของตัวกรองภายใน MudGrid โดยใช้ class บน MudGrid ของ EzPanel */
.mud-grid.process-aptitude-indicator-page .performance-filters {
    padding-top: 8px;
}

/* ให้ช่องใน MudGrid ย่อได้ตามพื้นที่ ไม่ถูกความกว้างเนื้อหาบังคับให้ล้น */
.mud-grid.process-aptitude-indicator-page .performance-filters .mud-grid-item {
    min-width: 0;
}

/* ตัด margin ของ Mud input เพื่อให้ select และปุ่มในแถวตัวกรองอยู่แนวเดียวกัน */
.mud-grid.process-aptitude-indicator-page .performance-filters .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-grid.process-aptitude-indicator-page .aptitude-mode-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 12px;
}

.mud-grid.process-aptitude-indicator-page .aptitude-mode-options .mud-radio {
    margin: 0;
}

/* ใช้สัดส่วนเดียวกับ ReportSummaryLiterature/Quality: โหมดกว้างตามข้อความ รายวิชายืดรับพื้นที่ที่เหลือ */
@media (min-width: 1280px) {
    .mud-grid.process-aptitude-indicator-page .aptitude-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .mud-grid.process-aptitude-indicator-page .aptitude-subject-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}

/* คงข้อความของ radio ในบรรทัดเดียว */
.mud-grid.process-aptitude-indicator-page .mud-radio {
    white-space: nowrap;
}