/* ===================================================================================
   ตรวจสอบข้อมูลหลักสูตร (Data Review)
   -----------------------------------------------------------------------------------
   สไตล์ของฟีเจอร์นี้อยู่ไฟล์เดียวกันหมด ไม่ปนกับ css หลักของระบบ (app.css / style.css)
   เดิมกระจายอยู่ในบล็อก <style> ของแต่ละ component ซึ่งถูกฉีดซ้ำทุกครั้งที่ component
   ถูก render (dialog เปิด-ปิดหลายรอบ = แท็ก <style> ซ้ำหลายชุดใน DOM)

   ชื่อคลาสใช้ prefix ตามที่มาเดิม: sp- (structure plan) / rv- (review) / drp- (data review process)
   =================================================================================== */


/* =========================================================
   DataReviewForm.razor — หน้าฟอร์มตรวจสอบข้อมูล (แถบสรุปผลตรวจ)
   ========================================================= */
/* สรุปผลตรวจ — สองบรรทัด (แท็บย่อย / โครงสร้าง) เรียงคอลัมน์ตรงกัน อ่านเทียบกันได้ทันที */
.rv-summary-grid {
    display: grid;
    gap: 6px;
}

.rv-summary-row {
    display: grid;
    grid-template-columns: 170px repeat(3, 104px) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

/* จอแคบ: ชื่อแถวกับหมายเหตุเต็มบรรทัด ส่วนตัวเลขสามช่องยังเรียงข้างกันเป็น 3 คอลัมน์
   (เดิมยุบเป็นคอลัมน์เดียว ตัวเลขสามช่องกลายเป็นแถบยาวซ้อนกันสามแถว เปลืองที่และเทียบกันยาก) */
@media (max-width: 900px) {
    .rv-summary-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rv-summary-row > :first-child,
    .rv-summary-row > :last-child {
        grid-column: 1 / -1;
    }
}

/* ตัวเลขเด่น สถานะบอกด้วยสีพื้น ไม่ต้องมีไอคอนทุกช่อง */
.rv-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.rv-stat-pass {
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-success-darken);
}

.rv-stat-fail {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
    color: var(--mud-palette-error-darken);
}

.rv-stat-pending {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
}

/* ครบแล้ว = จางลง ไม่ต้องแย่งสายตากับช่องที่ยังค้าง */
.rv-stat-zero {
    opacity: .45;
}


/* =========================================================
   ReviewResultDialog.razor — ประวัติ/ผลการตรวจสอบข้อมูลทุกรอบ
   ========================================================= */
/* กรอบระดับ (หมวดวิชา/กลุ่มวิชา/รายวิชา ฯลฯ) — รวมชิ้นที่ไม่ผ่านของระดับเดียวกันไว้ในกรอบเดียว
   แยกจากระดับอื่นชัดเจน ไม่ปนกันเป็นลิสต์ยาวๆ */
.rrd-level-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--mud-palette-background-grey);
}

/* กรอบของชิ้นที่ไม่ผ่านแต่ละชิ้น — ขอบซ้ายสีแดงหนา ให้เห็นทันทีว่าเป็นรายการที่ต้องแก้ */
.rrd-item-card {
    border: 1px solid var(--mud-palette-error);
    border-left: 4px solid var(--mud-palette-error);
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

.rrd-item-card + .rrd-item-card {
    margin-top: 8px;
}

/* เส้นทางว่าชิ้นนี้อยู่ใต้แผน/ตัวเลือกโครงสร้าง/หมวด/กลุ่มไหน — อ่านจากซ้ายไปขวาเหมือน breadcrumb */
.rrd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.rrd-breadcrumb .rrd-crumb-sep {
    opacity: .6;
}

/* บานรอบตรวจ — ให้เห็นขอบแต่ละรอบชัด ไม่กลืนกันเป็นแผ่นเดียว */
.rrd-round-panels .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    margin-bottom: 10px;
}


/* =========================================================
   ReviewTickControl.razor — ช่องติ๊กผลตรวจรายชิ้น
   ========================================================= */
