/*
 * Student app visual system.
 *
 * All selectors are scoped to the student app shell or the future registration
 * page hook so Bootstrap/admin pages keep their existing presentation.
 */

/*
 * Bootstrap 3 (app.css) sets `html { font-size: 10px }`. The student app
 * authors rem values at the usual 16px, so restore it on these pages only.
 * Bootstrap itself sizes in px and is unaffected.
 */
html.student-app-root {
    font-size: 16px;
}

.student-app-page,
.student-registration-page {
    --student-purple: #543c81;
    --student-purple-dark: #3d2a5c;
    --student-home-background: #493575;
    --student-home-hero: #8360A1;
    --student-lime: #B9C500;
    --student-lime-dark: #7a8200;
    --student-ink: #262230;
    --student-muted: #625c6e;
    --student-white: #ffffff;
    --student-surface: var(--student-white);
    --student-surface-soft: #f7f5fa;
    --student-border: #d9d2e3;
    --student-input-border: #9d94ac;
    --student-purple-tint: #e5dcef;
    --student-lime-tint: #edf2b3;
    --student-booked-green: #1e9e48;
    --student-panel-dark: rgba(35, 23, 61, .24);
    --student-shadow-soft: rgba(61, 42, 92, .1);
    --student-shadow-strong: rgba(27, 17, 45, .26);
    --student-text-shadow: rgba(38, 25, 61, .45);
    --student-white-a08: rgba(255, 255, 255, .08);
    --student-white-a10: rgba(255, 255, 255, .1);
    --student-white-a12: rgba(255, 255, 255, .12);
    --student-white-a15: rgba(255, 255, 255, .15);
    --student-white-a18: rgba(255, 255, 255, .18);
    --student-white-a20: rgba(255, 255, 255, .2);
    --student-white-a28: rgba(255, 255, 255, .28);
    --student-white-a30: rgba(255, 255, 255, .3);
    --student-white-a38: rgba(255, 255, 255, .38);
    --student-white-a55: rgba(255, 255, 255, .55);
    --student-white-a65: rgba(255, 255, 255, .65);
    --student-white-a68: rgba(255, 255, 255, .68);
    --student-white-a72: rgba(255, 255, 255, .72);
    --student-white-a75: rgba(255, 255, 255, .75);
    --student-white-a76: rgba(255, 255, 255, .76);
    --student-white-a80: rgba(255, 255, 255, .8);
    --student-white-a82: rgba(255, 255, 255, .82);
    --student-focus: #1d6f9f;
    --student-radius: 8px;
    --student-space-1: 4px;
    --student-space-2: 8px;
    --student-space-3: 12px;
    --student-space-4: 16px;
    --student-space-5: 24px;
    --student-space-6: 32px;
    color: var(--student-ink);
    background: var(--student-surface-soft);
    font-size: 16px;
    line-height: 1.5;
}

.student-app-page *,
.student-registration-page * {
    box-sizing: border-box;
}

.student-app-page {
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    color: var(--student-white);
    background: var(--student-home-background);
}

.student-app-page .student-app-shell {
    min-height: 100vh;
    max-width: 560px;
    margin: 0 auto;
    background: var(--student-home-background);
    box-shadow: none;
}

.student-app-page .container {
    width: 100%;
    max-width: none;
    padding-right: var(--student-space-5);
    padding-left: var(--student-space-5);
}

.student-app-page .student-app {
    min-width: 0;
    padding-top: var(--student-space-3);
    padding-bottom: var(--student-space-6);
    color: var(--student-white);
}

.student-app-page .student-app__screen-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--student-space-4);
    min-height: 52px;
    padding: var(--student-space-2) var(--student-space-5);
    color: var(--student-white);
    background: var(--student-home-hero);
}

.student-app-page .student-app__home-link {
    flex: 0 0 auto;
    color: var(--student-white);
    font-size: 16px;
    line-height: 1.25;
    text-decoration: none;
}

.student-app-page .student-app__screen-title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--student-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.student-app-page .student-app a,
.student-registration-page a {
    color: var(--student-purple);
}

.student-app-page .student-app a:focus,
.student-registration-page a:focus,
.student-app-page .student-app button:focus,
.student-registration-page button:focus,
.student-app-page .student-app input:focus,
.student-registration-page input:focus,
.student-app-page .student-app select:focus,
.student-registration-page select:focus,
.student-app-page .student-app textarea:focus,
.student-registration-page textarea:focus {
    outline: 3px solid var(--student-focus);
    outline-offset: 2px;
}

