/*  Cyborg ERP shared theme.

    Everything is scoped: page chrome under .sr-wrap, dialogs under .sr-modal and
    .bootbox. Linking this file changes nothing on its own - a page opts in by
    putting .sr-wrap on its content container. That is what makes it safe to load
    from the shared layout.

    Extracted from Views/TPA/Cyborg_StudentRegistrationTPA.cshtml. Keep it here
    rather than back inside a view, so a second page cannot fork a second copy.  */

/*  Cyborg MVC theme. Everything is scoped under .sr- so it cannot reach the Bootstrap
        and AdminLTE chrome the TPA layout brings in; .sr-modal and .bootbox repeat the
        token block because Bootstrap moves dialogs outside this subtree.

        font-weight tops out at 700 on purpose. The mockup asks for 750, and a weight with
        no real face behind it is synthesised by smearing the strokes - which is what made
        earlier headings look out of focus. */

    .sr-wrap,
    .sr-modal,
    .bootbox {
        --p: #2563eb;
        --p2: #4f46e5;
        --pd: #1d4ed8;
        --navy: #173b63;
        --navy2: #102f52;
        --sr-ink: #172033;
        --sr-muted: #667085;
        --sr-line: #dbe3ef;
        --sr-line2: #e9eef5;
        --sr-bg: #f5f7fb;
        --sr-card: #fff;
        /*  Controls are filled rather than white: a white field on a white card has only its
            border to separate it, and at four levels of nesting that reads as one flat sheet. */
        --sr-field: #e9eef5;
        --sr-field-line: #ccd7e5;
        --sr-off: #d9dfe8;
        --sr-off-line: #c9d1dc;
        --sr-off-ink: #7d8798;
        /*  One band colour for every section header on the page - panel heads, grid
            captions and grid column heads all used to carry their own near-identical
            gradient, which read as three different surfaces at three different ages. */
        --sr-head: #eef2f7;
        --sr-head-line: #dbe3ee;
        --sr-label: #344054;
        /*  The one vertical step between a legacy label/control row and the next. The
            markup separates them with <br>, which stacks an 18px line box on top of the
            margins and gave the rows an uneven 39px pitch. */
        --sr-rowgap: 14px;
        --sr-rowhover: #f3f8ff;
        --sr-cell-line: #e6ecf4;
        --sr-cell-line2: #eef2f7;
        --sr-blue: #2563eb;
        --sr-blue-soft: #eef5ff;
        --sr-green: #16a34a;
        --sr-green-soft: #e8f6ee;
        --sr-amber: #c2410c;
        --sr-amber-soft: #fff7ed;
        --sr-red: #dc2626;
        --sr-red-soft: #fff1f1;
        --sr-radius: 14px;
        --sr-shadow: 0 12px 30px rgba(18, 45, 76, .08), 0 2px 8px rgba(18, 45, 76, .05);
        --sr-chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        color: var(--sr-ink);
        font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sr-wrap {
        background: radial-gradient(circle at 10% -10%, rgba(37, 99, 235, .08), transparent 27%), radial-gradient(circle at 92% 4%, rgba(79, 70, 229, .06), transparent 24%), var(--sr-bg);
        padding: 16px 18px 34px;
    }

        .sr-wrap * {
            box-sizing: border-box;
        }

    /* --------------------------------------------------------------- the header -- */

    .sr-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
        background: linear-gradient(115deg, #0d2d4f 0%, #173b63 52%, #21548b 100%);
        color: #fff;
        border-radius: 15px;
        padding: 16px 22px;
        margin-bottom: 0;
        box-shadow: 0 12px 28px rgba(16, 47, 82, .18);
        animation: srSlideDown .55s cubic-bezier(.2, .8, .2, 1) both;
    }

        /*  A circle large enough to read as a highlight is taller than the hero, so on a
            one-line hero only a straight slice of it showed - a pale rectangle with a hard
            edge. Gradients that fade out inside the box have no edge to expose at any
            height. */
        .sr-hero:before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: radial-gradient(115% 260% at 88% -30%, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 58%),
                        radial-gradient(85% 210% at 3% 135%, rgba(96, 165, 250, .26), rgba(96, 165, 250, 0) 62%);
            animation: srHeroGlow 9s ease-in-out infinite alternate;
        }

        .sr-hero:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #60a5fa, #818cf8, #60a5fa, transparent);
            background-size: 200% 100%;
            animation: srAccentFlow 5s linear infinite;
        }

        /*  theme_styles.css styles every h2 on the site with
            "padding: 10px 0 10px 30px; clear: both", which pushed this title in from
            everything below it and made the band deeper than its text. */
        .sr-hero h2 {
            margin: 0;
            padding: 0;
            clear: none;
            flex: 0 0 auto;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: .1px;
            line-height: 1.3;
            white-space: nowrap;
            color: #fff;
        }

        .sr-hero p {
            margin: 0;
            flex: 1 1 300px;
            font-size: 13px;
            line-height: 1.45;
            color: rgba(255, 255, 255, .9);
        }

    .sr-note {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 14px;
        margin-bottom: 0;
        background: linear-gradient(90deg, #f3f8ff, #eef5ff);
        border: 1px solid #cfe0ff;
        border-radius: 11px;
        padding: 12px 14px;
        color: #174ea6;
        line-height: 1.45;
        box-shadow: 0 4px 12px rgba(37, 99, 235, .05);
        animation: srFadeUp .55s .08s ease both;
    }

        .sr-note .ic {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--p), var(--p2));
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 700;
            font-size: 12px;
            flex: none;
            line-height: 1;
            box-shadow: 0 0 0 0 rgba(37, 99, 235, .24);
            animation: srSoftPulse 2.6s infinite;
        }

    /* ---------------------------------------------------------------- the cards -- */

    .sr-card {
        position: relative;
        background: var(--sr-card);
        border: 1px solid rgba(219, 227, 239, .92);
        border-radius: var(--sr-radius);
        box-shadow: 0 3px 12px rgba(16, 24, 40, .04);
        margin-top: 16px;
        margin-bottom: 0;
        overflow: hidden;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        animation: srFadeUp .6s ease both;
    }

        .sr-card:nth-of-type(1) {
            animation-delay: .14s;
        }

        .sr-card:nth-of-type(2) {
            animation-delay: .22s;
        }

        .sr-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--sr-shadow);
            border-color: #cbd8ea;
        }

        .sr-card:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #3b82f6, #6366f1);
            opacity: .88;
            z-index: 2;
        }

    .sr-cardhead {
        min-height: 50px;
        background: linear-gradient(180deg, #fff, #fbfcfe);
        border-bottom: 1px solid var(--sr-line2);
        padding: 11px 16px 11px 18px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

        .sr-cardhead .n {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--p), var(--p2));
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 700;
            font-size: 12px;
            flex: 0 0 auto;
            box-shadow: 0 4px 10px rgba(37, 99, 235, .24);
            transition: transform .2s ease;
        }

    .sr-card:hover .sr-cardhead .n {
        transform: scale(1.08) rotate(-4deg);
    }

    .sr-cardhead b {
        font-size: 14px;
        font-weight: 700;
    }

    .sr-cardhead .sr-sub {
        font-weight: 400;
        color: var(--sr-muted);
        font-size: 13px;
        flex: 1 1 240px;
    }

    .sr-cardbody {
        padding: 16px 17px;
        background: #fafbfd;
        border-top: 1px solid var(--sr-line2);
    }

    /* -------------------------------------------------------------- the toolbar -- */

    .sr-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 10px 14px 10px 17px;
        background: linear-gradient(180deg, #fbfcfe, #f8fafc);
        border-bottom: 1px solid var(--sr-line2);
    }

        .sr-toolbar .sr-spacer {
            flex: 1 1 auto;
        }

    .sr-btn {
        height: 35px;
        border: 1px solid #d7e0eb;
        border-radius: 8px;
        padding: 0 14px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        background: #fff;
        color: #344054;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }

        .sr-btn:not([disabled]):hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(16, 24, 40, .08);
            border-color: #9fb7d4;
            background: #f8fbff;
        }

        .sr-btn.primary {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #2f6fed, #4f46e5);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 5px 13px rgba(37, 99, 235, .22);
        }

            .sr-btn.primary:before {
                content: "";
                position: absolute;
                top: -40%;
                left: -50%;
                width: 35%;
                height: 180%;
                transform: skewX(-24deg);
                background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
                animation: srButtonShine 3.8s ease-in-out infinite;
            }

            .sr-btn.primary:not([disabled]):hover {
                background: linear-gradient(135deg, #2f6fed, #4f46e5);
                box-shadow: 0 8px 18px rgba(37, 99, 235, .28);
                border-color: transparent;
            }

        /*  Debar is destructive but it is not the primary action on either toolbar, so it
            reads as a red outline rather than competing with Verify for the eye. */
        .sr-btn.danger-ghost {
            color: #dc2626;
            border-color: #fecaca;
            background: linear-gradient(180deg, #fff, #fffafa);
        }

            .sr-btn.danger-ghost:not([disabled]):hover {
                background: #fff5f5;
                border-color: #fca5a5;
            }

        .sr-btn.danger {
            background: linear-gradient(135deg, #e0362c, #b91c1c);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 5px 13px rgba(220, 38, 38, .22);
        }

            .sr-btn.danger:not([disabled]):hover {
                background: linear-gradient(135deg, #e0362c, #b91c1c);
                border-color: transparent;
                box-shadow: 0 8px 18px rgba(220, 38, 38, .28);
            }

        .sr-btn[disabled] {
            opacity: .45;
            cursor: not-allowed;
            box-shadow: none !important;
            transform: none !important;
        }

    /* ---------------------------------------------------------------- the pills -- */

    .sr-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2px;
        white-space: nowrap;
    }

        .sr-pill.blue {
            background: var(--sr-blue-soft);
            color: var(--p);
            font-size: 12px;
        }

        .sr-pill.green {
            background: var(--sr-green-soft);
            color: var(--sr-green);
            border: 1px solid #bbf0cd;
        }

        .sr-pill.amber {
            background: var(--sr-amber-soft);
            color: var(--sr-amber);
            border: 1px solid #fed7aa;
        }

            /*  The waiting count is the one number on this screen that should catch the eye. */
            .sr-pill.amber:before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #fb923c;
                box-shadow: 0 0 0 0 rgba(251, 146, 60, .35);
                animation: srDotPulse 2s infinite;
            }

        .sr-pill.red {
            background: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .sr-pill.grey {
            background: #eef1f6;
            color: var(--sr-muted);
        }

    /* --------------------------------------------------------------- the filters -- */

    .sr-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 14px;
        align-items: flex-end;
    }

    .sr-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 200px;
        flex: 1 1 220px;
    }

        .sr-field > label {
            margin: 0;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--sr-muted);
        }

        .sr-field select,
        .sr-field input,
        .sr-field textarea {
            height: 36px;
            border: 1px solid var(--sr-field-line);
            border-radius: 9px;
            background-color: var(--sr-field);
            padding: 0 12px;
            font-size: 13px;
            width: 100%;
            color: #101828;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .02);
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        .sr-field textarea {
            height: auto;
            padding: 9px 12px;
        }

            .sr-field select:hover,
            .sr-field input:hover,
            .sr-field textarea:hover {
                border-color: #8db8ff;
            }

            .sr-field select:focus,
            .sr-field input:focus,
            .sr-field textarea:focus {
                outline: none;
                background-color: #fff;
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
            }

    /*  The shared dropdown partial keeps its own markup, so it is reached by scoped rules
        only and no other screen that uses it is touched. */
    .sr-wrap .form-control {
        height: 36px;
        border: 1px solid var(--sr-field-line);
        border-radius: 9px;
        background-color: var(--sr-field);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .02);
        padding: 0 12px;
        font-size: 13px;
        color: #101828;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

        .sr-wrap .form-control:hover {
            border-color: #8db8ff;
        }

        .sr-wrap .form-control:focus {
            background-color: #fff;
            border-color: var(--p);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

    /*  .form-control above is written for a one-line control, and a textarea inherited its
        fixed 36px - so every rows="2" box on these screens showed one line and clipped the
        second. Height comes back from the rows attribute, with the padding the single-line
        controls already have. Resize is left on but vertical only: dragging the corner
        widened the box past its column and pushed the row apart. */
    .sr-wrap textarea.form-control {
        height: auto;
        min-height: 36px;
        padding-top: 7px;
        padding-bottom: 7px;
        line-height: 1.45;
        resize: vertical;
    }

    /*  Bootstrap greys a disabled control with background-COLOR. Every rule above sets the
        `background` shorthand, which paints an image over that colour - so disabled fields
        came out the same white as live ones. These put the grey back as an image too.

        [readonly] is deliberately not included: the date fields on these screens are
        readonly so the picker owns them, and they are still editable through it. */
    .sr-wrap .form-control[disabled],
    .sr-wrap .form-control:disabled,
    .sr-wrap input[disabled],
    .sr-wrap input:disabled,
    .sr-wrap textarea[disabled],
    .sr-wrap textarea:disabled,
    .sr-field select:disabled,
    .sr-field input:disabled,
    .sr-field textarea:disabled {
        background-color: var(--sr-off);
        background-image: none;
        border-color: var(--sr-off-line);
        color: var(--sr-off-ink);
        box-shadow: none;
        cursor: not-allowed;
    }

        .sr-wrap .form-control[disabled]:hover,
        .sr-wrap .form-control:disabled:hover,
        .sr-wrap input:disabled:hover,
        .sr-wrap textarea:disabled:hover {
            border-color: var(--sr-off-line);
        }

    .sr-wrap .btn[disabled],
    .sr-wrap .btn:disabled,
    .sr-wrap .btn.disabled {
        background-color: var(--sr-off);
        background-image: none;
        border-color: var(--sr-off-line);
        color: var(--sr-off-ink);
        box-shadow: none;
        opacity: 1;
        cursor: not-allowed;
        transform: none;
    }

    .sr-wrap input[type=checkbox]:disabled,
    .sr-wrap input[type=radio]:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    /*  A native select draws the operating system's own arrow, which is the one thing on
        this page that cannot follow the theme. appearance:none takes it away and the chevron
        is painted as a background layer over the same gradient the other controls use, so
        both have to be declared together - background-image carries the gradient as well.

        The open list itself is drawn by the browser and cannot be styled beyond this;
        colour-scheme keeps it light so it matches rather than inverting on a dark OS. */
    .sr-wrap select,
    .sr-wrap select.form-control,
    .sr-modal select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: var(--sr-chevron), linear-gradient(180deg, var(--sr-field), var(--sr-field));
        background-repeat: no-repeat, no-repeat;
        background-position: right 12px center, 0 0;
        background-size: 12px 8px, auto;
        padding-right: 32px;
        color-scheme: light;
        cursor: pointer;
        /*  A select is only ever as wide as the column it was put in, and some of these
            columns are narrower than their own longest option - "<= (maximum)" ran under
            the chevron and stopped there. Where the room genuinely is not there, an ellipsis
            says so; the same treatment the grid cells get. */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .sr-wrap select:hover,
        .sr-wrap select.form-control:hover,
        .sr-modal select:hover {
            background-image: var(--sr-chevron), linear-gradient(180deg, #f5f8fc, #f5f8fc);
            background-repeat: no-repeat, no-repeat;
            background-position: right 12px center, 0 0;
            background-size: 12px 8px, auto;
        }

        .sr-wrap select:focus,
        .sr-wrap select.form-control:focus {
            background-image: var(--sr-chevron), linear-gradient(180deg, #fff, #fff);
            background-repeat: no-repeat, no-repeat;
            background-position: right 12px center, 0 0;
            background-size: 12px 8px, auto;
        }

        .sr-wrap select[disabled],
        .sr-wrap select:disabled,
        .sr-wrap select.form-control:disabled {
            background-image: var(--sr-chevron), linear-gradient(180deg, var(--sr-off), var(--sr-off));
            background-repeat: no-repeat, no-repeat;
            background-position: right 12px center, 0 0;
            background-size: 12px 8px, auto;
            border-color: var(--sr-off-line);
            color: var(--sr-off-ink);
            cursor: not-allowed;
        }

        .sr-wrap select option,
        .sr-modal select option {
            background: #fff;
            color: var(--sr-ink);
            padding: 6px 10px;
        }

            .sr-wrap select option:checked,
            .sr-modal select option:checked {
                font-weight: 700;
            }

    /*  The open list is drawn by the browser outside the page, so nothing above can reach
        it. Chrome 135+ and Edge expose it through appearance:base-select, and there the
        rounded panel, the spacing and the highlight are ours. Everywhere else this block
        is skipped and the native picker is used unchanged - the closed control looks the
        same either way. */
    @supports (appearance: base-select) {
        /*  base-select renders the chosen option as flow content inside the select, and
            Bootstrap leaves .form-control as display:block - so the text sat against the
            top of the box instead of on its middle. A centred flex row puts it back. */
        .sr-wrap select,
        .sr-wrap select.form-control,
        .sr-modal select {
            appearance: base-select;
            display: flex;
            align-items: center;
            width: 100%;
            line-height: 1.2;
            overflow: hidden;
            white-space: nowrap;
        }

            /*  Chrome adds its own arrow once the picker is ours; the background chevron
                already does that job, and two would sit on top of each other. */
            .sr-wrap select::picker-icon,
            .sr-modal select::picker-icon {
                display: none;
            }

            .sr-wrap select::picker(select),
            .sr-modal select::picker(select) {
                appearance: base-select;
                border: 1px solid var(--sr-line);
                border-radius: 10px;
                padding: 4px;
                margin-block: 4px;
                background: #fff;
                box-shadow: 0 10px 24px rgba(18, 45, 76, .12), 0 2px 6px rgba(18, 45, 76, .06);
                max-height: 264px;
                overflow-y: auto;
                overscroll-behavior: contain;
            }

                .sr-wrap select::picker(select)::-webkit-scrollbar,
                .sr-modal select::picker(select)::-webkit-scrollbar {
                    width: 8px;
                }

                .sr-wrap select::picker(select)::-webkit-scrollbar-thumb,
                .sr-modal select::picker(select)::-webkit-scrollbar-thumb {
                    background: #c7d2e0;
                    border-radius: 99px;
                }

            /*  A blank option is common here - the partials seed every dropdown with one -
                so the rows carry a min-height and the selected one is tinted rather than
                filled. A saturated bar across an empty row reads as a rendering fault. */
            .sr-wrap select option,
            .sr-modal select option {
                border-radius: 6px;
                padding: 5px 10px;
                min-height: 26px;
                font-size: 13px;
                line-height: 1.35;
                color: var(--sr-ink);
                background: #fff;
            }

                .sr-wrap select option:hover,
                .sr-modal select option:hover {
                    background: #f1f5fd;
                    color: var(--pd);
                }

                .sr-wrap select option:checked,
                .sr-modal select option:checked {
                    background: var(--sr-blue-soft);
                    color: var(--pd);
                    font-weight: 600;
                }

                    .sr-wrap select option:checked:hover,
                    .sr-modal select option:checked:hover {
                        background: #e3edfe;
                    }

                /*  Chrome reserves a column for its tick in front of every option, which
                    leaves the labels indented against nothing. */
                .sr-wrap select option::checkmark,
                .sr-modal select option::checkmark {
                    display: none;
                }
    }

    /*  jqGrid's filter row has its own selects, and they are half the height of these. */
    .sr-wrap .ui-jqgrid .ui-search-toolbar select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: var(--sr-chevron);
        background-repeat: no-repeat;
        background-position: right 7px center;
        background-size: 10px 7px;
        padding-right: 22px;
        color-scheme: light;
    }

    .sr-wrap .sr-cardbody .row > div[class^="col-"] {
        margin-bottom: 8px;
    }

    .sr-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--sr-line2) 10%, var(--sr-line2) 90%, transparent);
        margin: 18px 0 14px;
    }

    /* ------------------------------------------------- legacy Bootstrap panels -- */

    /*  Most screens in this ERP are built from Bootstrap panels, not from .sr-card. Rather
        than rewrite each one's markup to opt into the theme, the panel gets the card
        treatment here - so adding .sr-wrap to an existing page is enough.

        A page that has been rebuilt with .sr-card is unaffected: these selectors only match
        .panel, and .sr-card carries its own rules. */
    .sr-wrap .panel {
        border: 1px solid rgba(219, 227, 239, .92);
        border-radius: var(--sr-radius);
        box-shadow: 0 3px 12px rgba(16, 24, 40, .04);
        background: var(--sr-card);
        margin-bottom: 16px;
    }

    /*  A panel nested inside another is a grouping device, not a second card - two stacked
        borders and two shadows read as a mistake. */
    .sr-wrap .panel .panel {
        box-shadow: none;
        border-color: var(--sr-line2);
    }

    /*  theme_styles.css paints these aliceblue with blue text through
        `.theme-whbl .panel-default > .panel-heading`, which is three classes deep - the
        selector here has to match that weight or the legacy palette wins. */
    .sr-wrap .panel > .panel-heading,
    .sr-wrap .panel-default > .panel-heading {
        position: relative;
        background-color: var(--sr-head);
        background-image: none;
        border-bottom: 1px solid var(--sr-head-line);
        border-radius: var(--sr-radius) var(--sr-radius) 0 0;
        padding: 11px 16px 11px 28px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
        color: var(--sr-ink);
    }

        /*  A nested panel is a section inside a card, so it is marked the way the card head
            marks itself - with the accent, not with a filled bar. */
        .sr-wrap .panel > .panel-heading:before {
            content: "";
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 14px;
            border-radius: 2px;
            background: linear-gradient(180deg, var(--p), #60a5fa);
        }

        .sr-wrap .panel > .panel-heading a,
        .sr-wrap .panel > .panel-heading .panel-title {
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

    .sr-wrap .panel-body {
        padding: 14px 16px;
    }

    /*  Even spacing between the legacy label/control rows. Deliberately NOT flex: these
        columns hold selects whose min-content width exceeds their col-sm-* width, and a
        flex item cannot shrink below that, so every row broke onto four lines. */
    .sr-wrap .panel-body .row,
    .sr-wrap .sr-cardbody > .row {
        margin-bottom: var(--sr-rowgap);
    }

        .sr-wrap .panel-body .row:last-child,
        .sr-wrap .sr-cardbody > .row:last-child {
            margin-bottom: 0;
        }

    /*  The rows are separated in the markup by <br>, one per gap, which adds an 18px line
        box on top of the margins the row already carries - and only between some of them.
        The pitch came out at 39px in one place and 8px in another. Taking the line box out
        leaves a single step, set once above, between every row on the page. */
    .sr-wrap .panel-body br,
    .sr-wrap .sr-cardbody > br {
        display: none;
    }

    .sr-wrap .panel-body .form-group {
        margin-bottom: var(--sr-rowgap);
    }

    /*  The red "(In LPA)" that follows Cost to Company is a bare <label>: Bootstrap gave it
        a bottom margin and no top one, so it sat 2px under its own field and nearer the row
        below. It is a unit, not a validation error - red bold is the page's error voice and
        spending it on "this number is in lakhs" leaves nothing left to say when something is
        actually wrong. The inline style has to be beaten to say that. */
    .sr-wrap .panel-body .form-control + label,
    .sr-wrap .panel-body input[type=file] + label {
        display: block;
        margin-top: 5px;
        margin-bottom: 0;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--sr-muted) !important;
        letter-spacing: .01em;
    }

    /*  A legacy panel row is a column holding nothing but the label text followed by a
        column holding the control. Both were left aligned, so on a wide screen the label sat
        at the far left of its column and the field at the far left of the next one, with up
        to 173px of nothing between a field and the word that names it.

        Right aligning the label closes that, and it is the classic aligned-form shape - but
        it reads as the label having drifted away from the left edge of its section, so these
        stay left aligned and only the typography and the baseline are set here.
        :not(:has(*)) is what tells a label column from a control column; a browser without
        :has drops these rules and gets the old layout back.

        Guarded by the sm breakpoint, because below it Bootstrap stacks the columns. */
    @media (min-width: 768px) {
        .sr-wrap .panel-body .row > div[class*="col-"]:not(:has(*)) {
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: var(--sr-label);
            padding-top: 7px;
        }
    }

    /*  From here on the fixes below stop being safe at every width, so each is held back to
        the point where the room it needs actually exists. A label that is allowed to spill
        out of its column has to spill into something empty; on a narrower screen the same
        column is half the size and the same label lands on the control beside it, which is
        worse than the two-line wrap it replaced. Under each threshold the row simply keeps
        the behaviour it has today.

        A col-sm-2 label - "Condition", "Cost to Company", "Designation" - fits on one line
        from about 990px of viewport, in the narrowest panel on the page. */
    @media (min-width: 992px) {
        .sr-wrap .panel-body .row > div[class~="col-sm-2"]:not(:has(*)) {
            white-space: nowrap;
            line-height: 36px;
            padding-top: 0;
            padding-left: 0;
            padding-right: 4px;
        }

        /*  Company Criteria, first line. Condition has to show "<= (maximum)" and the
            chevron inside a col-sm-3 of a half-width panel - 71px of room for 86px of text
            at the target width, so the label ran under the chevron and was cut off there.
            That line only ever used 75% of its width, so the column takes the slack and Exam
            takes the rest, which also stops the two controls on it being different sizes for
            no reason. 86% rather than the full 92% the line can hold: the Exam label beside
            them is a fixed 35px, not a share of the line, so the percentages have to leave
            room for it at the narrowest width this block applies at - measured, 301px of
            line at a 992px viewport - or the last control wraps onto its own row.

            Named by control rather than by column, because both are ordinary col-sm-4 /
            col-sm-3 and nothing else on the page should follow them.

            Held behind .sr-proposal because these are the only two rules in this file that
            know an id. 26 other views declare a #ddlExam or a #ddlCondition, and this
            stylesheet is meant to be safe to put on any of them. */
        .sr-proposal .panel-body .row > div[class*="col-"]:has(> #ddlExam) {
            width: 34.5%;
        }

        .sr-proposal .panel-body .row > div[class*="col-"]:has(> #ddlCondition) {
            width: 34.83%;
        }
    }

    /*  The narrowest columns cannot hold their label at all: "Value %", "Is Back" and
        "Is Gap" each broke across two lines inside a col-sm-1 with 25px of room. They keep
        their column but are allowed to run back into the gutter in front of them, which is
        empty, and the line box is set to the height of the control beside them so the label
        sits on its middle instead of above it. A point off the type buys the last few pixels
        that keep "Value %", the longest of the three, clear of the field it names. */
    @media (min-width: 1200px) {
        /*  These three are the one place right alignment is load-bearing rather than
            cosmetic: the label is wider than its box, and a line is only allowed to spill
            backwards into the empty gutter if it is anchored to the right edge. Left
            aligned they would overflow forwards, onto the control they name. */
        .sr-wrap .panel-body .row > div[class~="col-sm-1"]:not(:has(*)) {
            text-align: right;
            white-space: nowrap;
            font-size: 12px;
            line-height: 36px;
            padding-top: 0;
            padding-left: 0;
            padding-right: 4px;
        }

            /*  A line too long for its box overflows from the box's start edge and ignores
                text-align, so all three of these run to the right, towards their own field.
                The first label on a line is the one with room behind it - nothing sits to
                its left but the gutter - so it is given a head start and lands clear.
                A label that already fits is unaffected: the line is still placed by
                text-align against the right edge. */
            .sr-wrap .panel-body .row > div[class~="col-sm-1"]:first-child:not(:has(*)) {
                text-indent: -14px;
            }
    }

    .sr-wrap .panel-footer {
        background: linear-gradient(180deg, #fbfcfe, #f8fafc);
        border-top: 1px solid var(--sr-line2);
    }

    /*  Bootstrap's own buttons, brought into the same shape as .sr-btn without renaming
        every button on the page. */
    .sr-wrap .btn {
        height: 35px;
        border-radius: 8px;
        border: 1px solid #d7e0eb;
        padding: 0 14px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        background-image: none;
        text-shadow: none;
        box-shadow: none;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

        .sr-wrap .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(16, 24, 40, .08);
        }

        /*  Every input on the page answers the keyboard with a ring; the buttons did not,
            so tabbing through a panel went dark the moment it reached Add. :focus-visible
            keeps it off the mouse. */
        .sr-wrap .btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
        }

        .sr-wrap .btn-primary {
            background: linear-gradient(135deg, #2f6fed, #4f46e5);
            border-color: transparent;
            color: #fff;
        }

        .sr-wrap .btn-success {
            background: linear-gradient(135deg, #17a35f, #0f8a4f);
            border-color: transparent;
            color: #fff;
        }

        .sr-wrap .btn-danger {
            background: linear-gradient(135deg, #e0362c, #b91c1c);
            border-color: transparent;
            color: #fff;
        }

        .sr-wrap .btn-default {
            background: #fff;
            color: #344054;
        }

    /*  A .form-control that is also a button - the layout uses that combination to stretch
        buttons across a column - must not inherit the input height rules. */
    .sr-wrap .btn.form-control {
        height: 35px;
        padding: 0 14px;
    }

    /* ----------------------------------------------------------------- the grids -- */

    /*  Flush with the card. An inset read as an empty gutter down the left of every grid,
        because jqGrid draws its own border right next to it. */
    .sr-gridwrap {
        padding: 0;
        overflow-x: auto;
        background: #fff;
    }

        .sr-gridwrap::-webkit-scrollbar {
            height: 9px;
        }

        .sr-gridwrap::-webkit-scrollbar-track {
            background: #f2f4f7;
        }

        .sr-gridwrap::-webkit-scrollbar-thumb {
            background: #c7d2e0;
            border-radius: 99px;
        }

            .sr-gridwrap::-webkit-scrollbar-thumb:hover {
                background: #aebdce;
            }

    .sr-wrap .ui-jqgrid {
        border: none;
        /*  A rule along the bottom, the full width of the grid rather than the width of the
            columns. With the header band below it that gives the grid two edges that run the
            whole way across, so a table narrower than its own scroll box reads as a table
            with room to spare rather than one that was cut off. Bottom only - a left border
            would put a notch in front of column one. */
        border-bottom: 1px solid var(--sr-head-line);
        border-radius: 0;
        font-size: 12.5px;
    }

        /*  Headings stay centred - only the cell text below them reads left to right.

            Flat rather than the old gradient, in the same band colour the panel heads use:
            a column head is chrome, and a gradient on chrome is the one thing that dates a
            table. Flat also means the band can simply continue past the last column (see
            the header div below) with no seam to line up. */
        .sr-wrap .ui-jqgrid .ui-jqgrid-htable th {
            height: 39px;
            background-color: var(--sr-head);
            background-image: none;
            border: 1px solid var(--sr-head-line);
            font-size: 11px;
            color: var(--sr-label);
            font-weight: 600;
            letter-spacing: .02em;
            padding: 0 8px;
        }

        /*  jqGrid clips a cell wider than its column, which sheared course names off
            mid-word - "Bachelor of Commerce (Computerized Financial Accoun" simply stopped.
            An ellipsis says the same thing on purpose.

            text-overflow only acts on a line that cannot wrap, so the columns that opt into
            wrapping through cellattr (white-space: normal - Job Profile, Skill Required,
            Formula) are untouched by it and go on wrapping.

            The rules between rows are kept and the ones between columns lightened, so the
            eye follows a record across rather than being handed a lattice. */
        .sr-wrap .ui-jqgrid tr.jqgrow > td {
            height: 35px;
            border: 1px solid;
            border-color: var(--sr-cell-line) var(--sr-cell-line2);
            padding: 4px 8px;
            background: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background .15s ease;
        }

        /*  The old hover was #fbfdff - four points off white, which on a projector or a
            cheap panel is no hover at all. */
        .sr-wrap .ui-jqgrid tr.jqgrow:hover > td {
            background: var(--sr-rowhover);
        }

        /*  jqGrid gives the row-number column a fixed width and the layout its own left
            border; without this the two stack into a visible notch before column one. */
        .sr-wrap .ui-jqgrid .ui-jqgrid-view,
        .sr-wrap .ui-jqgrid .ui-jqgrid-hdiv,
        .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv {
            border-left: none;
        }

        .sr-wrap .ui-jqgrid .ui-search-toolbar input,
        .sr-wrap .ui-jqgrid .ui-search-toolbar select {
            width: 100%;
            height: 29px;
            border: 1px solid #93c5fd;
            border-radius: 6px;
            background-color: #fff;
            outline: none;
            padding: 0 6px;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

            /*  A filter box stays white so it reads as a search field rather than a value,
                but appearance:none has already taken the native arrow away - so this has to
                paint the chevron back or the column filters look like plain text boxes. */
            .sr-wrap .ui-jqgrid .ui-search-toolbar select {
                background-image: var(--sr-chevron), linear-gradient(180deg, #fff, #fff);
                background-repeat: no-repeat, no-repeat;
                background-position: right 7px center, 0 0;
                background-size: 10px 7px, auto;
                padding-right: 22px;
            }

            .sr-wrap .ui-jqgrid .ui-search-toolbar input:focus,
            .sr-wrap .ui-jqgrid .ui-search-toolbar select:focus {
                border-color: var(--p);
                box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
            }

        .sr-wrap .ui-jqgrid input[type=checkbox] {
            width: 14px;
            height: 14px;
            accent-color: var(--p);
        }

        /*  These grids run shrinkToFit:false with fixed column widths, so the table is
            narrower than the panel and jqGrid's own chrome fills the rest. Left in the
            legacy blue that gap reads as a broken column; transparent hands it back to the
            panel, so it reads as the empty space it is. The cells paint themselves. */
        .sr-wrap .ui-jqgrid,
        .sr-wrap .ui-jqgrid .ui-jqgrid-view,
        .sr-wrap .ui-jqgrid .ui-jqgrid-hbox,
        .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv,
        .sr-wrap .ui-jqgrid .ui-jqgrid-htable,
        .sr-wrap .ui-jqgrid .ui-jqgrid-btable {
            background: transparent;
        }

        /*  The header is the one piece of that chrome that has to keep going. Painted only
            on the cells, the band stopped dead where the last column ended and the rest of
            the header was blank panel - which is what made a short table look like a broken
            one, and left the scroll bar at the far edge of the grid with nothing to belong
            to. Painting the band on the header div runs it the full width of the grid; the
            last column's own right border still marks where the table ends, and the space
            past it now reads as space the table does not need. A filter row is inside this
            same div, so it is covered by the one flat fill. */
        .sr-wrap .ui-jqgrid .ui-jqgrid-hdiv {
            background-color: var(--sr-head);
            background-image: none;
            border-bottom: 1px solid var(--sr-head-line);
        }

        /*  The body's own scroll bar sits at the right edge of the grid, which on these
            grids is a long way from the last column. It cannot be moved - the scroll box is
            the grid - so it is made quiet instead, the same thin rail .sr-gridwrap uses. */
        .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar {
            width: 9px;
            height: 9px;
        }

        .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-track {
            background: #f6f8fb;
        }

        .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-thumb {
            background: #c7d2e0;
            border-radius: 99px;
        }

            .sr-wrap .ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-thumb:hover {
                background: #aebdce;
            }

        /*  A grid given a `caption` draws its own title bar. ui.jqgrid.css paints it in the
            same aliceblue/#2e6e9e the panel heads used to use, so a captioned grid sitting
            next to a themed section looked like it belonged to a different screen. Matched
            to .panel-heading, accent bar included. */
        .sr-wrap .ui-jqgrid .ui-jqgrid-titlebar {
            position: relative;
            height: auto;
            min-height: 38px;
            padding: 10px 36px 10px 26px;
            background-color: var(--sr-head);
            background-image: none;
            border: 1px solid var(--sr-head-line);
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            color: var(--sr-ink);
            font-size: 13px;
            font-weight: 700;
        }

            .sr-wrap .ui-jqgrid .ui-jqgrid-titlebar:before {
                content: "";
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 13px;
                border-radius: 2px;
                background: linear-gradient(180deg, var(--p), #60a5fa);
            }

            .sr-wrap .ui-jqgrid .ui-jqgrid-caption,
            .sr-wrap .ui-jqgrid .ui-jqgrid-title {
                margin: 0;
                color: var(--sr-ink);
                font-size: 13px;
                font-weight: 700;
            }

            /*  The collapse control keeps jqGrid's own positioning - it is placed inline and
                its arrow flips on collapse - and only gains a target to aim at. */
            .sr-wrap .ui-jqgrid .ui-jqgrid-titlebar-close {
                border-radius: 6px;
                border: 1px solid transparent;
                transition: background .15s ease, border-color .15s ease;
            }

                .sr-wrap .ui-jqgrid .ui-jqgrid-titlebar-close:hover {
                    padding: 1px;
                    background: #fff;
                    border-color: #cddcee;
                }

        .sr-wrap .ui-jqgrid .ui-jqgrid-pager,
        .sr-wrap .ui-jqgrid .ui-jqgrid-toppager {
            border-color: var(--sr-line2);
            background: linear-gradient(180deg, #fbfcfe, #f8fafc);
        }

        /*  The rows-per-page box inside a pager is NOT styled here, even though the select
            block above reaches it: css/cyborg-grid.css owns it for every screen in the
            application, themed or not, and is linked after jqGrid's own stylesheet so it
            lands last. One definition, or the same control looks different on every page. */

    /*  The debarred row. Coloured through the row itself rather than a cell so the whole
        line reads as removed at a glance, and kept stronger than jqGrid's own alternating
        row shading, which would otherwise win on every second row. */
    .sr-wrap tr.jqgrow.sr-debarred > td {
        background: #fff1f1 !important;
        color: #b91c1c !important;
        font-weight: 600;
    }

    .sr-wrap tr.jqgrow.sr-debarred:hover > td {
        background: #ffe4e4 !important;
    }

    /* ------------------------------------------------------------ row actions -- */

    /*  Row action. The old one was a background-image on a bare <input>, which had no
        hover, no focus ring and went blank if the png failed. */
    .sr-iconbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 24px;
        padding: 0;
        border: 1px solid #d7e0eb;
        border-radius: 6px;
        background: #fff;
        color: var(--sr-muted);
        cursor: pointer;
        transition: color .15s ease, border-color .15s ease, background .15s ease;
    }

        .sr-iconbtn:hover {
            color: var(--sr-red);
            border-color: #fecaca;
            background: #fff5f5;
        }

        /*  Sending a student back is not a destructive act, so it does not borrow the red. */
        .sr-iconbtn.back:hover {
            color: var(--p);
            border-color: #bfd4fd;
            background: var(--sr-blue-soft);
        }

        .sr-iconbtn svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .sr-linkbtn {
        border: 1px solid #d7e0eb;
        background: #fff;
        border-radius: 6px;
        padding: 1px 8px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        color: var(--sr-red);
    }

        .sr-linkbtn.undo {
            color: var(--sr-green);
        }

    /* -------------------------------------------------------------- the dialogs -- */

    /*  THE modal blur. Bootstrap 3.3.7 keeps "transform: translate(0,0)" on a shown dialog,
        and a transformed element is composited on its own layer, which is what renders the
        text inside it soft. Nothing here needs the slide-in, so the transform is dropped and
        the fade kept. Applies to bootbox too - every confirm on this screen is one. */
    .sr-modal.fade .modal-dialog,
    .sr-modal.in .modal-dialog,
    .bootbox.fade .modal-dialog,
    .bootbox.in .modal-dialog {
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    /*  bootbox builds its own markup, so it is dressed to match the dialogs above rather
        than left as raw Bootstrap. */
    .bootbox .modal-content {
        border: none;
        border-radius: var(--sr-radius);
        overflow: hidden;
        box-shadow: var(--sr-shadow);
        color: var(--sr-ink);
    }

    .bootbox .modal-body {
        padding: 24px 26px 20px;
        font-size: 14px;
        line-height: 1.55;
        color: var(--sr-ink);
    }

    .bootbox .modal-header {
        padding: 16px 20px;
        background: linear-gradient(180deg, #fff, #fbfcfe);
        border-bottom: 1px solid var(--sr-line2);
    }

    .bootbox .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 14px 20px;
        background: linear-gradient(180deg, #fbfcfe, #f8fafc);
        border-top: 1px solid var(--sr-line2);
        border-width: 1px;
    }

        .bootbox .modal-footer .btn {
            float: none;
            margin: 0;
            min-width: 108px;
            height: 35px;
            border: 1px solid #d7e0eb;
            border-radius: 8px;
            padding: 0 16px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            text-shadow: none;
            background: #fff;
            background-image: none;
            color: #344054;
            box-shadow: none;
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
        }

            .bootbox .modal-footer .btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 5px 12px rgba(16, 24, 40, .08);
                border-color: #9fb7d4;
            }

            .bootbox .modal-footer .btn-primary {
                background: linear-gradient(135deg, #2f6fed, #4f46e5);
                border-color: transparent;
                color: #fff;
                box-shadow: 0 5px 13px rgba(37, 99, 235, .22);
            }

                .bootbox .modal-footer .btn-primary:hover {
                    background: linear-gradient(135deg, #2f6fed, #4f46e5);
                    border-color: transparent;
                    box-shadow: 0 8px 18px rgba(37, 99, 235, .28);
                }

    .bootbox .bootbox-close-button {
        border: none;
        background: transparent;
        color: var(--sr-muted);
        font-size: 24px;
        line-height: 1;
        opacity: .7;
        cursor: pointer;
    }

        .bootbox .bootbox-close-button:hover {
            color: var(--sr-ink);
            opacity: 1;
        }

    .sr-modal .modal-dialog {
        width: 560px;
        max-width: 94%;
    }

    .sr-modal .modal-content {
        border: none;
        border-radius: var(--sr-radius);
        overflow: hidden;
        box-shadow: var(--sr-shadow);
        color: var(--sr-ink);
    }

    .sr-modal .modal-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        background: linear-gradient(180deg, #fff, #fbfcfe);
        border-bottom: 1px solid var(--sr-line2);
    }

    /*  Sits where a close control is looked for. The badge on the left of the header is a
        status mark, and an X there was being clicked as if it dismissed the dialog. */
    .sr-modal .sr-close {
        margin-left: auto;
        align-self: flex-start;
        border: none;
        background: transparent;
        color: var(--sr-muted);
        font-size: 24px;
        line-height: 1;
        padding: 0 2px;
        cursor: pointer;
        opacity: .7;
    }

        .sr-modal .sr-close:hover {
            color: var(--sr-ink);
            opacity: 1;
        }

    .sr-modal .sr-mark {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        background: #fee2e2;
        color: #b91c1c;
    }

        .sr-modal .sr-mark.undo {
            background: var(--sr-green-soft);
            color: var(--sr-green);
        }

    .sr-modal .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--sr-ink);
    }

    .sr-modal .sr-msub {
        margin: 2px 0 0;
        font-size: 12px;
        color: var(--sr-muted);
    }

    .sr-modal .modal-body {
        padding: 18px 20px;
        font-size: 13px;
    }

    .sr-modal .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 14px 20px;
        background: linear-gradient(180deg, #fbfcfe, #f8fafc);
        border-top: 1px solid var(--sr-line2);
        border-width: 1px;
    }

        /*  Bootstrap's own footer rule floats buttons and adds margins; both fight the flex
            row above, so they are cleared rather than worked around. */
        .sr-modal .modal-footer .sr-btn {
            float: none;
            margin: 0;
            min-width: 116px;
        }

    /*  The student the action lands on, said once and said plainly. Two separate labelled
        fields made the reader assemble the identity themselves. */
    .sr-student {
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--sr-line);
        border-radius: 11px;
        background: linear-gradient(180deg, #fff, #fbfcfe);
        padding: 12px 14px;
        margin-bottom: 16px;
    }

        .sr-student .sr-avatar {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--sr-blue-soft);
            color: var(--p);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 15px;
        }

        .sr-student .sr-who {
            min-width: 0;
        }

        .sr-student .sr-name {
            display: block;
            font-weight: 700;
            font-size: 14px;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sr-student .sr-id {
            display: block;
            color: var(--sr-muted);
            font-size: 12px;
            letter-spacing: .3px;
        }

    .sr-modal .sr-label {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 6px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--sr-muted);
    }

        .sr-modal .sr-label .sr-count {
            text-transform: none;
            letter-spacing: 0;
            font-weight: 600;
            color: var(--sr-muted);
        }

    .sr-modal textarea#txtDebarRemark {
        display: block;
        width: 100%;
        min-height: 96px;
        resize: vertical;
        border: 1px solid #d7e0eb;
        border-radius: 9px;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--sr-ink);
        background: #fff;
    }

        .sr-modal textarea#txtDebarRemark:focus {
            outline: none;
            border-color: var(--p);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
        }

        .sr-modal textarea#txtDebarRemark.sr-invalid {
            border-color: var(--sr-red);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
        }

    .sr-modal .sr-err {
        display: none;
        margin: 6px 0 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--sr-red);
    }

    .sr-warnbox {
        border: 1px solid #fecaca;
        background: linear-gradient(90deg, #fff5f5, #fff1f1);
        color: #991b1b;
        border-radius: 11px;
        padding: 10px 14px;
        margin-bottom: 14px;
        line-height: 1.45;
    }

    /* ------------------------------------------------------------- the motion -- */

    @keyframes srSlideDown {
        from {
            opacity: 0;
            transform: translateY(-14px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes srFadeUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes srHeroGlow {
        from {
            opacity: .72;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes srAccentFlow {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    @keyframes srSoftPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(37, 99, 235, .22);
        }

        50% {
            box-shadow: 0 0 0 7px rgba(37, 99, 235, 0);
        }
    }

    @keyframes srDotPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(251, 146, 60, .30);
        }

        50% {
            box-shadow: 0 0 0 5px rgba(251, 146, 60, 0);
        }
    }

    @keyframes srButtonShine {
        0%, 65% {
            left: -55%;
        }

        100% {
            left: 125%;
        }
    }

    @media (max-width: 1100px) {
        .sr-hero {
            align-items: flex-start;
            flex-direction: column;
            gap: 4px;
        }

            .sr-hero h2 {
                white-space: normal;
            }

            /*  flex-basis follows the main axis, so the 300px that reserves a sensible
                column width on a row becomes 300px of HEIGHT once the hero stacks - which
                left a three-line strapline sitting in a 350px band. */
            .sr-hero p {
                flex: 0 1 auto;
            }
    }

    @media (max-width: 767px) {
        .sr-wrap {
            padding: 10px;
        }

        .sr-hero {
            border-radius: 11px;
            padding: 14px;
        }

            .sr-hero h2 {
                font-size: 18px;
            }

        .sr-cardhead {
            align-items: flex-start;
        }

        .sr-field {
            flex: 1 1 100%;
        }

        .sr-btn {
            padding: 0 10px;
        }
    }

    /*  Anyone who has asked their system to stop animating gets a still page. */
    @media (prefers-reduced-motion: reduce) {
        .sr-wrap *,
        .sr-wrap *:before,
        .sr-wrap *:after,
        .sr-modal *,
        .bootbox * {
            animation: none !important;
            transition: none !important;
        }
    }

    /* ---------------------------------------------------------- advanced filter --

       The condition builder that sits between a card's toolbar and its grid, plus the
       operator link jqGrid draws beside each column's own filter box. Both are opt-in:
       nothing here applies to a grid that has not asked for them.                     */

    /*  The strip carries a tint of its own. Sitting between the white toolbar and the white
        grid it was near invisible, and nobody reading the page could tell it was a filter at
        all - which is the only reason it is coloured rather than left neutral. */
    .sr-adv {
        border-top: 1px solid #dce7fa;
        border-bottom: 1px solid #cfddf6;
        background: linear-gradient(180deg, #f3f8ff, #e9f1fe);
    }

    /*  Styled by id rather than a class of its own: the chip renderer rewrites the button's
        whole class list to add and drop .primary, so any class we put here would be gone the
        moment the first condition was applied. */
    .sr-wrap #btnAdvToggle {
        padding-left: 34px;
        border-color: #9dbcf0;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563eb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.4 3.4h11.2l-4.3 5.1v4.1l-2.6-1.3V8.5z'/></svg>");
        background-repeat: no-repeat;
        background-position: 12px center;
        background-size: 14px 14px;
        color: #1d4ed8;
    }

        .sr-wrap #btnAdvToggle:not([disabled]):hover {
            border-color: #6f9ae8;
            background-color: #fff;
        }

        /*  .primary goes on as soon as a condition is live, and its background shorthand
            would drop the funnel - so both layers are named again here. */
        .sr-wrap #btnAdvToggle.primary {
            border-color: transparent;
            color: #fff;
            background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.4 3.4h11.2l-4.3 5.1v4.1l-2.6-1.3V8.5z'/></svg>"), linear-gradient(135deg, #2f6fed, #4f46e5);
            background-repeat: no-repeat, no-repeat;
            background-position: 12px center, 0 0;
            background-size: 14px 14px, auto;
        }

    .sr-advbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 9px 14px 9px 17px;
    }

    .sr-advchips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .sr-advchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 24px;
        padding: 0 4px 0 10px;
        border-radius: 20px;
        border: 1px solid #cddffb;
        background: var(--sr-blue-soft);
        color: #1e40af;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
    }

        .sr-advchip button {
            border: 0;
            background: transparent;
            color: #1e40af;
            font-size: 15px;
            line-height: 1;
            padding: 0 4px;
            cursor: pointer;
            opacity: .65;
        }

            .sr-advchip button:hover {
                opacity: 1;
            }

    .sr-advbody {
        padding: 4px 14px 12px 17px;
        border-top: 1px dashed var(--sr-line2);
    }

    .sr-advrow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }

    /*  Scoped under .sr-wrap so these beat the theme's own .sr-wrap select rule, which sets
        every select to width:100% - with a flex-basis of auto that made the operator take the
        whole row and pushed the value box onto a line of its own. Each control therefore
        states its own basis rather than leaning on width. */
    .sr-wrap .sr-advfield,
    .sr-wrap .sr-advop,
    .sr-wrap .sr-advval {
        height: 34px;
        border: 1px solid var(--sr-field-line);
        border-radius: 9px;
        background-color: var(--sr-field);
        padding: 0 10px;
        font-size: 13px;
        color: #101828;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    /*  The column list is the long one and the only one worth giving room to; the
        operator is two characters wide most of the time. */
    .sr-wrap .sr-advfield {
        flex: 1 1 230px;
        width: auto;
        min-width: 160px;
        max-width: 320px;
    }

    .sr-wrap .sr-advop {
        flex: 0 0 138px;
        width: auto;
        min-width: 0;
    }

    .sr-wrap .sr-advval {
        flex: 1 1 150px;
        width: auto;
        min-width: 90px;
        max-width: 260px;
    }

        /*  A between condition is two boxes and a word, so neither box may eat the row. */
        .sr-wrap .sr-advval.two {
            flex: 0 0 96px;
            width: auto;
            min-width: 0;
        }

        .sr-wrap .sr-advfield:focus,
        .sr-wrap .sr-advop:focus,
        .sr-wrap .sr-advval:focus {
            outline: none;
            background: #fff;
            border-color: #9dbcf0;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
        }

    .sr-advand {
        font-size: 12px;
        color: var(--sr-muted);
    }

    .sr-advgap {
        flex: 1 1 auto;
    }

    .sr-advdel {
        width: 28px;
        height: 28px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--sr-muted);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
    }

        .sr-advdel:hover {
            border-color: #f3c7c7;
            background: var(--sr-red-soft);
            color: var(--sr-red);
        }

    .sr-advfoot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--sr-line2);
    }

        .sr-advfoot .sr-spacer {
            flex: 1 1 auto;
        }

    .sr-advmatch {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--sr-label);
        cursor: pointer;
    }

        .sr-advmatch input {
            margin: 0;
        }

    .sr-advnote,
    .sr-advempty {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.6;
        color: var(--sr-muted);
    }

    .sr-advempty {
        margin: 8px 0 0;
    }

    /*  jqGrid's per column operator link, in the row of filter boxes under the headings.
        It ships as a bare anchor, which in this theme is an underlined blue word sitting
        on the box - so it is given a chip of its own instead. */
    .sr-wrap .ui-search-toolbar .soptclass {
        display: inline-block;
        min-width: 20px;
        padding: 0 3px !important;
        border-radius: 5px;
        background: var(--sr-off);
        color: #344054;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

        .sr-wrap .ui-search-toolbar .soptclass:hover {
            background: var(--sr-blue);
            color: #fff;
        }

    /*  The menu that link opens. jqGrid appends it to the body, so it cannot be scoped
        under .sr-wrap, and it carries Bootstrap's modal-content class. */
    #sopt_menu {
        z-index: 2000;
        border: 1px solid var(--sr-line);
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(16, 24, 40, .14);
        padding: 4px;
    }

        #sopt_menu > li > a {
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            color: #344054;
        }