@import '_content/EzComponents/EzComponents.9wu7d1d6j1.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6cp6s0p5rr] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6cp6s0p5rr] {
    flex: 1;
}

.sidebar[b-6cp6s0p5rr] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-6cp6s0p5rr] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-6cp6s0p5rr]  a, .top-row[b-6cp6s0p5rr]  .btn-link {
        white-space: NoWrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-6cp6s0p5rr]  a:hover, .top-row[b-6cp6s0p5rr]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-6cp6s0p5rr]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-6cp6s0p5rr] {
        justify-content: space-between;
    }

    .top-row[b-6cp6s0p5rr]  a, .top-row[b-6cp6s0p5rr]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-6cp6s0p5rr] {
        flex-direction: row;
    }

    .sidebar[b-6cp6s0p5rr] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-6cp6s0p5rr] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-6cp6s0p5rr]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-6cp6s0p5rr], article[b-6cp6s0p5rr] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-6cp6s0p5rr] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6cp6s0p5rr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-qiqb7p5gr0] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-qiqb7p5gr0] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-qiqb7p5gr0] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-qiqb7p5gr0] {
    font-size: 1.1rem;
}

.nav-user-tools[b-qiqb7p5gr0] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    margin-right: 12px;
}

[b-qiqb7p5gr0] .nav-language-selector {
    flex-shrink: 0;
    gap: 3px;
    padding: 2px 5px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
}

[b-qiqb7p5gr0] .nav-language-selector .ez-language-selector__button {
    border-radius: 999px;
    color: var(--mud-palette-primary);
    opacity: 0.68;
    padding: 3px 7px;
}

[b-qiqb7p5gr0] .nav-language-selector .ez-language-selector__button.active {
    background-color: var(--mud-palette-primary);
    color: #ffffff;
    opacity: 1;
}

[b-qiqb7p5gr0] .nav-language-selector .ez-language-selector__button:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.06);
    opacity: 1;
}

[b-qiqb7p5gr0] .nav-language-selector .ez-language-selector__separator {
    color: rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.bi[b-qiqb7p5gr0] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-qiqb7p5gr0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-qiqb7p5gr0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-qiqb7p5gr0] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-qiqb7p5gr0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-qiqb7p5gr0] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-qiqb7p5gr0] {
        padding-bottom: 1rem;
    }

    .nav-item[b-qiqb7p5gr0]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-qiqb7p5gr0]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-qiqb7p5gr0]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-qiqb7p5gr0] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-qiqb7p5gr0] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-qiqb7p5gr0] {
        display: none;
    }

    .nav-scrollable[b-qiqb7p5gr0] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/InputAptitudeIndicatorScore/InputAptitudeIndicatorScore.razor.rz.scp.css */
/* จัดตัวกรอง แถบคำสั่ง และตารางตามแนวตั้ง; layout ฟอร์มหลักยังใช้ MudGrid/MudItem ใน Razor */
.aptitude-score-page[b-8966ombohe] { display: flex; flex-direction: column; gap: 12px; }
.aptitude-score-page[b-8966ombohe]  .aptitude-score-filter { padding: 16px; border: 1px solid #d8e0ea; background-color: #fbfcfe; border-radius: 4px; }
.aptitude-score-actions[b-8966ombohe] { gap: 8px; padding: 10px 12px; border: 1px solid #d8e0ea; border-radius: 4px; background-color: var(--mud-palette-surface); }
/* ใช้ ::deep เข้าถึง HTML ภายใน MudBlazor ภายใต้ CSS ของหน้านี้
ตัวแปรความกว้างสามคอลัมน์แรกใช้คำนวณ left ของ sticky ร่วมกัน ต้องปรับให้สัมพันธ์กันเสมอ */
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table { --no-width: 64px; --id-width: 120px; --name-width: 260px; overflow: hidden; border: 1px solid #d8e0ea; border-radius: 4px; }
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table .mud-table-container { max-height: min(68vh, 720px); overflow: auto; }
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
/* ตรึงหัวตารางสองชั้น โดยชั้นที่สองเลื่อนลงเท่าความสูงชั้นแรก 44px
z-index ของหัวคอลัมน์นักเรียนต้องสูงกว่าหัวตัวชี้วัดและข้อมูล เพื่อไม่ให้ทับกันตอนเลื่อน */
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table th { position: sticky; background-color: #eef4fb; color: #244d83; text-align: center; white-space: nowrap; z-index: 3; }
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table thead tr:first-child th { top: 0; height: 44px; }
.aptitude-score-page[b-8966ombohe]  .aptitude-score-table thead tr:nth-child(2) th { top: 44px; height: 44px; }
.aptitude-score-page[b-8966ombohe]  .aptitude-col-no { position: sticky; left: 0; min-width: var(--no-width); width: var(--no-width); max-width: var(--no-width); text-align: center; }
.aptitude-score-page[b-8966ombohe]  .aptitude-col-id { position: sticky; left: var(--no-width); min-width: var(--id-width); width: var(--id-width); max-width: var(--id-width); text-align: center; }
.aptitude-score-page[b-8966ombohe]  .aptitude-col-name { position: sticky; left: calc(var(--no-width) + var(--id-width)); min-width: var(--name-width); width: var(--name-width); max-width: var(--name-width); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 2px 0 3px rgba(36,77,131,.12); }
.aptitude-score-page[b-8966ombohe]  tbody .aptitude-col-no,
.aptitude-score-page[b-8966ombohe]  tbody .aptitude-col-id,
.aptitude-score-page[b-8966ombohe]  tbody .aptitude-col-name { background-color: var(--mud-palette-surface); z-index: 2; }
.aptitude-score-page[b-8966ombohe]  thead .aptitude-col-no,
.aptitude-score-page[b-8966ombohe]  thead .aptitude-col-id,
.aptitude-score-page[b-8966ombohe]  thead .aptitude-col-name { z-index: 5; }
.aptitude-score-page[b-8966ombohe]  .aptitude-col-indicator { min-width: 100px; text-align: center; }
.aptitude-score-page[b-8966ombohe]  .aptitude-inactive { color: var(--mud-palette-error); }
.aptitude-score-page[b-8966ombohe]  .aptitude-empty { padding: 24px; text-align: center; color: var(--mud-palette-text-secondary); }
/* จอเล็กลดความกว้างคอลัมน์ที่ตรึงและความสูงพื้นที่ตาราง โดยยังเลื่อนดูตัวชี้วัดแนวนอนได้ */
@media (max-width: 600px) {
    .aptitude-score-page[b-8966ombohe]  .aptitude-score-table { --no-width: 52px; --id-width: 104px; --name-width: 190px; }
    .aptitude-score-page[b-8966ombohe]  .aptitude-score-table .mud-table-container { max-height: 62vh; }
}
.aptitude-score-page[b-8966ombohe]  .aptitude-score-input input { text-align: center; }

/* /Components/Pages/Login.razor.rz.scp.css */
/* ✅ คลุมเต็มหน้าจอและวางพื้นหลังด้วย ::before */
.login-wrapper[b-wzwmpxjgrv] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #f5f5f5; /* fallback หากรูปโหลดช้า */
}

    /* พื้นหลังรูป + gradient overlay */
    .login-wrapper[b-wzwmpxjgrv]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        /* ชั้นล่างเป็นรูป, ชั้นบนเป็นไล่เฉดโปร่ง */
        background-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 100%), url("/imgs/bgLogin.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; /* โฟกัสกลางบนจอใหญ่ */
        filter: saturate(1.05) contrast(1.02);
    }

/* กล่องการ์ดใสกลางจอ */
.container[b-wzwmpxjgrv] {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    /*max-width: 540px;*/ /* แคบลงเมื่อไม่มีภาพข้าง */
    max-width: 440px; /* แคบลงเมื่อไม่มีภาพข้าง */
    width: calc(100% - 40px); /* เผื่อขอบซ้ายขวา */
    min-height: unset; /* ไม่บังคับความสูงแล้ว */
    display: block;
    margin: 20px; /* มีระยะห่างจากขอบเมื่อจอเล็ก */
    padding: 40px 36px;
    position: relative;
}

.login-language-selector[b-wzwmpxjgrv] {
    position: absolute;
    top: 14px;
    right: 18px;
}

/* เฉพาะส่วนฟอร์ม */
.form-section[b-wzwmpxjgrv] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-header[b-wzwmpxjgrv] {
    text-align: center;
    margin-bottom: 20px;
}

.form-header p[b-wzwmpxjgrv] {
    color: #4a4a4a;
    font-size: 1rem;
    margin: 6px;
}

/* มือถือ: ขยายการ์ดเต็มกว้างขึ้น + โฟกัสรูปด้านบนมากขึ้น */
@media (max-width: 768px) {
    .container[b-wzwmpxjgrv] {
        max-width: 420px;
        width: calc(100% - 24px);
        padding: 24px 20px 28px;
        margin: 12px;
        border-radius: 16px;
    }

    .login-wrapper[b-wzwmpxjgrv]::before {
        background-position: top center; /* โฟกัสส่วนบนของภาพบนจอเล็ก */
    }
}
/* /Components/Pages/ProcessAptitudeIndicator/ProcessAptitudeIndicator.razor.rz.scp.css */


.aptitude-mode[b-ivbll5pm99] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}

/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.performance-actions[b-ivbll5pm99] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.performance-actions[b-ivbll5pm99]  .performance-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}