.student-app-page .student-app h1,
.student-app-page .student-app h2,
.student-app-page .student-app h3,
.student-app-page .student-app h4,
.student-registration-page h1,
.student-registration-page h2,
.student-registration-page h3,
.student-registration-page h4 {
    color: var(--student-white);
    font-weight: 700;
    line-height: 1.2;
}

.student-app-page .student-app h1,
.student-registration-page h1 {
    margin-top: var(--student-space-3);
    margin-bottom: var(--student-space-4);
    font-size: clamp(1.09375rem, 6vw, 1.40625rem);
}

.student-app-page .student-app h2,
.student-registration-page h2 {
    margin-top: var(--student-space-5);
    margin-bottom: var(--student-space-3);
    font-size: .8438rem;
}

.student-app-page .student-app h3,
.student-registration-page h3 {
    margin-top: var(--student-space-4);
    margin-bottom: var(--student-space-2);
    font-size: 1.15rem;
}

.student-app-page .student-app p,
.student-registration-page p {
    margin-bottom: var(--student-space-4);
}

.student-app-page .student-app .panel-primary {
    overflow: hidden;
    border: 1px solid var(--student-border);
    border-radius: var(--student-radius);
    box-shadow: 0 3px 12px var(--student-shadow-soft);
}

.student-app-page .student-app .panel-primary > .panel-heading {
    border-color: var(--student-lime);
    background: var(--student-purple);
    color: var(--student-white);
}

.student-app-page .student-app .panel-primary > .panel-heading span,
.student-app-page .student-app .panel-primary > .panel-heading h1,
.student-app-page .student-app .panel-primary > .panel-heading h2,
.student-app-page .student-app .panel-primary > .panel-heading h3 {
    color: var(--student-white);
}

.student-app-page .student-app .panel-body {
    background: var(--student-surface);
}

.student-app-page .student-app .progress-bar {
    background-color: var(--student-purple);
}

.student-app-page .student-class-details .progress {
    height: 44px;
    border: 1px solid var(--student-white-a20);
    border-radius: var(--student-radius);
    background: var(--student-panel-dark);
    box-shadow: none;
}

.student-app-page .student-class-details .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

.student-app-page .student-app .btn,
.student-registration-page .btn {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--student-radius);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
}

.student-app-page .student-app .btn-primary,
.student-registration-page .btn-primary {
    border-color: var(--student-lime-dark);
    background: var(--student-lime);
    color: var(--student-ink);
}

.student-app-page .student-app .btn-primary:hover,
.student-app-page .student-app .btn-primary:active,
.student-app-page .student-app .btn-primary:focus,
.student-registration-page .btn-primary:hover,
.student-registration-page .btn-primary:active,
.student-registration-page .btn-primary:focus {
    border-color: var(--student-purple-dark);
    background: var(--student-purple);
    color: var(--student-white);
}

.student-app-page .student-app .btn-link,
.student-registration-page .btn-link {
    color: var(--student-purple);
}

.student-app-page .student-app input.form-control,
.student-app-page .student-app select.form-control,
.student-app-page .student-app textarea.form-control,
.student-registration-page input.form-control,
.student-registration-page select.form-control,
.student-registration-page textarea.form-control {
    min-height: 44px;
    border: 1px solid var(--student-input-border);
    border-radius: 5px;
    color: var(--student-ink);
    background: var(--student-surface);
    /* iOS dark mode draws the caret white; the field is always light, so pin both. */
    caret-color: var(--student-ink);
    color-scheme: light;
    font-size: 1rem;
}

.student-app-page .student-app select,
.student-app-page .student-app select.form-control,
.student-registration-page select.form-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233d2a5c' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.student-app-page .student-app label,
.student-registration-page label {
    color: var(--student-ink);
    font-weight: 700;
}

.student-app-page .student-app .help-block,
.student-registration-page .help-block,
.student-registration-page .help-text {
    color: var(--student-muted);
    font-size: .9rem;
}

.student-app-page .student-app .alert,
.student-registration-page .alert {
    border-radius: var(--student-radius);
}