/* แถบสรุปหลังตรวจแล้ว — พื้นจางๆ สีตามผลตรวจ ให้กวาดตาเห็นสถานะได้เร็วโดยไม่แย่งสายตา */
/* ระยะห่างจาก radio เท่ากับที่อื่น (4px) — MudStack ครอบอยู่ Spacing="1" ให้ระยะนี้อยู่แล้ว */
.rtc-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}

/* ชื่อผู้ตรวจ · วันเวลาที่ตรวจ ใต้ช่องติ๊ก — อยู่กลางและตัวเล็กกว่า caption ทุกที่ (รายชิ้น/รายวิชา/รายคน/แท็บย่อย)
   ตัวเล็กลงเพราะเป็นข้อมูลประกอบ ไม่ใช่ผลตรวจ ไม่ควรแย่งสายตาจากปุ่มถูกต้อง/ไม่ถูกต้อง */
.rv-stamp {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.6875rem !important;
}

/* stamp ในรายการผลตรวจ (dialog ผลการตรวจ/ประวัติ/เหตุผล) — ตัวเล็กเท่ากัน แต่ชิดซ้ายตามเนื้อหาในการ์ด */
.rv-stamp-text {
    font-size: 0.6875rem;
}


/* ถูกต้อง / ไม่ถูกต้อง อยู่กลางช่องติ๊กเสมอ (ช่องติ๊กของทุกระดับในโครงสร้าง + แถวรายวิชา)
   .mud-radio-group ของ MudBlazor ใช้ display: inherit — จัดกลางที่ตัวครอบก็พอ ไม่ต้องแตะข้างใน */
.rv-tick-radios {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.rv-tick-radios .mud-radio-group {
    justify-content: center;
}


/* =========================================================
   StructurePlanReviewDialog.razor — dialog ตรวจโครงสร้างและแผนการเรียน
   ========================================================= */
.sp-dialog-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 4px 0 12px;
    margin-bottom: 8px;
}

/* หัวข้อปริญญาเหนือกลุ่มการ์ดแผนการศึกษา (หน้าแผนการศึกษา) — ข้อความธรรมดาอยู่นอกการ์ด มีเส้นใต้บางๆ
   แบ่งกลุ่ม ไม่ทำเป็นกล่องอีกชั้น จะได้ไม่ดูเหมือนการ์ดที่กดกางได้ */
.sp-degree-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* หัวข้อวิชาเอก (ชั้นใต้ปริญญา) — ข้อความนอกการ์ดเหมือนหัวข้อปริญญา แต่เยื้องเข้ามาหนึ่งชั้นและไม่มีเส้นใต้
   ให้เห็นลำดับ ปริญญา › วิชาเอก › แผน จากระยะเยื้อง */
.sp-major-block {
    margin-left: 16px;
}

.sp-major-block + .sp-major-block {
    margin-top: 8px;
}

.sp-major-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
}

@media (max-width: 600px) {
    .sp-major-block {
        margin-left: 4px;
    }
}

/* บริบทนำหน้าชื่อแผนในหัว dialog (ปริญญา › วิชาเอก) — จางกว่าชื่อแผนซึ่งเป็นตัวหลัก */
.sp-crumb {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.sp-crumb-sep {
    margin: 0 6px;
    color: var(--mud-palette-text-disabled);
}

.sp-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 8px;
}

.sp-section-head:first-of-type {
    margin-top: 4px;
}

/* การ์ดแต่ละระดับใช้แถบสีบางๆ ด้านซ้ายบอกสถานะ แทนการระบายสีทั้งใบ (อ่านง่ายกว่าเวลามีหลายสิบใบ) */
.sp-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--sp-accent, var(--mud-palette-lines-default));
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: box-shadow .12s ease;
}

.sp-card:hover {
    box-shadow: var(--mud-elevation-2);
}

.sp-card-nested {
    background: var(--mud-palette-background-grey);
}

/* ชั้นในผังโครงสร้าง — ยิ่งลึกยิ่งจาง ผู้ตรวจจึงกวาดตาเห็นได้ว่ากลุ่มย่อยอันไหนอยู่ใต้กลุ่มไหน
   (กลุ่มวิชา = ชั้นบนสุด, กลุ่มย่อย = ชั้นกลาง, กลุ่มย่อยอีกชั้น = ในสุด) */
.sp-node-2 {
    margin-top: 4px;
    background: var(--mud-palette-surface);
}

