@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.password-field {
    position: relative;
}

/* Edge and IE draw their own eye button in password boxes; hide it so each box shows only the BMS show-password button. */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.password-field .form-control {
    padding-right: 2.75rem;
}

.password-toggle-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #5f6b7a;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    z-index: 5;
}

.password-toggle-button:hover,
.password-toggle-button:focus {
    color: #1b6ec2;
}

.password-toggle-button:focus-visible {
    border-radius: 6px;
    box-shadow: 0 0 0 0.2rem rgba(37, 140, 251, 0.25);
    outline: none;
}

.form-floating.password-field .password-toggle-button {
    top: 1.75rem;
}


/* Sidebar container */
.sidebar {
    transition: width 0.25s ease;
    overflow-x: hidden;
}

@media (min-width: 641px) {
    /* Collapsed sidebar */
    .sidebar.collapsed {
        width: 70px;
    }
}

/* Sidebar header */
.sidebar-header {
    height: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: white;
}

/* Navigation links */
.sidebar .nav-link {
    color: #fff;
    white-space: nowrap;
}

/* Hide text when collapsed */
.sidebar.collapsed .nav-link {
    justify-content: center;
    text-align: center;
}

    /* Hide link text (keep icons) */
    .sidebar.collapsed .nav-link span + span,
    .sidebar.collapsed .nav-link:not(:has(span)) {
        display: none;
    }

/* Ensure icons remain visible */
.sidebar .bi {
    font-size: 1.2rem;
}

/* Icon-only button (no border, no background) */
.icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
}

    /* Default icon color */
    .icon-btn i {
        font-size: 1.1rem;
    }

    /* Hover effect */
    .icon-btn.text-danger:hover i {
        color: #dc3545;
        transform: scale(1.15);
    }

    /* Remove focus outline */
    .icon-btn:focus {
        outline: none;
        box-shadow: none;
    }

    .icon-btn:hover {
        background-color: rgba(220, 53, 69, 0.1);
        border-radius: 50%;
    }

.stat-tile {
    position: relative;
    color: #fff;
    border-radius: 6px;
    overflow: hidden;
    min-height: 140px;
}

    .stat-tile .inner {
        padding: 20px;
    }

    .stat-tile h3 {
        font-size: 38px;
        font-weight: 700;
        margin: 0;
    }

    .stat-tile p {
        font-size: 16px;
        margin: 5px 0 0;
    }

    .stat-tile .icon {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 60px;
        opacity: 0.25;
    }

    .stat-tile .more {
        display: block;
        padding: 10px;
        text-align: center;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        background: rgba(0,0,0,0.15);
    }

.stat-blue {
    background-color: #17a2b8;
}

.stat-green {
    background-color: #28a745;
}

.stat-yellow {
    background-color: #ffc107;
    color: #212529;
}

.stat-red {
    background-color: #dc3545;
}

.stat-yellow .more,
.stat-yellow .icon {
    color: #212529;
}

.stat-purple {
    background-color: #9b6bd3;
    color: #fff;
}

    .stat-purple .icon {
        color: rgba(255, 255, 255, 0.25);
    }

    .stat-purple .more {
        background: rgba(0, 0, 0, 0.12);
        color: #fff;
    }

        .stat-purple .more:hover {
            background: rgba(0, 0, 0, 0.18);
        }



.review-comment {
    background-color: #e8ecef;
    /* border-left: 4px solid #198754;  Bootstrap success green */
    padding: 3px 3px;
    border-radius: 3px;
   
}