.student-app-page .student-app .table {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: anywhere;
}

.student-app-page .student-home {
    text-align: center;
}

.student-app-page .student-home__hero {
    margin: calc(var(--student-space-3) * -1) calc(var(--student-space-5) * -1) 0;
    padding: var(--student-space-5) var(--student-space-5) var(--student-space-6);
    color: var(--student-white);
    background: var(--student-purple);
    border-radius: 0 0 36px 36px;
}

.student-app-page .student-home__hero h1 {
    margin: var(--student-space-3) 0 var(--student-space-2);
    color: var(--student-white);
    font-size: clamp(1.25rem, 9vw, 1.625rem);
}

.student-app-page .student-home__hero p {
    max-width: 420px;
    margin: 0 auto;
    color: var(--student-white);
}

.student-app-page .student-home__logo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.student-app-page .student-home__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--student-space-5) calc(var(--student-space-2) * -1) 0;
}

.student-app-page .student-home__action {
    display: flex;
    flex: 0 0 25%;
    min-width: 0;
    min-height: 128px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--student-space-2);
    padding: var(--student-space-2);
    color: var(--student-purple);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.student-app-page .student-home__action img {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    -o-object-fit: contain;
       object-fit: contain;
}

.student-app-page .student-home__action-icon {
    display: contents;
}

.student-app-page .student-home__action span {
    overflow-wrap: anywhere;
}

.student-app-page .student-home__action:hover,
.student-app-page .student-home__action:focus {
    color: var(--student-purple-dark);
    text-decoration: underline;
}

.student-app-page .student-home__footer {
    margin-top: var(--student-space-5);
    padding-top: var(--student-space-4);
    border-top: 1px solid var(--student-border);
}

.student-app-page .student-home__banner {
    margin-bottom: var(--student-space-4);
}

.student-app-page .student-home__banner-link,
.student-app-page .student-home__banner img {
    display: block;
    width: 100%;
}

.student-app-page .student-home__banner img {
    height: auto;
    border-radius: var(--student-radius);
}

