/* Your Global Styles */
:root .lpx-brand-logo {
    --lpx-logo: url('/images/logo/logo.png');
    --lpx-logo-icon: url('/images/logo/logo.png');
}
#markbookTable thead th {
    background-color: #f8f9fa; /* Light grey */
    color: #212529; /* Dark text */
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid #dee2e6;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
}

.select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

.cell-context-menu {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10000;
    min-width: 160px;
    font-size: 14px;
}

    .cell-context-menu div {
        padding: 8px 12px;
        cursor: pointer;
    }

        .cell-context-menu div:hover {
            background: #f0f0f0;
        }
.table-responsive {
    position: relative; /* REQUIRED */
}
body.pan-mode,
body.pan-mode * {
    cursor: grab !important;
}

    body.pan-mode:active,
    body.pan-mode *:active {
        cursor: grabbing !important;
    }
/* Lock first column (student / topic names) */
#assessmentTableContainer table th:first-child,
#assessmentTableContainer table td:first-child {
    min-width: 260px;
    max-width: 260px;
    width: 260px;
    white-space: nowrap;
}

.sticky-assessment-table {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

    /* Sticky header row – working version preserved */
    .sticky-assessment-table .sticky-header th {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: #999 !important;
        opacity: 1 !important;
        color: #fff;
        isolation: isolate; /* critical */
        transform: translateZ(0); /* forces repaint */
        background-clip: padding-box;
    }

    /* Prevent sticky transparency artefacts – scoped */
    .sticky-assessment-table table {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Sticky first column (student names) */
    .sticky-assessment-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 15;
        background-color: #fff !important;
        white-space: nowrap;
    }

    /* Top-left corner cell (header + first column) */
    .sticky-assessment-table .sticky-header th:first-child {
        left: 0;
        z-index: 60;
    }



.student-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-name {
    flex: 1;
    min-width: 0; /* REQUIRED for ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0; /* buttons never shrink */
}


/* =========================
   Department Only
   ========================= */

/* First column (Student) */
.department-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 15;
    background-color: #fff !important;
    white-space: nowrap;
}

/* Second column (Class) */
.department-table tbody td:nth-child(2) {
    position: sticky;
    left: 220px; /* must match width of first column */
    z-index: 15;
    background-color: #fff !important;
}

/* Header row - first column */
.department-table .sticky-header th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 60;
}

/* Header row - second column */
.department-table .sticky-header th:nth-child(2) {
    position: sticky;
    left: 220px;
    z-index: 60;
}
.department-table tbody td:nth-child(1),
.department-table .sticky-header th:nth-child(1) {
    min-width: 220px;
    max-width: 220px;
}

.vertical-topic {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap; /* no wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 160px; /* control column height */
    max-width: 40px; /* column width */

    font-size: 0.75rem;
    margin: 0 auto;
}

.percentageSlider {
    height: 8px;
}

    .percentageSlider .noUi-target {
        border: none;
        box-shadow: none;
    }

    .percentageSlider .noUi-connects {
        background: #e9ecef;
        border-radius: 10px;
    }

    .percentageSlider .noUi-connect {
        background: #0d6efd;
        border-radius: 10px;
    }

    .percentageSlider .noUi-handle {
        width: 20px;
        height: 20px;
        top: -6px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #0d6efd;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

        .percentageSlider .noUi-handle:before,
        .percentageSlider .noUi-handle:after {
            display: none;
        }
.percentageSlider {
    width: 100%;
    margin-right: 10px;
}