@media (max-width: 576px) {
    .application-stepper {
        margin-bottom: 2rem !important;
    }

    .application-stepper-track {
        height: 42px !important;
        margin-bottom: 0.75rem !important;
    }

    .application-stepper-line {
        top: 17px !important;
    }

    .application-stepper-circle {
        height: 32px !important;
        width: 32px !important;
        font-size: 0.85rem;
    }

    .application-stepper-label-item {
        min-width: 0;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .application-stepper-label {
        font-size: 0.65rem !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }
}

/* =====================================================================
   BMS theme: City of Ekurhuleni
   Appended after the original app.css rules. CSS only: no markup changes.
   ===================================================================== */

:root {
    /* brand (from the City of Ekurhuleni emblem) */
    --coe-navy: #1B3069;
    --coe-green: #00804A;
    --coe-gold: #F5B819;
    --coe-red: #D2232A;

    /* theme tokens */
    --t-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --t-bg: #F4F6FA;
    --t-surface: #FFFFFF;
    --t-ink: #142033;
    --t-ink-2: #4A5568;
    --t-ink-3: #7A8699;
    --t-line: #E3E8EF;
    --t-primary: #1B3069;
    --t-primary-hover: #142552;
    --t-primary-soft: #E8EDF8;
    --t-accent: var(--coe-gold);
    --t-ring: rgba(27, 48, 105, .22);

    --t-side-bg: linear-gradient(180deg, #0F1E45 0%, #0B1735 100%);
    --t-side-ink: rgba(255, 255, 255, .74);
    --t-side-ink-strong: #FFFFFF;
    --t-side-hover: rgba(255, 255, 255, .07);
    --t-side-active: rgba(255, 255, 255, .12);
    --t-side-line: rgba(255, 255, 255, .08);
    --t-side-icon-filter: none;

    --t-hero: radial-gradient(1200px 600px at -10% 110%, rgba(0, 128, 74, .55), transparent 60%),
              radial-gradient(900px 500px at 110% -10%, rgba(210, 35, 42, .35), transparent 55%),
              radial-gradient(700px 400px at 90% 100%, rgba(245, 184, 25, .28), transparent 60%),
              linear-gradient(160deg, #13275A 0%, #0B1735 100%);

    --t-radius: 14px;
    --t-radius-sm: 10px;
    --t-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
    --t-shadow-lg: 0 24px 60px rgba(11, 23, 53, .18);
    --t-stripe: linear-gradient(90deg, var(--coe-green) 0 25%, var(--coe-gold) 25% 50%, var(--coe-red) 50% 75%, var(--coe-navy) 75% 100%);
}

/* ---- demo variant: Emerald (deep green) ---- */
:root[data-variant="emerald"] {
    --t-primary: #006B3F;
    --t-primary-hover: #00562F;
    --t-primary-soft: #E3F3EB;
    --t-ring: rgba(0, 107, 63, .22);
    --t-side-bg: linear-gradient(180deg, #0B3A2A 0%, #072A1E 100%);
    --t-hero: radial-gradient(1100px 600px at -10% 110%, rgba(245, 184, 25, .35), transparent 60%),
              radial-gradient(900px 500px at 110% -10%, rgba(27, 48, 105, .55), transparent 55%),
              linear-gradient(160deg, #0E4A34 0%, #072A1E 100%);
}

/* ---- demo variant: Daylight (light sidebar) ---- */
:root[data-variant="daylight"] {
    --t-primary: #1B3069;
    --t-side-bg: #FFFFFF;
    --t-side-ink: #4A5568;
    --t-side-ink-strong: #1B3069;
    --t-side-hover: #F1F4F9;
    --t-side-active: #E8EDF8;
    --t-side-line: #E3E8EF;
    --t-side-icon-filter: invert(17%) sepia(36%) saturate(1900%) hue-rotate(205deg) brightness(92%);
    --t-hero: radial-gradient(1000px 520px at 0% 100%, rgba(0, 128, 74, .18), transparent 60%),
              radial-gradient(800px 480px at 100% 0%, rgba(245, 184, 25, .22), transparent 55%),
              linear-gradient(160deg, #FFFFFF 0%, #EEF2F9 100%);
}

/* =====================================================================
   Base
   ===================================================================== */
html, body {
    font-family: var(--t-font);
    color: var(--t-ink);
    background: var(--t-bg);
    -webkit-font-smoothing: antialiased;
}

a, .btn-link { color: var(--t-primary); }
a:hover { color: var(--t-primary-hover); }

h1, h2, h3, h4, h5 { letter-spacing: -0.015em; }

body .content h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--t-ink);
    margin-bottom: 1rem;
}

/* Buttons */
.btn { border-radius: var(--t-radius-sm); font-weight: 600; }
.btn-primary {
    color: #fff;
    background: var(--t-primary);
    border-color: var(--t-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.btn-primary:hover, .btn-primary:focus { background: var(--t-primary-hover); border-color: var(--t-primary-hover); color: #fff; }
.btn-outline-primary { color: var(--t-primary); border-color: var(--t-primary); }
.btn-outline-primary:hover { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }
.btn-outline-secondary { color: var(--t-ink-2); border-color: var(--t-line); background: #fff; }
.btn-outline-secondary:hover { background: #F1F4F9; color: var(--t-ink); border-color: #CBD3DF; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .25rem var(--t-ring);
}

/* Forms */
.form-control, .form-select {
    border-color: #D5DCE6;
    border-radius: var(--t-radius-sm);
    color: var(--t-ink);
}
.form-control:focus, .form-select:focus { border-color: var(--t-primary); }
.form-check-input:checked { background-color: var(--t-primary); border-color: var(--t-primary); }
.form-label { color: var(--t-ink-2); font-weight: 500; }
.valid.modified:not([type=checkbox]) { outline: none; border-color: #2E9E6A; }
.invalid { outline: none; border-color: #D2232A !important; }
.validation-message, .text-danger { color: #C0262D !important; }

/* Cards, tables, badges */
.card {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}
.card-header { background: #FAFBFD; border-bottom-color: var(--t-line); font-weight: 600; }
.table { --bs-table-hover-bg: #F6F8FC; color: var(--t-ink); }
.table > thead th, .table > thead td {
    background: #F7F9FC;
    color: var(--t-ink-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--t-line) !important;
}
.bg-primary { background-color: var(--t-primary) !important; }
.text-primary { color: var(--t-primary) !important; }
.alert { border-radius: var(--t-radius-sm); border-width: 1px; }
.alert-danger { background: #FDECEC; border-color: #F7C9CB; color: #8E1B20; }
.alert-success { background: #E7F6EE; border-color: #BFE6D1; color: #0D5B37; }

/* =====================================================================
   Side navigation
   ===================================================================== */
html body .page .sidebar {
    background: var(--t-side-bg);
    border-right: 1px solid var(--t-side-line);
}

@media (min-width: 641px) {
    html body .page .sidebar { width: 248px; }
}

/* brand block: logo sits on its own white card so it is never cropped */
html body .sidebar .top-row.navbar {
    background: transparent;
    min-height: 0;
    height: auto;
    padding: 18px 16px 16px !important;
    border-bottom: 1px solid var(--t-side-line);
    position: relative;
}
html body .sidebar .top-row.navbar::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background: var(--t-stripe);
}
html body .sidebar .navbar .container-fluid { padding: 0 !important; }
html body .sidebar .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
:root[data-variant="daylight"] html body .sidebar .navbar-brand,
:root[data-variant="daylight"] body .sidebar .navbar-brand { box-shadow: none; border: 1px solid var(--t-line); }
html body .sidebar .navbar-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 46px;
    max-height: none;
    object-fit: contain;
}

/* nav list */
html body .sidebar .nav-scrollable {
    padding: 12px 10px 20px;
    height: calc(100vh - 96px);
}
html body .sidebar .nav-scrollable nav { gap: 2px; }
html body .sidebar .nav-item {
    font-size: .875rem;
    padding: 0 !important;
    margin: 1px 0;
}
html body .sidebar .nav-item .nav-link {
    color: var(--t-side-ink);
    border-radius: 10px;
    min-height: 40px;
    padding: 8px 12px;
    font-weight: 500;
    gap: 10px;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}
html body .sidebar .nav-item .nav-link .bi {
    margin-right: 0;
    font-size: 1.05rem;
    opacity: .85;
    filter: var(--t-side-icon-filter);
}
html body .sidebar .nav-item .nav-link:hover {
    background: var(--t-side-hover);
    color: var(--t-side-ink-strong);
}
html body .sidebar .nav-item a.nav-link.active {
    background: var(--t-side-active);
    color: var(--t-side-ink-strong);
    font-weight: 600;
}
html body .sidebar .nav-item a.nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--t-accent);
}
html body .sidebar .nav-item a.nav-link.active .bi { opacity: 1; }

/* signed-in user chip (first item) */
html body .sidebar .nav-item.border-bottom {
    border-bottom: 0 !important;
    margin-bottom: 10px;
    padding-bottom: 10px !important;
    position: relative;
}
html body .sidebar .nav-item.border-bottom::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 1px;
    background: var(--t-side-line);
}
html body .sidebar .nav-item.border-bottom .nav-link {
    background: var(--t-side-hover);
    color: var(--t-side-ink-strong);
    font-weight: 600;
}
html body .sidebar .nav-item.border-bottom .nav-link .bi { font-size: 1.35rem; opacity: 1; }

/* logout */
html body .sidebar form button.nav-link { color: var(--t-side-ink); }
html body .sidebar form button.nav-link:hover { color: #FFB4B6; }
:root[data-variant="daylight"] body .sidebar form button.nav-link:hover { color: #C0262D; }

/* mobile toggler */
html body .sidebar .navbar-toggler {
    top: 22px;
    border-radius: 10px;
    border-color: var(--t-side-line);
}
:root[data-variant="daylight"] body .sidebar .navbar-toggler { filter: invert(1) hue-rotate(180deg); }

/* =====================================================================
   Top bar and content area
   ===================================================================== */
html body main > .top-row.px-4 {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--t-line);
    height: 64px;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
html body main > .top-row h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--t-ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
html body main > .top-row h3::before {
    content: "";
    width: 8px;
    height: 22px;
    border-radius: 3px;
    background: var(--t-stripe);
    background-size: 100% 100%;
    background-image: linear-gradient(180deg, var(--coe-green) 0 33%, var(--coe-gold) 33% 66%, var(--coe-red) 66% 100%);
}
html body main > .top-row .user-summary {
    padding: 6px 14px 6px 14px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: #fff;
}
html body main > .top-row .user-role { color: var(--t-primary); font-size: .78rem; }
html body main > .top-row .user-identifier { color: var(--t-ink-3); }

html body main > article.content {
    padding: 28px !important;
    max-width: 1320px;
}

/* Bursary programme cards on the home page */
html body .content .card {
    transition: transform .18s ease, box-shadow .18s ease;
}
html body .content .card:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px rgba(16, 24, 40, .10);
}
html body .content .card .card-title { font-weight: 700; color: var(--t-ink); }
html body .content .card .btn-outline-secondary,
html body .content .card .btn-outline-primary { border-radius: 999px; padding-inline: 16px; }

@media (max-width: 640.98px) {
    html body main > .top-row.px-4 { height: auto; padding: 14px 16px !important; }
    html body main > article.content { padding: 18px 16px !important; }
    html body .sidebar .nav-scrollable { height: auto; }
}

/* signed-out sidebar: Register / Login become clear call-to-action buttons */
html body .sidebar .nav-item .nav-link[href$="Account/Login"],
html body .sidebar .nav-item .nav-link[href$="Account/Register"] {
    justify-content: center;
    font-weight: 600;
    min-height: 44px;
    margin-top: 6px;
}
html body .sidebar .nav-item .nav-link[href$="Account/Login"] {
    background: var(--t-accent);
    color: #1B1B1B;
    box-shadow: 0 8px 20px rgba(245, 184, 25, .25);
}
html body .sidebar .nav-item .nav-link[href$="Account/Login"]:hover { background: #FFC93A; color: #111; }
html body .sidebar .nav-item .nav-link[href$="Account/Login"] .bi { filter: invert(1); opacity: .8; }
html body .sidebar .nav-item .nav-link[href$="Account/Register"] {
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}
html body .sidebar .nav-item .nav-link[href$="Account/Register"]:hover { background: rgba(255, 255, 255, .08); }
:root[data-variant="daylight"] body .sidebar .nav-item .nav-link[href$="Account/Register"] { border-color: var(--t-line); color: var(--t-primary); }
html body .sidebar .nav-item:has(.nav-link[href$="Account/Register"]) { order: 2; }
html body .sidebar .nav-item:has(.nav-link[href$="Account/Login"]) { order: 1; }
html body .sidebar .nav-scrollable nav { display: flex; flex-direction: column; }


/* small-screen fixes for the side nav */
@media (max-width: 640.98px) {
    html body .sidebar .nav-scrollable { height: auto; }
    html body .sidebar .navbar .container-fluid { padding-right: 68px !important; }
    html body .sidebar .navbar-brand img { height: 38px; }
    html body .sidebar .navbar-toggler { top: 17px; right: 14px; }
}


/* =====================================================================
   Sign-in pages: full-height split. Black brand panel with a scattered
   gold dot pattern on the left, form card on the right.
   ===================================================================== */
:root {
    --k-ink: #111111;
    --k-panel: #121212;
    --k-yellow: #FFD21F;
    --k-yellow-2: #FFE55C;
    --k-yellow-deep: #F2B600;
    --k-cheek: #E5483B;
    --k-page: #FAF8F2;
    --k-line: #ECE7DA;
    --k-muted: #6B6658;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) { background: var(--k-page); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main {
    display: grid;
    grid-template-columns: minmax(400px, 44%) 1fr;
    grid-template-rows: auto auto 1fr;
    min-height: 100vh;
    overflow: visible;
    background: radial-gradient(rgba(17, 17, 17, .055) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--k-page);
}
/* panel background */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100vh;
    background:
        radial-gradient(560px 420px at 0% 100%, rgba(255, 210, 31, .30), transparent 70%),
        radial-gradient(420px 320px at 100% 0%, rgba(255, 229, 92, .14), transparent 70%),
        linear-gradient(180deg, rgba(18, 18, 18, .55) 0%, rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0) 70%, rgba(18, 18, 18, .6) 100%),
        radial-gradient(rgba(255, 210, 31, .10) 1px, transparent 1.5px) 0 0 / 26px 26px,
        var(--k-panel);
}
/* logo + product name (the existing top bar) */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto !important;
    background: transparent !important;
    backdrop-filter: none;
    border: 0 !important;
    box-shadow: none !important;
    padding: 40px 56px 0 !important;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row::before {
    content: "";
    display: block;
    width: 232px;
    height: 84px;
    border-radius: 16px;
    background: #fff url("images/logo.png") center / auto 60px no-repeat;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3 {
    color: #fff;
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.035em;
    max-width: 11ch;
    margin: 18vh 0 0;
    display: block;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3::before { display: none !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3 b { font-weight: inherit; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3::after {
    content: "";
    display: block;
    width: 96px;
    height: 6px;
    margin-top: 26px;
    border-radius: 6px;
    background: var(--k-yellow);
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row .user-summary { display: none !important; }
/* tagline */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main::after {
    content: "Apply for a City of Ekurhuleni bursary, follow your application and get your result, all in one place.";
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 24px 56px 0;
    max-width: 26rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1.08rem;
    line-height: 1.65;
}

/* the side menu becomes a Register / Login switch at the bottom of the panel */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar {
    position: fixed !important;
    left: 56px;
    bottom: 40px;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 30;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .top-row.navbar,
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .navbar-toggler { display: none !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-scrollable {
    display: block !important;
    height: auto !important;
    overflow: visible;
    padding: 0 !important;
    width: auto;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-scrollable nav {
    flex-direction: row !important;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item { margin: 0 !important; padding: 0 !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link {
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 600;
    font-size: .95rem;
    gap: 8px;
    box-shadow: none !important;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link::before { display: none !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link .bi { filter: none !important; opacity: .85; font-size: 1rem; color: inherit; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .08) !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link.active {
    background: var(--k-yellow) !important;
    color: var(--k-ink) !important;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link.active .bi { filter: brightness(0) !important; opacity: .9; }

/* form column */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > article.content {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 56px 40px !important;
    max-width: none;
    min-height: 100vh;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > h1 { display: none; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0;
}
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content > .row { max-width: 680px; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"] {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 48px 48px 40px;
    background: #fff;
    border: 1px solid var(--k-line);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 28px 70px rgba(17, 17, 17, .12);
}
/* the card's top edge: a yellow strip */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"] { border-top: 5px solid var(--k-yellow); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"] + [class*="col-"] { display: none; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content hr { display: none; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content form > h2,
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content section > h2 { display: none; }

/* heading + subtitle drawn at the top of the form */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content form::before {
    display: block;
    grid-column: 1 / -1;
    white-space: pre-line;
    margin-bottom: 26px;
    color: var(--k-muted);
    font-size: 1rem;
    line-height: 1.55;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content form::before { content: ""; }
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) article.content form::before { content: "Welcome back. Sign in to continue to your bursary account."; }
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form::before { content: "It takes about two minutes. We'll email you a link to confirm your account."; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content form::after { display: none; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"]::before {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--k-ink);
    margin-bottom: 6px;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"]::before { content: "Welcome"; }
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"]::before { content: "Log in"; }
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"]::before { content: "Create your account"; }

/* fields */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating { margin-bottom: 14px !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating > .form-control {
    height: 58px;
    padding-left: 18px;
    border-radius: 14px;
    border: 1.5px solid #E7E2D6;
    background: #FBFAF6;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating > .form-control:hover { border-color: #D6CFBF; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating > .form-control:focus {
    background: #fff;
    border-color: var(--k-ink);
    box-shadow: 0 0 0 4px rgba(255, 210, 31, .55);
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating > label { padding-left: 18px; color: var(--k-muted); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating.password-field > label { padding-right: 52px; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating.password-field .password-toggle-button { top: 50%; right: 10px; border-radius: 10px; color: var(--k-muted); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-floating.password-field .password-toggle-button:hover { background: #F4F0E4; color: var(--k-ink); }

html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .checkbox, html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check { margin: 4px 0 20px !important; padding-left: 0; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .checkbox .form-label, html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check-label {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0; color: #3F3B33; font-weight: 500; font-size: .95rem;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check { display: flex; align-items: center; gap: 10px; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check-input { float: none; margin: 0 !important; width: 1.2em; height: 1.2em; border-radius: 6px; border-color: #CFC8B8; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check-input:checked { background-color: var(--k-ink); border-color: var(--k-ink); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check-input:focus { box-shadow: 0 0 0 4px rgba(255, 210, 31, .55); border-color: var(--k-ink); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) .form-check-label a { color: var(--k-ink); font-weight: 700; text-decoration-color: var(--k-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* main button: yellow with black text */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) form .col-md-4 { width: 100%; max-width: 100%; flex: none; padding: 0; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) form button[type="submit"].btn-primary {
    height: 56px;
    border-radius: 14px;
    border: 0;
    background: var(--k-yellow);
    color: var(--k-ink);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(17, 17, 17, .12) inset, 0 12px 26px rgba(242, 182, 0, .35);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) form button[type="submit"].btn-primary:hover { background: var(--k-yellow-2); color: var(--k-ink); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(242, 182, 0, .42); }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) form button[type="submit"].btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--k-ink); }

/* helper links under the login button */
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) form > div:last-child {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--k-line);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: .93rem;
}
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) form > div:last-child p { margin: 0; }
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) form > div:last-child p:empty { display: none; }
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) form > div:last-child a { color: #3F3B33; text-decoration: none; font-weight: 600; }
html body .page:has(article form[action*="/Account/Login"]:not([action*="/Account/Manage"])) form > div:last-child a:hover { color: var(--k-ink); text-decoration: underline; text-decoration-color: var(--k-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* register: two-column field grid */
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > * { grid-column: 1 / -1; }
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.FirstName"]),
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.LastName"]),
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.RsaIdNumber"]),
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.MobileNumber"]),
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.Password"]),
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > .form-floating:has([name="Input.ConfirmPassword"]) { grid-column: auto; }
html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form > input[type="hidden"] { display: none; }


/* messages */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content .alert,
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content .validation-summary-errors { border-radius: 12px; font-size: .92rem; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content ul.text-danger:not(:empty) {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid var(--k-cheek);
    border-radius: 12px;
    font-size: .92rem;
    padding: 10px 14px 10px 32px;
    margin-bottom: 14px;
}

@keyframes k-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row { animation: k-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row { animation: none; } }

/* ---- small screens: the panel becomes a header band ---- */
@media (max-width: 900px) {
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main::before { grid-row: 1 / 3; height: auto; position: relative; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row { position: relative; padding: 22px 20px 0 !important; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row::before { width: 164px; height: 60px; border-radius: 12px; background-size: auto 42px; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3 { margin-top: 26px; font-size: 1.9rem; max-width: none; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row h3::after { margin-top: 14px; width: 72px; height: 5px; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main::after { position: relative; margin: 12px 20px 0; padding-bottom: 84px; font-size: .98rem; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar { position: absolute !important; left: auto; right: 16px; bottom: auto; top: 30px !important; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-scrollable nav { padding: 4px; gap: 2px; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link { min-height: 36px; padding: 6px 14px !important; font-size: .88rem; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link .bi { display: none !important; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > article.content { grid-row: 3; grid-column: 1; min-height: 0; padding: 0 14px 32px !important; justify-content: flex-start; margin-top: -40px; position: relative; z-index: 3; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"] { padding: 32px 22px 26px; border-radius: 20px; }
    html body .page:has(article form[action*="/Account/Register"]:not([action*="/Account/Manage"])) article.content form { grid-template-columns: 1fr; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row > [class*="col-"]::before { font-size: 1.7rem; }
}

/* =====================================================================
   BMS theme v3 (2026-10-16): charcoal and gold side nav, full-height
   sidebar, cleaner logo card, and a polished application form.
   CSS only. Appended last so it wins over the rules above.
   ===================================================================== */
:root {
    --t-primary: #1C1F26;
    --t-primary-hover: #000000;
    --t-primary-soft: #F2F2EE;
    --t-ring: rgba(255, 196, 0, .35);
    --t-accent: #FFC400;
    --t-accent-ink: #1A1400;
    --t-accent-soft: #FFF6D1;

    --t-side-bg: linear-gradient(180deg, #17191E 0%, #101114 100%);
    --t-side-ink: rgba(255, 255, 255, .70);
    --t-side-ink-strong: #FFFFFF;
    --t-side-hover: rgba(255, 255, 255, .06);
    --t-side-active: var(--t-accent);
    --t-side-active-ink: var(--t-accent-ink);
    --t-side-line: rgba(255, 255, 255, .07);
    --t-side-icon-filter: none;
    --t-side-chip: rgba(255, 255, 255, .06);
}

/* ---- alternative nav: Light ---- */
:root[data-nav="light"] {
    --t-primary: #1B3069;
    --t-primary-hover: #142552;
    --t-primary-soft: #E8EDF8;
    --t-ring: rgba(27, 48, 105, .22);
    --t-side-bg: #FFFFFF;
    --t-side-ink: #4A5568;
    --t-side-ink-strong: #142033;
    --t-side-hover: #F3F5F9;
    --t-side-active: #FFF3C4;
    --t-side-active-ink: #142033;
    --t-side-line: #E6E9EF;
    --t-side-icon-filter: invert(25%) sepia(10%) saturate(800%) hue-rotate(180deg);
    --t-side-chip: #F3F5F9;
}
/* ---- alternative nav: City green ---- */
:root[data-nav="green"] {
    --t-primary: #00653B;
    --t-primary-hover: #004F2E;
    --t-primary-soft: #E3F3EB;
    --t-ring: rgba(0, 101, 59, .22);
    --t-side-bg: linear-gradient(180deg, #0C3B2A 0%, #072519 100%);
    --t-side-active: rgba(255, 255, 255, .14);
    --t-side-active-ink: #FFFFFF;
    --t-side-chip: rgba(255, 255, 255, .08);
}

/* ---------- side nav ---------- */
html body .page .sidebar {
    background: var(--t-side-bg);
}
@media (min-width: 641px) {
    /* stays full height on long pages instead of ending at the first screen */
    html body .page .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
    }
    html body .sidebar .nav-scrollable { flex: 1; height: auto; overflow-y: auto; }
}
:root[data-nav="light"] html body .page .sidebar,
:root[data-nav="light"] body .page .sidebar { border-right: 1px solid var(--t-side-line); }

/* logo card: whole emblem and name visible */
html body .sidebar .navbar-brand {
    width: 100%;
    margin: 0;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
}
html body .sidebar .navbar-brand img { height: 42px !important; width: auto; max-width: 100%; }

/* active item: a solid pill */
html body .sidebar .nav-item a.nav-link.active {
    background: var(--t-side-active);
    color: var(--t-side-active-ink, #fff) !important;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
:root[data-nav="light"] body .sidebar .nav-item a.nav-link.active { box-shadow: none; }
html body .sidebar .nav-item a.nav-link.active::before { display: none; }
html body .sidebar .nav-item a.nav-link.active .bi { filter: none; }
:root:not([data-nav]) body .sidebar .nav-item a.nav-link.active .bi { filter: brightness(0); opacity: .85; }
html body .sidebar .nav-item .nav-link:hover:not(.active) { background: var(--t-side-hover); }

/* signed-in user chip */
html body .sidebar .nav-item.border-bottom .nav-link { background: var(--t-side-chip); }

/* ---------- buttons pick up the accent ---------- */
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .22rem var(--t-ring) !important;
    border-color: var(--t-primary) !important;
}
.badge.bg-primary { background: var(--t-primary) !important; }

/* =====================================================================
   Application form (Community, Skills Development and EMTAF)
   ===================================================================== */
.container:has(> .application-stepper) { max-width: 1120px; }

/* header: left aligned, bursary name with year and form chips */
.container:has(> .application-stepper) > .text-center:first-child {
    text-align: left !important;
    margin-bottom: 1.25rem !important;
    padding: 26px 30px;
    border-radius: var(--t-radius);
    background:
        radial-gradient(520px 220px at 100% 0%, rgba(255, 196, 0, .28), transparent 70%),
        linear-gradient(135deg, #1C1F26 0%, #2A2E37 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--t-shadow);
}
:root[data-nav="light"] .container:has(> .application-stepper) > .text-center:first-child {
    background: radial-gradient(520px 220px at 100% 0%, rgba(255, 196, 0, .30), transparent 70%), linear-gradient(135deg, #1B3069 0%, #13275A 100%);
}
:root[data-nav="green"] .container:has(> .application-stepper) > .text-center:first-child {
    background: radial-gradient(520px 220px at 100% 0%, rgba(255, 196, 0, .28), transparent 70%), linear-gradient(135deg, #0C3B2A 0%, #00653B 100%);
}
.container:has(> .application-stepper) > .text-center:first-child::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--t-stripe);
}
.container:has(> .application-stepper) > .text-center:first-child h2 {
    color: #fff;
    font-size: 1.7rem;
    margin: 0 0 .35rem;
}
.container:has(> .application-stepper) > .text-center:first-child p {
    color: rgba(255, 255, 255, .75) !important;
    display: inline-block;
    margin: 0 .5rem 0 0 !important;
    font-size: .95rem;
}
.container:has(> .application-stepper) > .text-center:first-child .badge {
    background: var(--t-accent) !important;
    color: var(--t-accent-ink);
    font-weight: 700;
    letter-spacing: .02em;
    padding: .4em .7em;
    border-radius: 999px;
}

/* stepper: compact card with progress line */
.application-stepper {
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    padding: 20px 12px 14px;
    margin-bottom: 1.25rem !important;
    box-shadow: var(--t-shadow);
    position: sticky;
    top: 8px;
    z-index: 20;
}
.application-stepper .application-stepper-track { height: 36px !important; margin-bottom: 8px !important; }
.application-stepper .application-stepper-line { top: 17px !important; left: calc(100% / 12 + 18px) !important; right: calc(100% / 12 + 18px) !important; }
.application-stepper .application-stepper-line > div { height: 3px !important; border-radius: 3px; background-color: #E6E8EC !important; }
.application-stepper .application-stepper-circle {
    width: 34px !important;
    height: 34px !important;
    font-size: .9rem;
    border-width: 2px !important;
    background-color: #fff !important;
    border-color: #D5D9E0 !important;
    color: #7A8699 !important;
    transition: all .2s ease;
}
/* done */
.application-stepper .application-stepper-circle[style*="#28a745"]:not(:has(> span)) {
    background-color: #12A150 !important;
    border-color: #12A150 !important;
    color: #fff !important;
}
/* current */
.application-stepper .application-stepper-circle[style*="#28a745"]:has(> span) {
    background-color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 5px var(--t-ring);
}
.application-stepper .application-stepper-label { font-size: .78rem !important; color: #8A94A6 !important; font-weight: 500 !important; }
.application-stepper .application-stepper-label[style*="bold"] { color: var(--t-ink) !important; font-weight: 700 !important; }

/* form cards */
.container:has(> .application-stepper) .card {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow) !important;
    overflow: hidden;
}
.container:has(> .application-stepper) .card-header {
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-line);
    padding: 16px 22px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.container:has(> .application-stepper) .card-header::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--t-accent);
    flex-shrink: 0;
}
.container:has(> .application-stepper) .card-body { padding: 8px 22px 24px; }

/* section subheadings inside a card, e.g. "Address & Contact" */
.container:has(> .application-stepper) .card-body h5,
.container:has(> .application-stepper) .card-body h6,
.container:has(> .application-stepper) .card-body > .fw-bold,
.container:has(> .application-stepper) .card-body > div > .fw-bold:only-child {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-ink-3);
    font-weight: 700;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--t-line);
}

/* fields */
.container:has(> .application-stepper) .form-label,
.container:has(> .application-stepper) label:not(.form-check-label) {
    font-size: .84rem;
    font-weight: 600;
    color: var(--t-ink-2);
    margin-bottom: .35rem;
}
.container:has(> .application-stepper) .form-control,
.container:has(> .application-stepper) .form-select {
    min-height: 44px;
    border-radius: var(--t-radius-sm);
    border-color: #D9DEE6;
    background-color: #FBFCFD;
}
.container:has(> .application-stepper) .form-control:focus,
.container:has(> .application-stepper) .form-select:focus { background-color: #fff; }
.container:has(> .application-stepper) .form-control[readonly],
.container:has(> .application-stepper) .form-control:disabled { background-color: #F1F3F6; color: var(--t-ink-2); }
.container:has(> .application-stepper) small.text-muted,
.container:has(> .application-stepper) .form-text { font-size: .75rem; }

/* documents step: each document is its own row */
.container:has(> .application-stepper) .card-body:has(input[type="file"]) > div:has(> input[type="file"]),
.container:has(> .application-stepper) .card-body:has(input[type="file"]) > .mb-3 {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    padding: 12px 14px;
    margin: 10px 0 0 !important;
    background: #FCFCFD;
}
.container:has(> .application-stepper) input[type="file"] { background: #fff; }
.container:has(> .application-stepper) input[type="file"]::file-selector-button {
    background: var(--t-primary);
    color: #fff;
    border: 0;
    font-weight: 600;
    padding-inline: 16px;
}

/* back / next bar */
.container:has(> .application-stepper) .col-12.d-flex.justify-content-between,
.container:has(> .application-stepper) .d-flex.justify-content-between:has(.btn) {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: rgba(244, 246, 250, .92);
    backdrop-filter: blur(6px);
    padding: 14px 0;
    margin-top: .5rem;
    border-top: 1px solid var(--t-line);
}
.container:has(> .application-stepper) .btn { min-height: 44px; padding-inline: 22px; border-radius: 999px; }
.container:has(> .application-stepper) .btn-primary { background: var(--t-primary); border-color: var(--t-primary); }
.container:has(> .application-stepper) .btn-success { background: #12A150; border-color: #12A150; }

/* =====================================================================
   Admin pages polish
   ===================================================================== */
/* cards placed straight in a .row (Bursaries, Business Rules) line up with the page title */
html body .content .row:has(> .card) { margin-left: 0; margin-right: 0; }
html body .content .row > .card { padding-left: 0; padding-right: 0; }

/* compact, non-wrapping action buttons inside tables */
html body .content .table td:last-child { white-space: nowrap; }
html body .content .table .btn:not(.btn-lg) {
    padding: .3rem .7rem;
    font-size: .8rem;
    line-height: 1.2;
    min-height: 0;
}
html body .content .table td .btn + .btn { margin-left: 4px; }

/* icon button groups (Applicant / Internal Users) */
html body .content .btn-group > .btn,
html body .content .card .btn-group > .btn-outline-secondary,
html body .content .card .btn-group > .btn-outline-primary {
    border-radius: 0;
    padding: .35rem .6rem;
    margin-left: -1px !important;
    background: #fff;
    border-color: #CBD2DC;
    color: var(--t-ink-2);
}
html body .content .btn-group > .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0 !important; }
html body .content .btn-group > .btn:last-child { border-radius: 0 8px 8px 0; }
html body .content .btn-group > .btn:only-child { border-radius: 8px; }
html body .content .btn-group > .btn:hover { background: var(--t-primary-soft); color: var(--t-ink); z-index: 1; }
html body .content .btn-group > .btn-outline-danger { color: #C62828; }
html body .content .btn-group > .btn-outline-danger:hover { background: #FDECEC; color: #B71C1C; }
html body .content .btn-group > .btn-outline-success { color: #12A150; }
html body .content .btn-group > .btn-outline-success:hover { background: #E7F6EE; }

/* disabled primary buttons stay on brand instead of falling back to blue */
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: #fff !important;
    opacity: .38;
}
.btn-outline-danger:disabled { opacity: .45; }

/* ---------- application form: error summary and submit confirmation ---------- */
.container:has(> .application-stepper) .bms-step-errors {
    border: 1px solid #F3C1C1;
    border-left: 5px solid #D93025;
    background: #FFF5F5;
    color: #8A1C1C;
    border-radius: var(--t-radius-sm);
    padding: 14px 18px;
    box-shadow: var(--t-shadow);
    scroll-margin-top: 140px;
}
.container:has(> .application-stepper) .bms-step-errors ul { padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.container:has(> .application-stepper) .bms-step-errors li { break-inside: avoid; margin-bottom: 2px; font-size: .9rem; }
@media (max-width: 760px) { .container:has(> .application-stepper) .bms-step-errors ul { columns: 1; } }
.container:has(> .application-stepper) .is-invalid { scroll-margin-top: 160px; }
.bms-confirm-submit .modal-content { border: 0; border-radius: var(--t-radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.bms-confirm-submit .modal-header { background: linear-gradient(135deg, #1C1F26 0%, #2A2E37 100%); color: #fff; border-bottom: 4px solid var(--t-accent); }
.bms-confirm-submit .modal-title { font-weight: 700; }
.bms-confirm-submit .bms-confirm-list dt, .bms-confirm-submit .bms-confirm-list dd { padding: 7px 0; margin: 0; border-bottom: 1px solid var(--t-line); font-size: .92rem; }
.bms-confirm-submit .modal-footer .btn { border-radius: 999px; min-height: 42px; padding-inline: 20px; }
.bms-confirm-submit .modal-footer .btn-success { background: #12A150; border-color: #12A150; }
.container:has(> .application-stepper) .form-control.is-invalid,
.container:has(> .application-stepper) .form-select.is-invalid {
    border-color: #D93025 !important;
    background-color: #FFF8F8;
}
.container:has(> .application-stepper) .form-control.is-invalid:focus,
.container:has(> .application-stepper) .form-select.is-invalid:focus { box-shadow: 0 0 0 .22rem rgba(217, 48, 37, .18) !important; }

/* =====================================================================
   Mascot (2026-10-26): Professor Bheki, the BMS owl. An original
   drawing made for the City of Ekurhuleni BMS (images/mascot-owl*.svg).
   ===================================================================== */
/* sign-in pages: the owl stands in the bottom corner of the dark panel */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > article.content::before {
    content: "";
    position: fixed;
    left: calc(max(400px, 44vw) - 236px);
    bottom: 26px;
    width: 196px;
    height: 216px;
    background: url("images/mascot-owl.svg") center bottom / contain no-repeat;
    filter: drop-shadow(0 0 28px rgba(255, 196, 0, .22));
    pointer-events: none;
    z-index: 1;
}
/* and peeks over the top of the form card */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row::before {
    content: "";
    position: absolute;
    top: -58px;
    right: 44px;
    width: 92px;
    height: 64px;
    background: url("images/mascot-owl-peek.svg") center bottom / contain no-repeat;
    z-index: 2;
    pointer-events: none;
}
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row { margin-top: 40px; }
@media (max-width: 900px) {
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > article.content::before { display: none; }
    html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) article.content > .row::before { top: -46px; right: 22px; width: 72px; height: 50px; }
}

/* signed-in side nav: no owl banner at the foot of the menu (Sash, 27 Oct 2026); the owl stays on the sign-in pages, top bar and empty lists */

/* =====================================================================
   Clear hover states (2026-10-26): every button and menu item changes
   clearly when the mouse is over it, never a faint grey.
   ===================================================================== */
html body .btn:not(:disabled):not(.disabled) { transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
html body .btn:not(:disabled):not(.disabled):not(.btn-link):hover { box-shadow: 0 4px 12px rgba(17, 17, 17, .18) !important; }

/* solid buttons */
html body .btn-primary:not(:disabled):not(.disabled):hover,
html body .btn-dark:not(:disabled):not(.disabled):hover { background: #FFC400 !important; border-color: #FFC400 !important; color: #1A1400 !important; }
html body .btn-secondary:not(:disabled):not(.disabled):hover { background: #1C1F26 !important; border-color: #1C1F26 !important; color: #fff !important; }
html body .btn-success:not(:disabled):not(.disabled):hover { background: #0B5D37 !important; border-color: #0B5D37 !important; color: #fff !important; }
html body .btn-danger:not(:disabled):not(.disabled):hover { background: #A11B27 !important; border-color: #A11B27 !important; color: #fff !important; }
html body .btn-warning:not(:disabled):not(.disabled):hover,
html body .btn-info:not(:disabled):not(.disabled):hover { background: #1C1F26 !important; border-color: #1C1F26 !important; color: #FFC400 !important; }
html body .btn-light:not(:disabled):not(.disabled):hover { background: #1C1F26 !important; border-color: #1C1F26 !important; color: #fff !important; }

/* outline buttons fill in with their colour */
html body .btn-outline-primary:not(:disabled):not(.disabled):hover,
html body .btn-outline-secondary:not(:disabled):not(.disabled):hover,
html body .btn-outline-dark:not(:disabled):not(.disabled):hover,
html body .content .btn-group > .btn:not(:disabled):not(.disabled):hover { background: #1C1F26 !important; border-color: #1C1F26 !important; color: #fff !important; }
html body .btn-outline-success:not(:disabled):not(.disabled):hover,
html body .content .btn-group > .btn-outline-success:not(:disabled):not(.disabled):hover { background: #198754 !important; border-color: #198754 !important; color: #fff !important; }
html body .btn-outline-danger:not(:disabled):not(.disabled):hover,
html body .content .btn-group > .btn-outline-danger:not(:disabled):not(.disabled):hover { background: #C0262D !important; border-color: #C0262D !important; color: #fff !important; }
html body .btn-outline-warning:not(:disabled):not(.disabled):hover,
html body .btn-outline-info:not(:disabled):not(.disabled):hover { background: #FFC400 !important; border-color: #FFC400 !important; color: #1A1400 !important; }
html body .btn-outline-light:not(:disabled):not(.disabled):hover { background: #fff !important; border-color: #fff !important; color: #1C1F26 !important; }
html body .btn:not(:disabled):not(.disabled):hover .bi { color: inherit !important; filter: none !important; }

/* link buttons: dark text with a thick gold underline */
html body .btn-link:not(:disabled):not(.disabled):hover { color: #1C1F26 !important; text-decoration: underline !important; text-decoration-color: #FFC400 !important; text-decoration-thickness: 3px !important; text-underline-offset: 4px; }
html body .btn-link.text-danger:not(:disabled):not(.disabled):hover { color: #A11B27 !important; text-decoration-color: #C0262D !important; }

/* sign-in pages: the big button turns black with yellow text */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) form button[type="submit"].btn-primary:not(:disabled):hover { background: #111 !important; border-color: #111 !important; color: #FFD21F !important; box-shadow: 0 16px 32px rgba(17, 17, 17, .28) !important; }
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > .sidebar .nav-item .nav-link:not(.active):hover { background: rgba(255, 210, 31, .18) !important; color: #FFD21F !important; }

/* side nav: hovered item turns gold */
html body .sidebar .nav-item .nav-link:not(.active):hover { background: rgba(255, 196, 0, .16) !important; color: #FFC400 !important; }
html body .sidebar .nav-item .nav-link:not(.active):hover .bi { color: #FFC400 !important; filter: none !important; opacity: 1 !important; }
html body .sidebar form button.nav-link:hover { background: rgba(229, 72, 59, .18) !important; color: #FFB4B6 !important; }
:root[data-nav="light"] body .sidebar .nav-item .nav-link:not(.active):hover { background: #FFF1BF !important; color: #1A1400 !important; }

/* tabs, pagers and menus inside pages */
html body main .nav-tabs .nav-link:not(.active):hover,
html body main .nav-pills .nav-link:not(.active):hover,
html body main .list-group-item-action:hover,
html body .dropdown-item:hover,
html body .page-link:hover { background: #FFF1BF !important; color: #1A1400 !important; border-color: #FFC400 !important; }

/* =====================================================================
   Branded pages (2026-10-26): owl in the top bar, gold-underlined page
   titles, softer cards, friendly empty states and a new Manage account
   page. CSS only.
   ===================================================================== */
/* top bar: the owl next to the system name and a gold line underneath */
html body main > .top-row.px-4 { border-bottom: 3px solid #FFC400; }
html body main > .top-row h3::before {
    width: 30px;
    height: 32px;
    border-radius: 0;
    background: url("images/mascot-owl.svg") center / contain no-repeat;
}

/* page titles */
html body article.content :is(h3.mb-0, h3.mb-1, h3.mb-3, h3.mb-4):not(.card *):not(.modal *) {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1C1F26;
}
html body article.content :is(h3.mb-0, h3.mb-1, h3.mb-3, h3.mb-4):not(.card *):not(.modal *)::after {
    content: "";
    display: block;
    width: 52px;
    height: 5px;
    margin: 10px 0 4px;
    border-radius: 5px;
    background: linear-gradient(90deg, #FFC400 0 72%, #1C1F26 72%);
}
html body article.content :is(h3.mb-3, h3.mb-4):not(.card *):not(.modal *) { margin-bottom: 1.4rem !important; }

/* cards: rounder, with a gold edge on the header */
html body article.content .card { border-radius: 16px; border-color: #ECE7DA; }
html body article.content .card > .card-header:not(.bg-primary):not(.bg-dark):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background: #fff !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: inset 4px 0 0 #FFC400;
    font-weight: 700;
    color: #1C1F26;
}
html body article.content .table > thead th { background: #FBFAF6; color: #6B6658; }
html body article.content .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #FFF8DD; background-color: #FFF8DD; }

/* empty states and tips: the owl gives the message */
html body article.content .alert-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 76px;
    padding: 14px 18px 14px 82px;
    border: 1.5px dashed #E8C34A;
    border-radius: 16px;
    background: url("images/mascot-owl.svg") 20px center / 44px auto no-repeat, #FFFCF0;
    color: #3F3B33;
    font-weight: 500;
}
html body article.content .alert-info .bi { display: none; }

/* ---------- Manage your account ---------- */
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) > h1 {
    position: relative;
    margin: 0 0 22px;
    padding: 34px 200px 34px 36px;
    min-height: 150px;
    border-radius: 22px;
    color: #fff;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background:
        url("images/mascot-owl.svg") right 40px bottom -18px / 128px auto no-repeat,
        radial-gradient(420px 220px at 100% 100%, rgba(255, 196, 0, .28), transparent 70%),
        radial-gradient(rgba(255, 196, 0, .10) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(135deg, #1C1F26 0%, #121316 100%);
    box-shadow: 0 18px 40px rgba(17, 17, 17, .18);
    overflow: hidden;
}
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) > h1::after {
    content: "Keep your details up to date so we can reach you about your bursary.";
    display: block;
    margin-top: 10px;
    max-width: 34rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
}
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) > div > h2,
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) > div > hr { display: none; }

/* left menu as a card */
html body article.content ul.nav-pills.flex-column {
    gap: 4px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 26px rgba(17, 17, 17, .06);
}
html body article.content ul.nav-pills.flex-column .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    color: #3F3B33;
    font-weight: 600;
}
html body article.content ul.nav-pills.flex-column .nav-link::before {
    font-family: "bootstrap-icons";
    font-size: 1.05rem;
    line-height: 1;
    content: "\f4e1";
}
html body article.content ul.nav-pills.flex-column .nav-link[href$="Manage/Email"]::before { content: "\f32f"; }
html body article.content ul.nav-pills.flex-column .nav-link[href$="Manage/ChangePassword"]::before { content: "\f44f"; }
html body article.content ul.nav-pills.flex-column .nav-link[href$="Manage/ExternalLogins"]::before { content: "\f538"; }
html body article.content ul.nav-pills.flex-column .nav-link.active {
    background: #1C1F26 !important;
    color: #FFC400 !important;
    box-shadow: 0 6px 16px rgba(17, 17, 17, .18);
}

/* the form as a card with a gold top edge */
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .col-md-9 {
    padding: 30px 32px 28px;
    background: #fff;
    border: 1px solid #ECE7DA;
    border-top: 5px solid #FFC400;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 18px 40px rgba(17, 17, 17, .07);
}
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .col-md-9 > h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1C1F26;
    margin-bottom: 18px;
}
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .col-md-9 > .row > [class*="col-"] { width: 100%; max-width: 620px; flex: 0 0 auto; }
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .form-floating > .form-control {
    border-radius: 14px;
    border: 1.5px solid #E7E2D6;
    background-color: #FBFAF6;
}
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .form-floating > .form-control:focus { background-color: #fff; border-color: #1C1F26; }
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .form-floating > .form-control:disabled,
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .form-floating > .form-control[readonly] { background-color: #F1EEE6; color: #6B6658; }
html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .btn { border-radius: 14px; min-height: 50px; font-weight: 700; }
@media (max-width: 767.98px) {
    html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) > h1 { padding: 24px 120px 24px 22px; min-height: 120px; font-size: 1.6rem; background-size: 86px auto, auto, 22px 22px, auto; background-position: right 16px bottom -10px, 0 0, 0 0, 0 0; }
    html body article.content ul.nav-pills.flex-column { flex-direction: row !important; flex-wrap: wrap; margin-bottom: 16px; }
    html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .col-md-9 { padding: 22px 18px; }
}
@media (min-width: 768px) {
    html body article.content:has(> div > .row > .col-md-3 > ul.nav-pills.flex-column) .col-md-9 { flex: 1 1 0; width: auto; max-width: none; margin: 0 calc(var(--bs-gutter-x) * .5); }
}
/* phone: the logo card on the sign-in pages kept its full height */
html body .page:has(article form[action*="/Account/"]:not([action*="/Account/Manage"])) > main > .top-row::before { flex: none; }
/* coloured card headers (e.g. the Adjudicate card) stay dark with white text and the gold edge */
html body article.content .card > .card-header.bg-primary { background: #1C1F26 !important; color: #fff !important; box-shadow: inset 4px 0 0 #FFC400; border-top-left-radius: 16px; border-top-right-radius: 16px; }
/* "Optional" tag next to a field label */
.bms-optional { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; border: 1px solid #D9D2C0; background: #F6F3EA; color: #6B6658; font-size: .72rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }

/* ===== Bursary poster and More Info (27 Oct 2026) =====
   Plain CSS that Chrome, Edge, Firefox and Safari (also on iPhone and Android) all support. */
.bms-more-info .modal-content { border-radius: 16px; overflow: hidden; }
.bms-more-info .modal-body { padding-top: 1rem; }
.bms-poster-figure { margin: 0 0 1rem; }
.bms-poster-thumb {
    position: relative; display: block; width: 100%; padding: 0; border: 1px solid #E7E2D6; border-radius: 12px;
    background: #F6F3EA; overflow: hidden; cursor: zoom-in; line-height: 0;
}
.bms-poster-thumb img {
    display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: #F6F3EA;
}
.bms-poster-thumb:focus-visible { outline: 3px solid #FFC400; outline-offset: 2px; }
.bms-poster-zoom-hint {
    position: absolute; right: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px;
    background: rgba(28, 31, 38, .86); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.4;
}
.bms-poster-thumb:hover .bms-poster-zoom-hint { background: #FFC400; color: #1A1400; }

.bms-info-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 1rem; }
.bms-info-fact { padding: 8px 12px; border-radius: 10px; background: #F6F3EA; border: 1px solid #ECE6D6; }
.bms-info-fact dt { font-size: .74rem; font-weight: 600; color: #6B6658; text-transform: uppercase; letter-spacing: .03em; }
.bms-info-fact dd { margin: 2px 0 0; font-weight: 600; color: #1C1F26; }
.bms-info-fact.is-soon { background: #FFF6D1; border-color: #FFE38A; }
.bms-info-fact.is-closed { background: #FBE9E9; border-color: #F1C2C2; }
.bms-info-fact.is-closed dd { color: #A11D24; }
.bms-info-purpose { font-size: 1rem; color: #33363D; }
.bms-info-section { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid #ECE6D6; }
.bms-info-section h6 { font-weight: 700; color: #1C1F26; margin-bottom: .6rem; }
.bms-info-eligibility { background: #F2F7FB; border: 1px solid #D6E6F2; border-radius: 12px; padding: .85rem 1rem; }
.bms-info-field-group { margin-bottom: .7rem; }
.bms-info-field-name { font-weight: 600; font-size: .9rem; color: #1C1F26; margin-bottom: 4px; }
.bms-info-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bms-info-chips li { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #E0D9C6; font-size: .85rem; line-height: 1.45; }
.bms-info-docs { margin: 0 0 .4rem; padding-left: 1.1rem; }
.bms-info-docs li { margin-bottom: 3px; }
.bms-badge-required { background: #1C1F26; color: #FFC400; font-weight: 600; font-size: .68rem; vertical-align: middle; }

/* Full-screen poster viewer */
.bms-poster-viewer {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1090;
    display: flex; flex-direction: column; background: #0E0F12; color: #fff; outline: none;
}
.bms-poster-toolbar {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap;
    padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    background: #1C1F26; box-shadow: inset 0 -3px 0 #FFC400;
}
.bms-poster-title { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .bms-poster-viewer .bms-poster-btn {
    color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; min-height: 36px;
}
html body .bms-poster-viewer .bms-poster-btn:hover,
html body .bms-poster-viewer .bms-poster-btn:focus-visible { background: #FFC400 !important; border-color: #FFC400 !important; color: #1A1400 !important; }
.bms-poster-stage {
    flex: 1 1 auto; min-height: 0; display: flex; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px;
}
/* margin:auto centres the poster but still lets it scroll fully when zoomed (flex centring would cut off the top) */
.bms-poster-stage img {
    margin: auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: zoom-in;
}
.bms-poster-viewer.is-zoomed .bms-poster-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.bms-poster-help { flex: 0 0 auto; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .6); padding: 6px 12px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
/* phones: "Actual size" would be four screens wide, so zoom to about 2.6 times the screen instead */
@media (max-width: 767.98px) {
    .bms-poster-viewer.is-zoomed .bms-poster-stage img { width: 260%; height: auto; }
}
.bms-info-more-docs summary { cursor: pointer; color: #1C1F26; font-weight: 600; font-size: .92rem; }
@media (max-width: 575.98px) {
    .bms-poster-stage { padding: 6px; }
    .bms-poster-thumb img { max-height: 55vh; }
}

/* Admin: poster card and More Info fieldset */
.bms-poster-admin-thumb { display: block; border: 1px solid #E7E2D6; border-radius: 12px; overflow: hidden; background: #F6F3EA; line-height: 0; }
.bms-poster-admin-thumb img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.bms-poster-admin-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px;
    border: 2px dashed #D9D2C0; border-radius: 12px; color: #8A8472; background: #FBFAF6;
}
.bms-poster-admin-empty .bi { font-size: 2.2rem; }
.bms-info-fieldset { border: 1px solid #ECE6D6; border-radius: 12px; padding: .75rem 1rem 1rem; background: #FDFCF8; }
.bms-info-fieldset legend { float: none; width: auto; font-size: 1rem; font-weight: 700; padding: 0 .4rem; margin-bottom: .25rem; }
.bms-info-fieldset legend small { font-weight: 400; color: #6B6658; font-size: .8rem; margin-left: .35rem; }

/* =====================================================================
   Add / Edit Bursary (27 Oct 2026): grouped sections in advert order,
   jump bar, advert checklist and a sticky save bar. Charcoal & gold.
   ===================================================================== */
.bms-be { margin-top: 1.5rem; scroll-margin-top: 1rem; }
.bms-be-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; background: #1C1F26; color: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 1rem; box-shadow: inset 0 -4px 0 #FFC400; }
.bms-be-head h4 { color: #fff; font-weight: 700; }
.bms-be-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: .9rem; }
.bms-be-sub strong { color: #FFC400; }
.bms-be-code { font-family: ui-monospace, Consolas, monospace; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: 1px 8px; border-radius: 6px; color: #FFC400; }
.bms-be-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.bms-be-jump-btn { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.bms-be-jump-btn:hover { background: #FFC400; color: #1A1400; border-color: #FFC400; }
.bms-be-jump-btn.has-error { border-color: #F28B8B; color: #FFD5D5; }
.bms-be-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #FFC400; color: #1A1400; font-size: .75rem; font-weight: 700; flex: none; }
.bms-be-card { background: #fff; border: 1px solid #ECE6D6; border-radius: 14px; padding: 18px 20px 20px; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.05); scroll-margin-top: 1rem; }
.bms-be-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; color: #1C1F26; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid #F0EBDD; }
.bms-be-title small { font-weight: 400; font-size: .8rem; color: #6B6658; }
.bms-be .form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.bms-be .form-control:focus, .bms-be .form-select:focus { border-color: #FFC400; box-shadow: 0 0 0 .2rem rgba(255,196,0,.3); }
.bms-be .validation-message { color: #B42318; font-size: .82rem; margin-top: 3px; }
.bms-be .invalid { border-color: #D92D20; }
.bms-be-note { background: #FFF8DB; border: 1px solid #F5E3A1; border-radius: 10px; padding: 8px 12px; font-size: .88rem; }
.bms-be-switch { padding-top: .35rem; }
.bms-be-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }
.bms-be-switch .form-check-input:checked { background-color: #1C1F26; border-color: #1C1F26; }
.bms-be-switch .form-check-label { padding-top: .1rem; padding-left: .35rem; }
.bms-be-mono { font-size: .9rem; }
.bms-be-preview { margin-top: .6rem; padding: 12px 14px; border-radius: 12px; background: #FDFCF8; border: 1px dashed #E0D9C6; }
.bms-be-preview-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6B6658; font-weight: 700; margin-bottom: .5rem; }
.bms-be-side { position: sticky; top: 1rem; }
.bms-be-check .bms-be-title { border-bottom: 0; padding-bottom: 0; }
.bms-be-meter { height: 8px; background: #F0EBDD; border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.bms-be-meter span { display: block; height: 100%; background: #FFC400; border-radius: 999px; transition: width .25s; }
.bms-be-checklist { list-style: none; padding: 0; margin: 0; }
.bms-be-checklist li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: .9rem; color: #4A5568; border-bottom: 1px solid #F5F1E6; }
.bms-be-checklist li:last-child { border-bottom: 0; }
.bms-be-checklist li i { margin-top: 2px; color: #B8B2A3; }
.bms-be-checklist li.is-done i { color: #12805C; }
.bms-be-checklist li.is-required i { color: #D97706; }
.bms-be-checklist .btn-link { color: inherit; text-decoration: none; font-size: .9rem; }
.bms-be-checklist .btn-link:hover { text-decoration: underline; }
.bms-be-errors { border-radius: 12px; scroll-margin-top: 1rem; }
.bms-be-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 1rem; padding: 12px 16px; background: rgba(255,255,255,.96); border: 1px solid #ECE6D6; border-radius: 14px; box-shadow: 0 -6px 20px rgba(16,24,40,.08); backdrop-filter: blur(4px); }
.bms-be-state { margin-right: auto; font-size: .9rem; }
@media (max-width: 1199.98px) { .bms-be-side { position: static; } }