.sp-node-3 {
    margin-top: 4px;
    background: var(--mud-palette-surface);
    border-style: dashed;
}

.sp-row {
    padding: 8px 10px;
    border-radius: 8px;
}

.sp-row-click {
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease;
}

.sp-row-click:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* รายวิชาสลับสีพื้นทีละแถว — กวาดตาไล่แถวยาวๆ ได้โดยไม่ตาลาย */
/* ขอบตรงไม่มนทั้งลายสลับ พื้นสีผลตรวจ และ hover — แถวเรียงชิดกันเป็นตับ มุมมนทำให้เห็นเป็นก้อนๆ
   แทนที่จะเป็นตาราง  ระยะซ้าย-ขวามาจาก px-4 ของ MudStack ที่ครอบอยู่ (เยื้องเท่ากันสองข้างแล้ว)
   จึงไม่ต้องมี margin ขวาชดเชยเหมือนตอนที่กล่องเยื้องแค่ด้านซ้าย */
.sp-subject-row {
    padding: 6px 10px;
    border-radius: 0;
    transition: background-color .12s ease;
}

/* สลับสีด้วยคลาสที่กำหนดจากลำดับใน loop ไม่ใช้ nth-child เพราะในกล่องมี element อื่นปนอยู่ด้วย
   (บรรทัดหัว "รายวิชาในกลุ่มนี้" และแถบบันทึก) จะทำให้ลำดับเพี้ยน */
.sp-subject-alt {
    background-color: var(--mud-palette-background-grey);
}

.sp-subject-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* แถวรายวิชาที่ตรวจแล้ว ระบายพื้นหลังตามผล — แถวที่ยังไม่มีสีคือแถวที่ยังไม่ได้ตรวจ กวาดตาหาเจอทันที
   ใช้สีจางๆ (ทับลายสลับเทาได้) ไม่ใช่สีเต็ม เพราะแถวหนึ่งมีทั้งชื่อวิชาและป้ายหลายอัน ต้องอ่านออกอยู่ */
.sp-subject-row.sp-subject-passed {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.sp-subject-row.sp-subject-failed {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.sp-subject-row.sp-subject-passed:hover {
    background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
}

.sp-subject-row.sp-subject-failed:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
}

/* ปุ่มไอคอนดูรายละเอียด (ขอบเส้น) ในหน้าตรวจและ dialog ตรวจ — พื้นขาว ไม่โปร่งใสทับสีแถวที่ระบายตามผลตรวจ
   ใช้ :not(:hover) เพื่อให้สีตอน hover ของ MudBlazor ยังทำงาน (ไม่งั้นกฎนี้ชนะเพราะ selector เจาะจงกว่า)
   ผูกกับกรอบของหน้าตรวจ (.rv-review-content) และ dialog (.rv-dialog) หน้าข้อมูลปกติที่ใช้ component เดียวกันไม่เปลี่ยน */
.rv-review-content .mud-icon-button.mud-button-outlined:not(:hover),
.rv-dialog .mud-icon-button.mud-button-outlined:not(:hover) {
    background-color: #fff;
}

/* รายละเอียดอยู่ซ้าย ช่องติ๊กผลตรวจอยู่ขวา — คอลัมน์ขวากว้างคงที่ ช่องติ๊กทุกระดับจึงตรงแนวกันเสมอ */
.sp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: start;
}

.sp-split-main {
    min-width: 0;
}

.sp-split-side {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 12px;
}

/* แถวรายวิชาในกลุ่ม — ชื่อวิชาฝั่งซ้ายอยู่กึ่งกลางแนวตั้งเทียบกับช่องติ๊กฝั่งขวา (ซึ่งสูงกว่าเพราะมี
   radio + ช่องหมายเหตุ) ไม่ใช่ชิดขอบบนแบบหัวข้อหมวด/กลุ่มที่อยากให้อยู่บนเสมอ */
.sp-split-center {
    align-items: center;
}

/* ตารางอาจารย์ประจำหลักสูตรในโหมดตรวจรายคน (t4-2) — คอลัมน์ตามฟอร์มกรอก + ช่องติ๊กคอลัมน์ขวาสุด
   กว้างเท่าคอลัมน์ติ๊กของแถวรายวิชา พื้นแถวระบายตามผลตรวจชุดสีเดียวกัน แถวที่ยังไม่มีสีคือคนที่ยังไม่ได้ตรวจ */