/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.performance-results[b-ivbll5pm99] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ performance-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.performance-results[b-ivbll5pm99]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.performance-results[b-ivbll5pm99]  table {
    width: 100%;
    min-width: var(--performance-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.performance-results[b-ivbll5pm99]  .performance-col-no {
    width: 64px;
}

.performance-results[b-ivbll5pm99]  .performance-col-student-id {
    width: 140px;
}

.performance-results[b-ivbll5pm99]  .performance-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.performance-results[b-ivbll5pm99]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสามคอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.performance-results[b-ivbll5pm99]  .performance-no,
.performance-results[b-ivbll5pm99]  .performance-student-id,
.performance-results[b-ivbll5pm99]  .performance-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.performance-results[b-ivbll5pm99]  .performance-no {
    left: 0;
}

.performance-results[b-ivbll5pm99]  .performance-student-id {
    left: 128px;
}

.performance-results[b-ivbll5pm99]  .performance-student-name {
    left: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.performance-results[b-ivbll5pm99]  thead .performance-no,
.performance-results[b-ivbll5pm99]  thead .performance-student-id,
.performance-results[b-ivbll5pm99]  thead .performance-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสามคอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.performance-results[b-ivbll5pm99]  tfoot .performance-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.performance-results[b-ivbll5pm99]  th,
.performance-results[b-ivbll5pm99]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.performance-results[b-ivbll5pm99]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.performance-results[b-ivbll5pm99]  .performance-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.performance-results[b-ivbll5pm99]  .performance-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.performance-results[b-ivbll5pm99]  .performance-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.performance-results[b-ivbll5pm99]  .performance-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.performance-results[b-ivbll5pm99]  .performance-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.performance-results[b-ivbll5pm99]  .performance-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.performance-results[b-ivbll5pm99]  .performance-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.performance-results[b-ivbll5pm99]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.performance-results[b-ivbll5pm99]  .performance-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.performance-results[b-ivbll5pm99]  .performance-inactive .performance-student-id,
.performance-results[b-ivbll5pm99]  .performance-inactive .performance-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.performance-results[b-ivbll5pm99]  thead .performance-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.performance-results[b-ivbll5pm99]  thead .performance-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}

.performance-results[b-ivbll5pm99]  .performance-col-room-no { width: 64px; }
.performance-results[b-ivbll5pm99]  .performance-room-no {
    position: sticky;
    left: 64px;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.performance-results[b-ivbll5pm99]  thead .performance-room-no {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}
/* /Components/Pages/ProcessKnowlege/ProcessKnowlege.razor.rz.scp.css */
.process-knowledge-page[b-vyqzsqsbo2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.process-knowledge-grade-button[b-vyqzsqsbo2] {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.process-knowledge-grade-button:disabled[b-vyqzsqsbo2] {
    cursor: default;
}

.process-knowledge-grade-button:focus-visible[b-vyqzsqsbo2] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.process-knowledge-filters[b-vyqzsqsbo2] {
    background-color: #fbfcfe;
}

.process-knowledge-mode[b-vyqzsqsbo2] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}

[b-vyqzsqsbo2] .process-knowledge-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

[b-vyqzsqsbo2] .process-knowledge-mode-options .mud-radio {
    margin: 0;
    white-space: nowrap;
}

.process-knowledge-search[b-vyqzsqsbo2] {
    margin-top: 8px;
}

@media (min-width: 960px) {
    .process-knowledge-page[b-vyqzsqsbo2]  .process-knowledge-mode-item {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .process-knowledge-page[b-vyqzsqsbo2]  .process-knowledge-period-item {
        flex: 1 1 0;
        width: 0;
        max-width: none;
    }
}

[b-vyqzsqsbo2] .process-knowledge-search .mud-button-root {
    min-height: 56px;
    white-space: nowrap;
}

.process-knowledge-filter-details[b-vyqzsqsbo2] {
    border-top: 1px solid #d8e0ea;
    padding-top: 10px;
}

.process-knowledge-range-input[b-vyqzsqsbo2] {
    width: 100%;
    min-width: 42px;
    max-width: 60px;
    height: 28px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.process-knowledge-range-input:focus[b-vyqzsqsbo2] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.process-knowledge-range-input:disabled[b-vyqzsqsbo2] {
    opacity: .6;
}

.process-knowledge-range-input[b-vyqzsqsbo2]::-webkit-inner-spin-button,
.process-knowledge-range-input[b-vyqzsqsbo2]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 959.98px) {
    .process-knowledge-search[b-vyqzsqsbo2] {
        margin-top: 0;
    }
}

.process-knowledge-actions[b-vyqzsqsbo2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 0 4px;
}

.process-knowledge-statistics[b-vyqzsqsbo2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .875rem;
}

.process-knowledge-statistics > div[b-vyqzsqsbo2] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.process-knowledge-statistics strong[b-vyqzsqsbo2] {
    color: #244d83;
}

.process-knowledge-table-region[b-vyqzsqsbo2] {
    position: relative;
    height: 440px;
    min-height: 0;
}

[b-vyqzsqsbo2] .process-knowledge-scores,
[b-vyqzsqsbo2] .process-knowledge-scores .mud-table-container {
    height: 100%;
    max-height: none;
    overflow: auto;
}

[b-vyqzsqsbo2] .process-knowledge-scores table {
    min-width: var(--score-table-width, 1150px);
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

[b-vyqzsqsbo2] .process-knowledge-scores tr > :nth-child(-n+3) {
    position: sticky;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

[b-vyqzsqsbo2] .process-knowledge-scores tr > :nth-child(1) {
    left: 0;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    box-sizing: border-box;
}

[b-vyqzsqsbo2] .process-knowledge-scores tr > :nth-child(2) {
    left: 60px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    box-sizing: border-box;
}

[b-vyqzsqsbo2] .process-knowledge-scores tr > :nth-child(3) {
    left: 160px;
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    box-sizing: border-box;
    box-shadow: 1px 0 0 var(--mud-palette-lines-default);
}

[b-vyqzsqsbo2] .process-knowledge-scores thead tr > :nth-child(-n+3) {
    top: 0;
    z-index: 4;
    background-color: #eef3f9;
}

[b-vyqzsqsbo2] .process-knowledge-scores th {
    min-width: 56px;
    white-space: nowrap;
    text-align: center;
    background-color: #eef3f9;
}

[b-vyqzsqsbo2] .process-knowledge-scores th,
[b-vyqzsqsbo2] .process-knowledge-scores td {
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-name {
    min-width: 220px;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-total {
    background-color: #7089ba;
    color: #fff4a3;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-grade {
    background-color: #fff8df;
    color: #b71c1c;
}

.process-knowledge-empty[b-vyqzsqsbo2] {
    position: absolute;
    inset: 40px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

[b-vyqzsqsbo2] .process-knowledge-scores tbody td {
    text-align: center;
    white-space: nowrap;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-student-name,
[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-memo {
    text-align: left;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-total-value {
    background-color: #eef3f9;
    font-weight: 600;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-grade-value {
    background-color: #fff8df;
    font-weight: 600;
    text-align: center;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-grade-special {
    color: #b71c1c;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-grade-normal {
    color: #244d83;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-assessment-value {
    text-align: center;
}

[b-vyqzsqsbo2] .process-knowledge-inactive > td {
    background-color: #fdeaea;
    color: #b71c1c;
}

[b-vyqzsqsbo2] .process-knowledge-inactive .process-knowledge-student-name {
    text-decoration: line-through;
}

[b-vyqzsqsbo2] .process-knowledge-scores .process-knowledge-transfer-score,
.process-knowledge-transfer-note[b-vyqzsqsbo2] {
    background-color: #e8f5e9;
    color: #256029;
    font-weight: 600;
}

.process-knowledge-transfer-note[b-vyqzsqsbo2] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .75rem;
}

[b-vyqzsqsbo2] .process-knowledge-summary-table th,
[b-vyqzsqsbo2] .process-knowledge-summary-table td {
    text-align: center;
    white-space: nowrap;
}

[b-vyqzsqsbo2] .process-knowledge-summary-table th {
    background-color: #eef3f9;
}

[b-vyqzsqsbo2] .process-knowledge-criteria-table th,
[b-vyqzsqsbo2] .process-knowledge-criteria-table td {
    padding: 4px 6px;
    font-size: .875rem;
}

[b-vyqzsqsbo2] .process-knowledge-criteria-table .mud-checkbox {
    margin: 0;
}

@media (min-width: 1280px) {
    [b-vyqzsqsbo2] .process-knowledge-results-grid > .process-knowledge-results-sidebar {
        flex: 0 0 400px;
        max-width: 400px;
    }

    [b-vyqzsqsbo2] .process-knowledge-results-grid > .process-knowledge-results-main {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - 400px);
        position: relative;
    }

    /* Only the sidebar contributes to the row height, even with a long student list. */
    [b-vyqzsqsbo2] .process-knowledge-student-panel {
        position: absolute;
        /* MudGrid spacing adds padding only at the top and left. */
        inset: 8px 0 0 8px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .process-knowledge-table-region[b-vyqzsqsbo2] {
        flex: 1 1 0;
        height: auto;
        overflow: hidden;
    }

    [b-vyqzsqsbo2] .process-knowledge-student-panel > :first-child,
    .process-knowledge-process-actions[b-vyqzsqsbo2] {
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .process-knowledge-table-region[b-vyqzsqsbo2] {
        height: 320px;
    }
}
/* /Components/Pages/ProcessPerformanceScore/ProcessPerformanceScore.razor.rz.scp.css */


/* รูปแบบกรอบและการเรียง radio ตรงกับ ProcessKnowlege; จอแคบเลื่อนได้โดยไม่ตัดเป็นสองบรรทัด */
.performance-mode[b-qh374975dk] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
    overflow-x: auto;
}

/* บนจอ desktop ให้กรอบ radio เทอม ปี วิชา ห้อง และปุ่มตกลงใช้แถวเดียวกัน
   ใช้ MudGrid/MudItem เหมือน ProcessKnowlege แล้วให้วิชาและห้องแบ่งพื้นที่ที่เหลือ */
@media (min-width: 960px) {

    .performance-mode[b-qh374975dk] {
        margin-top: 0;
    }
}

/* วิธีคำนวณเป็นอีกกลุ่ม radio; ป้องกันข้อความตัดบรรทัดและให้เลื่อนได้เมื่อพื้นที่ไม่พอ */
.performance-calculation-options[b-qh374975dk] {
    overflow-x: auto;
}

.performance-calculation-options[b-qh374975dk]  .mud-radio,
.performance-calculation-options[b-qh374975dk]  .mud-typography {
    flex-shrink: 0;
    white-space: nowrap;
}

/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.performance-actions[b-qh374975dk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.performance-actions[b-qh374975dk]  .performance-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}

/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.performance-results[b-qh374975dk] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ performance-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.performance-results[b-qh374975dk]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.performance-results[b-qh374975dk]  table {
    width: 100%;
    min-width: var(--performance-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.performance-results[b-qh374975dk]  .performance-col-no {
    width: 64px;
}

.performance-results[b-qh374975dk]  .performance-col-student-id {
    width: 140px;
}

.performance-results[b-qh374975dk]  .performance-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.performance-results[b-qh374975dk]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสามคอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.performance-results[b-qh374975dk]  .performance-no,
.performance-results[b-qh374975dk]  .performance-student-id,
.performance-results[b-qh374975dk]  .performance-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.performance-results[b-qh374975dk]  .performance-no {
    left: 0;
}

.performance-results[b-qh374975dk]  .performance-student-id {
    left: 128px;
}

.performance-results[b-qh374975dk]  .performance-student-name {
    left: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.performance-results[b-qh374975dk]  thead .performance-no,
.performance-results[b-qh374975dk]  thead .performance-student-id,
.performance-results[b-qh374975dk]  thead .performance-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสามคอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.performance-results[b-qh374975dk]  tfoot .performance-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.performance-results[b-qh374975dk]  th,
.performance-results[b-qh374975dk]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.performance-results[b-qh374975dk]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.performance-results[b-qh374975dk]  .performance-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.performance-results[b-qh374975dk]  .performance-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.performance-results[b-qh374975dk]  .performance-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.performance-results[b-qh374975dk]  .performance-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.performance-results[b-qh374975dk]  .performance-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.performance-results[b-qh374975dk]  .performance-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.performance-results[b-qh374975dk]  .performance-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.performance-results[b-qh374975dk]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.performance-results[b-qh374975dk]  .performance-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.performance-results[b-qh374975dk]  .performance-inactive .performance-student-id,
.performance-results[b-qh374975dk]  .performance-inactive .performance-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.performance-results[b-qh374975dk]  thead .performance-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.performance-results[b-qh374975dk]  thead .performance-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}

/* เลขที่ห้องกิน 64px ระหว่างลำดับกับรหัสนักเรียน จึงตรึง left ที่ 64px หลังคอลัมน์ลำดับ */
.performance-results[b-qh374975dk]  .performance-col-room-no { width: 64px; }
.performance-results[b-qh374975dk]  .performance-room-no {
    position: sticky;
    left: 64px;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.performance-results[b-qh374975dk]  thead .performance-room-no {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}
/* /Components/Pages/ProcessPerformanceScoreByTeacherConsult/ProcessPerformanceScoreByTeacherConsult.razor.rz.scp.css */


/* กรอบ radio ตาม ProcessKnowlege และเลื่อนแนวนอนเมื่อจอแคบ */
.performance-mode[b-wiq6jp9hre] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
    overflow-x: auto;
}

/* ให้ช่วงเวลา ห้อง และปุ่มค้นหาอยู่แถวเดียวกันบน desktop */
@media (min-width: 960px) {

    .performance-mode[b-wiq6jp9hre] {
        margin-top: 0;
    }
}

.performance-calculation-options[b-wiq6jp9hre] {
    overflow-x: auto;
}

.performance-calculation-options[b-wiq6jp9hre]  .mud-radio,
.performance-calculation-options[b-wiq6jp9hre]  .mud-typography {
    flex-shrink: 0;
    white-space: nowrap;
}

/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.performance-results[b-wiq6jp9hre] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ performance-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.performance-results[b-wiq6jp9hre]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.performance-results[b-wiq6jp9hre]  table {
    width: 100%;
    min-width: var(--performance-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.performance-results[b-wiq6jp9hre]  .performance-col-no {
    width: 64px;
}

.performance-results[b-wiq6jp9hre]  .performance-col-student-id {
    width: 140px;
}

.performance-results[b-wiq6jp9hre]  .performance-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.performance-results[b-wiq6jp9hre]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสี่คอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.performance-results[b-wiq6jp9hre]  .performance-no,
.performance-results[b-wiq6jp9hre]  .performance-student-id,
.performance-results[b-wiq6jp9hre]  .performance-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.performance-results[b-wiq6jp9hre]  .performance-no {
    left: 0;
}

.performance-results[b-wiq6jp9hre]  .performance-student-id {
    left: 128px;
}

.performance-results[b-wiq6jp9hre]  .performance-student-name {
    left: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.performance-results[b-wiq6jp9hre]  thead .performance-no,
.performance-results[b-wiq6jp9hre]  thead .performance-student-id,
.performance-results[b-wiq6jp9hre]  thead .performance-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสี่คอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.performance-results[b-wiq6jp9hre]  tfoot .performance-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.performance-results[b-wiq6jp9hre]  th,
.performance-results[b-wiq6jp9hre]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.performance-results[b-wiq6jp9hre]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.performance-results[b-wiq6jp9hre]  .performance-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.performance-results[b-wiq6jp9hre]  .performance-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.performance-results[b-wiq6jp9hre]  .performance-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.performance-results[b-wiq6jp9hre]  .performance-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.performance-results[b-wiq6jp9hre]  .performance-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.performance-results[b-wiq6jp9hre]  .performance-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.performance-results[b-wiq6jp9hre]  .performance-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.performance-results[b-wiq6jp9hre]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.performance-results[b-wiq6jp9hre]  .performance-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.performance-results[b-wiq6jp9hre]  .performance-inactive .performance-student-id,
.performance-results[b-wiq6jp9hre]  .performance-inactive .performance-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.performance-results[b-wiq6jp9hre]  thead .performance-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.performance-results[b-wiq6jp9hre]  thead .performance-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}

/* เลขที่ในห้องอยู่ถัดจากลำดับ และตรึงพร้อมข้อมูลนักเรียน */
.performance-results[b-wiq6jp9hre]  .performance-col-room-no { width: 64px; }
.performance-results[b-wiq6jp9hre]  .performance-room-no {
    position: sticky;
    left: 64px;
    min-width: 44px;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.performance-results[b-wiq6jp9hre]  thead .performance-room-no {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}
/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.performance-actions[b-wiq6jp9hre] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.performance-actions[b-wiq6jp9hre]  .performance-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Pages/ReportPrintGrade_K_51/ReportPrintGrade_K_51.razor.rz.scp.css */
.grade-filters[b-r8ugap0mao] { padding-top: 8px; padding-bottom: 8px; }
.grade-options[b-r8ugap0mao] { padding: 6px 12px; border: 1px solid #d8e0ea; border-radius: 4px; background: #eef3f9; }
.grade-options[b-r8ugap0mao]  .mud-radio-group { display: flex; flex-wrap: wrap; gap: 0 12px; }
.grade-options[b-r8ugap0mao]  .mud-radio { white-space: nowrap; margin: 0; }
.grade-results[b-r8ugap0mao] { max-height: 65vh; overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
.grade-results[b-r8ugap0mao]  .mud-simple-table { overflow: visible; }
.grade-results[b-r8ugap0mao]  table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.grade-results[b-r8ugap0mao]  thead { position: sticky; top: 0; z-index: 2; background: var(--mud-palette-surface); }
.grade-results[b-r8ugap0mao]  th { text-align: center; white-space: normal; min-width: 65px; max-width: 130px; background: #eef3f9; }
.grade-results[b-r8ugap0mao]  td { white-space: nowrap; text-align: center; }
.grade-results[b-r8ugap0mao]  .student-name { min-width: 230px; text-align: left; }
.grade-results[b-r8ugap0mao]  .class-name { text-align: left; }
.grade-results[b-r8ugap0mao]  .student-inactive { color: var(--mud-palette-error); text-decoration: line-through; }
.grade-results[b-r8ugap0mao]  .grade-fail, .grade-results[b-r8ugap0mao]  .missing-score { color: var(--mud-palette-error); }
.grade-results[b-r8ugap0mao]  .grade-fail { font-weight: bold; }
.grade-results[b-r8ugap0mao]  .grade-normal { color: #1565c0; }
.grade-results[b-r8ugap0mao]  .grade-inactive { color: #1a237e; }
.grade-summary[b-r8ugap0mao] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* /Components/Pages/ReportResultQuality/ReportResultQuality.razor.rz.scp.css */
.result-quality-search-options[b-0ujyapisof] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0;
}

.result-quality-statistics[b-0ujyapisof] { overflow-x: auto; }
.result-quality-statistics[b-0ujyapisof]  table {
    border-collapse: collapse;
    border: 1px solid var(--mud-palette-lines-default);
}
.result-quality-statistics[b-0ujyapisof]  table th,
.result-quality-statistics[b-0ujyapisof]  table td {
    border: 1px solid var(--mud-palette-lines-default);
}
.result-quality-statistics[b-0ujyapisof]  th {
    background: #eef3f9;
    text-align: center;
    white-space: nowrap;
}
.result-quality-statistics[b-0ujyapisof]  td { text-align: center; white-space: nowrap; }
.result-quality-statistics[b-0ujyapisof]  td:first-child { text-align: left; }
.result-quality-grade-statistics[b-0ujyapisof]  table { min-width: 820px; }

.result-quality-counts[b-0ujyapisof] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.result-quality-counts[b-0ujyapisof]  .mud-chip {
    margin: 0;
}

.result-quality-summary-options[b-0ujyapisof] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.result-quality-attendance-option[b-0ujyapisof] {
    margin-left: auto;
}

.result-quality-table[b-0ujyapisof] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.result-quality-table[b-0ujyapisof]  table {
    min-width: 1600px;
    border-collapse: separate;
    border-spacing: 0;
}

.result-quality-table[b-0ujyapisof]  th {
    background: #eef3f9;
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    min-width: 70px;
}

.result-quality-table[b-0ujyapisof]  td {
    text-align: center;
    white-space: nowrap;
    height: 42px;
}

.result-quality-table[b-0ujyapisof]  td:nth-child(5),
.result-quality-table[b-0ujyapisof]  td:nth-child(14) {
    text-align: left;
}

.result-quality-table[b-0ujyapisof]  th:nth-child(13),
.result-quality-table[b-0ujyapisof]  td:nth-child(13) {
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
    font-weight: 600;
}

.result-quality-empty[b-0ujyapisof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 16px;
    white-space: normal;
}

@media (max-width: 959.98px) {
    .result-quality-counts[b-0ujyapisof] { justify-content: flex-start; }
    .result-quality-attendance-option[b-0ujyapisof] { margin-left: 0; }
}
/* /Components/Pages/ReportSummaryLiterature/ReportSummaryLiterature.razor.rz.scp.css */


/* กรอบตัวเลือกรายเทอม/รายปีใช้แนวเดียวกับ ProcessKnowlege โดยวางตัวเลือกต่อกันในแถว */
.literature-mode[b-quhphred6p] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}

/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.literature-actions[b-quhphred6p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.literature-actions[b-quhphred6p]  .literature-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}

/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.literature-results[b-quhphred6p] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ literature-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.literature-results[b-quhphred6p]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.literature-results[b-quhphred6p]  table {
    width: 100%;
    min-width: var(--literature-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.literature-results[b-quhphred6p]  .literature-col-no {
    width: 64px;
}

.literature-results[b-quhphred6p]  .literature-col-student-id {
    width: 140px;
}

.literature-results[b-quhphred6p]  .literature-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.literature-results[b-quhphred6p]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสามคอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.literature-results[b-quhphred6p]  .literature-no,
.literature-results[b-quhphred6p]  .literature-student-id,
.literature-results[b-quhphred6p]  .literature-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.literature-results[b-quhphred6p]  .literature-no {
    left: 0;
}

.literature-results[b-quhphred6p]  .literature-student-id {
    left: 64px;
}

.literature-results[b-quhphred6p]  .literature-student-name {
    left: 204px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.literature-results[b-quhphred6p]  thead .literature-no,
.literature-results[b-quhphred6p]  thead .literature-student-id,
.literature-results[b-quhphred6p]  thead .literature-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสามคอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.literature-results[b-quhphred6p]  tfoot .literature-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.literature-results[b-quhphred6p]  th,
.literature-results[b-quhphred6p]  td {
    text-align: center;
    white-space: nowrap;
}

/* ใช้สีพื้นของ theme แยกหัวตารางจากข้อมูล */
.literature-results[b-quhphred6p]  thead th {
    background: var(--mud-palette-background-gray);
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.literature-results[b-quhphred6p]  .literature-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.literature-results[b-quhphred6p]  .literature-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.literature-results[b-quhphred6p]  .literature-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.literature-results[b-quhphred6p]  .literature-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.literature-results[b-quhphred6p]  .literature-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.literature-results[b-quhphred6p]  .literature-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.literature-results[b-quhphred6p]  .literature-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.literature-results[b-quhphred6p]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.literature-results[b-quhphred6p]  .literature-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.literature-results[b-quhphred6p]  .literature-inactive td {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.literature-results[b-quhphred6p]  thead .literature-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.literature-results[b-quhphred6p]  thead .literature-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}
/* /Components/Pages/ReportSummaryLiteratureByTeacherConsult/ReportSummaryLiteratureByTeacherConsult.razor.rz.scp.css */


/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.literature-results[b-k2kdon3mmd] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ literature-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.literature-results[b-k2kdon3mmd]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.literature-results[b-k2kdon3mmd]  table {
    width: 100%;
    min-width: var(--literature-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.literature-results[b-k2kdon3mmd]  .literature-col-no {
    width: 64px;
}

.literature-results[b-k2kdon3mmd]  .literature-col-student-id {
    width: 140px;
}

.literature-results[b-k2kdon3mmd]  .literature-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.literature-results[b-k2kdon3mmd]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสี่คอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.literature-results[b-k2kdon3mmd]  .literature-no,
.literature-results[b-k2kdon3mmd]  .literature-student-id,
.literature-results[b-k2kdon3mmd]  .literature-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.literature-results[b-k2kdon3mmd]  .literature-no {
    left: 0;
}

.literature-results[b-k2kdon3mmd]  .literature-student-id {
    left: 128px;
}

.literature-results[b-k2kdon3mmd]  .literature-student-name {
    left: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.literature-results[b-k2kdon3mmd]  thead .literature-no,
.literature-results[b-k2kdon3mmd]  thead .literature-student-id,
.literature-results[b-k2kdon3mmd]  thead .literature-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสี่คอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.literature-results[b-k2kdon3mmd]  tfoot .literature-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.literature-results[b-k2kdon3mmd]  th,
.literature-results[b-k2kdon3mmd]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.literature-results[b-k2kdon3mmd]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.literature-results[b-k2kdon3mmd]  .literature-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.literature-results[b-k2kdon3mmd]  .literature-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.literature-results[b-k2kdon3mmd]  .literature-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.literature-results[b-k2kdon3mmd]  .literature-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.literature-results[b-k2kdon3mmd]  .literature-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.literature-results[b-k2kdon3mmd]  .literature-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.literature-results[b-k2kdon3mmd]  .literature-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.literature-results[b-k2kdon3mmd]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.literature-results[b-k2kdon3mmd]  .literature-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.literature-results[b-k2kdon3mmd]  .literature-inactive .literature-student-id,
.literature-results[b-k2kdon3mmd]  .literature-inactive .literature-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.literature-results[b-k2kdon3mmd]  thead .literature-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.literature-results[b-k2kdon3mmd]  thead .literature-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}

/* เลขที่ในห้องอยู่ถัดจากลำดับ และตรึงพร้อมข้อมูลนักเรียน */
.literature-results[b-k2kdon3mmd]  .literature-col-room-no { width: 64px; }
.literature-results[b-k2kdon3mmd]  .literature-room-no {
    position: sticky;
    left: 64px;
    min-width: 44px;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.literature-results[b-k2kdon3mmd]  thead .literature-room-no {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}
/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.literature-actions[b-k2kdon3mmd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.literature-actions[b-k2kdon3mmd]  .literature-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}
/* จัดตัวเลือกรายเทอม/รายปีในกรอบและแถวเดียวตาม ProcessKnowlege */
.literature-mode[b-k2kdon3mmd] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}
/* /Components/Pages/ReportSummaryLiteratureDetail/ReportSummaryLiteratureDetail.razor.rz.scp.css */


/* กรอบ radio กว้างตามข้อความไทย/อังกฤษ และไม่เกินพื้นที่แม่ */
.literature-mode[b-n8jofh5svu] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}

.literature-mode[b-n8jofh5svu]  .literature-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.literature-mode[b-n8jofh5svu]  .literature-mode-options .mud-radio {
    margin: 0;
    white-space: nowrap;
}

/* คงขนาดปุ่มตกลงตามรูปแบบที่ปรับไว้ จำกัดความกว้างสูงสุด 100px */
.literature-search-field[b-n8jofh5svu] {
    width: 100%;
    max-width: 100px;
}

literature-results[b-n8jofh5svu] {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* คำสั่งเหนือตารางตัดแถวได้เมื่อพื้นที่แคบ และรักษาระยะห่างระหว่างปุ่ม */
.literature-actions[b-n8jofh5svu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.literature-results[b-n8jofh5svu]  .mud-simple-table {
    overflow: visible;
}

.literature-results[b-n8jofh5svu]  table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.literature-results[b-n8jofh5svu]  th,
.literature-results[b-n8jofh5svu]  td {
    text-align: center;
    white-space: nowrap;
}

/* ตรึงหัวตารางระหว่างเลื่อน หัวชั้นที่สองเลื่อนลงตามความสูงแถวแรก 36px */
.literature-results[b-n8jofh5svu]  thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 36px;
    background: var(--mud-palette-background-gray);
}

.literature-results[b-n8jofh5svu]  thead tr:nth-child(2) th {
    top: 36px;
}

.literature-results[b-n8jofh5svu]  .literature-no {
    min-width: 44px;
    width: 44px;
}

.literature-results[b-n8jofh5svu]  .literature-student-id {
    min-width: 112px;
    width: 112px;
}

.literature-results[b-n8jofh5svu]  .literature-student-name {
    min-width: 240px;
    text-align: left;
}

.literature-results[b-n8jofh5svu]  .literature-indicator {
    min-width: 85px;
}

.literature-results[b-n8jofh5svu]  .literature-result {
    min-width: 110px;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

/* สีสำหรับนักเรียนพ้นสภาพตามสถานะในผลค้นหา */
.literature-results[b-n8jofh5svu]  .literature-inactive td {
    color: var(--mud-palette-error);
}

.literature-unit-count[b-n8jofh5svu] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.literature-results[b-n8jofh5svu]  tfoot td {
    background: var(--mud-palette-background-gray);
}

.literature-results[b-n8jofh5svu]  .literature-summary-label {
    text-align: right;
}

@
/* /Components/Pages/ReportSummaryQuality/ReportSummaryQuality.razor.rz.scp.css */


/* จัดตัวเลือกรายเทอม/รายปีในกรอบและแถวเดียวตาม ProcessKnowlege */
.quality-mode[b-51i0fecg7m] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}

/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.quality-actions[b-51i0fecg7m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.quality-actions[b-51i0fecg7m]  .quality-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}

/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.quality-results[b-51i0fecg7m] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ quality-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.quality-results[b-51i0fecg7m]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.quality-results[b-51i0fecg7m]  table {
    width: 100%;
    min-width: var(--quality-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.quality-results[b-51i0fecg7m]  .quality-col-no {
    width: 64px;
}

.quality-results[b-51i0fecg7m]  .quality-col-student-id {
    width: 140px;
}

.quality-results[b-51i0fecg7m]  .quality-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.quality-results[b-51i0fecg7m]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสามคอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.quality-results[b-51i0fecg7m]  .quality-no,
.quality-results[b-51i0fecg7m]  .quality-student-id,
.quality-results[b-51i0fecg7m]  .quality-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.quality-results[b-51i0fecg7m]  .quality-no {
    left: 0;
}

.quality-results[b-51i0fecg7m]  .quality-student-id {
    left: 64px;
}

.quality-results[b-51i0fecg7m]  .quality-student-name {
    left: 204px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.quality-results[b-51i0fecg7m]  thead .quality-no,
.quality-results[b-51i0fecg7m]  thead .quality-student-id,
.quality-results[b-51i0fecg7m]  thead .quality-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสามคอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.quality-results[b-51i0fecg7m]  tfoot .quality-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.quality-results[b-51i0fecg7m]  th,
.quality-results[b-51i0fecg7m]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.quality-results[b-51i0fecg7m]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.quality-results[b-51i0fecg7m]  .quality-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.quality-results[b-51i0fecg7m]  .quality-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.quality-results[b-51i0fecg7m]  .quality-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.quality-results[b-51i0fecg7m]  .quality-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.quality-results[b-51i0fecg7m]  .quality-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.quality-results[b-51i0fecg7m]  .quality-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.quality-results[b-51i0fecg7m]  .quality-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.quality-results[b-51i0fecg7m]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.quality-results[b-51i0fecg7m]  .quality-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.quality-results[b-51i0fecg7m]  .quality-inactive .quality-student-id,
.quality-results[b-51i0fecg7m]  .quality-inactive .quality-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.quality-results[b-51i0fecg7m]  thead .quality-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.quality-results[b-51i0fecg7m]  thead .quality-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}
/* /Components/Pages/ReportSummaryQualityByTeacherConsult/ReportSummaryQualityByTeacherConsult.razor.rz.scp.css */


/* กำหนดพื้นที่เลื่อนผลทั้งแนวตั้งและแนวนอน พร้อมจำกัดความสูงไม่ให้ดันทั้งหน้า */
.quality-results[b-fqycdxwasx] {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ใช้พื้นที่เลื่อนของ quality-results เป็นหลัก แทนพื้นที่เลื่อนซ้อนของ MudSimpleTable */
.quality-results[b-fqycdxwasx]  .mud-simple-table {
    overflow: visible;
}

/* ให้ตารางกินพื้นที่เต็ม และขยายได้เมื่อคอลัมน์ตัวชี้วัดต้องการพื้นที่มากกว่า */
.quality-results[b-fqycdxwasx]  table {
    width: 100%;
    min-width: var(--quality-table-min-width);
    table-layout: fixed;
}

/* ความกว้างคอลัมน์นักเรียนคงที่ เพื่อให้ตำแหน่ง sticky ตรงกันแม้ตารางมีพื้นที่เพิ่ม */
.quality-results[b-fqycdxwasx]  .quality-col-no {
    width: 64px;
}

.quality-results[b-fqycdxwasx]  .quality-col-student-id {
    width: 140px;
}

.quality-results[b-fqycdxwasx]  .quality-col-student-name {
    width: 280px;
}

/* ตรึงทั้ง thead ให้หัวสองแถวเลื่อนพร้อมกัน ไม่ต้องคำนวณความสูงแถวแรก */
.quality-results[b-fqycdxwasx]  thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ตรึงสี่คอลัมน์แรกในหัวและตัวตาราง พร้อมพื้นทึบป้องกันคะแนนเลื่อนทะลุ */
.quality-results[b-fqycdxwasx]  .quality-no,
.quality-results[b-fqycdxwasx]  .quality-student-id,
.quality-results[b-fqycdxwasx]  .quality-student-name {
    position: sticky;
    z-index: 1;
    background: var(--mud-palette-surface);
}

.quality-results[b-fqycdxwasx]  .quality-no {
    left: 0;
}

.quality-results[b-fqycdxwasx]  .quality-student-id {
    left: 128px;
}

.quality-results[b-fqycdxwasx]  .quality-student-name {
    left: 268px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 2px 0 0 var(--mud-palette-lines-default);
}

/* หัวคอลัมน์ที่ตรึงซ้อนเหนือหัวคะแนน และคงสีหัวตารางตาม theme */
.quality-results[b-fqycdxwasx]  thead .quality-no,
.quality-results[b-fqycdxwasx]  thead .quality-student-id,
.quality-results[b-fqycdxwasx]  thead .quality-student-name {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}

/* ข้อความสถิติครอบสี่คอลัมน์นักเรียน ให้คงอยู่ซ้ายขณะเลื่อนคะแนนเช่นกัน */
.quality-results[b-fqycdxwasx]  tfoot .quality-summary-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* จัดค่าคะแนนกลางช่องและคงข้อความในบรรทัดเดียว */
.quality-results[b-fqycdxwasx]  th,
.quality-results[b-fqycdxwasx]  td {
    text-align: center;
    white-space: nowrap;
}

/* ให้ข้อความหัวตารางขึ้นบรรทัดใหม่ภายในช่อง และเพิ่มความสูงตามเนื้อหา */
.quality-results[b-fqycdxwasx]  thead th {
    background: var(--mud-palette-background-gray);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    vertical-align: middle;
}

/* สงวนความกว้างคอลัมน์ลำดับนักเรียน */
.quality-results[b-fqycdxwasx]  .quality-no {
    min-width: 44px;
}

/* สงวนความกว้างคอลัมน์รหัสนักเรียน */
.quality-results[b-fqycdxwasx]  .quality-student-id {
    min-width: 112px;
}

/* จัดชื่อชิดซ้ายและเผื่อความกว้างสำหรับชื่อไทย */
.quality-results[b-fqycdxwasx]  .quality-student-name {
    min-width: 240px;
    text-align: left;
}

/* สงวนความกว้างของคอลัมน์ตัวชี้วัดแต่ละช่อง */
.quality-results[b-fqycdxwasx]  .quality-indicator {
    min-width: 100px;
}

/* เน้นคอลัมน์สรุปแต่ละด้านด้วยตัวหนาและสีพื้นโทนเตือน */
.quality-results[b-fqycdxwasx]  .quality-total {
    min-width: 110px;
    font-weight: 600;
    background: rgba(var(--mud-palette-warning-rgb), 0.14);
}

/* เน้นคอลัมน์ผลประเมินรวมด้วยตัวหนาและสีพื้นโทนสำเร็จ */
.quality-results[b-fqycdxwasx]  .quality-result {
    min-width: 140px;
    font-weight: 600;
    background: rgba(var(--mud-palette-success-rgb), 0.14);
}

/* จัดความสูงข้อความเมื่อไม่มีนักเรียน และอนุญาตข้อความยาวขึ้นบรรทัดใหม่ */
.quality-results[b-fqycdxwasx]  .quality-empty {
    height: 160px;
    white-space: normal;
}

/* ใช้สีพื้นของ theme แยกแถวสถิติท้ายตาราง */
.quality-results[b-fqycdxwasx]  tfoot td {
    background: var(--mud-palette-background-gray);
}

/* จัดข้อความคำอธิบายสถิติชิดขวาก่อนเริ่มช่องคะแนน */
.quality-results[b-fqycdxwasx]  .quality-summary-label {
    text-align: right;
}

/* ใช้สี error แสดงนักเรียนพ้นสภาพให้ตรงความหมายของสถานภาพ */
.quality-results[b-fqycdxwasx]  .quality-inactive .quality-student-id,
.quality-results[b-fqycdxwasx]  .quality-inactive .quality-student-name {
    color: var(--mud-palette-error);
}

/* หัวสรุปที่ตรึงใช้สีโปร่งวางบนพื้นทึบ เพื่อไม่ให้ตัวเลขด้านล่างมองทะลุขณะเลื่อน */
.quality-results[b-fqycdxwasx]  thead .quality-total {
    background: linear-gradient(rgba(var(--mud-palette-warning-rgb), 0.14), rgba(var(--mud-palette-warning-rgb), 0.14)),
        var(--mud-palette-surface);
}

.quality-results[b-fqycdxwasx]  thead .quality-result {
    background: linear-gradient(rgba(var(--mud-palette-success-rgb), 0.14), rgba(var(--mud-palette-success-rgb), 0.14)),
        var(--mud-palette-surface);
}

/* เลขที่ในห้องอยู่ถัดจากลำดับ และตรึงพร้อมข้อมูลนักเรียน */
.quality-results[b-fqycdxwasx]  .quality-col-room-no { width: 64px; }
.quality-results[b-fqycdxwasx]  .quality-room-no {
    position: sticky;
    left: 64px;
    min-width: 44px;
    z-index: 1;
    background: var(--mud-palette-surface);
}
.quality-results[b-fqycdxwasx]  thead .quality-room-no {
    z-index: 2;
    background: var(--mud-palette-background-gray);
}
/* เรียงปุ่มดำเนินการและสถานะบันทึก โดยย้ายขึ้นแถวใหม่ได้เมื่อพื้นที่แคบ */
.quality-actions[b-fqycdxwasx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ป้ายบันทึกสำเร็จใช้พื้นเขียวอ่อน ขอบมน และไม่มี margin เพื่ออยู่กลางแถวเดียวกับปุ่ม */
.quality-actions[b-fqycdxwasx]  .quality-saved-status {
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    font-weight: 600;
    white-space: nowrap;
}
/* จัดตัวเลือกรายเทอม/รายปีในกรอบและแถวเดียวตาม ProcessKnowlege */
.quality-mode[b-fqycdxwasx] {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 4px;
    background-color: #eef3f9;
}