/* Grade: local composition; shared controls and Kendo retain their theme. */
.grade-page .grade-list {
    padding: 20px;
    border: 1px solid var(--mkp-border);
    border-radius: var(--mkp-radius-lg);
    background: var(--mkp-surface);
    box-shadow: var(--mkp-shadow);
}

.grade-page .grade-search { width: min(100%, 320px); margin-bottom: 16px; }
.grade-page .grade-search .admin-search { width: 100%; }
.grade-page .grade-form { max-width: 760px; }
.grade-page .grade-form > .admin-page-header { margin-bottom: 16px; }
.grade-page .grade-editor > .card-body { padding: 20px; }
.grade-page .grade-identification .grade-section-title { margin-bottom: 12px; }
.grade-page .grade-variations { border-top: 1px solid var(--mkp-border); }
.grade-page .grade-section-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 24px; }
.grade-page .grade-help { margin: 0 0 20px; color: var(--mkp-muted-foreground); line-height: 1.5; }
.grade-page .grade-section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.grade-page .grade-section-header .grade-help { margin-bottom: 0; }
.grade-page .grade-section-header .btn { flex-shrink: 0; }
.grade-page .grade-variation-list { border: 1px solid var(--mkp-border); border-radius: var(--mkp-radius); overflow: hidden; }
.grade-page #tableGrades { table-layout: fixed; }
.grade-page #tableGrades th, .grade-page #tableGrades td { padding: 4px 12px; height: 40px; vertical-align: middle; }
.grade-page #tableGrades td:nth-child(2) { overflow-wrap: anywhere; }
.grade-page #tableGrades .grade-handle-column { width: 56px; }
.grade-page #tableGrades .grade-actions-column { width: 112px; }
.grade-page #tableGrades th:last-child, .grade-page #tableGrades td:last-child { text-align: center; }
.grade-page #tableGrades tbody tr:last-child td { border-bottom: 0; }
.grade-page .handler, .grade-sort-hint .handler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--mkp-radius-sm);
    background: var(--mkp-surface);
    color: var(--mkp-muted-foreground);
    cursor: grab;
    touch-action: none;
}
.grade-page .handler::before, .grade-sort-hint .handler::before { content: "\f0c9"; font-family: FontAwesome; font-size: 14px; }
.grade-page .handler:hover { background: var(--mkp-muted); color: var(--mkp-foreground); }
.grade-sort-hint { background: var(--mkp-surface); color: var(--mkp-foreground); border: 1px solid var(--mkp-border); box-shadow: var(--mkp-shadow); }
.grade-sort-hint td { padding: 8px 12px; }
.grade-page .grade-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; white-space: normal; color: var(--mkp-muted-foreground); }
.grade-page .grade-empty strong { color: var(--mkp-foreground); font-weight: 600; }
.grade-page .grade-empty p { margin: 0; }
.grade-page .grade-empty > .fa { font-size: 20px; margin-bottom: 4px; }
.grade-page .grade-variation-list:has(tbody tr) .grade-variations-empty { display: none; }

.grade-page .grade-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--mkp-border);
}
.grade-page #Grid .k-grid-header th {
    color: var(--mkp-foreground);
    font-size: 14px;
    font-weight: 600;
}
.grade-page #Grid .k-grid-header th:last-child { text-align: center; }
/* Name takes the remaining width; retain explicit/user-resized Kendo columns. */
.grade-page #Grid :is(.k-grid-header-table, .k-grid-table) > colgroup > col:not([style*="width"]) { width: auto; }
.grade-page #Grid .k-table-tbody > tr > td:nth-child(2) { font-weight: 500; }
.grade-page #Grid .btn-group { gap: 4px; }
.grade-page #Grid .btn-group > .btn {
    width: 36px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    border-radius: var(--mkp-radius-sm);
    box-shadow: none;
    font-size: 16px;
}
.grade-page #Grid .btn-group > .btn:hover { background: var(--mkp-muted); }

@media (max-width: 575.98px) {
    .grade-page .grade-list, .grade-page .grade-editor > .card-body { padding: 16px; }
    .grade-page .grade-section-header { flex-direction: column; align-items: flex-start; }
    .grade-page .grade-form-actions { padding: 16px; }
}