.rv-lecturer-review-table td {
    vertical-align: middle;
}

.rv-lecturer-review-table .rv-lecturer-tick-cell {
    width: 280px;
    min-width: 240px;
}

.rv-lecturer-review-table tr.rv-lecturer-passed > td {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.rv-lecturer-review-table tr.rv-lecturer-failed > td {
    background-color: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

/* มือถือ: MudTable แสดงเป็นบล็อกต่อแถว ช่องติ๊กไม่ต้องล็อกความกว้าง */
@media (max-width: 600px) {
    .rv-lecturer-review-table .rv-lecturer-tick-cell {
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 960px) {
    .sp-split {
        grid-template-columns: 1fr;
    }

    .sp-split-side {
        border-left: none;
        padding-left: 0;
    }
}

/* แถวรายวิชา: ชื่ออยู่ซ้าย (ยาวแค่ไหนก็ตัดบรรทัดได้) รายละเอียดชิดขวาเป็นคอลัมน์กว้างคงที่
   จึงเรียงตรงแนวกันทุกแถวเสมอ ไม่ขยับตามความยาวของชื่อวิชา */
.sp-subject-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sp-subject-name {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ชื่อวิชาภาษาไทยมักเป็นข้อความยาวที่ไม่มีช่องว่างให้เบราว์เซอร์ตัดคำ พอยาวเกินช่องของตัวเอง
   ทั้งบล็อกจะดันคอลัมน์รายละเอียดตกลงไปทั้งแถว — บังคับให้ตัดขึ้นบรรทัดใหม่ในช่องตัวเองแทน
   (ตัดกลางคำได้ ดีกว่าดันทั้งแถวเสียโครง) */
.sp-subject-name > * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* คอลัมน์: ปี | ประเภทเจ้าของ | ประเภทวิชา | หน่วยกิต | Credit/Audit
   กว้างคงที่ทุกคอลัมน์ แถวทุกแถวจึงตรงแนวกัน (ถ้าใช้ auto แต่ละแถวจะกว้างตามเนื้อหาของตัวเอง แล้วเบี้ยว)
   คอลัมน์ประเภทเจ้าของกว้างพอดีป้ายที่ยาวที่สุด "วิชาบริการ / กลางคณะ" */
.sp-subject-meta {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 68px 144px 132px 104px 76px;
    gap: 8px;
    align-items: center;
}

/* แถวรายวิชาในแผนการเรียนไม่มีคอลัมน์ปี — เริ่มที่ประเภทเจ้าของเลย ที่เหลือกว้างเท่าโครงสร้าง */
.sp-subject-meta.sp-plan-meta {
    grid-template-columns: 144px 132px 104px 76px;
}

/* ช่องประเภทเจ้าของ — ป้ายอยู่กลางช่องเสมอ ไม่ว่าข้อความจะสั้นหรือยาว */
.sp-meta-own {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.sp-subject-meta > * {
    min-width: 0;
}

/* ป้ายในแถวรายวิชากว้างตามข้อความพอดี ไม่ยืดเต็มช่อง และห้ามหดต่ำกว่าข้อความ (ไม่งั้นข้อความล้นขอบป้าย)
   ตัวอักษรขนาดเดียวกันทุกป้ายในแถว — ป้ายทึบ (ประเภทเจ้าของ) กับป้ายเส้นขอบ (Credit/Audit) เดิมดูขนาดไม่เท่ากัน */
.sp-subject-meta .mud-chip,
.sp-subject-meta .mud-tooltip-root {
    width: max-content;
    min-width: max-content;
}

.sp-subject-meta .mud-chip {
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
}

.sp-subject-meta > .mud-chip {
    justify-self: center;
}

/* ปีของรายวิชา — สีเข้มเต็ม ไม่จางเหมือน meta ตัวอื่น เพราะเป็นค่าที่ต้องอ่านบ่อยสุดในแถว */
.sp-subject-year {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

@media (max-width: 1280px) {
    .sp-subject-meta {
        grid-template-columns: repeat(5, auto);
        justify-items: end;
    }

    .sp-subject-meta.sp-plan-meta {
        grid-template-columns: repeat(4, auto);
    }
}

/* แถบบันทึกรวม — โผล่เหนือรายวิชาเมื่อเลือกไว้อย่างน้อย 1 วิชา */
.sp-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    /* เว้นบนไว้ให้พ้นแถวรายวิชาแถวสุดท้าย — แถวมี hover เต็มความกว้าง ถ้ากรอบนี้ชิดติดขึ้นไป
       พื้น hover จะดูเชื่อมเป็นก้อนเดียวกับกรอบ แยกไม่ออกว่าคนละส่วนกัน */
    margin-top: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--mud-palette-secondary);
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
}

/* =========================================================
   แผนการเรียน (รายปี x ภาคการศึกษา) — ตัวหนังสือขนาดเดียวกันทั้งส่วน
   =========================================================
   ส่วนนี้มีข้อความหลายชั้น (ชั้นปี / ภาค / หมวด / กลุ่ม / รายวิชา / หน่วยกิต) เดิมไล่ขนาด
   subtitle1 -> body2 -> caption ตามชั้น รวมแล้วสามขนาดปนกันในกรอบเดียว อ่านแล้วสะดุด
   ทั้งที่ชั้นของข้อมูลถูกบอกด้วยกรอบการ์ด แถบหัวข้อ และตัวหนาอยู่แล้ว
   จึงล็อกขนาดเดียวทั้งส่วน ปล่อยให้ตัวหนา/สีจางทำหน้าที่แยกลำดับความสำคัญแทน
   (ไม่แตะหัวข้อของส่วน .sp-section-head ซึ่งเป็นชื่อหัวเรื่อง ไม่ใช่เนื้อหาข้างใน) */
/* ส่วนหมวดวิชา (ผังโครงสร้าง) ใช้ขนาดเดียวกัน — สองส่วนอยู่ใน dialog เดียวกัน ตัวอักษรต้องเท่ากัน */
.sp-plan-section .mud-typography,
.sp-structure-section .mud-typography {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ภายในปีหนึ่ง แสดงภาคละ 1 แถวเต็มความกว้าง — เดิมวางข้างกัน 2 คอลัมน์ แต่การ์ดแต่ละภาคมีทั้ง
   รายวิชาและสรุปหน่วยกิตรายหมวด พอถูกบีบครึ่งหนึ่งแล้วอ่านยาก (ชื่อวิชาตัดบรรทัดถี่) */
.sp-term-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* ป้ายชื่อปี — ตัวเลขปีเด่นชัด แยกจากชื่อแผนการเรียนที่อยู่บรรทัดเดียวกัน */
.sp-year-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* การ์ดแผนการเรียนรายปี×ภาค — ทำหัวให้เด่นกว่าระดับอื่น เพราะ 1 การ์ด = 1 จุดตรวจที่คุมทั้งภาค */
.sp-term-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border-left: 4px solid var(--sp-accent, var(--mud-palette-primary));
}

.sp-plan-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.sp-plan-subject > * {
    flex: 0 0 auto;
}

/* ป้ายรหัสกลุ่มย่อยหน้าชื่อวิชาในแผนการเรียน (แบบ .subject-subgroup ของฟอร์มกรอก) */
.sp-subgroup-pill {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    white-space: nowrap;
}

/* ชื่อวิชากินที่ที่เหลือทั้งหมด และตัดขึ้นบรรทัดใหม่ในช่องของตัวเอง — ภาษาไทยไม่มีช่องว่างให้ตัดคำ
   จึงต้องยอมตัดกลางคำ (เหมือน .sp-subject-name ของโครงสร้าง) */
.sp-plan-subject > .sp-plan-subject-name {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* จอแคบ ปล่อยให้รายละเอียดตกลงบรรทัดใหม่ทั้งก้อน ดีกว่าบีบชื่อวิชาจนเหลือไม่กี่ตัวอักษร */
@media (max-width: 960px) {
    .sp-plan-subject {
        flex-wrap: wrap;
    }
}

/* ปุ่มติ๊กแบบย่อของรายวิชาในแผนการเรียน — ผลเดียวกับที่ตรวจในโครงสร้าง แค่ติ๊กจากตรงนี้ได้ด้วย */
.sp-mini-tick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.sp-plan-subject + .sp-plan-subject {
    border-top: 1px dashed var(--mud-palette-lines-default);
}

/* หมายเหตุที่ "ผู้กรอกข้อมูล" เขียนไว้ — คนละอันกับหมายเหตุของผู้ตรวจ จึงทำให้ต่างหน้าตากันชัดๆ */
.sp-data-remark {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 2px 26px;
    padding: 6px 10px;
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.sp-code {
    font-family: 'Courier New', monospace;
    color: var(--mud-palette-text-secondary);
    min-width: 84px;
}

/* ---- แถบบอกหมวด/กลุ่มของรายวิชาในแผนการเรียน ----
   ผู้ตรวจต้องรู้ตลอดว่ากำลังดูวิชาของหมวดไหน กลุ่มไหน โดยไม่ต้องเลื่อนกลับไปดูหัวข้อ
   ใช้สีพื้นจางๆ แยกชั้นแทนการใส่ไอคอนเพิ่ม จะได้ไม่รกเวลามีวิชาหลายสิบตัว */
.sp-cat-band {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 4px;
    padding: 5px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-left: 4px solid var(--mud-palette-primary);
}

.sp-group-band {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 2px 12px;
    padding: 4px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent);
    border-left: 3px solid var(--mud-palette-secondary);
}

/* ช่องกลุ่มวิชา / ช่อง xxx-xxx — ไม่ใช่รายวิชาจริง ทำให้ต่างจากแถวรายวิชาชัดๆ */
.sp-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 3px 0 3px 12px;
    padding: 5px 10px;
    border: 1px dashed var(--mud-palette-warning);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
}

/* รายวิชาที่กางออกมาจากช่องกลุ่มวิชา — เยื้องเข้าไปอีกชั้นให้เห็นว่าอยู่ใต้กลุ่มนั้น */
.sp-linked {
    margin-left: 28px;
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 10px;
}

/* สรุปหน่วยกิตรายหมวดของภาคนั้น */
.sp-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.sp-summary-cell {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* แถบสรุปของภาคเดียว อยู่ในการ์ดอยู่แล้ว จึงบางกว่าและไม่มีพื้นทึบซ้อนพื้นการ์ด */
.sp-summary-term {
    margin: 6px 24px 12px;
    padding: 6px 8px;
    background: transparent;
}

/* เนื้อในการ์ดภาค (ทางเลือก / รายการในภาค) เยื้องเท่ากันทั้งซ้ายและขวา ตรงแนวกับกรอบสรุปหน่วยกิตข้างบน */
.sp-term-body {
    padding: 0 24px;
}

/* หน่วยกิตที่จัดไว้ไม่ตรงกับที่โครงสร้างกำหนด — เตือนด้วยสี ไม่ต้องเพิ่มไอคอน */
.sp-summary-cell.mismatch {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

/* สรุปตัวเลขของแผน/ตัวเลือกโครงสร้างที่กำลังตรวจ — วางไว้ใต้ชื่อในหัว dialog เห็นได้ทันที
   ไม่ต้องไล่หาในการ์ดข้างล่าง (แบบเดียวกับที่ใช้ในหน้าดูข้อมูลแผนการศึกษา) */
/* grid แทน flex — การ์ดยืดเท่ากัน 3 ช่อง เต็มความกว้างหัว dialog เสมอ ไม่ลอยชิดซ้ายเป็นก้อนเล็กๆ */
.sp-plan-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.sp-plan-stat {
    min-width: 0;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--sp-stat-accent, var(--mud-palette-primary));
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* ตัวเลขสามช่องนี้เป็นสิ่งแรกที่ผู้ตรวจดูในหัว dialog — ป้ายเท่าตัวหนังสือในเนื้อ ตัวเลขใหญ่กว่าชัดๆ */
.sp-plan-stat-label {
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-plan-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sp-stat-accent, var(--mud-palette-primary));
    white-space: nowrap;
}

.sp-plan-stat-empty .sp-plan-stat-value {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}


/* แถวรายวิชาใน dialog ตรวจโครงสร้างมีปุ่มดูรายละเอียดปิดท้าย จึงมี 6 ช่อง ต่างจากผังอ่านอย่างเดียว
   ที่มี 5 ช่อง — แยกเป็นคลาสเสริมเพื่อไม่ให้ผังอ่านอย่างเดียวมีช่องว่างเกินมาทางขวา */
.sp-subject-meta.sp-subject-meta-detail {
    grid-template-columns: 68px 144px 132px 104px 76px 40px;
}

@media (max-width: 1280px) {
    .sp-subject-meta.sp-subject-meta-detail {
        grid-template-columns: repeat(6, auto);
        justify-items: end;
    }
}

/* =========================================================
   StructureTreeInfo.razor — ผังโครงสร้างแบบอ่านอย่างเดียว
   ========================================================= */
.structure-clickable-header {
    cursor: pointer;
    user-select: none;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background-color .12s ease;
}
.structure-clickable-header:hover {
    background-color: var(--mud-palette-action-default-hover);
}
.structure-static-header {
    padding: 6px 4px;
}

/* รายละเอียดอยู่ซ้าย ช่องติ๊กผลตรวจอยู่ขวา — จอแคบยุบเป็นคอลัมน์เดียวเรียงบน-ล่างเหมือนเดิม */
/* คอลัมน์ขวากว้างคงที่ ช่องติ๊กทุกระดับจึงเริ่มที่ตำแหน่งเดียวกันเสมอ
   ไม่ขยับตามความยาวของรายละเอียดฝั่งซ้าย (กล่องที่ซ้อนกันเยื้องเฉพาะด้านซ้าย ขอบขวาตรงกันหมด) */
.review-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: start;
}

.review-split-main {
    min-width: 0;
}

.review-split-side {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 12px;
}

/* หมายเหตุที่ "ผู้กรอกข้อมูล" เขียนไว้ — คนละอันกับหมายเหตุของผู้ตรวจ */
.sp-data-remark {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 2px 26px;
    padding: 6px 10px;
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
}

.sp-subject-alt {
    background-color: var(--mud-palette-background-grey);
}

.sp-subject-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sp-subject-name {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ชื่อวิชาภาษาไทยมักเป็นข้อความยาวที่ไม่มีช่องว่างให้เบราว์เซอร์ตัดคำ พอยาวเกินช่องของตัวเอง
   ทั้งบล็อกจะดันคอลัมน์รายละเอียดตกลงไปทั้งแถว — บังคับให้ตัดขึ้นบรรทัดใหม่ในช่องตัวเองแทน
   (ตัดกลางคำได้ ดีกว่าดันทั้งแถวเสียโครง) */
.sp-subject-name > * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ช่องกลุ่มวิชา / ช่อง xxx-xxx — ไม่ใช่รายวิชาจริง ทำให้ต่างจากแถวรายวิชาชัดๆ */
.sp-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 8px;
    border: 1px dashed var(--mud-palette-warning);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
}

/* รายวิชาที่กางออกมาจากช่องกลุ่มวิชา — เยื้องอีกชั้นให้เห็นว่าอยู่ใต้กลุ่มนั้น */
.sp-linked {
    margin-left: 16px;
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 8px;
}

@media (max-width: 960px) {
    .review-split-row {
        grid-template-columns: 1fr;
    }

    .review-split-side {
        border-left: none;
        padding-left: 0;
    }
}


/* =========================================================
   DataReviewProcess.razor — รายการหลักสูตร แท็บตรวจสอบข้อมูล (หลังอนุมัติ)
   ========================================================= */
.drp-summary-card {
    transition: box-shadow .15s, transform .15s;
}

.drp-summary-card:hover {
    box-shadow: 0 4px 12px var(--drp-card-shadow, rgba(0,0,0,.2));
    transform: translateY(-2px);
}

/* =========================================================
   ทางเลือกในภาค (subject_program_plan_choice) — การ์ดหน้าตาเดียวกับ StudyPlanChoiceCards ของฟอร์มกรอก
   ใช้สีจากธีม MudBlazor แทนสีตายตัวของฟอร์ม เพื่อให้อ่านได้ทั้งโหมดสว่างและมืด
   ========================================================= */
.sp-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
}

.sp-choice-card {
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    border-left: 4px solid var(--mud-palette-info);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-info) 5%, transparent);
}

.sp-choice-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-choice-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.sp-choice-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    font-weight: 600;
}