.student-app-page .student-home__social h2 {
    margin: 0 0 var(--student-space-3);
    color: var(--student-purple);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.student-app-page .student-home__social-links {
    display: flex;
    justify-content: space-between;
    gap: var(--student-space-2);
    max-width: 360px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.student-app-page .student-home__social-links a {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--student-radius);
}

.student-app-page .student-home__social-links img {
    width: 44px;
    height: 44px;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Authenticated homepage follows the prototype shell while retaining existing destinations. */
.student-app-page--home .student-app-shell {
    max-width: 480px;
}

.student-app-page--home .container {
    padding: 0;
}

.student-app-page--home .student-app {
    padding: 0 0 var(--student-space-6);
}

.student-app-page--home .student-home__hero {
    position: relative;
    margin: 0;
    padding: 26px var(--student-space-5) 34px;
    background: var(--student-home-hero);
    border-radius: 0 0 50% 50% / 0 0 14% 14%;
}

.student-app-page--home .student-home__logo {
    width: 96px;
    height: 96px;
}

.student-app-page--home .student-home__hero h1 {
    margin: var(--student-space-3) 0 0;
    font-size: clamp(1.125rem, 7vw, 1.40625rem);
    text-shadow: 0 2px 8px var(--student-text-shadow);
}

.student-app-page--home .student-home__logout {
    position: absolute;
    top: var(--student-space-3);
    right: var(--student-space-3);
    min-height: 0;
    padding: 4px 10px;
    border: 1px solid var(--student-white-a30);
    border-radius: 5px;
    color: var(--student-white);
    background: var(--student-white-a15);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.student-app-page--home .student-app a.student-home__logout {
    color: var(--student-white);
}

.student-app-page--home .student-home__logout:hover,
.student-app-page--home .student-home__logout:focus {
    color: var(--student-home-background);
    background: var(--student-surface);
}

.student-app-page--home .student-home__intro {
    max-width: 360px;
    margin: var(--student-space-4) auto 0;
    padding: 0 var(--student-space-4);
    color: var(--student-white-a82);
}

.student-app-page--home .student-home__actions {
    margin: var(--student-space-4) 0 0;
    padding: 0 var(--student-space-3);
    row-gap: var(--student-space-3);
}

.student-app-page--home .student-app .student-home__action {
    /*
     * Equal tiles, three per row, incomplete rows centred (product owner, 2026-10-11).
     * Not 25%: "Social Programme" at 13px is wider than a quarter of the shell and overlapped
     * its neighbours; content-sized tiles fixed that but looked uneven.
     */
    flex: 0 0 33.3333%;
    min-width: 0;
    min-height: 116px;
    gap: 6px;
    padding: 6px 0;
    color: var(--student-white);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    /* Each label line stays whole; the markup's <br> sets the 2 lines (product owner, 2026-10-11). */
    text-wrap: nowrap;
}

.student-app-page--home .student-home__action-icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--student-surface);
    box-shadow: 0 3px 10px var(--student-shadow-strong);
}

.student-app-page--home .student-home__action-icon img {
    width: 52px;
    height: 52px;
}

.student-app-page--home .student-app .student-home__action:hover,
.student-app-page--home .student-app .student-home__action:focus {
    color: var(--student-white);
}

.student-app-page--home .student-home__footer {
    margin: var(--student-space-4) var(--student-space-4) 0;
    border-top: 0;
}

.student-app-page--home .student-home__social h2 {
    color: var(--student-white);
    font-size: 14px;
}

.student-app-page--home .student-home__social-links a {
    background: var(--student-surface);
}

.student-app-page--home .student-home__social-links img {
    width: 36px;
    height: 36px;
}

.student-app-page--home-guest .student-home__hero h1 {
    font-size: 34px;
}

.student-app-page--home-guest .student-home__intro {
    max-width: 390px;
    font-size: 14px;
    line-height: 1.5;
}

.student-app-page--home .student-home {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.student-app-page--home .student-home__footer {
    margin-top: auto;
    padding-bottom: var(--student-space-2);
}

.student-app-page--home .student-app {
    padding-bottom: 0;
}

/* Registration uses the same visual language without affecting staff forms. */
.student-registration-page {
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    color: var(--student-white);
    background: var(--student-home-background);
}

.student-registration-page .student-registration-shell {
    min-height: 100vh;
    max-width: 560px;
    margin: 0 auto;
    background: var(--student-home-background);
    box-shadow: none;
}

.student-registration-page .student-registration-topbar {
    display: flex;
    position: relative;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: var(--student-space-2) var(--student-space-4);
    background: var(--student-home-hero);
}

.student-registration-page .student-registration-topbar__back {
    position: absolute;
    left: var(--student-space-4);
    color: var(--student-white);
    font-size: 16px;
    text-decoration: none;
}

.student-registration-page .student-registration-topbar__title {
    color: var(--student-white);
    font-size: 1.25rem;
    font-weight: 700;
}

.student-registration-page .student-registration-content {
    padding: var(--student-space-5);
}

.student-registration-page .student-registration-header {
    margin-bottom: var(--student-space-4);
    padding-bottom: 0;
    border-bottom: 0;
}

.student-registration-page .student-registration-header .student-app-title {
    margin: 0;
    color: var(--student-white);
    font-size: 30px;
}

.student-registration-page .student-registration-progress {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: var(--student-space-3);
    margin: calc(-1 * var(--student-space-5)) calc(-1 * var(--student-space-5)) var(--student-space-5);
    padding: 12px var(--student-space-4) 14px;
    background: var(--student-purple-dark);
    border-bottom: 4px solid var(--student-home-hero);
}

.student-registration-page .student-registration-progress::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: var(--registration-progress);
    height: 4px;
    background: var(--student-lime);
    content: "";
}

.student-registration-page .student-registration-progress__dots {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.student-registration-page .student-registration-progress__dot {
    width: 10px;
    height: 10px;
    border: 1px solid var(--student-white-a65);
    border-radius: 50%;
    background: var(--student-surface);
}

.student-registration-page .student-registration-progress__dot.is-done {
    border-color: var(--student-lime);
    background: var(--student-lime);
}

.student-registration-page .student-registration-progress__label {
    margin: 0;
    color: var(--student-white-a82);
    font-size: 14px;
    text-align: left;
}

.student-registration-page .student-registration-form .form-group {
    margin-bottom: var(--student-space-5);
}

.student-registration-page .student-registration-form label {
    color: var(--student-white-a72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.student-registration-page .help-block,
.student-registration-page .help-text {
    color: var(--student-white-a72);
    font-size: .8125rem;
    font-weight: 400;
}

.student-registration-page .student-registration-form .form-control {
    font-size: 1rem;
}

.student-registration-page .student-app-error {
    margin-top: var(--student-space-2);
    margin-bottom: 0;
}

.student-registration-page .student-app-actions {
    margin-top: var(--student-space-5);
}

.student-registration-page .student-app-primary-action {
    width: 100%;
}

.student-registration-page .student-registration-completion {
    display: flex;
    min-height: calc(100vh - 44px - (2 * var(--student-space-5)));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--student-space-5) 0;
    text-align: center;
}

.student-registration-page .student-registration-completion__tick {
    width: 80px;
    height: 80px;
    margin-bottom: var(--student-space-5);
    color: var(--student-lime);
}

.student-registration-page .student-registration-completion .student-registration-header {
    margin-bottom: var(--student-space-3);
}

.student-registration-page .student-registration-completion p {
    max-width: 360px;
    margin: 0 auto;
    color: var(--student-white-a82);
}

.student-registration-page .student-registration-completion .student-app-actions {
    width: 100%;
}

.student-registration-page .student-registration-completion .student-app-primary-action {
    width: 33.333%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 14px;
    white-space: nowrap;
}

/* Internal screens use the same purple shell as the prototype. */
.student-app-page .student-app-event-card .panel-body {
    color: var(--student-ink);
    background: var(--student-surface);
}

.student-app-page .student-profile__student-name {
    margin: 0 0 var(--student-space-2);
    color: var(--student-white);
    font-size: 1.25rem;
    font-weight: 700;
}

.student-app-page .student-app .student-profile__edit.btn-primary {
    min-width: 108px;
    min-height: 30px;
    padding: 5px 16px;
    border-color: var(--student-white-a38);
    border-radius: 18px;
    color: var(--student-white);
    background: var(--student-white-a10);
    font-weight: 700;
}

.student-app-page .student-class-details .nav-tabs > li.active > a {
    color: var(--student-home-background);
}

/* Authenticated content patterns. */
.student-app-page .student-profile__actions {
    margin-bottom: var(--student-space-4);
    line-height: 1.2;
}

.student-app-page .student-profile__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

.student-app-page .student-profile__cards {
    display: grid;
    gap: var(--student-space-4);
}

.student-app-page .student-profile-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--student-white-a18);
    border-radius: 9px;
    background: var(--student-white-a08);
    box-shadow: none;
}

.student-app-page .student-profile-card.panel-primary > .panel-heading {
    padding: 8px 12px;
    border: 0;
    background: var(--student-white-a10);
}

.student-app-page .student-profile-card.panel-primary > .panel-heading .panel-title {
    margin: 5px 0;
    color: var(--student-white-a68);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.student-app-page .student-profile-card.panel-primary > .panel-heading .glyphicon {
    margin-right: 6px;
}

.student-app-page .student-profile-card .panel-body {
    padding: 10px 12px;
    color: var(--student-white);
    background: transparent;
}

.student-app-page .student-profile-card__fields {
    margin: 0;
}

.student-app-page .student-profile-card__field + .student-profile-card__field {
    margin-top: var(--student-space-3);
    padding-top: var(--student-space-3);
    border-top: 1px solid var(--student-white-a18);
}

.student-app-page .student-profile-card__field dt {
    color: var(--student-white-a68);
    font-size: .8125rem;
    letter-spacing: .1em;
}

.student-app-page .student-profile-card .student-profile-card__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
    gap: var(--student-space-3);
}

.student-app-page .student-profile-card__field dd {
    margin: var(--student-space-1) 0 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.student-app-page .student-profile-card .student-profile-card__field dd {
    margin-top: 0;
    color: var(--student-white);
    text-align: right;
}

.student-app-page .student-app-missing-value {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--student-purple-dark);
    background: var(--student-surface);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.student-app-page--profile-edit .student-profile-edit h2 {
    margin-top: 0;
}

.student-app-page--profile-edit .student-profile-edit__form > h3 {
    float: none;
    width: 100%;
    margin: var(--student-space-4) 0 0;
    padding: 10px 14px;
    border-radius: 8px 8px 0 0;
    color: var(--student-white);
    background: var(--student-purple);
    font-size: .9375rem;
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div {
    float: none;
    width: 100%;
    margin: 0 0 var(--student-space-3);
    padding: 14px;
    border-radius: 0 0 8px 8px;
    background: transparent;
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div .form-control {
    font-size: 1rem;
    border-color: var(--student-white-a55);
    color: var(--student-white);
    background: var(--student-white-a12);
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div .form-control option {
    color: var(--student-ink);
    background: var(--student-surface);
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div select.form-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div label {
    color: var(--student-white);
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div .help-block {
    color: var(--student-white-a75);
    font-size: .875rem;
    font-weight: 400;
}

.student-app-page--profile-edit .student-profile-edit__form > h3 + div .form-group {
    padding: 0;
    background: transparent;
}

.student-app-page--profile-edit .student-profile-edit__form > .col-md-6:last-child {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
}

.student-app-page--profile-edit .student-profile-edit__form > .col-md-6:last-child .btn {
    display: block;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.student-app-page--logout .student-app form {
    text-align: center;
}

.student-app-page--logout .student-app form h2 {
    margin: var(--student-space-6) 0;
    font-size: 1.25rem;
    text-align: center;
}

.student-app-page--logout .student-app form .btn {
    margin: 0 var(--student-space-2);
}

.student-app-page .student-app-empty-state {
    margin: var(--student-space-5) 0;
    padding: var(--student-space-5);
    border: 1px solid var(--student-white-a20);
    border-radius: var(--student-radius);
    color: var(--student-white-a80);
    background: var(--student-panel-dark);
    box-shadow: none;
}

.student-app-page .student-app-empty-state h2 {
    margin: var(--student-space-2) 0 0;
    color: var(--student-white);
    font-size: .75rem;
}

.student-app-page .student-app-empty-state--inline {
    margin: var(--student-space-3) 0;
    padding: var(--student-space-4);
}

.student-app-page .student-class-details__section + .student-class-details__section {
    margin-top: var(--student-space-6);
    padding-top: var(--student-space-4);
    border-top: 1px solid var(--student-white-a20);
}

.student-app-page .student-class-details h2 {
    font-size: .9375rem;
    text-transform: uppercase;
}

.student-app-page .student-class-details__historical-booking h3 {
    font-size: 1em;
    font-weight: 700;
}

.student-app-page .student-app .student-class-details .table > tbody > tr > td {
    border-top: 0;
}

.student-app-page .student-class-details__welcome {
    max-width: 390px;
    margin: var(--student-space-6) auto;
    padding: var(--student-space-6) var(--student-space-4);
    border-radius: 10px;
    background: var(--student-white-a08);
}

.student-app-page .student-class-details__emoji {
    display: block;
    margin-bottom: var(--student-space-3);
    font-size: 1.875rem;
    line-height: 1;
}

.student-app-page .student-class-details__welcome h2 {
    margin: 0 0 var(--student-space-3);
    color: var(--student-white);
    font-size: .7812rem;
}

.student-app-page .student-class-details__welcome p {
    margin: 0;
    color: var(--student-white-a76);
    line-height: 1.5;
}

.student-app-page .student-class-details .nav-tabs {
    display: flex;
    border-color: var(--student-white-a28);
}

.student-app-page .student-class-details .nav-tabs > li {
    flex: 1 1 50%;
    text-align: center;
}

.student-app-page .student-class-details .nav-tabs > li > a {
    min-height: 44px;
    margin: 0;
    color: var(--student-white);
}

.student-app-page .student-class-details .timetable table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--student-purple-dark);
}

.student-app-page .student-class-details .timetable th:first-child,
.student-app-page .student-class-details .timetable td:first-child {
    width: 112px;
}

.student-app-page .student-class-details .timetable {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.student-app-page .student-class-details .timetable table {
    min-width: 900px;
}

.student-app-page .student-class-details .timetable th:nth-child(2),
.student-app-page .student-class-details .timetable th:nth-child(3),
.student-app-page .student-class-details .timetable th:nth-child(4) {
    width: 64px;
}

.student-app-page .student-class-details .timetable th:nth-child(5) {
    width: 180px;
}

.student-app-page .student-class-details .timetable th:nth-child(6) {
    width: 240px;
}

.student-app-page .student-class-details .timetable th:nth-child(7) {
    width: 176px;
}

.student-app-page .student-class-details .timetable tbody > tr > td {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.student-app-page .student-class-details .timetable td:nth-child(5),
.student-app-page .student-class-details .timetable td:nth-child(7) {
    white-space: normal;
}

.student-app-page .student-app .student-tutorial {
    border: 1px solid var(--student-white-a20);
    border-radius: var(--student-radius);
    color: var(--student-white);
    background: transparent;
    overflow: hidden;
}

.student-app-page .student-app .student-tutorial > .panel-heading {
    padding: 14px;
    border: 0;
    color: var(--student-white);
    background: var(--student-white-a08);
    font-weight: 600;
    cursor: pointer;
}

.student-app-page .student-app .student-tutorial > .panel-body {
    padding: 14px;
    color: var(--student-white);
    background: transparent;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.student-app-page .student-tutorial__response .title,
.student-app-page .student-tutorial__response .answer {
    display: block;
}

.student-app-page .student-class-details .timetable th:nth-child(5),
.student-app-page .student-class-details .timetable th:nth-child(1),
.student-app-page .student-class-details .timetable td:nth-child(1),
.student-app-page .student-class-details .timetable th:nth-child(7) {
    white-space: nowrap;
}

.student-app-page .student-social-activities__list > [role="listitem"] + [role="listitem"] {
    margin-top: var(--student-space-2);
}

.student-app-page .student-app-event-card__panel {
    margin: 0 0 2.5rem 0;
}

.student-app-page .student-app .panel-primary > .student-app-event-card__header {
    padding: 0;
    background: var(--student-home-hero);
}

.student-app-page .student-app-event-card__date {
    display: block;
    margin-bottom: 0;
    padding: 10px 12px;
    color: var(--student-white);
    font-weight: 700;
    text-transform: uppercase;
}

.student-app-page .student-app .student-app-event-card__title {
    margin: 0;
    padding: var(--student-space-3);
    padding-top: calc(var(--student-space-3) / 2);
    background: var(--student-home-hero);
    font-size: 1.25rem;
    line-height: 1.3;
}

.student-app-page .student-app-event-card__body {
    display: flow-root;
    padding: 10px 12px;
}

/* Booked: bright green tick badge, top right of the white body (product owner, 2026-10-11). */
.student-app-page .student-app-event-card__body .student-app-event-card__booked-badge {
    float: right;
    margin: 0 0 var(--student-space-2) var(--student-space-3);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--student-booked-green);
    color: var(--student-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
}

.student-app-page .student-app-event-card__booked-badge .glyphicon {
    top: 2px;
    margin-right: 2px;
}

/* Cancel a booking: small and muted so it does not compete with BOOKED. */
.student-app-page .student-app-event-card .student-app-event-card__cancel {
    border-color: var(--student-border);
    background: transparent;
    color: var(--student-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.student-app-page .student-app-event-card .student-app-event-card__cancel:hover,
.student-app-page .student-app-event-card .student-app-event-card__cancel:focus {
    border-color: var(--student-muted);
    color: var(--student-ink);
}

/* Waiting list / Stripe-paid "Go to Reception": full-width notice above the price row (product owner, 2026-10-11). */
.student-app-page .student-app-event-card__booking > .student-app-event-card__notice {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: var(--student-space-2) var(--student-space-3);
    border-radius: var(--student-radius);
    background: var(--student-purple-tint);
    color: var(--student-purple-dark);
    font-size: 14px;
}

.student-app-page .student-app-event-card__body .student-app-event-card__notice p {
    margin: 0;
}

.student-app-page .student-app-event-card__notice ~ .student-app-event-card__price,
.student-app-page .student-app-event-card__notice ~ .student-app-event-card__actions {
    grid-row: 2;
}

.student-app-page .student-app .student-app-event-card__booking .form-control {
    font-size: 1rem;
}

.student-app-page .student-app-event-card__booking form button[type="submit"] {
    text-transform: uppercase;
}

.student-app-page .student-app-event-card__body p {
    margin-bottom: var(--student-space-2);
}

.student-app-page .student-app-event-card__body .student-app-event-card__description {
    display: -webkit-box;
    margin-bottom: var(--student-space-4);
    overflow-wrap: anywhere;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-app-page .student-app-event-card__body .student-app-event-card__price {
    grid-column: 1;
    justify-self: start;
    margin-bottom: 0;
    padding: 4px 12px;
    border-radius: var(--student-radius);
    background: var(--student-purple-tint);
    color: var(--student-purple-dark);
    font-weight: 700;
}

.student-app-page .student-app-event-card__body .student-app-event-card__price.text-primary {
    background: var(--student-lime-tint);
}

.student-app-page .student-app-event-card .btn-success {
    border-color: var(--student-lime-dark);
    background: var(--student-lime);
    color: var(--student-white);
}

.student-app-page .student-app-event-card .btn-success:hover,
.student-app-page .student-app-event-card .btn-success:focus,
.student-app-page .student-app-event-card .btn-success:active {
    background: var(--student-lime-dark);
    color: var(--student-white);
}

.student-app-page .student-app-event-card__booking {
    clear: both;
    /* Breathing room between the description/badge and the price + CTA stripe (padding: a margin would collapse into the description's). */
    padding-top: var(--student-space-3);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    -moz-column-gap: var(--student-space-2);
         column-gap: var(--student-space-2);
    row-gap: var(--student-space-2);
}

.student-app-page .student-app-event-card__booking--full {
    align-items: end;
    row-gap: 0;
}

.student-app-page .student-app-event-card__booking > form,
.student-app-page .student-app-event-card__booking > .text-primary:not(.student-app-event-card__price),
.student-app-page .student-app-event-card__booking > .text-muted,
.student-app-page .student-app-event-card__booking > .text-warning {
    grid-column: 1 / -1;
}

.student-app-page .student-app-event-card__booking > .student-app-event-card__full-status {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.student-app-page .student-app-event-card__booking > .btn {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

.student-app-page .student-app-event-card__booking--full > .btn {
    grid-row: 1 / span 2;
    align-self: end;
}

.student-app-page .student-app-event-card__actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--student-space-2);
}

.student-app-page .student-app-event-card__booking--full .student-app-event-card__actions {
    grid-row: 1 / span 2;
    align-self: end;
}

.student-app-page .student-app-event-card__actions > * {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 559px) {
    .student-app-page .container {
        padding-right: var(--student-space-4);
        padding-left: var(--student-space-4);
    }

    .student-app-page .student-app__screen-header {
        padding-right: var(--student-space-4);
        padding-left: var(--student-space-4);
    }

    .student-app-page .student-home__hero {
        margin-right: calc(var(--student-space-4) * -1);
        margin-left: calc(var(--student-space-4) * -1);
    }

    .student-app-page .student-home__action {
        flex-basis: 33.3333%;
        min-height: 132px;
        padding-right: var(--student-space-1);
        padding-left: var(--student-space-1);
        font-size: .5625rem;
    }

    .student-app-page .student-home__action img {
        width: 56px;
        height: 56px;
    }

    .student-app-page--home .student-app .student-home__action {
        font-size: 13px;
    }

    .student-app-page--home .student-home__action-icon {
        width: 58px;
        height: 58px;
    }

    .student-app-page--home .student-home__action-icon img {
        width: 48px;
        height: 48px;
    }

    .student-registration-page .student-registration-content {
        padding: var(--student-space-4);
    }

    .student-registration-page .student-registration-progress__label {
        font-size: 14px;
    }

    .student-registration-page .student-registration-progress {
        margin-right: calc(-1 * var(--student-space-4));
        margin-left: calc(-1 * var(--student-space-4));
    }

    .student-app-page .student-app form .btn-primary,
    .student-registration-page form .btn-primary {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .student-app-page *,
    .student-registration-page * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Profile, Requirements panel: reception note above the first field (product owner, 2026-10-11). */
.student-app-page .student-profile-card__note {
    margin: 0 0 var(--student-space-3);
    padding-bottom: var(--student-space-3);
    border-bottom: 1px solid var(--student-white-a18);
    color: var(--student-white);
    font-size: 14px;
}

/* Registration, medical step: "WSE keeps the following personal information…" reads at 14px (product owner, 2026-10-11). */
.student-registration-page .help-block.student-registration__data-intro {
    font-size: 14px;
}

/* Very narrow phones: a third of the shell is narrower than "Social Programme" at 13px. Kept last so it overrides the 559px block. */
@media (max-width: 359px) {
    .student-app-page--home .student-app .student-home__action {
        font-size: 11px;
    }
}