.sp-choice-or {
    color: var(--mud-palette-info);
    font-weight: 800;
}

.sp-choice-and {
    color: var(--mud-palette-text-secondary);
    font-weight: 800;
}


/* ===================================================================================
   Responsive — ทุกหน้าของการตรวจสอบข้อมูล
   -----------------------------------------------------------------------------------
   จุดตัด: 960px (แท็บเล็ต — ช่องติ๊กย้ายลงใต้รายละเอียด มีอยู่แล้วใน .sp-split)
           768px (แท็บเล็ตแนวตั้ง — รายละเอียดรายวิชาลงบรรทัดใต้ชื่อ)
           600px (มือถือ — dialog เต็มจอ ลดระยะเยื้อง หัว dialog ไม่ติดบนจอ)
   =================================================================================== */

/* ข้อความยาวที่ไม่มีช่องว่าง (ชื่อหลักสูตรภาษาไทย) ตัดในกรอบของตัวเอง ไม่ดันกรอบให้ล้น */
.rv-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* แถบแท็บใหญ่ — เลื่อนแนวนอนได้เมื่อจอแคบกว่าความยาวของแท็บทั้งหมด */
.rv-master-tabs {
    overflow-x: auto;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    /* แท็บกว้างตามชื่อ ไม่แบ่งความกว้างเท่าๆ กันจนชื่อแท็บตกบรรทัดทีละคำ */
    .rv-master-toggle {
        width: max-content;
        min-width: 100%;
    }

    .rv-master-toggle .mud-toggle-item {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    /* แถวรายวิชาในโครงสร้าง: ชื่ออยู่บรรทัดบน รายละเอียดลงบรรทัดใต้ชื่อ
       (คอลัมน์รายละเอียดกว้างรวม ~600px ถ้าอยู่บรรทัดเดียวกับชื่อ ชื่อวิชาจะเหลือไม่กี่ตัวอักษร) */
    .sp-subject-line {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    /* รายละเอียดรายวิชาเรียงต่อกันและตัดบรรทัดได้ แทนคอลัมน์กว้างคงที่ ทั้งโครงสร้างและแผนการเรียน */
    .sp-subject-meta,
    .sp-subject-meta.sp-plan-meta,
    .sp-subject-meta.sp-subject-meta-detail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 4px 10px;
    }

    .sp-meta-own {
        justify-content: flex-start;
    }

    /* แถวรายวิชาในแผนการเรียน: รายละเอียดทั้งก้อนลงบรรทัดใหม่ เต็มความกว้าง */
    .sp-plan-subject > .sp-subject-meta {
        flex-basis: 100%;
    }

    .sp-choice-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    /* dialog ใหญ่ (ตรวจโครงสร้าง / ผลการตรวจสอบ) เต็มจอ — ขอบ dialog กินที่เปล่าๆ บนมือถือ */
    .mud-dialog.rv-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .mud-dialog.rv-dialog .mud-dialog-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* หัว dialog ไม่ติดบนจอ — บนมือถือหัว (ชื่อ + ตัวเลข 3 ช่อง + แถบความคืบหน้า) กินจอไปเกือบครึ่ง */
    .sp-dialog-head {
        position: static;
    }

    .sp-plan-stats {
        gap: 4px;
    }

    .sp-plan-stat {
        padding: 8px 10px;
    }

    .sp-plan-stat-value {
        font-size: 1.05rem;
    }

    /* ระยะเยื้องในการ์ดภาค / หมายเหตุ ลดลง — 24px สองข้างบนจอ 360px เหลือที่ให้เนื้อหาน้อยเกินไป */
    .sp-term-body {
        padding: 0 4px;
    }

    .sp-summary-term {
        margin: 6px 4px 10px;
    }

    .sp-data-remark {
        margin-left: 4px;
    }

    .sp-group-band,
    .sp-slot-row {
        margin-left: 0;
    }

    .sp-code {
        min-width: 0;
    }

    /* กรอบติ๊กผลตรวจของแท็บย่อย — pa-6 + ขอบ 12px สองข้างเหลือที่ให้ช่องหมายเหตุแคบมาก */
    .rv-tick-box {
        padding: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}